@use-kona/editor 0.1.26 → 0.1.27

package/dist/plugins/TableOfContentsPlugin/TableOfContentsPlugin.js

@@ -4,6 +4,7 @@ import { map } from "nanostores";
 import { useEffect } from "react";
 import { Editor, Operation, Text } from "slate";
 import { ReactEditor } from "slate-react";
+import { scrollToHeading } from "./scrollToHeading.js";
 import styles_module from "./styles.module.js";
 class TableOfContentsPlugin {
     options;
@@ -48,10 +49,7 @@ class TableOfContentsPlugin {
             const handleMouseDown = (event)=>{
                 event.preventDefault();
                 const element = ReactEditor.toDOMNode(params.editor, node);
-                element?.scrollIntoView({
-                    behavior: 'smooth',
-                    block: 'start'
-                });
+                scrollToHeading(element);
             };
             return /*#__PURE__*/ jsx("div", {
                 className: styles_module[`h${level}`],

package/dist/plugins/TableOfContentsPlugin/scrollToHeading.js

@@ -0,0 +1,9 @@
+const scrollToHeading = (element)=>{
+    const options = {
+        behavior: 'smooth',
+        block: 'start',
+        container: 'nearest'
+    };
+    element.scrollIntoView(options);
+};
+export { scrollToHeading };

package/dist/src/plugins/TableOfContentsPlugin/scrollToHeading.d.ts

@@ -0,0 +1 @@
+export declare const scrollToHeading: (element: HTMLElement) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@use-kona/editor",
-  "version": "0.1.26",
+  "version": "0.1.27",
   "type": "module",
   "exports": {
     ".": "./src/index.ts"

package/src/plugins/TableOfContentsPlugin/TableOfContentsPlugin.tsx

@@ -5,6 +5,7 @@ import { Editor, type NodeEntry, Operation, Text } from 'slate';
 import { ReactEditor } from 'slate-react';
 import type { CustomElement } from '../../../types';
 import type { IPlugin, UiParams } from '../../types';
+import { scrollToHeading } from './scrollToHeading';
 import styles from './styles.module.css';
 
 type Options = {
@@ -75,10 +76,7 @@ export class TableOfContentsPlugin implements IPlugin {
             params.editor,
             node,
           ) as HTMLElement;
-          element?.scrollIntoView({
-            behavior: 'smooth',
-            block: 'start',
-          });
+          scrollToHeading(element);
         };
 
         return (

package/src/plugins/TableOfContentsPlugin/scrollToHeading.spec.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it, vi } from 'vitest';
+import { scrollToHeading } from './scrollToHeading';
+
+describe('scrollToHeading', () => {
+  it('scrolls only the closest scroll container', () => {
+    const scrollIntoView = vi.fn();
+    const element = { scrollIntoView } as unknown as HTMLElement;
+
+    scrollToHeading(element);
+
+    expect(scrollIntoView).toHaveBeenCalledWith({
+      behavior: 'smooth',
+      block: 'start',
+      container: 'nearest',
+    });
+  });
+});

package/src/plugins/TableOfContentsPlugin/scrollToHeading.ts

@@ -0,0 +1,13 @@
+type ScrollIntoViewOptionsWithContainer = ScrollIntoViewOptions & {
+  container: 'all' | 'nearest';
+};
+
+export const scrollToHeading = (element: HTMLElement) => {
+  const options: ScrollIntoViewOptionsWithContainer = {
+    behavior: 'smooth',
+    block: 'start',
+    container: 'nearest',
+  };
+
+  element.scrollIntoView(options);
+};