@ephia/dova-sdk 1.0.0

package/src/core/bindings/targets/contenteditable.binding.ts

@@ -0,0 +1,452 @@
+import type {
+  BeginSessionOptions,
+  SessionAnchor,
+  TargetBinding,
+} from "../TargetBinding";
+import { pickJoiner } from "../TargetBinding";
+import type { DocumentOperation } from "ephia-protocol";
+
+function findTextNodeAtOffset(
+  root: HTMLElement,
+  offset: number
+): { node: Text; offset: number } | null {
+  let remaining = offset;
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  let node: Text | null;
+  while ((node = walker.nextNode() as Text | null)) {
+    const len = node.textContent?.length ?? 0;
+    if (remaining < len) {
+      return { node, offset: remaining };
+    }
+    remaining -= len;
+  }
+  // Fin du document
+  const last = root.lastChild;
+  if (last && last.nodeType === Node.TEXT_NODE) {
+    return { node: last as Text, offset: (last.textContent?.length ?? 0) };
+  }
+  return null;
+}
+
+function getCursorOffsetInElement(element: HTMLElement): number | null {
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0) return null;
+  const range = sel.getRangeAt(0);
+  if (!element.contains(range.endContainer)) return null;
+  const preCaretRange = range.cloneRange();
+  preCaretRange.selectNodeContents(element);
+  preCaretRange.setEnd(range.endContainer, range.endOffset);
+  return preCaretRange.toString().length;
+}
+
+function getSelectionOffsets(
+  element: HTMLElement
+): { start: number; end: number } | null {
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0) return null;
+  const range = sel.getRangeAt(0);
+  if (!element.contains(range.startContainer) || !element.contains(range.endContainer)) {
+    return null;
+  }
+  const startRange = range.cloneRange();
+  startRange.selectNodeContents(element);
+  startRange.setEnd(range.startContainer, range.startOffset);
+  const start = startRange.toString().length;
+  const endRange = range.cloneRange();
+  endRange.selectNodeContents(element);
+  endRange.setEnd(range.endContainer, range.endOffset);
+  const end = endRange.toString().length;
+  return { start, end };
+}
+
+function deleteRangeByOffsets(element: HTMLElement, start: number, end: number): void {
+  if (start === end) return;
+  const startResult = findTextNodeAtOffset(element, start);
+  const endResult = findTextNodeAtOffset(element, end);
+  if (!startResult || !endResult) return;
+  const range = document.createRange();
+  range.setStart(startResult.node, startResult.offset);
+  range.setEnd(endResult.node, endResult.offset);
+  range.deleteContents();
+}
+
+function insertSpanAtOffset(
+  element: HTMLElement,
+  offset: number,
+  span: HTMLElement
+): void {
+  const result = findTextNodeAtOffset(element, offset);
+  if (!result) {
+    element.appendChild(span);
+    return;
+  }
+  const range = document.createRange();
+  range.setStart(result.node, result.offset);
+  range.collapse(true);
+  range.insertNode(span);
+}
+
+interface SessionSegment {
+  span: HTMLElement;
+  revision: number;
+  committed: boolean;
+  joiner: string;
+}
+
+export function createContentEditableBinding(element: HTMLElement): TargetBinding {
+  let anchor: SessionAnchor | null = null;
+  const segments = new Map<string, SessionSegment>();
+  let inputHandler: (() => void) | null = null;
+  const committedTimeouts = new Set<number>();
+
+  /** Recalcule anchor.end à partir de la position de tous les spans de la session. */
+  const recomputeAnchorEnd = () => {
+    if (!anchor) return;
+    let end = anchor.initialStart;
+    for (const seg of segments.values()) {
+      const range = document.createRange();
+      range.selectNodeContents(element);
+      range.setEndAfter(seg.span);
+      const offset = range.toString().length;
+      if (offset > end) end = offset;
+    }
+    anchor.end = end;
+  };
+
+  return {
+    kind: "contenteditable",
+
+    attach(): void {
+      if (!inputHandler) {
+        inputHandler = () => recomputeAnchorEnd();
+        element.addEventListener("input", inputHandler);
+      }
+    },
+
+    detach(): void {
+      if (inputHandler) {
+        element.removeEventListener("input", inputHandler);
+        inputHandler = null;
+      }
+      for (const id of committedTimeouts) clearTimeout(id);
+      committedTimeouts.clear();
+      segments.clear();
+      anchor = null;
+    },
+
+    // ─── Session lifecycle ───────────────────────────────────────────────────
+    beginSession(opts: BeginSessionOptions = {}): SessionAnchor {
+      const replaceSelection = opts.replaceSelection ?? true;
+      const sel = getSelectionOffsets(element);
+      const isFocused = document.activeElement === element || element.contains(document.activeElement);
+
+      let start: number;
+      let end: number;
+      let hadSelection = false;
+
+      if (sel && isFocused) {
+        start = sel.start;
+        end = sel.end;
+        hadSelection = start !== end;
+      } else {
+        // Pas de selection / pas focused → fin du document
+        start = element.textContent?.length ?? 0;
+        end = start;
+      }
+
+      // Ne pas supprimer la sélection ici — différé au premier insert.
+
+      anchor = {
+        initialStart: start,
+        initialEnd: end,        // conserver la vraie fin de sélection
+        hadSelection,
+        end: start,             // point d'insertion = début de sélection
+        selectionPendingDelete: hadSelection && replaceSelection,
+      };
+      segments.clear();
+      return anchor;
+    },
+
+    endSession(): void {
+      anchor = null;
+      segments.clear();
+    },
+
+    getSessionAnchor(): SessionAnchor | null {
+      return anchor;
+    },
+
+    getCursorRect(): DOMRect | null {
+      if (anchor) {
+        // Position visuelle de anchor.end
+        const result = findTextNodeAtOffset(element, anchor.end);
+        if (result) {
+          const range = document.createRange();
+          range.setStart(result.node, result.offset);
+          range.collapse(true);
+          const rect = range.getBoundingClientRect();
+          if (rect.width === 0 && rect.height === 0) {
+            // Range vide → fallback sur l'élément
+            return element.getBoundingClientRect();
+          }
+          return rect;
+        }
+      }
+      const sel = window.getSelection();
+      if (sel && sel.rangeCount > 0 && element.contains(sel.anchorNode)) {
+        return sel.getRangeAt(0).getBoundingClientRect();
+      }
+      return element.getBoundingClientRect();
+    },
+
+    // ─── Insertion streaming ─────────────────────────────────────────────────
+    insertPartial(segmentId: string, text: string, revision: number): void {
+      // Pas de session → créer une session implicite
+      if (!anchor) {
+        const offset = getCursorOffsetInElement(element) ?? element.textContent?.length ?? 0;
+        anchor = {
+          initialStart: offset,
+          initialEnd: offset,
+          hadSelection: false,
+          end: offset,
+          selectionPendingDelete: false,
+        };
+      }
+
+      // Suppression lazy de la sélection au premier insert
+      if (anchor.selectionPendingDelete && anchor.initialEnd > anchor.initialStart) {
+        deleteRangeByOffsets(element, anchor.initialStart, anchor.initialEnd);
+        anchor.end = anchor.initialStart;
+        anchor.selectionPendingDelete = false;
+      }
+
+      const existing = segments.get(segmentId);
+
+      if (existing) {
+        if (revision <= existing.revision) return;
+        const oldLen = existing.span.textContent?.length ?? 0;
+        // Préserver le joiner lors des mises à jour du partial
+        const newContent = existing.joiner + text;
+        existing.span.textContent = newContent;
+        existing.revision = revision;
+        anchor.end += newContent.length - oldLen;
+      } else {
+        const before = element.textContent?.slice(0, anchor.end) ?? "";
+        const joiner = pickJoiner(before, text);
+
+        const span = document.createElement("span");
+        span.setAttribute("data-ephia-segment", segmentId);
+        span.setAttribute("data-ephia-state", "partial");
+        span.classList.add("ephia-streaming");
+        span.textContent = joiner + text;
+
+        insertSpanAtOffset(element, anchor.end, span);
+        segments.set(segmentId, { span, revision, committed: false, joiner });
+        anchor.end += joiner.length + text.length;
+      }
+    },
+
+    commitFinal(segmentId: string, text: string): void {
+      if (!anchor) {
+        // Fallback hors session
+        const offset = getCursorOffsetInElement(element) ?? element.textContent?.length ?? 0;
+        const before = element.textContent?.slice(0, offset) ?? "";
+        const joiner = pickJoiner(before, text);
+        const span = document.createElement("span");
+        span.setAttribute("data-ephia-segment", segmentId);
+        span.setAttribute("data-ephia-state", "final");
+        span.textContent = joiner + text;
+        insertSpanAtOffset(element, offset, span);
+        return;
+      }
+
+      // Suppression lazy de la sélection au premier commit (si pas déjà fait par insertPartial)
+      if (anchor.selectionPendingDelete && anchor.initialEnd > anchor.initialStart) {
+        deleteRangeByOffsets(element, anchor.initialStart, anchor.initialEnd);
+        anchor.end = anchor.initialStart;
+        anchor.selectionPendingDelete = false;
+      }
+
+      const existing = segments.get(segmentId);
+
+      if (existing) {
+        const oldLen = existing.span.textContent?.length ?? 0;
+        // Garder le joiner si présent dans le partial (recalcul propre)
+        const beforeSpanRange = document.createRange();
+        beforeSpanRange.selectNodeContents(element);
+        beforeSpanRange.setEndBefore(existing.span);
+        const before = beforeSpanRange.toString();
+        const joiner = pickJoiner(before, text);
+        existing.span.textContent = joiner + text;
+        existing.span.setAttribute("data-ephia-state", "final");
+        existing.span.classList.remove("ephia-streaming");
+        existing.span.classList.add("ephia-committed");
+        existing.committed = true;
+        existing.joiner = joiner;
+        existing.revision = Number.MAX_SAFE_INTEGER;
+        anchor.end += (joiner.length + text.length) - oldLen;
+
+        // Retirer la classe committed après l'animation (1.2s + marge)
+        const timeoutId = window.setTimeout(() => {
+          existing.span.classList.remove("ephia-committed");
+          committedTimeouts.delete(timeoutId);
+        }, 1300);
+        committedTimeouts.add(timeoutId);
+      } else {
+        // Pas de partial préalable
+        const before = element.textContent?.slice(0, anchor.end) ?? "";
+        const joiner = pickJoiner(before, text);
+        const span = document.createElement("span");
+        span.setAttribute("data-ephia-segment", segmentId);
+        span.setAttribute("data-ephia-state", "final");
+        span.textContent = joiner + text;
+        insertSpanAtOffset(element, anchor.end, span);
+        segments.set(segmentId, {
+          span,
+          revision: Number.MAX_SAFE_INTEGER,
+          committed: true,
+          joiner,
+        });
+        anchor.end += joiner.length + text.length;
+      }
+      recomputeAnchorEnd();
+    },
+
+    clearPartial(segmentId: string): void {
+      const existing = segments.get(segmentId);
+      if (!existing || !anchor) return;
+      existing.span.remove();
+      segments.delete(segmentId);
+      // Recalculer anchor.end proprement après suppression d'un span
+      recomputeAnchorEnd();
+    },
+
+    clearAll(): void {
+      for (const [segmentId, segment] of [...segments]) {
+        if (segment.committed) continue;
+        segment.span.remove();
+        segments.delete(segmentId);
+      }
+      recomputeAnchorEnd();
+    },
+
+    getText(): string {
+      return element.textContent ?? "";
+    },
+
+    getSelection() {
+      const off = getSelectionOffsets(element);
+      if (!off) return null;
+      return {
+        text: (element.textContent ?? "").slice(off.start, off.end),
+        range: off,
+      };
+    },
+
+    getCursorOffset(): number | null {
+      return getCursorOffsetInElement(element);
+    },
+
+    getSegmentRange(segmentId: string): { start: number; end: number } | null {
+      const seg = segments.get(segmentId);
+      if (!seg) return null;
+      const beforeRange = document.createRange();
+      beforeRange.selectNodeContents(element);
+      beforeRange.setEndBefore(seg.span);
+      const start = beforeRange.toString().length;
+      return { start, end: start + (seg.span.textContent?.length ?? 0) };
+    },
+
+    getRangeRect(start: number, end: number): DOMRect | null {
+      const startResult = findTextNodeAtOffset(element, start);
+      const endResult = findTextNodeAtOffset(element, end);
+      if (!startResult || !endResult) return null;
+      const range = document.createRange();
+      range.setStart(startResult.node, startResult.offset);
+      range.setEnd(endResult.node, endResult.offset);
+      return range.getBoundingClientRect();
+    },
+
+    applyOperation(operation: DocumentOperation): void {
+      switch (operation.type) {
+        case "replace": {
+          let start: number;
+          let end: number;
+          if (operation.range) {
+            start = operation.range.start;
+            end = operation.range.end;
+          } else if (operation.targetText) {
+            const text = element.textContent ?? "";
+            const idx = text.indexOf(operation.targetText);
+            if (idx === -1) {
+              console.warn("[contenteditableBinding] replace ignored: targetText not found");
+              return;
+            }
+            start = idx;
+            end = idx + operation.targetText.length;
+          } else {
+            console.warn("[contenteditableBinding] replace ignored: missing range or targetText");
+            return;
+          }
+          deleteRangeByOffsets(element, start, end);
+          const result = findTextNodeAtOffset(element, start);
+          if (result) {
+            const range = document.createRange();
+            range.setStart(result.node, result.offset);
+            range.collapse(true);
+            range.insertNode(document.createTextNode(operation.replacement));
+          }
+          recomputeAnchorEnd();
+          break;
+        }
+        case "insert": {
+          let pos = getCursorOffsetInElement(element) ?? (element.textContent?.length ?? 0);
+          if (typeof operation.position === "number") pos = operation.position;
+          else if (operation.position === "end") pos = element.textContent?.length ?? 0;
+          else if (operation.position === "start") pos = 0;
+          const result = findTextNodeAtOffset(element, pos);
+          if (result) {
+            const range = document.createRange();
+            range.setStart(result.node, result.offset);
+            range.collapse(true);
+            range.insertNode(document.createTextNode(operation.text));
+          } else {
+            element.appendChild(document.createTextNode(operation.text));
+          }
+          recomputeAnchorEnd();
+          break;
+        }
+        case "delete": {
+          let start: number;
+          let end: number;
+          if (operation.range) {
+            start = operation.range.start;
+            end = operation.range.end;
+          } else if (operation.targetText) {
+            const text = element.textContent ?? "";
+            const idx = text.indexOf(operation.targetText);
+            if (idx === -1) {
+              console.warn("[contenteditableBinding] delete ignored: targetText not found");
+              return;
+            }
+            start = idx;
+            end = idx + operation.targetText.length;
+          } else {
+            console.warn("[contenteditableBinding] delete ignored: missing range or targetText");
+            return;
+          }
+          deleteRangeByOffsets(element, start, end);
+          recomputeAnchorEnd();
+          break;
+        }
+        case "replace_all":
+          element.textContent = operation.replacement;
+          segments.clear();
+          recomputeAnchorEnd();
+          break;
+        default:
+          console.warn("[contenteditableBinding] Operation not supported:", operation.type);
+      }
+    },
+  };
+}

package/src/core/bindings/targets/index.ts

@@ -0,0 +1,10 @@
+export { createCodeMirrorBinding } from "./codemirror.binding";
+export { createContentEditableBinding } from "./contenteditable.binding";
+export { createMonacoBinding } from "./monaco.binding";
+export {
+  createTiptapBinding,
+  EphiaCommittedMark,
+  EphiaPlaceholderMark,
+  EphiaPreviewMark,
+  EphiaRevisedMark,
+} from "./tiptap.binding";