fix extension manager

2024-11-28 23:59:25 +08:00 · 2020-09-09 10:58:10 +02:00 · 2020-09-09 10:58:10 +02:00 · a812dd47be
commit a812dd47be
parent bbccfa43e8
22 changed files with 1099 additions and 1061 deletions
--- a/docs/src/demos/Examples/Focus/index.vue
+++ b/docs/src/demos/Examples/Focus/index.vue
@ -31,16 +31,16 @@ export default {
  mounted() {
    this.editor = new Editor({
      extensions: [
-        new Document(),
-        new History(),
-        new Paragraph(),
-        new Text(),
-        new Bold(),
-        new Italic(),
-        new Code(),
-        new CodeBlock(),
-        new Heading(),
-        new Focus({
+        Document(),
+        History(),
+        Paragraph(),
+        Text(),
+        Bold(),
+        Italic(),
+        Code(),
+        CodeBlock(),
+        Heading(),
+        Focus({
          className: 'has-focus',
          nested: true,
        }),
--- a/docs/src/demos/Examples/Simple/index.vue
+++ b/docs/src/demos/Examples/Simple/index.vue
@ -24,9 +24,9 @@ export default {
    this.editor = new Editor({
      content: '<p>This is a radically reduced version of tiptap for minimalisits. It has only support for a document, paragraphs and text, that’s it.</p>',
      extensions: [
-        new Document(),
-        new Paragraph(),
-        new Text(),
+        Document(),
+        Paragraph(),
+        Text(),
      ],
    })

--- a/docs/src/demos/ExtensionConfiguration/index.vue
+++ b/docs/src/demos/ExtensionConfiguration/index.vue
@ -26,10 +26,10 @@ export default {
    this.editor = new Editor({
      content: '<p>I’m running tiptap with Vue.js. This demo is interactive, try to edit the text.</p>',
      extensions: [
-        new Document(),
-        new Paragraph(),
-        new Text(),
-        new Bold(),
+        Document(),
+        Paragraph(),
+        Text(),
+        Bold(),
      ],
    })
  },
--- a/docs/src/demos/Extensions/Bold/index.vue
+++ b/docs/src/demos/Extensions/Bold/index.vue
@ -30,10 +30,10 @@ export default {
  mounted() {
    this.editor = new Editor({
      extensions: [
-        new Document(),
-        new Paragraph(),
-        new Text(),
-        new Bold(),
+        Document(),
+        Paragraph(),
+        Text(),
+        Bold(),
      ],
      content: `
        <p>This isn’t bold.</p>
--- a/docs/src/demos/Extensions/Code/index.vue
+++ b/docs/src/demos/Extensions/Code/index.vue
@ -30,10 +30,10 @@ export default {
  mounted() {
    this.editor = new Editor({
      extensions: [
-        new Document(),
-        new Paragraph(),
-        new Text(),
-        new Code(),
+        Document(),
+        Paragraph(),
+        Text(),
+        Code(),
      ],
      content: `
        <p>This isn’t code.</p>
--- a/docs/src/demos/Extensions/History/index.vue
+++ b/docs/src/demos/Extensions/History/index.vue
@ -33,10 +33,10 @@ export default {
  mounted() {
    this.editor = new Editor({
      extensions: [
-        new Document(),
-        new Paragraph(),
-        new Text(),
-        new History(),
+        Document(),
+        Paragraph(),
+        Text(),
+        History(),
      ],
      content: `
        <p>Edit this text and press undo to test this extension.</p>
--- a/docs/src/demos/Extensions/Italic/index.vue
+++ b/docs/src/demos/Extensions/Italic/index.vue
@ -30,10 +30,10 @@ export default {
  mounted() {
    this.editor = new Editor({
      extensions: [
-        new Document(),
-        new Paragraph(),
-        new Text(),
-        new Italic(),
+        Document(),
+        Paragraph(),
+        Text(),
+        Italic(),
      ],
      content: `
        <p>This isn’t italic.</p>
--- a/docs/src/demos/Guide/BuildYourEditor/index.vue
+++ b/docs/src/demos/Guide/BuildYourEditor/index.vue
@ -55,15 +55,15 @@ export default {
    this.editor = new Editor({
      content: '<h2>Hey there!</h2><p>This editor is based on Prosemirror, fully extendable and renderless. You can easily add custom nodes as Vue components.</p>',
      extensions: [
-        new Document(),
-        new Paragraph(),
-        new Text(),
-        new CodeBlock(),
-        new History(),
-        new Bold(),
-        new Italic(),
-        new Code(),
-        new Heading(),
+        Document(),
+        Paragraph(),
+        Text(),
+        CodeBlock(),
+        History(),
+        Bold(),
+        Italic(),
+        Code(),
+        Heading(),
      ],
    })
  },
--- a/docs/src/docPages/api/extensions/blockquote.md
+++ b/docs/src/docPages/api/extensions/blockquote.md
@ -39,7 +39,7 @@ export default {
    return {
      editor: new Editor({
        extensions: [
-          new Blockquote(),
+          Blockquote(),
        ],
        content: `
          <blockquote>
--- a/docs/src/docPages/api/extensions/bullet-list.md
+++ b/docs/src/docPages/api/extensions/bullet-list.md
@ -43,7 +43,7 @@ export default {
    return {
      editor: new Editor({
        extensions: [
-          new BulletList(),
+          BulletList(),
        ],
        content: `
          <ul>
--- a/docs/src/docPages/api/extensions/heading.md
+++ b/docs/src/docPages/api/extensions/heading.md
@ -51,7 +51,7 @@ export default {
    return {
      editor: new Editor({
        extensions: [
-          new Heading({
+          Heading({
            levels: [1, 2],
          }),
        ],
--- a/docs/src/docPages/api/extensions/horizontal-rule.md
+++ b/docs/src/docPages/api/extensions/horizontal-rule.md
@ -39,7 +39,7 @@ export default {
    return {
      editor: new Editor({
        extensions: [
-          new HorizontalRule(),
+          HorizontalRule(),
        ],
        content: `
          <p>Some text.</p>
--- a/docs/src/docPages/api/extensions/ordered-list.md
+++ b/docs/src/docPages/api/extensions/ordered-list.md
@ -43,7 +43,7 @@ export default {
    return {
      editor: new Editor({
        extensions: [
-          new OrderedList(),
+          OrderedList(),
        ],
        content: `
          <ol>
--- a/docs/src/docPages/api/extensions/placeholder.md
+++ b/docs/src/docPages/api/extensions/placeholder.md
@ -66,10 +66,10 @@ You have to include all table extensions (`TableHeader`, `TableCell` & `TableRow
      return {
        editor: new Editor({
          extensions: [
-            new Table(),
-            new TableCell(),
-            new TableHeader(),
-            new TableRow(),
+            Table(),
+            TableCell(),
+            TableHeader(),
+            TableRow(),
          ],
          content: ''
        }),
--- a/docs/src/docPages/api/extensions/strike.md
+++ b/docs/src/docPages/api/extensions/strike.md
@ -40,7 +40,7 @@ export default {
    return {
      editor: new Editor({
        extensions: [
-          new Strike(),
+          Strike(),
        ],
        content: `
          <p><s>That's strikethrough.</s></p>
--- a/docs/src/docPages/api/extensions/todo-list.md
+++ b/docs/src/docPages/api/extensions/todo-list.md
@ -43,10 +43,10 @@ export default {
    return {
      editor: new Editor({
        extensions: [
-          new TodoItem({
+          TodoItem({
            nested: true,
          }),
-          new TodoList(),
+          TodoList(),
        ],
        content: `
          <ul data-type="todo_list">
--- a/docs/src/docPages/api/extensions/underline.md
+++ b/docs/src/docPages/api/extensions/underline.md
@ -40,7 +40,7 @@ export default {
    return {
      editor: new Editor({
        extensions: [
-          new Underline(),
+          Underline(),
        ],
        content: `
          <p><u>This is underlined.</u></p>
--- a/docs/src/docPages/general/roadmap.md
+++ b/docs/src/docPages/general/roadmap.md
@ -2,7 +2,7 @@

 ## New features

-* generate schema without initializing tiptap, to make SSR easier (e. g. `getSchema([new Doc(), new Paragraph()])`)
+* generate schema without initializing tiptap, to make SSR easier (e. g. `getSchema([Doc(), Paragraph()])`)

 ## Requested features

--- a/packages/core/src/Editor.ts
+++ b/packages/core/src/Editor.ts
@ -12,6 +12,9 @@ import removeElement from './utils/removeElement'
 import getSchemaTypeByName from './utils/getSchemaTypeByName'
 import ExtensionManager from './ExtensionManager'
 import EventEmitter from './EventEmitter'
+import Extension from './Extension'
+import Node from './Node'
+import Mark from './Mark'
 import ComponentRenderer from './ComponentRenderer'
 import defaultPlugins from './plugins'
 import * as commands from './commands'
@ -27,7 +30,7 @@ type EditorContent = string | JSON | null
 interface EditorOptions {
  element: Element,
  content: EditorContent,
-  extensions: Function[],
+  extensions: (Extension | Node | Mark)[],
  injectCSS: boolean,
  autoFocus: 'start' | 'end' | number | boolean | null,
  editable: boolean,
--- a/packages/core/src/Extension.ts
+++ b/packages/core/src/Extension.ts
@ -78,9 +78,15 @@ export interface ExtensionExtends<Callback = ExtensionCallback> {
  plugins: (params: Callback) => Plugin[]
 }

-export default class Extension<Options, Extends extends ExtensionExtends = ExtensionExtends> {
+export default class Extension<Options = {}, Extends extends ExtensionExtends = ExtensionExtends> {
  type = 'extension'
-  configs: any = {}
+  config: any = {}
+  configs: {
+    [key: string]: {
+      stategy: 'extend' | 'overwrite'
+      value: any
+    }[]
+  } = {} 
  usedOptions: Partial<Options> = {}

  protected storeConfig(key: string, value: any, stategy: 'extend' | 'overwrite') {
--- a/packages/core/src/ExtensionManager.ts
+++ b/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'
@ -10,8 +11,7 @@ import Node from './Node'
 import Mark from './Mark'
 import capitalize from './utils/capitalize'

-// type Extensions = (Extension | Node | Mark)[]
-type Extensions = Function[]
+type Extensions = (Extension | Node | Mark)[]

 export default class ExtensionManager {

@ -22,77 +22,106 @@ export default class ExtensionManager {
    this.editor = editor
    this.extensions = extensions
    this.extensions.forEach(extension => {
-      console.log({extension})
-      // extension.bindEditor(editor)
-      // editor.on('schemaCreated', () => {
-      //   this.editor.registerCommands(extension.commands())
-      //   extension.created()
-      // })
+      const simpleConfigs = ['name', 'defaults']
+
+      Object
+        .entries(extension.configs)
+        .sort(([name]) => simpleConfigs.includes(name) ? -1 : 1)
+        .forEach(([name, configs]) => {
+          extension.config[name] = configs.reduce((accumulator, { stategy, value: rawValue }) => {
+            const isSimpleConfig = simpleConfigs.includes(name)
+            const props = isSimpleConfig
+              ? undefined
+              : {
+                editor,
+                options: deepmerge(extension.config.defaults, extension.usedOptions),
+                type: {},
+                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)
+        })
+
+      editor.on('schemaCreated', () => {
+        if (extension.config.commands) {
+          this.editor.registerCommands(extension.config.commands)
+        }
+      })
    })
  }

  get topNode() {
-    const topNode = collect(this.extensions).firstWhere('topNode', true)
+    const topNode = collect(this.extensions).firstWhere('config.topNode', true)

    if (topNode) {
-      return topNode.name
+      return topNode.config.name
    }
  }

  get nodes(): any {
-    // return collect(this.extensions)
-    //   .where('extensionType', 'node')
-    //   .mapWithKeys((extension: Node) => [extension.name, extension.schema()])
-    //   .all()
-    return []
+    return collect(this.extensions)
+      .where('type', 'node')
+      .mapWithKeys((extension: Node) => [extension.config.name, extension.config.schema])
+      .all()
  }

  get marks(): any {
-    // return collect(this.extensions)
-    //   .where('extensionType', 'mark')
-    //   .mapWithKeys((extension: Mark) => [extension.name, extension.schema()])
-    //   .all()
-    return []
+    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())
-    //   .toArray()
+    const plugins = collect(this.extensions)
+      .flatMap(extension => extension.config.plugins)
+      .filter(plugin => plugin)
+      .toArray()

-    // return [
-    //   ...plugins,
-    //   ...this.keymaps,
-    //   ...this.pasteRules,
-    //   inputRules({ rules: this.inputRules }),
-    // ]
-
-    return []
+    return [
+      ...plugins,
+      ...this.keymaps,
+      ...this.pasteRules,
+      inputRules({ rules: this.inputRules }),
+    ]
  }

  get inputRules(): any {
-    // return collect(this.extensions)
-    //   .flatMap(extension => extension.inputRules())
-    //   .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.pasteRules())
-    //   .toArray()
-    return {}
+    return collect(this.extensions)
+      .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(keys => keymap(keys))
-    //   .toArray()
-    return []
+    return collect(this.extensions)
+      .map(extension => extension.config.keys)
+      .filter(keys => keys)
+      .map(keys => keymap(keys))
+      .toArray()
  }

  get nodeViews() {
--- a/packages/core/src/test.ts
+++ b/packages/core/src/test.ts