replace extensions

packages/core/src/Extension.ts

@@ -1,54 +1,151 @@
+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 {
+// export default abstract class Extension {
 
-  constructor(options = {}) {
+//   constructor(options = {}) {
-    this.options = {
+//     this.options = {
-      ...this.defaultOptions(),
+//       ...this.defaultOptions(),
-      ...options,
+//       ...options,
+//     }
+//   }
+  
+//   editor!: Editor
+//   options: { [key: string]: any } = {}
+  
+//   public abstract name: string
+  
+//   public extensionType = 'extension'
+
+//   public created() {}
+
+//   public bindEditor(editor: Editor): void {
+//     this.editor = editor
+//   }
+
+//   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 {}
+//   } 
+
+// }
+
+type AnyObject = {
+  [key: string]: any
+}
+
+type NoInfer<T> = [T][T extends any ? 0 : never]
+
+export interface ExtensionCallback {
+  name: string
+  editor: Editor
+  options: any
+}
+
+export interface ExtensionExtends<Callback = ExtensionCallback> {
+  name: string
+  options: AnyObject
+  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, Extends extends ExtensionExtends = ExtensionExtends> {
+  type = 'extension'
+  configs: any = {}
+  usedOptions: Partial<Options> = {}
+
+  protected storeConfig(key: string, value: any, stategy: 'extend' | 'overwrite') {
+    const item = {
+      stategy,
+      value,
+    }
+
+    if (this.configs[key]) {
+      this.configs[key].push(item)
+    } else {
+      this.configs[key] = [item]
     }
   }
 
-  editor!: Editor
+  public configure(options: Partial<Options>) {
-  options: { [key: string]: any } = {}
+    this.usedOptions = { ...this.usedOptions, ...options }
-  
+    return this
-  public abstract name: string
-  
-  public extensionType = 'extension'
-
-  public created() {}
-
-  public bindEditor(editor: Editor): void {
-    this.editor = editor
   }
 
-  defaultOptions(): { [key: string]: any } {
+  public name(value: Extends['name']) {
-    return {}
+    this.storeConfig('name', value, 'overwrite')
+    return this
   }
 
-  update(): any {
+  public defaults(value: Options) {
-    return () => {}
+    this.storeConfig('defaults', value, 'overwrite')
+    return this
   }
 
-  plugins(): Plugin[] {
+  public commands(value: Extends['commands']) {
-    return []
+    this.storeConfig('commands', value, 'overwrite')
+    return this
   }
 
-  inputRules(): any {
+  public keys(value: Extends['keys']) {
-    return []
+    this.storeConfig('keys', value, 'overwrite')
+    return this
   }
 
-  pasteRules(): any {
+  public inputRules(value: Extends['inputRules']) {
-    return []
+    this.storeConfig('inputRules', value, 'overwrite')
+    return this
   }
 
-  keys(): { [key: string]: Function } {
+  public pasteRules(value: Extends['pasteRules']) {
-    return {}
+    this.storeConfig('pasteRules', value, 'overwrite')
+    return this
   }
 
-  commands(): { [key: string]: Command } {
+  public plugins(value: Extends['plugins']) {
-    return {}
+    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
+  }
+  
+  public create() {
+    type ParentOptions = Options
+
+    return <Options = ParentOptions>(options?: Partial<NoInfer<Options>>) => {
+      return cloneDeep(this, true).configure(options as Options)
+    }
+  }
 }

packages/core/src/Mark.ts

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

packages/core/src/Node.ts

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

packages/core/src/test.ts

@@ -1,7 +1,7 @@
 import { NodeSpec, NodeType } from "prosemirror-model";
 import deepmerge from 'deepmerge'
 import collect from 'collect.js'
-import { Editor, CommandSpec } from '@tiptap/core'
+import { Editor, CommandSpec, ComponentRenderer } from '@tiptap/core'
 import cloneDeep from 'clone-deep'
 import { Plugin } from "prosemirror-state";
 
@@ -815,7 +815,7 @@ class ExtensionTest<Options, Extends extends ExtensionExtends = ExtensionExtends
     }
   }
 
-  public options(options: Partial<Options>) {
+  public configure(options: Partial<Options>) {
     this.usedOptions = { ...this.usedOptions, ...options }
     return this
   }
@@ -864,7 +864,7 @@ class ExtensionTest<Options, Extends extends ExtensionExtends = ExtensionExtends
     type ParentOptions = Options
 
     return <Options = ParentOptions>(options?: Partial<NoInfer<Options>>) => {
-      return cloneDeep(this, true).options(options as Options)
+      return cloneDeep(this, true).configure(options as Options)
     }
   }
 }
@@ -922,11 +922,83 @@ const Suggestion = new NodeTest<TestOptions>()
   }))
   .create()
 
-const Blub = new ExtensionTest<TestOptions>()
+// TODO: Erweitern
-  .name('bla')
+// const CustomHeadlineAligned = new Headline()
-  .create()
+//   .name('custom_headline')
+//   .extend('defaults', {
+//     levels: [1, 2, 3],
+//     class: 'font-xs text-outline text-center',
+//     alignments: ['left', 'center', 'right'],
+//   })
 
-console.log(Suggestion(), Suggestion().topNode().options({ trigger: 'jo' }))
+// const CustomHeadlineTag = new Headline()
+//   .name('custom_headline')
+//   .configure({
+//     class: 'custom-headline',
+//   })
+//   .schema(() => ({
+//     toDOM: () => ['h1', 0],
+//     toVue: Component,
+//   }))
+//   .merge('schema', () => ({
+//     parseDOM: [
+//       {
+//         tag: 'x-custom-headline',
+//       }
+//     ],
+//   }))
+
+
+
+
+
+// const Blub = new ExtensionTest<TestOptions>()
+//   .name('bla')
+//   .create()
+
+console.log(Suggestion())
+
+
+
+
+
+// export const Suggestion = new Suggestion()
+//   .name('suggestion')
+//   .defaults({
+//     trigger: '@',
+//     levels: [1, 2, 3],
+//   })
+//   .extend('schema', ({ editor, name, type}) => ({
+//     // levels: [1, 2, 3, 4, 5, 6],
+//     toDOM: () => ['strong', 0],
+//   }))
+//   .create()
+
+
+// const Mention = Suggestion()
+//   .name('mention')
+//   .configure({
+//     trigger: '@'
+//   })
+//   .create()
+
+// const Hashtag = Suggestion()
+//   .name('hashtag')
+//   .options({
+//     trigger: '#'
+//   })
+//   .create()
+
+
+// new Editor({
+//   extensions: [
+//     // Mention({}),
+//     // Hashtag(),
+//     // Suggestion({ trigger: '#'}).name('hashtag'),
+
+//     // Suggestion.option({ trigger: '@'}).name('mention'),
+//   ]
+// })
 
 // interface MentionOptions {
 //   trigger: string

packages/extension-bold/index.ts

@@ -1,5 +1,4 @@
-import { Mark, CommandSpec, markInputRule, markPasteRule } from '@tiptap/core'
+import { Mark, markInputRule, markPasteRule } from '@tiptap/core'
-import { MarkSpec } from 'prosemirror-model'
 import VerEx from 'verbal-expressions'
 
 declare module '@tiptap/core/src/Editor' {
@@ -8,75 +7,62 @@ declare module '@tiptap/core/src/Editor' {
   }
 }
 
-export default class Bold extends Mark {
+export default new Mark()
-
+  .name('bold')
-  name = 'bold'
+  .schema(() => ({
-
+    parseDOM: [
-  schema(): MarkSpec {
+      {
-    return {
+        tag: 'strong',
-      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()
       },
-    }
+      {
-  }
+        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 }) => ({
+    bold: next => () => {
+      editor.toggleMark(name)
+      next()
+    },
+  }))
+  .keys(({ editor }) => ({
+    'Mod-b': () => editor.bold()
+  }))
+  // .inputRules(({ type }) => {
+  //   return ['**', '__'].map(character => {
+  //     const regex = VerEx()
+  //       .add('(?:^|\\s)')
+  //       .beginCapture()
+  //       .find(character)
+  //       .beginCapture()
+  //       .somethingBut(character)
+  //       .endCapture()
+  //       .find(character)
+  //       .endCapture()
+  //       .endOfLine()
 
-  keys() {
+  //     return markInputRule(regex, type)
-    return {
+  //   })
-      'Mod-b': () => this.editor.bold()
+  // })
-    }
+  // .pasteRules(({ type }) => {
-  }
+  //   return ['**', '__'].map(character => {
+  //     const regex = VerEx()
+  //       .add('(?:^|\\s)')
+  //       .beginCapture()
+  //       .find(character)
+  //       .beginCapture()
+  //       .somethingBut(character)
+  //       .endCapture()
+  //       .find(character)
+  //       .endCapture()
 
-  inputRules() {
+  //     return markPasteRule(regex, type)
-    return ['**', '__'].map(character => {
+  //   })
-      const regex = VerEx()
+  // })
-        .add('(?:^|\\s)')
+  .create()
-        .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)
-    })
-  }
-
-}

packages/extension-code/index.ts

@@ -1,5 +1,4 @@
-import { Mark, markInputRule, markPasteRule, CommandSpec } from '@tiptap/core'
+import { Mark, markInputRule, markPasteRule } from '@tiptap/core'
-import { MarkSpec } from 'prosemirror-model'
 import VerEx from 'verbal-expressions'
 
 declare module '@tiptap/core/src/Editor' {
@@ -8,62 +7,49 @@ declare module '@tiptap/core/src/Editor' {
   }
 }
 
-export default class Code extends Mark {
+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 }) => {
+  //   const regex = VerEx()
+  //     .add('(?:^|\\s)')
+  //     .beginCapture()
+  //     .find('`')
+  //     .beginCapture()
+  //     .somethingBut('`')
+  //     .endCapture()
+  //     .find('`')
+  //     .endCapture()
+  //     .endOfLine()
 
-  name = 'code'
+  //   return [markInputRule(regex, type)]
+  // })
+  // .pasteRules(({ type }) => {
+  //   const regex = VerEx()
+  //     .add('(?:^|\\s)')
+  //     .beginCapture()
+  //     .find('`')
+  //     .beginCapture()
+  //     .somethingBut('`')
+  //     .endCapture()
+  //     .find('`')
+  //     .endCapture()
 
-  schema(): MarkSpec {
+  //   return [markPasteRule(regex, type)]
-    return {
+  // })
-      excludes: '_',
+  .create()
-      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)
-  }
-
-}

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 {
+export default new Node()
-
+  .name('code_block')
-  name = 'code_block'
+  .schema(() => ({
-
+    content: 'text*',
-  schema(): NodeSpec {
+    marks: '',
-    return {
+    group: 'block',
-      content: 'text*',
+    code: true,
-      marks: '',
+    defining: true,
-      group: 'block',
+    draggable: false,
-      code: true,
+    parseDOM: [
-      defining: true,
+      { tag: 'pre', preserveWhitespace: 'full' },
-      draggable: false,
+    ],
-      parseDOM: [
+    toDOM: () => ['pre', ['code', 0]],
-        { tag: 'pre', preserveWhitespace: 'full' },
+  }))
-      ],
+  .create()
-      toDOM: () => ['pre', ['code', 0]],
-    }
-  }
-
-}

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 {
+export default new Node()
-
+  .name('document')
-  name = 'document'
+  .topNode()
-
+  .schema(() => ({
-  topNode = true
+    content: 'block+',
-
+  }))
-  schema(): NodeSpec {
+  .create()
-    return {
-      content: 'block+',
-    }
-  }
-
-}

packages/extension-focus/index.ts

@@ -7,52 +7,40 @@ interface FocusOptions {
   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> = {}) {
+          doc.descendants((node, pos) => {
-    super(options)
+            const hasAnchor = anchor >= pos && anchor <= (pos + node.nodeSize)
-  }
 
-  defaultOptions(): FocusOptions {
+            if (hasAnchor && !node.isText) {
-    return {
+              const decoration = Decoration.node(pos, pos + node.nodeSize, {
-      className: 'has-focus',
+                class: options.className,
-      nested: false,
+              })
-    }
+              decorations.push(decoration)
-  }
-
-  plugins() {
-    return [
-      new Plugin({
-        props: {
-          decorations: ({ doc, selection }) => {
-            const { isEditable, isFocused } = this.editor
-            const { anchor } = selection
-            const decorations: Decoration[] = []
-
-            if (!isEditable || !isFocused) {
-              return
             }
 
-            doc.descendants((node, pos) => {
+            return options.nested
-              const hasAnchor = anchor >= pos && anchor <= (pos + node.nodeSize)
+          })
 
-              if (hasAnchor && !node.isText) {
+          return DecorationSet.create(doc, decorations)
-                const decoration = Decoration.node(pos, pos + node.nodeSize, {
-                  class: this.options.className,
-                })
-                decorations.push(decoration)
-              }
-
-              return this.options.nested
-            })
-
-            return DecorationSet.create(doc, decorations)
-          },
         },
-      }),
+      },
-    ]
+    }),
-  }
+  ])
-
+  .create()
-}

packages/extension-heading/index.ts

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

packages/extension-history/index.ts

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

packages/extension-italic/index.ts

@@ -1,5 +1,4 @@
-import { Mark, markInputRule, markPasteRule, CommandSpec } from '@tiptap/core'
+import { Mark, markInputRule, markPasteRule } from '@tiptap/core'
-import { MarkSpec } from 'prosemirror-model'
 import VerEx from 'verbal-expressions'
 
 declare module '@tiptap/core/src/Editor' {
@@ -8,67 +7,54 @@ declare module '@tiptap/core/src/Editor' {
   }
 }
 
-export default class Italic extends Mark {
+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 }) => {
+  //   return ['*', '_'].map(character => {
+  //     const regex = VerEx()
+  //       .add('(?:^|\\s)')
+  //       .beginCapture()
+  //       .find(character)
+  //       .beginCapture()
+  //       .somethingBut(character)
+  //       .endCapture()
+  //       .find(character)
+  //       .endCapture()
+  //       .endOfLine()
 
-  name = 'italic'
+  //     return markInputRule(regex, type)
+  //   })
+  // })
+  // .pasteRules(({ type }) => {
+  //   return ['*', '_'].map(character => {
+  //     const regex = VerEx()
+  //       .add('(?:^|\\s)')
+  //       .beginCapture()
+  //       .find(character)
+  //       .beginCapture()
+  //       .somethingBut(character)
+  //       .endCapture()
+  //       .find(character)
+  //       .endCapture()
 
-  schema(): MarkSpec {
+  //     return markPasteRule(regex, type)
-    return {
+  //   })
-      parseDOM: [
+  // })
-        { tag: 'i' },
+  .create()
-        { 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)
-    })
-  }
-
-}

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 {
+export default new Node()
-
+  .name('paragraph')
-  name = 'paragraph'
+  .schema(() => ({
-
+    content: 'inline*',
-  schema(): NodeSpec {
+    group: 'block',
-    return {
+    parseDOM: [{ tag: 'p' }],
-      content: 'inline*',
+    toDOM: () => ['p', 0],
-      group: 'block',
+    // toVue: ParagraphComponent,
-      parseDOM: [{ tag: 'p' }],
+  }))
-      toDOM: () => ['p', 0],
+  .create()
-      // toVue: ParagraphComponent,
-    }
-  }
-
-}

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 {
+export default new Node()
-
+  .name('text')
-  name = 'text'
+  .schema(() => ({
-
+    group: 'inline',
-  schema(): NodeSpec {
+  }))
-    return {
+  .create()
-      group: 'inline',
-    }
-  }
-
-}

packages/starter-kit/index.ts

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

packages/vue-starter-kit/index.ts

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