@use-kona/editor 0.1.31 → 0.1.33

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

@@ -11,6 +11,21 @@ class CollapsibleBlocksPlugin {
     }
     init(editor) {
         sectionTypesByEditor.set(editor, this.types);
+        const { insertBreak } = editor;
+        editor.insertBreak = ()=>{
+            const { selection } = editor;
+            const boundary = selection && Range.isCollapsed(selection) ? Editor.above(editor, {
+                match: (node, path)=>1 === path.length && Element.isElement(node) && this.types.includes(node.type) && true === node.collapsed
+            }) : void 0;
+            Editor.withoutNormalizing(editor, ()=>{
+                if (boundary) Transforms.setNodes(editor, {
+                    collapsed: false
+                }, {
+                    at: boundary[1]
+                });
+                insertBreak();
+            });
+        };
         return editor;
     }
     renderBlock = (props)=>{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@use-kona/editor",
-  "version": "0.1.31",
+  "version": "0.1.33",
   "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.spec.tsx

@@ -9,11 +9,13 @@ import {
   waitFor,
 } from '@testing-library/react';
 import React from 'react';
-import { type Editor, Transforms } from 'slate';
+import { Editor, Transforms } from 'slate';
 import { afterEach, describe, expect, it, vi } from 'vitest';
+import type { CustomElement } from '../../../types';
 import { KonaEditor } from '../../editor';
 import type { IPlugin } from '../../types';
 import { BasicFormattingPlugin } from '../BasicFormattingPlugin';
+import { BreaksPlugin } from '../BreaksPlugin';
 import { HeadingsPlugin } from '../HeadingsPlugin';
 import { CollapsibleBlocksPlugin } from './CollapsibleBlocksPlugin';
 
@@ -214,3 +216,139 @@ describe('CollapsibleBlocksPlugin', () => {
     });
   });
 });
+
+describe('Enter in collapsed sections', () => {
+  const headingTypes = [
+    HeadingsPlugin.HeadingLevel1,
+    HeadingsPlugin.HeadingLevel2,
+    HeadingsPlugin.HeadingLevel3,
+  ];
+
+  const renderEditor = (value: CustomElement[]) => {
+    let editor: Editor | undefined;
+    const capturePlugin: IPlugin = {
+      init(value) {
+        editor = value;
+        return value;
+      },
+    };
+    const { container, unmount } = render(
+      <KonaEditor
+        initialValue={value}
+        plugins={[
+          ...plugins(),
+          new BreaksPlugin({ breakNodes: headingTypes }),
+          capturePlugin,
+        ]}
+        onChange={() => {}}
+      />,
+    );
+
+    if (!editor) throw new Error('Expected editor to be initialized');
+
+    return { editor, container, cleanup: unmount };
+  };
+
+  it.each(headingTypes)(
+    'expands collapsed %s when Enter creates a paragraph after it',
+    async (type) => {
+      const { editor, container, cleanup } = renderEditor([
+        {
+          type,
+          collapsed: true,
+          children: [{ text: 'Heading' }],
+        },
+        { type: 'paragraph', children: [{ text: 'Existing content' }] },
+      ]);
+
+      try {
+        expect(container.querySelector('[hidden]')).not.toBeNull();
+
+        await act(async () => {
+          Transforms.select(editor, Editor.end(editor, [0]));
+          editor.insertBreak();
+          editor.insertText('New content');
+        });
+
+        expect(editor.children[0]).toMatchObject({ collapsed: false });
+        expect(editor.children[1]).toMatchObject({
+          type: 'paragraph',
+          children: [{ text: 'New content' }],
+        });
+        expect(container.querySelector('[hidden]')).toBeNull();
+        expect(container.textContent).toContain('New content');
+        expect(
+          container
+            .querySelector('[aria-label="Collapse section"]')
+            ?.getAttribute('aria-expanded'),
+        ).toBe('true');
+      } finally {
+        cleanup();
+      }
+    },
+  );
+
+  it('keeps a section collapsed when Enter inserts a paragraph before its heading', async () => {
+    const { editor, container, cleanup } = renderEditor([
+      {
+        type: HeadingsPlugin.HeadingLevel1,
+        collapsed: true,
+        children: [{ text: 'Heading' }],
+      },
+      { type: 'paragraph', children: [{ text: 'Existing content' }] },
+    ]);
+
+    try {
+      await act(async () => {
+        Transforms.select(editor, Editor.start(editor, [0]));
+        editor.insertBreak();
+      });
+
+      expect(editor.children[0]).toMatchObject({ type: 'paragraph' });
+      expect(editor.children[1]).toMatchObject({ collapsed: true });
+      expect(container.querySelectorAll('[hidden]')).toHaveLength(1);
+    } finally {
+      cleanup();
+    }
+  });
+
+  it('expands the edited section while preserving nested and adjacent collapsed sections', async () => {
+    const { editor, container, cleanup } = renderEditor([
+      {
+        type: HeadingsPlugin.HeadingLevel1,
+        collapsed: true,
+        children: [{ text: 'Heading' }],
+      },
+      {
+        type: HeadingsPlugin.HeadingLevel2,
+        collapsed: true,
+        children: [{ text: 'Nested heading' }],
+      },
+      { type: 'paragraph', children: [{ text: 'Nested content' }] },
+      {
+        type: HeadingsPlugin.HeadingLevel1,
+        collapsed: true,
+        children: [{ text: 'Adjacent heading' }],
+      },
+      { type: 'paragraph', children: [{ text: 'Adjacent content' }] },
+    ]);
+
+    try {
+      await act(async () => {
+        Transforms.select(editor, Editor.end(editor, [0]));
+        editor.insertBreak();
+        editor.insertText('New content');
+      });
+
+      expect(editor.children[0]).toMatchObject({ collapsed: false });
+      expect(editor.children[2]).toMatchObject({ collapsed: true });
+      expect(editor.children[4]).toMatchObject({ collapsed: true });
+      expect(container.querySelectorAll('[hidden]')).toHaveLength(2);
+      expect(
+        container.querySelectorAll('[aria-label="Expand section"]'),
+      ).toHaveLength(2);
+    } finally {
+      cleanup();
+    }
+  });
+});

package/src/plugins/CollapsibleBlocksPlugin/CollapsibleBlocksPlugin.tsx

@@ -18,6 +18,35 @@ export class CollapsibleBlocksPlugin implements IPlugin {
 
   init(editor: Editor) {
     sectionTypesByEditor.set(editor, this.types);
+
+    const { insertBreak } = editor;
+
+    editor.insertBreak = () => {
+      const { selection } = editor;
+      const boundary =
+        selection && Range.isCollapsed(selection)
+          ? Editor.above<CollapsibleElement>(editor, {
+              match: (node, path) =>
+                path.length === 1 &&
+                Element.isElement(node) &&
+                this.types.includes(node.type) &&
+                node.collapsed === true,
+            })
+          : undefined;
+
+      Editor.withoutNormalizing(editor, () => {
+        if (boundary) {
+          Transforms.setNodes<CollapsibleElement>(
+            editor,
+            { collapsed: false },
+            { at: boundary[1] },
+          );
+        }
+
+        insertBreak();
+      });
+    };
+
     return editor;
   }