From 949f4ccb3d12be1622d87ad744253519a0cf1733 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Wed, 23 Sep 2020 12:03:03 +0200 Subject: [PATCH] a ton of improvements --- docs/src/demos/Extensions/Heading/index.vue | 8 ++--- docs/src/docPages/api/editor.md | 31 ++++++++++--------- docs/src/docPages/api/events.md | 20 +++++++----- .../src/docPages/api/extensions/blockquote.md | 2 +- docs/src/docPages/api/extensions/bold.md | 2 +- .../docPages/api/extensions/bullet-list.md | 10 +++--- .../api/extensions/code-block-highlight.md | 2 +- .../src/docPages/api/extensions/code-block.md | 2 +- docs/src/docPages/api/extensions/code.md | 2 +- .../src/docPages/api/extensions/hard-break.md | 2 +- docs/src/docPages/api/extensions/heading.md | 6 ++-- docs/src/docPages/api/extensions/history.md | 7 +++-- .../api/extensions/horizontal-rule.md | 4 +-- docs/src/docPages/api/extensions/italic.md | 4 ++- docs/src/docPages/api/extensions/link.md | 2 +- docs/src/docPages/api/extensions/list-item.md | 2 +- .../docPages/api/extensions/ordered-list.md | 12 +++---- docs/src/docPages/api/extensions/paragraph.md | 6 +++- docs/src/docPages/api/extensions/strike.md | 4 +-- docs/src/docPages/api/extensions/text.md | 2 +- docs/src/docPages/api/extensions/todo-item.md | 2 +- docs/src/docPages/api/extensions/todo-list.md | 2 +- docs/src/docPages/api/extensions/underline.md | 4 ++- docs/src/templates/DocPage/style.scss | 8 ++++- 24 files changed, 85 insertions(+), 61 deletions(-) diff --git a/docs/src/demos/Extensions/Heading/index.vue b/docs/src/demos/Extensions/Heading/index.vue index c3dd7808e..015bda501 100644 --- a/docs/src/demos/Extensions/Heading/index.vue +++ b/docs/src/demos/Extensions/Heading/index.vue @@ -44,10 +44,10 @@ export default { }), ], content: ` -

This is a headline level 1

-

This is a headline level 2

-

This is a headline level 3

-

This headline will be converted to a paragraph, because it's not defined in the levels option.

+

This is a 1st level heading

+

This is a 2nd level heading

+

This is a 3rd level heading

+

This 4th level heading will be converted to a paragraph, because levels are configured to be only 1, 2 or 3.

`, }) }, diff --git a/docs/src/docPages/api/editor.md b/docs/src/docPages/api/editor.md index d7ace763b..cd95dc2e5 100644 --- a/docs/src/docPages/api/editor.md +++ b/docs/src/docPages/api/editor.md @@ -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. | diff --git a/docs/src/docPages/api/events.md b/docs/src/docPages/api/events.md index 545a65fad..8bc44ec9e 100644 --- a/docs/src/docPages/api/events.md +++ b/docs/src/docPages/api/events.md @@ -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. | \ No newline at end of file +## 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`. +::: \ No newline at end of file diff --git a/docs/src/docPages/api/extensions/blockquote.md b/docs/src/docPages/api/extensions/blockquote.md index 483457419..78a4fccda 100644 --- a/docs/src/docPages/api/extensions/blockquote.md +++ b/docs/src/docPages/api/extensions/blockquote.md @@ -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. | diff --git a/docs/src/docPages/api/extensions/bold.md b/docs/src/docPages/api/extensions/bold.md index 18d1afd26..b96160f71 100644 --- a/docs/src/docPages/api/extensions/bold.md +++ b/docs/src/docPages/api/extensions/bold.md @@ -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. | diff --git a/docs/src/docPages/api/extensions/bullet-list.md b/docs/src/docPages/api/extensions/bullet-list.md index 132eaa1cb..0306a6fa7 100644 --- a/docs/src/docPages/api/extensions/bullet-list.md +++ b/docs/src/docPages/api/extensions/bullet-list.md @@ -1,22 +1,22 @@ # BulletList This extension enables you to use bullet lists in the editor. They are rendered as `