@barocss/editor-view-react 0.1.0

package/test/EditorView.test.tsx

@@ -0,0 +1,218 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen, act } from '@testing-library/react';
+import { createRef } from 'react';
+import {
+  EditorView,
+  EditorViewLayer,
+  EditorViewContextProvider,
+  useEditorViewContext,
+  useOptionalEditorViewContext,
+} from '../src';
+
+function mockEditor() {
+  return {
+    getDocumentProxy: () => null,
+    on: () => {},
+    off: () => {},
+    dataStore: { getNode: () => null },
+    updateSelection: () => {},
+    executeCommand: () => false,
+  } as any;
+}
+
+describe('EditorView', () => {
+  it('renders root div with data-editor-view="true" and position relative', () => {
+    const editor = mockEditor();
+    const { container } = render(<EditorView editor={editor} />);
+    const root = container.firstElementChild;
+    expect(root?.getAttribute('data-editor-view')).toBe('true');
+    expect((root as HTMLElement)?.style?.position).toBe('relative');
+  });
+
+  it('renders content layer with data-bc-layer="content" and data-testid="editor-content"', () => {
+    const editor = mockEditor();
+    render(<EditorView editor={editor} />);
+    const content = screen.getByTestId('editor-content');
+    expect(content).toBeTruthy();
+    expect(content.getAttribute('data-bc-layer')).toBe('content');
+  });
+
+  it('applies options.className to root container', () => {
+    const editor = mockEditor();
+    const { container } = render(
+      <EditorView editor={editor} options={{ className: 'my-editor-root' }} />
+    );
+    const root = container.firstElementChild;
+    expect(root?.className).toContain('my-editor-root');
+  });
+
+  it('renders all overlay layers (decorator, selection, context, custom) by default', () => {
+    const editor = mockEditor();
+    const { container } = render(<EditorView editor={editor} />);
+    expect(container.querySelector('[data-bc-layer="decorator"]')).toBeTruthy();
+    expect(container.querySelector('[data-bc-layer="selection"]')).toBeTruthy();
+    expect(container.querySelector('[data-bc-layer="context"]')).toBeTruthy();
+    expect(container.querySelector('[data-bc-layer="custom"]')).toBeTruthy();
+  });
+
+  it('applies options.layers.* className and style to overlay layers', () => {
+    const editor = mockEditor();
+    const { container } = render(
+      <EditorView
+        editor={editor}
+        options={{
+          layers: {
+            decorator: { className: 'my-decorator-layer' },
+            selection: { style: { zIndex: 999 } },
+          },
+        }}
+      />
+    );
+    const decoratorLayer = container.querySelector('[data-bc-layer="decorator"]');
+    const selectionLayer = container.querySelector('[data-bc-layer="selection"]');
+    expect(decoratorLayer?.className).toContain('my-decorator-layer');
+    expect((selectionLayer as HTMLElement)?.style?.zIndex).toBe('999');
+  });
+
+  it('renders children inside custom layer when layers.custom or children present', () => {
+    const editor = mockEditor();
+    const { container } = render(
+      <EditorView editor={editor} options={{ layers: { custom: {} } }}>
+        <span data-testid="custom-child">Custom</span>
+      </EditorView>
+    );
+    const customLayer = container.querySelector('[data-bc-layer="custom"]');
+    expect(customLayer).toBeTruthy();
+    expect(screen.getByTestId('custom-child').textContent).toBe('Custom');
+  });
+
+  it('ref exposes getDecorator, contentEditableElement, exportDecorators, loadDecorators, convertModelSelectionToDOM, convertDOMSelectionToModel, convertStaticRangeToModel, defineDecoratorType', () => {
+    const editor = mockEditor();
+    const ref = createRef<any>();
+    render(<EditorView ref={ref} editor={editor} />);
+    const api = ref.current;
+    expect(api).toBeTruthy();
+    expect(typeof api.getDecorator).toBe('function');
+    expect(typeof api.exportDecorators).toBe('function');
+    expect(typeof api.loadDecorators).toBe('function');
+    expect(typeof api.convertModelSelectionToDOM).toBe('function');
+    expect(typeof api.convertDOMSelectionToModel).toBe('function');
+    expect(typeof api.convertStaticRangeToModel).toBe('function');
+    expect(typeof api.defineDecoratorType).toBe('function');
+    expect(api.getDecorator('nonexistent')).toBeUndefined();
+    const exported = api.exportDecorators();
+    expect(exported.version).toBe('1.0.0');
+    expect(Array.isArray(exported.targetDecorators)).toBe(true);
+    expect(Array.isArray(exported.patternDecorators)).toBe(true);
+    expect(api.contentEditableElement).toBe(screen.getByTestId('editor-content'));
+  });
+
+  it('ref.defineDecoratorType registers type; addDecorator applies schema defaults', () => {
+    const editor = mockEditor();
+    const ref = createRef<any>();
+    render(<EditorView ref={ref} editor={editor} />);
+    ref.current.defineDecoratorType('highlight', 'layer', {
+      dataSchema: { color: { type: 'string', default: 'yellow' } },
+    });
+    act(() => {
+      ref.current.addDecorator({
+        sid: 'd1',
+        stype: 'highlight',
+        category: 'layer',
+        data: {},
+      });
+    });
+    const list = ref.current.getDecorators();
+    expect(list.length).toBeGreaterThanOrEqual(1);
+    const d = list.find((x: { sid: string }) => x.sid === 'd1');
+    expect(d).toBeTruthy();
+    expect((d as { data?: { color?: string } }).data?.color).toBe('yellow');
+  });
+
+  it('ref.addDecorator accepts DecoratorGenerator and registers it', () => {
+    const editor = mockEditor();
+    const ref = createRef<any>();
+    render(<EditorView ref={ref} editor={editor} />);
+    const generator = {
+      sid: 'gen-1',
+      generate: () => [],
+    };
+    act(() => {
+      ref.current.addDecorator(generator);
+    });
+    expect(ref.current.decoratorGeneratorManager?.getGenerator('gen-1')).toBe(generator);
+  });
+});
+
+describe('EditorViewLayer', () => {
+  it('renders div with data-bc-layer and position absolute, pointer-events none', () => {
+    const { container } = render(<EditorViewLayer layer="selection" />);
+    const el = container.firstElementChild as HTMLElement;
+    expect(el?.getAttribute('data-bc-layer')).toBe('selection');
+    expect(el?.style?.position).toBe('absolute');
+    expect(el?.style?.pointerEvents).toBe('none');
+  });
+
+  it('uses default className and zIndex per layer type', () => {
+    const { container } = render(<EditorViewLayer layer="decorator" />);
+    const el = container.firstElementChild as HTMLElement;
+    expect(el?.className).toContain('barocss-editor-decorators');
+    expect(el?.style?.zIndex).toBe('10');
+  });
+
+  it('merges style prop with base style', () => {
+    const { container } = render(
+      <EditorViewLayer layer="custom" style={{ opacity: 0.5 }} />
+    );
+    const el = container.firstElementChild as HTMLElement;
+    expect(el?.style?.opacity).toBe('0.5');
+    expect(el?.style?.position).toBe('absolute');
+  });
+});
+
+describe('EditorViewContext', () => {
+  it('useEditorViewContext throws when used outside Provider', () => {
+    function Consumer() {
+      useEditorViewContext();
+      return null;
+    }
+    expect(() => render(<Consumer />)).toThrow(/must be used within EditorViewContext/);
+  });
+
+  it('useOptionalEditorViewContext returns null when outside Provider', () => {
+    function Consumer() {
+      const ctx = useOptionalEditorViewContext();
+      return <span data-testid="ctx">{ctx === null ? 'null' : 'value'}</span>;
+    }
+    render(<Consumer />);
+    expect(screen.getByTestId('ctx').textContent).toBe('null');
+  });
+
+  it('EditorViewContextProvider provides editor, selectionHandler, inputHandler, mutationObserverManager, setContentEditableElement', () => {
+    const editor = mockEditor();
+    function Consumer() {
+      const ctx = useEditorViewContext();
+      return (
+        <span
+          data-testid="ctx"
+          data-has-editor={!!ctx.editor}
+          data-has-selection-handler={!!ctx.selectionHandler}
+          data-has-input-handler={!!ctx.inputHandler}
+          data-has-mutation-manager={!!ctx.mutationObserverManager}
+          data-has-set-content-editable={!!ctx.setContentEditableElement}
+        />
+      );
+    }
+    render(
+      <EditorViewContextProvider editor={editor}>
+        <Consumer />
+      </EditorViewContextProvider>
+    );
+    const el = screen.getByTestId('ctx');
+    expect(el.getAttribute('data-has-editor')).toBe('true');
+    expect(el.getAttribute('data-has-selection-handler')).toBe('true');
+    expect(el.getAttribute('data-has-input-handler')).toBe('true');
+    expect(el.getAttribute('data-has-mutation-manager')).toBe('true');
+    expect(el.getAttribute('data-has-set-content-editable')).toBe('true');
+  });
+});

package/test/dom-sync.test.ts

@@ -0,0 +1,49 @@
+import { describe, it, expect } from 'vitest';
+import { findClosestInlineTextNode, reconstructModelTextFromDOM } from '../src/dom-sync/edit-position';
+
+describe('findClosestInlineTextNode', () => {
+  it('returns element with data-bc-sid when node is that element', () => {
+    const el = document.createElement('span');
+    el.setAttribute('data-bc-sid', 'n1');
+    expect(findClosestInlineTextNode(el)).toBe(el);
+  });
+
+  it('returns closest ancestor with data-bc-sid when node is child', () => {
+    const wrap = document.createElement('span');
+    wrap.setAttribute('data-bc-sid', 'n1');
+    const text = document.createTextNode('hi');
+    wrap.appendChild(text);
+    expect(findClosestInlineTextNode(text)).toBe(wrap);
+  });
+
+  it('returns null when no ancestor has data-bc-sid', () => {
+    const div = document.createElement('div');
+    const text = document.createTextNode('hi');
+    div.appendChild(text);
+    expect(findClosestInlineTextNode(text)).toBeNull();
+  });
+
+  it('returns null for null node', () => {
+    expect(findClosestInlineTextNode(null as any)).toBeNull();
+  });
+});
+
+describe('reconstructModelTextFromDOM', () => {
+  it('returns concatenated text from text nodes in order', () => {
+    const span = document.createElement('span');
+    span.setAttribute('data-bc-sid', 'n1');
+    const t1 = document.createTextNode('Hello');
+    const t2 = document.createTextNode(' ');
+    const t3 = document.createTextNode('World');
+    span.appendChild(t1);
+    span.appendChild(t2);
+    span.appendChild(t3);
+    expect(reconstructModelTextFromDOM(span)).toBe('Hello World');
+  });
+
+  it('returns empty string when element has no text nodes', () => {
+    const span = document.createElement('span');
+    span.setAttribute('data-bc-sid', 'n1');
+    expect(reconstructModelTextFromDOM(span)).toBe('');
+  });
+});

package/test/mutation-observer-manager.test.ts

@@ -0,0 +1,48 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { createMutationObserverManager } from '../src/mutation-observer-manager';
+
+describe('createMutationObserverManager', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('setup() observes the given element and invokes callback with batched mutations', async () => {
+    const onMutations = vi.fn();
+    const manager = createMutationObserverManager(onMutations);
+
+    const el = document.createElement('div');
+    document.body.appendChild(el);
+
+    manager.setup(el);
+
+    const text = document.createTextNode('hello');
+    el.appendChild(text);
+    text.textContent = 'world';
+
+    await new Promise((r) => setTimeout(r, 10));
+
+    expect(onMutations).toHaveBeenCalledTimes(1);
+    const mutations = onMutations.mock.calls[0][0] as MutationRecord[];
+    expect(Array.isArray(mutations)).toBe(true);
+    expect(mutations.length).toBeGreaterThanOrEqual(1);
+
+    manager.disconnect();
+    document.body.removeChild(el);
+  });
+
+  it('disconnect() stops observing and clears pending', async () => {
+    const onMutations = vi.fn();
+    const manager = createMutationObserverManager(onMutations);
+
+    const el = document.createElement('div');
+    document.body.appendChild(el);
+    manager.setup(el);
+    manager.disconnect();
+
+    el.appendChild(document.createTextNode('x'));
+    await new Promise((r) => setTimeout(r, 10));
+
+    expect(onMutations).not.toHaveBeenCalled();
+    document.body.removeChild(el);
+  });
+});

package/test/selection-handler.test.ts

@@ -0,0 +1,86 @@
+import { describe, it, expect, vi } from 'vitest';
+import { ReactSelectionHandler } from '../src/selection-handler';
+
+function createMockEditor(getNode: (id: string) => unknown) {
+  return {
+    dataStore: { getNode },
+    updateSelection: () => {},
+  } as any;
+}
+
+describe('ReactSelectionHandler', () => {
+  it('instantiates with editor and getContentEditableElement', () => {
+    const getEl = () => document.createElement('div');
+    const editor = createMockEditor(() => null);
+    const handler = new ReactSelectionHandler(editor, getEl);
+    expect(handler).toBeDefined();
+  });
+
+  it('isSelectionInsideEditableText returns false when selection is empty', () => {
+    const getEl = () => document.createElement('div');
+    const editor = createMockEditor(() => ({ stype: 'inline-text' }));
+    const handler = new ReactSelectionHandler(editor, getEl);
+    const sel = window.getSelection();
+    sel?.removeAllRanges();
+    expect(handler.isSelectionInsideEditableText()).toBe(false);
+  });
+
+  it('isSelectionInsideEditableText returns true when selection is inside inline-text node', () => {
+    const root = document.createElement('div');
+    root.setAttribute('contenteditable', 'true');
+    const span = document.createElement('span');
+    span.setAttribute('data-bc-sid', 't1');
+    const text = document.createTextNode('hello');
+    span.appendChild(text);
+    root.appendChild(span);
+    document.body.appendChild(root);
+
+    const getEl = () => root;
+    const editor = createMockEditor((id) => (id === 't1' ? { stype: 'inline-text' } : null));
+    const handler = new ReactSelectionHandler(editor, getEl);
+
+    const range = document.createRange();
+    range.setStart(text, 0);
+    range.setEnd(text, 2);
+    const sel = window.getSelection();
+    sel?.removeAllRanges();
+    sel?.addRange(range);
+
+    expect(handler.isSelectionInsideEditableText()).toBe(true);
+
+    document.body.removeChild(root);
+    sel?.removeAllRanges();
+  });
+
+  it('setProgrammaticChange(true) causes handleSelectionChange to skip updateSelection', () => {
+    const root = document.createElement('div');
+    const span = document.createElement('span');
+    span.setAttribute('data-bc-sid', 't1');
+    span.appendChild(document.createTextNode('x'));
+    root.appendChild(span);
+    document.body.appendChild(root);
+
+    const updateSelection = vi.fn();
+    const editor = createMockEditor((id) => (id === 't1' ? { stype: 'inline-text' } : null));
+    editor.updateSelection = updateSelection;
+
+    const getEl = () => root;
+    const handler = new ReactSelectionHandler(editor, getEl);
+
+    const range = document.createRange();
+    range.setStart(span.firstChild!, 0);
+    range.setEnd(span.firstChild!, 1);
+    window.getSelection()?.removeAllRanges();
+    window.getSelection()?.addRange(range);
+
+    handler.setProgrammaticChange(true);
+    handler.handleSelectionChange();
+    expect(updateSelection).not.toHaveBeenCalled();
+
+    handler.setProgrammaticChange(false);
+    handler.handleSelectionChange();
+    expect(updateSelection).toHaveBeenCalled();
+
+    document.body.removeChild(root);
+  });
+});

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "jsx": "react-jsx",
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["dist", "node_modules"]
+}

package/vite.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+
+export default defineConfig({
+  plugins: [
+    dts({
+      insertTypesEntry: true,
+    }),
+  ],
+  build: {
+    minify: true,
+    lib: {
+      entry: 'src/index.ts',
+      name: 'BarocssEditorViewReact',
+      fileName: 'index',
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      external: (id) =>
+        id === 'react' ||
+        id === 'react-dom' ||
+        id === 'react/jsx-runtime' ||
+        id.startsWith('react/'),
+    },
+  },
+});

package/vitest.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    include: ['test/**/*.test.ts', 'test/**/*.test.tsx'],
+    passWithNoTests: false,
+  },
+});