ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

update content, add text align justify

Browse Source
This commit is contained in:
Hans Pagel
2020-11-03 16:13:13 +01:00
parent 3a79b8c564
commit 9bcdb57f14
13 changed files with 110 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
docs/src/demos/Examples/Formatting/index.vue
View File

@@ -28,6 +28,9 @@
<button @click="editor.chain().focus().textAlign('right').run()"> <button @click="editor.chain().focus().textAlign('right').run()">
right right
</button> </button>
<button @click="editor.chain().focus().textAlign('justify').run()">
justify
</button>
</div> </div>
<editor-content :editor="editor" /> <editor-content :editor="editor" />
</div> </div>
@@ -70,22 +73,40 @@ export default {
HardBreak(), HardBreak(),
], ],
content: ` content: `
<h2>Cyndi Lauper – Girls Just Want to Have Fun</h2> <h3>Girls Just Want to Have Fun (Cyndi Lauper)</h2>
<p>I come home in the morning light <p>I come home in the morning light<br>
My mother says, “When you gonna live your life right?” My mother says, “When you gonna live your life right?”<br>
Oh mother dear we’re not the fortunate ones Oh mother dear we’re not the fortunate ones<br>
And girls, they wanna have fun And girls, they wanna have fun<br>
Oh girls just want to have fun</p> Oh girls just want to have fun</p>
<p>The phone rings in the middle of the night <p style="text-align: center">The phone rings in the middle of the night<br>
My father yells, "What you gonna do with your life?" My father yells, "What you gonna do with your life?"<br>
Oh daddy dear, you know you’re still number one Oh daddy dear, you know you’re still number one<br>
But girls, they wanna have fun But girls, they wanna have fun<br>
Oh girls just want to have</p> Oh girls just want to have</p>
<p>That’s all they really want <p style="text-align:right">That’s all they really want<br>
Some fun<br>
When the working day is done<br>
Oh girls, they wanna have fun<br>
Oh girls just wanna have fun<br>
(girls, they wanna, wanna have fun, girls wanna have)</p>
<p style="text-align:justify">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</p>
<p style="text-align:justify">That's all they really want
Some fun Some fun
When the working day is done When the working day is done
Oh girls, they wanna have fun Oh girls, they wanna have fun
Oh girls just wanna have fun (girls, they wanna, wanna have fun, girls wanna have)</p> 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</p>
`, `,
}) })
}, },

6
docs/src/demos/Examples/MarkdownShortcuts/index.vue
View File

@@ -22,13 +22,13 @@ export default {
this.editor = new Editor({ this.editor = new Editor({
content: ` content: `
<p> <p>
Start a new line and type <code>#</code> followed by a space to get a heading. Try <code>#</code>, <code>##</code>, <code>###</code>, <code>####</code>, <code>#####</code>, <code>######</code> for different levels. Markdown shortcuts make it easy to format the text while typing.
</p> </p>
<p> <p>
Those conventions are called <strong>input rules</strong> in tiptap. Some of them are enabled by default. Try <code>></code> for blockquotes, <code>*</code>, <code>-</code> or <code>+</code> for bullet lists, or <code>\`foobar\`</code> to highlight code. To test that, start a new line and type <code>#</code> followed by a space to get a heading. Try <code>#</code>, <code>##</code>, <code>###</code>, <code>####</code>, <code>#####</code>, <code>######</code> for different levels.
</p> </p>
<p> <p>
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 <code>></code> for blockquotes, <code>*</code>, <code>-</code> or <code>+</code> for bullet lists, or <code>\`foobar\`</code> to highlight code. You can add your own input rules to existing extensions, and to your custom nodes and marks.
</p> </p>
`, `,
extensions: defaultExtensions(), extensions: defaultExtensions(),

69
docs/src/docPages/api/extensions.md
View File

@@ -5,51 +5,40 @@
## Introduction ## 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. 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 ## List of provided 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
| Title | Default Extension | Source Code | | 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/) | | [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/) | | [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/) | | [Dropcursor](/api/extensions/dropcursor) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-dropcursor/) |
| [HardBreak](/api/extensions/hard-break) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-hard-break/) | | [Focus](/api/extensions/focus) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-focus/) |
| [Heading](/api/extensions/heading) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-heading/) | | [Gapcursor](/api/extensions/gapcursor) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-gapcursor/) |
| [History](/api/extensions/history) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-history/) | | [History](/api/extensions/history) | – | [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/) |
| [TextAlign](/api/extensions/text-align) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text-align/) | | [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/) |
<!-- | [CodeBlockHighlight](/api/extensions/code-block-highlight) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packagescode-block-highlight/extension-/) --> 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).
<!-- | [Mention](/api/extensions/mention) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-mention/) -->
<!-- | [Placeholder](/api/extensions/placeholder) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-placeholder/) -->
<!-- | [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/) -->
<!-- | [TableRow](/api/extensions/table-row) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-table-row/) -->
<!-- | [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/) -->
## Community extensions ## Create a new extension
:::warning Work in Progress 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:
This section is not ready yet. Meanwhile, [search through GitHub issues](https://github.com/ueberdosis/tiptap/issues) to find code snippets.
:::
## Your custom extensions ```js
Didn’t find what you’re looking for? No worries, [you can build your own extensions](/guide/build-custom-extensions). 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).

10
docs/src/docPages/api/marks.md
View File

@@ -3,3 +3,13 @@
## toc ## toc
## Introduction ## 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/) |

18
docs/src/docPages/api/nodes.md
View File

@@ -3,3 +3,21 @@
## toc ## toc
## Introduction ## 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/) |

2
docs/src/docPages/api/nodes/bullet-list.md
View File

@@ -1,5 +1,5 @@
# BulletList # BulletList
This extension enables you to use bullet lists in the editor. They are rendered as `<ul>` HTML tags, This extension enables you to use bullet lists in the editor. They are rendered as `<ul>` HTML tags.
Type <code>*&nbsp;</code>, <code>-&nbsp;</code> or <code>+&nbsp;</code> at the beginning of a new line and it will magically transform to a bullet list. Type <code>*&nbsp;</code>, <code>-&nbsp;</code> or <code>+&nbsp;</code> at the beginning of a new line and it will magically transform to a bullet list.

2
docs/src/docPages/api/nodes/ordered-list.md
View File

@@ -1,5 +1,5 @@
# OrderedList # OrderedList
This extension enables you to use ordered lists in the editor. They are rendered as `<ol>` HTML tags, This extension enables you to use ordered lists in the editor. They are rendered as `<ol>` HTML tags.
Type <code>1.&nbsp;</code> (or any other number followed by a dot) at the beginning of a new line and it will magically transform to a ordered list. Type <code>1.&nbsp;</code> (or any other number followed by a dot) at the beginning of a new line and it will magically transform to a ordered list.

17
docs/src/docPages/api/nodes/todo-item.md
View File

@@ -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*

69
docs/src/docPages/api/nodes/todo-list.md
View File

@@ -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
<template>
<div>
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
<button type="button" :class="{ 'is-active': isActive.todo_list() }" @click="commands.todo_list">
Todo List
</button>
</editor-menu-bar>
<editor-content :editor="editor" />
</div>
</template>
<script>
import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
import { TodoItem, TodoList } from 'tiptap-extensions'
export default {
components: {
EditorMenuBar,
EditorContent,
},
data() {
return {
editor: new Editor({
extensions: [
TodoItem({
nested: true,
}),
TodoList(),
],
content: `
<ul data-type="todo_list">
<li data-type="todo_item" data-done="true">
Checked item
</li>
<li data-type="todo_item" data-done="false">
Unchecked item
</li>
</ul>
`,
}),
}
},
beforeDestroy() {
this.editor.destroy()
}
}
</script>
```

2
docs/src/docPages/overview/upgrade-guide.md
View File

@@ -5,7 +5,7 @@
## Reasons to upgrade to tiptap 2.x ## 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 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 * Amazing documentation with 100+ pages
* Active development, new features in the making * Active development, new features in the making
* Tons of new extensions planned * Tons of new extensions planned

11
docs/src/layouts/App/style.scss
View File

@@ -184,7 +184,16 @@ $menuBreakPoint: 800px;
} }
&--draft { &--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 { &--premium {

4
docs/src/links.yaml
View File

@@ -6,6 +6,7 @@
link: /overview/installation link: /overview/installation
- title: Upgrade Guide - title: Upgrade Guide
link: /overview/upgrade-guide link: /overview/upgrade-guide
draft: true
- title: Contributing - title: Contributing
link: /overview/contributing link: /overview/contributing
- title: Examples - title: Examples
@@ -28,6 +29,7 @@
link: /examples/formatting link: /examples/formatting
- title: Links - title: Links
link: /examples/links link: /examples/links
draft: true
# - title: Images # - title: Images
# link: /examples/images # link: /examples/images
# draft: true # draft: true
@@ -79,8 +81,10 @@
items: items:
- title: Getting started - title: Getting started
link: /guide/getting-started link: /guide/getting-started
draft: true
- title: Configuration - title: Configuration
link: /guide/configuration link: /guide/configuration
draft: true
- title: Create your editor - title: Create your editor
link: /guide/create-your-editor link: /guide/create-your-editor
draft: true draft: true

2
packages/extension-text-align/index.ts
View File

@@ -9,7 +9,7 @@ type TextAlignOptions = {
const TextAlign = createExtension({ const TextAlign = createExtension({
defaultOptions: <TextAlignOptions>{ defaultOptions: <TextAlignOptions>{
types: ['heading', 'paragraph'], types: ['heading', 'paragraph'],
alignments: ['left', 'center', 'right'], alignments: ['left', 'center', 'right', 'justify'],
defaultAlignment: 'left', defaultAlignment: 'left',
}, },