mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2024-11-25 12:39:03 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

a ton of improvements

Browse Source
This commit is contained in:
Hans Pagel 2020-09-23 12:03:03 +02:00
parent 42b982b71c
commit 949f4ccb3d
24 changed files with 85 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/src/demos/Extensions/Heading/index.vue
View File

@ -44,10 +44,10 @@ export default {
}),
],
content: `
<h1>This is a headline level 1</h1>
<h2>This is a headline level 2</h2>
<h3>This is a headline level 3</h3>
<h4>This headline will be converted to a paragraph, because it's not defined in the levels option.</h4>
<h1>This is a 1st level heading</h1>
<h2>This is a 2nd level heading</h2>
<h3>This is a 3rd level heading</h3>
<h4>This 4th level heading will be converted to a paragraph, because levels are configured to be only 1, 2 or 3.</h4>
`,
})
},

31
docs/src/docPages/api/editor.md
View File

@ -1,18 +1,21 @@
# Editor
This class is a central building block of tiptap. It does most of the heavy lifting of creating a working [ProseMirror](https://ProseMirror.net/) editor such as creating the [`EditorView`](https://ProseMirror.net/docs/ref/#view.EditorView), setting the initial [`EditorState`](https://ProseMirror.net/docs/ref/#state.Editor_State) and so on.
## Settings
All of the listed settings can be set during initialization, read and updated during runtime.
## Configuration
All of the listed settings can be set before initialization, or read during runtime, or some of them even updated for a running instance (e. g. `editable`).
| Setting | Type | Default | Description |
| ------------------ | --------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| `autoFocus` | `Boolean` | `false` | Focus the editor on init. |
| `content` | `Object|String` | `null` | The editor state object used by Prosemirror. You can also pass HTML to the `content` slot. When used both, the `content` slot will be ignored. |
| `dropCursor` | `Object` | `{}` | Config for `prosemirror-dropcursor`. |
| `editable` | `Boolean` | `true` | When set to `false` the editor is read-only. |
| `editorProps` | `Object` | `{}` | A list of [Prosemirror editorProps](https://prosemirror.net/docs/ref/#view.EditorProps). |
| `enableDropCursor` | `Boolean` | `true` | Option to enable / disable the dropCursor plugin. |
| `enableGapCursor` | `Boolean` | `true` | Option to enable / disable the gapCursor plugin. |
| `extensions` | `Array` | `[]` | A list of extensions used, by the editor. This can be `Nodes`, `Marks` or `Plugins`. |
| `parseOptions` | `Object` | `{}` | A list of [Prosemirror parseOptions](https://prosemirror.net/docs/ref/#model.ParseOptions). |
| Setting | Type | Default | Description |
| ------------------ | --------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `autoFocus` | `Boolean` | `false` | Focus the editor on init. |
| `content` | `Object|String` | `null` | The editor state object used by Prosemirror. You can also pass HTML to the `content` slot. When used both, the `content` slot will be ignored. |
| `dropCursor` | `Object` | `{}` | Config for `prosemirror-dropcursor`. |
| `editable` | `Boolean` | `true` | When set to `false` the editor is read-only. |
| `editorProps` | `Object` | `{}` | A list of [Prosemirror editorProps](https://prosemirror.net/docs/ref/#view.EditorProps). |
| `enableDropCursor` | `Boolean` | `true` | Enable/disable showing a cursor at the drop position when something is dragged over the editor. |
| `enableGapCursor` | `Boolean` | `true` | Enable/disable a cursor at places that don’t allow regular selection (such as positions that have a leaf block node, table, or the end of the document both before and after them). |
| `extensions` | `Array` | `[]` | A list of extensions used, by the editor. This can be `Nodes`, `Marks` or `Plugins`. |
| `parseOptions` | `Object` | `{}` | A list of [Prosemirror parseOptions](https://prosemirror.net/docs/ref/#model.ParseOptions). |
| `onBlur` | `Function` | `undefined` | Returns an object with the `event` and current `state` and `view` of Prosemirror on blur. |
| `onFocus` | `Function` | `undefined` | Returns an object with the `event` and current `state` and `view` of Prosemirror on focus. |
| `onInit` | `Function` | `undefined` | Returns an object with the current `state` and `view` of Prosemirror on init. |
| `onUpdate` | `Function` | `undefined` | Returns an object with the current `state` of Prosemirror, a `json()` and `html()` function and the `transaction` on every change. |

20
docs/src/docPages/api/events.md
View File

@ -1,5 +1,5 @@
# Events
Events are a great way to run code when the editor has been initialized, the content has changed, the editor is in focus or the editor isn’t in focus anymore. There are two ways to add code to those events.
Events are a great way to run code when the editor has been initialized, the content has changed, the editor is in focus or the editor isn’t in focus anymore. There are two ways to add code that is executed at those events:
## Option 1: Use hooks
Hooks can be assigned to the editor on initialization. Pass a function that gets called in case of those events.
@ -34,10 +34,14 @@ editor.on('update', ({ html }) => {
})
```
## List of available hooks & events
| Hook | Event | Description |
| ---------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| `onBlur` | `blur` | Returns an object with the `event` and current `state` and `view` of Prosemirror on blur. |
| `onFocus` | `focus` | Returns an object with the `event` and current `state` and `view` of Prosemirror on focus. |
| `onInit` | `init` | Returns an object with the current `state` and `view` of Prosemirror on init. |
| `onUpdate` | `update` | Returns an object with the current `state` of Prosemirror, a `json()` and `html()` function and the `transaction` on every change. |
## List of events
| Event | Description | Parameters |
| -------- | ----------------------------- | ------------------------------------ |
| `blur` | Editor isn’t focused anymore. | `{ event, state, view }` |
| `focus` | Editor is in focus. | `{ event, state, view }` |
| `init` | Editor has been initialized. | `{ state, view }` |
| `update` | Content has been changed. | `{ state, json, html, transaction }` |
:::info List of hooks
The according hooks are called `onBlur`, `onFocus`, `onInit` and `onUpdate`.
:::

2
docs/src/docPages/api/extensions/blockquote.md
View File

@ -12,7 +12,7 @@ npm install @tiptap/extension-blockquote
yarn add @tiptap/extension-blockquote
```
## Options
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | – | Add a custom class to the rendered HTML tag. |

2
docs/src/docPages/api/extensions/bold.md
View File

@ -16,7 +16,7 @@ npm install @tiptap/extension-bold
yarn add @tiptap/extension-bold
```
## Options
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | – | Add a custom class to the rendered HTML tag. |

10
docs/src/docPages/api/extensions/bullet-list.md
View File

@ -1,22 +1,22 @@
# BulletList
This extension enables you to use bullet lists in the editor. They are rendered as `<ul>` HTML tags,
Type `* ​`, `- ​` or `+ ​` 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.
## 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.
:::
## Installation
```bash
# With npm
npm install @tiptap/extension-bullet-list
npm install @tiptap/extension-bullet-list @tiptap/extension-list-item
# Or: With Yarn
yarn add @tiptap/extension-bullet-list
yarn add @tiptap/extension-bullet-list @tiptap/extension-list-item
```
## Options
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | – | Add a custom class to the rendered HTML tag. |

2
docs/src/docPages/api/extensions/code-block-highlight.md
View File

@ -1,7 +1,7 @@
# CodeBlockHighlight
Enables you to use the `<pre>` HTML tag with auto-detected syntax highlighting in the editor.
## Options
## Settings
*None*
## Commands

2
docs/src/docPages/api/extensions/code-block.md
View File

@ -16,7 +16,7 @@ npm install @tiptap/extension-code-block
yarn add @tiptap/extension-code-block
```
## Options
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | – | Add a custom class to the rendered HTML tag. |

2
docs/src/docPages/api/extensions/code.md
View File

@ -12,7 +12,7 @@ npm install @tiptap/extension-code
yarn add @tiptap/extension-code
```
## Options
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | – | Add a custom class to the rendered HTML tag. |

2
docs/src/docPages/api/extensions/hard-break.md
View File

@ -10,7 +10,7 @@ npm install @tiptap/extension-hard-break
yarn add @tiptap/extension-hard-break
```
## Options
## Settings
*None*
## Commands

6
docs/src/docPages/api/extensions/heading.md
View File

@ -1,7 +1,7 @@
# Heading
The Heading extension adds support for headings of different levels. Headings are rendered with `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>` or `<h6>` HTML tags. By default all six headline levels are enabled, but you can pass an array to only allow a few levels. Check the usage example to see how this is done.
Type `# ​` at the beginning of a new line and it will magically transform to a headline, same for `## ​`, `### ​`, `#### ​`, `##### ​` and `###### ​`.
Type <code>#&nbsp;</code> at the beginning of a new line and it will magically transform to a headline, same for <code>##&nbsp;</code>, <code>###&nbsp;</code>, <code>####&nbsp;</code>, <code>#####&nbsp;</code> and <code>######&nbsp;</code>.
## Installation
```bash
@ -12,7 +12,7 @@ npm install @tiptap/extension-heading
yarn add @tiptap/extension-heading
```
## Options
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------------------ | -------------------------------------------- |
| class | string | – | Add a custom class to the rendered HTML tag. |
@ -35,4 +35,4 @@ yarn add @tiptap/extension-heading
[packages/extension-heading/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-heading/)
## Usage
<demo name="Extensions/Heading" highlight="" />
<demo name="Extensions/Heading" highlight="3-11,23,42-44" />

7
docs/src/docPages/api/extensions/history.md
View File

@ -10,8 +10,10 @@ npm install @tiptap/extension-history
yarn add @tiptap/extension-history
```
## Options
*None*
## Settings
| Option | Type | Default | Description |
| -------------------- | ------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| historyPluginOptions | Object | {} | Supports the following configuration options:<br /><br />**depth:** The amount of history events that are collected before the oldest events are discarded. Defaults to 100.<br /><br />**newGroupDelay:** The delay between changes after which a new group should be started. Defaults to 500 (milliseconds). Note that when changes aren't adjacent, a new group is always started. |
## Commands
| Command | Options | Description |
@ -20,6 +22,7 @@ yarn add @tiptap/extension-history
| redo | — | Redo the last change. |
## Keyboard shortcuts
### Undo
* Windows & Linux: `Control` + `Z`
* macOS: `Command` + `Z`

4
docs/src/docPages/api/extensions/horizontal-rule.md
View File

@ -1,7 +1,7 @@
# HorizontalRule
Use this extension to render a `<hr>` HTML tag. If you pass `<hr>` in the editor’s initial content, it’ll be rendered accordingly.
Type three dashes (`---`) or three underscores and a space (`___ ​`) at the beginning of a new line and it will magically transform to a horizontal rule.
Type three dashes (<code>---</code>) or three underscores and a space (<code>___ </code>) at the beginning of a new line and it will magically transform to a horizontal rule.
## Installation
```bash
@ -12,7 +12,7 @@ npm install @tiptap/extension-horizontal-rule
yarn add @tiptap/extension-horizontal-rule
```
## Options
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | – | Add a custom class to the rendered HTML tag. |

4
docs/src/docPages/api/extensions/italic.md
View File

@ -1,6 +1,8 @@
# Italic
Use this extension to render text in *italic*. If you pass `<em>`, `<i>` tags, or text with inline `style` attributes setting `font-style: italic` in the editor’s initial content, they all will be rendered accordingly.
Type `*one asterisk*` or `_one underline_` and it will magically transform to *italic* text while you type.
::: warning Restrictions
The extension will generate the corresponding `<em>` HTML tags when reading contents of the `Editor` instance. All text marked italic, regardless of the method will be normalized to `<em>` HTML tags.
:::
@ -14,7 +16,7 @@ npm install @tiptap/extension-italic
yarn add @tiptap/extension-italic
```
## Options
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | – | Add a custom class to the rendered HTML tag. |

2
docs/src/docPages/api/extensions/link.md
View File

@ -10,7 +10,7 @@ npm install @tiptap/extension-link
yarn add @tiptap/extension-link
```
## Options
## Settings
| Option | Type | Default | Description |
| ----------- | ------- | ------- | -------------------------------------------- |
| class | string | – | Add a custom class to the rendered HTML tag. |

2
docs/src/docPages/api/extensions/list-item.md
View File

@ -14,7 +14,7 @@ npm install @tiptap/extension-list-item
yarn add @tiptap/extension-list-item
```
## Options
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | – | Add a custom class to the rendered HTML tag. |

12
docs/src/docPages/api/extensions/ordered-list.md
View File

@ -1,20 +1,20 @@
# OrderedList
Enables you to use the `<ol>` HTML tag in the editor.
::: warning Restrictions
This extensions is intended to be used with the `ListItem` extension.
## 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.
:::
## Installation
```bash
# With npm
npm install @tiptap/extension-ordered-list
npm install @tiptap/extension-ordered-list @tiptap/extension-list-item
# Or: With Yarn
yarn add @tiptap/extension-ordered-list
yarn add @tiptap/extension-ordered-list @tiptap/extension-list-item
```
## Options
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | – | Add a custom class to the rendered HTML tag. |

6
docs/src/docPages/api/extensions/paragraph.md
View File

@ -1,6 +1,10 @@
# Paragraph
Yes, the schema is very strict. Without this extension you won’t even be able to use paragraphs in the editor.
:::warning Breaking Change from 1.x → 2.x
Tiptap 1 tried to hide that node from you, but it has always been there. You have to explicitly import it from now on (or use `defaultExtensions()`).
:::
## Installation
```bash
# With npm
@ -10,7 +14,7 @@ npm install @tiptap/extension-paragraph
yarn add @tiptap/extension-paragraph
```
## Options
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | – | Add a custom class to the rendered HTML tag. |

4
docs/src/docPages/api/extensions/strike.md
View File

@ -1,7 +1,7 @@
# Strike
Use this extension to render ~~striked text~~. If you pass `<s>`, `<del>`, `<strike>` tags, or text with inline `style` attributes setting `text-decoration: line-through` in the editor’s initial content, they all will be rendered accordingly.
Type `~text between tildes~` and it will be magically ~~striked through~~ while you type.
Type <code>~text between tildes~</code> and it will be magically ~~striked through~~ while you type.
::: warning Restrictions
The extension will generate the corresponding `<s>` HTML tags when reading contents of the `Editor` instance. All text striked through, regardless of the method will be normalized to `<s>` HTML tags.
@ -16,7 +16,7 @@ npm install @tiptap/extension-strike
yarn add @tiptap/extension-strike
```
## Options
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | – | Add a custom class to the rendered HTML tag. |

2
docs/src/docPages/api/extensions/text.md
View File

@ -2,7 +2,7 @@
**The `Text` extension is required**, at least if you want to work with text of any kind and that’s very likely. This extension is a little bit different, it doesn’t even render HTML. It’s plain text, that’s all.
:::warning Breaking Change from 1.x → 2.x
Tiptap 1 tried to hide that node from you, but it has always been there.
Tiptap 1 tried to hide that node from you, but it has always been there. You have to explicitly import it from now on (or use `defaultExtensions()`).
:::
## Installation

2
docs/src/docPages/api/extensions/todo-item.md
View File

@ -5,7 +5,7 @@ It renders a single toggleable item of a list.
This extensions is intended to be used with the `TodoList` extension.
:::
## Options
## Settings
| Option | Type | Default | Description |
| ------ | ------- | ------- | ------------------------------------- |
| nested | Boolean | false | Specifies if you can nest todo lists. |

2
docs/src/docPages/api/extensions/todo-list.md
View File

@ -5,7 +5,7 @@ Renders a toggleable list of items.
This extensions is intended to be used with the `TodoItem` extension.
:::
## Options
## Settings
*None*
## Commands

4
docs/src/docPages/api/extensions/underline.md
View File

@ -1,6 +1,8 @@
# Underline
Use this extension to render text <u>underlined</u>. If you pass `<u>` tags, or text with inline `style` attributes setting `text-decoration: underline` in the editor’s initial content, they all will be rendered accordingly.
Be aware that underlined text in the Internet usually indicates that it’s a clickable link. Don’t confuse your users with underlined text.
::: warning Restrictions
The extension will generate the corresponding `<u>` HTML tags when reading contents of the `Editor` instance. All text marked underlined, regardless of the method will be normalized to `<u>` HTML tags.
:::
@ -14,7 +16,7 @@ npm install @tiptap/extension-underline
yarn add @tiptap/extension-underline
```
## Options
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | – | Add a custom class to the rendered HTML tag. |

8
docs/src/templates/DocPage/style.scss
View File

@ -150,11 +150,17 @@
&.warning {
border-color:#ffd8a8;
background-color: #fff4e6;
color: #ca9c63;
}
&.info {
border-color:#a5d8ff;
background-color: #e7f5ff;
color: #228be6;
}
.remark-container-title {
font-weight: 600;
color: #ca9c63;
}
}