add basic new syntax

.eslintrc.js

@@ -56,6 +56,8 @@ module.exports = {
         'no-param-reassign': 'off',
         'import/prefer-default-export': 'off',
         'consistent-return': 'off',
+        'no-redeclare': 'off',
+        '@typescript-eslint/no-redeclare': ['error'],
         'no-unused-vars': 'off',
         '@typescript-eslint/no-unused-vars': ['error'],
         'no-use-before-define': 'off',

packages/core/index.ts

@@ -3,10 +3,12 @@ import { Editor, Command, CommandsSpec } from './src/Editor'
 export default Editor
 export { Editor, Command, CommandsSpec }
 export { default as ComponentRenderer } from './src/ComponentRenderer'
-export { default as Extension } from './src/Extension'
-export { default as Node } from './src/Node'
+// export { default as Extension } from './src/Extension'
+// export { default as Node } from './src/Node'
+export * from './src/Extension'
 export * from './src/Node'
-export { default as Mark } from './src/Mark'
+export * from './src/Mark'
+// export { default as Mark } from './src/Mark'
 export { Extensions } from './src/types'
 
 export { default as nodeInputRule } from './src/inputRules/nodeInputRule'

packages/core/src/Extension.ts

@@ -113,27 +113,55 @@
 //   }
 // }
 
-export default class Extension<Options = {}> {
+export interface Extension {
+  type: string,
+  name: string,
+  options: {
+    [key: string]: any
+  },
+  createCommands(): {
+    [key: string]: any
+  },
+}
 
-  name = 'extension'
+export interface ExtensionSpec<Options, Commands> {
+  name: string,
+  defaultOptions?: Options,
+  createCommands?(this: {
+    options: Options,
+    // editor: Editor,
+  }): Commands,
+}
 
-  type = 'extension'
+const defaultExtension: Extension = {
+  type: 'extension',
+  name: 'extension',
+  options: {},
+  createCommands() {
+    return {}
+  },
+}
 
-  options: Partial<Options> = {}
+export function createExtension<Options extends {}, Commands extends {}>(config: ExtensionSpec<Options, Commands>) {
+  const extend = <ExtendedOptions = Options, ExtendedCommands = Commands>(extendedConfig: Partial<ExtensionSpec<ExtendedOptions, ExtendedCommands>>) => {
+    return createExtension({
+      ...config,
+      ...extendedConfig,
+    } as ExtensionSpec<ExtendedOptions, ExtendedCommands>)
+  }
 
-  constructor(options?: Partial<Options>) {
-    this.options = {
-      ...this.createDefaultOptions(),
-      ...options,
+  const setOptions = (options?: Partial<Options>) => {
+    const { defaultOptions, ...rest } = config
+
+    return {
+      ...defaultExtension,
+      ...rest,
+      options: {
+        ...defaultOptions,
+        ...options,
+      } as Options,
     }
   }
 
-  createDefaultOptions() {
-    return {}
-  }
-
-  createCommands() {
-    return {}
-  }
-
+  return Object.assign(setOptions, { config, extend })
 }

packages/core/src/Mark.ts

@@ -27,22 +27,22 @@
 //   }
 // }
 
-import Extension from './Extension'
+// import Extension from './Extension'
 
-export default class Node<Options = {}> extends Extension<Options> {
+// export default class Node<Options = {}> extends Extension<Options> {
 
-  type = 'mark'
+//   type = 'mark'
 
-  createAttributes() {
-    return {}
-  }
+//   createAttributes() {
+//     return {}
+//   }
 
-  parseHTML() {
-    return []
-  }
+//   parseHTML() {
+//     return []
+//   }
 
-  renderHTML() {
-    return []
-  }
+//   renderHTML() {
+//     return []
+//   }
 
-}
+// }

packages/core/src/Node.ts

@@ -32,39 +32,113 @@
 //   }
 // }
 
-import { DOMOutputSpec, DOMOutputSpecArray } from 'prosemirror-model'
-import Extension from './Extension'
+// import { DOMOutputSpec, DOMOutputSpecArray } from 'prosemirror-model'
+// import Extension from './Extension'
 
-export interface INode {
-  type: string
-  topNode: boolean
-  group: string
-  content: string
-  createAttributes(): any
-  parseHTML(): any
-  renderHTML(props: number): DOMOutputSpec
+// export interface INode {
+//   type: string
+//   topNode: boolean
+//   group: string
+//   content: string
+//   createAttributes(): any
+//   parseHTML(): any
+//   renderHTML(props: number): DOMOutputSpec
+// }
+
+// export default class Node<Options = {}> extends Extension<Options> implements INode {
+
+//   type = 'node'
+
+//   topNode = false
+
+//   group = ''
+
+//   content = ''
+
+//   createAttributes() {
+//     return {}
+//   }
+
+//   parseHTML() {
+//     return []
+//   }
+
+//   renderHTML() {
+//     return null
+//   }
+
+// }
+
+import { DOMOutputSpec, NodeSpec, Node } from 'prosemirror-model'
+import { Extension, ExtensionSpec } from './Extension'
+
+export interface NodeExtension extends Extension {
+  topNode: boolean,
+  content: NodeSpec['content'],
+  marks: NodeSpec['marks'],
+  group: NodeSpec['group'],
+  inline: NodeSpec['inline'],
+  atom: NodeSpec['atom'],
+  parseHTML: () => NodeSpec['parseDOM'],
+  renderHTML: (props: {
+    node: Node,
+    attributes: {
+      [key: string]: any,
+    },
+  }) => DOMOutputSpec,
 }
 
-export default class Node<Options = {}> extends Extension<Options> implements INode {
-
-  type = 'node'
-
-  topNode = false
-
-  group = ''
-
-  content = ''
-
-  createAttributes() {
-    return {}
-  }
-
-  parseHTML() {
-    return []
-  }
-
-  renderHTML() {
-    return null
-  }
-
+export interface NodeExtensionSpec<Options, Commands> extends ExtensionSpec<Options, Commands> {
+  topNode?: boolean,
+  content?: NodeSpec['content'],
+  marks?: NodeSpec['marks'],
+  group?: NodeSpec['group'],
+  inline?: NodeSpec['inline'],
+  atom?: NodeSpec['atom'],
+  parseHTML?: () => NodeSpec['parseDOM'],
+  renderHTML?: (props: {
+    node: Node,
+    attributes: {
+      [key: string]: any,
+    },
+  }) => DOMOutputSpec,
+}
+
+const defaultNode: NodeExtension = {
+  type: 'node',
+  name: 'node',
+  options: {},
+  topNode: false,
+  content: null,
+  marks: null,
+  group: null,
+  inline: null,
+  atom: null,
+  createCommands: () => ({}),
+  parseHTML: () => null,
+  renderHTML: () => null,
+}
+
+export function createNode<Options extends {}, Commands extends {}>(config: NodeExtensionSpec<Options, Commands>) {
+  const extend = <ExtendedOptions = Options, ExtendedCommands = Commands>(extendedConfig: Partial<NodeExtensionSpec<ExtendedOptions, ExtendedCommands>>) => {
+    return createNode({
+      ...config,
+      ...extendedConfig,
+    } as NodeExtensionSpec<ExtendedOptions, ExtendedCommands>)
+  }
+
+  const setOptions = (options?: Partial<Options>) => {
+    const { defaultOptions, ...rest } = config
+
+    return {
+      ...defaultNode,
+      ...rest,
+      options: {
+        ...defaultOptions,
+        ...options,
+      } as Options,
+    }
+  }
+
+  return Object.assign(setOptions, { config, extend })
 }

packages/core/src/utils/getSchema.ts

@@ -5,32 +5,28 @@ import getTopNodeFromExtensions from './getTopNodeFromExtensions'
 import getNodesFromExtensions from './getNodesFromExtensions'
 import getMarksFromExtensions from './getMarksFromExtensions'
 import resolveExtensionConfig from './resolveExtensionConfig'
-import Node from '../Node'
+import { Node } from '../Node'
 import Mark from '../Mark'
 import Extension from '../Extension'
 
 export default function getSchema(extensions: Extensions): Schema {
-  const baseExtensions = extensions.filter(extension => extension.type === 'extension') as Extension[]
+  // const baseExtensions = extensions.filter(extension => extension.type === 'extension') as Extension[]
   const nodeExtensions = extensions.filter(extension => extension.type === 'node') as Node[]
-  const markExtensions = extensions.filter(extension => extension.type === 'mark') as Mark[]
+  // const markExtensions = extensions.filter(extension => extension.type === 'mark') as Mark[]
+
+  // console.log({ extensions })
 
   const nodes = Object.fromEntries(nodeExtensions.map(extension => {
-
     const schema: NodeSpec = {
       content: extension.content,
       group: extension.group,
       parseDOM: extension.parseHTML(),
-      toDOM: node => extension.renderHTML({ node, attributes: { class: 'hee' } }),
+      toDOM: node => extension.renderHTML({ node, attributes: { class: 'test' } }),
     }
 
-    return [
-      extension.name,
-      schema,
-    ]
+    return [extension.name, schema]
   }))
 
-  console.log({ nodes })
-
   const topNode = nodeExtensions.find(extension => extension.topNode)?.name
 
   // extensions.forEach(extension => {
@@ -57,8 +53,5 @@ export default function getSchema(extensions: Extensions): Schema {
     topNode,
     nodes,
     marks: {},
-    // topNode: getTopNodeFromExtensions(extensions),
-    // nodes: getNodesFromExtensions(extensions),
-    // marks: getMarksFromExtensions(extensions),
   })
 }

packages/extension-document/index.ts

@@ -1,4 +1,4 @@
-import { Node } from '@tiptap/core'
+import { createNode } from '@tiptap/core'
 
 // export default new Node()
 //   .name('document')
@@ -8,12 +8,20 @@ import { Node } from '@tiptap/core'
 //   }))
 //   .create()
 
-export default class Document extends Node {
+// export default class Document extends Node {
 
-  name = 'document'
+//   name = 'document'
 
-  topNode = true
+//   topNode = true
 
-  content = 'block+'
+//   content = 'block+'
 
-}
+// }
+
+export default createNode({
+  name: 'document',
+
+  topNode: true,
+
+  content: 'block+',
+})

packages/extension-paragraph/index.ts

@@ -1,5 +1,5 @@
-import { Command, Node, INode } from '@tiptap/core'
-import { DOMOutputSpecArray } from 'prosemirror-model'
+import { createNode } from '@tiptap/core'
+// import { DOMOutputSpecArray } from 'prosemirror-model'
 // import ParagraphComponent from './paragraph.vue'
 
 // export type ParagraphCommand = () => Command
@@ -29,31 +29,49 @@ import { DOMOutputSpecArray } from 'prosemirror-model'
 //   }))
 //   .create()
 
-export default class Paragraph extends Node implements INode {
+// export default class Paragraph extends Node implements INode {
 
-  name = 'paragraph'
+//   name = 'paragraph'
 
-  group = 'block'
+//   group = 'block'
 
-  content = 'inline*'
+//   content = 'inline*'
 
-  createAttributes() {
-    return {
-      // default rendering
-      class: {
-        default: 'jooo',
-      },
-    }
-  }
+//   createAttributes() {
+//     return {
+//       // default rendering
+//       class: {
+//         default: 'jooo',
+//       },
+//     }
+//   }
+
+//   parseHTML() {
+//     return [
+//       { tag: 'p' },
+//     ]
+//   }
+
+//   renderHTML() {
+//     return ['p', 0] as const
+//   }
+
+// }
+
+export default createNode({
+  name: 'paragraph',
+
+  group: 'block',
+
+  content: 'inline*',
 
   parseHTML() {
     return [
       { tag: 'p' },
     ]
-  }
+  },
 
-  renderHTML() {
-    return ['p', 0] as const
-  }
-
-}
+  renderHTML({ attributes }) {
+    return ['p', attributes, 0]
+  },
+})

packages/extension-text/index.ts

@@ -1,4 +1,4 @@
-import { Node } from '@tiptap/core'
+import { createNode } from '@tiptap/core'
 
 // export default new Node()
 //   .name('text')
@@ -7,10 +7,16 @@ import { Node } from '@tiptap/core'
 //   }))
 //   .create()
 
-export default class Text extends Node {
+// export default class Text extends Node {
 
-  name = 'text'
+//   name = 'text'
 
-  group = 'inline'
+//   group = 'inline'
 
-}
+// }
+
+export default createNode({
+  name: 'text',
+
+  group: 'inline',
+})

packages/vue-starter-kit/index.ts

@@ -1,8 +1,16 @@
 // import originalDefaultExtensions from '@tiptap/starter-kit'
 
+import Document from '@tiptap/extension-document'
+import Text from '@tiptap/extension-text'
+import Paragraph from '@tiptap/extension-paragraph'
+
 export * from '@tiptap/vue'
 
 export function defaultExtensions() {
-  return []
+  return [
+    Document(),
+    Text(),
+    Paragraph(),
+  ]
   // return originalDefaultExtensions()
 }