diff --git a/docs/src/components/PageNavigation/index.vue b/docs/src/components/PageNavigation/index.vue index 6f2073a2..2612543f 100644 --- a/docs/src/components/PageNavigation/index.vue +++ b/docs/src/components/PageNavigation/index.vue @@ -41,7 +41,12 @@ export default { flattenedItems() { const flattenedItems = [] - this.items.forEach(({ title, link, redirect, items }) => { + this.items.forEach(({ + title, + link, + redirect, + items, + }) => { flattenedItems.push({ title, link, @@ -71,7 +76,7 @@ export default { previousPage() { let previousIndex = this.currentIndex - 1 - while (this.flattenedItems[previousIndex].redirect) { + while (this.flattenedItems[previousIndex]?.redirect) { previousIndex -= 1 } diff --git a/docs/src/demos/Api/Schema/GenerateHTML/index.vue b/docs/src/demos/Api/Schema/GenerateHTML/index.vue index b0a6eda4..1fa55904 100644 --- a/docs/src/demos/Api/Schema/GenerateHTML/index.vue +++ b/docs/src/demos/Api/Schema/GenerateHTML/index.vue @@ -27,9 +27,9 @@ export default { mounted() { this.html = generateHTML(this.json, [ - Document(), - Paragraph(), - Text(), + Document, + Paragraph, + Text, ]) }, } diff --git a/docs/src/demos/Examples/CollaborativeEditing/index.vue b/docs/src/demos/Examples/CollaborativeEditing/index.vue index 36403f81..6566ba61 100644 --- a/docs/src/demos/Examples/CollaborativeEditing/index.vue +++ b/docs/src/demos/Examples/CollaborativeEditing/index.vue @@ -135,11 +135,11 @@ export default { this.editor = new Editor({ extensions: [ ...defaultExtensions(), - Collaboration({ + Collaboration.configure({ provider: this.provider, type: this.type, }), - CollaborationCursor({ + CollaborationCursor.configure({ provider: this.provider, name: this.name, color: this.color, diff --git a/docs/src/demos/Examples/Formatting/index.vue b/docs/src/demos/Examples/Formatting/index.vue index ce9c2a99..4d628f42 100644 --- a/docs/src/demos/Examples/Formatting/index.vue +++ b/docs/src/demos/Examples/Formatting/index.vue @@ -61,16 +61,16 @@ export default { mounted() { this.editor = new Editor({ extensions: [ - Document(), - Paragraph(), - Text(), - Heading({ + Document, + Paragraph, + Text, + Heading.configure({ level: [1, 2, 3], }), - Bold(), - Italic(), - TextAlign(), - HardBreak(), + Bold, + Italic, + TextAlign, + HardBreak, ], content: `

Girls Just Want to Have Fun (Cyndi Lauper)

diff --git a/docs/src/demos/Examples/Links/index.vue b/docs/src/demos/Examples/Links/index.vue index 933dd0f8..6bb39c7d 100644 --- a/docs/src/demos/Examples/Links/index.vue +++ b/docs/src/demos/Examples/Links/index.vue @@ -32,10 +32,10 @@ export default { mounted() { this.editor = new Editor({ extensions: [ - Document(), - Paragraph(), - Text(), - Link(), + Document, + Paragraph, + Text, + Link, ], content: `

diff --git a/docs/src/demos/Examples/MarkdownShortcuts/index.vue b/docs/src/demos/Examples/MarkdownShortcuts/index.vue index d2176b57..c5f69fb3 100644 --- a/docs/src/demos/Examples/MarkdownShortcuts/index.vue +++ b/docs/src/demos/Examples/MarkdownShortcuts/index.vue @@ -6,7 +6,6 @@ diff --git a/packages/extension-paragraph/src/index.ts b/packages/extension-paragraph/src/index.ts index b6b9e414..961d08eb 100644 --- a/packages/extension-paragraph/src/index.ts +++ b/packages/extension-paragraph/src/index.ts @@ -1,9 +1,18 @@ -import { Command, createNode } from '@tiptap/core' -// import ParagraphComponent from './paragraph.vue' +import { Command, Node } from '@tiptap/core' -const Paragraph = createNode({ +export interface ParagraphOptions { + HTMLAttributes: { + [key: string]: any + }, +} + +const Paragraph = Node.create({ name: 'paragraph', + defaultOptions: { + HTMLAttributes: {}, + }, + group: 'block', content: 'inline*', @@ -14,8 +23,8 @@ const Paragraph = createNode({ ] }, - renderHTML({ attributes }) { - return ['p', attributes, 0] + renderHTML({ HTMLAttributes }) { + return ['p', HTMLAttributes, 0] }, addCommands() { diff --git a/packages/extension-strike/src/index.ts b/packages/extension-strike/src/index.ts index a444b881..197e949e 100644 --- a/packages/extension-strike/src/index.ts +++ b/packages/extension-strike/src/index.ts @@ -1,13 +1,26 @@ import { - Command, createMark, markInputRule, markPasteRule, + Command, + Mark, + markInputRule, + markPasteRule, } from '@tiptap/core' +export interface StrikeOptions { + HTMLAttributes: { + [key: string]: any + }, +} + export const inputRegex = /(?:^|\s)((?:~~)((?:[^~]+))(?:~~))$/gm export const pasteRegex = /(?:^|\s)((?:~~)((?:[^~]+))(?:~~))/gm -const Strike = createMark({ +const Strike = Mark.create({ name: 'strike', + defaultOptions: { + HTMLAttributes: {}, + }, + parseHTML() { return [ { @@ -25,8 +38,8 @@ const Strike = createMark({ ] }, - renderHTML({ attributes }) { - return ['s', attributes, 0] + renderHTML({ HTMLAttributes }) { + return ['s', HTMLAttributes, 0] }, addCommands() { diff --git a/packages/extension-task-item/src/index.ts b/packages/extension-task-item/src/index.ts index a30c25ea..ce7c0ab3 100644 --- a/packages/extension-task-item/src/index.ts +++ b/packages/extension-task-item/src/index.ts @@ -1,25 +1,29 @@ -import { createNode, mergeAttributes } from '@tiptap/core' +import { Node, mergeAttributes } from '@tiptap/core' import { wrappingInputRule } from 'prosemirror-inputrules' -export const inputRegex = /^\s*(\[([ |x])\])\s$/ - export interface TaskItemOptions { nested: boolean, + HTMLAttributes: { + [key: string]: any + }, } -const TaskItem = createNode({ +export const inputRegex = /^\s*(\[([ |x])\])\s$/ + +const TaskItem = Node.create({ name: 'taskItem', + defaultOptions: { + nested: false, + HTMLAttributes: {}, + }, + content() { return this.options.nested ? '(paragraph|taskList)+' : 'paragraph+' }, defining: true, - defaultOptions: { - nested: false, - }, - addAttributes() { return { checked: { @@ -43,8 +47,8 @@ const TaskItem = createNode({ ] }, - renderHTML({ attributes }) { - return ['li', mergeAttributes(attributes, { 'data-type': 'taskItem' }), 0] + renderHTML({ HTMLAttributes }) { + return ['li', mergeAttributes(HTMLAttributes, { 'data-type': 'taskItem' }), 0] }, addKeyboardShortcuts() { @@ -64,7 +68,7 @@ const TaskItem = createNode({ }, addNodeView() { - return ({ attributes, getPos, editor }) => { + return ({ HTMLAttributes, getPos, editor }) => { const { view } = editor const listItem = document.createElement('li') const checkbox = document.createElement('input') @@ -82,13 +86,13 @@ const TaskItem = createNode({ } }) - if (attributes['data-checked'] === true) { + if (HTMLAttributes['data-checked'] === true) { checkbox.setAttribute('checked', 'checked') } listItem.append(checkbox, content) - Object.entries(attributes).forEach(([key, value]) => { + Object.entries(HTMLAttributes).forEach(([key, value]) => { listItem.setAttribute(key, value) }) diff --git a/packages/extension-task-list/src/index.ts b/packages/extension-task-list/src/index.ts index f6d28975..554cf283 100644 --- a/packages/extension-task-list/src/index.ts +++ b/packages/extension-task-list/src/index.ts @@ -1,8 +1,18 @@ -import { Command, createNode, mergeAttributes } from '@tiptap/core' +import { Command, Node, mergeAttributes } from '@tiptap/core' -const TaskList = createNode({ +export interface TaskListOptions { + HTMLAttributes: { + [key: string]: any + }, +} + +const TaskList = Node.create({ name: 'taskList', + defaultOptions: { + HTMLAttributes: {}, + }, + group: 'block list', content: 'taskItem+', @@ -16,8 +26,8 @@ const TaskList = createNode({ ] }, - renderHTML({ attributes }) { - return ['ul', mergeAttributes(attributes, { 'data-type': 'taskList' }), 0] + renderHTML({ HTMLAttributes }) { + return ['ul', mergeAttributes(HTMLAttributes, { 'data-type': 'taskList' }), 0] }, addCommands() { diff --git a/packages/extension-text-align/src/index.ts b/packages/extension-text-align/src/index.ts index 6d4bbd1d..63fb2279 100644 --- a/packages/extension-text-align/src/index.ts +++ b/packages/extension-text-align/src/index.ts @@ -1,4 +1,4 @@ -import { Command, createExtension } from '@tiptap/core' +import { Command, Extension } from '@tiptap/core' type TextAlignOptions = { types: string[], @@ -6,7 +6,7 @@ type TextAlignOptions = { defaultAlignment: string, } -const TextAlign = createExtension({ +const TextAlign = Extension.create({ defaultOptions: { types: ['heading', 'paragraph'], alignments: ['left', 'center', 'right', 'justify'], diff --git a/packages/extension-text-style/src/index.ts b/packages/extension-text-style/src/index.ts index efa9414b..bed66e32 100644 --- a/packages/extension-text-style/src/index.ts +++ b/packages/extension-text-style/src/index.ts @@ -1,6 +1,6 @@ -import { Command, createMark, getMarkAttrs } from '@tiptap/core' +import { Command, Mark, getMarkAttrs } from '@tiptap/core' -const TextStyle = createMark({ +const TextStyle = Mark.create({ name: 'textStyle', parseHTML() { @@ -20,8 +20,8 @@ const TextStyle = createMark({ ] }, - renderHTML({ attributes }) { - return ['span', attributes, 0] + renderHTML({ HTMLAttributes }) { + return ['span', HTMLAttributes, 0] }, addCommands() { diff --git a/packages/extension-text/src/index.ts b/packages/extension-text/src/index.ts index b670bed4..b6bea78d 100644 --- a/packages/extension-text/src/index.ts +++ b/packages/extension-text/src/index.ts @@ -1,6 +1,6 @@ -import { createNode } from '@tiptap/core' +import { Node } from '@tiptap/core' -const Text = createNode({ +const Text = Node.create({ name: 'text', group: 'inline', }) diff --git a/packages/extension-typography/src/index.ts b/packages/extension-typography/src/index.ts index 80590283..34e696c4 100644 --- a/packages/extension-typography/src/index.ts +++ b/packages/extension-typography/src/index.ts @@ -1,4 +1,4 @@ -import { createExtension } from '@tiptap/core' +import { Extension } from '@tiptap/core' import { emDash, ellipsis, @@ -20,7 +20,7 @@ export const laquo = new InputRule(/<<$/, '«') export const raquo = new InputRule(/>>$/, '»') export const multiplication = new InputRule(/\d+\s?([*x])\s?\d+$/, '×') -const Typography = createExtension({ +const Typography = Extension.create({ addInputRules() { return [ emDash, diff --git a/packages/extension-underline/src/index.ts b/packages/extension-underline/src/index.ts index 39628b7f..0f9cb39c 100644 --- a/packages/extension-underline/src/index.ts +++ b/packages/extension-underline/src/index.ts @@ -1,8 +1,18 @@ -import { Command, createMark } from '@tiptap/core' +import { Command, Mark } from '@tiptap/core' -const Underline = createMark({ +export interface UnderlineOptions { + HTMLAttributes: { + [key: string]: any + }, +} + +const Underline = Mark.create({ name: 'underline', + defaultOptions: { + HTMLAttributes: {}, + }, + parseHTML() { return [ { @@ -14,8 +24,8 @@ const Underline = createMark({ ] }, - renderHTML({ attributes }) { - return ['u', attributes, 0] + renderHTML({ HTMLAttributes }) { + return ['u', HTMLAttributes, 0] }, addCommands() { diff --git a/packages/starter-kit/src/index.ts b/packages/starter-kit/src/index.ts index 8dd4c848..89d6cd6f 100644 --- a/packages/starter-kit/src/index.ts +++ b/packages/starter-kit/src/index.ts @@ -23,23 +23,23 @@ export function defaultExtensions(options: { heading: HeadingOptions, }) { return [ - Dropcursor(), - Gapcursor(), - Document(), - History(options?.history), - Paragraph(), - Text(), - Bold(), - Italic(), - Code(), - CodeBlock(options?.codeBlock), - Heading(options?.heading), - HardBreak(), - Strike(), - Blockquote(), - HorizontalRule(), - BulletList(), - OrderedList(), - ListItem(), + Dropcursor, + Gapcursor, + Document, + History.configure(options?.history), + Paragraph, + Text, + Bold, + Italic, + Code, + CodeBlock.configure(options?.codeBlock), + Heading.configure(options?.heading), + HardBreak, + Strike, + Blockquote, + HorizontalRule, + BulletList, + OrderedList, + ListItem, ] } diff --git a/tests/cypress/integration/core/generateHTML.spec.ts b/tests/cypress/integration/core/generateHTML.spec.ts index 05b553dd..39bfacd2 100644 --- a/tests/cypress/integration/core/generateHTML.spec.ts +++ b/tests/cypress/integration/core/generateHTML.spec.ts @@ -19,9 +19,9 @@ describe('generateHTML', () => { } const html = generateHTML(json, [ - Document(), - Paragraph(), - Text(), + Document, + Paragraph, + Text, ]) expect(html).to.eq('

Example Text

') diff --git a/tests/cypress/integration/core/mergeAttributes.spec.ts b/tests/cypress/integration/core/mergeAttributes.spec.ts index 5a6a24e0..fcb2aac5 100644 --- a/tests/cypress/integration/core/mergeAttributes.spec.ts +++ b/tests/cypress/integration/core/mergeAttributes.spec.ts @@ -57,4 +57,13 @@ describe('mergeAttributes', () => { style: 'color: red; background: green', }) }) + + it('should ignore falsy values', () => { + // @ts-expect-error + const value = mergeAttributes(undefined, { class: 'foo' }) + + expect(value).to.deep.eq({ + class: 'foo', + }) + }) })