Merge pull request #3350 from udecode/feat/heading

Expose toc plugin queryHeading fuc
udecode · Jul 11, 2024 · 89ea61f · 89ea61f
2 parents 0493014 + 6fc347c
commit 89ea61f
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 11 deletions.
diff --git a/.changeset/metal-moose-prove.md b/.changeset/metal-moose-prove.md
@@ -0,0 +1,5 @@
+---
+"@udecode/plate-heading": patch
+---
+
+Expose toc plugin queryHeading fuction, this allows to customize the heading I need
diff --git a/packages/heading/src/toc/createTocPlugin.ts b/packages/heading/src/toc/createTocPlugin.ts
@@ -1,8 +1,18 @@
-import { createPluginFactory } from '@udecode/plate-common';
+import {
+  type PlateEditor,
+  type Value,
+  createPluginFactory,
+} from '@udecode/plate-common';
+
+import type { Heading } from './types';
 
 export const ELEMENT_TOC = 'toc';
 
-export const createTocPlugin = createPluginFactory({
+export interface TocPlugin {
+  queryHeading?: <V extends Value = Value>(editor: PlateEditor<V>) => Heading[];
+}
+
+export const createTocPlugin = createPluginFactory<TocPlugin>({
   isElement: true,
   isVoid: true,
   key: ELEMENT_TOC,

diff --git a/packages/heading/src/toc/hooks/useTocElement.ts b/packages/heading/src/toc/hooks/useTocElement.ts
@@ -10,7 +10,8 @@ import {
 
 import type { Heading } from '../types';
 
-import { getHeadingList, heightToTop } from '../../utils';
+import { heightToTop } from '../../utils';
+import { getHeadingList } from '../../utils/getHeadingList';
 
 export type useTocElementStateProps = {
   isScroll: boolean;
@@ -21,9 +22,10 @@ export const useTocElementState = ({
   isScroll,
   topOffset,
 }: useTocElementStateProps) => {
-  const headingList = useEditorSelector(getHeadingList, []);
   const editor = useEditorRef();
 
+  const headingList = useEditorSelector(getHeadingList, []);
+
   const containerRef = React.useRef<HTMLElement | null>(null);
 
   useEffect(() => {

diff --git a/packages/heading/src/toc/tocSideBar/useContentObserver.ts b/packages/heading/src/toc/tocSideBar/useContentObserver.ts
@@ -7,7 +7,7 @@ import {
   useEditorSelector,
 } from '@udecode/plate-common';
 
-import { getHeadingList } from '../../utils';
+import { getHeadingList } from '../../utils/getHeadingList';
 
 interface UseContentObserver {
   editorContentRef: React.RefObject<HTMLElement>;

diff --git a/packages/heading/src/toc/tocSideBar/useTocSideBarState.ts b/packages/heading/src/toc/tocSideBar/useTocSideBarState.ts
@@ -10,7 +10,8 @@ import {
 import type { Heading, TocSideBarProps } from '../types';
 
 import { useContentController, useTocController } from '.';
-import { checkIn, getHeadingList } from '../../utils';
+import { checkIn } from '../../utils';
+import { getHeadingList } from '../../utils/getHeadingList';
 
 export const useTocSideBarState = ({
   containerRef,

diff --git a/packages/heading/src/utils/getHeadingList.ts b/packages/heading/src/utils/getHeadingList.ts
@@ -1,12 +1,12 @@
 import {
   type PlateEditor,
   type TElement,
+  type Value,
   getNodeEntries,
   getNodeString,
+  getPluginOptions,
 } from '@udecode/plate-common';
 
-import type { Heading } from '../toc';
-
 import {
   ELEMENT_H1,
   ELEMENT_H2,
@@ -15,9 +15,10 @@ import {
   ELEMENT_H5,
   ELEMENT_H6,
 } from '../heading';
+import { ELEMENT_TOC, type Heading, type TocPlugin } from '../toc';
 import { isHeading } from './isHeading';
 
-const headingDepth: Record<string, number> = {
+export const headingDepth: Record<string, number> = {
   [ELEMENT_H1]: 1,
   [ELEMENT_H2]: 2,
   [ELEMENT_H3]: 3,
@@ -26,7 +27,15 @@ const headingDepth: Record<string, number> = {
   [ELEMENT_H6]: 6,
 };
 
-export const getHeadingList = (editor: PlateEditor) => {
+export const getHeadingList = <V extends Value = Value>(
+  editor: PlateEditor<V>
+) => {
+  const options = getPluginOptions<TocPlugin, V>(editor, ELEMENT_TOC);
+
+  if (options.queryHeading) {
+    return options.queryHeading<V>(editor);
+  }
+
   const headingList: Heading[] = [];
 
   const values = getNodeEntries(editor, {

diff --git a/packages/heading/src/utils/index.ts b/packages/heading/src/utils/index.ts
@@ -3,6 +3,5 @@
  */
 
 export * from './checkIn';
-export * from './getHeadingList';
 export * from './heightToTop';
 export * from './isHeading';