fix: remove some magic strings

demos/src/Examples/Community/React/index.jsx

@@ -28,7 +28,7 @@ export default () => {
     ],
     content: `
       <p>
-        What do you all think about the new <span data-mention data-id="Winona Ryder"></span> movie?
+        What do you all think about the new <span data-type="mention" data-id="Winona Ryder"></span> movie?
       </p>
     `,
   })

demos/src/Examples/Community/Vue/index.vue

@@ -79,7 +79,7 @@ export default {
       ],
       content: `
         <p>
-          What do you all think about the new <span data-mention data-id="Winona Ryder"></span> movie?
+          What do you all think about the new <span data-type="mention" data-id="Winona Ryder"></span> movie?
         </p>
       `,
     })

demos/src/Nodes/Mention/React/index.jsx

@@ -22,9 +22,9 @@ export default () => {
     ],
     content: `
         <p>Hi everyone! Don’t forget the daily stand up at 8 AM.</p>
-        <p><span data-mention data-id="Jennifer Grey"></span> Would you mind to share what you’ve been working on lately? We fear not much happened since Dirty Dancing.
-        <p><span data-mention data-id="Winona Ryder"></span> <span data-mention data-id="Axl Rose"></span> Let’s go through your most important points quickly.</p>
-        <p>I have a meeting with <span data-mention data-id="Christina Applegate"></span> and don’t want to come late.</p>
+        <p><span data-type="mention" data-id="Jennifer Grey"></span> Would you mind to share what you’ve been working on lately? We fear not much happened since Dirty Dancing.
+        <p><span data-type="mention" data-id="Winona Ryder"></span> <span data-type="mention" data-id="Axl Rose"></span> Let’s go through your most important points quickly.</p>
+        <p>I have a meeting with <span data-type="mention" data-id="Christina Applegate"></span> and don’t want to come late.</p>
         <p>– Thanks, your big boss</p>
       `,
   })

demos/src/Nodes/Mention/Vue/index.vue

@@ -38,9 +38,9 @@ export default {
       ],
       content: `
         <p>Hi everyone! Don’t forget the daily stand up at 8 AM.</p>
-        <p><span data-mention data-id="Jennifer Grey"></span> Would you mind to share what you’ve been working on lately? We fear not much happened since Dirty Dancing.
-        <p><span data-mention data-id="Winona Ryder"></span> <span data-mention data-id="Axl Rose"></span> Let’s go through your most important points quickly.</p>
-        <p>I have a meeting with <span data-mention data-id="Christina Applegate"></span> and don’t want to come late.</p>
+        <p><span data-type="mention" data-id="Jennifer Grey"></span> Would you mind to share what you’ve been working on lately? We fear not much happened since Dirty Dancing.
+        <p><span data-type="mention" data-id="Winona Ryder"></span> <span data-type="mention" data-id="Axl Rose"></span> Let’s go through your most important points quickly.</p>
+        <p>I have a meeting with <span data-type="mention" data-id="Christina Applegate"></span> and don’t want to come late.</p>
         <p>– Thanks, your big boss</p>
       `,
     })

packages/extension-blockquote/src/blockquote.ts

@@ -54,13 +54,13 @@ export const Blockquote = Node.create<BlockquoteOptions>({
   addCommands() {
     return {
       setBlockquote: () => ({ commands }) => {
-        return commands.wrapIn('blockquote')
+        return commands.wrapIn(this.name)
       },
       toggleBlockquote: () => ({ commands }) => {
-        return commands.toggleWrap('blockquote')
+        return commands.toggleWrap(this.name)
       },
       unsetBlockquote: () => ({ commands }) => {
-        return commands.lift('blockquote')
+        return commands.lift(this.name)
       },
     }
   },

packages/extension-bold/src/bold.ts

@@ -65,13 +65,13 @@ export const Bold = Mark.create<BoldOptions>({
   addCommands() {
     return {
       setBold: () => ({ commands }) => {
-        return commands.setMark('bold')
+        return commands.setMark(this.name)
       },
       toggleBold: () => ({ commands }) => {
-        return commands.toggleMark('bold')
+        return commands.toggleMark(this.name)
       },
       unsetBold: () => ({ commands }) => {
-        return commands.unsetMark('bold')
+        return commands.unsetMark(this.name)
       },
     }
   },

packages/extension-bullet-list/src/bullet-list.ts

@@ -43,7 +43,7 @@ export const BulletList = Node.create<BulletListOptions>({
   addCommands() {
     return {
       toggleBulletList: () => ({ commands }) => {
-        return commands.toggleList('bulletList', 'listItem')
+        return commands.toggleList(this.name, 'listItem')
       },
     }
   },

packages/extension-code-block/src/code-block.ts

@@ -91,10 +91,10 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
   addCommands() {
     return {
       setCodeBlock: attributes => ({ commands }) => {
-        return commands.setNode('codeBlock', attributes)
+        return commands.setNode(this.name, attributes)
       },
       toggleCodeBlock: attributes => ({ commands }) => {
-        return commands.toggleNode('codeBlock', 'paragraph', attributes)
+        return commands.toggleNode(this.name, 'paragraph', attributes)
       },
     }
   },

packages/extension-code/src/code.ts

@@ -57,13 +57,13 @@ export const Code = Mark.create<CodeOptions>({
   addCommands() {
     return {
       setCode: () => ({ commands }) => {
-        return commands.setMark('code')
+        return commands.setMark(this.name)
       },
       toggleCode: () => ({ commands }) => {
-        return commands.toggleMark('code')
+        return commands.toggleMark(this.name)
       },
       unsetCode: () => ({ commands }) => {
-        return commands.unsetMark('code')
+        return commands.unsetMark(this.name)
       },
     }
   },

packages/extension-heading/src/heading.ts

@@ -71,14 +71,14 @@ export const Heading = Node.create<HeadingOptions>({
           return false
         }
 
-        return commands.setNode('heading', attributes)
+        return commands.setNode(this.name, attributes)
       },
       toggleHeading: attributes => ({ commands }) => {
         if (!this.options.levels.includes(attributes.level)) {
           return false
         }
 
-        return commands.toggleNode('heading', 'paragraph', attributes)
+        return commands.toggleNode(this.name, 'paragraph', attributes)
       },
     }
   },

packages/extension-highlight/src/highlight.ts

@@ -80,13 +80,13 @@ export const Highlight = Mark.create<HighlightOptions>({
   addCommands() {
     return {
       setHighlight: attributes => ({ commands }) => {
-        return commands.setMark('highlight', attributes)
+        return commands.setMark(this.name, attributes)
       },
       toggleHighlight: attributes => ({ commands }) => {
-        return commands.toggleMark('highlight', attributes)
+        return commands.toggleMark(this.name, attributes)
       },
       unsetHighlight: () => ({ commands }) => {
-        return commands.unsetMark('highlight')
+        return commands.unsetMark(this.name)
       },
     }
   },

packages/extension-italic/src/italic.ts

@@ -64,13 +64,13 @@ export const Italic = Mark.create<ItalicOptions>({
   addCommands() {
     return {
       setItalic: () => ({ commands }) => {
-        return commands.setMark('italic')
+        return commands.setMark(this.name)
       },
       toggleItalic: () => ({ commands }) => {
-        return commands.toggleMark('italic')
+        return commands.toggleMark(this.name)
       },
       unsetItalic: () => ({ commands }) => {
-        return commands.unsetMark('italic')
+        return commands.unsetMark(this.name)
       },
     }
   },

packages/extension-link/src/link.ts

@@ -82,13 +82,13 @@ export const Link = Mark.create<LinkOptions>({
   addCommands() {
     return {
       setLink: attributes => ({ commands }) => {
-        return commands.setMark('link', attributes)
+        return commands.setMark(this.name, attributes)
       },
       toggleLink: attributes => ({ commands }) => {
-        return commands.toggleMark('link', attributes, { extendEmptyMarkRange: true })
+        return commands.toggleMark(this.name, attributes, { extendEmptyMarkRange: true })
       },
       unsetLink: () => ({ commands }) => {
-        return commands.unsetMark('link', { extendEmptyMarkRange: true })
+        return commands.unsetMark(this.name, { extendEmptyMarkRange: true })
       },
     }
   },
@@ -120,7 +120,7 @@ export const Link = Mark.create<LinkOptions>({
           key: new PluginKey('handleClickLink'),
           props: {
             handleClick: (view, pos, event) => {
-              const attrs = this.editor.getAttributes('link')
+              const attrs = this.editor.getAttributes(this.name)
               const link = (event.target as HTMLElement)?.closest('a')
 
               if (link && attrs.href) {

packages/extension-list-item/src/list-item.ts

@@ -31,9 +31,9 @@ export const ListItem = Node.create<ListItemOptions>({
 
   addKeyboardShortcuts() {
     return {
-      Enter: () => this.editor.commands.splitListItem('listItem'),
-      Tab: () => this.editor.commands.sinkListItem('listItem'),
-      'Shift-Tab': () => this.editor.commands.liftListItem('listItem'),
+      Enter: () => this.editor.commands.splitListItem(this.name),
+      Tab: () => this.editor.commands.sinkListItem(this.name),
+      'Shift-Tab': () => this.editor.commands.liftListItem(this.name),
     }
   },
 })

packages/extension-mention/src/mention.ts

@@ -105,7 +105,7 @@ export const Mention = Node.create<MentionOptions>({
   parseHTML() {
     return [
       {
-        tag: 'span[data-mention]',
+        tag: `span[data-type="${this.name}"]`,
       },
     ]
   },
@@ -113,7 +113,7 @@ export const Mention = Node.create<MentionOptions>({
   renderHTML({ node, HTMLAttributes }) {
     return [
       'span',
-      mergeAttributes({ 'data-mention': '' }, this.options.HTMLAttributes, HTMLAttributes),
+      mergeAttributes({ 'data-type': this.name }, this.options.HTMLAttributes, HTMLAttributes),
       this.options.renderLabel({
         options: this.options,
         node,

packages/extension-ordered-list/src/ordered-list.ts

@@ -62,7 +62,7 @@ export const OrderedList = Node.create<OrderedListOptions>({
   addCommands() {
     return {
       toggleOrderedList: () => ({ commands }) => {
-        return commands.toggleList('orderedList', 'listItem')
+        return commands.toggleList(this.name, 'listItem')
       },
     }
   },

packages/extension-paragraph/src/paragraph.ts

@@ -43,7 +43,7 @@ export const Paragraph = Node.create<ParagraphOptions>({
   addCommands() {
     return {
       setParagraph: () => ({ commands }) => {
-        return commands.setNode('paragraph')
+        return commands.setNode(this.name)
       },
     }
   },

packages/extension-strike/src/strike.ts

@@ -66,13 +66,13 @@ export const Strike = Mark.create<StrikeOptions>({
   addCommands() {
     return {
       setStrike: () => ({ commands }) => {
-        return commands.setMark('strike')
+        return commands.setMark(this.name)
       },
       toggleStrike: () => ({ commands }) => {
-        return commands.toggleMark('strike')
+        return commands.toggleMark(this.name)
       },
       unsetStrike: () => ({ commands }) => {
-        return commands.unsetMark('strike')
+        return commands.unsetMark(this.name)
       },
     }
   },

packages/extension-subscript/src/subscript.ts

@@ -58,13 +58,13 @@ export const Subscript = Mark.create<SubscriptExtensionOptions>({
   addCommands() {
     return {
       setSubscript: () => ({ commands }) => {
-        return commands.setMark('subscript')
+        return commands.setMark(this.name)
       },
       toggleSubscript: () => ({ commands }) => {
-        return commands.toggleMark('subscript')
+        return commands.toggleMark(this.name)
       },
       unsetSubscript: () => ({ commands }) => {
-        return commands.unsetMark('subscript')
+        return commands.unsetMark(this.name)
       },
     }
   },

packages/extension-superscript/src/superscript.ts

@@ -58,13 +58,13 @@ export const Superscript = Mark.create<SuperscriptExtensionOptions>({
   addCommands() {
     return {
       setSuperscript: () => ({ commands }) => {
-        return commands.setMark('superscript')
+        return commands.setMark(this.name)
       },
       toggleSuperscript: () => ({ commands }) => {
-        return commands.toggleMark('superscript')
+        return commands.toggleMark(this.name)
       },
       unsetSuperscript: () => ({ commands }) => {
-        return commands.unsetMark('superscript')
+        return commands.unsetMark(this.name)
       },
     }
   },

packages/extension-task-item/src/task-item.ts

@@ -39,7 +39,7 @@ export const TaskItem = Node.create<TaskItemOptions>({
   parseHTML() {
     return [
       {
-        tag: 'li[data-type="taskItem"]',
+        tag: `li[data-type="${this.name}"]`,
         priority: 51,
       },
     ]
@@ -51,7 +51,7 @@ export const TaskItem = Node.create<TaskItemOptions>({
       mergeAttributes(
         this.options.HTMLAttributes,
         HTMLAttributes,
-        { 'data-type': 'taskItem' },
+        { 'data-type': this.name },
       ),
       [
         'label',
@@ -75,8 +75,8 @@ export const TaskItem = Node.create<TaskItemOptions>({
 
   addKeyboardShortcuts() {
     const shortcuts = {
-      Enter: () => this.editor.commands.splitListItem('taskItem'),
-      'Shift-Tab': () => this.editor.commands.liftListItem('taskItem'),
+      Enter: () => this.editor.commands.splitListItem(this.name),
+      'Shift-Tab': () => this.editor.commands.liftListItem(this.name),
     }
 
     if (!this.options.nested) {
@@ -85,7 +85,7 @@ export const TaskItem = Node.create<TaskItemOptions>({
 
     return {
       ...shortcuts,
-      Tab: () => this.editor.commands.sinkListItem('taskItem'),
+      Tab: () => this.editor.commands.sinkListItem(this.name),
     }
   },
 

packages/extension-task-list/src/task-list.ts

@@ -31,20 +31,20 @@ export const TaskList = Node.create<TaskListOptions>({
   parseHTML() {
     return [
       {
-        tag: 'ul[data-type="taskList"]',
+        tag: `ul[data-type="${this.name}"]`,
         priority: 51,
       },
     ]
   },
 
   renderHTML({ HTMLAttributes }) {
-    return ['ul', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { 'data-type': 'taskList' }), 0]
+    return ['ul', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { 'data-type': this.name }), 0]
   },
 
   addCommands() {
     return {
       toggleTaskList: () => ({ commands }) => {
-        return commands.toggleList('taskList', 'taskItem')
+        return commands.toggleList(this.name, 'taskItem')
       },
     }
   },

packages/extension-text-align/src/text-align.ts

@@ -62,6 +62,7 @@ export const TextAlign = Extension.create<TextAlignOptions>({
 
         return this.options.types.every(type => commands.updateAttributes(type, { textAlign: alignment }))
       },
+
       unsetTextAlign: () => ({ commands }) => {
         return this.options.types.every(type => commands.resetAttributes(type, 'textAlign'))
       },

packages/extension-text-style/src/text-style.ts

@@ -59,7 +59,7 @@ export const TextStyle = Mark.create<TextStyleOptions>({
           return true
         }
 
-        return commands.unsetMark('textStyle')
+        return commands.unsetMark(this.name)
       },
     }
   },

packages/extension-underline/src/underline.ts

@@ -52,13 +52,13 @@ export const Underline = Mark.create<UnderlineOptions>({
   addCommands() {
     return {
       setUnderline: () => ({ commands }) => {
-        return commands.setMark('underline')
+        return commands.setMark(this.name)
       },
       toggleUnderline: () => ({ commands }) => {
-        return commands.toggleMark('underline')
+        return commands.toggleMark(this.name)
       },
       unsetUnderline: () => ({ commands }) => {
-        return commands.unsetMark('underline')
+        return commands.unsetMark(this.name)
       },
     }
   },