@use-kona/editor 0.1.30 → 0.1.32

package/dist/core/createEditable.js

@@ -3,7 +3,7 @@ import { useStore } from "@nanostores/react";
 import is_hotkey from "is-hotkey";
 import { atom } from "nanostores";
 import react, { isValidElement, useCallback, useState } from "react";
-import { Editor, Element, Path, Transforms } from "slate";
+import { Editor, Element, Path, Range, Transforms } from "slate";
 import { Editable, ReactEditor, useReadOnly } from "slate-react";
 import { BaseElement } from "../elements/BaseElement.js";
 import { Block } from "../elements/Block.js";
@@ -128,11 +128,10 @@ const createEditable = (editor, plugins)=>({ readOnly })=>{
                     at: editor.selection?.focus,
                     match: (n)=>Element.isElement(n) && Editor.isBlock(editor, n)
                 });
-                if (!currentBlock) return;
-                if (editor.selection?.focus.offset !== 0) return;
+                if (!currentBlock || !editor.selection || !Range.isCollapsed(editor.selection) || !Editor.isStart(editor, editor.selection.focus, currentBlock[1])) return;
                 const prevBlock = Editor.previous(editor, {
                     at: currentBlock[1],
-                    match: (n)=>Element.isElement(n),
+                    match: (n)=>Element.isElement(n) && Editor.isBlock(editor, n),
                     voids: true
                 });
                 if (prevBlock && Editor.isVoid(editor, prevBlock[0])) {

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.32",
   "type": "module",
   "exports": {
     ".": "./src/index.ts"

package/src/core/createEditable.spec.tsx

@@ -0,0 +1,87 @@
+// @vitest-environment jsdom
+import { act, cleanup, fireEvent, render } from '@testing-library/react';
+import { Node, Transforms } from 'slate';
+import { ReactEditor, Slate } from 'slate-react';
+import { afterEach, expect, it } from 'vitest';
+import type { IPlugin } from '../types';
+import { createEditable } from './createEditable';
+import { createEditor } from './createEditor';
+
+afterEach(cleanup);
+
+it.each([
+  {
+    name: 'after an inline void deletes only the chip',
+    point: { path: [1, 2], offset: 0 },
+    text: ['Previous link.', 'Keep this text '],
+  },
+  {
+    name: 'at a paragraph start merges text rather than selecting a preceding inline void',
+    point: { path: [1, 0], offset: 0 },
+    text: ['Previous link.Keep this text delete me'],
+  },
+])('Backspace $name', async ({ point, text }) => {
+  const plugin: IPlugin = {
+    blocks: [
+      {
+        type: 'chip',
+        isInline: true,
+        isVoid: true,
+        render: (props) => (
+          <span {...props.attributes}>
+            {props.children}
+            <span contentEditable={false}>Chip</span>
+          </span>
+        ),
+      },
+    ],
+    leafs: [
+      {
+        render: (props) => <span {...props.attributes}>{props.children}</span>,
+      },
+    ],
+  };
+  const editor = createEditor([plugin])();
+  const Editable = createEditable(editor, [plugin]);
+  const value = [
+    {
+      type: 'paragraph',
+      children: [
+        { text: 'Previous ' },
+        { type: 'chip', children: [{ text: 'link' }] },
+        { text: '.' },
+      ],
+    },
+    {
+      type: 'paragraph',
+      children: [
+        { text: 'Keep this text ' },
+        { type: 'chip', children: [{ text: 'delete me' }] },
+        { text: '' },
+      ],
+    },
+  ];
+  const { container } = render(
+    <Slate editor={editor} initialValue={value}>
+      <Editable />
+    </Slate>,
+  );
+  const editable = container.querySelector<HTMLElement>('[data-slate-editor]')!;
+  // jsdom does not implement this browser property, which Slate checks for keyboard events.
+  Object.defineProperty(editable, 'isContentEditable', { value: true });
+  await act(async () => {
+    Transforms.select(editor, point);
+    ReactEditor.focus(editor);
+  });
+
+  await act(async () => {
+    const useDefault = fireEvent.keyDown(editable, {
+      key: 'Backspace',
+      keyCode: 8,
+    });
+    // jsdom does not dispatch the browser's beforeinput deletion.
+    if (useDefault) await editor.deleteBackward('character');
+  });
+
+  expect(editor.children.map(Node.string)).toEqual(text);
+});

package/src/core/createEditable.tsx

@@ -18,6 +18,7 @@ import {
   Element,
   type NodeEntry,
   Path,
+  Range,
   Transforms,
 } from 'slate';
 import {
@@ -192,12 +193,17 @@ export const createEditable =
           match: (n) => Element.isElement(n) && Editor.isBlock(editor, n),
         });
 
-        if (!currentBlock) return;
-        if (editor.selection?.focus.offset !== 0) return;
+        if (
+          !currentBlock ||
+          !editor.selection ||
+          !Range.isCollapsed(editor.selection) ||
+          !Editor.isStart(editor, editor.selection.focus, currentBlock[1])
+        )
+          return;
 
-        const prevBlock = Editor.previous(editor, {
+        const prevBlock = Editor.previous<CustomElement>(editor, {
           at: currentBlock[1],
-          match: (n) => Element.isElement(n),
+          match: (n) => Element.isElement(n) && Editor.isBlock(editor, n),
           voids: true,
         });
 

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,