From c3fa5ebf1bd6a53e4979a802bdaaeb33e20d329c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Fri, 13 Nov 2020 09:58:30 +0100 Subject: [PATCH 1/6] add new command getter --- packages/core/src/CommandManager.ts | 67 ++++++++++++++++++----------- packages/core/src/Editor.ts | 4 ++ 2 files changed, 47 insertions(+), 24 deletions(-) diff --git a/packages/core/src/CommandManager.ts b/packages/core/src/CommandManager.ts index 824e98fd..95fbc8b3 100644 --- a/packages/core/src/CommandManager.ts +++ b/packages/core/src/CommandManager.ts @@ -8,7 +8,7 @@ export default class CommandManager { editor: Editor - commands: { [key: string]: any } = {} + rawCommands: { [key: string]: any } = {} methodNames: string[] = [] @@ -24,7 +24,7 @@ export default class CommandManager { * @param callback The method of your command */ public registerCommand(name: string, callback: CommandSpec): Editor { - if (this.commands[name]) { + if (this.rawCommands[name]) { throw new Error(`tiptap: command '${name}' is already defined.`) } @@ -32,15 +32,44 @@ export default class CommandManager { throw new Error(`tiptap: '${name}' is a protected name.`) } - this.commands[name] = callback + this.rawCommands[name] = callback return this.editor } - public runSingleCommand(name: string) { - const { commands, editor } = this + public get commands() { + return { + ...this.wrapCommands(), + chain: () => this.createChain(), + can: () => this.createCan(), + } + } + + public wrapCommands() { + const { rawCommands, editor } = this const { state, view } = editor - const command = commands[name] + + return Object.fromEntries(Object + .entries(rawCommands) + .map(([name, command]) => { + const method = (...args: any) => { + const { tr } = state + const props = this.buildProps(tr) + const callback = command(...args)(props) + + view.dispatch(tr) + + return callback + } + + return [name, method] + })) as SingleCommands + } + + public runSingleCommand(name: string) { + const { rawCommands, editor } = this + const { state, view } = editor + const command = rawCommands[name] if (!command) { // TODO: prevent vue devtools to throw error @@ -60,15 +89,11 @@ export default class CommandManager { } public createChain(startTr?: Transaction, shouldDispatch = true) { - const { commands, editor } = this + const { rawCommands, editor } = this const { state, view } = editor const callbacks: boolean[] = [] const hasStartTransaction = !!startTr - const tr = hasStartTransaction ? startTr : state.tr - - if (!tr) { - return - } + const tr = startTr || state.tr return new Proxy({}, { get: (_, name: string, proxy) => { @@ -80,7 +105,7 @@ export default class CommandManager { return () => callbacks.every(callback => callback === true) } - const command = commands[name] + const command = rawCommands[name] if (!command) { throw new Error(`tiptap: command '${name}' not found.`) @@ -98,19 +123,13 @@ export default class CommandManager { } public createCan(startTr?: Transaction) { - const { commands, editor } = this + const { rawCommands, editor } = this const { state } = editor const dispatch = false - const hasStartTransaction = !!startTr - const tr = hasStartTransaction ? startTr : state.tr - - if (!tr) { - return - } - + const tr = startTr || state.tr const props = this.buildProps(tr, dispatch) const formattedCommands = Object.fromEntries(Object - .entries(commands) + .entries(rawCommands) .map(([name, command]) => { return [name, (...args: any[]) => command(...args)({ ...props, dispatch })] })) as SingleCommands @@ -122,7 +141,7 @@ export default class CommandManager { } public buildProps(tr: Transaction, shouldDispatch = true) { - const { editor, commands } = this + const { editor, rawCommands } = this const { state, view } = editor const props = { @@ -137,7 +156,7 @@ export default class CommandManager { can: () => this.createCan(tr), get commands() { return Object.fromEntries(Object - .entries(commands) + .entries(rawCommands) .map(([name, command]) => { return [name, (...args: any[]) => command(...args)(props)] })) diff --git a/packages/core/src/Editor.ts b/packages/core/src/Editor.ts index eb192f40..c173f16f 100644 --- a/packages/core/src/Editor.ts +++ b/packages/core/src/Editor.ts @@ -129,6 +129,10 @@ export class Editor extends EventEmitter { return this.commandManager.runSingleCommand(name) } + public get commands() { + return this.commandManager.commands + } + /** * Create a command chain to call multiple commands at once. */ From 13489998b98f082484d5354b42f6376e13ccacdf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Fri, 13 Nov 2020 11:42:04 +0100 Subject: [PATCH 2/6] =?UTF-8?q?prefix=20all=20commands=20with=20=E2=80=9Ac?= =?UTF-8?q?ommands=E2=80=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/core/src/CommandManager.ts | 59 ++++++-------------- packages/core/src/Editor.ts | 13 ++--- packages/core/src/extensions/keymap.ts | 6 +- packages/extension-blockquote/src/index.ts | 2 +- packages/extension-bold/src/index.ts | 2 +- packages/extension-bullet-list/src/index.ts | 2 +- packages/extension-code-block/src/index.ts | 2 +- packages/extension-code/src/index.ts | 2 +- packages/extension-hard-break/src/index.ts | 4 +- packages/extension-heading/src/index.ts | 2 +- packages/extension-highlight/src/index.ts | 2 +- packages/extension-history/src/index.ts | 6 +- packages/extension-italic/src/index.ts | 2 +- packages/extension-list-item/src/index.ts | 6 +- packages/extension-ordered-list/src/index.ts | 2 +- packages/extension-paragraph/src/index.ts | 2 +- packages/extension-strike/src/index.ts | 2 +- packages/extension-task-item/src/index.ts | 8 +-- packages/extension-text-align/src/index.ts | 10 ++-- packages/extension-underline/src/index.ts | 2 +- 20 files changed, 54 insertions(+), 82 deletions(-) diff --git a/packages/core/src/CommandManager.ts b/packages/core/src/CommandManager.ts index 95fbc8b3..b9fef148 100644 --- a/packages/core/src/CommandManager.ts +++ b/packages/core/src/CommandManager.ts @@ -1,6 +1,9 @@ import { EditorState, Transaction } from 'prosemirror-state' import { - SingleCommands, ChainedCommands, Editor, CommandSpec, + SingleCommands, + ChainedCommands, + Editor, + CommandSpec, } from './Editor' import getAllMethodNames from './utils/getAllMethodNames' @@ -8,7 +11,7 @@ export default class CommandManager { editor: Editor - rawCommands: { [key: string]: any } = {} + commands: { [key: string]: any } = {} methodNames: string[] = [] @@ -24,7 +27,7 @@ export default class CommandManager { * @param callback The method of your command */ public registerCommand(name: string, callback: CommandSpec): Editor { - if (this.rawCommands[name]) { + if (this.commands[name]) { throw new Error(`tiptap: command '${name}' is already defined.`) } @@ -32,25 +35,17 @@ export default class CommandManager { throw new Error(`tiptap: '${name}' is a protected name.`) } - this.rawCommands[name] = callback + this.commands[name] = callback return this.editor } - public get commands() { - return { - ...this.wrapCommands(), - chain: () => this.createChain(), - can: () => this.createCan(), - } - } - - public wrapCommands() { - const { rawCommands, editor } = this + public createCommands() { + const { commands, editor } = this const { state, view } = editor return Object.fromEntries(Object - .entries(rawCommands) + .entries(commands) .map(([name, command]) => { const method = (...args: any) => { const { tr } = state @@ -66,30 +61,8 @@ export default class CommandManager { })) as SingleCommands } - public runSingleCommand(name: string) { - const { rawCommands, editor } = this - const { state, view } = editor - const command = rawCommands[name] - - if (!command) { - // TODO: prevent vue devtools to throw error - // throw new Error(`tiptap: command '${name}' not found.`) - return - } - - return (...args: any) => { - const { tr } = state - const props = this.buildProps(tr) - const callback = command(...args)(props) - - view.dispatch(tr) - - return callback - } - } - public createChain(startTr?: Transaction, shouldDispatch = true) { - const { rawCommands, editor } = this + const { commands, editor } = this const { state, view } = editor const callbacks: boolean[] = [] const hasStartTransaction = !!startTr @@ -105,7 +78,7 @@ export default class CommandManager { return () => callbacks.every(callback => callback === true) } - const command = rawCommands[name] + const command = commands[name] if (!command) { throw new Error(`tiptap: command '${name}' not found.`) @@ -123,13 +96,13 @@ export default class CommandManager { } public createCan(startTr?: Transaction) { - const { rawCommands, editor } = this + const { commands, editor } = this const { state } = editor const dispatch = false const tr = startTr || state.tr const props = this.buildProps(tr, dispatch) const formattedCommands = Object.fromEntries(Object - .entries(rawCommands) + .entries(commands) .map(([name, command]) => { return [name, (...args: any[]) => command(...args)({ ...props, dispatch })] })) as SingleCommands @@ -141,7 +114,7 @@ export default class CommandManager { } public buildProps(tr: Transaction, shouldDispatch = true) { - const { editor, rawCommands } = this + const { editor, commands } = this const { state, view } = editor const props = { @@ -156,7 +129,7 @@ export default class CommandManager { can: () => this.createCan(tr), get commands() { return Object.fromEntries(Object - .entries(rawCommands) + .entries(commands) .map(([name, command]) => { return [name, (...args: any[]) => command(...args)(props)] })) diff --git a/packages/core/src/Editor.ts b/packages/core/src/Editor.ts index c173f16f..8757cabb 100644 --- a/packages/core/src/Editor.ts +++ b/packages/core/src/Editor.ts @@ -68,10 +68,6 @@ interface EditorOptions { editable: boolean, } -declare module './Editor' { - interface Editor extends SingleCommands {} -} - @magicMethods export class Editor extends EventEmitter { @@ -116,7 +112,7 @@ export class Editor extends EventEmitter { this.createView() this.injectCSS() - window.setTimeout(() => this.proxy.focus(this.options.autoFocus), 0) + window.setTimeout(() => this.commands.focus(this.options.autoFocus), 0) } /** @@ -126,11 +122,14 @@ export class Editor extends EventEmitter { */ // eslint-disable-next-line private __get(name: string) { - return this.commandManager.runSingleCommand(name) + // TODO: maybe remove proxy } + /** + * An object of all registered commands. + */ public get commands() { - return this.commandManager.commands + return this.commandManager.createCommands() } /** diff --git a/packages/core/src/extensions/keymap.ts b/packages/core/src/extensions/keymap.ts index 68b58936..087cbd7b 100644 --- a/packages/core/src/extensions/keymap.ts +++ b/packages/core/src/extensions/keymap.ts @@ -14,21 +14,21 @@ import { createExtension } from '../Extension' export const Keymap = createExtension({ addKeyboardShortcuts() { - const handleBackspace = () => this.editor.try(({ state, dispatch }) => [ + const handleBackspace = () => this.editor.commands.try(({ state, dispatch }) => [ () => undoInputRule(state, dispatch), () => deleteSelection(state, dispatch), () => joinBackward(state, dispatch), () => selectNodeBackward(state, dispatch), ]) - const handleDelete = () => this.editor.try(({ state, dispatch }) => [ + const handleDelete = () => this.editor.commands.try(({ state, dispatch }) => [ () => deleteSelection(state, dispatch), () => joinForward(state, dispatch), () => selectNodeForward(state, dispatch), ]) return { - Enter: () => this.editor.try(({ commands, state, dispatch }) => [ + Enter: () => this.editor.commands.try(({ commands, state, dispatch }) => [ () => newlineInCode(state, dispatch), () => createParagraphNear(state, dispatch), () => liftEmptyBlock(state, dispatch), diff --git a/packages/extension-blockquote/src/index.ts b/packages/extension-blockquote/src/index.ts index 2f9dc137..f4995c35 100644 --- a/packages/extension-blockquote/src/index.ts +++ b/packages/extension-blockquote/src/index.ts @@ -32,7 +32,7 @@ const Blockquote = createNode({ addKeyboardShortcuts() { return { - 'Shift-Mod-9': () => this.editor.blockquote(), + 'Shift-Mod-9': () => this.editor.commands.blockquote(), } }, diff --git a/packages/extension-bold/src/index.ts b/packages/extension-bold/src/index.ts index 2f42f747..4b649d4d 100644 --- a/packages/extension-bold/src/index.ts +++ b/packages/extension-bold/src/index.ts @@ -43,7 +43,7 @@ const Bold = createMark({ addKeyboardShortcuts() { return { - 'Mod-b': () => this.editor.bold(), + 'Mod-b': () => this.editor.commands.bold(), } }, diff --git a/packages/extension-bullet-list/src/index.ts b/packages/extension-bullet-list/src/index.ts index 4b4bbc87..cc1c1990 100644 --- a/packages/extension-bullet-list/src/index.ts +++ b/packages/extension-bullet-list/src/index.ts @@ -30,7 +30,7 @@ const BulletList = createNode({ addKeyboardShortcuts() { return { - 'Shift-Control-8': () => this.editor.bulletList(), + 'Shift-Control-8': () => this.editor.commands.bulletList(), } }, diff --git a/packages/extension-code-block/src/index.ts b/packages/extension-code-block/src/index.ts index 8b7c1fc4..5fa068ec 100644 --- a/packages/extension-code-block/src/index.ts +++ b/packages/extension-code-block/src/index.ts @@ -78,7 +78,7 @@ const CodeBlock = createNode({ addKeyboardShortcuts() { return { - 'Mod-Shift-c': () => this.editor.codeBlock(), + 'Mod-Shift-c': () => this.editor.commands.codeBlock(), } }, diff --git a/packages/extension-code/src/index.ts b/packages/extension-code/src/index.ts index 655e4d10..30679ee1 100644 --- a/packages/extension-code/src/index.ts +++ b/packages/extension-code/src/index.ts @@ -30,7 +30,7 @@ const Code = createMark({ addKeyboardShortcuts() { return { - 'Mod-`': () => this.editor.code(), + 'Mod-`': () => this.editor.commands.code(), } }, diff --git a/packages/extension-hard-break/src/index.ts b/packages/extension-hard-break/src/index.ts index 2112c195..95b92ca6 100644 --- a/packages/extension-hard-break/src/index.ts +++ b/packages/extension-hard-break/src/index.ts @@ -39,8 +39,8 @@ const HardBreak = createNode({ addKeyboardShortcuts() { return { - 'Mod-Enter': () => this.editor.hardBreak(), - 'Shift-Enter': () => this.editor.hardBreak(), + 'Mod-Enter': () => this.editor.commands.hardBreak(), + 'Shift-Enter': () => this.editor.commands.hardBreak(), } }, }) diff --git a/packages/extension-heading/src/index.ts b/packages/extension-heading/src/index.ts index bf1e5c43..d5053f7c 100644 --- a/packages/extension-heading/src/index.ts +++ b/packages/extension-heading/src/index.ts @@ -65,7 +65,7 @@ const Heading = createNode({ return this.options.levels.reduce((items, level) => ({ ...items, ...{ - [`Mod-Alt-${level}`]: () => this.editor.setBlockType('heading', { level }), + [`Mod-Alt-${level}`]: () => this.editor.commands.setBlockType('heading', { level }), }, }), {}) }, diff --git a/packages/extension-highlight/src/index.ts b/packages/extension-highlight/src/index.ts index d0a6370d..fac55d1f 100644 --- a/packages/extension-highlight/src/index.ts +++ b/packages/extension-highlight/src/index.ts @@ -56,7 +56,7 @@ const Highlight = createMark({ addKeyboardShortcuts() { return { - 'Mod-e': () => this.editor.highlight(), + 'Mod-e': () => this.editor.commands.highlight(), } }, diff --git a/packages/extension-history/src/index.ts b/packages/extension-history/src/index.ts index c4170503..539fce5c 100644 --- a/packages/extension-history/src/index.ts +++ b/packages/extension-history/src/index.ts @@ -31,9 +31,9 @@ const History = createExtension({ addKeyboardShortcuts() { return { - 'Mod-z': () => this.editor.undo(), - 'Mod-y': () => this.editor.redo(), - 'Shift-Mod-z': () => this.editor.redo(), + 'Mod-z': () => this.editor.commands.undo(), + 'Mod-y': () => this.editor.commands.redo(), + 'Shift-Mod-z': () => this.editor.commands.redo(), } }, }) diff --git a/packages/extension-italic/src/index.ts b/packages/extension-italic/src/index.ts index 9847378d..772a5cba 100644 --- a/packages/extension-italic/src/index.ts +++ b/packages/extension-italic/src/index.ts @@ -39,7 +39,7 @@ const Italic = createMark({ addKeyboardShortcuts() { return { - 'Mod-i': () => this.editor.italic(), + 'Mod-i': () => this.editor.commands.italic(), } }, diff --git a/packages/extension-list-item/src/index.ts b/packages/extension-list-item/src/index.ts index d40414dc..f75f5d80 100644 --- a/packages/extension-list-item/src/index.ts +++ b/packages/extension-list-item/src/index.ts @@ -21,9 +21,9 @@ const ListItem = createNode({ addKeyboardShortcuts() { return { - Enter: () => this.editor.splitListItem('listItem'), - Tab: () => this.editor.sinkListItem('listItem'), - 'Shift-Tab': () => this.editor.liftListItem('listItem'), + Enter: () => this.editor.commands.splitListItem('listItem'), + Tab: () => this.editor.commands.sinkListItem('listItem'), + 'Shift-Tab': () => this.editor.commands.liftListItem('listItem'), } }, }) diff --git a/packages/extension-ordered-list/src/index.ts b/packages/extension-ordered-list/src/index.ts index 931c0c08..10ccfd59 100644 --- a/packages/extension-ordered-list/src/index.ts +++ b/packages/extension-ordered-list/src/index.ts @@ -49,7 +49,7 @@ const OrderedList = createNode({ addKeyboardShortcuts() { return { - 'Shift-Control-9': () => this.editor.orderedList(), + 'Shift-Control-9': () => this.editor.commands.orderedList(), } }, diff --git a/packages/extension-paragraph/src/index.ts b/packages/extension-paragraph/src/index.ts index 8704dc92..6f7c24d8 100644 --- a/packages/extension-paragraph/src/index.ts +++ b/packages/extension-paragraph/src/index.ts @@ -28,7 +28,7 @@ const Paragraph = createNode({ addKeyboardShortcuts() { return { - 'Mod-Alt-0': () => this.editor.paragraph(), + 'Mod-Alt-0': () => this.editor.commands.paragraph(), } }, }) diff --git a/packages/extension-strike/src/index.ts b/packages/extension-strike/src/index.ts index a8b3e57a..1775b457 100644 --- a/packages/extension-strike/src/index.ts +++ b/packages/extension-strike/src/index.ts @@ -39,7 +39,7 @@ const Strike = createMark({ addKeyboardShortcuts() { return { - 'Mod-d': () => this.editor.strike(), + 'Mod-d': () => this.editor.commands.strike(), } }, diff --git a/packages/extension-task-item/src/index.ts b/packages/extension-task-item/src/index.ts index ec8fc80b..a30c25ea 100644 --- a/packages/extension-task-item/src/index.ts +++ b/packages/extension-task-item/src/index.ts @@ -49,8 +49,8 @@ const TaskItem = createNode({ addKeyboardShortcuts() { const shortcuts = { - Enter: () => this.editor.splitListItem('taskItem'), - 'Shift-Tab': () => this.editor.liftListItem('taskItem'), + Enter: () => this.editor.commands.splitListItem('taskItem'), + 'Shift-Tab': () => this.editor.commands.liftListItem('taskItem'), } if (!this.options.nested) { @@ -59,7 +59,7 @@ const TaskItem = createNode({ return { ...shortcuts, - Tab: () => this.editor.sinkListItem('taskItem'), + Tab: () => this.editor.commands.sinkListItem('taskItem'), } }, @@ -78,7 +78,7 @@ const TaskItem = createNode({ view.dispatch(view.state.tr.setNodeMarkup(getPos(), undefined, { checked, })) - editor.focus() + editor.commands.focus() } }) diff --git a/packages/extension-text-align/src/index.ts b/packages/extension-text-align/src/index.ts index 6f79df2f..f7caf0cb 100644 --- a/packages/extension-text-align/src/index.ts +++ b/packages/extension-text-align/src/index.ts @@ -49,13 +49,13 @@ const TextAlign = createExtension({ // TODO: re-use only 'textAlign' attribute // TODO: use custom splitBlock only for `this.options.types` // TODO: use complete default enter handler (chainCommand) with custom splitBlock - Enter: () => this.editor.splitBlock({ + Enter: () => this.editor.commands.splitBlock({ withAttributes: true, }), - 'Ctrl-Shift-l': () => this.editor.textAlign('left'), - 'Ctrl-Shift-e': () => this.editor.textAlign('center'), - 'Ctrl-Shift-r': () => this.editor.textAlign('right'), - 'Ctrl-Shift-j': () => this.editor.textAlign('justify'), + 'Ctrl-Shift-l': () => this.editor.commands.textAlign('left'), + 'Ctrl-Shift-e': () => this.editor.commands.textAlign('center'), + 'Ctrl-Shift-r': () => this.editor.commands.textAlign('right'), + 'Ctrl-Shift-j': () => this.editor.commands.textAlign('justify'), } }, }) diff --git a/packages/extension-underline/src/index.ts b/packages/extension-underline/src/index.ts index 004dbd26..39628b7f 100644 --- a/packages/extension-underline/src/index.ts +++ b/packages/extension-underline/src/index.ts @@ -28,7 +28,7 @@ const Underline = createMark({ addKeyboardShortcuts() { return { - 'Mod-u': () => this.editor.underline(), + 'Mod-u': () => this.editor.commands.underline(), } }, }) From b2592c2a047ef2b8aa3fb894859a549c0c586386 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Fri, 13 Nov 2020 11:52:02 +0100 Subject: [PATCH 3/6] update doc pages --- docs/src/demos/Examples/ExportHtmlOrJson/index.vue | 11 +++++++---- docs/src/docPages/api/commands.md | 2 +- docs/src/docPages/api/keyboard-shortcuts.md | 2 +- docs/src/docPages/guide/build-custom-extensions.md | 4 ++-- docs/src/docPages/guide/store-content.md | 2 +- 5 files changed, 12 insertions(+), 9 deletions(-) diff --git a/docs/src/demos/Examples/ExportHtmlOrJson/index.vue b/docs/src/demos/Examples/ExportHtmlOrJson/index.vue index 98cbe592..d5a53f87 100644 --- a/docs/src/demos/Examples/ExportHtmlOrJson/index.vue +++ b/docs/src/demos/Examples/ExportHtmlOrJson/index.vue @@ -69,7 +69,7 @@ export default { methods: { setContent() { // You can pass a JSON document … - this.editor.setContent({ + this.editor.commands.setContent({ type: 'document', content: [{ type: 'paragraph', @@ -86,12 +86,15 @@ export default { // this.editor.setContent('

This is some inserted text. đź‘‹

') // It’s likely that you’d like to focus the Editor after most commands. - this.editor.focus() + this.editor.commands.focus() }, clearContent() { - this.editor.clearContent(true) - this.editor.focus() + this.editor + .chain() + .clearContent(true) + .focus() + .run() }, }, diff --git a/docs/src/docPages/api/commands.md b/docs/src/docPages/api/commands.md index 49787cec..703cae7a 100644 --- a/docs/src/docPages/api/commands.md +++ b/docs/src/docPages/api/commands.md @@ -9,7 +9,7 @@ The editor provides a ton of commands to programmtically add or change content o All available commands are accessible through an editor instance. Let’s say you want to make text bold when a user clicks on a button. That’s how that would look like: ```js -editor.bold() +editor.commands.bold() ``` While that’s perfectly fine and does make the selected bold, you’d likely want to change multiple commands in one run. Let’s have a look at how that works. diff --git a/docs/src/docPages/api/keyboard-shortcuts.md b/docs/src/docPages/api/keyboard-shortcuts.md index 923e509c..5f009cc7 100644 --- a/docs/src/docPages/api/keyboard-shortcuts.md +++ b/docs/src/docPages/api/keyboard-shortcuts.md @@ -104,7 +104,7 @@ const CustomBulletList = BulletList.extend({ addKeyboardShortcuts() { return { // ↓ your new keyboard shortcut - 'Mod-l': () => this.editor.bulletList(), + 'Mod-l': () => this.editor.commands.bulletList(), } }, }) diff --git a/docs/src/docPages/guide/build-custom-extensions.md b/docs/src/docPages/guide/build-custom-extensions.md index 0699265e..d5a371d1 100644 --- a/docs/src/docPages/guide/build-custom-extensions.md +++ b/docs/src/docPages/guide/build-custom-extensions.md @@ -25,7 +25,7 @@ import BulletList from '@tiptap/extension-bullet-list' const CustomBulletList = BulletList.extend({ addKeyboardShortcuts() { return { - 'Mod-l': () => this.editor.bulletList(), + 'Mod-l': () => this.editor.commands.bulletList(), } }, }) @@ -292,7 +292,7 @@ import BulletList from '@tiptap/extension-bullet-list' const CustomBulletList = BulletList.extend({ addKeyboardShortcuts() { return { - 'Mod-l': () => this.editor.bulletList(), + 'Mod-l': () => this.editor.commands.bulletList(), } }, }) diff --git a/docs/src/docPages/guide/store-content.md b/docs/src/docPages/guide/store-content.md index 784ae3a5..1f34ff27 100644 --- a/docs/src/docPages/guide/store-content.md +++ b/docs/src/docPages/guide/store-content.md @@ -73,7 +73,7 @@ new Editor({ Or if you want to restore the content later (e. g. after an API call has finished), you can do that too: ```js -editor.setContent(`

Example Text

`) +editor.commands.setContent(`

Example Text

`) ``` ## Not an option: Markdown From 6b06eaa28939039e0bdc110becb520dacb665358 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Fri, 13 Nov 2020 11:53:53 +0100 Subject: [PATCH 4/6] fix text --- docs/src/docPages/guide/create-your-editor.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/docPages/guide/create-your-editor.md b/docs/src/docPages/guide/create-your-editor.md index 2d270c5c..6987443c 100644 --- a/docs/src/docPages/guide/create-your-editor.md +++ b/docs/src/docPages/guide/create-your-editor.md @@ -10,7 +10,7 @@ Let’s start to add your first button to the editor. Once initiated the editor -To mark selected text bold we can use `this.editor.bold`. There a ton of other commands and you can even chain them to do multiple things at once. +To mark selected text bold we can use `editor.commands.bold()`. There a ton of other commands and you can even chain them to do multiple things at once. You might wonder what features tiptap supports out of the box. In the above example we added the `@tiptap/starter-kit`. That already includes support for paragraphs, text, bold, italic, inline code and code blocks. There are a lot more, but you have to explicitly import them. You will learn how that works in the next example. From e54818145590c731dd3b7052e620ff0598a3afbd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Fri, 13 Nov 2020 11:58:22 +0100 Subject: [PATCH 5/6] fix linter --- docs/src/demos/Examples/Links/index.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/demos/Examples/Links/index.vue b/docs/src/demos/Examples/Links/index.vue index b67aea84..e3240fc7 100644 --- a/docs/src/demos/Examples/Links/index.vue +++ b/docs/src/demos/Examples/Links/index.vue @@ -11,7 +11,7 @@