diff --git a/docs/src/docPages/api/commands.md b/docs/src/docPages/api/commands.md index ab6fbb16..ca02b800 100644 --- a/docs/src/docPages/api/commands.md +++ b/docs/src/docPages/api/commands.md @@ -141,4 +141,4 @@ Have a look at all of the core commands listed below. They should give you a goo ## Add your own commands All extensions can add additional commands (and most do), check out the specific [documentation for the provided nodes](/api/nodes), [marks](/api/marks), and [extensions](/api/extensions) to learn more about those. -Of course, you can [add your custom extensions](/guide/build-custom-extensions) with custom commands aswell. +Of course, you can [add your custom extensions](/guide/build-extensions) with custom commands aswell. diff --git a/docs/src/docPages/api/editor.md b/docs/src/docPages/api/editor.md index f4a1e99f..5f3c08ef 100644 --- a/docs/src/docPages/api/editor.md +++ b/docs/src/docPages/api/editor.md @@ -101,7 +101,7 @@ new Editor({ | `null` | Disables autofocus. | ### Enable input rules -By default, tiptap enables all [input rules](/guide/build-custom-extensions/#input-rules). With `enableInputRules` you can disable that. +By default, tiptap enables all [input rules](/guide/build-extensions/#input-rules). With `enableInputRules` you can disable that. ```js import { Editor } from '@tiptap/core' @@ -115,7 +115,7 @@ new Editor({ ``` ### Enable paste rules -By default, tiptap enables all [paste rules](/guide/build-custom-extensions/#paste-rules). With `enablePasteRules` you can disable that. +By default, tiptap enables all [paste rules](/guide/build-extensions/#paste-rules). With `enablePasteRules` you can disable that. ```js import { Editor } from '@tiptap/core' diff --git a/docs/src/docPages/api/extensions.md b/docs/src/docPages/api/extensions.md index aa9c37cc..1b0b2fc5 100644 --- a/docs/src/docPages/api/extensions.md +++ b/docs/src/docPages/api/extensions.md @@ -41,7 +41,7 @@ const editor = new Editor({ ], ``` -Learn [more about custom extensions in our guide](/guide/build-custom-extensions). +Learn [more about custom extensions in our guide](/guide/build-extensions). ### ProseMirror plugins ProseMirror has a fantastic eco system with many amazing plugins. If you want to use one of them, you can register them with tiptap like that: diff --git a/docs/src/docPages/guide/build-custom-extensions.md b/docs/src/docPages/guide/build-extensions.md similarity index 95% rename from docs/src/docPages/guide/build-custom-extensions.md rename to docs/src/docPages/guide/build-extensions.md index 4408a58a..119cd228 100644 --- a/docs/src/docPages/guide/build-custom-extensions.md +++ b/docs/src/docPages/guide/build-extensions.md @@ -1,4 +1,4 @@ -# Build custom extensions +# Build extensions ## toc @@ -354,6 +354,37 @@ const CustomStrike = Strike.extend({ }) ``` +### Events +You can even move your [event listeners](/api/events) to a separate extension. Here is an example with listeners for all events: + +```js +import { Extension } from '@tiptap/core' + +const CustomExtension = Extension.create({ + onCreate() { + // The editor is ready. + }, + onUpdate() { + // The content has changed. + }, + onSelection() { + // The selection has changed. + }, + onTransaction({ transaction }) { + // The editor state has changed. + }, + onFocus({ event }) { + // The editor is focused. + }, + onBlur({ event }) { + // The editor isn’t focused anymore. + }, + onDestroy() { + // The editor is being destroyed. + }, +}) +``` + ### Node views (Advanced) For advanced use cases, where you need to execute JavaScript inside your nodes, for example to render a sophisticated link preview, you need to learn about node views. diff --git a/docs/src/docPages/guide/custom-styling.md b/docs/src/docPages/guide/custom-styling.md index 168556c7..01febff5 100644 --- a/docs/src/docPages/guide/custom-styling.md +++ b/docs/src/docPages/guide/custom-styling.md @@ -28,7 +28,8 @@ p { ## Option 2: Add custom classes Most extensions have a `class` option, which you can use to add a custom CSS class to the HTML tag. -Most extensions allow you to add attributes to the rendered HTML through the `HTMLAttributes` configuration. You can use that to add a custom class (or any other attribute): +### Extensions +Most extensions allow you to add attributes to the rendered HTML through the `HTMLAttributes` option. You can use that to add a custom class (or any other attribute). That’s also very helpful, when you work with [Tailwind CSS](https://tailwindcss.com/). ```js new Editor({ @@ -58,6 +59,19 @@ The rendered HTML will look like that: If there are already classes defined by the extensions, your classes will be added. +### Editor +You can even pass classes to the element which contains the editor like that: + +```js +new Editor({ + editorProps: { + attributes: { + class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none', + } + }, +}) +``` + ## Option 3: Customize the HTML You can even customize the markup for every extension. This will make a custom bold extension that doesn’t render a `` tag, but a `` tag: diff --git a/docs/src/docPages/overview/upgrade-guide.md b/docs/src/docPages/overview/upgrade-guide.md index d58c8944..20d78f66 100644 --- a/docs/src/docPages/overview/upgrade-guide.md +++ b/docs/src/docPages/overview/upgrade-guide.md @@ -78,7 +78,7 @@ const CustomExtension = Node.create({ }) ``` -Read more about [all the nifty details building custom extensions](/guide/build-custom-extensions) in our guide. +Read more about [all the nifty details building custom extensions](/guide/build-extensions) in our guide. ### Renamed settings and methods [We renamed a lot of settings and methods](/api/editor). Hopefully you can migrate to the new API with search & replace. Here is a list of what changed: diff --git a/docs/src/links.yaml b/docs/src/links.yaml index b091e467..778863be 100644 --- a/docs/src/links.yaml +++ b/docs/src/links.yaml @@ -47,12 +47,12 @@ - title: Create a toolbar link: /guide/create-a-toolbar draft: true - - title: Add custom styling + - title: Custom styling link: /guide/custom-styling - title: Store content link: /guide/store-content - - title: Build custom extensions - link: /guide/build-custom-extensions + - title: Build extensions + link: /guide/build-extensions - title: Define node views link: /guide/node-views draft: true