@ephia/dova-sdk 1.0.0

package/src/react/components/EphiaTextarea.tsx

@@ -0,0 +1,295 @@
+"use client";
+
+import React, { useCallback, useEffect, useRef, useState } from "react";
+
+const ASCII_CURSOR_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"] as const;
+const ASCII_CURSOR_INTERVAL_MS = 90;
+
+export interface EphiaTextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  targetId: string;
+  mode?: string;
+  insertion?: "preview-inline" | "preview-floating" | "final-only" | "none";
+}
+
+/**
+ * Textarea avec overlay de preview du partial en streaming.
+ *
+ * Stratégie (Dragon Medical-style) :
+ * - La `<textarea>` contient uniquement le texte committed (color: transparent).
+ * - L'overlay div par-dessous affiche : texte committed + partial grisé.
+ */
+export const EphiaTextarea = React.forwardRef<
+  HTMLTextAreaElement,
+  EphiaTextareaProps
+>(function EphiaTextarea(
+  { targetId, mode = "write", insertion = "preview-inline", className = "", style, ...rest },
+  forwardedRef
+) {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const overlayRef = useRef<HTMLDivElement>(null);
+  const partialRef = useRef<{ text: string; insertAt: number } | null>(null);
+  const insertionRef = useRef(insertion);
+  insertionRef.current = insertion;
+  const anchorEndRef = useRef<number | null>(null);
+  const asciiFrameRef = useRef(0);
+  const asciiTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const appendAsciiCursor = (ov: HTMLDivElement) => {
+    const span = document.createElement("span");
+    span.className = "ephia-cursor";
+    span.setAttribute("aria-hidden", "true");
+    span.textContent = ASCII_CURSOR_FRAMES[asciiFrameRef.current] ?? "⠋";
+    ov.appendChild(span);
+  };
+
+  const setTextareaRef = useCallback(
+    (node: HTMLTextAreaElement | null) => {
+      (textareaRef as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(node);
+      } else if (forwardedRef) {
+        (forwardedRef as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;
+      }
+    },
+    [forwardedRef]
+  );
+
+  const [isActive, setIsActive] = useState(false);
+
+  // ─── Helpers DOM overlay (évite innerHTML + escapeHtml à chaque frame) ───
+  const clearOverlay = (ov: HTMLDivElement) => {
+    while (ov.firstChild) ov.removeChild(ov.firstChild);
+  };
+
+  const appendText = (ov: HTMLDivElement, text: string) => {
+    if (text) ov.appendChild(document.createTextNode(text));
+  };
+
+  const appendBrNbsp = (ov: HTMLDivElement) => {
+    ov.appendChild(document.createElement("br"));
+    ov.appendChild(document.createTextNode("\u00A0"));
+  };
+
+  // ─── Mise à jour impérative de l'overlay ─────────────────────────────────
+  const updateOverlay = () => {
+    const ov = overlayRef.current;
+    const ta = textareaRef.current;
+    if (!ov || !ta) return;
+
+    const rawText = ta.value;
+    const partial = partialRef.current;
+    const isRecording = ta.hasAttribute("data-ephia-recording");
+    const active = isRecording;
+
+    clearOverlay(ov);
+
+    // ── Recording / idle : texte committed + partial ───────────────────────
+    if (!partial || insertionRef.current === "none") {
+      if (active) {
+        const cursorPos = Math.min(
+          anchorEndRef.current ?? rawText.length,
+          rawText.length
+        );
+        appendText(ov, rawText.slice(0, cursorPos));
+        appendAsciiCursor(ov);
+        appendText(ov, rawText.slice(cursorPos));
+        appendBrNbsp(ov);
+        return;
+      }
+      appendText(ov, rawText);
+      appendBrNbsp(ov);
+      return;
+    }
+
+    const insertAt = Math.min(partial.insertAt, rawText.length);
+    const textAtInsert = rawText.slice(insertAt, insertAt + partial.text.length);
+    const isAbsorbed = textAtInsert === partial.text;
+
+    appendText(ov, rawText.slice(0, insertAt));
+    if (!isAbsorbed) {
+      const span = document.createElement("span");
+      span.className = "ephia-text--streaming";
+      span.textContent = partial.text;
+      ov.appendChild(span);
+    } else if (active) {
+      appendAsciiCursor(ov);
+    }
+    appendText(ov, rawText.slice(insertAt));
+    appendBrNbsp(ov);
+  };
+
+  // ─── MutationObserver : synchroniser l'état actif ────────────────────────
+  useEffect(() => {
+    const ta = textareaRef.current;
+    const wr = wrapperRef.current;
+    if (!ta) return;
+
+    const onAttributeChange = () => {
+      const isRecording = ta.hasAttribute("data-ephia-recording");
+      setIsActive(isRecording);
+      if (!isRecording) {
+        anchorEndRef.current = null;
+        if (asciiTimerRef.current !== null) {
+          clearInterval(asciiTimerRef.current);
+          asciiTimerRef.current = null;
+        }
+      } else if (asciiTimerRef.current === null) {
+        asciiTimerRef.current = setInterval(() => {
+          asciiFrameRef.current = (asciiFrameRef.current + 1) % ASCII_CURSOR_FRAMES.length;
+          updateOverlay();
+        }, ASCII_CURSOR_INTERVAL_MS);
+      }
+      updateOverlay();
+    };
+
+    const observer = new MutationObserver(onAttributeChange);
+    observer.observe(ta, {
+      attributes: true,
+      attributeFilter: ["data-ephia-recording"],
+    });
+
+    return () => {
+      observer.disconnect();
+      if (asciiTimerRef.current !== null) {
+        clearInterval(asciiTimerRef.current);
+        asciiTimerRef.current = null;
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // ─── Écoute des events DOM du binding ────────────────────────────────────
+  useEffect(() => {
+    const ta = textareaRef.current;
+    if (!ta) return;
+
+    const onPartial = (e: Event) => {
+      const { text, insertAt } = (e as CustomEvent<{ text: string; insertAt: number }>).detail;
+      partialRef.current = { text, insertAt };
+      updateOverlay();
+    };
+
+    const onPartialCleared = () => {
+      partialRef.current = null;
+      updateOverlay();
+    };
+
+    const onCursorPosition = (e: Event) => {
+      const { position } = (e as CustomEvent<{ position: number }>).detail;
+      anchorEndRef.current = position;
+      updateOverlay();
+    };
+
+    ta.addEventListener("ephia:partial", onPartial);
+    ta.addEventListener("ephia:partial-cleared", onPartialCleared);
+    ta.addEventListener("ephia:cursor-position", onCursorPosition);
+    return () => {
+      ta.removeEventListener("ephia:partial", onPartial);
+      ta.removeEventListener("ephia:partial-cleared", onPartialCleared);
+      ta.removeEventListener("ephia:cursor-position", onCursorPosition);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // ─── Sync scroll overlay ↔ textarea ──────────────────────────────────────
+  useEffect(() => {
+    const ta = textareaRef.current;
+    const ov = overlayRef.current;
+    if (!ta || !ov) return;
+    const syncScroll = () => {
+      ov.scrollTop = ta.scrollTop;
+      ov.scrollLeft = ta.scrollLeft;
+    };
+    ta.addEventListener("scroll", syncScroll, { passive: true });
+    return () => ta.removeEventListener("scroll", syncScroll);
+  }, []);
+
+  // ─── Sync styles computed → overlay (font, padding, etc.) ─────────────────
+  useEffect(() => {
+    const ta = textareaRef.current;
+    const ov = overlayRef.current;
+    if (!ta || !ov) return;
+
+    const applyStyles = () => {
+      const cs = window.getComputedStyle(ta);
+      const s = ov.style;
+      s.fontFamily = cs.fontFamily;
+      s.fontSize = cs.fontSize;
+      s.fontWeight = cs.fontWeight;
+      s.fontStyle = cs.fontStyle;
+      s.lineHeight = cs.lineHeight;
+      s.letterSpacing = cs.letterSpacing;
+      s.wordSpacing = cs.wordSpacing;
+      s.textTransform = cs.textTransform;
+      s.textIndent = cs.textIndent;
+      s.paddingTop = cs.paddingTop;
+      s.paddingRight = cs.paddingRight;
+      s.paddingBottom = cs.paddingBottom;
+      s.paddingLeft = cs.paddingLeft;
+      s.borderTopWidth = cs.borderTopWidth;
+      s.borderRightWidth = cs.borderRightWidth;
+      s.borderBottomWidth = cs.borderBottomWidth;
+      s.borderLeftWidth = cs.borderLeftWidth;
+      s.boxSizing = cs.boxSizing;
+      s.width = cs.width;
+      s.height = cs.height;
+    };
+
+    applyStyles();
+    let ro: ResizeObserver | null = null;
+    if (typeof ResizeObserver !== "undefined") {
+      ro = new ResizeObserver(applyStyles);
+      ro.observe(ta);
+    }
+    return () => ro?.disconnect();
+  }, []);
+
+  // ─── Mise à jour overlay sur input utilisateur ────────────────────────────
+  useEffect(() => {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    const onInput = () => updateOverlay();
+    ta.addEventListener("input", onInput);
+    return () => ta.removeEventListener("input", onInput);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // ─── Initialisation overlay au montage ───────────────────────────────────
+  useEffect(() => {
+    updateOverlay();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // ─── Sync overlay quand value change via React (controlled component) ─────
+  useEffect(() => {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    requestAnimationFrame(() => updateOverlay());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rest.value]);
+
+  const inlineStyle = isActive
+    ? { ...style, caretColor: "transparent" as const }
+    : style;
+
+  return (
+    <div ref={wrapperRef} className="ephia-textarea-wrapper" style={{ position: "relative" }}>
+      <div
+        ref={overlayRef}
+        className="ephia-textarea-overlay"
+        aria-hidden="true"
+      />
+      <textarea
+        ref={setTextareaRef}
+        data-ephia-target={targetId}
+        data-ephia-mode={mode}
+        data-ephia-insertion={insertion}
+        className={`ephia-textarea-input ${className}`}
+        style={inlineStyle}
+        {...rest}
+      />
+    </div>
+  );
+});

package/src/react/ephia-react.css

@@ -0,0 +1,318 @@
+/* ephia-audio React SDK — visual feedback for active target, recording state & text states.
+ * Import: `import "ephia-audio/react/ephia-react.css"` (ou via styles.css du package).
+ * Tout est dérivé de variables CSS pour être surchargeable.
+ *
+ * Système de text states :
+ *   .ephia-text--streaming   → texte en cours d'arrivée STT (partial)
+ *   .ephia-text--committed   → transition de validation (streaming → normal)
+ *   .ephia-text--revised     → texte corrigé par le review pipeline
+ */
+
+:root {
+  /* ── Couleurs sémantiques ─────────────────────────────────────────────── */
+  --ephia-color-active: #6366f1;
+  --ephia-color-recording: #ef4444;
+  --ephia-color-streaming: #6366f1;
+  --ephia-color-committed: #22c55e;
+  --ephia-color-revised: #f59e0b;
+
+  /* ── Épaisseurs / radius ──────────────────────────────────────────────── */
+  --ephia-ring-width: 2px;
+  --ephia-ring-radius: 6px;
+  --ephia-transition: 180ms ease;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   HALOS — états du target (container)
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ─── Session active : griser les non-cibles pendant une dictée ──────────── */
+/* Cible les descendants directs du body ET les enfants directs des containers
+   pour éviter d'affecter des composants imbriqués non liés à Ephia.         */
+[data-ephia-session-active="true"] > [data-ephia-target]:not([data-ephia-recording="true"]),
+[data-ephia-session-active="true"] [data-ephia-target]:not([data-ephia-recording="true"]) {
+  opacity: 0.55;
+  filter: grayscale(0.6);
+  transition: opacity 0.2s ease, filter 0.2s ease;
+}
+
+/* ─── Target actif : halo discret (uniquement en session active) ────────── */
+body[data-ephia-session-active="true"] [data-ephia-target-active="true"] {
+  outline: var(--ephia-ring-width) solid
+    color-mix(in srgb, var(--ephia-color-active) 35%, transparent);
+  outline-offset: 1px;
+  border-radius: var(--ephia-ring-radius);
+  transition: outline-color var(--ephia-transition),
+    box-shadow var(--ephia-transition);
+}
+
+/* ─── Target en enregistrement : border + glow ───────────────────────────── */
+[data-ephia-recording="true"] {
+  position: relative;
+  outline: none !important;
+  border: 2px solid color-mix(in srgb, var(--ephia-color-recording) 55%, transparent);
+  border-radius: var(--ephia-ring-radius);
+}
+
+[data-ephia-recording="true"]::before {
+  content: "";
+  position: absolute;
+  inset: -3px;
+  border-radius: calc(var(--ephia-ring-radius) + 3px);
+  pointer-events: none;
+  z-index: 50;
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ephia-color-recording) 30%, transparent),
+    0 0 18px color-mix(in srgb, var(--ephia-color-recording) 25%, transparent);
+  animation: ephia-recording-pulse 1.8s ease-in-out infinite;
+}
+
+@keyframes ephia-recording-pulse {
+  0%, 100% { opacity: 0.8; transform: scale(1); }
+  50% { opacity: 1; transform: scale(1.01); }
+}
+
+/* ─── Indicateur public processing : discret, piloté par EphiaStatusBar ─── */
+[data-ephia-state="processing"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 6px;
+}
+
+[data-ephia-state="processing"]::before,
+[data-ephia-state="processing"]::after {
+  content: "";
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: currentColor;
+  opacity: 0.4;
+  animation: ephia-processing-pulse 1.2s ease-in-out infinite;
+}
+
+[data-ephia-state="processing"]::after {
+  animation-delay: 0.4s;
+  margin-left: 3px;
+}
+
+@keyframes ephia-processing-pulse {
+  0%, 80%, 100% { opacity: 0.2; transform: scale(0.85); }
+  40% { opacity: 0.8; transform: scale(1); }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   FLASHES — overlays temporaires (position: fixed)
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ─── Flash sur plage révisée ────────────────────────────────────────────── */
+.ephia-reformat-flash {
+  position: fixed;
+  pointer-events: none;
+  z-index: 100;
+  border-radius: 3px;
+  background-color: color-mix(in srgb, var(--ephia-color-active) 22%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ephia-color-active) 40%, transparent);
+  animation: ephia-reformat-fade 1.2s ease-out forwards;
+}
+
+@keyframes ephia-reformat-fade {
+  0% { opacity: 0; }
+  15% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+/* ─── Flash chunk committed : bleu → vert ────────────────────────────────── */
+.ephia-committed-flash {
+  position: fixed;
+  pointer-events: none;
+  z-index: 100;
+  border-radius: 3px;
+  background-color: color-mix(in srgb, #3b82f6 22%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, #3b82f6 40%, transparent);
+  animation: ephia-committed-fade 1s ease-out forwards;
+}
+
+@keyframes ephia-committed-fade {
+  0% { opacity: 0; background-color: color-mix(in srgb, #3b82f6 30%, transparent); }
+  30% { opacity: 1; background-color: color-mix(in srgb, #3b82f6 25%, transparent); }
+  60% { background-color: color-mix(in srgb, #22c55e 20%, transparent); }
+  100% { opacity: 0; background-color: color-mix(in srgb, #22c55e 15%, transparent); }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   TEXT STATES — styles appliqués au texte lui-même
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ─── 1. STREAMING — texte en cours d'arrivée STT ──────────────────────────
+   Visuel : fond lavande "respirant" + border-bottom dotted + italique léger.
+   Le texte est vivant, il peut encore changer. */
+.ephia-streaming,
+.ephia-text--streaming {
+  background-color: color-mix(in srgb, var(--ephia-color-streaming) 8%, transparent);
+  border-bottom: 1.5px dotted color-mix(in srgb, var(--ephia-color-streaming) 30%, transparent);
+  border-radius: 2px;
+  padding: 0 2px;
+  margin: 0 -2px;
+  font-style: italic;
+  animation: ephia-streaming-breathe 2.2s ease-in-out infinite;
+  transition: background-color 350ms ease, border-bottom-color 350ms ease, opacity 350ms ease;
+}
+
+@keyframes ephia-streaming-breathe {
+  0%, 100% { background-color: color-mix(in srgb, var(--ephia-color-streaming) 6%, transparent); }
+  50% { background-color: color-mix(in srgb, var(--ephia-color-streaming) 11%, transparent); }
+}
+
+/* ─── 1b. PLACEHOLDER — texte interim au démarrage (avant premier partial) ─
+   Visuel : points de suspension avec un shimmer horizontal qui simule
+   une onde traversant le texte en attendant l'arrivée du STT. */
+.ephia-text--placeholder {
+  background: linear-gradient(
+    90deg,
+    rgba(99, 102, 241, 0.2) 0%,
+    rgba(99, 102, 241, 0.7) 40%,
+    rgba(99, 102, 241, 0.2) 80%
+  );
+  background-size: 250% 100%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: ephia-placeholder-shimmer 1.6s ease-in-out infinite;
+  font-style: italic;
+}
+
+@keyframes ephia-placeholder-shimmer {
+  0% { background-position: 250% 0; }
+  100% { background-position: -250% 0; }
+}
+
+/* ─── 2. COMMITTED — transition streaming → normal ─────────────────────────
+   Quand le backend valide le texte, le fond lavande glisse vers le vert
+   puis disparaît complètement. Feedback de confirmation visuelle. */
+.ephia-committed,
+.ephia-text--committed {
+  animation: ephia-committed-settle 1.2s ease-out forwards;
+  font-style: normal;
+}
+
+@keyframes ephia-committed-settle {
+  0% {
+    background-color: color-mix(in srgb, var(--ephia-color-streaming) 8%, transparent);
+    border-bottom-color: color-mix(in srgb, var(--ephia-color-streaming) 30%, transparent);
+  }
+  25% {
+    background-color: color-mix(in srgb, var(--ephia-color-committed) 18%, transparent);
+    border-bottom-color: color-mix(in srgb, var(--ephia-color-committed) 45%, transparent);
+  }
+  100% {
+    background-color: transparent;
+    border-bottom-color: transparent;
+  }
+}
+
+/* ─── 3. REVISED — texte corrigé par le review pipeline ────────────────────
+   Visuel : fond ambre + ligne ondulée (style suggestion). S'efface après 2s.
+   L'utilisateur remarque que le backend a modifié quelque chose. */
+.ephia-revised,
+.ephia-text--revised {
+  background-color: color-mix(in srgb, var(--ephia-color-revised) 14%, transparent);
+  border-bottom: 2px wavy color-mix(in srgb, var(--ephia-color-revised) 45%, transparent);
+  border-radius: 2px;
+  padding: 0 2px;
+  margin: 0 -2px;
+  animation: ephia-revised-settle 2s ease-out forwards;
+}
+
+@keyframes ephia-revised-settle {
+  0% {
+    background-color: color-mix(in srgb, var(--ephia-color-revised) 22%, transparent);
+    border-bottom-color: color-mix(in srgb, var(--ephia-color-revised) 55%, transparent);
+  }
+  50% {
+    background-color: color-mix(in srgb, var(--ephia-color-revised) 10%, transparent);
+    border-bottom-color: color-mix(in srgb, var(--ephia-color-revised) 35%, transparent);
+  }
+  100% {
+    background-color: transparent;
+    border-bottom-color: transparent;
+  }
+}
+
+/* ─── 5. ERROR — erreur de transcription ─────────────────────────────────── */
+.ephia-error {
+  color: #dc2626;
+  text-decoration: line-through;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   UTILITAIRES & A11Y
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ─── Lock cursor TipTap / ProseMirror ───────────────────────────────────── */
+[data-ephia-recording="true"] .ProseMirror {
+  caret-color: transparent !important;
+}
+
+/* ─── Curseur d'insertion ─────────────────────────────────────────────────── */
+.ephia-insertion-cursor {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@keyframes ephia-pulse {
+  0%, 100% {
+    transform: translateX(-50%) scale(0.9);
+    opacity: 0.7;
+  }
+  50% {
+    transform: translateX(-50%) scale(1.15);
+    opacity: 1;
+  }
+}
+
+/* ─── A11y : pas d'animations si reduce-motion ────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  [data-ephia-recording="true"] {
+    animation: none;
+  }
+  [data-ephia-recording="true"]::before {
+    animation: none !important;
+  }
+  .ephia-insertion-cursor > * {
+    animation: none !important;
+  }
+  .ephia-reformat-flash,
+  .ephia-committed-flash {
+    animation: none;
+    opacity: 0.5;
+  }
+  .ephia-streaming,
+  .ephia-text--streaming {
+    animation: none;
+    background-color: color-mix(in srgb, var(--ephia-color-streaming) 8%, transparent);
+  }
+  .ephia-text--placeholder {
+    animation: none;
+    background: transparent;
+    -webkit-text-fill-color: color-mix(in srgb, var(--ephia-color-streaming) 50%, transparent);
+    color: color-mix(in srgb, var(--ephia-color-streaming) 50%, transparent);
+  }
+  .ephia-committed,
+  .ephia-text--committed {
+    animation: none;
+    background-color: transparent;
+    border-bottom-color: transparent;
+  }
+  .ephia-revised,
+  .ephia-text--revised {
+    animation: none;
+    background-color: color-mix(in srgb, var(--ephia-color-revised) 10%, transparent);
+    border-bottom-color: color-mix(in srgb, var(--ephia-color-revised) 40%, transparent);
+  }
+  .ephia-error {
+    color: #dc2626;
+    text-decoration: line-through;
+  }
+}

package/src/react/hooks/targets/index.ts

@@ -0,0 +1,3 @@
+export { useEphiaCodemirror } from "./useEphiaCodemirror";
+export { useEphiaMonaco } from "./useEphiaMonaco";
+export { useEphiaTiptap } from "./useEphiaTiptap";

package/src/react/hooks/targets/useEphiaCodemirror.ts

@@ -0,0 +1,35 @@
+import { useEffect, useRef } from "react";
+import type { CMEditorView } from "../../../shared/types/editors";
+import { CodeMirrorInstanceRegistry } from "../../registry/registries/CodeMirrorInstanceRegistry";
+import type { UseEphiaTargetOptions } from "../useEphiaTarget";
+
+/**
+ * Enregistre une instance CodeMirror 6 (`EditorView`) comme cible de dictée Ephia.
+ *
+ * @example
+ * const [view, setView] = useState<EditorView | null>(null);
+ * const ref = useEphiaCodemirror(view, { id: 'rapport', mode: 'write' });
+ *
+ * return <div ref={ref} />;  // CodeMirror sera monté dans ce div
+ */
+export function useEphiaCodemirror(
+  view: CMEditorView | null,
+  options: UseEphiaTargetOptions
+): React.RefObject<HTMLDivElement | null> {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!view || !ref.current) return;
+    const el = ref.current;
+    CodeMirrorInstanceRegistry.set(el, view);
+    return () => {
+      CodeMirrorInstanceRegistry.delete(el);
+    };
+  }, [view]);
+
+  // V1 registration removed — useEphiaCodemirror is deprecated in V2.
+  // Migrate to useEphiaTiptap or useEphiaTarget with a textarea.
+  void options;
+
+  return ref;
+}

package/src/react/hooks/targets/useEphiaMonaco.ts

@@ -0,0 +1,35 @@
+import { useEffect, useRef } from "react";
+import type { MonacoEditorInstance } from "../../../shared/types/editors";
+import { MonacoInstanceRegistry } from "../../registry/registries/MonacoInstanceRegistry";
+import type { UseEphiaTargetOptions } from "../useEphiaTarget";
+
+/**
+ * Enregistre une instance Monaco Editor comme cible de dictée Ephia.
+ *
+ * @example
+ * const editorRef = useRef<MonacoEditorInstance | null>(null);
+ * const containerRef = useEphiaMonaco(editorRef.current, { id: 'code', mode: 'write' });
+ *
+ * return <div ref={containerRef} style={{ height: 400 }} />;
+ */
+export function useEphiaMonaco(
+  editor: MonacoEditorInstance | null,
+  options: UseEphiaTargetOptions
+): React.RefObject<HTMLDivElement | null> {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!editor || !ref.current) return;
+    const el = ref.current;
+    MonacoInstanceRegistry.set(el, editor);
+    return () => {
+      MonacoInstanceRegistry.delete(el);
+    };
+  }, [editor]);
+
+  // V1 registration removed — useEphiaMonaco is deprecated in V2.
+  // Migrate to useEphiaTiptap or useEphiaTarget with a textarea.
+  void options;
+
+  return ref;
+}