From 7f1813f058f2c760daaf8fd90a5c37beb13f80e9 Mon Sep 17 00:00:00 2001 From: Nick Perez Date: Sat, 13 Jul 2024 11:37:33 +0200 Subject: [PATCH 01/11] docs: show the new React performance updates (#7) --- .../editor/getting-started/install/react.mdx | 28 +++++++++ src/content/guides/performance.mdx | 60 +++++++++++++++++-- 2 files changed, 84 insertions(+), 4 deletions(-) diff --git a/src/content/editor/getting-started/install/react.mdx b/src/content/editor/getting-started/install/react.mdx index a7739a7..5e68a2e 100644 --- a/src/content/editor/getting-started/install/react.mdx +++ b/src/content/editor/getting-started/install/react.mdx @@ -82,6 +82,14 @@ const Tiptap = () => { const editor = useEditor({ extensions, content, + /** + * This option gives us the control to enable the default behavior of rendering the editor immediately. + */ + immediatelyRender: true, + /** + * This option gives us the control to disable the default behavior of re-rendering the editor on every transaction. + */ + shouldRerenderOnTransaction: false, }) return ( @@ -114,6 +122,26 @@ const App = () => { export default App ``` +### Use editor state + +You can access editor state (like whether the editor can bold something) using the `useEditorState` hook. +This hook allows you to run a selector function on the editor and return a value based on the result. +This selector function will be re-ran whenever the editor state changes. Allowing you to optimize your components to only re-render when necessary. + +```tsx +import { useEditorState } from '@tiptap/react' + +const BoldButton = ({ editor }: { editor: Editor }) => { + const canBold = useEditorState({ editor, selector: (editor) => editor.isActive('bold') }) + + return ( + + ) +} +``` + ### Consume the Editor context in child components If you use the `EditorProvider` to setup your Tiptap editor, you can now easily access your editor instance from any child component using the `useCurrentEditor` hook. diff --git a/src/content/guides/performance.mdx b/src/content/guides/performance.mdx index 135e572..86d4915 100644 --- a/src/content/guides/performance.mdx +++ b/src/content/guides/performance.mdx @@ -21,7 +21,7 @@ When using Tiptap with React, the most common performance issue is that the edit - When using the `useEditor` hook, it by default will re-render the editor on every change. So, you should isolate the editor (and things that depend on it) in a separate component to prevent unnecessary re-renders. - The editor should be isolated from renders that don't affect it. For example, if you have a sidebar that doesn't interact with the editor, it should be in a separate component. -Luckily the solution for most of these issues is the same: isolate the editor in a separate component. Here is an example of how you can do this: +Luckily, the solution for most of these issues is the same: isolate the editor in a separate component. Here is an example of how you can do this: DO: isolate the editor in a separate component @@ -75,10 +75,62 @@ export default App These unrelated components will cause the editor to re-render more often than necessary, and make each render more expensive. -We are working on a more advanced solution to this problem, but for now, this is the best way to ensure your editor runs smoothly. +### Gain more control over rendering + +As of Tiptap v2.5.0, you can gain more control over rendering by using the `immediatelyRender` and `shouldRerenderOnTransaction` options. This can be useful if you want to prevent the editor from rendering immediately or on every transaction. + +```tsx +import { useEditor } from '@tiptap/react' +import deepEqual from 'deep-equal' + +function Component() { + const editor = useEditor({ + extensions, + content, + /** + * This option gives us the control to enable the default behavior of rendering the editor immediately. + */ + immediatelyRender: true, + /** + * This option gives us the control to disable the default behavior of re-rendering the editor on every transaction. + */ + shouldRerenderOnTransaction: false, + }) + + const editorState = useEditorState({ + editor, + // This function will be called every time the editor state changes + selector: (editorInstance: Editor) => ({ + // It will only re-render if the bold or italic state changes + isBold: editorInstance.isActive('bold'), + isItalic: editorInstance.isActive('italic'), + }), + // This function will be used to compare the previous and the next state + equalityFn: deepEqual, + }) + + return ( + <> + + + + + ) +} +``` ## React NodeView Integration -While NodeViews are supported, if you are using NodeViews in your editor, you should be aware that they can be expensive to render. +While NodeViews with React are supported, if you are using them in your editor, you should be aware that they can be expensive to render. -If you want the absolute best performance, your NodeViews should not be rendered by React. Instead you could use direct DOM manipulation to render them. This is because React is not optimized for rendering synchronously and NodeViews are expected to be rendered synchronously. This is especially important if you have a lot of NodeViews in your editor. +If you want the absolute best performance, your NodeViews ideally would not be rendered by React. Instead you could use direct DOM manipulation to render them. This is because React is not optimized for rendering synchronously and NodeViews are expected to be rendered synchronously. This is especially important if you have several instances of NodeViews throughout your editor. From ac8bc1e018d0c781f1aefd1c2c1d1e842cd85ef8 Mon Sep 17 00:00:00 2001 From: Nick the Sick Date: Sun, 14 Jul 2024 16:44:10 +0200 Subject: [PATCH 02/11] chore: add docs page for react perf example --- .../editor/getting-started/install/react.mdx | 28 ------------------- .../examples/advanced/react-performance.mdx | 15 ++++++++++ src/content/examples/sidebar.ts | 4 +++ 3 files changed, 19 insertions(+), 28 deletions(-) create mode 100644 src/content/examples/advanced/react-performance.mdx diff --git a/src/content/editor/getting-started/install/react.mdx b/src/content/editor/getting-started/install/react.mdx index 5e68a2e..a7739a7 100644 --- a/src/content/editor/getting-started/install/react.mdx +++ b/src/content/editor/getting-started/install/react.mdx @@ -82,14 +82,6 @@ const Tiptap = () => { const editor = useEditor({ extensions, content, - /** - * This option gives us the control to enable the default behavior of rendering the editor immediately. - */ - immediatelyRender: true, - /** - * This option gives us the control to disable the default behavior of re-rendering the editor on every transaction. - */ - shouldRerenderOnTransaction: false, }) return ( @@ -122,26 +114,6 @@ const App = () => { export default App ``` -### Use editor state - -You can access editor state (like whether the editor can bold something) using the `useEditorState` hook. -This hook allows you to run a selector function on the editor and return a value based on the result. -This selector function will be re-ran whenever the editor state changes. Allowing you to optimize your components to only re-render when necessary. - -```tsx -import { useEditorState } from '@tiptap/react' - -const BoldButton = ({ editor }: { editor: Editor }) => { - const canBold = useEditorState({ editor, selector: (editor) => editor.isActive('bold') }) - - return ( - - ) -} -``` - ### Consume the Editor context in child components If you use the `EditorProvider` to setup your Tiptap editor, you can now easily access your editor instance from any child component using the `useCurrentEditor` hook. diff --git a/src/content/examples/advanced/react-performance.mdx b/src/content/examples/advanced/react-performance.mdx new file mode 100644 index 0000000..4f3ea2c --- /dev/null +++ b/src/content/examples/advanced/react-performance.mdx @@ -0,0 +1,15 @@ +--- +title: React rendering performance +meta: + title: React rendering performance demo | Tiptap Editor Docs + description: Learn how to integrate Tiptap with React and improve the rendering performance of your editor. More in the docs! + category: Examples +--- + +import { CodeDemo } from '@/components/CodeDemo' + +## React Tiptap Editor Integration + +When using Tiptap with React, the most common performance issue is that the editor is re-rendered too often. This demo shows the difference between the default editor and the optimized rendering with `shouldRerenderOnTransaction`. + + diff --git a/src/content/examples/sidebar.ts b/src/content/examples/sidebar.ts index 11d1328..1b271e3 100644 --- a/src/content/examples/sidebar.ts +++ b/src/content/examples/sidebar.ts @@ -80,6 +80,10 @@ export const sidebarConfig: SidebarConfig = { title: 'Interactive React & Vue views', href: '/examples/advanced/interactive-react-and-vue-views', }, + { + title: 'React Performance', + href: '/examples/advanced/react-performance', + }, { title: 'Menus', href: '/examples/advanced/menus', From 38138929238e78bf0f8a561c4d50907ed70d1c1a Mon Sep 17 00:00:00 2001 From: ThisDavidRichard <147505039+ThisDavidRichard@users.noreply.github.com> Date: Sun, 14 Jul 2024 18:03:52 +0200 Subject: [PATCH 03/11] Added references for react performance --- .../editor/getting-started/install/react.mdx | 3 +++ src/content/guides/index.mdx | 15 +++++++++++++++ src/content/guides/performance.mdx | 2 ++ 3 files changed, 20 insertions(+) diff --git a/src/content/editor/getting-started/install/react.mdx b/src/content/editor/getting-started/install/react.mdx index a7739a7..6295f19 100644 --- a/src/content/editor/getting-started/install/react.mdx +++ b/src/content/editor/getting-started/install/react.mdx @@ -144,3 +144,6 @@ Since the EditorContent component is rendered by the `EditorProvider` component, slotAfter={} /> ``` + +## Optimize your performance +We strongly recommend visiting the [React Performance Guide](/guides/performance) to integrate the Tiptap Editor efficiently. This will help you avoid potential issues as your app scales. diff --git a/src/content/guides/index.mdx b/src/content/guides/index.mdx index 6311438..ffd747f 100644 --- a/src/content/guides/index.mdx +++ b/src/content/guides/index.mdx @@ -46,6 +46,21 @@ Tiptap Guides provide practical advice on configuring your editor, enhancing the + + + + Essential +
+ + How to make sure your editor is integrated performantly? + +
+ + Editor + + + + diff --git a/src/content/guides/performance.mdx b/src/content/guides/performance.mdx index 86d4915..4e5a168 100644 --- a/src/content/guides/performance.mdx +++ b/src/content/guides/performance.mdx @@ -16,6 +16,8 @@ Tiptap is a very performant editor (even able to edit an entire book!), often wh ## React Tiptap Editor Integration + + When using Tiptap with React, the most common performance issue is that the editor is re-rendered too often. This can happen for several reasons: - When using the `useEditor` hook, it by default will re-render the editor on every change. So, you should isolate the editor (and things that depend on it) in a separate component to prevent unnecessary re-renders. From bfce0d58417f32c2baacda92b5f203ae27330c82 Mon Sep 17 00:00:00 2001 From: ThisDavidRichard <147505039+ThisDavidRichard@users.noreply.github.com> Date: Sun, 14 Jul 2024 18:04:55 +0200 Subject: [PATCH 04/11] Fixed spelling in sidebar --- src/content/examples/sidebar.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/examples/sidebar.ts b/src/content/examples/sidebar.ts index 1b271e3..e579db9 100644 --- a/src/content/examples/sidebar.ts +++ b/src/content/examples/sidebar.ts @@ -81,7 +81,7 @@ export const sidebarConfig: SidebarConfig = { href: '/examples/advanced/interactive-react-and-vue-views', }, { - title: 'React Performance', + title: 'React performance', href: '/examples/advanced/react-performance', }, { From e34e1984e0a5ab553b0dc8cf84c66553c08b632b Mon Sep 17 00:00:00 2001 From: Nick the Sick Date: Mon, 15 Jul 2024 17:10:54 +0200 Subject: [PATCH 05/11] style: minor naming change --- src/content/editor/extensions/functionality/export.mdx | 4 ++-- src/content/editor/extensions/functionality/import.mdx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/editor/extensions/functionality/export.mdx b/src/content/editor/extensions/functionality/export.mdx index 586a268..21e2074 100644 --- a/src/content/editor/extensions/functionality/export.mdx +++ b/src/content/editor/extensions/functionality/export.mdx @@ -19,7 +19,7 @@ extension: import { Callout } from '@/components/ui/Callout' import { CodeDemo } from '@/components/CodeDemo' -Export documents from various formats like docx, odt, and markdown and convert them from Tiptap's JSON format. +Export Tiptap's editor content to various formats like docx, odt, and markdown. This extension is accessible to anyone with a Tiptap account. To install the extension you need @@ -110,7 +110,7 @@ const editor = new Editor({ ```js // Do a simple export to docx // Supported formats: docx, odt, md and gfm -editor.chain().export({ format: 'docx' }).focus().run() +editor.chain().focus().export({ format: 'docx' }).run() ``` ### Customize the export behavior diff --git a/src/content/editor/extensions/functionality/import.mdx b/src/content/editor/extensions/functionality/import.mdx index e0617bd..dad2701 100644 --- a/src/content/editor/extensions/functionality/import.mdx +++ b/src/content/editor/extensions/functionality/import.mdx @@ -120,7 +120,7 @@ const editor = new Editor({ // The most simple way to import a file // This will import the uploaded file, replace the editor content // and focus the editor -editor.chain().import({ file }).focus().run() +editor.chain().focus().import({ file }).run() ``` ### Customize the import behavior From fec1aaf22e16875940813dc41db4a052f2b82f82 Mon Sep 17 00:00:00 2001 From: ThisDavidRichard <147505039+ThisDavidRichard@users.noreply.github.com> Date: Mon, 15 Jul 2024 19:08:03 +0200 Subject: [PATCH 06/11] Changed conversion naming --- .../documents/{convert-api.mdx => conversion.mdx} | 6 +++--- src/content/collaboration/sidebar.ts | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) rename src/content/collaboration/documents/{convert-api.mdx => conversion.mdx} (97%) diff --git a/src/content/collaboration/documents/convert-api.mdx b/src/content/collaboration/documents/conversion.mdx similarity index 97% rename from src/content/collaboration/documents/convert-api.mdx rename to src/content/collaboration/documents/conversion.mdx index 89b8af4..12c065e 100644 --- a/src/content/collaboration/documents/convert-api.mdx +++ b/src/content/collaboration/documents/conversion.mdx @@ -1,14 +1,14 @@ --- -title: Convert API Reference +title: Document conversion API meta: - title: Convert API Reference | Tiptap Collaboration + title: Document conversion API | Tiptap Collaboration description: Use Tiptap to convert documents from docx, odt or markdown to Tiptap category: Collaboration --- ## Tiptap Editor extensions -Instead of using the Convert API directly, you can use the Tiptap Editor extensions to import and export documents. +Instead of using the Document Conversion API directly, you can use the import and export Tiptap Editor extensions. - [Import Extension](/editor/extensions/functionality/import) - [Export Extension](/editor/extensions/functionality/export) diff --git a/src/content/collaboration/sidebar.ts b/src/content/collaboration/sidebar.ts index 319764b..516bb42 100644 --- a/src/content/collaboration/sidebar.ts +++ b/src/content/collaboration/sidebar.ts @@ -76,8 +76,8 @@ export const sidebarConfig: SidebarConfig = { href: '/collaboration/documents/content-injection', }, { - title: 'Convert API', - href: '/collaboration/documents/convert-api', + title: 'Conversion', + href: '/collaboration/documents/conversion', tags: ['Beta'], }, ], From c0c96ff63a6cf39c478ed1b94ab347819a626f6f Mon Sep 17 00:00:00 2001 From: ThisDavidRichard <147505039+ThisDavidRichard@users.noreply.github.com> Date: Mon, 15 Jul 2024 20:21:53 +0200 Subject: [PATCH 07/11] Added missing format info to import --- src/content/collaboration/documents/conversion.mdx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/content/collaboration/documents/conversion.mdx b/src/content/collaboration/documents/conversion.mdx index 12c065e..cbf9562 100644 --- a/src/content/collaboration/documents/conversion.mdx +++ b/src/content/collaboration/documents/conversion.mdx @@ -8,8 +8,7 @@ meta: ## Tiptap Editor extensions -Instead of using the Document Conversion API directly, you can use the import and export Tiptap Editor extensions. - +Instead of using the Document Conversion API directly, you can use the import and export Tiptap Editor extensions: - [Import Extension](/editor/extensions/functionality/import) - [Export Extension](/editor/extensions/functionality/export) @@ -17,7 +16,7 @@ Instead of using the Document Conversion API directly, you can use the import an - **Method**: `POST` -Convert a document to a Tiptap document. +Convert a `docx`,`odt`, or `markdown` file to a Tiptap document. ### Required headers From ddcd904054e3d18a3cd7cb6ef0ece39d974d44eb Mon Sep 17 00:00:00 2001 From: ThisDavidRichard <147505039+ThisDavidRichard@users.noreply.github.com> Date: Mon, 15 Jul 2024 20:43:48 +0200 Subject: [PATCH 08/11] Added more information about the Conversion API --- .../collaboration/documents/conversion.mdx | 26 +++++++++++++------ 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/src/content/collaboration/documents/conversion.mdx b/src/content/collaboration/documents/conversion.mdx index cbf9562..c594dd2 100644 --- a/src/content/collaboration/documents/conversion.mdx +++ b/src/content/collaboration/documents/conversion.mdx @@ -5,18 +5,25 @@ meta: description: Use Tiptap to convert documents from docx, odt or markdown to Tiptap category: Collaboration --- +import { Callout } from '@/components/ui/Callout' -## Tiptap Editor extensions +The document conversion API is capable of DOCX, ODT and Markdown conversion from and to Tiptap’s JSON format. -Instead of using the Document Conversion API directly, you can use the import and export Tiptap Editor extensions: -- [Import Extension](/editor/extensions/functionality/import) -- [Export Extension](/editor/extensions/functionality/export) + + You can also experiment with the Document Conversion API by heading over to our [Postman + Collection](https://www.postman.com/docking-module-explorer-14290287/workspace/tiptap-collaboration-public/collection/33042171-cc186a66-df41-4df8-9c6e-e91b20deffe5?action=share&creator=32651125). + -## /import +## Integrate into the editor +Tiptap offers editor extensions for importing and exporting documents. These extensions integrate the document conversion api. +So, instead of using the Document Conversion API directly, you can use the import and export Tiptap Editor extensions: +- [Editor Import Extension](/editor/extensions/functionality/import) +- [Editor Export Extension](/editor/extensions/functionality/export) -- **Method**: `POST` +## /import endpoint +The /import endpoint enables the conversion of `docx`, `odt`, or `markdown` files into Tiptap’s JSON format. Users can POST documents to this endpoint and use various parameters to customize how different document elements are handled during the conversion process. -Convert a `docx`,`odt`, or `markdown` file to a Tiptap document. +- **Method**: `POST` ### Required headers @@ -32,6 +39,7 @@ Convert a `docx`,`odt`, or `markdown` file to a Tiptap document. | `file` | `File` | The file to convert | ### Query parameters +Specify how source document elements should be mapped to ProseMirror nodes or marks and adjust the conversion to meet your specific styling and structural preferences. | Name | Default | Description | | ---------------- | ---------------- | -------------------------------------------------------------------- | @@ -55,7 +63,9 @@ Convert a `docx`,`odt`, or `markdown` file to a Tiptap document. | `link` | `link` | Defines which prosemirror mark is used for link conversion | | `code` | `code` | Defines which prosemirror mark is used for code conversion | -## /export +## /export endpoint +The /export endpoint converts Tiptap documents back into formats like `docx`, `odt`, or `markdown`. + - **Method**: `POST` From 1b8375aa9e1dd518ec59ce0679753a6d7ddc5829 Mon Sep 17 00:00:00 2001 From: Dominik Biedebach Date: Tue, 16 Jul 2024 08:48:53 +0200 Subject: [PATCH 09/11] chore: fix conversion api link --- src/content/editor/extensions/functionality/export.mdx | 2 +- src/content/editor/extensions/functionality/import.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/editor/extensions/functionality/export.mdx b/src/content/editor/extensions/functionality/export.mdx index 586a268..cc677f8 100644 --- a/src/content/editor/extensions/functionality/export.mdx +++ b/src/content/editor/extensions/functionality/export.mdx @@ -182,4 +182,4 @@ We're continuously working on improving the import & export extension, so if you ## More information -- [Convert API Reference](/collaboration/documents/convert-api) +- [Conversion API Reference](/collaboration/documents/conversion) diff --git a/src/content/editor/extensions/functionality/import.mdx b/src/content/editor/extensions/functionality/import.mdx index e0617bd..dd461fe 100644 --- a/src/content/editor/extensions/functionality/import.mdx +++ b/src/content/editor/extensions/functionality/import.mdx @@ -197,4 +197,4 @@ We're continuously working on improving the import & export extension, so if you ## More information -- [Convert API Reference](/collaboration/documents/convert-api) +- [Conversion API Reference](/collaboration/documents/conversion) From e2b16a4d10e5509121906cf002ee281f031c5420 Mon Sep 17 00:00:00 2001 From: Dominik Biedebach Date: Tue, 16 Jul 2024 08:49:06 +0200 Subject: [PATCH 10/11] Merge branch 'main' of github.com:ueberdosis/tiptap-docs From bdc0a8db11d61ecd197ae3a46b9703a7233547f0 Mon Sep 17 00:00:00 2001 From: Dominik Biedebach Date: Tue, 16 Jul 2024 10:25:35 +0200 Subject: [PATCH 11/11] update tableofcontents docs describing scrollParent options --- .../functionality/table-of-contents.mdx | 52 ++++++++++++------- 1 file changed, 32 insertions(+), 20 deletions(-) diff --git a/src/content/editor/extensions/functionality/table-of-contents.mdx b/src/content/editor/extensions/functionality/table-of-contents.mdx index 51ca5d2..d0e0c3c 100644 --- a/src/content/editor/extensions/functionality/table-of-contents.mdx +++ b/src/content/editor/extensions/functionality/table-of-contents.mdx @@ -3,15 +3,16 @@ title: Table of Contents extension tags: - type: pro meta: - title: Contents extension | Tiptap Editor Docs - description: Integrate a list of anchors to your document and collect all headlines in a nice TOC (Table of Contents). Learn more in the docs! - category: Editor + title: Contents extension | Tiptap Editor Docs + description: Integrate a list of anchors to your document and collect all headlines in a nice TOC (Table of Contents). Learn more in the docs! + category: Editor extension: - name: Table of contents - description: Add a table of contents of all your anchors or headlines. - type: extension - icon: List + name: Table of contents + description: Add a table of contents of all your anchors or headlines. + type: extension + icon: List --- + import { CodeDemo } from '@/components/CodeDemo' import { Callout } from '@/components/ui/Callout' @@ -20,10 +21,11 @@ The `TableOfContents` extension lets you get a list of anchors from your documen ## Install + - Integrate this pro extension by registering for a free [Tiptap - account](https://cloud.tiptap.dev/register) and following our [access - guide](/guides/pro-extensions) to Tiptap’s private repository. + Integrate this pro extension by registering for a free [Tiptap + account](https://cloud.tiptap.dev/register) and following our [access + guide](/guides/pro-extensions) to Tiptap’s private repository. Once done, you can install the extension from our private registry: @@ -35,6 +37,7 @@ npm install @tiptap-pro/extension-table-of-contents ## Settings ### anchorTypes + The types of the nodes you want to use for your Table of Content. By default this is `["heading"]` but in case you create your own custom Heading extension OR extend the existing one and use a different name, you can pass that name here. Default: `["heading"]` @@ -46,6 +49,7 @@ TableOfContents.configure({ ``` ### getIndex + This option can be used to customize how the item indexes are calculated. By default this is using an internal function but it can be overwritten to do some custom logic. ```js @@ -53,7 +57,7 @@ TableOfContents.configure({ getIndex: (anchor, previousAnchors, level) => { // do some custom logic, but for this example we will just return 1 return 1 - } + }, }) ``` @@ -74,6 +78,7 @@ TableOfContents.configure({ ``` ### getLevel + This option can be used to customize how item levels are generated. By default the normal level generation is used that checks for heading element level attributes. If you want to customize this because for example you want to include custom anchors in your heading generation, you can use this to do so. ```js @@ -81,11 +86,12 @@ TableOfContents.configure({ getLevel: (anchor, previousAnchors) => { // do some custom logic, but for this example we will just return 1 return 1 - } + }, }) ``` ### getId + A builder function that returns a unique ID for each heading. Inside the argument you get access to the headings text content (for example you want to generate IDs based on the text content of the heading). By default this is a function that uses the [uuid](https://www.npmjs.com/package/uuid) package to generate a unique ID. @@ -96,23 +102,25 @@ Default: `() => uuid()` // here we use an imaginary "slugify" function // you should probably also add a unique identifier to the slug TableOfContents.configure({ - getId: (content) => slugify(content) + getId: (content) => slugify(content), }) ``` ### scrollParent -The scroll parent you want to attach to. This is used to determine which heading currently is active or was already scrolled over. By default this is the window but you can pass any HTML element here. -Default: `window` +The scroll parent you want to attach to. This is used to determine which heading currently is active or was already scrolled over. By default this is a callback function that returns the window but you can pass a callback that returns any HTML element here. + +Default: `() => window` ```js // For example the editors DOM element itself is the scrolling element TableOfContents.configure({ - scrollParent: editor.view.dom + scrollParent: () => editor.view.dom, }) ``` ### onUpdate + The most important option that you must set to use this extension. This is a callback function that gets called whenever the Table of Content updates. You get access to an array of heading data (see below) which you can use to render your own Table of Content. To render the table of content you can render it by any means you want. You can use a framework like Vue, React or Svelte or you can use a simple templating engine like Handlebars or Pug. You can also use a simple `document.createElement` to render the table of content. @@ -145,7 +153,7 @@ TableOfContents.configure({ tocElement.appendChild(anchorElement) }) - } + }, }) ``` @@ -157,7 +165,7 @@ const [anchors, setAnchors] = useState([]) TableOfContents.configure({ onUpdate: (anchors) => { setAnchors(anchors) - } + }, }) ``` @@ -168,13 +176,14 @@ const anchors = ref([]) TableOfContents.configure({ onUpdate: (anchors) => { anchors.value = anchors - } + }, }) ``` ## Storage ### content + The heading content of the current document ```js @@ -182,6 +191,7 @@ editor.storage.tableOfContents.content ``` ### anchors + An array of HTML nodes ```js @@ -189,6 +199,7 @@ editor.storage.tableOfContents.anchors ``` ### scrollHandler + The scrollHandler used by the scroll function. Should not be changed or edited but could be used to manually bind this function somewhere else @@ -197,6 +208,7 @@ editor.storage.tableOfContents.scrollHandler() ``` ### scrollPosition + The current scrollPosition inside the scrollParent. ```js @@ -223,4 +235,4 @@ The array returned by the storage or the `onUpdate` function includes objects st } ``` -This should give you enough flexibility to render your own table of content. \ No newline at end of file +This should give you enough flexibility to render your own table of content.