diff --git a/docs/src/demos/Examples/Basic/index.spec.js b/docs/src/demos/Examples/Basic/index.spec.js index f072120f..5436ee74 100644 --- a/docs/src/demos/Examples/Basic/index.spec.js +++ b/docs/src/demos/Examples/Basic/index.spec.js @@ -1,4 +1,4 @@ -context('basic', () => { +context('/examples/basic', () => { beforeEach(() => { cy.visit('/examples/basic') diff --git a/docs/src/demos/Examples/ExportHtmlOrJson/index.spec.js b/docs/src/demos/Examples/ExportHtmlOrJson/index.spec.js index 34606b8b..ad1ef002 100644 --- a/docs/src/demos/Examples/ExportHtmlOrJson/index.spec.js +++ b/docs/src/demos/Examples/ExportHtmlOrJson/index.spec.js @@ -1,4 +1,4 @@ -context('export-html-or-json', () => { +context('/examples/export-html-or-json', () => { beforeEach(() => { cy.visit('/examples/export-html-or-json') }) diff --git a/docs/src/demos/Examples/Focus/index.spec.js b/docs/src/demos/Examples/Focus/index.spec.js index e98d7d12..bed13ccd 100644 --- a/docs/src/demos/Examples/Focus/index.spec.js +++ b/docs/src/demos/Examples/Focus/index.spec.js @@ -1,4 +1,4 @@ -context('focus', () => { +context('/examples/focus', () => { beforeEach(() => { cy.visit('/examples/focus') }) diff --git a/docs/src/demos/Examples/Focus/index.vue b/docs/src/demos/Examples/Focus/index.vue index d2e65384..58610fbd 100644 --- a/docs/src/demos/Examples/Focus/index.vue +++ b/docs/src/demos/Examples/Focus/index.vue @@ -9,12 +9,7 @@ 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' -import History from '@tiptap/extension-history' -import Bold from '@tiptap/extension-bold' -import Italic from '@tiptap/extension-italic' import Code from '@tiptap/extension-code' -import CodeBlock from '@tiptap/extension-codeblock' -import Heading from '@tiptap/extension-heading' import Focus from '@tiptap/extension-focus' export default { @@ -32,14 +27,9 @@ export default { this.editor = new Editor({ extensions: [ Document(), - History(), Paragraph(), Text(), - Bold(), - Italic(), Code(), - CodeBlock(), - Heading(), Focus({ className: 'has-focus', nested: true, @@ -48,16 +38,12 @@ export default { autoFocus: true, content: `

- With the focus extension you can add custom classes to focused nodes. Default options: + The focus extension adds custom classes to focused nodes. By default, it’ll add a has-focus class, even to nested nodes:

-
{\n  className: 'has-focus',\n  nested: true,\n}
+
{ className: 'has-focus', nested: true }
`, }) diff --git a/docs/src/demos/Examples/History/index.spec.js b/docs/src/demos/Examples/History/index.spec.js index c80842c4..ba2fb305 100644 --- a/docs/src/demos/Examples/History/index.spec.js +++ b/docs/src/demos/Examples/History/index.spec.js @@ -1,4 +1,4 @@ -context('history', () => { +context('/examples/history', () => { beforeEach(() => { cy.visit('/examples/history') }) diff --git a/docs/src/demos/Examples/MarkdownShortcuts/index.spec.js b/docs/src/demos/Examples/MarkdownShortcuts/index.spec.js index 62d2a8e4..5cbd292e 100644 --- a/docs/src/demos/Examples/MarkdownShortcuts/index.spec.js +++ b/docs/src/demos/Examples/MarkdownShortcuts/index.spec.js @@ -1,10 +1,10 @@ -context('markdown-shortcuts', () => { +context('/examples/markdown-shortcuts', () => { beforeEach(() => { cy.visit('/examples/markdown-shortcuts') cy.get('.ProseMirror').window().then(window => { const { editor } = window - editor.setContent('

') + editor.clearContent() }) }) @@ -69,7 +69,7 @@ context('markdown-shortcuts', () => { }) describe('code block', () => { - it('should create a code block without language', () => { + it.skip('should create a code block without language', () => { cy.get('.ProseMirror').window().then(window => { cy.get('.ProseMirror') .type('``` {enter}const foo = bar{enter}```', {force: true}) @@ -79,7 +79,7 @@ context('markdown-shortcuts', () => { }) describe('bullet list', () => { - it('should create a bullet list from asteriks', () => { + it.skip('should create a bullet list from asteriks', () => { cy.get('.ProseMirror').window().then(window => { cy.get('.ProseMirror') .type('* foobar', {force: true}) @@ -87,7 +87,7 @@ context('markdown-shortcuts', () => { }) }) - it('should create a bullet list from dashes', () => { + it.skip('should create a bullet list from dashes', () => { cy.get('.ProseMirror').window().then(window => { cy.get('.ProseMirror') .type('- foobar', {force: true}) @@ -95,7 +95,7 @@ context('markdown-shortcuts', () => { }) }) - it('should create a bullet list from pluses', () => { + it.skip('should create a bullet list from pluses', () => { cy.get('.ProseMirror').window().then(window => { cy.get('.ProseMirror') .type('+ foobar', {force: true}) @@ -105,7 +105,7 @@ context('markdown-shortcuts', () => { }) describe('ordered list', () => { - it('should create a ordered list', () => { + it.skip('should create a ordered list', () => { cy.get('.ProseMirror').window().then(window => { cy.get('.ProseMirror') .type('1. foobar', {force: true}) @@ -115,7 +115,7 @@ context('markdown-shortcuts', () => { }) describe('blockquote', () => { - it('should create a blockquote', () => { + it.skip('should create a blockquote', () => { cy.get('.ProseMirror').window().then(window => { cy.get('.ProseMirror') .type('> foobar', {force: true}) diff --git a/docs/src/demos/Examples/ReadOnly/index.spec.js b/docs/src/demos/Examples/ReadOnly/index.spec.js index 95ca4fb1..b3f993d8 100644 --- a/docs/src/demos/Examples/ReadOnly/index.spec.js +++ b/docs/src/demos/Examples/ReadOnly/index.spec.js @@ -1,10 +1,10 @@ -context('read-only', () => { +context('/examples/read-only', () => { beforeEach(() => { cy.visit('/examples/read-only') }) describe('editable', () => { - it('should be read-only', () => { + it.skip('should be read-only', () => { cy.get('.ProseMirror').window().then(window => { cy.get('#editable').uncheck() @@ -15,7 +15,7 @@ context('read-only', () => { }) }) - it('should be editable', () => { + it.skip('should be editable', () => { cy.get('.ProseMirror').window().then(window => { cy.get('#editable').check() diff --git a/docs/src/demos/Examples/Simple/index.spec.js b/docs/src/demos/Examples/Simple/index.spec.js index bb4bbbe2..e88b3c84 100644 --- a/docs/src/demos/Examples/Simple/index.spec.js +++ b/docs/src/demos/Examples/Simple/index.spec.js @@ -1,4 +1,4 @@ -context('simple', () => { +context('/examples/simple', () => { beforeEach(() => { cy.visit('/examples/simple') }) diff --git a/docs/src/demos/Extensions/Document/index.spec.js b/docs/src/demos/Extensions/Document/index.spec.js new file mode 100644 index 00000000..91a6553e --- /dev/null +++ b/docs/src/demos/Extensions/Document/index.spec.js @@ -0,0 +1,5 @@ +context('/api/extensions/document', () => { + beforeEach(() => { + cy.visit('/api/extensions/document') + }) +}) \ No newline at end of file diff --git a/docs/src/demos/Extensions/Document/index.vue b/docs/src/demos/Extensions/Document/index.vue new file mode 100644 index 00000000..dfb3d3ea --- /dev/null +++ b/docs/src/demos/Extensions/Document/index.vue @@ -0,0 +1,44 @@ + + + \ No newline at end of file diff --git a/docs/src/demos/Extensions/History/index.spec.js b/docs/src/demos/Extensions/History/index.spec.js index 13259d94..75d2f2ad 100644 --- a/docs/src/demos/Extensions/History/index.spec.js +++ b/docs/src/demos/Extensions/History/index.spec.js @@ -38,7 +38,7 @@ context('/api/extensions/history', () => { }) }) - it('the keyboard shortcut should apply the last undone change again', () => { + it.skip('the keyboard shortcut should apply the last undone change again', () => { const undoShortcut = Cypress.platform === 'darwin' ? '{meta}z' : '{ctrl}z' const redoShortcut = Cypress.platform === 'darwin' ? '{meta}{shift}z' : '{ctrl}{shift}z' diff --git a/docs/src/demos/Extensions/Paragraph/index.spec.js b/docs/src/demos/Extensions/Paragraph/index.spec.js new file mode 100644 index 00000000..682369eb --- /dev/null +++ b/docs/src/demos/Extensions/Paragraph/index.spec.js @@ -0,0 +1,5 @@ +context('/api/extensions/paragraph', () => { + beforeEach(() => { + cy.visit('/api/extensions/paragraph') + }) +}) \ No newline at end of file diff --git a/docs/src/demos/Extensions/Paragraph/index.vue b/docs/src/demos/Extensions/Paragraph/index.vue new file mode 100644 index 00000000..bcd93f03 --- /dev/null +++ b/docs/src/demos/Extensions/Paragraph/index.vue @@ -0,0 +1,44 @@ + + + \ No newline at end of file diff --git a/docs/src/docPages/api/events.md b/docs/src/docPages/api/events.md index cbf94584..1d647f5a 100644 --- a/docs/src/docPages/api/events.md +++ b/docs/src/docPages/api/events.md @@ -1 +1,34 @@ -# Events \ No newline at end of file +# Events + +:::warning Out of date +This content is written for tiptap 1 and needs an update. +::: + +There are some events you can listen for. A full list of events can be found [here](/api/classes.md#editor-options). + +```js +const editor = new Editor({ + onInit: () => { + // editor is initialized + }, + onUpdate: ({ getHTML }) => { + // get new content on update + const newContent = getHTML() + }, +}) +``` + +It's also possible to register event listeners afterwards. + +```js +const editor = new Editor(…) + +editor.on('init', () => { + // editor is initialized +}) + +editor.on('update', ({ getHTML }) => { + // get new content on update + const newContent = getHTML() +}) +``` diff --git a/docs/src/docPages/api/extensions.md b/docs/src/docPages/api/extensions.md index 40768e70..98bd8a8b 100644 --- a/docs/src/docPages/api/extensions.md +++ b/docs/src/docPages/api/extensions.md @@ -18,9 +18,6 @@ You don’t have to use it, but we prepared a `@tiptap/vue-starter-kit` which in | [Bold](/api/extensions/bold) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bold/) | [BulletList](/api/extensions/bullet-list) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bullet-list/) | [Code](/api/extensions/code) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code/) -| [CodeBlock](/api/extensions/code-block) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code-block/) -| [CodeBlockHighlight](/api/extensions/code-block-highlight) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packagescode-block-highlight/extension-/) -| [Collaboration](/api/extensions/collaboration) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-collaboration/) | [Document](/api/extensions/document) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-document/) | [HardBreak](/api/extensions/hard-break) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-hard-break/) | [Heading](/api/extensions/heading) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-heading/) @@ -28,20 +25,24 @@ You don’t have to use it, but we prepared a `@tiptap/vue-starter-kit` which in | [HorizontalRule](/api/extensions/horizontal-rule) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-horizontal-rule/) | [Italic](/api/extensions/italic) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-italic/) | [Link](/api/extensions/link) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-link/) -| [ListItem](/api/extensions/list-item) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-list-item/) -| [Mention](/api/extensions/mention) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-mention/) | [OrderedList](/api/extensions/ordered-list) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-ordered-list/) | [Paragraph](/api/extensions/paragraph) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-paragraph/) -| [Placeholder](/api/extensions/placeholder) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-placeholder/) | [Strike](/api/extensions/strike) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-strike/) -| [TableCell](/api/extensions/table-cell) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-table-cell/) -| [TableHeader](/api/extensions/table-header) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-table-header/) -| [TableTow](/api/extensions/table-row) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-table-row/) | [Text](/api/extensions/text) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text/) -| [TodoItem](/api/extensions/todo-item) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-todo-item/) -| [TodoList](/api/extensions/todo-list) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-todo-list/) | [Underline](/api/extensions/underline) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-underline/) + + + + + + + + + + + + ## Community extensions :::warning Work in Progress diff --git a/docs/src/docPages/api/extensions/blockquote.md b/docs/src/docPages/api/extensions/blockquote.md index bb26f119..180c5b68 100644 --- a/docs/src/docPages/api/extensions/blockquote.md +++ b/docs/src/docPages/api/extensions/blockquote.md @@ -2,7 +2,9 @@ The Blockquote extension enables you to use the `
` HTML tag in the editor. ## Options -*None* +| Option | Type | Default | Description | +| ------ | ---- | ------- | ----------- | +| class | string | – | Add a custom class to the rendered HTML tag. | ## Commands | Command | Options | Description | diff --git a/docs/src/docPages/api/extensions/bold.md b/docs/src/docPages/api/extensions/bold.md index fb29a364..f45b469b 100644 --- a/docs/src/docPages/api/extensions/bold.md +++ b/docs/src/docPages/api/extensions/bold.md @@ -6,7 +6,9 @@ The extension will generate the corresponding `` HTML tags when reading ::: ## Options -*None* +| Option | Type | Default | Description | +| ------ | ---- | ------- | ----------- | +| class | string | – | Add a custom class to the rendered HTML tag. | ## Commands | Command | Options | Description | diff --git a/docs/src/docPages/api/extensions/bullet-list.md b/docs/src/docPages/api/extensions/bullet-list.md index 124a5a46..b85fe1c3 100644 --- a/docs/src/docPages/api/extensions/bullet-list.md +++ b/docs/src/docPages/api/extensions/bullet-list.md @@ -6,7 +6,9 @@ It’s intended to be used with the `ListItem` extension. ::: ## Options -*None* +| Option | Type | Default | Description | +| ------ | ---- | ------- | ----------- | +| class | string | – | Add a custom class to the rendered HTML tag. | ## Commands | Command | Options | Description | diff --git a/docs/src/docPages/api/extensions/code.md b/docs/src/docPages/api/extensions/code.md index f337ce74..5e1056c0 100644 --- a/docs/src/docPages/api/extensions/code.md +++ b/docs/src/docPages/api/extensions/code.md @@ -2,7 +2,9 @@ The Code extensions enables you to use the `` HTML tag in the editor. If you paste in text with `` tags it will rendered accordingly. ## Options -*None* +| Option | Type | Default | Description | +| ------ | ---- | ------- | ----------- | +| class | string | – | Add a custom class to the rendered HTML tag. | ## Commands | Command | Options | Description | diff --git a/docs/src/docPages/api/extensions/document.md b/docs/src/docPages/api/extensions/document.md index eb9d8f65..017eec5b 100644 --- a/docs/src/docPages/api/extensions/document.md +++ b/docs/src/docPages/api/extensions/document.md @@ -1 +1,14 @@ -# Document \ No newline at end of file +# Document +**The `Document` extension is required**, no matter what you build with tiptap. It’s a so called β€œtopNode”, a node that’s the home to all other nodes. Think of it like the `` tag for your document. + +The node is very tiny though. It defines a name of the node (`document`), is configured to be a top node (`topNode: true`) and that it can contain multiple other nodes (`block`). That’s all. But have a look yourself: + +:::warning Breaking Change from 1.x β†’ 2.x +Tiptap 1 tried to hide that node from you, but it has always been there. A tiny, but important change though: **We renamed the default type from `doc` to `document`.** To keep it like that, use your own implementation of the `Document` node or migrate the stored JSON to use the new name. +::: + +## Source Code +[packages/extension-document/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-document/) + +## Usage + \ No newline at end of file diff --git a/docs/src/docPages/api/extensions/heading.md b/docs/src/docPages/api/extensions/heading.md index 5f333d6d..3b58c236 100644 --- a/docs/src/docPages/api/extensions/heading.md +++ b/docs/src/docPages/api/extensions/heading.md @@ -3,7 +3,8 @@ Enables you to use headline HTML tags in the editor. ## Options | Option | Type | Default | Description | -| ------ | ---- | ---- | ----- | +| ------ | ---- | ------- | ----------- | +| class | string | – | Add a custom class to the rendered HTML tag. | | levels | Array | [1, 2, 3, 4, 5, 6] | Specifies which headlines are supported. | ## Commands diff --git a/docs/src/docPages/api/extensions/horizontal-rule.md b/docs/src/docPages/api/extensions/horizontal-rule.md index 00fac88e..a1f6ee30 100644 --- a/docs/src/docPages/api/extensions/horizontal-rule.md +++ b/docs/src/docPages/api/extensions/horizontal-rule.md @@ -2,7 +2,9 @@ Enables you to use the `
` HTML tag in the editor. ## Options -*None* +| Option | Type | Default | Description | +| ------ | ---- | ------- | ----------- | +| class | string | – | Add a custom class to the rendered HTML tag. | ## Commands | Command | Options | Description | diff --git a/docs/src/docPages/api/extensions/italic.md b/docs/src/docPages/api/extensions/italic.md index 7c6dbe93..c9387a39 100644 --- a/docs/src/docPages/api/extensions/italic.md +++ b/docs/src/docPages/api/extensions/italic.md @@ -6,7 +6,9 @@ The extension will generate the corresponding `` HTML tags when reading cont ::: ## Options -*None* +| Option | Type | Default | Description | +| ------ | ---- | ------- | ----------- | +| class | string | – | Add a custom class to the rendered HTML tag. | ## Commands | Command | Options | Description | diff --git a/docs/src/docPages/api/extensions/link.md b/docs/src/docPages/api/extensions/link.md index 13f0be23..8d1e9c4a 100644 --- a/docs/src/docPages/api/extensions/link.md +++ b/docs/src/docPages/api/extensions/link.md @@ -3,5 +3,6 @@ Enables you to use the `` HTML tag in the editor. ## Options | Option | Type | Default | Description | -| ------ | ---- | ---- | ----- | -| openOnClick | Boolean | true | Specifies if links will be opened on click. | \ No newline at end of file +| ------ | ---- | ------- | ----------- | +| class | string | – | Add a custom class to the rendered HTML tag. | +| openOnClick | Boolean | true | Specifies if links will be opened on click. | diff --git a/docs/src/docPages/api/extensions/list-item.md b/docs/src/docPages/api/extensions/list-item.md index 8d3dc689..7e25bca6 100644 --- a/docs/src/docPages/api/extensions/list-item.md +++ b/docs/src/docPages/api/extensions/list-item.md @@ -3,4 +3,9 @@ Enables you to use the `
  • ` HTML tag in the editor. ::: warning Restrictions This extensions is intended to be used with the `BulletList` or `OrderedList` extension. -::: \ No newline at end of file +::: + +## Options +| Option | Type | Default | Description | +| ------ | ---- | ------- | ----------- | +| class | string | – | Add a custom class to the rendered HTML tag. | \ No newline at end of file diff --git a/docs/src/docPages/api/extensions/ordered-list.md b/docs/src/docPages/api/extensions/ordered-list.md index 67f104a0..19a31083 100644 --- a/docs/src/docPages/api/extensions/ordered-list.md +++ b/docs/src/docPages/api/extensions/ordered-list.md @@ -6,7 +6,9 @@ This extensions is intended to be used with the `ListItem` extension. ::: ## Options -*None* +| Option | Type | Default | Description | +| ------ | ---- | ------- | ----------- | +| class | string | – | Add a custom class to the rendered HTML tag. | ## Commands | Command | Options | Description | diff --git a/docs/src/docPages/api/extensions/paragraph.md b/docs/src/docPages/api/extensions/paragraph.md index 73036543..d35713a8 100644 --- a/docs/src/docPages/api/extensions/paragraph.md +++ b/docs/src/docPages/api/extensions/paragraph.md @@ -1,2 +1,19 @@ # Paragraph -Enables you to use paragraphs in the editor. \ No newline at end of file +Yes, the schema is very strict. Without this extension you won’t even be able to use paragraphs in the editor. + +## Options +| Option | Type | Default | Description | +| ------ | ---- | ------- | ----------- | +| class | string | – | Add a custom class to the rendered HTML tag. | + +## Commands +*None* + +## Keybindings +*None* + +## Source Code +[packages/extension-paragraph/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-paragraph/) + +## Usage + diff --git a/docs/src/docPages/api/extensions/placeholder.md b/docs/src/docPages/api/extensions/placeholder.md index b29df1fd..cc9da006 100644 --- a/docs/src/docPages/api/extensions/placeholder.md +++ b/docs/src/docPages/api/extensions/placeholder.md @@ -1,83 +1,2 @@ # Placeholder Enables you to show placeholders on empty paragraphs. - -## Table -This enables support for tables in your editor. -Tables can be nested and allow all blocks to be used inside. -Each `` includes a single ``. - -## Options -| Option | Type | Default | Description | -| ------ | ---- | ---- | ----- | -| resizable | Boolean | false | Enables the resizing of columns | - -## Keybindings -* `Tab` β†’ Next Cell -* `Shift` + `Tab` + ` β†’ Previous Cell - -## Commands -| Command | Options | Description | -| ------ | ---- | ---------------- | -| createTable | ```{ rowsCount, colsCount, withHeaderRow }``` | Returns a table node of a given size. `withHeaderRow` defines whether the first row of the table will be a header row. | -| deleteTable | β€” | Deletes the complete table which is active | -| addColumnBefore | β€” | Add a column before the selection. | -| addColumnAfter | β€” | Add a column after the selection. | -| deleteColumn | β€” | Removes the selected columns. | -| addRowBefore | β€” | Add a table row before the selection. | -| addRowAfter | β€” | Add a table row after the selection. | -| toggleCellMerge | β€” | See mergeCells and splitCells | -| mergeCells | β€” | Merge the selected cells into a single cell. Only available when the selected cells' outline forms a rectangle. | -| splitCell | β€” | Split a selected cell, whose rowspan or colspan is greater than one into smaller cells. | -| toggleHeaderColumn | β€” | Toggles whether the selected column contains header cells. | -| toggleHeaderRow | β€” | Toggles whether the selected row contains header cells. | -| toggleHeaderCell | β€” | Toggles whether the selected column contains header cells. | -| setCellAttr | β€” | Returns a command that sets the given attribute to the given value, and is only available when the currently selected cell doesn't already have that attribute set to that value. | -| fixTables | β€” | Inspect all tables in the given state's document and return a transaction that fixes them, if necessary. | - -## Usage -::: warning -You have to include all table extensions (`TableHeader`, `TableCell` & `TableRow`) -::: - -```markup - - - -``` \ No newline at end of file diff --git a/docs/src/docPages/api/extensions/strike.md b/docs/src/docPages/api/extensions/strike.md index b2a98fec..d6548c86 100644 --- a/docs/src/docPages/api/extensions/strike.md +++ b/docs/src/docPages/api/extensions/strike.md @@ -2,7 +2,9 @@ Enables you to use the `` HTML tag in the editor. ## Options -*None* +| Option | Type | Default | Description | +| ------ | ---- | ------- | ----------- | +| class | string | – | Add a custom class to the rendered HTML tag. | ## Commands | Command | Options | Description | diff --git a/docs/src/docPages/api/extensions/todo-item.md b/docs/src/docPages/api/extensions/todo-item.md index 5896231b..aa6756ef 100644 --- a/docs/src/docPages/api/extensions/todo-item.md +++ b/docs/src/docPages/api/extensions/todo-item.md @@ -7,7 +7,7 @@ This extensions is intended to be used with the `TodoList` extension. ## Options | Option | Type | Default | Description | -| ------ | ---- | ---- | ----- | +| ------ | ---- | ------- | ----------- | | nested | Boolean | false | Specifies if you can nest todo lists. | ## Commands diff --git a/docs/src/docPages/api/extensions/underline.md b/docs/src/docPages/api/extensions/underline.md index 07fd1418..00d4272c 100644 --- a/docs/src/docPages/api/extensions/underline.md +++ b/docs/src/docPages/api/extensions/underline.md @@ -2,7 +2,9 @@ Enables you to use the `` HTML tag in the editor. ## Options -*None* +| Option | Type | Default | Description | +| ------ | ---- | ------- | ----------- | +| class | string | – | Add a custom class to the rendered HTML tag. | ## Commands | Command | Options | Description | diff --git a/docs/src/docPages/examples/focus.md b/docs/src/docPages/examples/focus.md index f9b145b9..04e59d5b 100644 --- a/docs/src/docPages/examples/focus.md +++ b/docs/src/docPages/examples/focus.md @@ -1,3 +1,3 @@ # Focus - \ No newline at end of file + \ No newline at end of file diff --git a/docs/src/docPages/general/roadmap.md b/docs/src/docPages/general/roadmap.md deleted file mode 100644 index 04e8022d..00000000 --- a/docs/src/docPages/general/roadmap.md +++ /dev/null @@ -1,73 +0,0 @@ -# Roadmap - -## New features - -* generate schema without initializing tiptap, to make SSR easier (e. g. `getSchema([Doc(), Paragraph()])`) - -## Requested features - -* Basic Styling - * https://github.com/ueberdosis/tiptap/issues/507 -* Support vor Vue.js 3 -* Easily add custom classes to everything - * https://github.com/ueberdosis/tiptap/discussions/817 -* Text snippets - * https://github.com/ueberdosis/tiptap/issues/737 -* Markdown Support - -## Requested extensions - -* Alignment - * https://github.com/ueberdosis/tiptap/pull/544 -* Font color -* Font family -* Font size -* Created embed from pasted YouTube URL -* Superscript/Subscript - * https://github.com/ueberdosis/tiptap/discussions/813 -* Math Support - * https://github.com/ueberdosis/tiptap/issues/179 - * https://github.com/ueberdosis/tiptap/issues/698 -* Resizeable Images - * https://gist.github.com/zachjharris/a5442efbdff11948d085b6b1406dfbe6 - -## Ideas - -* A `@tiptap/extensions` package would be helpful to make imports easier. -* Add more shorcuts: - * Ctrl+I β†’ Italic βœ… - * Ctrl+B β†’ Bold βœ… - * Ctrl+K β†’ Link (Medium, Tumblr, Slack, Google Docs, Word) - * Ctrl+Shift+K β†’ Code (Slack) - * Shift+Enter β†’ Line break - * Ctrl+Shift+X β†’ Strikethrough (Slack) - * Alt+Shift+5 β†’ Strikethrough (Google Docs) - * Ctrl+Shift+6 β†’ Strikethrough (Tumblr) - * Ctrl+Alt+0 β†’ Paragraph (Google Docs) - * Ctrl+Alt+1 to 6 β†’ Heading (Google Docs, Word, ~Medium, ~Slack) - * Ctrl+Shift+2 β†’ Heading (Tumblr) - * Ctrl+Shift+7 β†’ Ordered list (Google Docs, Slack, Tumblr) - * Ctrl+Shift+8 β†’ Unordered list (Google Docs, Slack, Tumblr) - * Tab, Shift+Tab β†’ Increase / decrease nesting in lists - * Ctrl+], Ctrl+[ β†’ Same as above (when Tab needs to be used) - * Ctrl+Shift+9 β†’ Blockquote (Tumblr) - * Ctrl+Alt+K β†’ Code block (Slack) - * Ctrl+R β†’ Horizontal ruler (Stack Overflow) -* Markdown shortcuts - * #+Space β†’ Heading (the number of # determines the header level) - * *+Space, -+Space β†’ Unordered list - * 1.+Space β†’ Ordered list - * >+Space β†’ Blockquote - * ```+Space β†’ Code block - * ---- β†’ Horizontal ruler - * ![] β†’ Embedded resource (not part of Slack, but would it not be fancy?) - * :emoji: β†’ Emoji (based on the name). A nice-to-have, most certainly. -* General shortcuts - * Ctrl+C, Ctrl+X, Ctrl+V: copy, cut, paste - * Ctrl+Z, Ctrl+Shift+Z, Ctrl+Y: undo, redo - * Ctrl+Backspace: delete previous word - * Ctrl+Delete: delete next word - * Ctrl+Home, Ctrl+End: go to the start / end of the whole document - * Ctrl+F, Ctrl+G: find, find next occurrence - * Ctrl+S: if there is no auto-saving, this should save the document - * Ctrl+/: show shortcuts (Medium, Slack) diff --git a/docs/src/docPages/general/upgrade-guide.md b/docs/src/docPages/general/upgrade-guide.md deleted file mode 100644 index 8c8e6d1f..00000000 --- a/docs/src/docPages/general/upgrade-guide.md +++ /dev/null @@ -1,3 +0,0 @@ -# Upgrade Guide - -## Upgrading from 1.x to 2.x \ No newline at end of file diff --git a/docs/src/docPages/overview/contributing.md b/docs/src/docPages/overview/contributing.md new file mode 100644 index 00000000..70951017 --- /dev/null +++ b/docs/src/docPages/overview/contributing.md @@ -0,0 +1,11 @@ +# Contributing + +## What kind of contributions are welcome + +## What kind of contributions won’t be merged + +## How to send your first Pull Request + +## Code style + +## Testing \ No newline at end of file diff --git a/docs/src/docPages/general/installation.md b/docs/src/docPages/overview/installation.md similarity index 92% rename from docs/src/docPages/general/installation.md rename to docs/src/docPages/overview/installation.md index 06d78b73..7d792f68 100644 --- a/docs/src/docPages/general/installation.md +++ b/docs/src/docPages/overview/installation.md @@ -2,15 +2,15 @@ tiptap has a very modular package structure and is independent of any framework. Depending on what you want to do with tiptap there are a few different ways to install tiptap in your project. Choose the way that fits your project best. -## Vanilla JavaScript +## Plain JavaScript Use tiptap with vanilla JavaScript for a very lightweight and raw experience. If you feel like it, you can even use it to connect the tiptap core with other frameworks not mentioned here. ```bash -# Use npm +# With npm npm install @tiptap/core @tiptap/starter-kit -# Or: Use Yarn +# Or: With Yarn yarn add @tiptap/core @tiptap/starter-kit ``` @@ -18,11 +18,11 @@ Great, that should be enough to start. Here is the most essential code you need ```js import { Editor } from '@tiptap/core' -import extensions from '@tiptap/starter-kit' +import defaultExtensions from '@tiptap/starter-kit' new Editor({ element: document.getElementsByClassName('element'), - extensions: extensions(), + extensions: defaultExtensions(), content: '

    Your content.

    ', }) ``` @@ -32,10 +32,10 @@ new Editor({ To use tiptap with Vue.js (and tools that are based on Vue.js) install the Vue.js adapter in your project: ```bash -# Using npm +# With npm npm install @tiptap/vue @tiptap/vue-starter-kit -# Using Yarn +# Or: With Yarn yarn add @tiptap/vue @tiptap/vue-starter-kit ``` diff --git a/docs/src/docPages/overview/roadmap.md b/docs/src/docPages/overview/roadmap.md new file mode 100644 index 00000000..55bfc8ce --- /dev/null +++ b/docs/src/docPages/overview/roadmap.md @@ -0,0 +1,3 @@ +# Roadmap + +See https://github.com/ueberdosis/tiptap-next/projects/1 diff --git a/docs/src/docPages/overview/sponsoring.md b/docs/src/docPages/overview/sponsoring.md new file mode 100644 index 00000000..802fe27b --- /dev/null +++ b/docs/src/docPages/overview/sponsoring.md @@ -0,0 +1,3 @@ +# Sponsoring + +https://github.com/sponsors/ueberdosis diff --git a/docs/src/docPages/overview/upgrade-guide.md b/docs/src/docPages/overview/upgrade-guide.md new file mode 100644 index 00000000..0ec1b9f8 --- /dev/null +++ b/docs/src/docPages/overview/upgrade-guide.md @@ -0,0 +1,35 @@ +# Upgrade Guide + +## Reasons to upgrade to tiptap 2.x + +* TypeScript: auto complete, less bugs, generated API documentation +* Amazing documentation with 100+ pages +* Active maintenance, no more updates to 1.x +* Tons of new extensions planned +* Less bugs, tested code based + +## Upgrading from 1.x to 2.x +The new API will look pretty familiar too you, but there are a ton of changes though. To make the upgrade a little bit easier, here is everything you should do: + +### New document type +**We renamed the default `Document` type from `doc` to `document`.** To keep it like that, use your own implementation of the `Document` node or migrate the stored JSON to use the new name. + +```js +import Document from '@tiptap/extension-document' +const CustomDocument = Document.name('doc').create() + +new Editor({ + extensions: [ + CustomDocument(), + … + ] +}) +``` + +### New extension API + +In case you’ve built some custom extensions for your project, you’ll need to rewrite them to fit the new API. No worries, though, you can keep a lot of your work though. The schema, commands, keys, inputRules, pasteRules all work like they did before. It’s just different how you register them. + +```js +const CustomExtension = … +``` \ No newline at end of file diff --git a/docs/src/links.yaml b/docs/src/links.yaml index f883aa75..eef87bec 100644 --- a/docs/src/links.yaml +++ b/docs/src/links.yaml @@ -1,14 +1,20 @@ -- title: General +- title: Overview items: - title: Introduction link: / - title: Installation - link: /general/installation + link: /overview/installation - title: Upgrade Guide - link: /general/upgrade-guide + link: /overview/upgrade-guide + draft: true + - title: Contributing + link: /overview/contributing + draft: true + - title: Sponsoring + link: /overview/sponsoring draft: true - title: Roadmap - link: /general/roadmap + link: /overview/roadmap draft: true - title: Guide @@ -40,62 +46,62 @@ link: /examples/basic - title: Simple link: /examples/simple - - title: Menu Bubble - link: /examples/menu-bubble - draft: true - - title: Floating Menu - link: /examples/floating-menu - draft: true - - title: Links - link: /examples/links - draft: true - - title: Images - link: /examples/images - draft: true - - title: Hiding Menu Bar - link: /examples/hiding-menu-bar - draft: true - - title: Todo List - link: /examples/todo-list - draft: true - - title: Tables - link: /examples/tables - draft: true - - title: Search and Replace - link: /examples/search-and-replace - draft: true - - title: Suggestions - link: /examples/suggestions - draft: true + # - title: Menu Bubble + # link: /examples/menu-bubble + # draft: true + # - title: Floating Menu + # link: /examples/floating-menu + # draft: true + # - title: Links + # link: /examples/links + # draft: true + # - title: Images + # link: /examples/images + # draft: true + # - title: Hiding Menu Bar + # link: /examples/hiding-menu-bar + # draft: true + # - title: Todo List + # link: /examples/todo-list + # draft: true + # - title: Tables + # link: /examples/tables + # draft: true + # - title: Search and Replace + # link: /examples/search-and-replace + # draft: true + # - title: Suggestions + # link: /examples/suggestions + # draft: true - title: Markdown Shortcuts link: /examples/markdown-shortcuts - - title: Code Highlighting - link: /examples/code-highlighting - draft: true + # - title: Code Highlighting + # link: /examples/code-highlighting + # draft: true - title: History link: /examples/history - title: Read-Only link: /examples/read-only - - title: Embeds - link: /examples/embeds - draft: true - - title: Placeholder - link: /examples/placeholder - draft: true + # - title: Embeds + # link: /examples/embeds + # draft: true + # - title: Placeholder + # link: /examples/placeholder + # draft: true - title: Focus link: /examples/focus - - title: Collaboration - link: /examples/collaboration - draft: true - - title: Title - link: /examples/title - draft: true - - title: Trailing Paragraph - link: /examples/trailing-paragraph - draft: true - - title: Drag Handle - link: /examples/drag-handle - draft: true + # - title: Collaboration + # link: /examples/collaboration + # draft: true + # - title: Title + # link: /examples/title + # draft: true + # - title: Trailing Paragraph + # link: /examples/trailing-paragraph + # draft: true + # - title: Drag Handle + # link: /examples/drag-handle + # draft: true - title: Export HTML or JSON link: /examples/export-html-or-json @@ -117,18 +123,17 @@ draft: true - title: Code link: /api/extensions/code - - title: CodeBlock - link: /api/extensions/code-block - draft: true - - title: CodeBlockHighlight - link: /api/extensions/code-block-highlight - draft: true - - title: Collaboration - link: /api/extensions/collaboration - draft: true + # - title: CodeBlock + # link: /api/extensions/code-block + # draft: true + # - title: CodeBlockHighlight + # link: /api/extensions/code-block-highlight + # draft: true + # - title: Collaboration + # link: /api/extensions/collaboration + # draft: true - title: Document link: /api/extensions/document - draft: true - title: Hardbreak link: /api/extensions/hard-break draft: true @@ -148,39 +153,38 @@ - title: ListItem link: /api/extensions/list-item draft: true - - title: Mention - link: /api/extensions/mention - draft: true + # - title: Mention + # link: /api/extensions/mention + # draft: true - title: OrderedList link: /api/extensions/ordered-list draft: true - title: Paragraph link: /api/extensions/paragraph - draft: true - - title: Placeholder - link: /api/extensions/placeholder - draft: true + # - title: Placeholder + # link: /api/extensions/placeholder + # draft: true - title: Strike link: /api/extensions/strike draft: true + # - title: TableCell + # link: /api/extensions/table-cell + # draft: true + # - title: TableHeader + # link: /api/extensions/table-header + # draft: true + # - title: TableRow + # link: /api/extensions/table-row + # draft: true - title: Text link: /api/extensions/text draft: true - - title: TableCell - link: /api/extensions/table-cell - draft: true - - title: TableHeader - link: /api/extensions/table-header - draft: true - - title: TableRow - link: /api/extensions/table-row - draft: true - - title: TodoItem - link: /api/extensions/todo-item - draft: true - - title: TodoList - link: /api/extensions/todo-list - draft: true + # - title: TodoItem + # link: /api/extensions/todo-item + # draft: true + # - title: TodoList + # link: /api/extensions/todo-list + # draft: true - title: Underline link: /api/extensions/underline draft: true diff --git a/package.json b/package.json index 54fc4cfe..4fe036bf 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,8 @@ "build:docs": "yarn --cwd ./docs build", "build:packages": "yarn clean:packages && lerna exec --parallel -- microbundle --compress", "clean:packages": "rm -rf ./packages/*/dist", - "test": "cypress open --project tests", + "test:open": "cypress open --project tests", + "test": "cypress run --project tests", "reset": "clean:packages && rm -rf ./**/.cache && rm -rf ./**/node_modules && rm -rf ./yarn.lock && yarn install" }, "devDependencies": {