|
| 1 | +/* Copyright 2021, Milkdown by Mirone. */ |
| 2 | +import { useNodeViewContext } from '@prosemirror-adapter/react' |
| 3 | +import { visit } from 'unist-util-visit' |
| 4 | +import type { Ctx, MilkdownPlugin } from '@milkdown/ctx' |
| 5 | +import type { Node } from '@milkdown/transformer' |
| 6 | +import type { $NodeSchema } from '@milkdown/utils' |
| 7 | +import type { PluginCtx } from './types' |
| 8 | + |
| 9 | +import { remarkCtx } from '@milkdown/core' |
| 10 | +import { wrappingInputRule } from '@milkdown/prose/inputrules' |
| 11 | +import { |
| 12 | + $inputRule, |
| 13 | + $nodeAttr, |
| 14 | + $nodeSchema, |
| 15 | + $remark, |
| 16 | + $view, |
| 17 | +} from '@milkdown/utils' |
| 18 | + |
| 19 | +import { AlertIcon } from '~/components/ui/markdown/parsers/alert' |
| 20 | +import { cloneDeep } from '~/lib/lodash' |
| 21 | + |
| 22 | +/// HTML attributes for alert node. |
| 23 | +export const alertAttr = $nodeAttr('alert') |
| 24 | + |
| 25 | +/// Schema for alert node. |
| 26 | +export const alertSchema: $NodeSchema<'alert'> = $nodeSchema( |
| 27 | + 'alert', |
| 28 | + (ctx) => ({ |
| 29 | + content: 'block+', |
| 30 | + group: 'block', |
| 31 | + attrs: { |
| 32 | + type: { default: '' }, |
| 33 | + text: { default: '' }, |
| 34 | + }, |
| 35 | + defining: true, |
| 36 | + parseDOM: [{ tag: 'blockquote' }], |
| 37 | + toDOM: (node) => ['blockquote', ctx.get(alertAttr.key)(node), 0], |
| 38 | + parseMarkdown: { |
| 39 | + match: ({ type }) => type === 'alert', |
| 40 | + runner: (state, node, type) => { |
| 41 | + state |
| 42 | + .openNode(type, (node as any as { value: AlertValue }).value) |
| 43 | + .closeNode() |
| 44 | + }, |
| 45 | + }, |
| 46 | + toMarkdown: { |
| 47 | + match: (node) => node.type.name === 'alert', |
| 48 | + runner: (state, node) => { |
| 49 | + state |
| 50 | + .openNode('alert', node.attrs as any) |
| 51 | + |
| 52 | + .closeNode() |
| 53 | + }, |
| 54 | + }, |
| 55 | + }), |
| 56 | +) |
| 57 | + |
| 58 | +export type AlertValue = { |
| 59 | + type: string |
| 60 | + text: string |
| 61 | +} |
| 62 | +function createAlertDiv(contents: AlertValue) { |
| 63 | + return { |
| 64 | + type: 'alert', |
| 65 | + value: contents, |
| 66 | + } |
| 67 | +} |
| 68 | + |
| 69 | +function visitCodeBlock(ast: Node, stringify: (ast: any) => string) { |
| 70 | + return visit( |
| 71 | + ast, |
| 72 | + 'blockquote', |
| 73 | + (node: any, index, parent: Node & { children: Node[] }) => { |
| 74 | + if (node.children.length < 1) { |
| 75 | + return node |
| 76 | + } |
| 77 | + |
| 78 | + const firstChildren = node.children[0] |
| 79 | + if (firstChildren.type !== 'paragraph') { |
| 80 | + return node |
| 81 | + } |
| 82 | + const innerChild = firstChildren.children[0] |
| 83 | + if (!innerChild || innerChild.type !== 'text') { |
| 84 | + return node |
| 85 | + } |
| 86 | + |
| 87 | + const firstLineOfInnerChildText = innerChild.value.split( |
| 88 | + '\n', |
| 89 | + )[0] as string |
| 90 | + |
| 91 | + const matched = firstLineOfInnerChildText.match(/^\[!(.*?)\]$/) |
| 92 | + |
| 93 | + if (!matched) { |
| 94 | + return node |
| 95 | + } |
| 96 | + |
| 97 | + const transformedTree = cloneDeep(node) |
| 98 | + transformedTree.children[0].children = |
| 99 | + transformedTree.children[0].children.slice(1) |
| 100 | + |
| 101 | + transformedTree.type = 'root' |
| 102 | + const newNode = createAlertDiv({ |
| 103 | + // FIXME: replace all backslashes with empty string, |
| 104 | + text: stringify(transformedTree).replace(/\\/g, '') || '', |
| 105 | + type: (matched[1] as string) || 'NOTE', |
| 106 | + }) |
| 107 | + |
| 108 | + if (parent && index != null) parent.children.splice(index, 1, newNode) |
| 109 | + |
| 110 | + return node |
| 111 | + }, |
| 112 | + ) |
| 113 | +} |
| 114 | + |
| 115 | +function remarkAlert(ctx: Ctx) { |
| 116 | + function transformer(tree: Node) { |
| 117 | + visitCodeBlock(tree, (val) => ctx.get(remarkCtx).stringify(val)) |
| 118 | + } |
| 119 | + |
| 120 | + return transformer |
| 121 | +} |
| 122 | + |
| 123 | +export const remarkAlertPlugin = $remark('remarkAlert', (c) => |
| 124 | + remarkAlert.bind(null, c), |
| 125 | +) |
| 126 | + |
| 127 | +export const wrapInAlertInputRule = [ |
| 128 | + $inputRule((ctx) => wrappingInputRule(/^\s*>\[\s$/, alertSchema.type(ctx))), |
| 129 | + |
| 130 | + $inputRule((ctx) => wrappingInputRule(/^\s*> \[!\s$/, alertSchema.type(ctx))), |
| 131 | + $inputRule((ctx) => |
| 132 | + wrappingInputRule( |
| 133 | + /^\s*> \[!(?<type>NOTE|IMPORTANT|WARNING)\]\s$/, |
| 134 | + alertSchema.type(ctx), |
| 135 | + (match) => { |
| 136 | + return { |
| 137 | + type: match.groups?.type, |
| 138 | + } |
| 139 | + }, |
| 140 | + ), |
| 141 | + ), |
| 142 | +] |
| 143 | + |
| 144 | +// TODO text editor for alert |
| 145 | + |
| 146 | +const AlertRender = () => { |
| 147 | + const { contentRef, setAttrs, node, selected } = useNodeViewContext() |
| 148 | + |
| 149 | + const attrs = node.attrs as AlertValue |
| 150 | + const type = attrs.type |
| 151 | + |
| 152 | + return ( |
| 153 | + <div> |
| 154 | + <blockquote |
| 155 | + className="my-4 flex flex-col rounded !bg-accent/10 p-0.5" |
| 156 | + contentEditable={false} |
| 157 | + > |
| 158 | + <AlertIcon type={type as any} /> |
| 159 | + <div>{attrs.text}</div> |
| 160 | + </blockquote> |
| 161 | + </div> |
| 162 | + ) |
| 163 | +} |
| 164 | + |
| 165 | +export const AlertPlugin: (pluginCtx: PluginCtx) => MilkdownPlugin[] = ({ |
| 166 | + nodeViewFactory, |
| 167 | +}) => [ |
| 168 | + $view(alertSchema.node, () => |
| 169 | + nodeViewFactory({ |
| 170 | + component: AlertRender, |
| 171 | + }), |
| 172 | + ), |
| 173 | + alertSchema as any as MilkdownPlugin, |
| 174 | + alertAttr, |
| 175 | + remarkAlertPlugin as any as MilkdownPlugin, |
| 176 | + ...(wrapInAlertInputRule.flat() as any as MilkdownPlugin[]), |
| 177 | +] |
0 commit comments