@barocss/editor-view-react 0.1.0

package/src/EditorViewLayer.tsx

@@ -0,0 +1,35 @@
+import type { EditorViewLayerProps } from './types';
+
+const LAYER_DEFAULTS: Record<string, { className: string; zIndex: number }> = {
+  decorator: { className: 'barocss-editor-decorators', zIndex: 10 },
+  selection: { className: 'barocss-editor-selection', zIndex: 100 },
+  context: { className: 'barocss-editor-context', zIndex: 200 },
+  custom: { className: 'barocss-editor-custom', zIndex: 1000 },
+};
+
+/**
+ * Overlay layer wrapper (decorator, selection, context, custom).
+ * Positioned absolute, pointer-events: none by default so content layer receives input.
+ */
+export function EditorViewLayer({ layer, className, style, children }: EditorViewLayerProps) {
+  const defaults = LAYER_DEFAULTS[layer] ?? { className: '', zIndex: 0 };
+  const baseStyle: React.CSSProperties = {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    pointerEvents: 'none',
+    zIndex: defaults.zIndex,
+  };
+
+  return (
+    <div
+      className={className ?? defaults.className}
+      style={style ? { ...baseStyle, ...style } : baseStyle}
+      data-bc-layer={layer}
+    >
+      {children}
+    </div>
+  );
+}

package/src/EditorViewOverlayLayerContent.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useMemo, useState } from 'react';
+import { getGlobalRegistry } from '@barocss/dsl';
+import { ReactRenderer } from '@barocss/renderer-react';
+import { useEditorViewContext } from './EditorViewContext';
+import type { EditorViewLayerType } from './types';
+
+export interface EditorViewOverlayLayerContentProps {
+  /** Layer to render (decorator, selection, context, custom). Only decorators with layerTarget === layer are rendered. */
+  layer: Exclude<EditorViewLayerType, 'content'>;
+  /** Registry for resolving decorator templates. If omitted, uses getGlobalRegistry(). */
+  registry?: import('@barocss/dsl').RendererRegistry;
+}
+
+/**
+ * Renders overlay layer content by filtering merged decorators by layerTarget and building them with ReactRenderer.buildOverlayDecorators.
+ * Uses getMergedDecorators(document) so remote, pattern, and generator decorators are included.
+ */
+export function EditorViewOverlayLayerContent({ layer, registry: registryProp }: EditorViewOverlayLayerContentProps) {
+  const { editor, getMergedDecorators, decoratorVersion } = useEditorViewContext();
+  const [documentSnapshot, setDocumentSnapshot] = useState<unknown>(() => editor.getDocumentProxy?.() ?? null);
+
+  useEffect(() => {
+    const onContent = () => setDocumentSnapshot(editor.getDocumentProxy?.() ?? null);
+    editor.on?.('editor:content.change', onContent);
+    setDocumentSnapshot(editor.getDocumentProxy?.() ?? null);
+    return () => editor.off?.('editor:content.change', onContent);
+  }, [editor]);
+
+  const renderer = useMemo(
+    () => new ReactRenderer(registryProp ?? getGlobalRegistry()),
+    [registryProp]
+  );
+  const decorators = useMemo(
+    () => getMergedDecorators(documentSnapshot),
+    [documentSnapshot, getMergedDecorators, decoratorVersion]
+  );
+  const filtered = useMemo(
+    () => decorators.filter((d) => (d.layerTarget ?? 'content') === layer),
+    [decorators, layer]
+  );
+  return <>{renderer.buildOverlayDecorators(filtered)}</>;
+}

package/src/dom-sync/classify-c1.ts

@@ -0,0 +1,91 @@
+/**
+ * C1 classification: pure text change within a single inline-text.
+ * Ported from editor-view-dom dom-change-classifier (C1 only).
+ */
+import type { Editor } from '@barocss/editor-core';
+import { findClosestInlineTextNode, reconstructModelTextFromDOM } from './edit-position';
+
+export interface ClassifiedChangeC1 {
+  case: 'C1';
+  nodeId: string;
+  prevText: string;
+  newText: string;
+  contentRange?: { startNodeId: string; startOffset: number; endNodeId: string; endOffset: number };
+  mutations: MutationRecord[];
+  metadata?: { usedInputHint?: boolean };
+}
+
+export interface InputHint {
+  contentRange: { startNodeId: string; startOffset: number; endNodeId: string; endOffset: number };
+  timestamp: number;
+}
+
+export interface ClassifyOptions {
+  editor: Editor;
+  selection?: Selection;
+  modelSelection?: { startNodeId: string; startOffset: number; endNodeId: string; endOffset: number };
+  inputHint?: InputHint;
+  isComposing?: boolean;
+}
+
+export type ClassifiedChange = ClassifiedChangeC1 | { case: 'UNKNOWN'; mutations: MutationRecord[] };
+
+export function classifyDomChangeC1(
+  mutations: MutationRecord[],
+  options: ClassifyOptions
+): ClassifiedChangeC1 | null {
+  if (mutations.length === 0) return null;
+
+  for (const mutation of mutations) {
+    const target = mutation.target;
+    const inlineTextNode = findClosestInlineTextNode(target);
+    if (!inlineTextNode) continue;
+
+    const nodeId = inlineTextNode.getAttribute('data-bc-sid');
+    if (!nodeId) continue;
+
+    const modelNode = options.editor.dataStore?.getNode?.(nodeId) as { stype?: string; text?: string } | undefined;
+    if (!modelNode || modelNode.stype !== 'inline-text') continue;
+
+    if (mutation.type === 'childList') {
+      const addedOrRemoved = [
+        ...Array.from(mutation.addedNodes ?? []),
+        ...Array.from(mutation.removedNodes ?? []),
+      ];
+      const hasBlockLike = addedOrRemoved.some((n) => {
+        if (n.nodeType !== Node.ELEMENT_NODE) return false;
+        const tag = (n as Element).tagName.toLowerCase();
+        return ['p', 'div', 'li', 'ul', 'ol', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote'].includes(tag);
+      });
+      if (hasBlockLike) continue;
+    }
+
+    const prevText = modelNode.text ?? '';
+    const newText = reconstructModelTextFromDOM(inlineTextNode);
+
+    let startOffset: number | undefined;
+    let endOffset: number | undefined;
+    let usedInputHint = false;
+
+    const hint = options.inputHint;
+    if (hint?.contentRange.startNodeId === nodeId && hint.contentRange.endNodeId === nodeId) {
+      startOffset = Math.max(0, Math.min(prevText.length, hint.contentRange.startOffset));
+      endOffset = Math.max(startOffset, Math.min(prevText.length, hint.contentRange.endOffset));
+      usedInputHint = true;
+    }
+
+    return {
+      case: 'C1',
+      nodeId,
+      prevText,
+      newText,
+      contentRange:
+        startOffset !== undefined && endOffset !== undefined
+          ? { startNodeId: nodeId, startOffset, endNodeId: nodeId, endOffset }
+          : undefined,
+      mutations: [mutation],
+      metadata: usedInputHint ? { usedInputHint: true } : undefined,
+    };
+  }
+  return null;
+}

package/src/dom-sync/edit-position.ts

@@ -0,0 +1,27 @@
+/**
+ * DOM ↔ model position utilities for MutationObserver path.
+ * Ported from editor-view-dom edit-position-converter; uses @barocss/shared text-run-index.
+ */
+import { buildTextRunIndex } from '@barocss/shared';
+
+export function findClosestInlineTextNode(node: Node): Element | null {
+  let current: Node | null = node;
+  while (current) {
+    if (current.nodeType === Node.ELEMENT_NODE) {
+      const el = current as Element;
+      if (el.getAttribute('data-bc-sid')) return el;
+    }
+    current = current.parentNode;
+  }
+  return null;
+}
+
+/**
+ * Reconstruct full text of an inline-text container from DOM (all text nodes in order).
+ */
+export function reconstructModelTextFromDOM(inlineTextNode: Element): string {
+  const runs = buildTextRunIndex(inlineTextNode, undefined, {
+    normalizeWhitespace: false,
+  });
+  return runs.runs.map((r) => r.domTextNode.textContent ?? '').join('');
+}

package/src/index.ts

@@ -0,0 +1,33 @@
+/**
+ * @barocss/editor-view-react
+ * React view layer for Barocss Editor (Editor + ReactRenderer).
+ */
+export { EditorView } from './EditorView';
+export { EditorViewContentLayer } from './EditorViewContentLayer';
+export { EditorViewLayer } from './EditorViewLayer';
+export {
+  EditorViewContextProvider,
+  useEditorViewContext,
+  useOptionalEditorViewContext,
+  type EditorViewViewState,
+  type EditorViewContextValue,
+} from './EditorViewContext';
+export { createMutationObserverManager } from './mutation-observer-manager';
+export type { ReactMutationObserverManager } from './mutation-observer-manager';
+export type {
+  EditorViewOptions,
+  EditorViewProps,
+  EditorViewRef,
+  EditorViewHandle,
+  DecoratorExportData,
+  LoadDecoratorsPatternFunctions,
+  DecoratorQueryOptions,
+  DecoratorTypeSchema,
+  ModelSelection,
+  EditorViewContentLayerOptions,
+  EditorViewContentLayerProps,
+  EditorViewLayerOptions,
+  EditorViewLayerProps,
+  EditorViewLayersConfig,
+  EditorViewLayerType,
+} from './types';