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
+  }
 }

packages/extension-bold/index.ts

@@ -1,6 +1,4 @@
-import { Mark, CommandSpec, markInputRule, markPasteRule } from '@tiptap/core'
-import { MarkSpec } from 'prosemirror-model'
-import VerEx from 'verbal-expressions'
+import { Mark, markInputRule, markPasteRule } from '@tiptap/core'
 
 declare module '@tiptap/core/src/Editor' {
   interface Editor {
@@ -8,75 +6,44 @@ declare module '@tiptap/core/src/Editor' {
   }
 }
 
-export default class Bold extends Mark {
+export const starInputRegex = /(?:^|\s)((?:\*\*)((?:[^\*\*]+))(?:\*\*))$/gm
+export const starPasteRegex = /(?:^|\s)((?:\*\*)((?:[^\*\*]+))(?:\*\*))/gm
+export const underscoreInputRegex = /(?:^|\s)((?:__)((?:[^__]+))(?:__))$/gm
+export const underscorePasteRegex = /(?:^|\s)((?:__)((?:[^__]+))(?:__))/gm
 
-  name = 'bold'
-
-  schema(): MarkSpec {
-    return {
-      parseDOM: [
-        {
-          tag: 'strong',
-        },
-        {
-          tag: 'b',
-          getAttrs: node => (node as HTMLElement).style.fontWeight !== 'normal' && null,
-        },
-        {
-          style: 'font-weight',
-          getAttrs: value => /^(bold(er)?|[5-9]\d{2,})$/.test(value as string) && null,
-        },
-      ],
-      toDOM: () => ['strong', 0],
-    }
-  }
-
-  commands(): CommandSpec {
-    return {
-      bold: next => () => {
-        this.editor.toggleMark(this.name)
-        next()
+export default new Mark()
+  .name('bold')
+  .schema(() => ({
+    parseDOM: [
+      {
+        tag: 'strong',
       },
-    }
-  }
-
-  keys() {
-    return {
-      'Mod-b': () => this.editor.bold()
-    }
-  }
-
-  inputRules() {
-    return ['**', '__'].map(character => {
-      const regex = VerEx()
-        .add('(?:^|\\s)')
-        .beginCapture()
-        .find(character)
-        .beginCapture()
-        .somethingBut(character)
-        .endCapture()
-        .find(character)
-        .endCapture()
-        .endOfLine()
-
-      return markInputRule(regex, this.type)
-    })
-  }
-
-  pasteRules() {
-    return ['**', '__'].map(character => {
-      const regex = VerEx()
-        .add('(?:^|\\s)')
-        .beginCapture()
-        .find(character)
-        .beginCapture()
-        .somethingBut(character)
-        .endCapture()
-        .find(character)
-        .endCapture()
-
-      return markPasteRule(regex, this.type)
-    })
-  }
-
-}
+      {
+        tag: 'b',
+        getAttrs: node => (node as HTMLElement).style.fontWeight !== 'normal' && null,
+      },
+      {
+        style: 'font-weight',
+        getAttrs: value => /^(bold(er)?|[5-9]\d{2,})$/.test(value as string) && null,
+      },
+    ],
+    toDOM: () => ['strong', 0],
+  }))
+  .commands(({ editor, name, type }) => ({
+    bold: next => () => {
+      editor.toggleMark(name)
+      next()
+    },
+  }))
+  .keys(({ editor }) => ({
+    'Mod-b': () => editor.bold()
+  }))
+  .inputRules(({ type }) => [
+    markInputRule(starInputRegex, type),
+    markInputRule(underscoreInputRegex, type),
+  ])
+  .pasteRules(({ type }) => [
+    markPasteRule(starPasteRegex, type),
+    markPasteRule(underscorePasteRegex, type),
+  ])
+  .create()

packages/extension-code/index.ts

@@ -1,6 +1,4 @@
-import { Mark, markInputRule, markPasteRule, CommandSpec } from '@tiptap/core'
-import { MarkSpec } from 'prosemirror-model'
-import VerEx from 'verbal-expressions'
+import { Mark, markInputRule, markPasteRule } from '@tiptap/core'
 
 declare module '@tiptap/core/src/Editor' {
   interface Editor {
@@ -8,62 +6,31 @@ declare module '@tiptap/core/src/Editor' {
   }
 }
 
-export default class Code extends Mark {
+export const inputRegex = /(?:^|\s)((?:`)((?:[^`]+))(?:`))$/gm
+export const pasteRegex = /(?:^|\s)((?:`)((?:[^`]+))(?:`))/gm
 
-  name = 'code'
-
-  schema(): MarkSpec {
-    return {
-      excludes: '_',
-      parseDOM: [
-        { tag: 'code' },
-      ],
-      toDOM: () => ['code', 0],
-    }
-  }
-
-  commands(): CommandSpec {
-    return {
-      code: next => () => {
-        this.editor.toggleMark(this.name)
-        next()
-      },
-    }
-  }
-
-  keys() {
-    return {
-      'Mod-`': () => this.editor.code()
-    }
-  }
-
-  inputRules() {
-    const regex = VerEx()
-      .add('(?:^|\\s)')
-      .beginCapture()
-      .find('`')
-      .beginCapture()
-      .somethingBut('`')
-      .endCapture()
-      .find('`')
-      .endCapture()
-      .endOfLine()
-
-    return markInputRule(regex, this.type)
-  }
-
-  pasteRules() {
-    const regex = VerEx()
-      .add('(?:^|\\s)')
-      .beginCapture()
-      .find('`')
-      .beginCapture()
-      .somethingBut('`')
-      .endCapture()
-      .find('`')
-      .endCapture()
-
-    return markPasteRule(regex, this.type)
-  }
-
-}
+export default new Mark()
+  .name('code')
+  .schema(() => ({
+    excludes: '_',
+    parseDOM: [
+      { tag: 'code' },
+    ],
+    toDOM: () => ['code', 0],
+  }))
+  .commands(({ editor, name }) => ({
+    code: next => () => {
+      editor.toggleMark(name)
+      next()
+    },
+  }))
+  .keys(({ editor }) => ({
+    'Mod-`': () => editor.code()
+  }))
+  .inputRules(({ type }) => [
+    markInputRule(inputRegex, type)
+  ])
+  .pasteRules(({ type }) => [
+    markPasteRule(inputRegex, type)
+  ])
+  .create()

packages/extension-codeblock/index.ts

@@ -1,23 +1,17 @@
 import { Node } from '@tiptap/core'
-import { NodeSpec } from 'prosemirror-model'
 
-export default class CodeBlock extends Node {
-
-  name = 'code_block'
-
-  schema(): NodeSpec {
-    return {
-      content: 'text*',
-      marks: '',
-      group: 'block',
-      code: true,
-      defining: true,
-      draggable: false,
-      parseDOM: [
-        { tag: 'pre', preserveWhitespace: 'full' },
-      ],
-      toDOM: () => ['pre', ['code', 0]],
-    }
-  }
-
-}
+export default new Node()
+  .name('code_block')
+  .schema(() => ({
+    content: 'text*',
+    marks: '',
+    group: 'block',
+    code: true,
+    defining: true,
+    draggable: false,
+    parseDOM: [
+      { tag: 'pre', preserveWhitespace: 'full' },
+    ],
+    toDOM: () => ['pre', ['code', 0]],
+  }))
+  .create()

packages/extension-document/index.ts

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

packages/extension-focus/index.ts

@@ -2,57 +2,45 @@ import { Extension } from '@tiptap/core'
 import { Plugin } from 'prosemirror-state'
 import { DecorationSet, Decoration } from 'prosemirror-view'
 
-interface FocusOptions {
+export interface FocusOptions {
   className: string,
   nested: boolean,
 }
 
-export default class Focus extends Extension {
+export default new Extension<FocusOptions>()
+  .name('focus')
+  .defaults({
+    className: 'has-focus',
+    nested: false,
+  })
+  .plugins(({ editor, options }) => [
+    new Plugin({
+      props: {
+        decorations: ({ doc, selection }) => {
+          const { isEditable, isFocused } = editor
+          const { anchor } = selection
+          const decorations: Decoration[] = []
 
-  name = 'focus'
+          if (!isEditable || !isFocused) {
+            return
+          }
 
-  constructor(options: Partial<FocusOptions> = {}) {
-    super(options)
-  }
+          doc.descendants((node, pos) => {
+            const hasAnchor = anchor >= pos && anchor <= (pos + node.nodeSize)
 
-  defaultOptions(): FocusOptions {
-    return {
-      className: 'has-focus',
-      nested: false,
-    }
-  }
-
-  plugins() {
-    return [
-      new Plugin({
-        props: {
-          decorations: ({ doc, selection }) => {
-            const { isEditable, isFocused } = this.editor
-            const { anchor } = selection
-            const decorations: Decoration[] = []
-
-            if (!isEditable || !isFocused) {
-              return
+            if (hasAnchor && !node.isText) {
+              const decoration = Decoration.node(pos, pos + node.nodeSize, {
+                class: options.className,
+              })
+              decorations.push(decoration)
             }
 
-            doc.descendants((node, pos) => {
-              const hasAnchor = anchor >= pos && anchor <= (pos + node.nodeSize)
+            return options.nested
+          })
 
-              if (hasAnchor && !node.isText) {
-                const decoration = Decoration.node(pos, pos + node.nodeSize, {
-                  class: this.options.className,
-                })
-                decorations.push(decoration)
-              }
-
-              return this.options.nested
-            })
-
-            return DecorationSet.create(doc, decorations)
-          },
+          return DecorationSet.create(doc, decorations)
         },
-      }),
-    ]
-  }
-
-}
+      },
+    }),
+  ])
+  .create()

packages/extension-heading/index.ts

@@ -1,11 +1,9 @@
-import { Node, CommandSpec } from '@tiptap/core'
-import { NodeSpec } from 'prosemirror-model'
-import VerEx from 'verbal-expressions'
+import { Node } from '@tiptap/core'
 import { textblockTypeInputRule } from 'prosemirror-inputrules'
 
 type Level = 1 | 2 | 3 | 4 | 5 | 6
 
-interface HeadingOptions {
+export interface HeadingOptions {
   levels: Level[],
 }
 
@@ -15,60 +13,37 @@ declare module '@tiptap/core/src/Editor' {
   }
 }
 
-export default class Heading extends Node {
-
-  name = 'heading'
-
-  constructor(options: Partial<HeadingOptions> = {}) {
-    super(options)
-  }
-
-  defaultOptions(): HeadingOptions {
-    return {
-      levels: [1, 2, 3, 4, 5, 6],
-    }
-  }
-
-  schema(): NodeSpec {
-    return {
-      attrs: {
-        level: {
-          default: 1,
-        },
+export default new Node<HeadingOptions>()
+  .name('heading')
+  .defaults({
+    levels: [1, 2, 3, 4, 5, 6],
+  })
+  .schema(({ options }) => ({
+    attrs: {
+      level: {
+        default: 1,
       },
-      content: 'inline*',
-      group: 'block',
-      defining: true,
-      draggable: false,
-      parseDOM: this.options.levels
-        .map((level: Level) => ({
-          tag: `h${level}`,
-          attrs: { level },
-        })),
-      toDOM: node => [`h${node.attrs.level}`, 0],
-    }
-  }
-
-  commands(): CommandSpec {
-    return {
-      heading: next => attrs => {
-        this.editor.toggleNode(this.name, 'paragraph', attrs)
-        next()
-      },
-    }
-  }
-
-  inputRules() {
-    return this.options.levels.map((level: Level) => {
-      const regex = VerEx()
-        .startOfLine()
-        .find('#')
-        .repeatPrevious(level)
-        .whitespace()
-        .endOfLine()
-
-      return textblockTypeInputRule(regex, this.type, { level })
+    },
+    content: 'inline*',
+    group: 'block',
+    defining: true,
+    draggable: false,
+    parseDOM: options.levels
+      .map((level: Level) => ({
+        tag: `h${level}`,
+        attrs: { level },
+      })),
+    toDOM: node => [`h${node.attrs.level}`, 0],
+  }))
+  .commands(({ editor, name }) => ({
+    [name]: next => attrs => {
+      editor.toggleNode(name, 'paragraph', attrs)
+      next()
+    },
+  }))
+  .inputRules(({ options, type }) => {
+    return options.levels.map((level: Level) => {
+      return textblockTypeInputRule(new RegExp(`^(#{1,${level}})\\s$`), type, { level })
     })
-  }
-
-}
+  })
+  .create()

packages/extension-history/index.ts

@@ -1,4 +1,4 @@
-import { Extension, CommandSpec } from '@tiptap/core'
+import { Extension } from '@tiptap/core'
 import {
   history,
   undo,
@@ -14,49 +14,31 @@ declare module '@tiptap/core/src/Editor' {
   }
 }
 
-interface HistoryOptions {
-  historyPluginOptions?: Object,
+export interface HistoryOptions {
+  historyPluginOptions: Object,
 }
 
-export default class History extends Extension {
-
-  name = 'history'
-  
-  constructor(options: Partial<HistoryOptions> = {}) {
-    super(options)
-  }
-
-  defaultOptions(): HistoryOptions {
-    return {
-      historyPluginOptions: {},
-    }
-  }
-
-  commands(): CommandSpec {
-    return {
-      undo: (next, { view }) => () => {
-        undo(view.state, view.dispatch)
-        next()
-      },
-      redo: (next, { view }) => () => {
-        redo(view.state, view.dispatch)
-        next()
-      },
-    }
-  }
-
-  keys() {
-    return {
-      'Mod-z': () => this.editor.undo(),
-      'Mod-y': () => this.editor.redo(),
-      'Shift-Mod-z': () => this.editor.redo(),
-    }
-  }
-
-  plugins() {
-    return [
-      history(this.options.historyPluginOptions)
-    ]
-  }
-
-}
+export default new Extension<HistoryOptions>()
+  .name('history')
+  .defaults({
+    historyPluginOptions: {},
+  })
+  .commands(() => ({
+    undo: (next, { view }) => () => {
+      undo(view.state, view.dispatch)
+      next()
+    },
+    redo: (next, { view }) => () => {
+      redo(view.state, view.dispatch)
+      next()
+    },
+  }))
+  .keys(({ editor }) => ({
+    'Mod-z': () => editor.undo(),
+    'Mod-y': () => editor.redo(),
+    'Shift-Mod-z': () => editor.redo(),
+  }))
+  .plugins(({ options }) => [
+    history(options.historyPluginOptions)
+  ])
+  .create()

packages/extension-italic/index.ts

@@ -1,6 +1,4 @@
-import { Mark, markInputRule, markPasteRule, CommandSpec } from '@tiptap/core'
-import { MarkSpec } from 'prosemirror-model'
-import VerEx from 'verbal-expressions'
+import { Mark, markInputRule, markPasteRule } from '@tiptap/core'
 
 declare module '@tiptap/core/src/Editor' {
   interface Editor {
@@ -8,67 +6,36 @@ declare module '@tiptap/core/src/Editor' {
   }
 }
 
-export default class Italic extends Mark {
+export const starInputRegex = /(?:^|\s)((?:\*)((?:[^\*]+))(?:\*))$/gm
+export const starPasteRegex = /(?:^|\s)((?:\*)((?:[^\*]+))(?:\*))/gm
+export const underscoreInputRegex = /(?:^|\s)((?:_)((?:[^_]+))(?:_))$/gm
+export const underscorePasteRegex = /(?:^|\s)((?:_)((?:[^_]+))(?:_))/gm
 
-  name = 'italic'
-
-  schema(): MarkSpec {
-    return {
-      parseDOM: [
-        { tag: 'i' },
-        { tag: 'em' },
-        { style: 'font-style=italic' },
-      ],
-      toDOM: () => ['em', 0],
-    }
-  }
-
-  commands(): CommandSpec {
-    return {
-      italic: next => () => {
-        this.editor.toggleMark(this.name)
-        next()
-      },
-    }
-  }
-
-  keys() {
-    return {
-      'Mod-i': () => this.editor.italic()
-    }
-  }
-
-  inputRules() {
-    return ['*', '_'].map(character => {
-      const regex = VerEx()
-        .add('(?:^|\\s)')
-        .beginCapture()
-        .find(character)
-        .beginCapture()
-        .somethingBut(character)
-        .endCapture()
-        .find(character)
-        .endCapture()
-        .endOfLine()
-
-      return markInputRule(regex, this.type)
-    })
-  }
-
-  pasteRules() {
-    return ['*', '_'].map(character => {
-      const regex = VerEx()
-        .add('(?:^|\\s)')
-        .beginCapture()
-        .find(character)
-        .beginCapture()
-        .somethingBut(character)
-        .endCapture()
-        .find(character)
-        .endCapture()
-
-      return markPasteRule(regex, this.type)
-    })
-  }
-
-}
+export default new Mark()
+  .name('italic')
+  .schema(() => ({
+    parseDOM: [
+      { tag: 'i' },
+      { tag: 'em' },
+      { style: 'font-style=italic' },
+    ],
+    toDOM: () => ['em', 0],
+  }))
+  .commands(({ editor, name }) => ({
+    italic: next => () => {
+      editor.toggleMark(name)
+      next()
+    },
+  }))
+  .keys(({ editor }) => ({
+    'Mod-i': () => editor.italic()
+  }))
+  .inputRules(({ type }) => [
+    markInputRule(starInputRegex, type),
+    markInputRule(underscoreInputRegex, type),
+  ])
+  .pasteRules(({ type }) => [
+    markPasteRule(starPasteRegex, type),
+    markPasteRule(underscorePasteRegex, type),
+  ])
+  .create()

packages/extension-paragraph/index.ts

@@ -1,19 +1,13 @@
 import { Node } from '@tiptap/core'
-import { NodeSpec } from 'prosemirror-model'
 // import ParagraphComponent from './paragraph.vue'
 
-export default class Paragraph extends Node {
-
-  name = 'paragraph'
-
-  schema(): NodeSpec {
-    return {
-      content: 'inline*',
-      group: 'block',
-      parseDOM: [{ tag: 'p' }],
-      toDOM: () => ['p', 0],
-      // toVue: ParagraphComponent,
-    }
-  }
-
-}
+export default new Node()
+  .name('paragraph')
+  .schema(() => ({
+    content: 'inline*',
+    group: 'block',
+    parseDOM: [{ tag: 'p' }],
+    toDOM: () => ['p', 0],
+    // toVue: ParagraphComponent,
+  }))
+  .create()

packages/extension-text/index.ts

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

packages/starter-kit/index.ts

@@ -10,14 +10,14 @@ import Heading from '@tiptap/extension-heading'
 
 export default function defaultExtensions() {
   return [
-    new Document(),
-    new History(),
-    new Paragraph(),
-    new Text(),
-    new Bold(),
-    new Italic(),
-    new Code(),
-    new CodeBlock(),
-    new Heading(),
+    Document(),
+    History(),
+    Paragraph(),
+    Text(),
+    Bold(),
+    Italic(),
+    Code(),
+    CodeBlock(),
+    Heading(),
   ]
 }

packages/vue-starter-kit/index.ts

@@ -12,14 +12,14 @@ import Heading from '@tiptap/extension-heading'
 
 export function defaultExtensions() {
   return [
-    new Document(),
-    new History(),
-    new Paragraph(),
-    new Text(),
-    new Bold(),
-    new Italic(),
-    new Code(),
-    new CodeBlock(),
-    new Heading(),
+    Document(),
+    History(),
+    Paragraph(),
+    Text(),
+    Bold(),
+    Italic(),
+    Code(),
+    CodeBlock(),
+    Heading(),
   ]
 }