ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

add basic extension classes

Browse Source
This commit is contained in:
Philipp Kühn
2020-10-09 22:59:25 +02:00
parent a4ccb36e10
commit 8324f57528
13 changed files with 421 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/gridsome.server.js
View File

@@ -95,7 +95,7 @@ module.exports = function (api) {
.test(/\.tsx?$/) .test(/\.tsx?$/)
.use() .use()
.loader('ts-loader') .loader('ts-loader')
.options({ transpileOnly: false, appendTsSuffixTo: [/\.vue$/] }) .options({ transpileOnly: true, appendTsSuffixTo: [/\.vue$/] })
config.module config.module
.rule('jsx') .rule('jsx')

41
docs/src/components/LiveDemo/index.vue
View File

@@ -66,18 +66,19 @@ export default {
computed: { computed: {
requires() { requires() {
const names = this.$static.packages.edges // const names = this.$static.packages.edges
.map(item => item.node.name) // .map(item => item.node.name)
.filter(name => name !== 'html') // .filter(name => name !== 'html')
const packages = Object.fromEntries(names.map(name => { // const packages = Object.fromEntries(names.map(name => {
const module = require(`~/../../packages/${name}/index.ts`) // const module = require(`~/../../packages/${name}/index.ts`)
const onlyDefault = module.default && Object.keys(module).length === 1 // const onlyDefault = module.default && Object.keys(module).length === 1
return [`@tiptap/${name}`, onlyDefault ? module.default : module] // return [`@tiptap/${name}`, onlyDefault ? module.default : module]
})) // }))
return packages // return packages
return {}
}, },
file() { file() {
@@ -90,17 +91,17 @@ export default {
}, },
mounted() { mounted() {
this.files = collect(require.context('~/demos/', true, /.+\..+$/).keys()) // this.files = collect(require.context('~/demos/', true, /.+\..+$/).keys())
.filter(path => path.startsWith(`./${this.name}/index.vue`)) // .filter(path => path.startsWith(`./${this.name}/index.vue`))
.map(path => path.replace('./', '')) // .map(path => path.replace('./', ''))
.map(path => { // .map(path => {
return { // return {
path, // path,
name: path.replace(`${this.name}/`, ''), // name: path.replace(`${this.name}/`, ''),
content: require(`!!raw-loader!~/demos/${path}`).default, // content: require(`!!raw-loader!~/demos/${path}`).default,
} // }
}) // })
.toArray() // .toArray()
}, },
} }
</script> </script>

13
docs/src/demos/Guide/GettingStarted/index.vue
View File

@@ -3,7 +3,11 @@
</template> </template>
<script> <script>
import { Editor, EditorContent, defaultExtensions } from '@tiptap/vue-starter-kit' // import { Editor, EditorContent, defaultExtensions } from '@tiptap/vue-starter-kit'
import { Editor, EditorContent } from '@tiptap/vue-starter-kit'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
export default { export default {
components: { components: {
@@ -19,7 +23,12 @@ export default {
mounted() { mounted() {
this.editor = new Editor({ this.editor = new Editor({
content: '<p>I’m running tiptap with Vue.js. 🎉</p>', content: '<p>I’m running tiptap with Vue.js. 🎉</p>',
extensions: defaultExtensions(), // extensions: defaultExtensions(),
extensions: [
new Document(),
new Paragraph(),
new Text(),
],
}) })
}, },

2
packages/core/src/Editor.ts
View File

@@ -117,7 +117,7 @@ export class Editor extends EventEmitter {
this.createCommandManager() this.createCommandManager()
this.createExtensionManager() this.createExtensionManager()
this.createSchema() this.createSchema()
this.extensionManager.resolveConfigs() // this.extensionManager.resolveConfigs()
this.createView() this.createView()
this.registerCommands(coreCommands) this.registerCommands(coreCommands)
this.injectCSS() this.injectCSS()

215
packages/core/src/Extension.ts
View File

@@ -1,114 +1,139 @@
import cloneDeep from 'clone-deep' // import cloneDeep from 'clone-deep'
import { Plugin } from 'prosemirror-state' // import { Plugin } from 'prosemirror-state'
import { Editor, CommandsSpec } from './Editor' // import { Editor, CommandsSpec } from './Editor'
type AnyObject = { // type AnyObject = {
[key: string]: any // [key: string]: any
} // }
type NoInfer<T> = [T][T extends any ? 0 : never] // type NoInfer<T> = [T][T extends any ? 0 : never]
type MergeStrategy = 'extend' | 'overwrite' // type MergeStrategy = 'extend' | 'overwrite'
type Configs = { // type Configs = {
[key: string]: { // [key: string]: {
stategy: MergeStrategy // stategy: MergeStrategy
value: any // value: any
}[] // }[]
} // }
export interface ExtensionProps<Options> { // export interface ExtensionProps<Options> {
name: string // name: string
editor: Editor // editor: Editor
options: Options // options: Options
} // }
export interface ExtensionMethods<Props, Options> { // export interface ExtensionMethods<Props, Options> {
name: string // name: string
options: Options // options: Options
commands: (params: Props) => CommandsSpec // commands: (params: Props) => CommandsSpec
inputRules: (params: Props) => any[] // inputRules: (params: Props) => any[]
pasteRules: (params: Props) => any[] // pasteRules: (params: Props) => any[]
keys: (params: Props) => { // keys: (params: Props) => {
[key: string]: Function // [key: string]: Function
} // }
plugins: (params: Props) => Plugin[] // plugins: (params: Props) => Plugin[]
} // }
// export default class Extension<
// Options = {},
// Props = ExtensionProps<Options>,
// Methods extends ExtensionMethods<Props, Options> = ExtensionMethods<Props, 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: Methods['name']) {
// this.storeConfig('name', value, 'overwrite')
// return this
// }
// public defaults(value: Options) {
// this.storeConfig('defaults', value, 'overwrite')
// return this
// }
// public commands(value: Methods['commands']) {
// this.storeConfig('commands', value, 'overwrite')
// return this
// }
// public keys(value: Methods['keys']) {
// this.storeConfig('keys', value, 'overwrite')
// return this
// }
// public inputRules(value: Methods['inputRules']) {
// this.storeConfig('inputRules', value, 'overwrite')
// return this
// }
// public pasteRules(value: Methods['pasteRules']) {
// this.storeConfig('pasteRules', value, 'overwrite')
// return this
// }
// public plugins(value: Methods['plugins']) {
// this.storeConfig('plugins', value, 'overwrite')
// return this
// }
// public extend<T extends Extract<keyof Methods, string>>(key: T, value: Methods[T]) {
// this.storeConfig(key, value, 'extend')
// return this
// }
// public create() {
// return <NewOptions = Options>(options?: Partial<NoInfer<NewOptions>>) => {
// return cloneDeep(this, true).configure(options as NewOptions)
// }
// }
// }
export default class Extension<Options = {}> {
name = 'extension'
export default class Extension<
Options = {},
Props = ExtensionProps<Options>,
Methods extends ExtensionMethods<Props, Options> = ExtensionMethods<Props, Options>,
> {
type = 'extension' type = 'extension'
config: AnyObject = {}
configs: Configs = {}
options: Partial<Options> = {} options: Partial<Options> = {}
protected storeConfig(key: string, value: any, stategy: MergeStrategy) { constructor(options?: Partial<Options>) {
const item = { this.options = {
stategy, ...this.createDefaultOptions(),
value, ...options,
}
if (this.configs[key]) {
this.configs[key].push(item)
} else {
this.configs[key] = [item]
} }
} }
public configure(options: Partial<Options>) { createDefaultOptions() {
this.options = { ...this.options, ...options } return {}
return this
} }
public name(value: Methods['name']) { createCommands() {
this.storeConfig('name', value, 'overwrite') return {}
return this
} }
public defaults(value: Options) {
this.storeConfig('defaults', value, 'overwrite')
return this
}
public commands(value: Methods['commands']) {
this.storeConfig('commands', value, 'overwrite')
return this
}
public keys(value: Methods['keys']) {
this.storeConfig('keys', value, 'overwrite')
return this
}
public inputRules(value: Methods['inputRules']) {
this.storeConfig('inputRules', value, 'overwrite')
return this
}
public pasteRules(value: Methods['pasteRules']) {
this.storeConfig('pasteRules', value, 'overwrite')
return this
}
public plugins(value: Methods['plugins']) {
this.storeConfig('plugins', value, 'overwrite')
return this
}
public extend<T extends Extract<keyof Methods, string>>(key: T, value: Methods[T]) {
this.storeConfig(key, value, 'extend')
return this
}
public create() {
return <NewOptions = Options>(options?: Partial<NoInfer<NewOptions>>) => {
return cloneDeep(this, true).configure(options as NewOptions)
}
}
} }

101
packages/core/src/ExtensionManager.ts
View File

@@ -26,39 +26,39 @@ export default class ExtensionManager {
this.extensions = extensions this.extensions = extensions
} }
resolveConfigs() { // resolveConfigs() {
this.extensions.forEach(extension => { // this.extensions.forEach(extension => {
const { editor } = this // const { editor } = this
const { name } = extension.config // const { name } = extension.config
const options = { // const options = {
...extension.config.defaults, // ...extension.config.defaults,
...extension.options, // ...extension.options,
} // }
const type = extension.type === 'node' // const type = extension.type === 'node'
? editor.schema.nodes[name] // ? editor.schema.nodes[name]
: editor.schema.marks[name] // : editor.schema.marks[name]
resolveExtensionConfig(extension, 'commands', { // resolveExtensionConfig(extension, 'commands', {
name, options, editor, type, // name, options, editor, type,
}) // })
resolveExtensionConfig(extension, 'inputRules', { // resolveExtensionConfig(extension, 'inputRules', {
name, options, editor, type, // name, options, editor, type,
}) // })
resolveExtensionConfig(extension, 'pasteRules', { // resolveExtensionConfig(extension, 'pasteRules', {
name, options, editor, type, // name, options, editor, type,
}) // })
resolveExtensionConfig(extension, 'keys', { // resolveExtensionConfig(extension, 'keys', {
name, options, editor, type, // name, options, editor, type,
}) // })
resolveExtensionConfig(extension, 'plugins', { // resolveExtensionConfig(extension, 'plugins', {
name, options, editor, type, // name, options, editor, type,
}) // })
if (extension.config.commands) { // if (extension.config.commands) {
editor.registerCommands(extension.config.commands) // editor.registerCommands(extension.config.commands)
} // }
}) // })
} // }
get schema(): Schema { get schema(): Schema {
return getSchema(this.extensions) return getSchema(this.extensions)
@@ -77,13 +77,13 @@ export default class ExtensionManager {
} }
get plugins(): Plugin[] { get plugins(): Plugin[] {
const plugins = collect(this.extensions) // const plugins = collect(this.extensions)
.flatMap(extension => extension.config.plugins) // .flatMap(extension => extension.config.plugins)
.filter(plugin => plugin) // .filter(plugin => plugin)
.toArray() // .toArray()
return [ return [
...plugins, // ...plugins,
...this.keymaps, ...this.keymaps,
...this.pasteRules, ...this.pasteRules,
inputRules({ rules: this.inputRules }), inputRules({ rules: this.inputRules }),
@@ -91,25 +91,28 @@ export default class ExtensionManager {
} }
get inputRules(): any { get inputRules(): any {
return collect(this.extensions) return []
.flatMap(extension => extension.config.inputRules) // return collect(this.extensions)
.filter(plugin => plugin) // .flatMap(extension => extension.config.inputRules)
.toArray() // .filter(plugin => plugin)
// .toArray()
} }
get pasteRules(): any { get pasteRules(): any {
return collect(this.extensions) return []
.flatMap(extension => extension.config.pasteRules) // return collect(this.extensions)
.filter(plugin => plugin) // .flatMap(extension => extension.config.pasteRules)
.toArray() // .filter(plugin => plugin)
// .toArray()
} }
get keymaps() { get keymaps() {
return collect(this.extensions) return []
.map(extension => extension.config.keys) // return collect(this.extensions)
.filter(keys => keys) // .map(extension => extension.config.keys)
.map(keys => keymap(keys)) // .filter(keys => keys)
.toArray() // .map(keys => keymap(keys))
// .toArray()
} }
get nodeViews() { get nodeViews() {

62
packages/core/src/Mark.ts
View File

@@ -1,28 +1,48 @@
import { MarkSpec, MarkType } from 'prosemirror-model' // import { MarkSpec, MarkType } from 'prosemirror-model'
import Extension, { ExtensionMethods } from './Extension' // import Extension, { ExtensionMethods } from './Extension'
import { Editor } from './Editor' // import { Editor } from './Editor'
export interface MarkProps<Options> { // export interface MarkProps<Options> {
name: string // name: string
editor: Editor // editor: Editor
options: Options // options: Options
type: MarkType // type: MarkType
} // }
export interface MarkMethods<Props, Options> extends ExtensionMethods<Props, Options> { // export interface MarkMethods<Props, Options> extends ExtensionMethods<Props, Options> {
topMark: boolean // topMark: boolean
schema: (params: Omit<Props, 'type' | 'editor'>) => MarkSpec // schema: (params: Omit<Props, 'type' | 'editor'>) => MarkSpec
} // }
// export default class Mark<
// Options = {},
// Props = MarkProps<Options>,
// Methods extends MarkMethods<Props, Options> = MarkMethods<Props, Options>,
// > extends Extension<Options, Props, Methods> {
// type = 'mark'
// public schema(value: Methods['schema']) {
// this.storeConfig('schema', value, 'overwrite')
// return this
// }
// }
import Extension from './Extension'
export default class Node<Options = {}> extends Extension<Options> {
export default class Mark<
Options = {},
Props = MarkProps<Options>,
Methods extends MarkMethods<Props, Options> = MarkMethods<Props, Options>,
> extends Extension<Options, Props, Methods> {
type = 'mark' type = 'mark'
public schema(value: Methods['schema']) { createAttributes() {
this.storeConfig('schema', value, 'overwrite') return {}
return this
} }
parseHTML() {
return []
}
renderHTML() {
return []
}
} }

74
packages/core/src/Node.ts
View File

@@ -1,33 +1,59 @@
import { NodeSpec, NodeType } from 'prosemirror-model' // import { NodeSpec, NodeType } from 'prosemirror-model'
import Extension, { ExtensionMethods } from './Extension' // import Extension, { ExtensionMethods } from './Extension'
import { Editor } from './Editor' // import { Editor } from './Editor'
export interface NodeProps<Options> { // export interface NodeProps<Options> {
name: string // name: string
editor: Editor // editor: Editor
options: Options // options: Options
type: NodeType // type: NodeType
} // }
export interface NodeMethods<Props, Options> extends ExtensionMethods<Props, Options> { // export interface NodeMethods<Props, Options> extends ExtensionMethods<Props, Options> {
topNode: boolean // topNode: boolean
schema: (params: Omit<Props, 'type' | 'editor'>) => NodeSpec // schema: (params: Omit<Props, 'type' | 'editor'>) => NodeSpec
} // }
// export default class Node<
// Options = {},
// Props = NodeProps<Options>,
// Methods extends NodeMethods<Props, Options> = NodeMethods<Props, Options>,
// > extends Extension<Options, Props, Methods> {
// type = 'node'
// public topNode(value: Methods['topNode'] = true) {
// this.storeConfig('topNode', value, 'overwrite')
// return this
// }
// public schema(value: Methods['schema']) {
// this.storeConfig('schema', value, 'overwrite')
// return this
// }
// }
import Extension from './Extension'
export default class Node<Options = {}> extends Extension<Options> {
export default class Node<
Options = {},
Props = NodeProps<Options>,
Methods extends NodeMethods<Props, Options> = NodeMethods<Props, Options>,
> extends Extension<Options, Props, Methods> {
type = 'node' type = 'node'
public topNode(value: Methods['topNode'] = true) { topNode = false
this.storeConfig('topNode', value, 'overwrite')
return this group = ''
content = ''
createAttributes() {
return {}
} }
public schema(value: Methods['schema']) { parseHTML() {
this.storeConfig('schema', value, 'overwrite') return []
return this
} }
renderHTML() {
return []
}
} }

62
packages/core/src/utils/getSchema.ts
View File

@@ -1,29 +1,61 @@
import deepmerge from 'deepmerge' import deepmerge from 'deepmerge'
import { Schema } from 'prosemirror-model' import { NodeSpec, Schema } from 'prosemirror-model'
import { Extensions } from '../types' import { Extensions } from '../types'
import getTopNodeFromExtensions from './getTopNodeFromExtensions' import getTopNodeFromExtensions from './getTopNodeFromExtensions'
import getNodesFromExtensions from './getNodesFromExtensions' import getNodesFromExtensions from './getNodesFromExtensions'
import getMarksFromExtensions from './getMarksFromExtensions' import getMarksFromExtensions from './getMarksFromExtensions'
import resolveExtensionConfig from './resolveExtensionConfig' import resolveExtensionConfig from './resolveExtensionConfig'
import Node from '../Node'
import Mark from '../Mark'
import Extension from '../Extension'
export default function getSchema(extensions: Extensions): Schema { export default function getSchema(extensions: Extensions): Schema {
extensions.forEach(extension => { const baseExtensions = extensions.filter(extension => extension.type === 'extension') as Extension[]
resolveExtensionConfig(extension, 'name') const nodeExtensions = extensions.filter(extension => extension.type === 'node') as Node[]
resolveExtensionConfig(extension, 'defaults') const markExtensions = extensions.filter(extension => extension.type === 'mark') as Mark[]
resolveExtensionConfig(extension, 'topNode')
const { name } = extension.config const nodes = Object.fromEntries(nodeExtensions.map(node => {
const options = { return [
...extension.config.defaults, node.name,
...extension.options, {
} content: node.content,
group: node.group,
parseDOM: node.parseHTML(),
toDOM: node.renderHTML,
} as unknown as NodeSpec,
]
}))
resolveExtensionConfig(extension, 'schema', { name, options }) console.log({ nodes })
})
const topNode = nodeExtensions.find(extension => extension.topNode)?.name
// extensions.forEach(extension => {
// resolveExtensionConfig(extension, 'name')
// resolveExtensionConfig(extension, 'defaults')
// resolveExtensionConfig(extension, 'topNode')
// const { name } = extension.config
// const options = {
// ...extension.config.defaults,
// ...extension.options,
// }
// resolveExtensionConfig(extension, 'schema', { name, options })
// })
// return new Schema({
// topNode: getTopNodeFromExtensions(extensions),
// nodes: getNodesFromExtensions(extensions),
// marks: getMarksFromExtensions(extensions),
// })
return new Schema({ return new Schema({
topNode: getTopNodeFromExtensions(extensions), topNode,
nodes: getNodesFromExtensions(extensions), nodes,
marks: getMarksFromExtensions(extensions), marks: {},
// topNode: getTopNodeFromExtensions(extensions),
// nodes: getNodesFromExtensions(extensions),
// marks: getMarksFromExtensions(extensions),
}) })
} }

24
packages/extension-document/index.ts
View File

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

66
packages/extension-paragraph/index.ts
View File

@@ -1,29 +1,49 @@
import { Command, Node } from '@tiptap/core' import { Command, Node } from '@tiptap/core'
// import ParagraphComponent from './paragraph.vue' // import ParagraphComponent from './paragraph.vue'
export type ParagraphCommand = () => Command // export type ParagraphCommand = () => Command
declare module '@tiptap/core/src/Editor' { // declare module '@tiptap/core/src/Editor' {
interface Commands { // interface Commands {
paragraph: ParagraphCommand, // paragraph: ParagraphCommand,
// }
// }
// export default new Node()
// .name('paragraph')
// .schema(() => ({
// content: 'inline*',
// group: 'block',
// parseDOM: [{ tag: 'p' }],
// toDOM: () => ['p', 0],
// // toVue: ParagraphComponent,
// }))
// .commands(({ name }) => ({
// [name]: () => ({ commands }) => {
// return commands.toggleBlockType(name, 'paragraph')
// },
// }))
// .keys(({ editor }) => ({
// 'Mod-Alt-0': () => editor.paragraph(),
// }))
// .create()
export default class Paragraph extends Node {
name = 'paragraph'
group = 'block'
content = 'inline*'
parseHTML() {
return [
{ tag: 'p' },
]
} }
}
export default new Node() renderHTML() {
.name('paragraph') return ['p', 0]
.schema(() => ({ }
content: 'inline*',
group: 'block', }
parseDOM: [{ tag: 'p' }],
toDOM: () => ['p', 0],
// toVue: ParagraphComponent,
}))
.commands(({ name }) => ({
[name]: () => ({ commands }) => {
return commands.toggleBlockType(name, 'paragraph')
},
}))
.keys(({ editor }) => ({
'Mod-Alt-0': () => editor.paragraph(),
}))
.create()

20
packages/extension-text/index.ts
View File

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

5
packages/vue-starter-kit/index.ts
View File

@@ -1,7 +1,8 @@
import originalDefaultExtensions from '@tiptap/starter-kit' // import originalDefaultExtensions from '@tiptap/starter-kit'
export * from '@tiptap/vue' export * from '@tiptap/vue'
export function defaultExtensions() { export function defaultExtensions() {
return originalDefaultExtensions() return []
// return originalDefaultExtensions()
} }