From 9bcdb57f14490f2b92c014d544e4f16edfebe333 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Tue, 3 Nov 2020 16:13:13 +0100 Subject: [PATCH 1/3] update content, add text align justify --- docs/src/demos/Examples/Formatting/index.vue | 43 +++++++++--- .../Examples/MarkdownShortcuts/index.vue | 6 +- docs/src/docPages/api/extensions.md | 69 ++++++++----------- docs/src/docPages/api/marks.md | 10 +++ docs/src/docPages/api/nodes.md | 18 +++++ docs/src/docPages/api/nodes/bullet-list.md | 2 +- docs/src/docPages/api/nodes/ordered-list.md | 2 +- docs/src/docPages/api/nodes/todo-item.md | 17 ----- docs/src/docPages/api/nodes/todo-list.md | 69 ------------------- docs/src/docPages/overview/upgrade-guide.md | 2 +- docs/src/layouts/App/style.scss | 11 ++- docs/src/links.yaml | 4 ++ packages/extension-text-align/index.ts | 2 +- 13 files changed, 110 insertions(+), 145 deletions(-) delete mode 100644 docs/src/docPages/api/nodes/todo-item.md delete mode 100644 docs/src/docPages/api/nodes/todo-list.md 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/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/marks.md b/docs/src/docPages/api/marks.md index 80557d6c..1c260686 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/extensions/bold) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bold/) | +| [Code](/api/extensions/code) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code/) | +| [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/) | +| [Strike](/api/extensions/strike) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-strike/) | +| [Underline](/api/extensions/underline) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-underline/) | 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/bullet-list.md b/docs/src/docPages/api/nodes/bullet-list.md index 2535a9c1..80902fb8 100644 --- a/docs/src/docPages/api/nodes/bullet-list.md +++ b/docs/src/docPages/api/nodes/bullet-list.md @@ -1,5 +1,5 @@ # BulletList -This extension enables you to use bullet lists in the editor. They are rendered as `