@ai-matrx/rich-editor 0.2.9 → 0.2.11

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 0.2.11
+### Bold (and every inline mark) toggles like a real editor
+
+- A selection that is partly bold becomes ONE bold span: the bold inside it loses its markers and one pair wraps the whole (`Alpha **bravo** delta` -> `**Alpha bravo delta**`, never `**Alpha **bravo** delta**`). A selection reaching into a bold span joins it.
+- A selection inside one bold span unbolds just that part (`**a [b] c**` -> `**a** b **c**`), and the toolbar's pressed state is on there.
+- Same rule for italic, strike and inline code — one command layer, every host.
+
+
+## 0.2.10
+### The caret survives a view switch
+
+- Switching Visual <-> Source (and back) carries the caret or selection: read from the leaving view as text around each end (`getCaret`, `CaretCarry`), placed in the new view once it is ready (`placeCaret(context, to)`). It used to land at offset 0.
+
 ## 0.2.9
 
 - Outline "Copy link" shows ONE toast (AP-2): the words ("Link to … copied.") ride the kit copy instead

package/dist/core/caret-context.d.ts

@@ -22,3 +22,17 @@ export declare function domPointAt(doc: Document, x: number, y: number): {
     node: Node;
     offset: number;
 } | null;
+/** The caret or selection of one view, as text around its two ends — carried across a view switch. */
+export interface CaretCarry {
+    from: CaretContext;
+    /** The selection's other end; null for a plain caret. */
+    to: CaretContext | null;
+}
+/** The text around `index` of `flat` (a view's own text). */
+export declare function contextAtIndex(flat: string, index: number): CaretContext;
+/**
+ * A context read from markdown SOURCE, made comparable with the rendered text: the markup characters a
+ * rendered view does not show (`**`, `_`, backticks, heading and quote marks) are dropped, so Source ->
+ * Visual finds the same words. (Visual -> Source needs no help: the locator falls back to the words.)
+ */
+export declare function withoutMarkup(context: CaretContext): CaretContext;

package/dist/core/caret-context.js

@@ -65,9 +65,19 @@ function domPointAt(doc, x, y) {
   if (range) return { node: range.startContainer, offset: range.startOffset };
   return null;
 }
+function contextAtIndex(flat, index) {
+  const at = Math.max(0, Math.min(index, flat.length));
+  return { before: flat.slice(Math.max(0, at - CONTEXT_CHARS), at), after: flat.slice(at, at + CONTEXT_CHARS) };
+}
+function withoutMarkup(context) {
+  const clean = (text) => text.replace(/[*_~`]+/g, "").replace(/^[ \t]*(?:#{1,6}|>|[-+*]|\d+[.)])[ \t]+/gm, "");
+  return { before: clean(context.before), after: clean(context.after) };
+}
 export {
   CONTEXT_CHARS,
   caretContextAt,
+  contextAtIndex,
   domPointAt,
-  locateCaret
+  locateCaret,
+  withoutMarkup
 };

package/dist/core/markdown-format.js

@@ -94,6 +94,83 @@ function mapPos(pos, changes, assoc) {
 function sorted(changes) {
   return [...changes].sort((a, b) => a.from - b.from || a.to - b.to);
 }
+function markSpansOnLine(text, pos, spec) {
+  const lineStart = text.lastIndexOf("\n", pos - 1) + 1;
+  const nl = text.indexOf("\n", pos);
+  const lineEnd = nl === -1 ? text.length : nl;
+  const spans = [];
+  const open = {};
+  let i = lineStart;
+  while (i < lineEnd) {
+    const ch = text[i];
+    if (ch === "`" && !spec.chars.includes("`")) {
+      const close = text.indexOf("`", i + 1);
+      i = close === -1 || close >= lineEnd ? i + 1 : close + 1;
+      continue;
+    }
+    if (!spec.chars.includes(ch)) {
+      i += 1;
+      continue;
+    }
+    const len = runLength(text, i, 1, ch);
+    if (spec.runs.includes(len)) {
+      const start = open[ch];
+      if (start === void 0) {
+        open[ch] = i + len;
+      } else {
+        if (i > start) spans.push({ innerFrom: start, innerTo: i });
+        open[ch] = void 0;
+      }
+    }
+    i += len;
+  }
+  return spans;
+}
+function contentOf(seg, spans, spec) {
+  let { from, to } = seg;
+  for (const sp of spans) {
+    if (from >= sp.innerFrom - spec.size && from < sp.innerFrom) from = sp.innerFrom;
+    if (to > sp.innerTo && to <= sp.innerTo + spec.size) to = sp.innerTo;
+  }
+  return { from, to: Math.max(from, to) };
+}
+function mergeOn(seg, spans, spec, changes) {
+  const touched = spans.filter((sp) => sp.innerFrom <= seg.to && sp.innerTo >= seg.from);
+  const from = Math.min(seg.from, ...touched.map((sp) => sp.innerFrom));
+  const to = Math.max(seg.to, ...touched.map((sp) => sp.innerTo));
+  let keepOpen = false;
+  let keepClose = false;
+  for (const sp of touched) {
+    if (sp.innerFrom === from && !keepOpen) keepOpen = true;
+    else changes.push({ from: sp.innerFrom - spec.size, to: sp.innerFrom, insert: "" });
+    if (sp.innerTo === to && !keepClose) keepClose = true;
+    else changes.push({ from: sp.innerTo, to: sp.innerTo + spec.size, insert: "" });
+  }
+  if (!keepOpen) changes.push({ from, to: from, insert: spec.marker });
+  if (!keepClose) changes.push({ from: to, to, insert: spec.marker });
+  return { from, to };
+}
+function splitOff(text, seg, sp, spec, changes) {
+  if (seg.from <= sp.innerFrom) {
+    changes.push({ from: sp.innerFrom - spec.size, to: sp.innerFrom, insert: "" });
+  } else {
+    let at = seg.from;
+    while (at > sp.innerFrom && /\s/.test(text[at - 1] ?? "")) at -= 1;
+    if (at === sp.innerFrom) changes.push({ from: sp.innerFrom - spec.size, to: sp.innerFrom, insert: "" });
+    else changes.push({ from: at, to: at, insert: spec.marker });
+  }
+  if (seg.to >= sp.innerTo) {
+    changes.push({ from: sp.innerTo, to: sp.innerTo + spec.size, insert: "" });
+  } else {
+    let at = seg.to;
+    while (at < sp.innerTo && /\s/.test(text[at] ?? "")) at += 1;
+    if (at === sp.innerTo) changes.push({ from: sp.innerTo, to: sp.innerTo + spec.size, insert: "" });
+    else changes.push({ from: at, to: at, insert: spec.marker });
+  }
+}
+function spanHolding(seg, spans) {
+  return spans.find((sp) => sp.innerFrom <= seg.from && seg.to <= sp.innerTo) ?? null;
+}
 function inlineCommand(text, from, to, spec) {
   if (from === to) {
     const word = wordAt(text, from);
@@ -109,21 +186,43 @@ function inlineCommand(text, from, to, spec) {
   const segments = inlineSegments(text, from, to);
   if (segments.length === 0) return { changes: [], anchor: from, head: to };
   const wraps = segments.map((seg) => wrapOf(text, seg, spec));
-  const allOn = wraps.every((w) => w !== null);
+  if (wraps.every((w) => w !== null)) {
+    const changes2 = [];
+    wraps.forEach((w) => {
+      changes2.push({ from: w.innerFrom - spec.size, to: w.innerFrom, insert: "" });
+      changes2.push({ from: w.innerTo, to: w.innerTo + spec.size, insert: "" });
+    });
+    const ordered2 = sorted(changes2);
+    const anchor2 = mapPos(wraps[0].innerFrom, ordered2, 1);
+    const head2 = mapPos(wraps[wraps.length - 1].innerTo, ordered2, -1);
+    return { changes: ordered2, anchor: anchor2, head: Math.max(anchor2, head2) };
+  }
+  const lineSpans = segments.map((seg) => markSpansOnLine(text, seg.from, spec));
+  const contents = segments.map((seg, i) => contentOf(seg, lineSpans[i], spec));
+  const holders = contents.map((c, i) => wraps[i] ? null : spanHolding(c, lineSpans[i]));
+  const allOn = wraps.every((w, i) => w !== null || holders[i] !== null);
   const changes = [];
+  let startAt = contents[0].from;
+  let endAt = contents[contents.length - 1].to;
   segments.forEach((seg, i) => {
     const w = wraps[i];
-    if (allOn && w) {
-      changes.push({ from: w.innerFrom - spec.size, to: w.innerFrom, insert: "" });
-      changes.push({ from: w.innerTo, to: w.innerTo + spec.size, insert: "" });
+    if (allOn) {
+      if (w) {
+        changes.push({ from: w.innerFrom - spec.size, to: w.innerFrom, insert: "" });
+        changes.push({ from: w.innerTo, to: w.innerTo + spec.size, insert: "" });
+      } else {
+        splitOff(text, contents[i], holders[i], spec, changes);
+      }
     } else if (!w) {
-      changes.push({ from: seg.from, to: seg.from, insert: spec.marker });
-      changes.push({ from: seg.to, to: seg.to, insert: spec.marker });
+      const merged = mergeOn(contents[i], lineSpans[i], spec, changes);
+      if (i === 0) startAt = merged.from;
+      if (i === segments.length - 1) endAt = merged.to;
+    } else {
+      if (i === 0) startAt = w.innerFrom;
+      if (i === segments.length - 1) endAt = w.innerTo;
     }
   });
   const ordered = sorted(changes);
-  const startAt = allOn ? wraps[0].innerFrom : segments[0].from;
-  const endAt = allOn ? wraps[wraps.length - 1].innerTo : segments[segments.length - 1].to;
   const anchor = mapPos(startAt, ordered, 1);
   const head = mapPos(endAt, ordered, -1);
   return { changes: ordered, anchor, head: Math.max(anchor, head) };
@@ -293,7 +392,12 @@ function isFormatActive(text, from, to, command) {
       const range = a === b ? wordAt(text, a) : { from: a, to: b };
       if (!range) return false;
       const segs = inlineSegments(text, range.from, range.to);
-      return segs.length > 0 && segs.every((s) => wrapOf(text, s, INLINE[command]) !== null);
+      const spec = INLINE[command];
+      return segs.length > 0 && segs.every((s) => {
+        if (wrapOf(text, s, spec) !== null) return true;
+        const spans = markSpansOnLine(text, s.from, spec);
+        return spanHolding(contentOf(s, spans, spec), spans) !== null;
+      });
     }
     case "link":
       return WHOLE_LINK.test(text.slice(a, b)) || text[a - 1] === "[" && text.slice(b, b + 2) === "](";

package/dist/editor/RichEditorImpl.js

@@ -131,6 +131,7 @@ function RichEditorImpl({
   const [kindRequest, setKindRequest] = useState(null);
   const approved = useRef(/* @__PURE__ */ new Set());
   const handle = useRef(null);
+  const pendingCaret = useRef(null);
   const imageInput = useRef(null);
   const { upload } = useFileUpload();
   const lastValue = useRef(value);
@@ -183,10 +184,26 @@ function RichEditorImpl({
       return;
     }
     handle.current?.clearFind();
+    pendingCaret.current = handle.current?.getCaret?.() ?? null;
     setView(next);
     setMountKey((key) => key + 1);
     if (next !== controlledView) onViewChange?.(next);
   };
+  useEffect(() => {
+    const carry = pendingCaret.current;
+    if (!carry || view === "preview") return;
+    pendingCaret.current = null;
+    let tries = 0;
+    let timer = null;
+    const attempt = () => {
+      if (handle.current?.placeCaret(carry.from, carry.to) || ++tries > 20) return;
+      timer = setTimeout(attempt, 50);
+    };
+    timer = setTimeout(attempt, 0);
+    return () => {
+      if (timer) clearTimeout(timer);
+    };
+  }, [view, mountKey]);
   useEffect(() => {
     if (controlledView !== void 0 && controlledView !== view) switchView(controlledView);
   }, [controlledView]);

package/dist/source/SourceEditor.js

@@ -21,7 +21,7 @@ import { getSchema } from "@tiptap/core";
 import { cn } from "@ai-matrx/design-system";
 import { toast } from "@ai-matrx/rich-content/host/toast";
 import { createRichEditorExtensions } from "../core/extensions.js";
-import { locateCaret } from "../core/caret-context.js";
+import { contextAtIndex, locateCaret, withoutMarkup } from "../core/caret-context.js";
 import { htmlToMarkdown } from "../core/html-to-markdown.js";
 import { mergedCellsNotice, normalizePastedHtml } from "../core/paste-html.js";
 import { findMatches, replaceMatches } from "../core/find-replace.js";
@@ -314,15 +314,30 @@ ${text}`;
       const v = view.current;
       return v ? { undo: undoDepth(v.state), redo: redoDepth(v.state) } : { undo: 0, redo: 0 };
     },
-    placeCaret: (context2) => {
+    placeCaret: (context2, to) => {
       const v = view.current;
       if (!v) return false;
-      const index = locateCaret(v.state.doc.toString(), context2);
+      const text = v.state.doc.toString();
+      const index = locateCaret(text, context2);
       if (index === null) return false;
-      v.dispatch({ selection: { anchor: index }, effects: EditorView.scrollIntoView(index, { y: "center" }) });
+      const toIndex = to ? locateCaret(text, to) : null;
+      v.dispatch({
+        selection: toIndex !== null && toIndex !== index ? { anchor: index, head: toIndex } : { anchor: index },
+        effects: EditorView.scrollIntoView(index, { y: "center" })
+      });
       v.focus();
       return true;
     },
+    getCaret: () => {
+      const v = view.current;
+      if (!v) return null;
+      const text = v.state.doc.toString();
+      const { from, to, empty } = v.state.selection.main;
+      return {
+        from: withoutMarkup(contextAtIndex(text, from)),
+        to: empty ? null : withoutMarkup(contextAtIndex(text, to))
+      };
+    },
     scrollToHeading: (_slug, offset) => {
       const v = view.current;
       if (!v) return;

package/dist/visual/VisualEditor.d.ts

@@ -1,6 +1,6 @@
 import { type Ref } from "react";
 import { type VisualLoadStats } from "../core/visual-document.js";
-import { type CaretContext } from "../core/caret-context.js";
+import { type CaretCarry, type CaretContext } from "../core/caret-context.js";
 import type { FindOptions } from "../core/find-replace.js";
 import { type RichShellActions } from "./visual-extensions.js";
 import type { FormatTarget } from "../format/format-target.js";
@@ -32,7 +32,9 @@ export interface EditorViewHandle {
     };
     scrollToHeading: (slug: string, offset: number) => void;
     /** Put the caret at the text the person double-clicked in the rendered view; false when not found. */
-    placeCaret: (context: CaretContext) => boolean;
+    placeCaret: (context: CaretContext, to?: CaretContext | null) => boolean;
+    /** The caret or selection as text around it, to carry across a view switch; null when there is none. */
+    getCaret: () => CaretCarry | null;
     find: (query: string, options: FindOptions, step?: 1 | -1) => ViewFindState;
     replaceCurrent: (query: string, replacement: string, options: FindOptions) => string[];
     replaceAll: (query: string, replacement: string, options: FindOptions) => string[];

package/dist/visual/VisualEditor.js

@@ -17,7 +17,7 @@ import {
   serializeVisualDocument
 } from "../core/visual-document.js";
 import { findInDoc, replaceInDoc } from "../core/visual-find.js";
-import { locateCaret } from "../core/caret-context.js";
+import { contextAtIndex, locateCaret } from "../core/caret-context.js";
 import { createVisualExtensions } from "./visual-extensions.js";
 import { findHighlightKey } from "./decorations.js";
 import { BlockHandle } from "./BlockHandle.js";
@@ -26,6 +26,21 @@ import { RICH_EDITOR_HOST_KEY, islandSelectionOf, tableAnchorOf } from "./format
 import { useRichEditorContext } from "../editor/RichEditorContext.js";
 const HEADLESS_SCHEMA = getSchema(createRichEditorExtensions());
 const REPORT_DELAY_MS = 120;
+function flattenDoc(doc) {
+  let flat = "";
+  const positions = [];
+  doc.descendants((node, pos) => {
+    if (node.isText && node.text) {
+      for (let i = 0; i < node.text.length; i++) positions.push(pos + i);
+      flat += node.text;
+    } else if (node.isBlock && flat.length > 0 && !flat.endsWith("\n")) {
+      positions.push(pos);
+      flat += "\n";
+    }
+    return true;
+  });
+  return { flat, positions };
+}
 function VisualEditor({
   initialText,
   onChange,
@@ -180,31 +195,30 @@ function VisualEditor({
         editor.chain().setTextSelection(pos).focus(void 0, { scrollIntoView: false }).run();
       }
     },
-    placeCaret: (context2) => {
+    placeCaret: (context2, to) => {
       if (!editor) return false;
-      let flat = "";
-      const positions = [];
-      editor.state.doc.descendants((node, pos2) => {
-        if (node.isText && node.text) {
-          for (let i = 0; i < node.text.length; i++) positions.push(pos2 + i);
-          flat += node.text;
-        } else if (node.isBlock && flat.length > 0 && !flat.endsWith("\n")) {
-          positions.push(pos2);
-          flat += "\n";
-        }
-        return true;
-      });
+      const { flat, positions } = flattenDoc(editor.state.doc);
       const index = locateCaret(flat, context2);
       if (index === null) return false;
-      const pos = index > 0 && positions[index - 1] !== void 0 ? positions[index - 1] + 1 : positions[index] ?? editor.state.doc.content.size - 1;
+      const posOf = (i) => i > 0 && positions[i - 1] !== void 0 ? positions[i - 1] + 1 : positions[i] ?? editor.state.doc.content.size - 1;
+      const toIndex = to ? locateCaret(flat, to) : null;
       try {
-        editor.view.dispatch(editor.state.tr.setSelection(TextSelection.near(editor.state.doc.resolve(pos))).scrollIntoView());
+        const doc = editor.state.doc;
+        const selection = toIndex !== null && toIndex !== index ? TextSelection.between(doc.resolve(posOf(index)), doc.resolve(posOf(toIndex))) : TextSelection.near(doc.resolve(posOf(index)));
+        editor.view.dispatch(editor.state.tr.setSelection(selection).scrollIntoView());
         editor.view.focus();
         return true;
       } catch {
         return false;
       }
     },
+    getCaret: () => {
+      if (!editor) return null;
+      const { flat, positions } = flattenDoc(editor.state.doc);
+      const indexOf = (pos) => positions.filter((p) => p < pos).length;
+      const { from, to, empty } = editor.state.selection;
+      return { from: contextAtIndex(flat, indexOf(from)), to: empty ? null : contextAtIndex(flat, indexOf(to)) };
+    },
     find: (query, options, step) => {
       if (!editor) return { count: 0, current: -1, skippedProtected: 0, error: null };
       const result = findInDoc(editor.state.doc, query, options);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-matrx/rich-editor",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "description": "The AI Matrx editor: Visual (Tiptap), Source (CodeMirror), Preview, the markdown formatting command layer, and edit-in-place — over @ai-matrx/rich-content. Consumers that only render never install it.",
   "type": "module",
   "license": "MIT",
@@ -94,8 +94,8 @@
     "@ai-matrx/alchemy": "latest",
     "@ai-matrx/content-ir": "latest",
     "@ai-matrx/design-system": "latest",
-    "@ai-matrx/print": "latest",
     "@ai-matrx/kit": "latest",
+    "@ai-matrx/print": "latest",
     "@ai-matrx/rich-content": "latest"
   },
   "peerDependencies": {