diff --git a/docs/src/docPages/api/editor.md b/docs/src/docPages/api/editor.md index 5c44870a..2cc23d3c 100644 --- a/docs/src/docPages/api/editor.md +++ b/docs/src/docPages/api/editor.md @@ -1,25 +1,28 @@ # Editor -:::warning Out of date -This content is written for tiptap 1 and needs an update. -::: - 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. -## Editor Properties -| Property | Type | Default | Description | -| ---------------------- | :--------------: | :---------: | ------------------------------------------------------------------------------------------------------------------------------------------------- | -| `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. | -| `editorProps` | `Object` | `{}` | A list of [Prosemirror editorProps](https://prosemirror.net/docs/ref/#view.EditorProps). | -| `editable` | `Boolean` | `true` | When set to `false` the editor is read-only. | -| `autoFocus` | `Boolean` | `false` | Focus the editor on init. | -| `extensions` | `Array` | `[]` | A list of extensions used, by the editor. This can be `Nodes`, `Marks` or `Plugins`. | -| `useBuiltInExtensions` | `Boolean` | `true` | By default tiptap adds a `Doc`, `Paragraph` and `Text` node to the Prosemirror schema. | -| `dropCursor` | `Object` | `{}` | Config for `prosemirror-dropcursor`. | -| `enableDropCursor` | `Boolean` | `true` | Option to enable / disable the dropCursor plugin. | -| `enableGapCursor` | `Boolean` | `true` | Option to enable / disable the gapCursor plugin. | -| `parseOptions` | `Object` | `{}` | A list of [Prosemirror parseOptions](https://prosemirror.net/docs/ref/#model.ParseOptions). | -| `onInit` | `Function` | `undefined` | This will return an Object with the current `state` and `view` of Prosemirror on init. | -| `onFocus` | `Function` | `undefined` | This will return an Object with the `event` and current `state` and `view` of Prosemirror on focus. | -| `onBlur` | `Function` | `undefined` | This will return an Object with the `event` and current `state` and `view` of Prosemirror on blur. | -| `onUpdate` | `Function` | `undefined` | This will return an Object with the current `state` of Prosemirror, a `getJSON()` and `getHTML()` function and the `transaction` on every change. | \ No newline at end of file +## Settings +All of the listed settings can be set during initialization, read and updated during runtime. + +| 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). | + +## Hooks +The editor provides a few hooks to react to specific [events](/api/events). Pass a function that get’s called in case of those events. + +| Hook | Type | Default | Description | +| ---------- | ---------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------- | +| `onBlur` | `Function` | `undefined` | This will return an Object with the `event` and current `state` and `view` of Prosemirror on blur. | +| `onFocus` | `Function` | `undefined` | This will return an Object with the `event` and current `state` and `view` of Prosemirror on focus. | +| `onInit` | `Function` | `undefined` | This will return an Object with the current `state` and `view` of Prosemirror on init. | +| `onUpdate` | `Function` | `undefined` | This will return 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 abe20049..758cc438 100644 --- a/docs/src/docPages/api/events.md +++ b/docs/src/docPages/api/events.md @@ -11,9 +11,9 @@ const editor = new Editor({ onInit: () => { // editor is initialized }, - onUpdate: ({ getHTML }) => { + onUpdate: ({ html }) => { // get new content on update - const newContent = getHTML() + const newContent = html() }, }) ``` @@ -27,8 +27,8 @@ editor.on('init', () => { // editor is initialized }) -editor.on('update', ({ getHTML }) => { +editor.on('update', ({ html }) => { // get new content on update - const newContent = getHTML() + const newContent = html() }) ``` diff --git a/docs/src/docPages/introduction.md b/docs/src/docPages/introduction.md index f6a7e684..89bcde8f 100644 --- a/docs/src/docPages/introduction.md +++ b/docs/src/docPages/introduction.md @@ -3,11 +3,13 @@ tiptap is a renderless wrapper around [ProseMirror](https://ProseMirror.net) – Although tiptap tries to hide most of the complexity of ProseMirror, it’s built on top of its APIs and we strongly recommend you to read through the [ProseMirror Guide](https://ProseMirror.net/docs/guide/). You’ll have a better understanding of how everything works under the hood and get familiar with many terms and jargon used by tiptap. -## Renderless -We don’t tell you what a menu should look like or where it should be rendered in the DOM. That’s why tiptap is renderless and comes without any CSS. You are in full control over markup and styling. +## Features -## Works with and without Vue.js -We don’t care what framework you use. Tiptap is ready to be used with plain JavaScript, Vue.js or React. That makes it even possible to write a renderer for Svelte and others. +**Renderless.** We don’t tell you what a menu should look like or where it should be rendered in the DOM. That’s why tiptap is renderless and comes without any CSS. You are in full control over markup and styling. + +**Framework-agnostic.** We don’t care what framework you use. Tiptap is ready to be used with plain JavaScript, Vue.js or React. That makes it even possible to write a renderer for Svelte and others. + +**TypeScript.** Tiptap 2 is written in TypeScript. That gives you a nice autocomplete for the API (if your IDE for it), helps to find bugs early and makes it possible to generate [a complete API documentation](#) on top of the extensive human written documentation. ## Who uses tiptap? - [GitLab](https://gitlab.com) diff --git a/docs/src/docPages/overview/upgrade-guide.md b/docs/src/docPages/overview/upgrade-guide.md index df195d26..fd557dde 100644 --- a/docs/src/docPages/overview/upgrade-guide.md +++ b/docs/src/docPages/overview/upgrade-guide.md @@ -13,7 +13,7 @@ The new API will look pretty familiar too you, but there are a ton of changes th ### 1. Explicitly register the Document, Text and Paragraph extensions -Tiptap 1 tried to hide a few required extensions from you. Be sure to explicitly import 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`. Be sure to explicitly import the [Document](/api/extensions/document), [Paragraph](/api/extensions/paragraph) and [Text](/api/extensions/text) extensions. ```js import Document from '@tiptap/extension-document' @@ -30,6 +30,8 @@ new Editor({ }) ``` +The `useBuiltInExtensions` setting has been removed. + ### 2. New document type **We renamed the default `Document` type from `doc` to `document`.** To keep it like that, use your own implementation of the `Document` node or migrate the stored JSON to use the new name. diff --git a/docs/src/links.yaml b/docs/src/links.yaml index 65987c8e..8a512385 100644 --- a/docs/src/links.yaml +++ b/docs/src/links.yaml @@ -98,7 +98,6 @@ items: - title: Editor link: /api/editor/ - draft: true - title: Extensions link: /api/extensions/ items: