Merge branch 'main' into feature/generate-html-from-json-document

# Conflicts:
#	packages/core/src/ExtensionManager.ts

packages/core/package.json

@@ -12,9 +12,12 @@
     "dist"
   ],
   "dependencies": {
+    "@types/clone-deep": "^4.0.1",
     "@types/prosemirror-dropcursor": "^1.0.0",
     "@types/prosemirror-gapcursor": "^1.0.1",
+    "clone-deep": "^4.0.1",
     "collect.js": "^4.28.2",
+    "deepmerge": "^4.2.2",
     "prosemirror-commands": "^1.1.3",
     "prosemirror-dropcursor": "^1.3.2",
     "prosemirror-gapcursor": "^1.1.5",
@@ -24,8 +27,7 @@
     "prosemirror-state": "^1.3.3",
     "prosemirror-tables": "^1.1.1",
     "prosemirror-utils": "^0.9.6",
-    "prosemirror-view": "^1.15.6",
-    "verbal-expressions": "^1.0.2"
+    "prosemirror-view": "^1.15.6"
   },
   "scripts": {
     "build": "microbundle"

packages/core/src/Editor.ts

@@ -12,10 +12,10 @@ import removeElement from './utils/removeElement'
 import getSchemaTypeByName from './utils/getSchemaTypeByName'
 import getHtmlFromFragment from './utils/getHtmlFromFragment'
 import ExtensionManager from './ExtensionManager'
+import EventEmitter from './EventEmitter'
 import Extension from './Extension'
 import Node from './Node'
 import Mark from './Mark'
-import EventEmitter from './EventEmitter'
 import ComponentRenderer from './ComponentRenderer'
 import defaultPlugins from './plugins'
 import * as commands from './commands'

packages/core/src/Extension.ts

@@ -1,54 +1,113 @@
+import cloneDeep from 'clone-deep'
 import { Plugin } from 'prosemirror-state'
-import { Editor, Command } from './Editor'
+import { Editor, CommandSpec } from './Editor'
 
-export default abstract class Extension {
+type AnyObject = {
+  [key: string]: any
+}
 
-  constructor(options = {}) {
-    this.options = {
-      ...this.defaultOptions(),
-      ...options,
+type NoInfer<T> = [T][T extends any ? 0 : never]
+
+type MergeStrategy = 'extend' | 'overwrite'
+
+type Configs = {
+  [key: string]: {
+    stategy: MergeStrategy
+    value: any
+  }[]
+}
+
+export interface ExtensionCallback<Options> {
+  name: string
+  editor: Editor
+  options: Options
+}
+
+export interface ExtensionExtends<Callback, Options> {
+  name: string
+  options: Options
+  commands: (params: Callback) => CommandSpec
+  inputRules: (params: Callback) => any[]
+  pasteRules: (params: Callback) => any[]
+  keys: (params: Callback) => {
+    [key: string]: Function
+  }
+  plugins: (params: Callback) => Plugin[]
+}
+
+export default class Extension<
+  Options = {},
+  Callback = ExtensionCallback<Options>,
+  Extends extends ExtensionExtends<Callback, Options> = ExtensionExtends<Callback, 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: Extends['name']) {
+    this.storeConfig('name', value, 'overwrite')
+    return this
+  }
+
+  public defaults(value: Options) {
+    this.storeConfig('defaults', value, 'overwrite')
+    return this
+  }
+
+  public commands(value: Extends['commands']) {
+    this.storeConfig('commands', value, 'overwrite')
+    return this
+  }
+
+  public keys(value: Extends['keys']) {
+    this.storeConfig('keys', value, 'overwrite')
+    return this
+  }
+
+  public inputRules(value: Extends['inputRules']) {
+    this.storeConfig('inputRules', value, 'overwrite')
+    return this
+  }
+
+  public pasteRules(value: Extends['pasteRules']) {
+    this.storeConfig('pasteRules', value, 'overwrite')
+    return this
+  }
+
+  public plugins(value: Extends['plugins']) {
+    this.storeConfig('plugins', value, 'overwrite')
+    return this
+  }
+
+  public extend<T extends Extract<keyof Extends, string>>(key: T, value: Extends[T]) {
+    this.storeConfig(key, value, 'extend')
+    return this
+  }
   
-  editor!: Editor
-  options: { [key: string]: any } = {}
-  
-  public abstract name: string
-  
-  public extensionType = 'extension'
+  public create() {
+    type ParentOptions = Options
 
-  public created() {}
-
-  public bindEditor(editor: Editor): void {
-    this.editor = editor
+    return <Options = ParentOptions>(options?: Partial<NoInfer<Options>>) => {
+      return cloneDeep(this, true).configure(options as Options)
+    }
   }
-
-  defaultOptions(): { [key: string]: any } {
-    return {}
-  }
-
-  update(): any {
-    return () => {}
-  }
-
-  plugins(): Plugin[] {
-    return []
-  }
-
-  inputRules(): any {
-    return []
-  }
-
-  pasteRules(): any {
-    return []
-  }
-
-  keys(): { [key: string]: Function } {
-    return {}
-  }
-
-  commands(): { [key: string]: Command } {
-    return {}
-  } 
-
 }

packages/core/src/ExtensionManager.ts

@@ -1,3 +1,4 @@
+import deepmerge from 'deepmerge'
 import collect from 'collect.js'
 import { Plugin } from 'prosemirror-state'
 import { keymap } from 'prosemirror-keymap'
@@ -5,6 +6,7 @@ import { inputRules } from 'prosemirror-inputrules'
 import { EditorView, Decoration } from 'prosemirror-view'
 import { Node as ProsemirrorNode } from 'prosemirror-model'
 import { Editor } from './Editor'
+import Extension from './Extension'
 import Node from './Node'
 import Mark from './Mark'
 import capitalize from './utils/capitalize'
@@ -21,30 +23,116 @@ export default class ExtensionManager {
   constructor(extensions: Extensions, editor: Editor) {
     this.editor = editor
     this.extensions = extensions
+
     this.extensions.forEach(extension => {
-      extension.bindEditor(editor)
+      this.resolveConfig(extension, 'name')
+      this.resolveConfig(extension, 'defaults')
+      this.resolveConfig(extension, 'topNode')
+      this.resolveConfig(extension, 'schema', ['name', 'options'])
+
       editor.on('schemaCreated', () => {
-        this.editor.registerCommands(extension.commands())
-        extension.created()
+        this.resolveConfig(extension, 'commands', ['name', 'options', 'editor', 'type'])
+        this.resolveConfig(extension, 'inputRules', ['name', 'options', 'editor', 'type'])
+        this.resolveConfig(extension, 'pasteRules', ['name', 'options', 'editor', 'type'])
+        this.resolveConfig(extension, 'keys', ['name', 'options', 'editor', 'type'])
+        this.resolveConfig(extension, 'plugins', ['name', 'options', 'editor', 'type'])
+
+        if (extension.config.commands) {
+          this.editor.registerCommands(extension.config.commands)
+        }
       })
     })
   }
 
-  get topNode() {
-    return getTopNodeFromExtensions(this.extensions)
+  resolveConfig(
+    extension: Extension | Node | Mark,
+    name: string,
+    propValues: ('name' | 'options' | 'editor' | 'type')[] = []
+  ) {
+    if (!extension.configs[name]) {
+      return
+    }
+
+    extension.config[name] = extension.configs[name]
+      .reduce((accumulator, { stategy, value: rawValue }) => {
+        const props: any = {}
+
+        if (propValues.includes('name')) {
+          props.name = extension.config.name
+        }
+
+        if (propValues.includes('options')) {
+          props.options = deepmerge(extension.config.defaults, extension.options)
+        }
+
+        if (propValues.includes('editor')) {
+          props.editor = this.editor
+        }
+
+        if (propValues.includes('type')) {
+          props.type = extension.type === 'node'
+            ? this.editor.schema.nodes[extension.config.name]
+            : this.editor.schema.marks[extension.config.name]
+        }
+
+        const value = typeof rawValue === 'function'
+          ? rawValue(props)
+          : rawValue
+
+        if (accumulator === undefined) {
+          return value
+        }
+
+        if (stategy === 'overwrite') {
+          return value
+        }
+
+        if (stategy === 'extend') {
+          return deepmerge(accumulator, value)
+        }
+
+        return accumulator
+      }, undefined)
+  }
+
+  // get topNode() {
+  //   return getTopNodeFromExtensions(this.extensions)
+  // }
+
+  // get nodes(): any {
+  //   return getNodesFromExtensions(this.extensions)
+  // }
+  
+  // get marks(): any {
+  //   return getMarksFromExtensions(this.extensions)
+  // }
+
+  get topNode(): any {
+    const topNode = collect(this.extensions).firstWhere('config.topNode', true)
+
+    if (topNode) {
+      return topNode.config.name
+    }
   }
 
   get nodes(): any {
-    return getNodesFromExtensions(this.extensions)
+    return collect(this.extensions)
+      .where('type', 'node')
+      .mapWithKeys((extension: Node) => [extension.config.name, extension.config.schema])
+      .all()
   }
 
   get marks(): any {
-    return getMarksFromExtensions(this.extensions)
+    return collect(this.extensions)
+      .where('type', 'mark')
+      .mapWithKeys((extension: Mark) => [extension.config.name, extension.config.schema])
+      .all()
   }
 
   get plugins(): Plugin[] {
     const plugins = collect(this.extensions)
-      .flatMap(extension => extension.plugins())
+      .flatMap(extension => extension.config.plugins)
+      .filter(plugin => plugin)
       .toArray()
 
     return [
@@ -57,54 +145,57 @@ export default class ExtensionManager {
 
   get inputRules(): any {
     return collect(this.extensions)
-      .flatMap(extension => extension.inputRules())
+      .flatMap(extension => extension.config.inputRules)
+      .filter(plugin => plugin)
       .toArray()
   }
 
   get pasteRules(): any {
     return collect(this.extensions)
-      .flatMap(extension => extension.pasteRules())
+      .flatMap(extension => extension.config.pasteRules)
+      .filter(plugin => plugin)
       .toArray()
   }
 
   get keymaps() {
     return collect(this.extensions)
-      .map(extension => extension.keys())
-      .filter(keys => !!Object.keys(keys).length)
-      // @ts-ignore
+      .map(extension => extension.config.keys)
+      .filter(keys => keys)
       .map(keys => keymap(keys))
       .toArray()
   }
 
   get nodeViews() {
-    const { renderer: Renderer } = this.editor
+    // const { renderer: Renderer } = this.editor
 
-    if (!Renderer || !Renderer.type) {
-      return {}
-    }
+    // if (!Renderer || !Renderer.type) {
+    //   return {}
+    // }
 
-    const prop = `to${capitalize(Renderer.type)}`
+    // const prop = `to${capitalize(Renderer.type)}`
 
-    return collect(this.extensions)
-      .where('extensionType', 'node')
-      .filter((extension: any) => extension.schema()[prop])
-      .map((extension: any) => {
-        return (
-          node: ProsemirrorNode,
-          view: EditorView,
-          getPos: (() => number) | boolean,
-          decorations: Decoration[],
-        ) => {
-          return new Renderer(extension.schema()[prop], {
-            extension,
-            editor: this.editor,
-            node,
-            getPos,
-            decorations,
-          })
-        }
-      })
-      .all()
+    // return collect(this.extensions)
+    //   .where('extensionType', 'node')
+    //   .filter((extension: any) => extension.schema()[prop])
+    //   .map((extension: any) => {
+    //     return (
+    //       node: ProsemirrorNode,
+    //       view: EditorView,
+    //       getPos: (() => number) | boolean,
+    //       decorations: Decoration[],
+    //     ) => {
+    //       return new Renderer(extension.schema()[prop], {
+    //         extension,
+    //         editor: this.editor,
+    //         node,
+    //         getPos,
+    //         decorations,
+    //       })
+    //     }
+    //   })
+    //   .all()
+
+    return {}
   }
 
 }

packages/core/src/Mark.ts

@@ -1,18 +1,28 @@
-import Extension from './Extension'
-import { MarkSpec } from 'prosemirror-model'
-
-export default abstract class Mark extends Extension {
-
-  constructor(options = {}) {
-    super(options)
-  }
-
-  public extensionType = 'mark'
-
-  abstract schema(): MarkSpec
-
-  get type() {
-    return this.editor.schema.marks[this.name]
-  }
+import { MarkSpec, MarkType } from 'prosemirror-model'
+import Extension, { ExtensionCallback, ExtensionExtends } from './Extension'
+import { Editor } from './Editor'
 
+export interface MarkCallback<Options> {
+  name: string
+  editor: Editor
+  options: Options
+  type: MarkType
 }
+
+export interface MarkExtends<Callback, Options> extends ExtensionExtends<Callback, Options> {
+  topMark: boolean
+  schema: (params: Omit<Callback, 'type' | 'editor'>) => MarkSpec
+}
+
+export default class Mark<
+  Options = {},
+  Callback = MarkCallback<Options>,
+  Extends extends MarkExtends<Callback, Options> = MarkExtends<Callback, Options>
+> extends Extension<Options, Callback, Extends> {
+  type = 'mark'
+
+  public schema(value: Extends['schema']) {
+    this.storeConfig('schema', value, 'overwrite')
+    return this
+  }
+}

packages/core/src/Node.ts

@@ -1,20 +1,33 @@
-import Extension from './Extension'
-import { NodeSpec } from 'prosemirror-model'
-
-export default abstract class Node extends Extension {
-
-  constructor(options = {}) {
-    super(options)
-  }
-
-  public extensionType = 'node'
-
-  public topNode = false
-
-  abstract schema(): NodeSpec
-
-  get type() {
-    return this.editor.schema.nodes[this.name]
-  }
+import { NodeSpec, NodeType } from 'prosemirror-model'
+import Extension, { ExtensionCallback, ExtensionExtends } from './Extension'
+import { Editor } from './Editor'
 
+export interface NodeCallback<Options> {
+  name: string
+  editor: Editor
+  options: Options
+  type: NodeType
+}
+
+export interface NodeExtends<Callback, Options> extends ExtensionExtends<Callback, Options> {
+  topNode: boolean
+  schema: (params: Omit<Callback, 'type' | 'editor'>) => NodeSpec
+}
+
+export default class Node<
+  Options = {},
+  Callback = NodeCallback<Options>,
+  Extends extends NodeExtends<Callback, Options> = NodeExtends<Callback, Options>
+> extends Extension<Options, Callback, Extends> {
+  type = 'node'
+
+  public topNode(value: Extends['topNode'] = true) {
+    this.storeConfig('topNode', value, 'overwrite')
+    return this
+  }
+
+  public schema(value: Extends['schema']) {
+    this.storeConfig('schema', value, 'overwrite')
+    return this
+  }
 }