@udecode/plate-heading - npm Package Compare versions

Comparing version 36.0.12 to 37.0.0

dist/index.d.ts

@@ -1,127 +0,26 @@
-import * as _udecode_plate_common_server from '@udecode/plate-common/server';
-import { HotkeyPlugin, PlatePlugin } from '@udecode/plate-common/server';
-import * as _udecode_slate from '@udecode/slate';
+import { H as Heading } from './types-CWozOOfD.js';
+export { b as HeadingConfig, a as HeadingLevel, c as HeadingPlugin } from './types-CWozOOfD.js';
 import * as _udecode_plate_common from '@udecode/plate-common';
-import { Value, PlateEditor, InsertNodesOptions, ENode } from '@udecode/plate-common';
-import { Path } from 'slate';
-import React$1 from 'react';
+import { PluginConfig, SlateEditor, InsertNodesOptions, TNode } from '@udecode/plate-common';
+import 'slate';
 
-declare const ELEMENT_H1 = "h1";
-declare const ELEMENT_H2 = "h2";
-declare const ELEMENT_H3 = "h3";
-declare const ELEMENT_H4 = "h4";
-declare const ELEMENT_H5 = "h5";
-declare const ELEMENT_H6 = "h6";
-declare const KEYS_HEADING: string[];
+type TocConfig = PluginConfig<'toc', {
+    queryHeading?: (editor: SlateEditor) => Heading[];
+}>;
+declare const TocPlugin: _udecode_plate_common.SlatePlugin<TocConfig>;
 
-interface HeadingPlugin extends HotkeyPlugin {
-}
-type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
-interface HeadingsPlugin {
-    /** Heading levels supported from 1 to `levels` */
-    levels?: HeadingLevel | HeadingLevel[];
-}
-
-declare const KEY_HEADING = "heading";
-/** Enables support for headings with configurable levels (from 1 to 6). */
-declare const createHeadingPlugin: <OP = HeadingsPlugin, OV extends _udecode_slate.Value = _udecode_slate.Value, OE extends _udecode_plate_common_server.PlateEditor<OV> = _udecode_plate_common_server.PlateEditor<OV>>(override?: Partial<PlatePlugin<_udecode_plate_common_server.NoInfer<OP>, OV, OE>> | undefined, overrideByKey?: _udecode_plate_common_server.OverrideByKey<OV, OE> | undefined) => PlatePlugin<_udecode_plate_common_server.NoInfer<OP>, OV, OE>;
-
-interface Heading {
-    depth: number;
-    id: string;
-    path: Path;
-    title: string;
-    type: string;
-}
-interface TocSideBarProps {
-    containerRef: React.RefObject<HTMLDivElement>;
-    className?: string;
-    onOpenChange?: (open: boolean) => void;
-    open?: boolean;
-    rootMargin?: string;
-    showHeader?: boolean;
-    style?: React.CSSProperties;
-    topOffset?: number;
-}
-interface UseContentController {
-    containerRef: React.RefObject<HTMLDivElement>;
-    isObserve: boolean;
-    rootMargin: string;
-    topOffset: number;
-}
-
-declare const ELEMENT_TOC = "toc";
-interface TocPlugin {
-    queryHeading?: <V extends Value = Value>(editor: PlateEditor<V>) => Heading[];
-}
-declare const createTocPlugin: <OP = TocPlugin, OV extends Value = Value, OE extends PlateEditor<OV> = PlateEditor<OV>>(override?: Partial<_udecode_plate_common.PlatePlugin<_udecode_plate_common.NoInfer<OP>, OV, OE>> | undefined, overrideByKey?: _udecode_plate_common.OverrideByKey<OV, OE> | undefined) => _udecode_plate_common.PlatePlugin<_udecode_plate_common.NoInfer<OP>, OV, OE>;
-
-type useTocElementStateProps = {
-    isScroll: boolean;
-    scrollContainerSelector?: string;
-    topOffset: number;
+declare const HEADING_KEYS: {
+    readonly h1: "h1";
+    readonly h2: "h2";
+    readonly h3: "h3";
+    readonly h4: "h4";
+    readonly h5: "h5";
+    readonly h6: "h6";
 };
-declare const useTocElementState: ({ isScroll, scrollContainerSelector, topOffset, }: useTocElementStateProps) => {
-    editor: _udecode_plate_common.PlateEditor<_udecode_slate.Value>;
-    headingList: Heading[];
-    onContentScroll: (el: HTMLElement, id: string, behavior?: ScrollBehavior) => void;
-};
-declare const useTocElement: ({ editor, onContentScroll, }: ReturnType<typeof useTocElementState>) => {
-    props: {
-        onClick: (e: React$1.MouseEvent<HTMLElement, globalThis.MouseEvent>, item: Heading, behavior: ScrollBehavior) => void;
-    };
-};
+declare const HEADING_LEVELS: ("h1" | "h2" | "h3" | "h4" | "h5" | "h6")[];
 
-declare const useContentController: ({ containerRef, isObserve, rootMargin, topOffset, }: UseContentController) => {
-    activeContentId: string;
-    onContentScroll: ({ behavior, el, id, }: {
-        behavior?: ScrollBehavior | undefined;
-        el: HTMLElement;
-        id: string;
-    }) => void;
-};
+declare const insertToc: <E extends SlateEditor>(editor: E, options?: InsertNodesOptions<E>) => void;
 
-interface UseTocController {
-    activeId: string;
-    isObserve: boolean;
-    showHeader: boolean;
-    tocRef: React$1.RefObject<HTMLElement>;
-}
-declare const useTocController: ({ activeId, isObserve, showHeader, tocRef, }: UseTocController) => void;
+declare const isHeading: (node: TNode) => unknown;
 
-declare const useTocSideBarState: ({ containerRef, onOpenChange, open, rootMargin, showHeader, style, topOffset, }: TocSideBarProps) => {
-    activeContentId: string;
-    editor: _udecode_plate_common.PlateEditor<_udecode_slate.Value>;
-    headingList: Heading[];
-    mouseInToc: boolean;
-    onContentScroll: ({ behavior, el, id, }: {
-        behavior?: ScrollBehavior | undefined;
-        el: HTMLElement;
-        id: string;
-    }) => void;
-    onOpenChange: ((open: boolean) => void) | undefined;
-    open: boolean;
-    setIsObserve: React$1.Dispatch<React$1.SetStateAction<boolean>>;
-    setMouseInToc: React$1.Dispatch<React$1.SetStateAction<boolean>>;
-    showHeader: boolean;
-    style: React$1.CSSProperties | undefined;
-    tocRef: React$1.RefObject<HTMLElement>;
-};
-declare const useTocSideBar: ({ editor, mouseInToc, onContentScroll, open, setIsObserve, setMouseInToc, tocRef, }: ReturnType<typeof useTocSideBarState>) => {
-    navProps: {
-        onMouseEnter: () => void;
-        onMouseLeave: (e: React$1.MouseEvent<HTMLElement, globalThis.MouseEvent>) => void;
-        ref: React$1.RefObject<HTMLElement>;
-    };
-    onContentClick: (e: React$1.MouseEvent<HTMLElement, globalThis.MouseEvent>, item: Heading, behavior?: ScrollBehavior) => void;
-};
-
-declare const insertToc: <V extends Value>(editor: PlateEditor<V>, options?: InsertNodesOptions<V>) => void;
-
-declare function checkIn(e: React.MouseEvent<HTMLElement, globalThis.MouseEvent>): boolean;
-
-declare const heightToTop: (ele: HTMLElement, editorContentRef?: React$1.RefObject<HTMLDivElement>) => number;
-
-declare const isHeading: (node: ENode<Value>) => unknown;
-
-export { ELEMENT_H1, ELEMENT_H2, ELEMENT_H3, ELEMENT_H4, ELEMENT_H5, ELEMENT_H6, ELEMENT_TOC, type Heading, type HeadingLevel, type HeadingPlugin, type HeadingsPlugin, KEYS_HEADING, KEY_HEADING, type TocPlugin, type TocSideBarProps, type UseContentController, checkIn, createHeadingPlugin, createTocPlugin, heightToTop, insertToc, isHeading, useContentController, useTocController, useTocElement, useTocElementState, type useTocElementStateProps, useTocSideBar, useTocSideBarState };
+export { HEADING_KEYS, HEADING_LEVELS, Heading, type TocConfig, TocPlugin, insertToc, isHeading };

dist/index.js

 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
@@ -20,10 +18,2 @@ var __export = (target, all) => {
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
@@ -34,522 +24,82 @@
 __export(src_exports, {
-  ELEMENT_H1: () => ELEMENT_H1,
-  ELEMENT_H2: () => ELEMENT_H2,
-  ELEMENT_H3: () => ELEMENT_H3,
-  ELEMENT_H4: () => ELEMENT_H4,
-  ELEMENT_H5: () => ELEMENT_H5,
-  ELEMENT_H6: () => ELEMENT_H6,
-  ELEMENT_TOC: () => ELEMENT_TOC,
-  KEYS_HEADING: () => KEYS_HEADING,
-  KEY_HEADING: () => KEY_HEADING,
-  checkIn: () => checkIn,
-  createHeadingPlugin: () => createHeadingPlugin,
-  createTocPlugin: () => createTocPlugin,
-  heightToTop: () => heightToTop,
+  HEADING_KEYS: () => HEADING_KEYS,
+  HEADING_LEVELS: () => HEADING_LEVELS,
+  HeadingPlugin: () => HeadingPlugin,
+  TocPlugin: () => TocPlugin,
   insertToc: () => insertToc,
-  isHeading: () => isHeading,
-  useContentController: () => useContentController,
-  useTocController: () => useTocController,
-  useTocElement: () => useTocElement,
-  useTocElementState: () => useTocElementState,
-  useTocSideBar: () => useTocSideBar,
-  useTocSideBarState: () => useTocSideBarState
+  isHeading: () => isHeading
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/heading/constants.ts
-var ELEMENT_H1 = "h1";
-var ELEMENT_H2 = "h2";
-var ELEMENT_H3 = "h3";
-var ELEMENT_H4 = "h4";
-var ELEMENT_H5 = "h5";
-var ELEMENT_H6 = "h6";
-var KEYS_HEADING = [
-  ELEMENT_H1,
-  ELEMENT_H2,
-  ELEMENT_H3,
-  ELEMENT_H4,
-  ELEMENT_H5,
-  ELEMENT_H6
+// src/lib/HeadingPlugin.ts
+var import_plate_common = require("@udecode/plate-common");
+
+// src/lib/constants.ts
+var HEADING_KEYS = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6"
+};
+var HEADING_LEVELS = [
+  HEADING_KEYS.h1,
+  HEADING_KEYS.h2,
+  HEADING_KEYS.h3,
+  HEADING_KEYS.h4,
+  HEADING_KEYS.h5,
+  HEADING_KEYS.h6
 ];
 
-// src/heading/createHeadingPlugin.ts
-var import_server = require("@udecode/plate-common/server");
-var KEY_HEADING = "heading";
-var createHeadingPlugin = (0, import_server.createPluginFactory)({
-  key: KEY_HEADING,
+// src/lib/HeadingPlugin.ts
+var HeadingPlugin = (0, import_plate_common.createTSlatePlugin)({
+  key: "heading",
   options: {
     levels: [1, 2, 3, 4, 5, 6]
-  },
-  then: (editor, { options: { levels } = {} }) => {
-    const plugins = [];
-    const headingLevels = Array.isArray(levels) ? levels : Array.from({ length: levels || 6 }, (_, i) => i + 1);
-    headingLevels.forEach((level) => {
-      const key = KEYS_HEADING[level - 1];
-      const plugin = {
-        deserializeHtml: {
-          rules: [
-            {
-              validNodeName: `H${level}`
-            }
-          ]
-        },
-        handlers: {
-          onKeyDown: import_server.onKeyDownToggleElement
-        },
-        isElement: true,
-        key,
-        options: {}
-      };
-      if (level < 4) {
-        plugin.options.hotkey = [`mod+opt+${level}`, `mod+shift+${level}`];
+  }
+}).extend(({ plugin }) => {
+  const {
+    options: { levels }
+  } = plugin;
+  const plugins = [];
+  const headingLevels = Array.isArray(levels) ? levels : Array.from({ length: levels || 6 }, (_, i) => i + 1);
+  headingLevels.forEach((level) => {
+    const plugin2 = (0, import_plate_common.createSlatePlugin)({
+      key: HEADING_LEVELS[level - 1],
+      node: { isElement: true },
+      parsers: {
+        html: {
+          deserializer: {
+            rules: [
+              {
+                validNodeName: `H${level}`
+              }
+            ]
+          }
+        }
       }
-      plugins.push(plugin);
     });
-    return {
-      plugins
-    };
-  }
+    plugins.push(plugin2);
+  });
+  return {
+    plugins
+  };
 });
 
-// src/toc/createTocPlugin.ts
-var import_plate_common = require("@udecode/plate-common");
-var ELEMENT_TOC = "toc";
-var createTocPlugin = (0, import_plate_common.createPluginFactory)({
-  isElement: true,
-  isVoid: true,
-  key: ELEMENT_TOC
+// src/lib/TocPlugin.ts
+var import_plate_common2 = require("@udecode/plate-common");
+var TocPlugin = (0, import_plate_common2.createTSlatePlugin)({
+  key: "toc",
+  node: { isElement: true, isVoid: true }
 });
 
-// src/toc/hooks/useTocElement.ts
-var import_react = __toESM(require("react"));
+// src/lib/transforms/insertToc.ts
 var import_plate_common3 = require("@udecode/plate-common");
-
-// src/utils/checkIn.ts
-function checkIn(e) {
-  const event = window.event;
-  const x = Number(event.clientX);
-  const y = Number(event.clientY);
-  const ele = e.target;
-  const div_x = Number(ele.getBoundingClientRect().left);
-  const div_x_width = Number(
-    ele.getBoundingClientRect().left + ele.clientWidth
-  );
-  const div_y = Number(ele.getBoundingClientRect().top);
-  const div_y_height = Number(
-    ele.getBoundingClientRect().top + ele.clientHeight
-  );
-  if (x > div_x && x < div_x_width && y > div_y && y < div_y_height) {
-    return true;
-  }
-  return false;
-}
-
-// src/utils/heightToTop.ts
-var heightToTop = (ele, editorContentRef) => {
-  const root = editorContentRef ? editorContentRef.current : document.body;
-  if (!root || !ele)
-    return 0;
-  const containerRect = root.getBoundingClientRect();
-  const elementRect = ele.getBoundingClientRect();
-  const scrollY = root.scrollTop;
-  const absoluteElementTop = elementRect.top + scrollY - containerRect.top;
-  return absoluteElementTop;
-};
-
-// src/utils/isHeading.ts
-var isHeading = (node) => {
-  return node.type && KEYS_HEADING.includes(node.type);
-};
-
-// src/utils/internal/getHeadingList.ts
-var import_plate_common2 = require("@udecode/plate-common");
-var headingDepth = {
-  [ELEMENT_H1]: 1,
-  [ELEMENT_H2]: 2,
-  [ELEMENT_H3]: 3,
-  [ELEMENT_H4]: 4,
-  [ELEMENT_H5]: 5,
-  [ELEMENT_H6]: 6
-};
-var getHeadingList = (editor) => {
-  const options = (0, import_plate_common2.getPluginOptions)(editor, ELEMENT_TOC);
-  if (options.queryHeading) {
-    return options.queryHeading(editor);
-  }
-  const headingList = [];
-  const values = (0, import_plate_common2.getNodeEntries)(editor, {
-    at: [],
-    match: (n) => isHeading(n)
-  });
-  if (!values)
-    return [];
-  Array.from(values, ([node, path]) => {
-    const { type } = node;
-    const title = (0, import_plate_common2.getNodeString)(node);
-    const depth = headingDepth[type];
-    const id = node.id;
-    title && headingList.push({ depth, id, path, title, type });
-  });
-  return headingList;
-};
-
-// src/toc/hooks/useTocElement.ts
-var useTocElementState = ({
-  isScroll,
-  scrollContainerSelector,
-  topOffset
-}) => {
-  const editor = (0, import_plate_common3.useEditorRef)();
-  const headingList = (0, import_plate_common3.useEditorSelector)(getHeadingList, []);
-  const containerRef = import_react.default.useRef(null);
-  (0, import_react.useEffect)(() => {
-    const container = scrollContainerSelector ? document.querySelector(scrollContainerSelector) : (0, import_plate_common3.toDOMNode)(editor, editor);
-    if (!container)
-      return;
-    containerRef.current = container;
-    return () => {
-      containerRef.current = null;
-    };
-  }, []);
-  const onContentScroll = import_react.default.useCallback(
-    (el, id, behavior = "instant") => {
-      var _a;
-      if (!containerRef.current)
-        return;
-      if (isScroll) {
-        (_a = containerRef.current) == null ? void 0 : _a.scrollTo({
-          behavior,
-          top: heightToTop(el, containerRef) - topOffset
-        });
-      } else {
-        const top = heightToTop(el) - topOffset;
-        window.scrollTo({ behavior, top });
-      }
-      setTimeout(() => {
-        (0, import_plate_common3.addSelectedRow)(editor, id);
-      }, 0);
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [isScroll, topOffset]
-  );
-  return { editor, headingList, onContentScroll };
-};
-var useTocElement = ({
-  editor,
-  onContentScroll
-}) => {
-  return {
-    props: {
-      onClick: (e, item, behavior) => {
-        e.preventDefault();
-        const { id, path } = item;
-        const node = (0, import_plate_common3.getNode)(editor, path);
-        if (!node)
-          return;
-        const el = (0, import_plate_common3.toDOMNode)(editor, node);
-        if (!el)
-          return;
-        onContentScroll(el, id, behavior);
-      }
-    }
-  };
-};
-
-// src/toc/tocSideBar/useContentController.ts
-var import_react3 = __toESM(require("react"));
-var import_plate_common5 = require("@udecode/plate-common");
-
-// src/toc/tocSideBar/useContentObserver.ts
-var import_react2 = __toESM(require("react"));
-var import_plate_common4 = require("@udecode/plate-common");
-var useContentObserver = ({
-  editorContentRef,
-  isObserve,
-  isScroll,
-  rootMargin,
-  status
-}) => {
-  const headingElementsRef = import_react2.default.useRef({});
-  const root = isScroll ? editorContentRef.current : void 0;
-  const editor = (0, import_plate_common4.useEditorRef)();
-  const headingList = (0, import_plate_common4.useEditorSelector)(getHeadingList, []);
-  const [activeId, setActiveId] = import_react2.default.useState("");
-  import_react2.default.useEffect(() => {
-    const callback = (headings) => {
-      if (!isObserve)
-        return;
-      headingElementsRef.current = headings.reduce((map, headingElement) => {
-        map[headingElement.target.id] = headingElement;
-        return map;
-      }, headingElementsRef.current);
-      const visibleHeadings = [];
-      Object.keys(headingElementsRef.current).forEach((key) => {
-        const headingElement = headingElementsRef.current[key];
-        if (headingElement.isIntersecting)
-          visibleHeadings.push(key);
-      });
-      const lastKey = Object.keys(headingElementsRef.current).pop();
-      visibleHeadings.length > 0 && setActiveId(visibleHeadings[0] || lastKey);
-      headingElementsRef.current = {};
-    };
-    const observer = new IntersectionObserver(callback, {
-      root,
-      rootMargin
-    });
-    headingList.forEach((item) => {
-      const { path } = item;
-      const node = (0, import_plate_common4.getNode)(editor, path);
-      if (!node)
-        return;
-      const element = (0, import_plate_common4.toDOMNode)(editor, node);
-      return element && observer.observe(element);
-    });
-    return () => {
-      observer.disconnect();
-    };
-  }, [headingList, isObserve, editor, root, rootMargin, status]);
-  return { activeId };
-};
-
-// src/toc/tocSideBar/useContentController.ts
-var useContentController = ({
-  containerRef,
-  isObserve,
-  rootMargin,
-  topOffset
-}) => {
-  var _a, _b;
-  const editor = (0, import_plate_common5.useEditorRef)();
-  const [editorContentRef, setEditorContentRef] = import_react3.default.useState(containerRef);
-  const isScrollRef = import_react3.default.useRef(false);
-  const isScroll = (((_a = editorContentRef.current) == null ? void 0 : _a.scrollHeight) || 0) > (((_b = editorContentRef.current) == null ? void 0 : _b.clientHeight) || 0);
-  isScrollRef.current = isScroll;
-  const scrollContainer = import_react3.default.useMemo(() => {
-    if (typeof window !== "object")
-      return;
-    return isScroll ? editorContentRef.current : window;
-  }, [isScroll]);
-  const [status, setStatus] = import_react3.default.useState(0);
-  const { activeId } = useContentObserver({
-    editorContentRef,
-    isObserve,
-    isScroll,
-    rootMargin,
-    status
-  });
-  const [activeContentId, setActiveContentId] = import_react3.default.useState(activeId);
-  const onContentScroll = ({
-    behavior = "instant",
-    el,
-    id
-  }) => {
-    var _a2;
-    setActiveContentId(id);
-    if (isScrollRef.current) {
-      (_a2 = editorContentRef.current) == null ? void 0 : _a2.scrollTo({
-        behavior,
-        top: heightToTop(el, editorContentRef) - topOffset
-      });
-    } else {
-      const top = heightToTop(el) - topOffset;
-      window.scrollTo({ behavior, top });
-    }
-    (0, import_plate_common5.addSelectedRow)(editor, id);
-  };
-  import_react3.default.useEffect(() => {
-    setEditorContentRef(containerRef);
-  }, [containerRef]);
-  import_react3.default.useEffect(() => {
-    setActiveContentId(activeId);
-  }, [activeId]);
-  import_react3.default.useEffect(() => {
-    if (!scrollContainer)
-      return;
-    const scroll = () => {
-      if (isObserve) {
-        setStatus(Date.now());
-      }
-    };
-    scrollContainer.addEventListener("scroll", scroll);
-    return () => {
-      scrollContainer.removeEventListener("scroll", scroll);
-    };
-  }, [isObserve, scrollContainer]);
-  return { activeContentId, onContentScroll };
-};
-
-// src/toc/tocSideBar/useTocController.ts
-var import_react5 = __toESM(require("react"));
-
-// src/toc/tocSideBar/useTocObserver.ts
-var import_react4 = __toESM(require("react"));
-var useTocObserver = ({
-  activeId,
-  isObserve,
-  tocRef
-}) => {
-  const root = tocRef.current;
-  const [visible, setVisible] = import_react4.default.useState(true);
-  const [offset, setOffset] = import_react4.default.useState(0);
-  const updateOffset = import_react4.default.useCallback(
-    (entries) => {
-      if (!isObserve)
-        return;
-      const [entry] = entries;
-      const { boundingClientRect, intersectionRatio, rootBounds } = entry;
-      if (!rootBounds)
-        return;
-      const halfHeight = ((root == null ? void 0 : root.getBoundingClientRect().height) || 0) / 2;
-      const isAbove = boundingClientRect.top < rootBounds.top;
-      const isBelow = boundingClientRect.bottom > rootBounds.bottom;
-      const isVisible = intersectionRatio === 1;
-      setVisible(isVisible);
-      if (!isVisible) {
-        const offset2 = isAbove ? boundingClientRect.top - rootBounds.top - halfHeight : isBelow ? boundingClientRect.bottom - rootBounds.bottom + halfHeight : 0;
-        setOffset(offset2);
-      }
-    },
-    [isObserve, root]
-  );
-  import_react4.default.useEffect(() => {
-    const observer = new IntersectionObserver(updateOffset, {
-      root
-    });
-    const element = root == null ? void 0 : root.querySelectorAll("#toc_item_active")[0];
-    if (element)
-      observer.observe(element);
-    return () => {
-      observer.disconnect();
-    };
-  }, [root, activeId, updateOffset]);
-  return { offset, visible };
-};
-
-// src/toc/tocSideBar/useTocController.ts
-var useTocController = ({
-  activeId,
-  isObserve,
-  showHeader,
-  tocRef
-}) => {
-  const [activeTocId, setActiveTocId] = import_react5.default.useState("");
-  const { offset, visible } = useTocObserver({
-    activeId: activeTocId,
-    isObserve,
-    showHeader,
-    tocRef
-  });
-  import_react5.default.useEffect(() => {
-    var _a;
-    if (!visible) {
-      const tocItemWrapper = (_a = tocRef.current) == null ? void 0 : _a.querySelector("#toc_wrap");
-      const top = (tocItemWrapper == null ? void 0 : tocItemWrapper.scrollTop) + offset;
-      tocItemWrapper == null ? void 0 : tocItemWrapper.scrollTo({ behavior: "instant", top });
-    }
-  }, [visible, offset, tocRef]);
-  import_react5.default.useEffect(() => {
-    setActiveTocId(activeId);
-  }, [activeId]);
-};
-
-// src/toc/tocSideBar/useTocSideBarState.ts
-var import_react6 = __toESM(require("react"));
-var import_plate_common6 = require("@udecode/plate-common");
-var useTocSideBarState = ({
-  containerRef,
-  onOpenChange,
-  open = true,
-  rootMargin = "0px 0px 0px 0px",
-  showHeader = true,
-  style,
-  topOffset = 0
-}) => {
-  const editor = (0, import_plate_common6.useEditorRef)();
-  const headingList = (0, import_plate_common6.useEditorSelector)(getHeadingList, []);
-  const tocRef = import_react6.default.useRef(null);
-  const [mouseInToc, setMouseInToc] = import_react6.default.useState(false);
-  const [isObserve, setIsObserve] = import_react6.default.useState(open);
-  const { activeContentId, onContentScroll } = useContentController({
-    containerRef,
-    isObserve,
-    rootMargin,
-    topOffset
-  });
-  useTocController({
-    activeId: activeContentId,
-    isObserve,
-    showHeader,
-    tocRef
-  });
-  return {
-    activeContentId,
-    editor,
-    headingList,
-    mouseInToc,
-    onContentScroll,
-    onOpenChange,
-    open,
-    setIsObserve,
-    setMouseInToc,
-    showHeader,
-    style,
-    tocRef
-  };
-};
-var useTocSideBar = ({
-  editor,
-  mouseInToc,
-  onContentScroll,
-  open,
-  setIsObserve,
-  setMouseInToc,
-  tocRef
-}) => {
-  import_react6.default.useEffect(() => {
-    if (mouseInToc) {
-      setIsObserve(false);
-    } else {
-      setIsObserve(true);
-    }
-  }, [mouseInToc]);
-  const onContentClick = import_react6.default.useCallback(
-    (e, item, behavior) => {
-      e.preventDefault();
-      const { id, path } = item;
-      const node = (0, import_plate_common6.getNode)(editor, path);
-      if (!node)
-        return;
-      const el = (0, import_plate_common6.toDOMNode)(editor, node);
-      if (!el)
-        return;
-      onContentScroll({ behavior, el, id });
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-  return {
-    navProps: {
-      onMouseEnter: () => {
-        !mouseInToc && open && setMouseInToc(true);
-      },
-      onMouseLeave: (e) => {
-        if (open) {
-          const isIn = checkIn(e);
-          isIn !== mouseInToc && setMouseInToc(isIn);
-        }
-      },
-      ref: tocRef
-    },
-    onContentClick
-  };
-};
-
-// src/toc/transforms/insertToc.ts
-var import_plate_common7 = require("@udecode/plate-common");
 var insertToc = (editor, options) => {
-  (0, import_plate_common7.insertNodes)(
+  (0, import_plate_common3.insertNodes)(
     editor,
     {
       children: [{ text: "" }],
-      type: ELEMENT_TOC
+      type: editor.getType(TocPlugin)
     },
@@ -559,26 +109,16 @@ options
 };
+
+// src/lib/utils/isHeading.ts
+var isHeading = (node) => {
+  return node.type && HEADING_LEVELS.includes(node.type);
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ELEMENT_H1,
-  ELEMENT_H2,
-  ELEMENT_H3,
-  ELEMENT_H4,
-  ELEMENT_H5,
-  ELEMENT_H6,
-  ELEMENT_TOC,
-  KEYS_HEADING,
-  KEY_HEADING,
-  checkIn,
-  createHeadingPlugin,
-  createTocPlugin,
-  heightToTop,
+  HEADING_KEYS,
+  HEADING_LEVELS,
+  HeadingPlugin,
+  TocPlugin,
   insertToc,
-  isHeading,
-  useContentController,
-  useTocController,
-  useTocElement,
-  useTocElementState,
-  useTocSideBar,
-  useTocSideBarState
+  isHeading
 });
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@udecode/plate-heading",
-  "version": "36.0.12",
+  "version": "37.0.0",
   "description": "Headings plugin for Plate",
-  "license": "MIT",
+  "keywords": [
+    "plate",
+    "plugin",
+    "slate"
+  ],
   "homepage": "https://platejs.org",
+  "bugs": {
+    "url": "https://github.com/udecode/plate/issues"
+  },
   "repository": {
@@ -12,12 +19,4 @@ "type": "git",
   },
-  "bugs": {
-    "url": "https://github.com/udecode/plate/issues"
-  },
+  "license": "MIT",
   "sideEffects": false,
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist/**/*"
-  ],
   "exports": {
@@ -29,8 +28,20 @@ ".": {
       "require": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.mjs",
+      "module": "./dist/react/index.mjs",
+      "require": "./dist/react/index.js"
     }
   },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*"
+  ],
   "scripts": {
+    "brl": "yarn p:brl",
     "build": "yarn p:build",
     "build:watch": "yarn p:build:watch",
-    "brl": "yarn p:brl",
     "clean": "yarn p:clean",
@@ -47,15 +58,10 @@ "lint": "yarn p:lint",
   "peerDependencies": {
-    "@udecode/plate-common": ">=36.0.6",
+    "@udecode/plate-common": ">=37.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "slate": ">=0.94.0",
+    "slate": ">=0.103.0",
     "slate-history": ">=0.93.0",
     "slate-hyperscript": ">=0.66.0",
-    "slate-react": ">=0.99.0"
+    "slate-react": ">=0.108.0"
   },
-  "keywords": [
-    "plate",
-    "plugin",
-    "slate"
-  ],
   "publishConfig": {
@@ -62,0 +68,0 @@ "access": "public"

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

119566

increased by16.96%

Number of package files

16

increased by100%

Lines of code

1445

increased by19.22%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes