diff --git a/docs/src/demos/Examples/Formatting/index.vue b/docs/src/demos/Examples/Formatting/index.vue index 6dedb0e5..ce9c2a99 100644 --- a/docs/src/demos/Examples/Formatting/index.vue +++ b/docs/src/demos/Examples/Formatting/index.vue @@ -28,6 +28,9 @@ + @@ -70,22 +73,40 @@ export default { HardBreak(), ], content: ` -

Cyndi Lauper – Girls Just Want to Have Fun

-

I come home in the morning light - My mother says, “When you gonna live your life right?” - Oh mother dear we’re not the fortunate ones - And girls, they wanna have fun +

Girls Just Want to Have Fun (Cyndi Lauper)

+

I come home in the morning light
+ My mother says, “When you gonna live your life right?”
+ Oh mother dear we’re not the fortunate ones
+ And girls, they wanna have fun
Oh girls just want to have fun

-

The phone rings in the middle of the night - My father yells, "What you gonna do with your life?" - Oh daddy dear, you know you’re still number one - But girls, they wanna have fun +

The phone rings in the middle of the night
+ My father yells, "What you gonna do with your life?"
+ Oh daddy dear, you know you’re still number one
+ But girls, they wanna have fun
Oh girls just want to have

-

That’s all they really want +

That’s all they really want
+ Some fun
+ When the working day is done
+ Oh girls, they wanna have fun
+ Oh girls just wanna have fun
+ (girls, they wanna, wanna have fun, girls wanna have)

+

Some boys take a beautiful girl + And hide her away from the rest of the world + I want to be the one to walk in the sun + Oh girls, they wanna have fun + Oh girls just wanna have

+

That's all they really want Some fun When the working day is done Oh girls, they wanna have fun - Oh girls just wanna have fun (girls, they wanna, wanna have fun, girls wanna have)

+ Oh girls just want to have fun (girls, they wanna, wanna have fun, girls wanna have) + They just wanna, they just wanna (girls) + They just wanna, they just wanna, oh girl (girls just wanna have fun) + Girls just wanna have fun + They just wanna, they just wanna + They just wanna, they just wanna (girls) + They just wanna, they just wanna, oh girl (girls just wanna have fun) + Girls just want to have fun

`, }) }, diff --git a/docs/src/demos/Examples/MarkdownShortcuts/index.vue b/docs/src/demos/Examples/MarkdownShortcuts/index.vue index bfc9db5e..f67923d3 100644 --- a/docs/src/demos/Examples/MarkdownShortcuts/index.vue +++ b/docs/src/demos/Examples/MarkdownShortcuts/index.vue @@ -22,13 +22,13 @@ export default { this.editor = new Editor({ content: `

- Start a new line and type # followed by a space to get a heading. Try #, ##, ###, ####, #####, ###### for different levels. + Markdown shortcuts make it easy to format the text while typing.

- Those conventions are called input rules in tiptap. Some of them are enabled by default. Try > for blockquotes, *, - or + for bullet lists, or \`foobar\` to highlight code. + To test that, start a new line and type # followed by a space to get a heading. Try #, ##, ###, ####, #####, ###### for different levels.

- You can add your own input rules to your Nodes and Marks or even to the default ones. + Those conventions are called input rules in tiptap. Some of them are enabled by default. Try > for blockquotes, *, - or + for bullet lists, or \`foobar\` to highlight code. You can add your own input rules to existing extensions, and to your custom nodes and marks.

`, extensions: defaultExtensions(), diff --git a/docs/src/demos/Extensions/Focus/index.spec.js b/docs/src/demos/Extensions/Focus/index.spec.js new file mode 100644 index 00000000..029eb69e --- /dev/null +++ b/docs/src/demos/Extensions/Focus/index.spec.js @@ -0,0 +1,9 @@ +context('/examples/focus', () => { + before(() => { + cy.visit('/examples/focus') + }) + + it('should have class', () => { + cy.get('.ProseMirror p:first').should('have.class', 'has-focus') + }) +}) diff --git a/docs/src/demos/Extensions/Focus/index.vue b/docs/src/demos/Extensions/Focus/index.vue new file mode 100644 index 00000000..b4c7f0f3 --- /dev/null +++ b/docs/src/demos/Extensions/Focus/index.vue @@ -0,0 +1,59 @@ + + + + + diff --git a/docs/src/demos/Extensions/Bold/index.spec.js b/docs/src/demos/Marks/Bold/index.spec.js similarity index 100% rename from docs/src/demos/Extensions/Bold/index.spec.js rename to docs/src/demos/Marks/Bold/index.spec.js diff --git a/docs/src/demos/Extensions/Bold/index.vue b/docs/src/demos/Marks/Bold/index.vue similarity index 100% rename from docs/src/demos/Extensions/Bold/index.vue rename to docs/src/demos/Marks/Bold/index.vue diff --git a/docs/src/demos/Extensions/Code/index.spec.js b/docs/src/demos/Marks/Code/index.spec.js similarity index 100% rename from docs/src/demos/Extensions/Code/index.spec.js rename to docs/src/demos/Marks/Code/index.spec.js diff --git a/docs/src/demos/Extensions/Code/index.vue b/docs/src/demos/Marks/Code/index.vue similarity index 100% rename from docs/src/demos/Extensions/Code/index.vue rename to docs/src/demos/Marks/Code/index.vue diff --git a/docs/src/demos/Extensions/Italic/index.spec.js b/docs/src/demos/Marks/Italic/index.spec.js similarity index 100% rename from docs/src/demos/Extensions/Italic/index.spec.js rename to docs/src/demos/Marks/Italic/index.spec.js diff --git a/docs/src/demos/Extensions/Italic/index.vue b/docs/src/demos/Marks/Italic/index.vue similarity index 100% rename from docs/src/demos/Extensions/Italic/index.vue rename to docs/src/demos/Marks/Italic/index.vue diff --git a/docs/src/demos/Extensions/Link/index.spec.js b/docs/src/demos/Marks/Link/index.spec.js similarity index 100% rename from docs/src/demos/Extensions/Link/index.spec.js rename to docs/src/demos/Marks/Link/index.spec.js diff --git a/docs/src/demos/Extensions/Link/index.vue b/docs/src/demos/Marks/Link/index.vue similarity index 100% rename from docs/src/demos/Extensions/Link/index.vue rename to docs/src/demos/Marks/Link/index.vue diff --git a/docs/src/demos/Extensions/Strike/index.spec.js b/docs/src/demos/Marks/Strike/index.spec.js similarity index 100% rename from docs/src/demos/Extensions/Strike/index.spec.js rename to docs/src/demos/Marks/Strike/index.spec.js diff --git a/docs/src/demos/Extensions/Strike/index.vue b/docs/src/demos/Marks/Strike/index.vue similarity index 100% rename from docs/src/demos/Extensions/Strike/index.vue rename to docs/src/demos/Marks/Strike/index.vue diff --git a/docs/src/demos/Extensions/Underline/index.spec.js b/docs/src/demos/Marks/Underline/index.spec.js similarity index 100% rename from docs/src/demos/Extensions/Underline/index.spec.js rename to docs/src/demos/Marks/Underline/index.spec.js diff --git a/docs/src/demos/Extensions/Underline/index.vue b/docs/src/demos/Marks/Underline/index.vue similarity index 100% rename from docs/src/demos/Extensions/Underline/index.vue rename to docs/src/demos/Marks/Underline/index.vue diff --git a/docs/src/demos/Extensions/Blockquote/index.spec.js b/docs/src/demos/Nodes/Blockquote/index.spec.js similarity index 100% rename from docs/src/demos/Extensions/Blockquote/index.spec.js rename to docs/src/demos/Nodes/Blockquote/index.spec.js diff --git a/docs/src/demos/Extensions/Blockquote/index.vue b/docs/src/demos/Nodes/Blockquote/index.vue similarity index 100% rename from docs/src/demos/Extensions/Blockquote/index.vue rename to docs/src/demos/Nodes/Blockquote/index.vue diff --git a/docs/src/demos/Extensions/BulletList/index.spec.js b/docs/src/demos/Nodes/BulletList/index.spec.js similarity index 100% rename from docs/src/demos/Extensions/BulletList/index.spec.js rename to docs/src/demos/Nodes/BulletList/index.spec.js diff --git a/docs/src/demos/Extensions/BulletList/index.vue b/docs/src/demos/Nodes/BulletList/index.vue similarity index 100% rename from docs/src/demos/Extensions/BulletList/index.vue rename to docs/src/demos/Nodes/BulletList/index.vue diff --git a/docs/src/demos/Extensions/CodeBlock/index.spec.js b/docs/src/demos/Nodes/CodeBlock/index.spec.js similarity index 100% rename from docs/src/demos/Extensions/CodeBlock/index.spec.js rename to docs/src/demos/Nodes/CodeBlock/index.spec.js diff --git a/docs/src/demos/Extensions/CodeBlock/index.vue b/docs/src/demos/Nodes/CodeBlock/index.vue similarity index 100% rename from docs/src/demos/Extensions/CodeBlock/index.vue rename to docs/src/demos/Nodes/CodeBlock/index.vue diff --git a/docs/src/demos/Extensions/Document/index.spec.js b/docs/src/demos/Nodes/Document/index.spec.js similarity index 100% rename from docs/src/demos/Extensions/Document/index.spec.js rename to docs/src/demos/Nodes/Document/index.spec.js diff --git a/docs/src/demos/Extensions/Document/index.vue b/docs/src/demos/Nodes/Document/index.vue similarity index 100% rename from docs/src/demos/Extensions/Document/index.vue rename to docs/src/demos/Nodes/Document/index.vue diff --git a/docs/src/demos/Extensions/HardBreak/index.spec.js b/docs/src/demos/Nodes/HardBreak/index.spec.js similarity index 100% rename from docs/src/demos/Extensions/HardBreak/index.spec.js rename to docs/src/demos/Nodes/HardBreak/index.spec.js diff --git a/docs/src/demos/Extensions/HardBreak/index.vue b/docs/src/demos/Nodes/HardBreak/index.vue similarity index 100% rename from docs/src/demos/Extensions/HardBreak/index.vue rename to docs/src/demos/Nodes/HardBreak/index.vue diff --git a/docs/src/demos/Extensions/Heading/index.spec.js b/docs/src/demos/Nodes/Heading/index.spec.js similarity index 100% rename from docs/src/demos/Extensions/Heading/index.spec.js rename to docs/src/demos/Nodes/Heading/index.spec.js diff --git a/docs/src/demos/Extensions/Heading/index.vue b/docs/src/demos/Nodes/Heading/index.vue similarity index 100% rename from docs/src/demos/Extensions/Heading/index.vue rename to docs/src/demos/Nodes/Heading/index.vue diff --git a/docs/src/demos/Extensions/HorizontalRule/index.spec.js b/docs/src/demos/Nodes/HorizontalRule/index.spec.js similarity index 100% rename from docs/src/demos/Extensions/HorizontalRule/index.spec.js rename to docs/src/demos/Nodes/HorizontalRule/index.spec.js diff --git a/docs/src/demos/Extensions/HorizontalRule/index.vue b/docs/src/demos/Nodes/HorizontalRule/index.vue similarity index 100% rename from docs/src/demos/Extensions/HorizontalRule/index.vue rename to docs/src/demos/Nodes/HorizontalRule/index.vue diff --git a/docs/src/demos/Nodes/Image/index.spec.js b/docs/src/demos/Nodes/Image/index.spec.js new file mode 100644 index 00000000..5740e17c --- /dev/null +++ b/docs/src/demos/Nodes/Image/index.spec.js @@ -0,0 +1,27 @@ +context('/api/nodes/image', () => { + before(() => { + cy.visit('/api/nodes/image') + }) + + beforeEach(() => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.setContent('

Example Text

') + editor.selectAll() + }) + }) + + it('should add an img tag with the correct URL', () => { + cy.window().then(win => { + cy.stub(win, 'prompt').returns('foobar.png') + + cy.get('.demo__preview button:first') + .click() + + cy.window().its('prompt').should('be.called') + + cy.get('.ProseMirror') + .find('img') + .should('have.attr', 'src', 'foobar.png') + }) + }) +}) diff --git a/docs/src/demos/Extensions/Image/index.vue b/docs/src/demos/Nodes/Image/index.vue similarity index 100% rename from docs/src/demos/Extensions/Image/index.vue rename to docs/src/demos/Nodes/Image/index.vue diff --git a/docs/src/demos/Extensions/ListItem/index.spec.js b/docs/src/demos/Nodes/ListItem/index.spec.js similarity index 100% rename from docs/src/demos/Extensions/ListItem/index.spec.js rename to docs/src/demos/Nodes/ListItem/index.spec.js diff --git a/docs/src/demos/Extensions/ListItem/index.vue b/docs/src/demos/Nodes/ListItem/index.vue similarity index 100% rename from docs/src/demos/Extensions/ListItem/index.vue rename to docs/src/demos/Nodes/ListItem/index.vue diff --git a/docs/src/demos/Extensions/OrderedList/index.spec.js b/docs/src/demos/Nodes/OrderedList/index.spec.js similarity index 100% rename from docs/src/demos/Extensions/OrderedList/index.spec.js rename to docs/src/demos/Nodes/OrderedList/index.spec.js diff --git a/docs/src/demos/Extensions/OrderedList/index.vue b/docs/src/demos/Nodes/OrderedList/index.vue similarity index 100% rename from docs/src/demos/Extensions/OrderedList/index.vue rename to docs/src/demos/Nodes/OrderedList/index.vue diff --git a/docs/src/demos/Extensions/Paragraph/index.spec.js b/docs/src/demos/Nodes/Paragraph/index.spec.js similarity index 100% rename from docs/src/demos/Extensions/Paragraph/index.spec.js rename to docs/src/demos/Nodes/Paragraph/index.spec.js diff --git a/docs/src/demos/Extensions/Paragraph/index.vue b/docs/src/demos/Nodes/Paragraph/index.vue similarity index 100% rename from docs/src/demos/Extensions/Paragraph/index.vue rename to docs/src/demos/Nodes/Paragraph/index.vue diff --git a/docs/src/demos/Nodes/TaskList/index.spec.js b/docs/src/demos/Nodes/TaskList/index.spec.js new file mode 100644 index 00000000..6a572062 --- /dev/null +++ b/docs/src/demos/Nodes/TaskList/index.spec.js @@ -0,0 +1,119 @@ +context('/api/nodes/task-list', () => { + before(() => { + cy.visit('/api/nodes/task-list') + }) + + beforeEach(() => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.setContent('

Example Text

') + editor.selectAll() + }) + }) + + it('should parse unordered lists correctly', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.setContent('') + expect(editor.getHTML()).to.eq('') + }) + }) + + it('should parse unordered lists without paragraphs correctly', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.setContent('') + expect(editor.getHTML()).to.eq('') + }) + }) + + it('the button should make the selected line a task list item', () => { + cy.get('.ProseMirror ul') + .should('not.exist') + + cy.get('.ProseMirror ul li') + .should('not.exist') + + cy.get('.demo__preview button:nth-child(1)') + .click() + + cy.get('.ProseMirror') + .find('ul[data-type="task_list"]') + .should('contain', 'Example Text') + + cy.get('.ProseMirror') + .find('ul[data-type="task_list"] li') + .should('contain', 'Example Text') + }) + + it('the button should toggle the task list', () => { + cy.get('.ProseMirror ul') + .should('not.exist') + + cy.get('.demo__preview button:nth-child(1)') + .click() + + cy.get('.ProseMirror') + .find('ul[data-type="task_list"]') + .should('contain', 'Example Text') + + cy.get('.demo__preview button:nth-child(1)') + .click() + + cy.get('.ProseMirror ul') + .should('not.exist') + }) + + it('should leave the list with double enter', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.clearContent() + }) + + cy.get('.ProseMirror') + .type('[ ] List Item 1{enter}{enter}Paragraph') + + cy.get('.ProseMirror') + .find('li') + .its('length') + .should('eq', 1) + + cy.get('.ProseMirror') + .find('p') + .should('contain', 'Paragraph') + }) + + it('should make a task list from square brackets', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.clearContent() + }) + + cy.get('.ProseMirror') + .type('[ ] List Item 1{enter}List Item 2') + + cy.get('.ProseMirror') + .find('li:nth-child(1)') + .should('contain', 'List Item 1') + .should('have.attr', 'data-checked', 'false') + + cy.get('.ProseMirror') + .find('li:nth-child(2)') + .should('contain', 'List Item 2') + .should('have.attr', 'data-checked', 'false') + }) + + it.only('should make a task list from checked square brackets', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.clearContent() + }) + + cy.get('.ProseMirror') + .type('[x] List Item 1{enter}List Item 2') + + cy.get('.ProseMirror') + .find('li:nth-child(1)') + .should('contain', 'List Item 1') + .should('have.attr', 'data-checked', 'true') + + cy.get('.ProseMirror') + .find('li:nth-child(2)') + .should('contain', 'List Item 2') + .should('have.attr', 'data-checked', 'true') + }) +}) diff --git a/docs/src/demos/Extensions/TaskList/index.vue b/docs/src/demos/Nodes/TaskList/index.vue similarity index 100% rename from docs/src/demos/Extensions/TaskList/index.vue rename to docs/src/demos/Nodes/TaskList/index.vue diff --git a/docs/src/demos/Extensions/Text/index.spec.js b/docs/src/demos/Nodes/Text/index.spec.js similarity index 100% rename from docs/src/demos/Extensions/Text/index.spec.js rename to docs/src/demos/Nodes/Text/index.spec.js diff --git a/docs/src/demos/Extensions/Text/index.vue b/docs/src/demos/Nodes/Text/index.vue similarity index 100% rename from docs/src/demos/Extensions/Text/index.vue rename to docs/src/demos/Nodes/Text/index.vue diff --git a/docs/src/docPages/api/commands.md b/docs/src/docPages/api/commands.md index ff158b86..8956e002 100644 --- a/docs/src/docPages/api/commands.md +++ b/docs/src/docPages/api/commands.md @@ -67,4 +67,4 @@ Have a look at all of the core commands listed below. They should give you a goo | .selectAll() | Select the whole document. | ### Extensions -All extension can add additional commands (and most do), check out the specific [documentation for the provided extensions](/api/extensions) to learn more about that. Of course, you can [add your custom extensions](/guide/build-custom-extensions) with custom commands aswell. +All extension can add additional commands (and most do), check out the specific [documentation for the provided extensions](/api/extensions), [nodes](/api/nodes), and [marks](/api/marks) to learn more about that. Of course, you can [add your custom extensions](/guide/build-custom-extensions) with custom commands aswell. diff --git a/docs/src/docPages/api/extensions.md b/docs/src/docPages/api/extensions.md index 6f4ca1cf..9649f955 100644 --- a/docs/src/docPages/api/extensions.md +++ b/docs/src/docPages/api/extensions.md @@ -5,51 +5,40 @@ ## Introduction Extensions are the way to add functionality to tiptap. By default tiptap comes bare, without any of them, but we have a long list of extensions that are ready to be used with tiptap. -## A minimalist set of extensions -You’ll need at least three extensions: `Document`, `Paragraph` and `Text`. See [an example of a tiptap version for minimalists](/examples/minimalist). - -## Default extensions -You don’t have to use it, but we prepared a `@tiptap/vue-starter-kit` which includes the most common extensions. See [how you can use the `defaultExtensions()`](/examples/basic). - -## List of supported extensions +## List of provided extensions | Title | Default Extension | Source Code | | ----------------------------------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------------ | -| [Blockquote](/api/extensions/blockquote) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-blockquote/) | -| [Bold](/api/extensions/bold) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bold/) | -| [BulletList](/api/extensions/bullet-list) | Yes | [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/) | | [Collaboration](/api/extensions/collaboration) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-collaboration/) | | [CollaborationCursor](/api/extensions/collaboration-cursor) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-collaboration-cursor/) | -| [Document](/api/extensions/document) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-document/) | -| [HardBreak](/api/extensions/hard-break) | Yes | [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/) | -| [History](/api/extensions/history) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-history/) | -| [HorizontalRule](/api/extensions/horizontal-rule) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-horizontal-rule/) | -| [Image](/api/extensions/image) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-image/) | -| [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) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-list-item/) | -| [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/) | -| [Strike](/api/extensions/strike) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-strike/) | -| [Text](/api/extensions/text) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text/) | +| [Dropcursor](/api/extensions/dropcursor) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-dropcursor/) | +| [Focus](/api/extensions/focus) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-focus/) | +| [Gapcursor](/api/extensions/gapcursor) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-gapcursor/) | +| [History](/api/extensions/history) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-history/) | | [TextAlign](/api/extensions/text-align) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text-align/) | -| [Underline](/api/extensions/underline) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-underline/) | +| [Typography](/api/extensions/typography) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-typography/) | - - - - - - - - +You don’t have to use it, but we prepared a `@tiptap/vue-starter-kit` which includes the most common extensions. Learn [how you can use the `defaultExtensions()`](/examples/basic). -## Community extensions -:::warning Work in Progress -This section is not ready yet. Meanwhile, [search through GitHub issues](https://github.com/ueberdosis/tiptap/issues) to find code snippets. -::: +## Create a new extension +You’re free to create your own extensions for tiptap. Here is the boilerplate code that’s need to create and register your own extension: -## Your custom extensions -Didn’t find what you’re looking for? No worries, [you can build your own extensions](/guide/build-custom-extensions). +```js +import { createExtension } from '@tiptap/core' + +const CustomExtension = createExtension({ + // Your code here +}) + +const editor = new Editor({ + extensions: [ + // Register your custom extension with the editor. + CustomExtension(), + // … and don’t forget all other extensions. + Document(), + Paragraph(), + Text(), + // … + ], +``` + +Learn [more about custom extensions in our guide](/guide/build-custom-extensions). diff --git a/docs/src/docPages/api/extensions/collaboration-cursor.md b/docs/src/docPages/api/extensions/collaboration-cursor.md index 05fe4c05..8987916d 100644 --- a/docs/src/docPages/api/extensions/collaboration-cursor.md +++ b/docs/src/docPages/api/extensions/collaboration-cursor.md @@ -20,10 +20,9 @@ yarn add @tiptap/extension-collaboration-cursor | type | | | | ## Commands -*None* - -## Keyboard shortcuts -*None* +| Command | Parameters | Description | +| ------- | ------------- | ------------------------------------------------------------------------ | +| user | name
color | The name of the current user.
The color of the current user’s cursor. | ## Source code [packages/extension-collaboration-cursor/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-collaboration-cursor/) diff --git a/docs/src/docPages/api/extensions/focus.md b/docs/src/docPages/api/extensions/focus.md index c6f50867..6eacca5e 100644 --- a/docs/src/docPages/api/extensions/focus.md +++ b/docs/src/docPages/api/extensions/focus.md @@ -10,7 +10,10 @@ yarn add @tiptap/extension-focus ``` ## Settings -*None* +| Option | Type | Default | Description | +| --------- | ------- | --------- | ------------------------------------------------------ | +| className | string | has-focus | The class that is applied to the focused element. | +| nested | boolean | true | When enabled nested elements get the focus class, too. | ## Commands *None* @@ -22,4 +25,4 @@ yarn add @tiptap/extension-focus [packages/extension-focus/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-focus/) ## Usage - + diff --git a/docs/src/docPages/api/extensions/history.md b/docs/src/docPages/api/extensions/history.md index c60438fd..b4fa23a6 100644 --- a/docs/src/docPages/api/extensions/history.md +++ b/docs/src/docPages/api/extensions/history.md @@ -17,7 +17,7 @@ yarn add @tiptap/extension-history | newGroupDelay | number | 500 | The delay between changes after which a new group should be started (in milliseconds). When changes aren’t adjacent, a new group is always started. | ## Commands -| Command | Options | Description | +| Command | Parameters | Description | | ------- | ------- | --------------------- | | undo | — | Undo the last change. | | redo | — | Redo the last change. | diff --git a/docs/src/docPages/api/extensions/text-align.md b/docs/src/docPages/api/extensions/text-align.md index dad00adf..3c6fcf8f 100644 --- a/docs/src/docPages/api/extensions/text-align.md +++ b/docs/src/docPages/api/extensions/text-align.md @@ -9,6 +9,15 @@ npm install @tiptap/extension-text-align yarn add @tiptap/extension-text-align ``` +## Settings +*None* + +## Commands +*None* + +## Keyboard shortcuts +*None* + ## Source code [packages/extension-text-align/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text-align/) diff --git a/docs/src/docPages/api/marks.md b/docs/src/docPages/api/marks.md index 80557d6c..31acae58 100644 --- a/docs/src/docPages/api/marks.md +++ b/docs/src/docPages/api/marks.md @@ -3,3 +3,13 @@ ## toc ## Introduction + +## List of supported marks +| Title | Default Extension | Source Code | +| --------------------------------- | ----------------- | ------------------------------------------------------------------------------------------- | +| [Bold](/api/marks/bold) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bold/) | +| [Code](/api/marks/code) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code/) | +| [Italic](/api/marks/italic) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-italic/) | +| [Link](/api/marks/link) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-link/) | +| [Strike](/api/marks/strike) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-strike/) | +| [Underline](/api/marks/underline) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-underline/) | diff --git a/docs/src/docPages/api/marks/bold.md b/docs/src/docPages/api/marks/bold.md index d9b14f65..d991247c 100644 --- a/docs/src/docPages/api/marks/bold.md +++ b/docs/src/docPages/api/marks/bold.md @@ -22,7 +22,7 @@ yarn add @tiptap/extension-bold | class | string | – | Add a custom class to the rendered HTML tag. | ## Commands -| Command | Options | Description | +| Command | Parameters | Description | | ------- | ------- | --------------- | | bold | — | Mark text bold. | @@ -34,4 +34,4 @@ yarn add @tiptap/extension-bold [packages/extension-bold/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bold/) ## Usage - + diff --git a/docs/src/docPages/api/marks/code.md b/docs/src/docPages/api/marks/code.md index ac5b1148..e6f34272 100644 --- a/docs/src/docPages/api/marks/code.md +++ b/docs/src/docPages/api/marks/code.md @@ -18,7 +18,7 @@ yarn add @tiptap/extension-code | class | string | – | Add a custom class to the rendered HTML tag. | ## Commands -| Command | Options | Description | +| Command | Parameters | Description | | ------- | ------- | ------------------------- | | code | — | Mark text as inline code. | @@ -29,4 +29,4 @@ yarn add @tiptap/extension-code [packages/extension-code/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code/) ## Usage - + diff --git a/docs/src/docPages/api/marks/italic.md b/docs/src/docPages/api/marks/italic.md index d9e55867..40717304 100644 --- a/docs/src/docPages/api/marks/italic.md +++ b/docs/src/docPages/api/marks/italic.md @@ -22,7 +22,7 @@ yarn add @tiptap/extension-italic | class | string | – | Add a custom class to the rendered HTML tag. | ## Commands -| Command | Options | Description | +| Command | Parameters | Description | | ------- | ------- | ----------------- | | italic | — | Mark text italic. | @@ -34,4 +34,4 @@ yarn add @tiptap/extension-italic [packages/extension-italic/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-italic/) ## Usage - + diff --git a/docs/src/docPages/api/marks/link.md b/docs/src/docPages/api/marks/link.md index 779a6377..30ce4b20 100644 --- a/docs/src/docPages/api/marks/link.md +++ b/docs/src/docPages/api/marks/link.md @@ -23,17 +23,17 @@ yarn add @tiptap/extension-link | target | string | _blank | Set the default `target` of links. | ## Commands -| Command | Options | Description | +| Command | Parameters | Description | | ------- | -------------- | ----------------------------------------------------------- | | link | href
target | Link the selected text. Removes a link, if `href` is empty. | ## Keyboard shortcuts :::warning Doesn’t have a keyboard shortcut -This extension doesn’t bind a specific keyboard shortcut. You would probably open your UI on `Mod-k` though. +This extension doesn’t bind a specific keyboard shortcut. You would probably open your custom UI on `Mod-k` though. ::: ## Source code [packages/extension-link/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-link/) ## Usage - + diff --git a/docs/src/docPages/api/marks/strike.md b/docs/src/docPages/api/marks/strike.md index bb6660db..16a1b780 100644 --- a/docs/src/docPages/api/marks/strike.md +++ b/docs/src/docPages/api/marks/strike.md @@ -22,7 +22,7 @@ yarn add @tiptap/extension-strike | class | string | – | Add a custom class to the rendered HTML tag. | ## Commands -| Command | Options | Description | +| Command | Parameters | Description | | ------- | ------- | --------------------------- | | strike | — | Mark text as strikethrough. | @@ -34,4 +34,4 @@ yarn add @tiptap/extension-strike [packages/extension-strike/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-strike/) ## Usage - + diff --git a/docs/src/docPages/api/marks/underline.md b/docs/src/docPages/api/marks/underline.md index fb478db3..2f5045a7 100644 --- a/docs/src/docPages/api/marks/underline.md +++ b/docs/src/docPages/api/marks/underline.md @@ -22,9 +22,9 @@ yarn add @tiptap/extension-underline | class | string | – | Add a custom class to the rendered HTML tag. | ## Commands -| Command | Options | Description | -| --------- | ------- | ------------------------ | -| underline | — | Mark text as underlined. | +| Command | Parameters | Description | +| --------- | ---------- | ------------------------ | +| underline | — | Mark text as underlined. | ## Keyboard shortcuts * Windows/Linux: `Control` `U` @@ -34,4 +34,4 @@ yarn add @tiptap/extension-underline [packages/extension-underline/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-underline/) ## Usage - + diff --git a/docs/src/docPages/api/nodes.md b/docs/src/docPages/api/nodes.md index ee9fa386..f7c12b50 100644 --- a/docs/src/docPages/api/nodes.md +++ b/docs/src/docPages/api/nodes.md @@ -3,3 +3,21 @@ ## toc ## Introduction + +## List of supported nodes +| Title | Default Extension | Source Code | +| -------------------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------- | +| [Blockquote](/api/nodes/blockquote) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-blockquote/) | +| [BulletList](/api/nodes/bullet-list) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bullet-list/) | +| [CodeBlock](/api/nodes/code-block) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code-block/) | +| [Document](/api/nodes/document) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-document/) | +| [HardBreak](/api/nodes/hard-break) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-hard-break/) | +| [Heading](/api/nodes/heading) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-heading/) | +| [HorizontalRule](/api/nodes/horizontal-rule) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-horizontal-rule/) | +| [Image](/api/nodes/image) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-image/) | +| [ListItem](/api/nodes/list-item) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-list-item/) | +| [OrderedList](/api/nodes/ordered-list) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-ordered-list/) | +| [Paragraph](/api/nodes/paragraph) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-paragraph/) | +| [TaskItem](/api/nodes/task-item) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-item/) | +| [TaskList](/api/nodes/task-list) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-list/) | +| [Text](/api/nodes/text) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text/) | diff --git a/docs/src/docPages/api/nodes/blockquote.md b/docs/src/docPages/api/nodes/blockquote.md index dbd5038e..66de2089 100644 --- a/docs/src/docPages/api/nodes/blockquote.md +++ b/docs/src/docPages/api/nodes/blockquote.md @@ -19,9 +19,9 @@ yarn add @tiptap/extension-blockquote | class | string | – | Add a custom class to the rendered HTML tag. | ## Commands -| Command | Options | Description | -| ---------- | ------- | ----------------------------- | -| blockquote | — | Wrap content in a blockquote. | +| Command | Parameters | Description | +| ---------- | ---------- | ----------------------------- | +| blockquote | — | Wrap content in a blockquote. | ## Keyboard shortcuts * Windows/Linux: `Control` `Shift` `9` @@ -31,4 +31,4 @@ yarn add @tiptap/extension-blockquote [packages/extension-blockquote/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-blockquote/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/bullet-list.md b/docs/src/docPages/api/nodes/bullet-list.md index 2535a9c1..602d7219 100644 --- a/docs/src/docPages/api/nodes/bullet-list.md +++ b/docs/src/docPages/api/nodes/bullet-list.md @@ -1,11 +1,11 @@ # BulletList -This extension enables you to use bullet lists in the editor. They are rendered as `
    ` HTML tags, +This extension enables you to use bullet lists in the editor. They are rendered as `
      ` HTML tags. Type * , -  or +  at the beginning of a new line and it will magically transform to a bullet list. ## Installation ::: warning Use with ListItem -The `BulletList` extension is intended to be used with the [`ListItem`](/api/extensions/list-item) extension. Make sure to import that one too, otherwise you’ll get a SyntaxError. +This extension requires the [`ListItem`](/api/nodes/list-item) extension. ::: ```bash @@ -22,9 +22,9 @@ yarn add @tiptap/extension-bullet-list @tiptap/extension-list-item | class | string | – | Add a custom class to the rendered HTML tag. | ## Commands -| Command | Options | Description | -| ----------- | ------- | --------------------- | -| bullet_list | — | Toggle a bullet list. | +| Command | Parameters | Description | +| ----------- | ---------- | --------------------- | +| bullet_list | — | Toggle a bullet list. | ## Keyboard shortcuts * `Control` `Shift` `8` @@ -33,4 +33,4 @@ yarn add @tiptap/extension-bullet-list @tiptap/extension-list-item [packages/extension-bullet-list/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bullet-list/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/code-block.md b/docs/src/docPages/api/nodes/code-block.md index 67d95523..1dce417e 100644 --- a/docs/src/docPages/api/nodes/code-block.md +++ b/docs/src/docPages/api/nodes/code-block.md @@ -23,9 +23,9 @@ yarn add @tiptap/extension-code-block | languageClassPrefix | string | language- | Adds a prefix to language classes that are applied to code tags. | ## Commands -| Command | Options | Description | -| --------- | ------- | ----------------------------- | -| codeBlock | — | Wrap content in a code block. | +| Command | Parameters | Description | +| --------- | ---------- | ----------------------------- | +| codeBlock | — | Wrap content in a code block. | ## Keyboard shortcuts * Windows/Linux: `Control` `Shift` `C` @@ -35,4 +35,4 @@ yarn add @tiptap/extension-code-block [packages/extension-code-block/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code-block/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/document.md b/docs/src/docPages/api/nodes/document.md index 6e269e61..e887bed8 100644 --- a/docs/src/docPages/api/nodes/document.md +++ b/docs/src/docPages/api/nodes/document.md @@ -20,4 +20,4 @@ yarn add @tiptap/extension-document [packages/extension-document/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-document/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/hard-break.md b/docs/src/docPages/api/nodes/hard-break.md index 0f38111c..83fc2a99 100644 --- a/docs/src/docPages/api/nodes/hard-break.md +++ b/docs/src/docPages/api/nodes/hard-break.md @@ -10,13 +10,10 @@ npm install @tiptap/extension-hard-break yarn add @tiptap/extension-hard-break ``` -## Settings -*None* - ## Commands -| Command | Options | Description | -| --------- | ------- | ----------------- | -| hardBreak | — | Add a line break. | +| Command | Parameters | Description | +| --------- | ---------- | ----------------- | +| hardBreak | — | Add a line break. | ## Keyboard shortcuts * `Shift` `Enter` @@ -27,4 +24,4 @@ yarn add @tiptap/extension-hard-break [packages/extension-hard-break/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-hard-break/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/heading.md b/docs/src/docPages/api/nodes/heading.md index efca2149..652d0630 100644 --- a/docs/src/docPages/api/nodes/heading.md +++ b/docs/src/docPages/api/nodes/heading.md @@ -19,9 +19,9 @@ yarn add @tiptap/extension-heading | levels | Array | [1, 2, 3, 4, 5, 6] | Specifies which heading levels are supported. | ## Commands -| Command | Options | Description | -| ------- | ------- | ----------------------- | -| heading | level | Creates a heading node. | +| Command | Parameters | Description | +| ------- | ---------- | ------------------------------------------------ | +| heading | level | Creates a heading node with the specified level. | ## Keyboard shortcuts * Windows/Linux: `Control` `Alt` `1-6` @@ -31,4 +31,4 @@ yarn add @tiptap/extension-heading [packages/extension-heading/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-heading/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/horizontal-rule.md b/docs/src/docPages/api/nodes/horizontal-rule.md index 1de9d59d..81b6c0e7 100644 --- a/docs/src/docPages/api/nodes/horizontal-rule.md +++ b/docs/src/docPages/api/nodes/horizontal-rule.md @@ -18,9 +18,9 @@ yarn add @tiptap/extension-horizontal-rule | class | string | – | Add a custom class to the rendered HTML tag. | ## Commands -| Command | Options | Description | -| --------------- | ------- | ------------------------- | -| horizontalRule | — | Create a horizontal rule. | +| Command | Parameters | Description | +| -------------- | ---------- | ------------------------- | +| horizontalRule | — | Create a horizontal rule. | ## Keyboard shortcuts *None* @@ -29,4 +29,4 @@ yarn add @tiptap/extension-horizontal-rule [packages/extension-horizontal-rule/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-horizontal-rule/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/image.md b/docs/src/docPages/api/nodes/image.md index 1c3c9132..a4e93205 100644 --- a/docs/src/docPages/api/nodes/image.md +++ b/docs/src/docPages/api/nodes/image.md @@ -1,4 +1,9 @@ # Image +Use this extension to render `` HTML tags. By default, those images are blocks. If you want to render images in line with text set the `inline` option to `true`. + +:::warning Restrictions +This extension does only the rendering of images. It doesn’t upload images to your server, that’s a whole different story. +::: ## Installation ```bash @@ -10,12 +15,12 @@ yarn add @tiptap/extension-image ``` ## Settings -| Option | Type | Default | Description | -| ------ | ------- | ------- | ------------------------ | -| inline | boolean | false | Renders the node inline. | +| Option | Type | Default | Description | +| ------ | ------- | ------- | ------------------------------ | +| inline | boolean | false | Renders the image node inline. | ## Source code [packages/extension-image/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-image/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/list-item.md b/docs/src/docPages/api/nodes/list-item.md index 8d6e816e..3fbc1f42 100644 --- a/docs/src/docPages/api/nodes/list-item.md +++ b/docs/src/docPages/api/nodes/list-item.md @@ -2,8 +2,8 @@ The ListItem extension adds support for the `
    • ` HTML tag. It’s used for bullet lists and ordered lists and can’t really be used without them. ## Installation -::: warning Restrictions -This extension is intended to be used with the [`BulletList`](/api/extensions/bullet-list) or [`OrderedList`](/api/extensions/ordered-list) extension. It doesn’t work without at least using one of them. +::: warning Use with BulletList and/or OrderedList +This extension requires the [`BulletList`](/api/nodes/bullet-list) or [`OrderedList`](/api/nodes/ordered-list) extension. ::: ```bash @@ -19,9 +19,6 @@ yarn add @tiptap/extension-list-item | ------ | ------ | ------- | -------------------------------------------- | | class | string | – | Add a custom class to the rendered HTML tag. | -## Commands -*None* - ## Keyboard shortcuts * New list item: `Enter` * Sink a list item: `Tab` @@ -31,4 +28,4 @@ yarn add @tiptap/extension-list-item [packages/extension-list-item/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-list-item/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/ordered-list.md b/docs/src/docPages/api/nodes/ordered-list.md index c6235978..38dc26e7 100644 --- a/docs/src/docPages/api/nodes/ordered-list.md +++ b/docs/src/docPages/api/nodes/ordered-list.md @@ -1,11 +1,11 @@ # OrderedList -This extension enables you to use ordered lists in the editor. They are rendered as `
        ` HTML tags, +This extension enables you to use ordered lists in the editor. They are rendered as `
          ` HTML tags. Type 1.  (or any other number followed by a dot) at the beginning of a new line and it will magically transform to a ordered list. ## Installation ::: warning Use with ListItem -The `OrderedList` extension is intended to be used with the [`ListItem`](/api/extensions/list-item) extension. Make sure to import that one too, otherwise you’ll get a SyntaxError. +This extension requires the [`ListItem`](/api/nodes/list-item) extension. ::: ```bash @@ -22,9 +22,9 @@ yarn add @tiptap/extension-ordered-list @tiptap/extension-list-item | class | string | – | Add a custom class to the rendered HTML tag. | ## Commands -| Command | Options | Description | -| ------------ | ------- | ---------------------- | -| ordered_list | — | Toggle a ordered list. | +| Command | Parameters | Description | +| ----------- | ---------- | ----------------------- | +| orderedList | — | Toggle an ordered list. | ## Keyboard shortcuts * `Control` `Shift` `9` @@ -33,4 +33,4 @@ yarn add @tiptap/extension-ordered-list @tiptap/extension-list-item [packages/extension-ordered-list/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-ordered-list/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/paragraph.md b/docs/src/docPages/api/nodes/paragraph.md index 7cae8a4c..6a3013d7 100644 --- a/docs/src/docPages/api/nodes/paragraph.md +++ b/docs/src/docPages/api/nodes/paragraph.md @@ -20,9 +20,9 @@ yarn add @tiptap/extension-paragraph | class | string | – | Add a custom class to the rendered HTML tag. | ## Commands -| Command | Options | Description | -| --------- | ------- | -------------------------------------------- | -| paragraph | — | Transforms all selected nodes to paragraphs. | +| Command | Parameters | Description | +| --------- | ---------- | -------------------------------------------- | +| paragraph | — | Transforms all selected nodes to paragraphs. | ## Keyboard shortcuts * Windows & Linux: `Control` `Alt` `0` @@ -32,4 +32,4 @@ yarn add @tiptap/extension-paragraph [packages/extension-paragraph/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-paragraph/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/task-item.md b/docs/src/docPages/api/nodes/task-item.md index a7228168..be6e772c 100644 --- a/docs/src/docPages/api/nodes/task-item.md +++ b/docs/src/docPages/api/nodes/task-item.md @@ -1,8 +1,8 @@ # TaskItem ## Installation -::: warning Restrictions -This extension is intended to be used with the [`TaskList`](/api/extensions/task-list) extension. It doesn’t work without at least using one of them. +::: warning Use with TaskList +This extension requires the [`TaskList`](/api/nodes/task-list) extension. ::: ```bash @@ -25,4 +25,4 @@ yarn add @tiptap/extension-task-list @tiptap/extension-task-item [packages/extension-task-item/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-item/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/task-list.md b/docs/src/docPages/api/nodes/task-list.md index 44b8d962..82a74d4b 100644 --- a/docs/src/docPages/api/nodes/task-list.md +++ b/docs/src/docPages/api/nodes/task-list.md @@ -1,16 +1,18 @@ # TaskList -This extension enables you to use task lists in the editor. They are rendered as `
            ` HTML tags. +This extension enables you to use task lists in the editor. They are rendered as `
              `. This implementation doesn’t require any framework, it’s using plain JavaScript only. + +Type [ ]  or [x]  at the beginning of a new line and it will magically transform to a task list. ## Installation ::: warning Use with TaskItem -The `TaskList` extension is intended to be used with the [`TaskItem`](/api/extensions/task-item) extension. Make sure to import that one too, otherwise you’ll get a SyntaxError. +This extension requires the [`TaskItem`](/api/nodes/task-item) extension. ::: ```bash -# With npm +# with npm npm install @tiptap/extension-task-list @tiptap/extension-task-item -# Or: With Yarn +# with Yarn yarn add @tiptap/extension-task-list @tiptap/extension-task-item ``` @@ -20,12 +22,12 @@ yarn add @tiptap/extension-task-list @tiptap/extension-task-item | class | string | – | Add a custom class to the rendered HTML tag. | ## Commands -| Command | Options | Description | -| -------- | ------- | ------------------- | -| taskList | — | Toggle a task list. | +| Command | Parameters | Description | +| -------- | ---------- | ------------------- | +| taskList | — | Toggle a task list. | ## Source code [packages/extension-task-list/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-list/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/text.md b/docs/src/docPages/api/nodes/text.md index 5502739b..c283cc72 100644 --- a/docs/src/docPages/api/nodes/text.md +++ b/docs/src/docPages/api/nodes/text.md @@ -18,4 +18,4 @@ yarn add @tiptap/extension-text [packages/extension-text/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/todo-item.md b/docs/src/docPages/api/nodes/todo-item.md deleted file mode 100644 index cd7f171a..00000000 --- a/docs/src/docPages/api/nodes/todo-item.md +++ /dev/null @@ -1,17 +0,0 @@ -# TodoItem -It renders a single toggleable item of a list. - -::: warning Restrictions -This extensions is intended to be used with the `TodoList` extension. -::: - -## Settings -| Option | Type | Default | Description | -| ------ | ------- | ------- | ------------------------------------- | -| nested | Boolean | false | Specifies if you can nest todo lists. | - -## Commands -*None* - -## Keyboard shortcuts -*None* \ No newline at end of file diff --git a/docs/src/docPages/api/nodes/todo-list.md b/docs/src/docPages/api/nodes/todo-list.md deleted file mode 100644 index 0fe0b300..00000000 --- a/docs/src/docPages/api/nodes/todo-list.md +++ /dev/null @@ -1,69 +0,0 @@ -# TodoList -Renders a toggleable list of items. - -::: warning Restrictions -This extensions is intended to be used with the `TodoItem` extension. -::: - -## Settings -*None* - -## Commands -| Command | Options | Description | -| --------- | ------- | ----------------- | -| todo_list | — | Toggle todo list. | - -## Keyboard shortcuts -*None* - -## Usage -```markup - - - -``` \ No newline at end of file diff --git a/docs/src/docPages/overview/upgrade-guide.md b/docs/src/docPages/overview/upgrade-guide.md index 49157057..bab0d96c 100644 --- a/docs/src/docPages/overview/upgrade-guide.md +++ b/docs/src/docPages/overview/upgrade-guide.md @@ -5,7 +5,7 @@ ## Reasons to upgrade to tiptap 2.x Yes, it’s tedious work to upgrade your favorite text editor to a new API, but we made sure you’ve got enough reasons to upgrade to the newest version -* Autocomplete in your IDE (thanks to TypeScript) +* Autocompletion in your IDE (thanks to TypeScript) * Amazing documentation with 100+ pages * Active development, new features in the making * Tons of new extensions planned @@ -18,7 +18,7 @@ The new API will look pretty familiar too you, but there are a ton of changes th … ### Explicitly register the Document, Text and Paragraph extensions -tiptap 1 tried to hide a few required extensions from you with the default setting `useBuiltInExtensions: true`. That setting has been removed and you’re required to import all extensions. Be sure to explicitly import at least the [Document](/api/extensions/document), [Paragraph](/api/extensions/paragraph) and [Text](/api/extensions/text) extensions. +tiptap 1 tried to hide a few required extensions from you with the default setting `useBuiltInExtensions: true`. That setting has been removed and you’re required to import all extensions. Be sure to explicitly import at least the [Document](/api/nodes/document), [Paragraph](/api/nodes/paragraph) and [Text](/api/nodes/text) extensions. ```js import Document from '@tiptap/extension-document' diff --git a/docs/src/layouts/App/style.scss b/docs/src/layouts/App/style.scss index 281c22e4..bac89e1f 100644 --- a/docs/src/layouts/App/style.scss +++ b/docs/src/layouts/App/style.scss @@ -184,7 +184,16 @@ $menuBreakPoint: 800px; } &--draft { - color: rgba($colorWhite, 0.2); + color: rgba($colorWhite, 0.4); + + &::after { + content: 'draft'; + font-family: 'JetBrainsMono', monospace; + color: $colorGrey; + background-color: rgba($colorGrey, 0.1); + padding: 0 0.5em; + border-radius: 5px; + } } &--premium { diff --git a/docs/src/links.yaml b/docs/src/links.yaml index 647c47b3..adf1c1f4 100644 --- a/docs/src/links.yaml +++ b/docs/src/links.yaml @@ -6,6 +6,7 @@ link: /overview/installation - title: Upgrade Guide link: /overview/upgrade-guide + draft: true - title: Contributing link: /overview/contributing - title: Examples @@ -28,6 +29,7 @@ link: /examples/formatting - title: Links link: /examples/links + draft: true # - title: Images # link: /examples/images # draft: true @@ -79,8 +81,10 @@ items: - title: Getting started link: /guide/getting-started + draft: true - title: Configuration link: /guide/configuration + draft: true - title: Create your editor link: /guide/create-your-editor draft: true @@ -123,7 +127,6 @@ link: /api/nodes/horizontal-rule - title: Image link: /api/nodes/image - draft: true - title: ListItem link: /api/nodes/list-item - title: OrderedList @@ -132,7 +135,6 @@ link: /api/nodes/paragraph - title: TaskList link: /api/nodes/task-list - draft: true - title: TaskItem link: /api/nodes/task-item draft: true diff --git a/packages/extension-text-align/index.ts b/packages/extension-text-align/index.ts index 15938051..3eaaa5ef 100644 --- a/packages/extension-text-align/index.ts +++ b/packages/extension-text-align/index.ts @@ -9,7 +9,7 @@ type TextAlignOptions = { const TextAlign = createExtension({ defaultOptions: { types: ['heading', 'paragraph'], - alignments: ['left', 'center', 'right'], + alignments: ['left', 'center', 'right', 'justify'], defaultAlignment: 'left', },