add basic extension classes

docs/gridsome.server.js

@@ -95,7 +95,7 @@ module.exports = function (api) {
       .test(/\.tsx?$/)
       .use()
       .loader('ts-loader')
-      .options({ transpileOnly: false, appendTsSuffixTo: [/\.vue$/] })
+      .options({ transpileOnly: true, appendTsSuffixTo: [/\.vue$/] })
 
     config.module
       .rule('jsx')

docs/src/components/LiveDemo/index.vue

@@ -66,18 +66,19 @@ export default {
 
   computed: {
     requires() {
-      const names = this.$static.packages.edges
-        .map(item => item.node.name)
-        .filter(name => name !== 'html')
+      // const names = this.$static.packages.edges
+      //   .map(item => item.node.name)
+      //   .filter(name => name !== 'html')
 
-      const packages = Object.fromEntries(names.map(name => {
-        const module = require(`~/../../packages/${name}/index.ts`)
-        const onlyDefault = module.default && Object.keys(module).length === 1
+      // const packages = Object.fromEntries(names.map(name => {
+      //   const module = require(`~/../../packages/${name}/index.ts`)
+      //   const onlyDefault = module.default && Object.keys(module).length === 1
 
-        return [`@tiptap/${name}`, onlyDefault ? module.default : module]
-      }))
+      //   return [`@tiptap/${name}`, onlyDefault ? module.default : module]
+      // }))
 
-      return packages
+      // return packages
+      return {}
     },
 
     file() {
@@ -90,17 +91,17 @@ export default {
   },
 
   mounted() {
-    this.files = collect(require.context('~/demos/', true, /.+\..+$/).keys())
-      .filter(path => path.startsWith(`./${this.name}/index.vue`))
-      .map(path => path.replace('./', ''))
-      .map(path => {
-        return {
-          path,
-          name: path.replace(`${this.name}/`, ''),
-          content: require(`!!raw-loader!~/demos/${path}`).default,
-        }
-      })
-      .toArray()
+    // this.files = collect(require.context('~/demos/', true, /.+\..+$/).keys())
+    //   .filter(path => path.startsWith(`./${this.name}/index.vue`))
+    //   .map(path => path.replace('./', ''))
+    //   .map(path => {
+    //     return {
+    //       path,
+    //       name: path.replace(`${this.name}/`, ''),
+    //       content: require(`!!raw-loader!~/demos/${path}`).default,
+    //     }
+    //   })
+    //   .toArray()
   },
 }
 </script>

docs/src/demos/Guide/GettingStarted/index.vue

@@ -3,7 +3,11 @@
 </template>
 
 <script>
-import { Editor, EditorContent, defaultExtensions } from '@tiptap/vue-starter-kit'
+// import { Editor, EditorContent, defaultExtensions } from '@tiptap/vue-starter-kit'
+import { Editor, EditorContent } from '@tiptap/vue-starter-kit'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
 
 export default {
   components: {
@@ -19,7 +23,12 @@ export default {
   mounted() {
     this.editor = new Editor({
       content: '<p>I’m running tiptap with Vue.js. 🎉</p>',
-      extensions: defaultExtensions(),
+      // extensions: defaultExtensions(),
+      extensions: [
+        new Document(),
+        new Paragraph(),
+        new Text(),
+      ],
     })
   },
 

packages/core/src/Editor.ts

@@ -117,7 +117,7 @@ export class Editor extends EventEmitter {
     this.createCommandManager()
     this.createExtensionManager()
     this.createSchema()
-    this.extensionManager.resolveConfigs()
+    // this.extensionManager.resolveConfigs()
     this.createView()
     this.registerCommands(coreCommands)
     this.injectCSS()

packages/core/src/Extension.ts

@@ -1,114 +1,139 @@
-import cloneDeep from 'clone-deep'
-import { Plugin } from 'prosemirror-state'
-import { Editor, CommandsSpec } from './Editor'
+// import cloneDeep from 'clone-deep'
+// import { Plugin } from 'prosemirror-state'
+// import { Editor, CommandsSpec } from './Editor'
 
-type AnyObject = {
-  [key: string]: any
-}
+// type AnyObject = {
+//   [key: string]: any
+// }
 
-type NoInfer<T> = [T][T extends any ? 0 : never]
+// type NoInfer<T> = [T][T extends any ? 0 : never]
 
-type MergeStrategy = 'extend' | 'overwrite'
+// type MergeStrategy = 'extend' | 'overwrite'
 
-type Configs = {
-  [key: string]: {
-    stategy: MergeStrategy
-    value: any
-  }[]
-}
+// type Configs = {
+//   [key: string]: {
+//     stategy: MergeStrategy
+//     value: any
+//   }[]
+// }
 
-export interface ExtensionProps<Options> {
-  name: string
-  editor: Editor
-  options: Options
-}
+// export interface ExtensionProps<Options> {
+//   name: string
+//   editor: Editor
+//   options: Options
+// }
 
-export interface ExtensionMethods<Props, Options> {
-  name: string
-  options: Options
-  commands: (params: Props) => CommandsSpec
-  inputRules: (params: Props) => any[]
-  pasteRules: (params: Props) => any[]
-  keys: (params: Props) => {
-    [key: string]: Function
-  }
-  plugins: (params: Props) => Plugin[]
-}
+// export interface ExtensionMethods<Props, Options> {
+//   name: string
+//   options: Options
+//   commands: (params: Props) => CommandsSpec
+//   inputRules: (params: Props) => any[]
+//   pasteRules: (params: Props) => any[]
+//   keys: (params: Props) => {
+//     [key: string]: Function
+//   }
+//   plugins: (params: Props) => Plugin[]
+// }
+
+// export default class Extension<
+//   Options = {},
+//   Props = ExtensionProps<Options>,
+//   Methods extends ExtensionMethods<Props, Options> = ExtensionMethods<Props, Options>,
+// > {
+//   type = 'extension'
+
+//   config: AnyObject = {}
+
+//   configs: Configs = {}
+
+//   options: Partial<Options> = {}
+
+//   protected storeConfig(key: string, value: any, stategy: MergeStrategy) {
+//     const item = {
+//       stategy,
+//       value,
+//     }
+
+//     if (this.configs[key]) {
+//       this.configs[key].push(item)
+//     } else {
+//       this.configs[key] = [item]
+//     }
+//   }
+
+//   public configure(options: Partial<Options>) {
+//     this.options = { ...this.options, ...options }
+//     return this
+//   }
+
+//   public name(value: Methods['name']) {
+//     this.storeConfig('name', value, 'overwrite')
+//     return this
+//   }
+
+//   public defaults(value: Options) {
+//     this.storeConfig('defaults', value, 'overwrite')
+//     return this
+//   }
+
+//   public commands(value: Methods['commands']) {
+//     this.storeConfig('commands', value, 'overwrite')
+//     return this
+//   }
+
+//   public keys(value: Methods['keys']) {
+//     this.storeConfig('keys', value, 'overwrite')
+//     return this
+//   }
+
+//   public inputRules(value: Methods['inputRules']) {
+//     this.storeConfig('inputRules', value, 'overwrite')
+//     return this
+//   }
+
+//   public pasteRules(value: Methods['pasteRules']) {
+//     this.storeConfig('pasteRules', value, 'overwrite')
+//     return this
+//   }
+
+//   public plugins(value: Methods['plugins']) {
+//     this.storeConfig('plugins', value, 'overwrite')
+//     return this
+//   }
+
+//   public extend<T extends Extract<keyof Methods, string>>(key: T, value: Methods[T]) {
+//     this.storeConfig(key, value, 'extend')
+//     return this
+//   }
+
+//   public create() {
+//     return <NewOptions = Options>(options?: Partial<NoInfer<NewOptions>>) => {
+//       return cloneDeep(this, true).configure(options as NewOptions)
+//     }
+//   }
+// }
+
+export default class Extension<Options = {}> {
+
+  name = 'extension'
 
-export default class Extension<
-  Options = {},
-  Props = ExtensionProps<Options>,
-  Methods extends ExtensionMethods<Props, Options> = ExtensionMethods<Props, Options>,
-> {
   type = 'extension'
 
-  config: AnyObject = {}
-
-  configs: Configs = {}
-
   options: Partial<Options> = {}
 
-  protected storeConfig(key: string, value: any, stategy: MergeStrategy) {
-    const item = {
-      stategy,
-      value,
-    }
-
-    if (this.configs[key]) {
-      this.configs[key].push(item)
-    } else {
-      this.configs[key] = [item]
+  constructor(options?: Partial<Options>) {
+    this.options = {
+      ...this.createDefaultOptions(),
+      ...options,
     }
   }
 
-  public configure(options: Partial<Options>) {
-    this.options = { ...this.options, ...options }
-    return this
+  createDefaultOptions() {
+    return {}
   }
 
-  public name(value: Methods['name']) {
-    this.storeConfig('name', value, 'overwrite')
-    return this
+  createCommands() {
+    return {}
   }
 
-  public defaults(value: Options) {
-    this.storeConfig('defaults', value, 'overwrite')
-    return this
-  }
-
-  public commands(value: Methods['commands']) {
-    this.storeConfig('commands', value, 'overwrite')
-    return this
-  }
-
-  public keys(value: Methods['keys']) {
-    this.storeConfig('keys', value, 'overwrite')
-    return this
-  }
-
-  public inputRules(value: Methods['inputRules']) {
-    this.storeConfig('inputRules', value, 'overwrite')
-    return this
-  }
-
-  public pasteRules(value: Methods['pasteRules']) {
-    this.storeConfig('pasteRules', value, 'overwrite')
-    return this
-  }
-
-  public plugins(value: Methods['plugins']) {
-    this.storeConfig('plugins', value, 'overwrite')
-    return this
-  }
-
-  public extend<T extends Extract<keyof Methods, string>>(key: T, value: Methods[T]) {
-    this.storeConfig(key, value, 'extend')
-    return this
-  }
-
-  public create() {
-    return <NewOptions = Options>(options?: Partial<NoInfer<NewOptions>>) => {
-      return cloneDeep(this, true).configure(options as NewOptions)
-    }
-  }
 }

packages/core/src/ExtensionManager.ts

@@ -26,39 +26,39 @@ export default class ExtensionManager {
     this.extensions = extensions
   }
 
-  resolveConfigs() {
-    this.extensions.forEach(extension => {
-      const { editor } = this
-      const { name } = extension.config
-      const options = {
-        ...extension.config.defaults,
-        ...extension.options,
-      }
-      const type = extension.type === 'node'
-        ? editor.schema.nodes[name]
-        : editor.schema.marks[name]
+  // resolveConfigs() {
+  //   this.extensions.forEach(extension => {
+  //     const { editor } = this
+  //     const { name } = extension.config
+  //     const options = {
+  //       ...extension.config.defaults,
+  //       ...extension.options,
+  //     }
+  //     const type = extension.type === 'node'
+  //       ? editor.schema.nodes[name]
+  //       : editor.schema.marks[name]
 
-      resolveExtensionConfig(extension, 'commands', {
-        name, options, editor, type,
-      })
-      resolveExtensionConfig(extension, 'inputRules', {
-        name, options, editor, type,
-      })
-      resolveExtensionConfig(extension, 'pasteRules', {
-        name, options, editor, type,
-      })
-      resolveExtensionConfig(extension, 'keys', {
-        name, options, editor, type,
-      })
-      resolveExtensionConfig(extension, 'plugins', {
-        name, options, editor, type,
-      })
+  //     resolveExtensionConfig(extension, 'commands', {
+  //       name, options, editor, type,
+  //     })
+  //     resolveExtensionConfig(extension, 'inputRules', {
+  //       name, options, editor, type,
+  //     })
+  //     resolveExtensionConfig(extension, 'pasteRules', {
+  //       name, options, editor, type,
+  //     })
+  //     resolveExtensionConfig(extension, 'keys', {
+  //       name, options, editor, type,
+  //     })
+  //     resolveExtensionConfig(extension, 'plugins', {
+  //       name, options, editor, type,
+  //     })
 
-      if (extension.config.commands) {
-        editor.registerCommands(extension.config.commands)
-      }
-    })
-  }
+  //     if (extension.config.commands) {
+  //       editor.registerCommands(extension.config.commands)
+  //     }
+  //   })
+  // }
 
   get schema(): Schema {
     return getSchema(this.extensions)
@@ -77,13 +77,13 @@ export default class ExtensionManager {
   }
 
   get plugins(): Plugin[] {
-    const plugins = collect(this.extensions)
-      .flatMap(extension => extension.config.plugins)
-      .filter(plugin => plugin)
-      .toArray()
+    // const plugins = collect(this.extensions)
+    //   .flatMap(extension => extension.config.plugins)
+    //   .filter(plugin => plugin)
+    //   .toArray()
 
     return [
-      ...plugins,
+      // ...plugins,
       ...this.keymaps,
       ...this.pasteRules,
       inputRules({ rules: this.inputRules }),
@@ -91,25 +91,28 @@ export default class ExtensionManager {
   }
 
   get inputRules(): any {
-    return collect(this.extensions)
-      .flatMap(extension => extension.config.inputRules)
-      .filter(plugin => plugin)
-      .toArray()
+    return []
+    // return collect(this.extensions)
+    //   .flatMap(extension => extension.config.inputRules)
+    //   .filter(plugin => plugin)
+    //   .toArray()
   }
 
   get pasteRules(): any {
-    return collect(this.extensions)
-      .flatMap(extension => extension.config.pasteRules)
-      .filter(plugin => plugin)
-      .toArray()
+    return []
+    // return collect(this.extensions)
+    //   .flatMap(extension => extension.config.pasteRules)
+    //   .filter(plugin => plugin)
+    //   .toArray()
   }
 
   get keymaps() {
-    return collect(this.extensions)
-      .map(extension => extension.config.keys)
-      .filter(keys => keys)
-      .map(keys => keymap(keys))
-      .toArray()
+    return []
+    // return collect(this.extensions)
+    //   .map(extension => extension.config.keys)
+    //   .filter(keys => keys)
+    //   .map(keys => keymap(keys))
+    //   .toArray()
   }
 
   get nodeViews() {

packages/core/src/Mark.ts

@@ -1,28 +1,48 @@
-import { MarkSpec, MarkType } from 'prosemirror-model'
-import Extension, { ExtensionMethods } from './Extension'
-import { Editor } from './Editor'
+// import { MarkSpec, MarkType } from 'prosemirror-model'
+// import Extension, { ExtensionMethods } from './Extension'
+// import { Editor } from './Editor'
 
-export interface MarkProps<Options> {
-  name: string
-  editor: Editor
-  options: Options
-  type: MarkType
-}
+// export interface MarkProps<Options> {
+//   name: string
+//   editor: Editor
+//   options: Options
+//   type: MarkType
+// }
 
-export interface MarkMethods<Props, Options> extends ExtensionMethods<Props, Options> {
-  topMark: boolean
-  schema: (params: Omit<Props, 'type' | 'editor'>) => MarkSpec
-}
+// export interface MarkMethods<Props, Options> extends ExtensionMethods<Props, Options> {
+//   topMark: boolean
+//   schema: (params: Omit<Props, 'type' | 'editor'>) => MarkSpec
+// }
+
+// export default class Mark<
+//   Options = {},
+//   Props = MarkProps<Options>,
+//   Methods extends MarkMethods<Props, Options> = MarkMethods<Props, Options>,
+// > extends Extension<Options, Props, Methods> {
+//   type = 'mark'
+
+//   public schema(value: Methods['schema']) {
+//     this.storeConfig('schema', value, 'overwrite')
+//     return this
+//   }
+// }
+
+import Extension from './Extension'
+
+export default class Node<Options = {}> extends Extension<Options> {
 
-export default class Mark<
-  Options = {},
-  Props = MarkProps<Options>,
-  Methods extends MarkMethods<Props, Options> = MarkMethods<Props, Options>,
-> extends Extension<Options, Props, Methods> {
   type = 'mark'
 
-  public schema(value: Methods['schema']) {
-    this.storeConfig('schema', value, 'overwrite')
-    return this
+  createAttributes() {
+    return {}
   }
+
+  parseHTML() {
+    return []
+  }
+
+  renderHTML() {
+    return []
+  }
+
 }

packages/core/src/Node.ts

@@ -1,33 +1,59 @@
-import { NodeSpec, NodeType } from 'prosemirror-model'
-import Extension, { ExtensionMethods } from './Extension'
-import { Editor } from './Editor'
+// import { NodeSpec, NodeType } from 'prosemirror-model'
+// import Extension, { ExtensionMethods } from './Extension'
+// import { Editor } from './Editor'
 
-export interface NodeProps<Options> {
-  name: string
-  editor: Editor
-  options: Options
-  type: NodeType
-}
+// export interface NodeProps<Options> {
+//   name: string
+//   editor: Editor
+//   options: Options
+//   type: NodeType
+// }
 
-export interface NodeMethods<Props, Options> extends ExtensionMethods<Props, Options> {
-  topNode: boolean
-  schema: (params: Omit<Props, 'type' | 'editor'>) => NodeSpec
-}
+// export interface NodeMethods<Props, Options> extends ExtensionMethods<Props, Options> {
+//   topNode: boolean
+//   schema: (params: Omit<Props, 'type' | 'editor'>) => NodeSpec
+// }
+
+// export default class Node<
+//   Options = {},
+//   Props = NodeProps<Options>,
+//   Methods extends NodeMethods<Props, Options> = NodeMethods<Props, Options>,
+// > extends Extension<Options, Props, Methods> {
+//   type = 'node'
+
+//   public topNode(value: Methods['topNode'] = true) {
+//     this.storeConfig('topNode', value, 'overwrite')
+//     return this
+//   }
+
+//   public schema(value: Methods['schema']) {
+//     this.storeConfig('schema', value, 'overwrite')
+//     return this
+//   }
+// }
+
+import Extension from './Extension'
+
+export default class Node<Options = {}> extends Extension<Options> {
 
-export default class Node<
-  Options = {},
-  Props = NodeProps<Options>,
-  Methods extends NodeMethods<Props, Options> = NodeMethods<Props, Options>,
-> extends Extension<Options, Props, Methods> {
   type = 'node'
 
-  public topNode(value: Methods['topNode'] = true) {
-    this.storeConfig('topNode', value, 'overwrite')
-    return this
+  topNode = false
+
+  group = ''
+
+  content = ''
+
+  createAttributes() {
+    return {}
   }
 
-  public schema(value: Methods['schema']) {
-    this.storeConfig('schema', value, 'overwrite')
-    return this
+  parseHTML() {
+    return []
   }
+
+  renderHTML() {
+    return []
+  }
+
 }

packages/core/src/utils/getSchema.ts

@@ -1,29 +1,61 @@
 import deepmerge from 'deepmerge'
-import { Schema } from 'prosemirror-model'
+import { NodeSpec, Schema } from 'prosemirror-model'
 import { Extensions } from '../types'
 import getTopNodeFromExtensions from './getTopNodeFromExtensions'
 import getNodesFromExtensions from './getNodesFromExtensions'
 import getMarksFromExtensions from './getMarksFromExtensions'
 import resolveExtensionConfig from './resolveExtensionConfig'
+import Node from '../Node'
+import Mark from '../Mark'
+import Extension from '../Extension'
 
 export default function getSchema(extensions: Extensions): Schema {
-  extensions.forEach(extension => {
-    resolveExtensionConfig(extension, 'name')
-    resolveExtensionConfig(extension, 'defaults')
-    resolveExtensionConfig(extension, 'topNode')
+  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 { name } = extension.config
-    const options = {
-      ...extension.config.defaults,
-      ...extension.options,
-    }
+  const nodes = Object.fromEntries(nodeExtensions.map(node => {
+    return [
+      node.name,
+      {
+        content: node.content,
+        group: node.group,
+        parseDOM: node.parseHTML(),
+        toDOM: node.renderHTML,
+      } as unknown as NodeSpec,
+    ]
+  }))
 
-    resolveExtensionConfig(extension, 'schema', { name, options })
-  })
+  console.log({ nodes })
+
+  const topNode = nodeExtensions.find(extension => extension.topNode)?.name
+
+  // extensions.forEach(extension => {
+  //   resolveExtensionConfig(extension, 'name')
+  //   resolveExtensionConfig(extension, 'defaults')
+  //   resolveExtensionConfig(extension, 'topNode')
+
+  //   const { name } = extension.config
+  //   const options = {
+  //     ...extension.config.defaults,
+  //     ...extension.options,
+  //   }
+
+  //   resolveExtensionConfig(extension, 'schema', { name, options })
+  // })
+
+  // return new Schema({
+  //   topNode: getTopNodeFromExtensions(extensions),
+  //   nodes: getNodesFromExtensions(extensions),
+  //   marks: getMarksFromExtensions(extensions),
+  // })
 
   return new Schema({
-    topNode: getTopNodeFromExtensions(extensions),
-    nodes: getNodesFromExtensions(extensions),
-    marks: getMarksFromExtensions(extensions),
+    topNode,
+    nodes,
+    marks: {},
+    // topNode: getTopNodeFromExtensions(extensions),
+    // nodes: getNodesFromExtensions(extensions),
+    // marks: getMarksFromExtensions(extensions),
   })
 }

packages/extension-document/index.ts

@@ -1,9 +1,19 @@
 import { Node } from '@tiptap/core'
 
-export default new Node()
-  .name('document')
-  .topNode()
-  .schema(() => ({
-    content: 'block+',
-  }))
-  .create()
+// export default new Node()
+//   .name('document')
+//   .topNode()
+//   .schema(() => ({
+//     content: 'block+',
+//   }))
+//   .create()
+
+export default class Document extends Node {
+
+  name = 'document'
+
+  topNode = true
+
+  content = 'block+'
+
+}

packages/extension-paragraph/index.ts

@@ -1,29 +1,49 @@
 import { Command, Node } from '@tiptap/core'
 // import ParagraphComponent from './paragraph.vue'
 
-export type ParagraphCommand = () => Command
+// export type ParagraphCommand = () => Command
 
-declare module '@tiptap/core/src/Editor' {
-  interface Commands {
-    paragraph: ParagraphCommand,
+// declare module '@tiptap/core/src/Editor' {
+//   interface Commands {
+//     paragraph: ParagraphCommand,
+//   }
+// }
+
+// export default new Node()
+//   .name('paragraph')
+//   .schema(() => ({
+//     content: 'inline*',
+//     group: 'block',
+//     parseDOM: [{ tag: 'p' }],
+//     toDOM: () => ['p', 0],
+//     // toVue: ParagraphComponent,
+//   }))
+//   .commands(({ name }) => ({
+//     [name]: () => ({ commands }) => {
+//       return commands.toggleBlockType(name, 'paragraph')
+//     },
+//   }))
+//   .keys(({ editor }) => ({
+//     'Mod-Alt-0': () => editor.paragraph(),
+//   }))
+//   .create()
+
+export default class Paragraph extends Node {
+
+  name = 'paragraph'
+
+  group = 'block'
+
+  content = 'inline*'
+
+  parseHTML() {
+    return [
+      { tag: 'p' },
+    ]
   }
-}
 
-export default new Node()
-  .name('paragraph')
-  .schema(() => ({
-    content: 'inline*',
-    group: 'block',
-    parseDOM: [{ tag: 'p' }],
-    toDOM: () => ['p', 0],
-    // toVue: ParagraphComponent,
-  }))
-  .commands(({ name }) => ({
-    [name]: () => ({ commands }) => {
-      return commands.toggleBlockType(name, 'paragraph')
-    },
-  }))
-  .keys(({ editor }) => ({
-    'Mod-Alt-0': () => editor.paragraph(),
-  }))
-  .create()
+  renderHTML() {
+    return ['p', 0]
+  }
+
+}

packages/extension-text/index.ts

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

packages/vue-starter-kit/index.ts

@@ -1,7 +1,8 @@
-import originalDefaultExtensions from '@tiptap/starter-kit'
+// import originalDefaultExtensions from '@tiptap/starter-kit'
 
 export * from '@tiptap/vue'
 
 export function defaultExtensions() {
-  return originalDefaultExtensions()
+  return []
+  // return originalDefaultExtensions()
 }