wip: add extension.name

docs/src/demos/Examples/CollaborativeEditing/index.vue

@@ -70,7 +70,7 @@ export default {
 
     this.editor = new Editor({
       extensions: [
-        ...defaultExtensions().filter(extension => extension.config.name !== 'history'),
+        ...defaultExtensions().filter(extension => extension.name !== 'history'),
         Highlight,
         TaskList,
         TaskItem,

docs/src/docPages/guide/configuration.md

@@ -127,7 +127,7 @@ import { Editor, defaultExtensions } from '@tiptap/starter-kit'
 
 new Editor({
   extensions: [
-    ...defaultExtensions().filter(extension => extension.config.name !== 'history'),
+    ...defaultExtensions().filter(extension => extension.name !== 'history'),
   ],
 })
 ```

packages/core/src/Extension.ts

@@ -200,24 +200,27 @@ declare module '@tiptap/core' {
 export class Extension<Options = any> {
   type = 'extension'
 
-  config: ExtensionConfig = {
+  name = 'extension'
-    name: 'extension',
-    priority: 100,
-    defaultOptions: {},
-  }
-
-  options: Options
 
   parent: Extension | null = null
 
   child: Extension | null = null
 
+  options: Options
+
+  config: ExtensionConfig = {
+    name: this.name,
+    priority: 100,
+    defaultOptions: {},
+  }
+
   constructor(config: Partial<ExtensionConfig<Options>> = {}) {
     this.config = {
       ...this.config,
       ...config,
     }
 
+    this.name = this.config.name
     this.options = this.config.defaultOptions
   }
 
@@ -238,6 +241,10 @@ export class Extension<Options = any> {
 
     this.child = extension
 
+    extension.name = extendedConfig.name
+      ? extendedConfig.name
+      : this.name
+
     extension.options = {
       ...extension.parent.options,
       ...extension.options,

packages/core/src/ExtensionManager.ts

@@ -34,14 +34,14 @@ export default class ExtensionManager {
       const context = {
         options: extension.options,
         editor: this.editor,
-        type: getSchemaTypeByName(extension.config.name, this.schema),
+        type: getSchemaTypeByName(extension.name, this.schema),
       }
 
       if (extension.type === 'mark') {
         const keepOnSplit = callOrReturn(getExtensionField(extension, 'keepOnSplit', context)) ?? true
 
         if (keepOnSplit) {
-          this.splittableMarks.push(extension.config.name)
+          this.splittableMarks.push(extension.name)
         }
       }
 
@@ -100,7 +100,7 @@ export default class ExtensionManager {
       const context = {
         options: extension.options,
         editor: this.editor,
-        type: getSchemaTypeByName(extension.config.name, this.schema),
+        type: getSchemaTypeByName(extension.name, this.schema),
       }
 
       if (!extension.config.addCommands) {
@@ -121,7 +121,7 @@ export default class ExtensionManager {
         const context = {
           options: extension.options,
           editor: this.editor,
-          type: getSchemaTypeByName(extension.config.name, this.schema),
+          type: getSchemaTypeByName(extension.name, this.schema),
         }
 
         const plugins: Plugin[] = []
@@ -198,7 +198,7 @@ export default class ExtensionManager {
         const context = {
           options: extension.options,
           editor,
-          type: getNodeType(extension.config.name, this.schema),
+          type: getNodeType(extension.name, this.schema),
         }
         const addNodeView = getExtensionField<NodeConfig['addNodeView']>(
           extension,
@@ -228,7 +228,7 @@ export default class ExtensionManager {
           })
         }
 
-        return [extension.config.name, nodeview]
+        return [extension.name, nodeview]
       }))
   }
 
@@ -242,7 +242,7 @@ export default class ExtensionManager {
         const context = {
           options: extension.options,
           editor,
-          type: getNodeType(extension.config.name, this.schema),
+          type: getNodeType(extension.name, this.schema),
         }
 
         const renderText = getExtensionField<NodeConfig['renderText']>(extension, 'renderText', context)
@@ -253,7 +253,7 @@ export default class ExtensionManager {
 
         const textSerializer = (props: { node: ProsemirrorNode }) => renderText(props)
 
-        return [extension.config.name, textSerializer]
+        return [extension.name, textSerializer]
       }))
   }
 

packages/core/src/Mark.ts

@@ -292,26 +292,29 @@ declare module '@tiptap/core' {
 }
 
 export class Mark<Options = any> {
-  type = 'node'
+  type = 'mark'
 
-  config: MarkConfig = {
+  name = 'mark'
-    name: 'node',
-    priority: 100,
-    defaultOptions: {},
-  }
-
-  options: Options
 
   parent: Mark | null = null
 
   child: Mark | null = null
 
+  options: Options
+
+  config: MarkConfig = {
+    name: this.name,
+    priority: 100,
+    defaultOptions: {},
+  }
+
   constructor(config: Partial<MarkConfig<Options>> = {}) {
     this.config = {
       ...this.config,
       ...config,
     }
 
+    this.name = this.config.name
     this.options = this.config.defaultOptions
   }
 
@@ -332,6 +335,10 @@ export class Mark<Options = any> {
 
     this.child = extension
 
+    extension.name = extendedConfig.name
+      ? extendedConfig.name
+      : this.name
+
     extension.options = {
       ...extension.parent.options,
       ...extension.options,

packages/core/src/Node.ts

@@ -367,24 +367,27 @@ declare module '@tiptap/core' {
 export class Node<Options = any> {
   type = 'node'
 
-  config: NodeConfig = {
+  name = 'node'
-    name: 'node',
-    priority: 100,
-    defaultOptions: {},
-  }
-
-  options: Options
 
   parent: Node | null = null
 
   child: Node | null = null
 
+  options: Options
+
+  config: NodeConfig = {
+    name: this.name,
+    priority: 100,
+    defaultOptions: {},
+  }
+
   constructor(config: Partial<NodeConfig<Options>> = {}) {
     this.config = {
       ...this.config,
       ...config,
     }
 
+    this.name = this.config.name
     this.options = this.config.defaultOptions
   }
 
@@ -405,6 +408,10 @@ export class Node<Options = any> {
 
     this.child = extension
 
+    extension.name = extendedConfig.name
+      ? extendedConfig.name
+      : this.name
+
     extension.options = {
       ...extension.parent.options,
       ...extension.options,

packages/core/src/helpers/getSchema.ts

@@ -22,13 +22,10 @@ function cleanUpSchemaItem<T>(data: T) {
 export default function getSchema(extensions: Extensions): Schema {
   const allAttributes = getAttributesFromExtensions(extensions)
   const { nodeExtensions, markExtensions } = splitExtensions(extensions)
-  const topNodeExtension = nodeExtensions.find(extension => getExtensionField(extension, 'topNode'))
+  const topNode = nodeExtensions.find(extension => getExtensionField(extension, 'topNode'))?.name
-  const topNode = topNodeExtension
-    ? getExtensionField<NodeConfig['name']>(topNodeExtension, 'name')
-    : null
 
   const nodes = Object.fromEntries(nodeExtensions.map(extension => {
-    const extensionAttributes = allAttributes.filter(attribute => attribute.type === extension.config.name)
+    const extensionAttributes = allAttributes.filter(attribute => attribute.type === extension.name)
     const context = {
       options: extension.options,
     }
@@ -79,11 +76,11 @@ export default function getSchema(extensions: Extensions): Schema {
       })
     }
 
-    return [extension.config.name, schema]
+    return [extension.name, schema]
   }))
 
   const marks = Object.fromEntries(markExtensions.map(extension => {
-    const extensionAttributes = allAttributes.filter(attribute => attribute.type === extension.config.name)
+    const extensionAttributes = allAttributes.filter(attribute => attribute.type === extension.name)
     const context = {
       options: extension.options,
     }
@@ -128,7 +125,7 @@ export default function getSchema(extensions: Extensions): Schema {
       })
     }
 
-    return [extension.config.name, schema]
+    return [extension.name, schema]
   }))
 
   return new Schema({

packages/core/src/helpers/isList.ts

@@ -4,7 +4,7 @@ import callOrReturn from '../utilities/callOrReturn'
 
 export default function isList(name: string, extensions: Extensions): boolean {
   const { nodeExtensions } = splitExtensions(extensions)
-  const extension = nodeExtensions.find(item => item.config.name === name)
+  const extension = nodeExtensions.find(item => item.name === name)
 
   if (!extension) {
     return false

packages/react/src/ReactNodeViewRenderer.tsx

@@ -38,7 +38,7 @@ class ReactNodeView extends NodeView<React.FunctionComponent, Editor> {
         return string.charAt(0).toUpperCase() + string.substring(1)
       }
 
-      this.component.displayName = capitalizeFirstChar(this.extension.config.name)
+      this.component.displayName = capitalizeFirstChar(this.extension.name)
     }
 
     const ReactNodeViewProvider: React.FunctionComponent = componentProps => {