add markextension

packages/core/src/Editor.ts

@@ -14,9 +14,7 @@ import createStyleTag from './utils/createStyleTag'
 import CommandManager from './CommandManager'
 import ExtensionManager from './ExtensionManager'
 import EventEmitter from './EventEmitter'
-import Extension from './Extension'
+import { Extensions } from './types'
-import Node from './Node'
-import Mark from './Mark'
 import defaultPlugins from './plugins'
 import * as coreCommands from './commands'
 import style from './style'
@@ -64,7 +62,7 @@ interface HTMLElement {
 interface EditorOptions {
   element: Element,
   content: EditorContent,
-  extensions: (Extension | Node | Mark)[],
+  extensions: Extensions[],
   injectCSS: boolean,
   autoFocus: 'start' | 'end' | number | boolean | null,
   editable: boolean,

packages/core/src/Mark.ts

@@ -46,3 +46,73 @@
 //   }
 
 // }
+
+import { DOMOutputSpec, MarkSpec, Mark } from 'prosemirror-model'
+import { ExtensionSpec } from './Extension'
+
+export interface MarkExtensionSpec<Options = {}, Commands = {}> extends ExtensionSpec<Options, Commands> {
+  inclusive?: MarkSpec['inclusive'],
+  excludes?: MarkSpec['excludes'],
+  group?: MarkSpec['group'],
+  spanning?: MarkSpec['spanning'],
+  parseHTML?: (
+    this: {
+      options: Options,
+    },
+  ) => MarkSpec['parseDOM'],
+  renderHTML?: (
+    this: {
+      options: Options,
+    },
+    props: {
+      node: Mark,
+      attributes: {
+        [key: string]: any,
+      },
+    }
+  ) => DOMOutputSpec,
+}
+
+export type MarkExtension = Required<Omit<MarkExtensionSpec, 'defaultOptions'> & {
+  type: string,
+  options: {
+    [key: string]: any
+  },
+}>
+
+const defaultMark: MarkExtension = {
+  type: 'mark',
+  name: 'mark',
+  options: {},
+  inclusive: null,
+  excludes: null,
+  group: null,
+  spanning: null,
+  createCommands: () => ({}),
+  parseHTML: () => null,
+  renderHTML: () => null,
+}
+
+export function createMark<Options extends {}, Commands extends {}>(config: MarkExtensionSpec<Options, Commands>) {
+  const extend = <ExtendedOptions = Options, ExtendedCommands = Commands>(extendedConfig: Partial<MarkExtensionSpec<ExtendedOptions, ExtendedCommands>>) => {
+    return createMark({
+      ...config,
+      ...extendedConfig,
+    } as MarkExtensionSpec<ExtendedOptions, ExtendedCommands>)
+  }
+
+  const setOptions = (options?: Partial<Options>) => {
+    const { defaultOptions, ...rest } = config
+
+    return {
+      ...defaultMark,
+      ...rest,
+      options: {
+        ...defaultOptions,
+        ...options,
+      } as Options,
+    }
+  }
+
+  return Object.assign(setOptions, { config, extend })
+}

packages/core/src/Node.ts

@@ -84,13 +84,22 @@ export interface NodeExtensionSpec<Options = {}, Commands = {}> extends Extensio
   code?: NodeSpec['code'],
   defining?: NodeSpec['defining'],
   isolating?: NodeSpec['isolating'],
-  parseHTML?: () => NodeSpec['parseDOM'],
+  parseHTML?: (
-  renderHTML?: (props: {
+    this: {
+      options: Options,
+    },
+  ) => NodeSpec['parseDOM'],
+  renderHTML?: (
+    this: {
+      options: Options,
+    },
+    props: {
       node: Node,
       attributes: {
         [key: string]: any,
       },
-  }) => DOMOutputSpec,
+    }
+  ) => DOMOutputSpec,
 }
 
 export type NodeExtension = Required<Omit<NodeExtensionSpec, 'defaultOptions'> & {

packages/core/src/utils/getSchema.ts

@@ -1,4 +1,4 @@
-import { NodeSpec, Schema } from 'prosemirror-model'
+import { NodeSpec, MarkSpec, Schema } from 'prosemirror-model'
 import { Extensions } from '../types'
 // import getTopNodeFromExtensions from './getTopNodeFromExtensions'
 // import getNodesFromExtensions from './getNodesFromExtensions'
@@ -7,7 +7,7 @@ import { Extensions } from '../types'
 import splitExtensions from './splitExtensions'
 
 export default function getSchema(extensions: Extensions): Schema {
-  const { nodeExtensions } = splitExtensions(extensions)
+  const { nodeExtensions, markExtensions } = splitExtensions(extensions)
 
   const topNode = nodeExtensions.find(extension => extension.topNode)?.name
 
@@ -38,9 +38,30 @@ export default function getSchema(extensions: Extensions): Schema {
     return [extension.name, schema]
   }))
 
+  const marks = Object.fromEntries(markExtensions.map(extension => {
+    const context = {
+      options: extension.options,
+    }
+
+    const attributes = {
+      class: 'test',
+    }
+
+    const schema: MarkSpec = {
+      inclusive: extension.inclusive,
+      excludes: extension.excludes,
+      group: extension.group,
+      spanning: extension.spanning,
+      parseDOM: extension.parseHTML.bind(context)(),
+      toDOM: node => extension.renderHTML.bind(context)({ node, attributes }),
+    }
+
+    return [extension.name, schema]
+  }))
+
   return new Schema({
     topNode,
     nodes,
-    marks: {},
+    marks,
   })
 }

packages/core/src/utils/splitExtensions.ts

@@ -1,16 +1,16 @@
 import { Extensions } from '../types'
 import { Extension } from '../Extension'
 import { NodeExtension } from '../Node'
-// import { MarkExtension } from '../Node'
+import { MarkExtension } from '../Mark'
 
 export default function splitExtensions(extensions: Extensions) {
   const baseExtensions = extensions.filter(extension => extension.type === 'extension') as Extension[]
   const nodeExtensions = extensions.filter(extension => extension.type === 'node') as NodeExtension[]
-  // const markExtensions = extensions.filter(extension => extension.type === 'mark') as MarkExtension[]
+  const markExtensions = extensions.filter(extension => extension.type === 'mark') as MarkExtension[]
 
   return {
     baseExtensions,
     nodeExtensions,
-    // markExtensions,
+    markExtensions,
   }
 }