@barocss/editor-view-react 0.1.0 → 0.1.1

package/src/selection-handler.ts

@@ -19,6 +19,13 @@ export class ReactSelectionHandler {
   private editor: Editor;
   private getContentEditableElement: () => HTMLElement | null;
   private _isProgrammaticChange = false;
+  private _getScopeRoot(): ParentNode {
+    const contentEditableElement = this.getContentEditableElement();
+    if (contentEditableElement && contentEditableElement.querySelector) {
+      return contentEditableElement;
+    }
+    return document;
+  }
 
   constructor(
     editor: Editor,
@@ -241,7 +248,7 @@ export class ReactSelectionHandler {
   private ensureRuns(containerEl: Element, containerId: string): ContainerRuns {
     return buildTextRunIndex(containerEl, containerId, {
       buildReverseMap: true,
-      excludePredicate: (el) => el.hasAttribute('data-bc-decorator'),
+      excludePredicate: (el) => this.isDecoratorElement(el),
     });
   }
 
@@ -359,8 +366,9 @@ export class ReactSelectionHandler {
   }): void {
     const { startNodeId, startOffset, endNodeId, endOffset } = rangeSelection;
 
-    const startElementRaw = document.querySelector(`[data-bc-sid="${startNodeId}"]`);
-    const endElementRaw = document.querySelector(`[data-bc-sid="${endNodeId}"]`);
+    const scopeRoot = this._getScopeRoot();
+    const startElementRaw = scopeRoot.querySelector(`[data-bc-sid="${startNodeId}"]`);
+    const endElementRaw = scopeRoot.querySelector(`[data-bc-sid="${endNodeId}"]`);
     if (!startElementRaw || !endElementRaw) return;
 
     const startElement = this.findBestContainer(startElementRaw);
@@ -395,7 +403,8 @@ export class ReactSelectionHandler {
   }
 
   private convertNodeSelectionToDOM(nodeSelection: { nodeId: string }): void {
-    const element = document.querySelector(`[data-bc-sid="${nodeSelection.nodeId}"]`);
+    const scopeRoot = this._getScopeRoot();
+    const element = scopeRoot.querySelector(`[data-bc-sid="${nodeSelection.nodeId}"]`);
     if (!element) return;
 
     const selection = window.getSelection();
@@ -413,9 +422,7 @@ export class ReactSelectionHandler {
       return buildTextRunIndex(container, containerId ?? undefined, {
         buildReverseMap: true,
         excludePredicate: (el) =>
-          el.hasAttribute('data-decorator-sid') ||
-          el.hasAttribute('data-bc-decorator') ||
-          el.hasAttribute('data-decorator-category'),
+          this.isDecoratorElement(el),
         normalizeWhitespace: false,
       });
     } catch {
@@ -423,6 +430,15 @@ export class ReactSelectionHandler {
     }
   }
 
+  private isDecoratorElement(el: Element): boolean {
+    return (
+      el.hasAttribute('data-decorator-sid') ||
+      el.hasAttribute('data-bc-decorator-sid') ||
+      el.hasAttribute('data-bc-decorator') ||
+      el.hasAttribute('data-decorator-category')
+    );
+  }
+
   private findDOMRangeFromModelOffset(
     runs: ContainerRuns,
     modelOffset: number
@@ -437,8 +453,26 @@ export class ReactSelectionHandler {
       };
     }
 
-    const runIndex = binarySearchRun(runs.runs, modelOffset);
-    if (runIndex === -1) return null;
+    const totalRuns = runs.runs.length;
+    if (totalRuns === 0) return null;
+
+    let runIndex = binarySearchRun(runs.runs, modelOffset);
+    if (runIndex === -1) {
+      let fallbackIndex = -1;
+      for (let i = 0; i < totalRuns; i += 1) {
+        const run = runs.runs[i];
+        if (modelOffset < run.start) {
+          fallbackIndex = i;
+          break;
+        }
+        if (modelOffset === run.end && i + 1 < totalRuns) {
+          fallbackIndex = i + 1;
+          break;
+        }
+      }
+      if (fallbackIndex === -1) return null;
+      runIndex = fallbackIndex;
+    }
 
     const run = runs.runs[runIndex];
     const localOffset = modelOffset - run.start;

package/test/EditorView.test.tsx

@@ -1,8 +1,9 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, vi } from 'vitest';
 import { render, screen, act } from '@testing-library/react';
 import { createRef } from 'react';
 import {
   EditorView,
+  EditorViewContentLayer,
   EditorViewLayer,
   EditorViewContextProvider,
   useEditorViewContext,
@@ -20,6 +21,25 @@ function mockEditor() {
   } as any;
 }
 
+function createMockEditorWithEventBus() {
+  const listeners = new Map<string, Set<Function>>();
+  const editor = mockEditor();
+
+  return {
+    ...editor,
+    on(event: string, callback: Function) {
+      if (!listeners.has(event)) listeners.set(event, new Set());
+      listeners.get(event)!.add(callback);
+    },
+    off(event: string, callback: Function) {
+      listeners.get(event)?.delete(callback);
+    },
+    emit(event: string, data?: unknown) {
+      listeners.get(event)?.forEach((handler) => handler(data));
+    },
+  } as any;
+}
+
 describe('EditorView', () => {
   it('renders root div with data-editor-view="true" and position relative', () => {
     const editor = mockEditor();
@@ -215,4 +235,270 @@ describe('EditorViewContext', () => {
     expect(el.getAttribute('data-has-mutation-manager')).toBe('true');
     expect(el.getAttribute('data-has-set-content-editable')).toBe('true');
   });
+
+  it('EditorViewContentLayer applies model selection when skip flag is false', () => {
+    const editor = createMockEditorWithEventBus();
+    let capturedCtx: any = null;
+
+    function Capture() {
+      const ctx = useEditorViewContext();
+      capturedCtx = ctx;
+      return <span data-testid="capture" />;
+    }
+
+    render(
+      <EditorViewContextProvider editor={editor}>
+        <EditorViewContentLayer />
+        <Capture />
+      </EditorViewContextProvider>
+    );
+
+    const convertSpy = vi.spyOn(capturedCtx.selectionHandler, 'convertModelSelectionToDOM');
+
+    vi.useFakeTimers();
+    try {
+      editor.emit('editor:selection.model', {
+        type: 'range',
+        startNodeId: 't1',
+        startOffset: 0,
+        endNodeId: 't1',
+        endOffset: 0,
+      });
+
+      vi.advanceTimersByTime(32);
+      expect(convertSpy).toHaveBeenCalledTimes(1);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('EditorViewContentLayer skips model selection when skip flag is true', () => {
+    const editor = createMockEditorWithEventBus();
+    let capturedCtx: any = null;
+
+    function Capture() {
+      const ctx = useEditorViewContext();
+      capturedCtx = ctx;
+      return <span data-testid="capture" />;
+    }
+
+    render(
+      <EditorViewContextProvider editor={editor}>
+        <EditorViewContentLayer />
+        <Capture />
+      </EditorViewContextProvider>
+    );
+
+    const convertSpy = vi.spyOn(capturedCtx.selectionHandler, 'convertModelSelectionToDOM');
+    capturedCtx.viewStateRef.current.skipApplyModelSelectionToDOM = true;
+
+    vi.useFakeTimers();
+    try {
+      editor.emit('editor:selection.model', {
+        type: 'range',
+        startNodeId: 't1',
+        startOffset: 0,
+        endNodeId: 't1',
+        endOffset: 0,
+      });
+
+      vi.advanceTimersByTime(32);
+      expect(convertSpy).toHaveBeenCalledTimes(0);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('EditorViewContentLayer skips model selection when applySelectionToView is false', () => {
+    const editor = createMockEditorWithEventBus();
+    let capturedCtx: any = null;
+
+    function Capture() {
+      const ctx = useEditorViewContext();
+      capturedCtx = ctx;
+      return <span data-testid="capture" />;
+    }
+
+    render(
+      <EditorViewContextProvider editor={editor}>
+        <EditorViewContentLayer />
+        <Capture />
+      </EditorViewContextProvider>
+    );
+
+    const convertSpy = vi.spyOn(capturedCtx.selectionHandler, 'convertModelSelectionToDOM');
+
+    vi.useFakeTimers();
+    try {
+      editor.emit('editor:selection.model', {
+        selection: {
+          type: 'range',
+          startNodeId: 't3',
+          startOffset: 0,
+          endNodeId: 't3',
+          endOffset: 0,
+        },
+        applySelectionToView: false,
+      });
+
+      vi.advanceTimersByTime(32);
+      expect(convertSpy).toHaveBeenCalledTimes(0);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('EditorViewContentLayer skips model selection when source is remote', () => {
+    const editor = createMockEditorWithEventBus();
+    let capturedCtx: any = null;
+
+    function Capture() {
+      const ctx = useEditorViewContext();
+      capturedCtx = ctx;
+      return <span data-testid="capture" />;
+    }
+
+    render(
+      <EditorViewContextProvider editor={editor}>
+        <EditorViewContentLayer />
+        <Capture />
+      </EditorViewContextProvider>
+    );
+
+    const convertSpy = vi.spyOn(capturedCtx.selectionHandler, 'convertModelSelectionToDOM');
+
+    vi.useFakeTimers();
+    try {
+      editor.emit('editor:selection.model', {
+        selection: {
+          type: 'range',
+          startNodeId: 't-remote',
+          startOffset: 0,
+          endNodeId: 't-remote',
+          endOffset: 0,
+        },
+        source: 'remote',
+      });
+
+      vi.advanceTimersByTime(32);
+      expect(convertSpy).toHaveBeenCalledTimes(0);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('EditorViewContentLayer applies node selection when source is local', () => {
+    const editor = createMockEditorWithEventBus();
+    let capturedCtx: any = null;
+
+    function Capture() {
+      const ctx = useEditorViewContext();
+      capturedCtx = ctx;
+      return <span data-testid="capture" />;
+    }
+
+    render(
+      <EditorViewContextProvider editor={editor}>
+        <EditorViewContentLayer />
+        <Capture />
+      </EditorViewContextProvider>
+    );
+
+    const convertSpy = vi.spyOn(capturedCtx.selectionHandler, 'convertModelSelectionToDOM');
+
+    vi.useFakeTimers();
+    try {
+      editor.emit('editor:selection.model', {
+        type: 'node',
+        nodeId: 'node-local',
+        startNodeId: 'node-local',
+        startOffset: 0,
+        endNodeId: 'node-local',
+        endOffset: 3,
+      });
+
+      vi.advanceTimersByTime(32);
+      expect(convertSpy).toHaveBeenCalledTimes(1);
+      expect(convertSpy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'node',
+          nodeId: 'node-local',
+          startNodeId: 'node-local',
+          startOffset: 0,
+          endNodeId: 'node-local',
+          endOffset: 3,
+        })
+      );
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('EditorViewContentLayer skips node selection when source is remote', () => {
+    const editor = createMockEditorWithEventBus();
+    let capturedCtx: any = null;
+
+    function Capture() {
+      const ctx = useEditorViewContext();
+      capturedCtx = ctx;
+      return <span data-testid="capture" />;
+    }
+
+    render(
+      <EditorViewContextProvider editor={editor}>
+        <EditorViewContentLayer />
+        <Capture />
+      </EditorViewContextProvider>
+    );
+
+    const convertSpy = vi.spyOn(capturedCtx.selectionHandler, 'convertModelSelectionToDOM');
+
+    vi.useFakeTimers();
+    try {
+      editor.emit('editor:selection.model', {
+        type: 'node',
+        nodeId: 'node-remote',
+        startNodeId: 'node-remote',
+        startOffset: 0,
+        endNodeId: 'node-remote',
+        endOffset: 2,
+        source: 'remote',
+      });
+
+      vi.advanceTimersByTime(32);
+      expect(convertSpy).toHaveBeenCalledTimes(0);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+});
+
+describe('EditorViewContentLayer composition 이벤트 비의존성', () => {
+  it('beforeinput 의 isComposing 정보만으로 입력이 처리되어야 함', () => {
+    const editor = mockEditor();
+    let capturedCtx: any = null;
+
+    function Capture() {
+      const ctx = useEditorViewContext();
+      capturedCtx = ctx;
+      return <span data-testid="capture" />;
+    }
+
+    render(
+      <EditorViewContextProvider editor={editor}>
+        <EditorViewContentLayer />
+        <Capture />
+      </EditorViewContextProvider>
+    );
+
+    const beforeInputHandler = vi.spyOn(capturedCtx.inputHandler, 'handleBeforeInput');
+    capturedCtx.inputHandler.handleBeforeInput({
+      inputType: 'insertText',
+      isComposing: true,
+      data: '가',
+      preventDefault: vi.fn(),
+    } as unknown as InputEvent);
+
+    expect(beforeInputHandler).toHaveBeenCalled();
+  });
 });