add basic extension manager

This commit is contained in:
Philipp Kühn
2020-03-05 21:05:01 +01:00
parent 6e85098741
commit 54dcbfc473
8 changed files with 89 additions and 11 deletions

View File

@@ -11,6 +11,8 @@ import {exampleSetup} from "prosemirror-example-setup"
import elementFromString from './utils/elementFromString' import elementFromString from './utils/elementFromString'
import injectCSS from './utils/injectCSS' import injectCSS from './utils/injectCSS'
import ExtensionManager from './ExtensionManager'
type EditorContent = string | JSON type EditorContent = string | JSON
interface Options { interface Options {
@@ -24,10 +26,12 @@ export class Editor {
private lastCommand = Promise.resolve() private lastCommand = Promise.resolve()
private schema: Schema = new Schema({ schema: Schema
nodes: addListNodes(schema.spec.nodes, "paragraph block*", "block"),
marks: schema.spec.marks // private schema: Schema = new Schema({
}) // nodes: addListNodes(schema.spec.nodes, "paragraph block*", "block"),
// marks: schema.spec.marks
// })
selection = { from: 0, to: 0 } selection = { from: 0, to: 0 }
@@ -39,8 +43,12 @@ export class Editor {
extensions: [], extensions: [],
} }
extensionManager: ExtensionManager
constructor(options: Options) { constructor(options: Options) {
this.options = { ...this.options, ...options } this.options = { ...this.options, ...options }
this.extensionManager = new ExtensionManager(this.options.extensions, this)
this.schema = this.createSchema()
this.view = this.createView() this.view = this.createView()
this.registerCommand('focus', require('./commands/focus').default) this.registerCommand('focus', require('./commands/focus').default)
this.registerCommand('insertText', require('./commands/insertText').default) this.registerCommand('insertText', require('./commands/insertText').default)
@@ -55,6 +63,14 @@ export class Editor {
return this.view.state return this.view.state
} }
private createSchema() {
return new Schema({
// topNode: this.options.topNode,
nodes: this.extensionManager.nodes,
marks: this.extensionManager.marks,
})
}
private createState() { private createState() {
return EditorState.create({ return EditorState.create({
doc: this.createDocument(this.options.content), doc: this.createDocument(this.options.content),

View File

@@ -23,9 +23,7 @@ export default abstract class Extension {
this.editor = editor this.editor = editor
} }
get type(): any { public type = 'extension'
return 'extension'
}
get update(): any { get update(): any {
return () => {} return () => {}

View File

@@ -0,0 +1,34 @@
import { keymap } from 'prosemirror-keymap'
import { Editor } from './Editor'
export default class ExtensionManager {
extensions: [any?]
constructor(extensions: any = [], editor: Editor) {
// extensions.forEach(extension => {
// extension.bindEditor(editor)
// extension.init()
// })
this.extensions = extensions
}
get nodes() {
return this.extensions
.filter(extension => extension.type === 'node')
.reduce((nodes, { name, schema }) => ({
...nodes,
[name]: schema,
}), {})
}
get marks() {
return this.extensions
.filter(extension => extension.type === 'mark')
.reduce((marks, { name, schema }) => ({
...marks,
[name]: schema,
}), {})
}
}

View File

@@ -6,7 +6,7 @@ export default abstract class Node extends Extension {
super(options) super(options)
} }
// protected type = 'node' public type = 'node'
// get type() { // get type() {
// return 'node' // return 'node'

View File

@@ -2,7 +2,7 @@ import { Node } from '@tiptap/core'
export default class Document extends Node { export default class Document extends Node {
name = 'document' name = 'doc'
schema = { schema = {
content: 'block+', content: 'block+',

View File

@@ -0,0 +1,11 @@
import { Node } from '@tiptap/core'
export default class Text extends Node {
name = 'text'
schema = {
group: 'inline',
}
}

View File

@@ -0,0 +1,17 @@
{
"name": "@tiptap/text-extension",
"version": "1.0.0",
"source": "index.ts",
"main": "dist/tiptap-text-extension.js",
"umd:main": "dist/tiptap-text-extension.umd.js",
"module": "dist/tiptap-text-extension.mjs",
"unpkg": "dist/tiptap-text-extension.js",
"jsdelivr": "dist/tiptap-text-extension.js",
"files": [
"src",
"dist"
],
"peerDependencies": {
"@tiptap/core": "2.x"
}
}

View File

@@ -6,8 +6,9 @@
<script> <script>
import Editor from '@tiptap/core' import Editor from '@tiptap/core'
import Doc from '@tiptap/document-extension' import Document from '@tiptap/document-extension'
import Paragraph from '@tiptap/paragraph-extension' import Paragraph from '@tiptap/paragraph-extension'
import Text from '@tiptap/text-extension'
export default { export default {
mounted() { mounted() {
@@ -15,8 +16,9 @@ export default {
element: this.$refs.editor, element: this.$refs.editor,
content: '<p>foo</p>', content: '<p>foo</p>',
extensions: [ extensions: [
new Doc(), new Document(),
new Paragraph(), new Paragraph(),
new Text(),
], ],
}) })
// .focus('end') // .focus('end')