@use-kona/editor 0.1.30 → 0.1.31

package/dist/plugins/CollapsibleBlocksPlugin/CollapsibleBlocksPlugin.js

@@ -17,7 +17,7 @@ class CollapsibleBlocksPlugin {
         const editor = useSlate();
         const path = ReactEditor.findPath(editor, props.element);
         if (1 !== path.length) return props.children;
-        const isHidden = isHiddenByCollapsedBoundary(editor, path, this.types);
+        const isHidden = isHiddenByCollapsedSection(editor, path);
         if (isHidden) return /*#__PURE__*/ jsx("div", {
             className: styles_module.hidden,
             "data-collapsible-block-hidden": true,
@@ -94,7 +94,9 @@ const getCollapsibleSectionPaths = (editor, path)=>{
             path[0] + index
         ]);
 };
-const isHiddenByCollapsedBoundary = (editor, path, types)=>{
+const isHiddenByCollapsedSection = (editor, path)=>{
+    const types = sectionTypesByEditor.get(editor);
+    if (!types) return false;
     for(let index = 0; index < path[0]; index++){
         const node = editor.children[index];
         if (Element.isElement(node) && true === node.collapsed && types.includes(node.type) && path[0] < getSectionEnd(editor, index, types)) return true;
@@ -118,4 +120,4 @@ const getSectionEnd = (editor, boundaryIndex, types)=>{
     }
     return editor.children.length;
 };
-export { CollapsibleBlocksPlugin, getCollapsibleSectionPaths };
+export { CollapsibleBlocksPlugin, getCollapsibleSectionPaths, isHiddenByCollapsedSection };

package/dist/plugins/DnDPlugin/DnDPlugin.js

@@ -6,7 +6,7 @@ import { NativeTypes } from "react-dnd-html5-backend";
 import { Editor, Element, Path, Transforms } from "slate";
 import { ReactEditor, useReadOnly, useSlate } from "slate-react";
 import { useEditorContext } from "../../provider.js";
-import { getCollapsibleSectionPaths } from "../CollapsibleBlocksPlugin/CollapsibleBlocksPlugin.js";
+import { getCollapsibleSectionPaths, isHiddenByCollapsedSection } from "../CollapsibleBlocksPlugin/CollapsibleBlocksPlugin.js";
 import { getNodesByNodeIds } from "./utils.js";
 class DnDPlugin {
     options;
@@ -34,11 +34,12 @@ class DnDPlugin {
         const dropTargetRef = useRef(null);
         const customType = options.customTypes?.[props.element.type];
         const currentElement = props.element;
+        const path = ReactEditor.findPath(editor, props.element);
+        const isHidden = isHiddenByCollapsedSection(editor, path);
         const [, drag, preview] = useDrag({
             type: customType?.type || DnDPlugin.DND_BLOCK_ELEMENT,
             item: ()=>{
                 const selected = $selectedNodes;
-                const path = ReactEditor.findPath(editor, props.element);
                 const sectionPaths = getCollapsibleSectionPaths(editor, path);
                 const nodes = sectionPaths ? getNodesAtPaths(editor, sectionPaths) : selected.length > 0 && selected.find((node)=>node.nodeId === currentElement.nodeId) ? getNodesByNodeIds(editor, selected.map((node)=>node.nodeId)) : [
                     structuredClone(props.element)
@@ -142,6 +143,7 @@ class DnDPlugin {
         if (this.options.ignoreNodes?.includes(props.element.type)) return props.children;
         if (editor.isInline(props.element)) return props.children;
         return /*#__PURE__*/ jsx("div", {
+            hidden: isHidden,
             children: options.renderBlock?.({
                 props,
                 dragRef: drag,

package/dist/src/plugins/CollapsibleBlocksPlugin/CollapsibleBlocksPlugin.d.ts

@@ -11,3 +11,4 @@ export declare class CollapsibleBlocksPlugin implements IPlugin {
     renderBlock: (props: RenderElementProps) => any;
 }
 export declare const getCollapsibleSectionPaths: (editor: Editor, path: Path) => number[][] | null;
+export declare const isHiddenByCollapsedSection: (editor: Editor, path: Path) => boolean;

package/package.json

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

package/src/plugins/CollapsibleBlocksPlugin/CollapsibleBlocksPlugin.tsx

@@ -29,7 +29,7 @@ export class CollapsibleBlocksPlugin implements IPlugin {
       return props.children;
     }
 
-    const isHidden = isHiddenByCollapsedBoundary(editor, path, this.types);
+    const isHidden = isHiddenByCollapsedSection(editor, path);
 
     if (isHidden) {
       return (
@@ -129,11 +129,10 @@ export const getCollapsibleSectionPaths = (editor: Editor, path: Path) => {
   return Array.from({ length: end - path[0] }, (_, index) => [path[0] + index]);
 };
 
-const isHiddenByCollapsedBoundary = (
-  editor: Editor,
-  path: Path,
-  types: string[],
-) => {
+export const isHiddenByCollapsedSection = (editor: Editor, path: Path) => {
+  const types = sectionTypesByEditor.get(editor);
+  if (!types) return false;
+
   for (let index = 0; index < path[0]; index++) {
     const node = editor.children[index] as CollapsibleElement;
 

package/src/plugins/DnDPlugin/DnDPlugin.spec.ts

@@ -1,5 +1,6 @@
 // @vitest-environment jsdom
 
+import '@testing-library/jest-dom/vitest';
 import { act, render, waitFor } from '@testing-library/react';
 import { createDragDropManager, type DragDropManager } from 'dnd-core';
 import React from 'react';
@@ -343,4 +344,65 @@ describe('DnDPlugin', () => {
     ]);
     await waitFor(() => expect(onChange).toHaveBeenCalled());
   });
+
+  it('hides custom drag wrappers for collapsed section content', async () => {
+    const manager = createDndManager();
+    const dndPlugin = new DnDPlugin({
+      onDropFiles: () => {},
+      renderBlock: ({ dragRef, dropRef, previewRef, props }) =>
+        React.createElement(
+          'div',
+          {
+            ...props.attributes,
+            'data-dnd-block': (props.element as { nodeId: string }).nodeId,
+            ref: (element) => dropRef(previewRef(element)),
+          },
+          React.createElement(
+            'button',
+            { contentEditable: false, ref: dragRef, type: 'button' },
+            'Drag',
+          ),
+          props.children,
+        ),
+    });
+
+    render(
+      React.createElement(
+        DndProvider,
+        { manager },
+        React.createElement(KonaEditor, {
+          initialValue: [
+            {
+              type: HeadingsPlugin.HeadingLevel1,
+              nodeId: 'section',
+              collapsed: true,
+              children: [{ text: 'Section' }],
+            },
+            {
+              type: 'paragraph',
+              nodeId: 'section-text',
+              children: [{ text: 'Section text' }],
+            },
+            {
+              type: HeadingsPlugin.HeadingLevel1,
+              nodeId: 'next-section',
+              children: [{ text: 'Next section' }],
+            },
+          ],
+          plugins: [
+            new HeadingsPlugin(),
+            new CollapsibleBlocksPlugin([HeadingsPlugin.HeadingLevel1]),
+            dndPlugin,
+          ],
+          onChange: () => {},
+        }),
+      ),
+    );
+
+    const hiddenDragBlock = document.querySelector(
+      '[data-dnd-block="section-text"]',
+    );
+
+    expect(hiddenDragBlock).not.toBeVisible();
+  });
 });

package/src/plugins/DnDPlugin/DnDPlugin.tsx

@@ -12,7 +12,10 @@ import {
 import type { CustomElement } from '../../../types';
 import { useEditorContext } from '../../provider';
 import type { IPlugin } from '../../types';
-import { getCollapsibleSectionPaths } from '../CollapsibleBlocksPlugin/CollapsibleBlocksPlugin';
+import {
+  getCollapsibleSectionPaths,
+  isHiddenByCollapsedSection,
+} from '../CollapsibleBlocksPlugin/CollapsibleBlocksPlugin';
 import type { EditorDragItem, NodeWithId, Options } from './types';
 import { getNodesByNodeIds } from './utils';
 
@@ -50,12 +53,13 @@ export class DnDPlugin implements IPlugin {
 
     const customType = options.customTypes?.[props.element.type];
     const currentElement = props.element as NodeWithId;
+    const path = ReactEditor.findPath(editor, props.element);
+    const isHidden = isHiddenByCollapsedSection(editor, path);
 
     const [, drag, preview] = useDrag({
       type: customType?.type || DnDPlugin.DND_BLOCK_ELEMENT,
       item: () => {
         const selected: Array<NodeWithId> = $selectedNodes;
-        const path = ReactEditor.findPath(editor, props.element);
         const sectionPaths = getCollapsibleSectionPaths(editor, path);
 
         /**
@@ -252,7 +256,7 @@ export class DnDPlugin implements IPlugin {
     }
 
     return (
-      <div>
+      <div hidden={isHidden}>
         {options.renderBlock?.({
           props,
           dragRef: drag,