torch-glare 2.5.5 → 2.6.0

package/apps/lib/components/TextEditor/TextEditorToolbar.tsx

@@ -1,429 +0,0 @@
-"use client";
-
-import { ReactNode, RefObject, useCallback, useEffect, useRef, useState } from "react";
-import type EditorJS from "@editorjs/editorjs";
-import type Undo from "editorjs-undo";
-
-import { cn } from "../../utils/cn";
-import { Themes } from "../../utils/types";
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-} from "../DropdownMenu";
-import { currentRange, toggleWrap } from "./editor-tools/inlineFormat";
-import type { Alignment } from "./editor-tools/AlignmentTune";
-
-// ─── Types ───────────────────────────────────────────────────────────────────
-interface Props {
-  editorRef: RefObject<EditorJS | null>;
-  undoRef: RefObject<Undo | null>;
-  holderRef: RefObject<HTMLDivElement | null>;
-  /** Editor is initialized — enables the buttons. */
-  ready: boolean;
-  theme?: Themes;
-}
-
-type BlockType = { label: string; type: "paragraph" | "header"; level?: number };
-
-const BLOCK_TYPES: BlockType[] = [
-  { label: "Normal Text", type: "paragraph" },
-  { label: "Heading 1", type: "header", level: 1 },
-  { label: "Heading 2", type: "header", level: 2 },
-  { label: "Heading 3", type: "header", level: 3 },
-];
-
-const COLORS = [
-  "#1b1b1b",
-  "#797c7f",
-  "#e11d48",
-  "#f97316",
-  "#eab308",
-  "#22c55e",
-  "#0075ff",
-  "#8b5cf6",
-  "#ec4899",
-  "#ffffff",
-];
-
-const ALIGNMENTS: { value: Alignment; icon: string; label: string }[] = [
-  { value: "left", icon: "ri-align-left", label: "Align left" },
-  { value: "center", icon: "ri-align-center", label: "Align center" },
-  { value: "right", icon: "ri-align-right", label: "Align right" },
-];
-
-// ─── Small icon button (design "button-2.0": p-[5px], rounded-[6px], 18px icon) ──
-function Btn({
-  onClick,
-  disabled,
-  active,
-  title,
-  children,
-  className,
-}: {
-  onClick: () => void;
-  disabled?: boolean;
-  active?: boolean;
-  title: string;
-  children: ReactNode;
-  className?: string;
-}) {
-  return (
-    <button
-      type="button"
-      title={title}
-      aria-label={title}
-      aria-pressed={active}
-      disabled={disabled}
-      // Preserve the editor's text selection: don't let the click move focus/caret before
-      // the command runs.
-      onMouseDown={(e) => e.preventDefault()}
-      onClick={onClick}
-      className={cn(
-        "flex items-center justify-center rounded-[6px] p-[5px] transition-colors",
-        "text-content-presentation-global-primary [&_i]:text-[18px] [&_i]:leading-none",
-        "disabled:cursor-not-allowed disabled:opacity-40",
-        active ? "bg-black-alpha-10" : "hover:bg-black-alpha-10",
-        className,
-      )}
-    >
-      {children}
-    </button>
-  );
-}
-
-function Divider() {
-  return (
-    <span className="h-[20px] w-px shrink-0 self-center bg-border-presentation-global-primary" />
-  );
-}
-
-/** A tight cluster of buttons (design: groups are `gap-[2px]` internally, `gap-[8px]` apart). */
-function Group({ children }: { children: ReactNode }) {
-  return <div className="flex items-center gap-[2px]">{children}</div>;
-}
-
-// ─── Toolbar ─────────────────────────────────────────────────────────────────
-export function TextEditorToolbar({ editorRef, undoRef, holderRef, ready, theme }: Props) {
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  // Live formatting state (drives button highlight + block-type label).
-  const [state, setState] = useState({
-    blockLabel: "Normal Text",
-    bold: false,
-    italic: false,
-    underline: false,
-    strike: false,
-    align: "left" as Alignment,
-    color: "#1b1b1b",
-  });
-
-  // A dropdown grabs focus when it opens (Radix menus always auto-focus), which loses the
-  // editor's current block + text selection. So snapshot them the instant a toolbar control
-  // is pressed — before focus moves — and act on the snapshot.
-  const capturedIndex = useRef(-1);
-  const capturedRange = useRef<Range | null>(null);
-  const capture = useCallback(() => {
-    capturedIndex.current = editorRef.current?.blocks.getCurrentBlockIndex() ?? -1;
-    const r = currentRange();
-    capturedRange.current =
-      r && holderRef.current?.contains(r.commonAncestorContainer) ? r.cloneRange() : null;
-  }, [editorRef, holderRef]);
-
-  // The captured block (or the live one, for non-dropdown actions).
-  const ctx = useCallback(() => {
-    const ed = editorRef.current;
-    if (!ed) return null;
-    const live = ed.blocks.getCurrentBlockIndex();
-    const index = live >= 0 ? live : capturedIndex.current;
-    if (index < 0) return null;
-    const block = ed.blocks.getBlockByIndex(index);
-    return block ? { ed, index, block, id: block.id } : null;
-  }, [editorRef]);
-
-  // ── Read active state from the current selection (throttled) ──
-  useEffect(() => {
-    if (!ready) return;
-    let raf = 0;
-    const read = () => {
-      raf = 0;
-      const holder = holderRef.current;
-      const sel = window.getSelection();
-      if (!holder || !sel || sel.rangeCount === 0 || !holder.contains(sel.anchorNode)) return;
-      const c = ctx();
-      let blockLabel = "Normal Text";
-      let align: Alignment = "left";
-      if (c) {
-        if (c.block.name === "header") {
-          const h = c.block.holder.querySelector("h1,h2,h3,h4,h5,h6");
-          blockLabel = h ? `Heading ${h.tagName[1]}` : "Heading";
-        }
-        const wrap = c.block.holder.querySelector<HTMLElement>(".cdx-align-wrap");
-        align = (wrap?.dataset.align as Alignment) ?? "left";
-      }
-      setState((s) => ({
-        ...s,
-        blockLabel,
-        align,
-        bold: document.queryCommandState("bold"),
-        italic: document.queryCommandState("italic"),
-        underline: document.queryCommandState("underline"),
-        strike: document.queryCommandState("strikeThrough"),
-      }));
-    };
-    const onChange = () => {
-      if (!raf) raf = requestAnimationFrame(read);
-    };
-    document.addEventListener("selectionchange", onChange);
-    return () => {
-      document.removeEventListener("selectionchange", onChange);
-      if (raf) cancelAnimationFrame(raf);
-    };
-  }, [ready, ctx, holderRef]);
-
-  // ── Actions ──
-  // The button's `onMouseDown` preventDefault keeps the editor's selection, so run the
-  // command directly — do NOT refocus (that would collapse/move the selection).
-  const exec = (cmd: string) => {
-    document.execCommand(cmd);
-  };
-
-  const setBlock = async (bt: BlockType) => {
-    const c = ctx();
-    if (!c) return;
-    try {
-      await c.ed.blocks.convert(c.id, bt.type, bt.type === "header" ? { level: bt.level } : {});
-      c.ed.caret.setToBlock(c.ed.blocks.getCurrentBlockIndex(), "end");
-    } catch {
-      /* conversion not available for this block */
-    }
-    setState((s) => ({ ...s, blockLabel: bt.label }));
-  };
-
-  const setList = async (style: "unordered" | "ordered") => {
-    const c = ctx();
-    if (!c) return;
-    try {
-      await c.ed.blocks.convert(c.id, "list", { style });
-      c.ed.caret.setToBlock(c.ed.blocks.getCurrentBlockIndex(), "end");
-    } catch {
-      /* noop */
-    }
-  };
-
-  const setAlign = (align: Alignment) => {
-    const c = ctx();
-    if (!c) return;
-    const wrap = c.block.holder.querySelector<HTMLElement>(".cdx-align-wrap");
-    if (wrap) {
-      wrap.dataset.align = align;
-      c.block.dispatchChange();
-    }
-    setState((s) => ({ ...s, align }));
-  };
-
-  const setColor = (color: string) => {
-    // The color picker lives in a dropdown, so the live selection was lost when it opened —
-    // restore the snapshot before wrapping.
-    const r = capturedRange.current;
-    if (r) {
-      const sel = window.getSelection();
-      sel?.removeAllRanges();
-      sel?.addRange(r);
-    }
-    toggleWrap("span", { color });
-    setState((s) => ({ ...s, color }));
-  };
-
-  const insertImage = (file: File) => {
-    const c = ctx();
-    const ed = editorRef.current;
-    if (!ed) return;
-    const reader = new FileReader();
-    reader.onload = () => {
-      ed.blocks.insert(
-        "image",
-        { url: reader.result as string },
-        undefined,
-        (c?.index ?? -1) + 1,
-        true,
-      );
-    };
-    reader.readAsDataURL(file);
-  };
-
-  const d = !ready;
-
-  return (
-    <div
-      data-theme={theme}
-      // Snapshot the editor's block/selection before a control press can move focus.
-      onMouseDownCapture={capture}
-      className={cn(
-        "flex w-full flex-wrap items-center gap-[8px] p-[8px] rounded-tr-[6px] rounded-tl-[6px]",
-        "border-b border-border-presentation-global-primary",
-        "bg-background-presentation-form-header backdrop-blur-[8px]",
-        "shadow-[0px_2px_9px_0px_var(--background-presentation-form-header-shadow)]",
-      )}
-    >
-      {/* history */}
-      <Group>
-        <Btn title="Undo" disabled={d} onClick={() => undoRef.current?.undo()}>
-          <i className="ri-arrow-go-back-fill" />
-        </Btn>
-        <Btn title="Redo" disabled={d} onClick={() => undoRef.current?.redo()}>
-          <i className="ri-arrow-go-forward-fill" />
-        </Btn>
-      </Group>
-      <Divider />
-
-      {/* block type */}
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild disabled={d}>
-          <button
-            type="button"
-            onMouseDown={(e) => e.preventDefault()}
-            disabled={d}
-            className={cn(
-              "flex items-center gap-[2px] rounded-[6px] px-[14px] py-[2px] transition-colors",
-              "typography-body-large-medium text-content-presentation-global-primary",
-              "hover:bg-black-alpha-10 disabled:cursor-not-allowed disabled:opacity-40",
-            )}
-          >
-            {state.blockLabel}
-            <i className="ri-arrow-down-s-line text-[18px] leading-none" />
-          </button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          {BLOCK_TYPES.map((bt) => (
-            <DropdownMenuItem key={bt.label} onSelect={() => setBlock(bt)}>
-              {bt.label}
-            </DropdownMenuItem>
-          ))}
-        </DropdownMenuContent>
-      </DropdownMenu>
-
-      {/* align */}
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild disabled={d}>
-          <button
-            type="button"
-            onMouseDown={(e) => e.preventDefault()}
-            disabled={d}
-            title="Text align"
-            className={cn(
-              "flex items-center gap-[2px] rounded-[6px] px-[8px] py-[5px] transition-colors",
-              "text-content-presentation-global-primary [&_i]:text-[18px] [&_i]:leading-none",
-              "hover:bg-black-alpha-10 disabled:cursor-not-allowed disabled:opacity-40",
-            )}
-          >
-            <i
-              className={ALIGNMENTS.find((a) => a.value === state.align)?.icon ?? "ri-align-left"}
-            />
-            <i className="ri-arrow-down-s-line" />
-          </button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          {ALIGNMENTS.map((a) => (
-            <DropdownMenuItem key={a.value} onSelect={() => setAlign(a.value)}>
-              <i className={cn(a.icon, "text-[16px]")} />
-              {a.label}
-            </DropdownMenuItem>
-          ))}
-        </DropdownMenuContent>
-      </DropdownMenu>
-
-      {/* color */}
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild disabled={d}>
-          <button
-            type="button"
-            onMouseDown={(e) => e.preventDefault()}
-            disabled={d}
-            title="Text color"
-            className={cn(
-              "flex items-center gap-[2px] rounded-[6px] p-[4px] transition-colors",
-              "hover:bg-black-alpha-10 disabled:cursor-not-allowed disabled:opacity-40",
-            )}
-          >
-            <span
-              className="size-[22px] rounded-[6px] border border-border-presentation-global-primary"
-              style={{ backgroundColor: state.color }}
-            />
-            <i className="ri-arrow-down-s-line text-[18px] leading-none text-content-presentation-global-primary" />
-          </button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <div className="grid grid-cols-5 gap-[6px] p-[6px]">
-            {COLORS.map((c) => (
-              <button
-                key={c}
-                type="button"
-                title={c}
-                onMouseDown={(e) => e.preventDefault()}
-                onClick={() => setColor(c)}
-                className="size-[22px] rounded-[6px] border border-border-presentation-global-primary transition-transform hover:scale-110"
-                style={{ backgroundColor: c }}
-              />
-            ))}
-          </div>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <Divider />
-
-      {/* format */}
-      <Group>
-        <Btn title="Bold" disabled={d} active={state.bold} onClick={() => exec("bold")}>
-          <i className="ri-bold" />
-        </Btn>
-        <Btn title="Italic" disabled={d} active={state.italic} onClick={() => exec("italic")}>
-          <i className="ri-italic" />
-        </Btn>
-        <Btn
-          title="Underline"
-          disabled={d}
-          active={state.underline}
-          onClick={() => exec("underline")}
-        >
-          <i className="ri-underline" />
-        </Btn>
-        <Btn
-          title="Strikethrough"
-          disabled={d}
-          active={state.strike}
-          onClick={() => toggleWrap("s")}
-        >
-          <i className="ri-strikethrough" />
-        </Btn>
-        <Btn title="Clear formatting" disabled={d} onClick={() => exec("removeFormat")}>
-          <i className="ri-format-clear" />
-        </Btn>
-      </Group>
-      <Divider />
-
-      {/* lists + image (one group on the right, per the design) */}
-      <Group>
-        <Btn title="Bullet list" disabled={d} onClick={() => setList("unordered")}>
-          <i className="ri-list-check" />
-        </Btn>
-        <Btn title="Ordered list" disabled={d} onClick={() => setList("ordered")}>
-          <i className="ri-list-ordered-2" />
-        </Btn>
-        <Btn title="Insert image" disabled={d} onClick={() => fileInputRef.current?.click()}>
-          <i className="ri-image-add-fill" />
-        </Btn>
-      </Group>
-      <input
-        ref={fileInputRef}
-        type="file"
-        accept="image/*"
-        hidden
-        onChange={(e) => {
-          const f = e.target.files?.[0];
-          if (f) insertImage(f);
-          e.target.value = "";
-        }}
-      />
-    </div>
-  );
-}

package/apps/lib/components/TextEditor/editor-tools/AlignmentTune.ts

@@ -1,70 +0,0 @@
-import type { API, BlockAPI } from "@editorjs/editorjs";
-import type { MenuConfig } from "@editorjs/editorjs/types/tools";
-
-export type Alignment = "left" | "center" | "right";
-
-interface AlignmentData {
-  alignment?: Alignment;
-}
-
-const ICONS: Record<Alignment, string> = {
-  left: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 6h16M4 12h10M4 18h13"/></svg>',
-  center:
-    '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 6h16M7 12h10M5 18h14"/></svg>',
-  right:
-    '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 6h16M10 12h10M7 18h13"/></svg>',
-};
-
-/**
- * A block **tune** that stores per-block text alignment. It is registered globally (via the
- * editor's `tunes`), so every block gets it.
- *
- * `wrap()` tags the block content with `.cdx-align-wrap` + a `data-align` attribute — this both
- * restores saved alignment on render AND gives the fixed `TextEditorToolbar` a stable node to
- * drive (the toolbar sets `data-align` on the current block and calls `dispatchChange`, and
- * `save()` reads it back). CSS in `TextEditor` maps `data-align` → `text-align`.
- */
-export default class AlignmentTune {
-  private api: API;
-  private block: BlockAPI;
-  private alignment: Alignment;
-  private wrapper: HTMLElement | null = null;
-
-  static get isTune() {
-    return true;
-  }
-
-  constructor({ api, block, data }: { api: API; block: BlockAPI; data: AlignmentData }) {
-    this.api = api;
-    this.block = block;
-    this.alignment = data?.alignment ?? "left";
-  }
-
-  wrap(content: HTMLElement): HTMLElement {
-    this.wrapper = content;
-    content.classList.add("cdx-align-wrap");
-    content.dataset.align = this.alignment;
-    return content;
-  }
-
-  save(): AlignmentData {
-    return { alignment: (this.wrapper?.dataset.align as Alignment) ?? this.alignment };
-  }
-
-  /** Set alignment on this block (used by the block-settings menu and, via the DOM node, the toolbar). */
-  setAlignment(alignment: Alignment): void {
-    this.alignment = alignment;
-    if (this.wrapper) this.wrapper.dataset.align = alignment;
-    this.block.dispatchChange();
-  }
-
-  render(): MenuConfig {
-    return (["left", "center", "right"] as Alignment[]).map((a) => ({
-      icon: ICONS[a],
-      title: `Align ${a}`,
-      toggle: "align",
-      isActive: this.alignment === a,
-      onActivate: () => this.setAlignment(a),
-    }));
-  }
-}

package/apps/lib/components/TextEditor/editor-tools/ColorInlineTool.ts

@@ -1,50 +0,0 @@
-import { toggleWrap } from "./inlineFormat";
-
-/**
- * EditorJS inline tool for **text color**. Its primary purpose is to register
- * `<span style="…">` in the block sanitizer so colored text survives `editor.save()`
- * (EditorJS unions every enabled inline tool's `sanitize` into the save config). The visible
- * color picker lives in the fixed `TextEditorToolbar`, which calls `applyColor()` — kept here
- * so the inline-toolbar path and the fixed-toolbar path share one implementation.
- */
-export default class ColorInlineTool {
-  private button: HTMLButtonElement | null = null;
-
-  static get isInline() {
-    return true;
-  }
-
-  static get title() {
-    return "Color";
-  }
-
-  /** Allow the styled span (with its inline `style`) through the sanitizer. */
-  static get sanitize() {
-    return { span: { style: true } };
-  }
-
-  /** Wrap the current selection in `<span style="color:…">`; shared by both toolbars. */
-  static applyColor(color: string): void {
-    toggleWrap("span", { color });
-  }
-
-  render(): HTMLElement {
-    // A minimal inline-toolbar entry (applies a default accent). The rich picker is the
-    // fixed toolbar's dropdown.
-    this.button = document.createElement("button");
-    this.button.type = "button";
-    this.button.classList.add("ce-inline-tool");
-    this.button.innerHTML =
-      '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 20h16"/><path d="m6 16 4-9 4 9"/><path d="M7.5 13h5"/></svg>';
-    return this.button;
-  }
-
-  surround(range: Range): void {
-    if (!range) return;
-    ColorInlineTool.applyColor("#0075ff");
-  }
-
-  checkState(): boolean {
-    return false;
-  }
-}

package/apps/lib/components/TextEditor/editor-tools/StrikethroughInlineTool.ts

@@ -1,48 +0,0 @@
-import { selectionHas, toggleWrap } from "./inlineFormat";
-
-/**
- * EditorJS inline tool for **strikethrough**. Its main job is to register `<s>` (and legacy
- * `<strike>`/`<del>`) in the block sanitizer so strikethrough survives `editor.save()` —
- * EditorJS unions every enabled inline tool's `sanitize` into each block's save config. It
- * also adds the button to the inline (selection) toolbar; the fixed toolbar uses the same
- * `toggleWrap("s")` helper so both paths produce identical markup.
- */
-export default class StrikethroughInlineTool {
-  private button: HTMLButtonElement | null = null;
-
-  static get isInline() {
-    return true;
-  }
-
-  static get title() {
-    return "Strikethrough";
-  }
-
-  static get sanitize() {
-    return { s: {}, strike: {}, del: {} };
-  }
-
-  static get shortcut() {
-    return "CMD+SHIFT+X";
-  }
-
-  render(): HTMLElement {
-    this.button = document.createElement("button");
-    this.button.type = "button";
-    this.button.classList.add("ce-inline-tool");
-    this.button.innerHTML =
-      '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14"/><path d="M16 6.5A3.5 3.5 0 0 0 12.5 4h-1A3.5 3.5 0 0 0 8 7.5c0 1.5 1 2.5 3 3"/><path d="M8.5 15c.5 2 2 3 4 3h.5a3.5 3.5 0 0 0 0-7"/></svg>';
-    return this.button;
-  }
-
-  surround(range: Range): void {
-    if (!range) return;
-    toggleWrap("s");
-  }
-
-  checkState(): boolean {
-    const active = selectionHas((el) => ["s", "strike", "del"].includes(el.tagName.toLowerCase()));
-    this.button?.classList.toggle("ce-inline-tool--active", active);
-    return active;
-  }
-}

package/apps/lib/components/TextEditor/editor-tools/inlineFormat.ts

@@ -1,98 +0,0 @@
-/**
- * Shared DOM helpers for the editor's inline formatting, used by both the custom inline
- * tools (Strikethrough, Color) and the fixed `TextEditorToolbar` so they emit identical
- * markup. Kept deterministic (own Range manipulation) rather than relying only on
- * `document.execCommand`, whose output tag varies across browsers.
- */
-
-/** The current selection Range, or null when there's no usable selection. */
-export function currentRange(): Range | null {
-  const sel = window.getSelection();
-  if (!sel || sel.rangeCount === 0) return null;
-  return sel.getRangeAt(0);
-}
-
-/** Walk up from a node to find an ancestor matching `predicate`, stopping at the block root. */
-function closestWithin(
-  node: Node | null,
-  predicate: (el: HTMLElement) => boolean,
-): HTMLElement | null {
-  let el: Node | null = node;
-  while (el && el instanceof HTMLElement) {
-    if (el.classList?.contains("ce-block")) return null;
-    if (predicate(el)) return el;
-    el = el.parentElement;
-  }
-  return null;
-}
-
-/** Is the current selection already inside an element matching `predicate`? */
-export function selectionHas(predicate: (el: HTMLElement) => boolean): boolean {
-  const range = currentRange();
-  if (!range) return false;
-  const node = range.commonAncestorContainer;
-  const start = node.nodeType === Node.TEXT_NODE ? node.parentElement : (node as HTMLElement);
-  return !!closestWithin(start, predicate);
-}
-
-/**
- * Toggle-wrap the current selection in `<tagName>` (optionally with inline styles). If the
- * selection is already fully inside such a tag, it is unwrapped instead. Returns true when
- * something changed. Applies styles when wrapping so callers (e.g. color) get a `<span
- * style="...">` whose attributes match the tool's sanitize allowlist.
- */
-export function toggleWrap(tagName: string, styles?: Record<string, string>): boolean {
-  const range = currentRange();
-  if (!range || range.collapsed) return false;
-
-  const tag = tagName.toLowerCase();
-  const matches = (el: HTMLElement) =>
-    el.tagName.toLowerCase() === tag &&
-    (!styles ||
-      Object.entries(styles).every(
-        ([k, v]) => el.style.getPropertyValue(k) === v || el.style[k as never] === v,
-      ));
-
-  // Already wrapped → unwrap (lift the tag's children out, drop the tag).
-  const startEl =
-    range.startContainer.nodeType === Node.TEXT_NODE
-      ? range.startContainer.parentElement
-      : (range.startContainer as HTMLElement);
-  const existing = closestWithin(startEl, matches);
-  if (existing) {
-    const parent = existing.parentNode;
-    if (!parent) return false;
-    while (existing.firstChild) parent.insertBefore(existing.firstChild, existing);
-    parent.removeChild(existing);
-    return true;
-  }
-
-  // Wrap the selected contents.
-  const wrapper = document.createElement(tag);
-  if (styles) for (const [k, v] of Object.entries(styles)) wrapper.style.setProperty(k, v);
-  try {
-    wrapper.appendChild(range.extractContents());
-    range.insertNode(wrapper);
-    // Reselect the wrapped content so repeated clicks toggle correctly.
-    const sel = window.getSelection();
-    if (sel) {
-      const r = document.createRange();
-      r.selectNodeContents(wrapper);
-      sel.removeAllRanges();
-      sel.addRange(r);
-    }
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-/** Read the effective text color of the current selection (rgb string), or "" if none. */
-export function selectionColor(): string {
-  const range = currentRange();
-  if (!range) return "";
-  const node = range.startContainer;
-  const el = node.nodeType === Node.TEXT_NODE ? node.parentElement : (node as HTMLElement);
-  if (!el) return "";
-  return getComputedStyle(el).color || "";
-}