perf: 文本编辑优化

src/utils/prosemirror/plugins/inputrules.ts

@@ -6,6 +6,7 @@ import {
   smartQuotes,
   emDash,
   ellipsis,
+  InputRule,
 } from 'prosemirror-inputrules'
 
 const blockQuoteRule = (nodeType: NodeType) => wrappingInputRule(/^\s*>\s$/, nodeType)
@@ -23,6 +24,19 @@ const bulletListRule = (nodeType: NodeType) => wrappingInputRule(/^\s*([-+*])\s$
 
 const codeBlockRule = (nodeType: NodeType) => textblockTypeInputRule(/^```$/, nodeType)
 
+const linkRule = () => {
+  const urlRegEx = /(?:https?:\/\/)?[\w-]+(?:\.[\w-]+)+\.?(?:\d+)?(?:\/\S*)?$/
+  
+  return new InputRule(urlRegEx, (state, match, start, end) => {
+    const { schema } = state
+
+    const tr = state.tr.insertText(match[0], start, end)
+    const mark = schema.marks.link.create({ href: match[0], title: match[0] })
+
+    return tr.addMark(start, start + match[0].length, mark)
+  })
+}
+
 export const buildInputRules = (schema: Schema) => {
   const rules = [
     ...smartQuotes,
@@ -33,6 +47,7 @@ export const buildInputRules = (schema: Schema) => {
   rules.push(orderedListRule(schema.nodes.ordered_list))
   rules.push(bulletListRule(schema.nodes.bullet_list))
   rules.push(codeBlockRule(schema.nodes.code_block))
+  rules.push(linkRule())
 
   return inputRules({ rules })
 }

src/utils/prosemirror/plugins/keymap.ts

@@ -38,6 +38,7 @@ export const buildKeymap = (schema: Schema) => {
   ))
   bind('Mod-[', liftListItem(schema.nodes.list_item))
   bind('Mod-]', sinkListItem(schema.nodes.list_item))
+  bind('Tab', sinkListItem(schema.nodes.list_item))
 
   return keys
 }

src/utils/prosemirror/schema/marks.ts

@@ -37,7 +37,7 @@ const strikethrough: MarkSpec = {
       getAttrs: value => value === 'line-through' && null
     },
   ],
-  toDOM: () => ['span', { style: 'text-decoration-line: line-through' }, 0],
+  toDOM: () => ['span', { style: 'text-decoration-line: line-through;' }, 0],
 }
 
 const underline: MarkSpec = {
@@ -52,7 +52,7 @@ const underline: MarkSpec = {
       getAttrs: value => value === 'underline' && null
     },
   ],
-  toDOM: () => ['span', { style: 'text-decoration: underline' }, 0],
+  toDOM: () => ['span', { style: 'text-decoration: underline;' }, 0],
 }
 
 const forecolor: MarkSpec = {
@@ -110,7 +110,7 @@ const fontsize: MarkSpec = {
   toDOM: mark => {
     const { fontsize } = mark.attrs
     let style = ''
-    if (fontsize) style += `font-size: ${fontsize}`
+    if (fontsize) style += `font-size: ${fontsize};`
     return ['span', { style }, 0]
   },
 }
@@ -132,7 +132,7 @@ const fontname: MarkSpec = {
   toDOM: mark => {
     const { fontname } = mark.attrs
     let style = ''
-    if (fontname) style += `font-family: ${fontname}`
+    if (fontname) style += `font-family: ${fontname};`
     return ['span', { style }, 0]
   },
 }