@barocss/editor-view-react 0.1.0

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@barocss/editor-view-react",
+  "version": "0.1.0",
+  "description": "React view layer for Barocss Editor (renderer-react + Editor)",
+  "type": "module",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
+    }
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "@barocss/dsl": "1.0.0",
+    "@barocss/editor-core": "1.0.0",
+    "@barocss/renderer-react": "0.1.0",
+    "@barocss/shared": "1.0.0",
+    "@barocss/text-analyzer": "0.1.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "jsdom": "^25.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.9.3",
+    "vite": "^5.4.21",
+    "vite-plugin-dts": "^3.9.1",
+    "vitest": "^3.0.0"
+  },
+  "keywords": [
+    "editor",
+    "view",
+    "react",
+    "wysiwyg"
+  ],
+  "author": "Barocss Team",
+  "license": "MIT",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "type-check": "tsc --noEmit",
+    "test": "vitest",
+    "test:run": "vitest run"
+  }
+}

package/src/EditorView.tsx

@@ -0,0 +1,312 @@
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+import type { RendererRegistry } from '@barocss/dsl';
+import type {
+  EditorViewProps,
+  EditorViewOverlayLayerProps,
+  EditorViewRef,
+  DecoratorExportData,
+  LoadDecoratorsPatternFunctions,
+  ModelSelection,
+} from './types';
+import type { DecoratorQueryOptions } from '@barocss/shared';
+import { EditorViewContentLayer } from './EditorViewContentLayer';
+import { EditorViewLayer } from './EditorViewLayer';
+import { EditorViewOverlayLayerContent } from './EditorViewOverlayLayerContent';
+import { EditorViewContextProvider, useEditorViewContext } from './EditorViewContext';
+
+interface OverlaySlotProps {
+  registry?: RendererRegistry;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+function DecoratorLayerSlot({ registry, className, style }: OverlaySlotProps) {
+  return (
+    <EditorViewLayer layer="decorator" className={className} style={style}>
+      <EditorViewOverlayLayerContent layer="decorator" registry={registry} />
+    </EditorViewLayer>
+  );
+}
+function SelectionLayerSlot({ registry, className, style }: OverlaySlotProps) {
+  return (
+    <EditorViewLayer layer="selection" className={className} style={style}>
+      <EditorViewOverlayLayerContent layer="selection" registry={registry} />
+    </EditorViewLayer>
+  );
+}
+function ContextLayerSlot({ registry, className, style }: OverlaySlotProps) {
+  return (
+    <EditorViewLayer layer="context" className={className} style={style}>
+      <EditorViewOverlayLayerContent layer="context" registry={registry} />
+    </EditorViewLayer>
+  );
+}
+function CustomLayerSlot({
+  registry,
+  className,
+  style,
+  children,
+}: OverlaySlotProps & { children?: React.ReactNode }) {
+  return (
+    <EditorViewLayer layer="custom" className={className} style={style}>
+      <EditorViewOverlayLayerContent layer="custom" registry={registry} />
+      {children}
+    </EditorViewLayer>
+  );
+}
+
+/**
+ * Inner root: lives inside EditorViewContextProvider, exposes ref API (addDecorator, removeDecorator, getDecorators).
+ */
+const EditorViewRoot = forwardRef<EditorViewRef, { options: EditorViewProps['options']; children: EditorViewProps['children'] }>(
+  function EditorViewRoot({ options = {}, children }, ref) {
+    const {
+      editor,
+      selectionHandler,
+      contentEditableRef,
+      decoratorManagerRef,
+      decoratorSchemaRegistryRef,
+      remoteDecoratorManagerRef,
+      patternDecoratorConfigManagerRef,
+      decoratorGeneratorManagerRef,
+      getMergedDecorators,
+      bumpDecoratorVersion,
+    } = useEditorViewContext();
+    const apiRef = useRef<EditorViewRef | null>(null);
+
+    useImperativeHandle(
+      ref,
+      () => {
+        if (!apiRef.current) {
+          apiRef.current = {
+            addDecorator(decorator) {
+              if ('generate' in decorator) {
+                decoratorGeneratorManagerRef.current?.registerGenerator(
+                  decorator as import('@barocss/shared').DecoratorGenerator,
+                  bumpDecoratorVersion
+                );
+                bumpDecoratorVersion();
+                return;
+              }
+              decoratorManagerRef.current?.add(decorator);
+            },
+            removeDecorator(id) {
+              try {
+                decoratorManagerRef.current?.remove(id);
+              } catch {
+                // ignore if not found
+              }
+            },
+            updateDecorator(id, updates) {
+              decoratorManagerRef.current?.update(id, updates);
+            },
+            getDecorators(options?: DecoratorQueryOptions) {
+              const model = editor.getDocumentProxy?.() ?? null;
+              let list = getMergedDecorators(model);
+              if (options?.enabledOnly !== false) {
+                list = list.filter((d) => d.enabled !== false);
+              }
+              if (options?.category) list = list.filter((d) => d.category === options.category);
+              if (options?.type) list = list.filter((d) => d.stype === options.type);
+              if (options?.nodeId) {
+                list = list.filter((d) => {
+                  const t = d.target;
+                  if (!t) return false;
+                  const sid = 'sid' in t ? t.sid : undefined;
+                  const startSid = 'startSid' in t ? t.startSid : undefined;
+                  const endSid = 'endSid' in t ? t.endSid : undefined;
+                  return sid === options.nodeId || startSid === options.nodeId || endSid === options.nodeId;
+                });
+              }
+              const sortBy = options?.sortBy ?? 'id';
+              const order = options?.sortOrder ?? 'asc';
+              if (sortBy) {
+                const mult = order === 'desc' ? -1 : 1;
+                list = [...list].sort((a, b) => {
+                  const av = sortBy === 'id' ? a.sid : sortBy === 'type' ? a.stype : a.category;
+                  const bv = sortBy === 'id' ? b.sid : sortBy === 'type' ? b.stype : b.category;
+                  return av.localeCompare(bv) * mult;
+                });
+              }
+              return list;
+            },
+            getDecorator(id) {
+              const merged = getMergedDecorators(editor.getDocumentProxy?.() ?? null);
+              const found = merged.find((d) => d.sid === id);
+              if (found) return found;
+              const local = decoratorManagerRef.current?.get(id);
+              if (local) return local;
+              return remoteDecoratorManagerRef.current?.get(id);
+            },
+            exportDecorators(): DecoratorExportData {
+              const targetDecorators = (decoratorManagerRef.current?.getAll() ?? [])
+                .filter((d) => d.decoratorType !== 'pattern')
+                .map((d) => {
+                  const { decoratorType, ...rest } = d;
+                  return rest;
+                }) as DecoratorExportData['targetDecorators'];
+              const patternConfigs = patternDecoratorConfigManagerRef.current?.getConfigs() ?? [];
+              const patternDecorators = patternConfigs
+                .filter((c) => c.pattern instanceof RegExp)
+                .map((c) => ({
+                  sid: c.sid,
+                  stype: c.stype,
+                  category: c.category,
+                  pattern: { source: (c.pattern as RegExp).source, flags: (c.pattern as RegExp).flags },
+                  priority: c.priority,
+                  enabled: c.enabled,
+                }));
+              return { version: '1.0.0', targetDecorators, patternDecorators };
+            },
+            loadDecorators(data: DecoratorExportData, patternFunctions?: LoadDecoratorsPatternFunctions) {
+              decoratorManagerRef.current?.clear();
+              remoteDecoratorManagerRef.current?.clear();
+              patternDecoratorConfigManagerRef.current?.clear();
+              decoratorGeneratorManagerRef.current?.clear();
+              for (const d of data.targetDecorators) {
+                decoratorManagerRef.current?.add({
+                  ...d,
+                  decoratorType: 'target',
+                } as import('@barocss/shared').Decorator);
+              }
+              for (const p of data.patternDecorators) {
+                const fns = patternFunctions?.[p.sid];
+                if (!fns) {
+                  console.warn(`[EditorView] Pattern '${p.sid}' functions not provided; skipping.`);
+                  continue;
+                }
+                const pattern = new RegExp(p.pattern.source, p.pattern.flags);
+                patternDecoratorConfigManagerRef.current?.addConfig({
+                  sid: p.sid,
+                  stype: p.stype,
+                  category: p.category,
+                  pattern,
+                  extractData: fns.extractData,
+                  createDecorator: fns.createDecorator,
+                  priority: p.priority,
+                  enabled: p.enabled,
+                });
+              }
+              bumpDecoratorVersion();
+            },
+            get contentEditableElement() {
+              return contentEditableRef.current ?? null;
+            },
+            convertModelSelectionToDOM(sel: ModelSelection | null | undefined) {
+              selectionHandler.convertModelSelectionToDOM(sel as Parameters<typeof selectionHandler.convertModelSelectionToDOM>[0]);
+            },
+            convertDOMSelectionToModel(selection: Selection): ModelSelection {
+              return selectionHandler.convertDOMSelectionToModel(selection) as ModelSelection;
+            },
+            convertStaticRangeToModel(staticRange: StaticRange): ModelSelection | null {
+              return selectionHandler.convertStaticRangeToModel(staticRange) as ModelSelection | null;
+            },
+            defineDecoratorType(type, category, schema) {
+              const reg = decoratorSchemaRegistryRef.current;
+              if (!reg) return;
+              if (category === 'layer') reg.registerLayerType(type, schema);
+              else if (category === 'inline') reg.registerInlineType(type, schema);
+              else reg.registerBlockType(type, schema);
+            },
+            get decoratorManager() {
+              return decoratorManagerRef.current ?? null;
+            },
+            get remoteDecoratorManager() {
+              return remoteDecoratorManagerRef.current ?? null;
+            },
+            get patternDecoratorConfigManager() {
+              return patternDecoratorConfigManagerRef.current ?? null;
+            },
+            get decoratorGeneratorManager() {
+              return decoratorGeneratorManagerRef.current ?? null;
+            },
+          };
+        }
+        return apiRef.current;
+      },
+      [
+        editor,
+        selectionHandler,
+        contentEditableRef,
+        decoratorManagerRef,
+        decoratorSchemaRegistryRef,
+        remoteDecoratorManagerRef,
+        patternDecoratorConfigManagerRef,
+        decoratorGeneratorManagerRef,
+        getMergedDecorators,
+        bumpDecoratorVersion,
+      ]
+    );
+
+    const { className: containerClassName = '', layers: layersConfig } = options;
+    const contentOptions = {
+      registry: options.registry,
+      className: 'barocss-editor-content',
+      editable: true,
+      ...layersConfig?.content,
+    };
+
+    return (
+      <div
+        className={containerClassName}
+        style={{ position: 'relative', overflow: 'hidden' }}
+        data-editor-view="true"
+      >
+        <EditorViewContentLayer options={contentOptions} />
+        <DecoratorLayerSlot
+          registry={options.registry}
+          className={layersConfig?.decorator?.className}
+          style={layersConfig?.decorator?.style}
+        />
+        <SelectionLayerSlot
+          registry={options.registry}
+          className={layersConfig?.selection?.className}
+          style={layersConfig?.selection?.style}
+        />
+        <ContextLayerSlot
+          registry={options.registry}
+          className={layersConfig?.context?.className}
+          style={layersConfig?.context?.style}
+        />
+        <CustomLayerSlot
+          registry={options.registry}
+          className={layersConfig?.custom?.className}
+          style={layersConfig?.custom?.style}
+        >
+          {children}
+        </CustomLayerSlot>
+      </div>
+    );
+  }
+);
+
+const EditorViewBase = forwardRef<EditorViewRef, EditorViewProps>(function EditorView(
+  { editor, options = {}, children },
+  ref
+) {
+  return (
+    <EditorViewContextProvider editor={editor}>
+      <EditorViewRoot ref={ref} options={options} children={children} />
+    </EditorViewContextProvider>
+  );
+});
+
+function createOverlayLayer(layer: 'decorator' | 'selection' | 'context' | 'custom') {
+  return function OverlayLayer({ className, style, children }: EditorViewOverlayLayerProps) {
+    return (
+      <EditorViewLayer layer={layer} className={className} style={style}>
+        {children}
+      </EditorViewLayer>
+    );
+  };
+}
+
+/** EditorView with ref (addDecorator, removeDecorator, getDecorators) and static layer components. */
+export const EditorView = Object.assign(EditorViewBase, {
+  ContentLayer: EditorViewContentLayer,
+  DecoratorLayer: createOverlayLayer('decorator'),
+  SelectionLayer: createOverlayLayer('selection'),
+  ContextLayer: createOverlayLayer('context'),
+  CustomLayer: createOverlayLayer('custom'),
+  Layer: EditorViewLayer,
+});

package/src/EditorViewContentLayer.tsx

@@ -0,0 +1,90 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { getGlobalRegistry } from '@barocss/dsl';
+import { ReactRenderer } from '@barocss/renderer-react';
+import { useEditorViewContext } from './EditorViewContext';
+import type { EditorViewContentLayerProps } from './types';
+
+/**
+ * EditorViewContentLayer: renders the editor document with ReactRenderer in a contenteditable div.
+ * Subscribes to editor:content.change and editor:selection.model.
+ * Must be used inside EditorView (EditorViewContextProvider); editor is taken from context only.
+ */
+export function EditorViewContentLayer({ options = {} }: EditorViewContentLayerProps) {
+  const {
+    editor,
+    selectionHandler,
+    viewStateRef,
+    setContentEditableElement,
+    getMergedDecorators,
+    decoratorVersion,
+  } = useEditorViewContext();
+  const { className = '', editable = true, registry } = options;
+
+  const [documentSnapshot, setDocumentSnapshot] = useState<unknown>(() => editor.getDocumentProxy?.() ?? null);
+  const contentRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const onContentChange = (e: { content?: unknown }) => {
+      if (viewStateRef?.current?.skipNextRenderFromMO) {
+        viewStateRef.current.skipNextRenderFromMO = false;
+        return;
+      }
+      const next = e?.content ?? editor.getDocumentProxy?.() ?? null;
+      setDocumentSnapshot(next);
+    };
+    editor.on?.('editor:content.change', onContentChange);
+    setDocumentSnapshot(editor.getDocumentProxy?.() ?? null);
+    return () => {
+      editor.off?.('editor:content.change', onContentChange);
+    };
+  }, [editor, viewStateRef]);
+
+  useEffect(() => {
+    const el = contentRef.current;
+    setContentEditableElement(el);
+    return () => setContentEditableElement(null);
+  }, [setContentEditableElement]);
+
+  useEffect(() => {
+    const onModelSelection = (sel: unknown) => {
+      if (viewStateRef?.current?.skipApplyModelSelectionToDOM) return;
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          selectionHandler.convertModelSelectionToDOM(sel as Parameters<typeof selectionHandler.convertModelSelectionToDOM>[0]);
+        });
+      });
+    };
+    editor.on?.('editor:selection.model', onModelSelection);
+    return () => editor.off?.('editor:selection.model', onModelSelection);
+  }, [editor, selectionHandler, viewStateRef]);
+
+  const renderer = useMemo(
+    () => new ReactRenderer(registry ?? getGlobalRegistry()),
+    [registry]
+  );
+
+  const decorators = useMemo(
+    () => getMergedDecorators(documentSnapshot),
+    [documentSnapshot, getMergedDecorators, decoratorVersion]
+  );
+
+  const content = useMemo(() => {
+    if (documentSnapshot == null) return null;
+    const model = documentSnapshot as { stype?: string };
+    if (!model.stype) return null;
+    return renderer.build(model, decorators);
+  }, [documentSnapshot, renderer, decorators]);
+
+  return (
+    <div
+      ref={contentRef}
+      className={className}
+      contentEditable={editable}
+      suppressContentEditableWarning
+      data-bc-layer="content"
+      data-testid="editor-content"
+    >
+      {content}
+    </div>
+  );
+}

package/src/EditorViewContext.tsx

@@ -0,0 +1,228 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import type { Editor } from '@barocss/editor-core';
+import type { Decorator } from '@barocss/shared';
+import {
+  DecoratorManager,
+  RemoteDecoratorManager,
+  PatternDecoratorConfigManager,
+  DecoratorGeneratorManager,
+  DecoratorSchemaRegistry,
+  runPatternFromModel,
+} from '@barocss/shared';
+import type { ReactSelectionHandler } from './selection-handler';
+import type { ReactInputHandler } from './input-handler';
+import type { ReactMutationObserverManager } from './mutation-observer-manager';
+import { ReactSelectionHandler as ReactSelectionHandlerClass } from './selection-handler';
+import { ReactInputHandler as ReactInputHandlerClass } from './input-handler';
+import { createMutationObserverManager } from './mutation-observer-manager';
+
+export interface EditorViewViewState {
+  isModelDrivenChange: boolean;
+  isRendering: boolean;
+  isComposing: boolean;
+  /** When true, next editor:content.change (from model commit during MO C1) must not trigger refresh (data-only update). */
+  skipNextRenderFromMO: boolean;
+  /** When true, editor:selection.model must not call convertModelSelectionToDOM (selection came from DOM input; leave DOM selection as-is). */
+  skipApplyModelSelectionToDOM: boolean;
+}
+
+export interface EditorViewContextValue {
+  editor: Editor;
+  viewStateRef: React.MutableRefObject<EditorViewViewState>;
+  selectionHandler: ReactSelectionHandler;
+  inputHandler: ReactInputHandler;
+  mutationObserverManager: ReactMutationObserverManager;
+  setContentEditableElement: (el: HTMLElement | null) => void;
+  /** Ref to content-editable root (set by ContentLayer on mount). */
+  contentEditableRef: React.RefObject<HTMLElement | null>;
+  decoratorManagerRef: React.RefObject<DecoratorManager | null>;
+  decoratorSchemaRegistryRef: React.RefObject<DecoratorSchemaRegistry | null>;
+  remoteDecoratorManagerRef: React.RefObject<RemoteDecoratorManager | null>;
+  patternDecoratorConfigManagerRef: React.RefObject<PatternDecoratorConfigManager | null>;
+  decoratorGeneratorManagerRef: React.RefObject<DecoratorGeneratorManager | null>;
+  getMergedDecorators: (model: unknown) => Decorator[];
+  bumpDecoratorVersion: () => void;
+  decoratorVersion: number;
+}
+
+const EditorViewContext = createContext<EditorViewContextValue | null>(null);
+
+export function useEditorViewContext(): EditorViewContextValue {
+  const value = useContext(EditorViewContext);
+  if (!value) {
+    throw new Error('useEditorViewContext must be used within EditorViewContext.Provider');
+  }
+  return value;
+}
+
+export function useOptionalEditorViewContext(): EditorViewContextValue | null {
+  return useContext(EditorViewContext);
+}
+
+export function EditorViewContextProvider({ editor, children }: { editor: Editor; children: ReactNode }) {
+  const viewStateRef = useRef<EditorViewViewState>({
+    isModelDrivenChange: false,
+    isRendering: false,
+    isComposing: false,
+    skipNextRenderFromMO: false,
+    skipApplyModelSelectionToDOM: false,
+  });
+
+  const contentEditableRef = useRef<HTMLElement | null>(null);
+  const getContentEditableElement = useCallback(() => contentEditableRef.current, []);
+
+  const decoratorSchemaRegistryRef = useRef<DecoratorSchemaRegistry | null>(null);
+  if (decoratorSchemaRegistryRef.current === null) {
+    decoratorSchemaRegistryRef.current = new DecoratorSchemaRegistry();
+  }
+  const decoratorManagerRef = useRef<DecoratorManager | null>(null);
+  if (decoratorManagerRef.current === null) {
+    decoratorManagerRef.current = new DecoratorManager(decoratorSchemaRegistryRef.current);
+  }
+  const remoteDecoratorManagerRef = useRef<RemoteDecoratorManager | null>(null);
+  if (remoteDecoratorManagerRef.current === null) {
+    remoteDecoratorManagerRef.current = new RemoteDecoratorManager();
+  }
+  const patternDecoratorConfigManagerRef = useRef<PatternDecoratorConfigManager | null>(null);
+  if (patternDecoratorConfigManagerRef.current === null) {
+    patternDecoratorConfigManagerRef.current = new PatternDecoratorConfigManager();
+  }
+  const decoratorGeneratorManagerRef = useRef<DecoratorGeneratorManager | null>(null);
+  if (decoratorGeneratorManagerRef.current === null) {
+    decoratorGeneratorManagerRef.current = new DecoratorGeneratorManager();
+  }
+
+  const [decoratorVersion, setDecoratorVersion] = useState(0);
+  const bumpDecoratorVersion = useCallback(() => setDecoratorVersion((v) => v + 1), []);
+
+  useEffect(() => {
+    const manager = decoratorManagerRef.current;
+    if (!manager) return;
+    manager.on('decorator:added', bumpDecoratorVersion);
+    manager.on('decorator:updated', bumpDecoratorVersion);
+    manager.on('decorator:removed', bumpDecoratorVersion);
+    return () => {
+      manager.off('decorator:added', bumpDecoratorVersion);
+      manager.off('decorator:updated', bumpDecoratorVersion);
+      manager.off('decorator:removed', bumpDecoratorVersion);
+    };
+  }, [bumpDecoratorVersion]);
+
+  useEffect(() => {
+    const remote = remoteDecoratorManagerRef.current;
+    if (!remote) return;
+    remote.on('change', bumpDecoratorVersion);
+    return () => remote.off('change', bumpDecoratorVersion);
+  }, [bumpDecoratorVersion]);
+
+  const getMergedDecorators = useCallback((model: unknown): Decorator[] => {
+    const local = decoratorManagerRef.current?.getAll() ?? [];
+    const remote = remoteDecoratorManagerRef.current?.getAll() ?? [];
+    const patternConfigs = patternDecoratorConfigManagerRef.current?.getConfigs(true) ?? [];
+    const patternDecorators = runPatternFromModel(model as Record<string, unknown>, patternConfigs);
+    const genManager = decoratorGeneratorManagerRef.current;
+    let generatorDecorators: Decorator[] = [];
+    if (genManager && model && typeof model === 'object') {
+      const doc = model as Record<string, unknown>;
+      const traverse = (node: Record<string, unknown>): void => {
+        const text = typeof node.text === 'string' ? node.text : null;
+        generatorDecorators.push(
+          ...genManager.generateDecorators(node as Parameters<DecoratorGeneratorManager['generateDecorators']>[0], text, {
+            documentModel: doc,
+          })
+        );
+        const children = (node.children ?? node.content) as Record<string, unknown>[] | undefined;
+        if (Array.isArray(children)) {
+          for (const child of children) {
+            if (child && typeof child === 'object') traverse(child);
+          }
+        }
+      };
+      traverse(doc);
+    }
+    return [...local, ...remote, ...patternDecorators, ...generatorDecorators];
+  }, []);
+
+  const selectionHandler = useMemo(
+    () => new ReactSelectionHandlerClass(editor, getContentEditableElement),
+    [editor, getContentEditableElement]
+  );
+
+  const inputHandler = useMemo(
+    () => new ReactInputHandlerClass(editor, selectionHandler, viewStateRef),
+    [editor, selectionHandler]
+  );
+
+  const mutationObserverManager = useMemo(
+    () =>
+      createMutationObserverManager((mutations) => {
+        void inputHandler.handleDomMutations(mutations);
+      }),
+    [inputHandler]
+  );
+
+  const setContentEditableElement = useCallback(
+    (el: HTMLElement | null) => {
+      if (contentEditableRef.current === el) return;
+      if (contentEditableRef.current) {
+        mutationObserverManager.disconnect();
+      }
+      (contentEditableRef as React.MutableRefObject<HTMLElement | null>).current = el;
+      if (el) {
+        mutationObserverManager.setup(el);
+      }
+    },
+    [mutationObserverManager]
+  );
+
+  useEffect(() => {
+    const onSelectionChange = () => selectionHandler.handleSelectionChange();
+    document.addEventListener('selectionchange', onSelectionChange);
+    return () => document.removeEventListener('selectionchange', onSelectionChange);
+  }, [selectionHandler]);
+
+  const value = useMemo<EditorViewContextValue>(
+    () => ({
+      editor,
+      viewStateRef,
+      selectionHandler,
+      inputHandler,
+      mutationObserverManager,
+      setContentEditableElement,
+      contentEditableRef,
+      decoratorManagerRef,
+      decoratorSchemaRegistryRef,
+      remoteDecoratorManagerRef,
+      patternDecoratorConfigManagerRef,
+      decoratorGeneratorManagerRef,
+      getMergedDecorators,
+      bumpDecoratorVersion,
+      decoratorVersion,
+    }),
+    [
+      editor,
+      viewStateRef,
+      selectionHandler,
+      inputHandler,
+      mutationObserverManager,
+      setContentEditableElement,
+      contentEditableRef,
+      decoratorManagerRef,
+      decoratorSchemaRegistryRef,
+      remoteDecoratorManagerRef,
+      patternDecoratorConfigManagerRef,
+      decoratorGeneratorManagerRef,
+      getMergedDecorators,
+      bumpDecoratorVersion,
+      decoratorVersion,
+    ]
+  );
+
+  return (
+    <EditorViewContext.Provider value={value}>
+      {children}
+    </EditorViewContext.Provider>
+  );
+}
+
+export { EditorViewContext };