@use-kona/editor 0.1.29 → 0.1.30

package/src/plugins/CollapsibleBlocksPlugin/CollapsibleBlocksPlugin.spec.tsx

@@ -0,0 +1,216 @@
+// @vitest-environment jsdom
+import '@testing-library/jest-dom/vitest';
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+import React from 'react';
+import { type Editor, Transforms } from 'slate';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { KonaEditor } from '../../editor';
+import type { IPlugin } from '../../types';
+import { BasicFormattingPlugin } from '../BasicFormattingPlugin';
+import { HeadingsPlugin } from '../HeadingsPlugin';
+import { CollapsibleBlocksPlugin } from './CollapsibleBlocksPlugin';
+
+Object.assign(globalThis, { React });
+
+const initialValue = [
+  { type: HeadingsPlugin.HeadingLevel1, children: [{ text: 'Heading 1' }] },
+  { type: 'paragraph', children: [{ text: 'Hidden text' }] },
+  { type: HeadingsPlugin.HeadingLevel2, children: [{ text: 'Heading 2' }] },
+  { type: 'paragraph', children: [{ text: 'Nested text' }] },
+  { type: HeadingsPlugin.HeadingLevel1, children: [{ text: 'Next heading' }] },
+  { type: 'paragraph', children: [{ text: 'Visible text' }] },
+];
+
+const plugins = () => [
+  new BasicFormattingPlugin(),
+  new HeadingsPlugin(),
+  new CollapsibleBlocksPlugin([
+    HeadingsPlugin.HeadingLevel1,
+    HeadingsPlugin.HeadingLevel2,
+    HeadingsPlugin.HeadingLevel3,
+  ]),
+];
+
+afterEach(cleanup);
+
+describe('CollapsibleBlocksPlugin', () => {
+  it('hides nested configured blocks until the next equal-or-higher boundary and persists the collapsed state', async () => {
+    const onChange = vi.fn();
+
+    render(
+      <KonaEditor
+        initialValue={initialValue}
+        plugins={plugins()}
+        onChange={onChange}
+      />,
+    );
+
+    const [firstChevron] = screen.getAllByRole('button', {
+      name: 'Collapse section',
+    });
+    const hiddenText = screen.getByText('Hidden text');
+
+    fireEvent.click(firstChevron);
+
+    await waitFor(() => expect(hiddenText).not.toBeVisible());
+    expect(screen.getByText('Heading 2')).not.toBeVisible();
+    expect(screen.getByText('Nested text')).not.toBeVisible();
+    expect(screen.getByText('Next heading')).toBeVisible();
+    expect(screen.getByText('Visible text')).toBeVisible();
+    expect(
+      screen.getByRole('button', { name: 'Expand section' }),
+    ).toHaveAttribute('aria-expanded', 'false');
+    expect(onChange).toHaveBeenLastCalledWith([
+      {
+        type: HeadingsPlugin.HeadingLevel1,
+        collapsed: true,
+        children: [{ text: 'Heading 1' }],
+      },
+      ...initialValue.slice(1),
+    ]);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Expand section' }));
+    await waitFor(() => expect(screen.getByText('Hidden text')).toBeVisible());
+    expect(
+      screen.getAllByRole('button', { name: 'Collapse section' })[0],
+    ).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('renders chevrons for adjacent and empty sections', () => {
+    render(
+      <KonaEditor
+        initialValue={[
+          { type: HeadingsPlugin.HeadingLevel1, children: [{ text: 'One' }] },
+          { type: HeadingsPlugin.HeadingLevel2, children: [{ text: 'Two' }] },
+        ]}
+        plugins={plugins()}
+        onChange={() => {}}
+      />,
+    );
+
+    expect(
+      screen.getAllByRole('button', { name: 'Collapse section' }),
+    ).toHaveLength(2);
+  });
+
+  it('renders inside later block wrappers regardless of plugin array order', () => {
+    const wrapperPlugin: IPlugin = {
+      renderBlock: (props) => (
+        <div data-testid="block-wrapper">{props.children}</div>
+      ),
+    };
+
+    render(
+      <KonaEditor
+        initialValue={[
+          { type: HeadingsPlugin.HeadingLevel1, children: [{ text: 'One' }] },
+        ]}
+        plugins={[wrapperPlugin, ...plugins()]}
+        onChange={() => {}}
+      />,
+    );
+
+    expect(
+      screen
+        .getByRole('button', { name: 'Collapse section' })
+        .closest('[data-testid="block-wrapper"]'),
+    ).toBeInTheDocument();
+  });
+
+  it('keeps chevrons interactive in read-only editors', async () => {
+    const onChange = vi.fn();
+
+    render(
+      <KonaEditor
+        initialValue={initialValue}
+        plugins={plugins()}
+        readOnly
+        onChange={onChange}
+      />,
+    );
+
+    fireEvent.click(
+      screen.getAllByRole('button', { name: 'Collapse section' })[0],
+    );
+
+    await waitFor(() =>
+      expect(screen.getByText('Hidden text')).not.toBeVisible(),
+    );
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it('moves a hidden section selection back to its boundary', () => {
+    let editor: Editor | undefined;
+    const capturePlugin: IPlugin = {
+      init(value) {
+        editor = value;
+        return value;
+      },
+    };
+
+    render(
+      <KonaEditor
+        initialValue={initialValue}
+        plugins={[...plugins(), capturePlugin]}
+        onChange={() => {}}
+      />,
+    );
+
+    if (!editor) {
+      throw new Error('Expected editor to be initialized');
+    }
+
+    act(() => {
+      Transforms.select(editor, { path: [1, 0], offset: 2 });
+    });
+    fireEvent.click(
+      screen.getAllByRole('button', { name: 'Collapse section' })[0],
+    );
+
+    expect(editor.selection).toEqual({
+      anchor: { path: [0, 0], offset: 0 },
+      focus: { path: [0, 0], offset: 0 },
+    });
+  });
+
+  it('keeps a selection in the next equal-level section in place', () => {
+    let editor: Editor | undefined;
+    const capturePlugin: IPlugin = {
+      init(value) {
+        editor = value;
+        return value;
+      },
+    };
+
+    render(
+      <KonaEditor
+        initialValue={initialValue}
+        plugins={[...plugins(), capturePlugin]}
+        onChange={() => {}}
+      />,
+    );
+
+    if (!editor) {
+      throw new Error('Expected editor to be initialized');
+    }
+
+    act(() => {
+      Transforms.select(editor, { path: [4, 0], offset: 2 });
+    });
+    fireEvent.click(
+      screen.getAllByRole('button', { name: 'Collapse section' })[0],
+    );
+
+    expect(editor.selection).toEqual({
+      anchor: { path: [4, 0], offset: 2 },
+      focus: { path: [4, 0], offset: 2 },
+    });
+  });
+});

package/src/plugins/CollapsibleBlocksPlugin/CollapsibleBlocksPlugin.tsx

@@ -0,0 +1,191 @@
+import type { ReactNode } from 'react';
+import { Editor, Element, type Path, Range, Transforms } from 'slate';
+import { ReactEditor, type RenderElementProps, useSlate } from 'slate-react';
+import type { CustomElement } from '../../../types';
+import type { IPlugin } from '../../types';
+import styles from './styles.module.css';
+
+type CollapsibleElement = CustomElement & {
+  collapsed?: boolean;
+};
+
+const sectionTypesByEditor = new WeakMap<Editor, string[]>();
+
+export class CollapsibleBlocksPlugin implements IPlugin {
+  renderBlockPriority = -1;
+
+  constructor(private types: string[]) {}
+
+  init(editor: Editor) {
+    sectionTypesByEditor.set(editor, this.types);
+    return editor;
+  }
+
+  renderBlock = (props: RenderElementProps) => {
+    const editor = useSlate();
+    const path = ReactEditor.findPath(editor, props.element);
+
+    if (path.length !== 1) {
+      return props.children;
+    }
+
+    const isHidden = isHiddenByCollapsedBoundary(editor, path, this.types);
+
+    if (isHidden) {
+      return (
+        <div className={styles.hidden} data-collapsible-block-hidden hidden>
+          {props.children}
+        </div>
+      );
+    }
+
+    if (this.types.includes(props.element.type)) {
+      return (
+        <CollapsibleBoundary
+          editor={editor}
+          element={props.element as CollapsibleElement}
+          path={path}
+          types={this.types}
+        >
+          {props.children}
+        </CollapsibleBoundary>
+      );
+    }
+
+    return props.children;
+  };
+}
+
+const CollapsibleBoundary = ({
+  children,
+  editor,
+  element,
+  path,
+  types,
+}: {
+  children: ReactNode;
+  editor: Editor;
+  element: CollapsibleElement;
+  path: Path;
+  types: string[];
+}) => {
+  const isCollapsed = element.collapsed === true;
+
+  const toggle = () => {
+    const willCollapse = !isCollapsed;
+
+    Transforms.setNodes<CollapsibleElement>(
+      editor,
+      { collapsed: willCollapse },
+      { at: path },
+    );
+
+    if (willCollapse && isSelectionInsideSection(editor, path, types)) {
+      Transforms.select(editor, Editor.start(editor, path));
+    }
+  };
+
+  return (
+    <div className={styles.boundary}>
+      <button
+        aria-expanded={!isCollapsed}
+        aria-label={isCollapsed ? 'Expand section' : 'Collapse section'}
+        className={
+          isCollapsed ? styles.chevron : `${styles.chevron} ${styles.expanded}`
+        }
+        contentEditable={false}
+        onClick={toggle}
+        onMouseDown={(event) => event.preventDefault()}
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          fill="none"
+          height="16"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.5"
+          viewBox="0 0 24 24"
+          width="16"
+        >
+          <path d="M0 0h24v24H0z" fill="none" stroke="none" />
+          <path d="M9 6l6 6l-6 6" />
+        </svg>
+      </button>
+      {children}
+    </div>
+  );
+};
+
+export const getCollapsibleSectionPaths = (editor: Editor, path: Path) => {
+  const types = sectionTypesByEditor.get(editor);
+  if (!types || path.length !== 1) return null;
+
+  const boundary = editor.children[path[0]] as CollapsibleElement | undefined;
+  if (!boundary || !types.includes(boundary.type)) return null;
+
+  const end = getSectionEnd(editor, path[0], types);
+  return Array.from({ length: end - path[0] }, (_, index) => [path[0] + index]);
+};
+
+const isHiddenByCollapsedBoundary = (
+  editor: Editor,
+  path: Path,
+  types: string[],
+) => {
+  for (let index = 0; index < path[0]; index++) {
+    const node = editor.children[index] as CollapsibleElement;
+
+    if (
+      Element.isElement(node) &&
+      node.collapsed === true &&
+      types.includes(node.type) &&
+      path[0] < getSectionEnd(editor, index, types)
+    ) {
+      return true;
+    }
+  }
+
+  return false;
+};
+
+const isSelectionInsideSection = (
+  editor: Editor,
+  boundaryPath: Path,
+  types: string[],
+) => {
+  const { selection } = editor;
+
+  if (!selection || !Range.isCollapsed(selection)) {
+    return false;
+  }
+
+  const selectionIndex = selection.focus.path[0];
+
+  if (selectionIndex <= boundaryPath[0]) {
+    return false;
+  }
+
+  return selectionIndex < getSectionEnd(editor, boundaryPath[0], types);
+};
+
+const getSectionEnd = (
+  editor: Editor,
+  boundaryIndex: number,
+  types: string[],
+) => {
+  const boundary = editor.children[boundaryIndex] as CollapsibleElement;
+  const boundaryLevel = types.indexOf(boundary.type);
+
+  for (let index = boundaryIndex + 1; index < editor.children.length; index++) {
+    const node = editor.children[index];
+    const nodeLevel = Element.isElement(node) ? types.indexOf(node.type) : -1;
+
+    if (nodeLevel !== -1 && nodeLevel <= boundaryLevel) {
+      return index;
+    }
+  }
+
+  return editor.children.length;
+};

package/src/plugins/CollapsibleBlocksPlugin/index.ts

@@ -0,0 +1 @@
+export { CollapsibleBlocksPlugin } from './CollapsibleBlocksPlugin';

package/src/plugins/CollapsibleBlocksPlugin/styles.module.css

@@ -0,0 +1,37 @@
+.boundary {
+  position: relative;
+}
+
+.chevron {
+  align-items: center;
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  height: 16px;
+  inset-inline-start: -20px;
+  justify-content: center;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 16px;
+  font: inherit;
+  line-height: 1;
+  margin: 0;
+  padding: 0;
+  transition: transform 0.15s ease;
+}
+
+.expanded {
+  transform: translateY(-50%) rotate(90deg);
+}
+
+.chevron svg {
+  display: block;
+}
+
+.hidden {
+  display: none;
+}