@use-kona/editor 0.1.32 → 0.1.33

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

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;
   }