@ai-matrx/rich-editor 0.2.0 → 0.2.4

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## 0.2.4
+
+- Visible format buttons in plain text (Arman, 2026-10-04: "The formatting buttons need to work even when we are just showing plain text"). New `format/FormatButtons` (Bold, Italic, Code, Link, Heading, List — compact icons with tooltips) run THE command layer on a FormatTarget. The editor's Source view shows them inside its existing toolbar row.
+- `registerFormatElement` / `formatTargetWithin(root)`: every wired textarea (`useTextareaFormatting`) and the Source view register themselves, so a host's buttons act on the editor inside their container (focused › last focused › first). `EditorViewHandle.formatTarget()` returns the Source view's target.
+- The selection toolbar's formatting strip is the same compact six; Strikethrough, Heading 1, Quote and the rest live under More.
+- Edit in place: the caret placed at the double-click point now stays in view while the editor finishes drawing (tables, diagrams and code blocks grew above it and pushed it off screen — why 0.2.1's placement looked like "opened at the top"); a click at a line's end lands at that end, not the next block's start.
+
+### Consumer action
+
+- matrx-frontend: render `<FormatButtons resolve={() => formatTargetWithin(container)} />` inside a plain-text editor's existing toolbar row (notes Plain and Split).
+
+## 0.2.3
+
+- The outline panel and the island block pass their failure words to the kit copy (kit 0.30 `failureMessage`): a refused copy shows ONE toast, not the generic one plus ours.
+
+### Consumer action
+
+none.
+
+## 0.2.2
+
+- The outline panel's "copy link" and the island block's copy show their failure toast from the kit copy's `false` branch; the `catch` that held it could never run.
+
+### Consumer action
+
+- None required.
+
 ## 0.1.3
 ### Unreleased
 

package/dist/editor/RichEditorImpl.js

@@ -49,6 +49,7 @@ import { outlineOf } from "../core/outline.js";
 import { RichEditorContext } from "./RichEditorContext.js";
 import { VisualEditor } from "../visual/VisualEditor.js";
 import { SourceEditor } from "../source/SourceEditor.js";
+import { FormatButtons } from "../format/FormatButtons.js";
 import { FindReplacePanel } from "../panels/FindReplacePanel.js";
 import { OutlinePanel } from "../panels/OutlinePanel.js";
 import { ShortcutsDialog } from "../panels/ShortcutsDialog.js";
@@ -425,6 +426,10 @@ function RichEditorImpl({
     // Desktop shows the count in the toolbar; a phone reads it from the tools menu.
     ...isMobile ? [{ id: "count", label: `${formatCount(metrics.words)} words \xB7 ${saveStatus}`, icon: Hash, run: () => toast.info(documentFacts) }] : []
   ];
+  const formatButtons = view === "source" && !readOnly ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "mx-1 h-5 w-px shrink-0 bg-border" }),
+    /* @__PURE__ */ jsx(FormatButtons, { resolve: () => handle.current?.formatTarget?.() ?? null })
+  ] }) : null;
   const micButton = mic.available && !readOnly && view !== "preview" ? /* @__PURE__ */ jsx(
     ToolbarButton,
     {
@@ -542,6 +547,7 @@ function RichEditorImpl({
                     option
                   );
                 }) }),
+                formatButtons,
                 !isMobile && /* @__PURE__ */ jsxs(Fragment, { children: [
                   /* @__PURE__ */ jsx("span", { className: "mx-1 h-5 w-px shrink-0 bg-border" }),
                   tools.map((tool) => /* @__PURE__ */ jsx(ToolbarButton, { label: tool.label, active: tool.active, onClick: tool.run, disabled: tool.disabled, children: /* @__PURE__ */ jsx(tool.icon, { className: "h-4 w-4" }) }, tool.id)),

package/dist/format/FormatButtons.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { type LucideIcon } from "lucide-react";
+import type { FormatCommandId } from "../core/markdown-format.js";
+import type { FormatTarget } from "./format-target.js";
+export interface FormatButtonSpec {
+    command: FormatCommandId;
+    label: string;
+    icon: LucideIcon;
+}
+/** The compact set every plain-text toolbar shows (the rest stay on the selection toolbar and the keys). */
+export declare const FORMAT_BUTTONS: readonly FormatButtonSpec[];
+export interface FormatButtonsProps {
+    /** The editor the buttons act on, read at press time. Null = nothing to format (buttons stay, inert). */
+    resolve: () => FormatTarget | null;
+    /** Hide (render nothing) — a read-only host. */
+    disabled?: boolean;
+    className?: string;
+    /** "sm" (28px, the editor toolbar) or "xs" (24px, a dense strip). */
+    size?: "sm" | "xs";
+}
+export declare function FormatButtons({ resolve, disabled, className, size }: FormatButtonsProps): React.ReactElement | null;
+export default FormatButtons;

package/dist/format/FormatButtons.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Bold, Code, Heading2, Italic, Link2, List } from "lucide-react";
+import { cn } from "@ai-matrx/design-system";
+const FORMAT_BUTTONS = [
+  { command: "bold", label: "Bold (\u2318B)", icon: Bold },
+  { command: "italic", label: "Italic (\u2318I)", icon: Italic },
+  { command: "code", label: "Inline code (\u2318E)", icon: Code },
+  { command: "link", label: "Link (\u2318K)", icon: Link2 },
+  { command: "heading2", label: "Heading", icon: Heading2 },
+  { command: "bulletList", label: "Bulleted list (\u2318\u21E78)", icon: List }
+];
+function FormatButtons({ resolve, disabled = false, className, size = "sm" }) {
+  if (disabled) return null;
+  return /* @__PURE__ */ jsx("div", { role: "group", "aria-label": "Formatting", "data-format-buttons": "", className: cn("flex shrink-0 items-center gap-0.5", className), children: FORMAT_BUTTONS.map(({ command, label, icon: Icon }) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      title: label,
+      "data-format-command": command,
+      "data-matrx-button": "",
+      onMouseDown: (event) => event.preventDefault(),
+      onClick: () => {
+        resolve()?.run(command);
+      },
+      className: cn(
+        "inline-flex shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground",
+        size === "xs" ? "h-6 w-6" : "h-7 w-7"
+      ),
+      children: /* @__PURE__ */ jsx(Icon, { className: size === "xs" ? "h-3.5 w-3.5" : "h-4 w-4" })
+    },
+    command
+  )) });
+}
+var FormatButtons_default = FormatButtons;
+export {
+  FORMAT_BUTTONS,
+  FormatButtons,
+  FormatButtons_default as default
+};

package/dist/format/format-actions.js

@@ -29,13 +29,13 @@ function formatTargetOf(target) {
 const FORMATS = [
   { id: "bold", command: "bold", label: "Bold (\u2318B)", icon: Bold },
   { id: "italic", command: "italic", label: "Italic (\u2318I)", icon: Italic },
-  { id: "strike", command: "strike", label: "Strikethrough (\u2318\u21E7X)", icon: Strikethrough },
+  { id: "strike", command: "strike", label: "Strikethrough (\u2318\u21E7X)", icon: Strikethrough, more: true },
   { id: "code", command: "code", label: "Inline code (\u2318E)", icon: Code },
   { id: "link", command: "link", label: "Link (\u2318K)", icon: Link2 },
-  { id: "h1", command: "heading1", label: "Heading 1", icon: Heading1 },
-  { id: "h2", command: "heading2", label: "Heading 2", icon: Heading2 },
+  { id: "h1", command: "heading1", label: "Heading 1", icon: Heading1, more: true },
+  { id: "h2", command: "heading2", label: "Heading", icon: Heading2 },
   { id: "h3", command: "heading3", label: "Heading 3", icon: Heading3, more: true },
-  { id: "quote", command: "quote", label: "Quote", icon: Quote },
+  { id: "quote", command: "quote", label: "Quote", icon: Quote, more: true },
   { id: "list", command: "bulletList", label: "Bulleted list (\u2318\u21E78)", icon: List },
   { id: "numbered", command: "orderedList", label: "Numbered list (\u2318\u21E77)", icon: ListOrdered, more: true },
   { id: "tasks", command: "taskList", label: "Checklist (\u2318\u21E79)", icon: ListChecks, more: true },

package/dist/format/format-target.d.ts

@@ -37,3 +37,7 @@ export declare function textFormatTarget(engine: "source" | "textarea", read: ()
 export declare function applyEditToTextarea(el: HTMLTextAreaElement, result: SourceEditResult): void;
 /** The textarea engine. */
 export declare function textareaFormatTarget(el: HTMLTextAreaElement): FormatTarget;
+/** Register `el` as a formatting host; returns the unregister. */
+export declare function registerFormatElement(el: Element, target: FormatTarget): () => void;
+/** The registered editor inside `root` the person is in (focused › last focused › first). */
+export declare function formatTargetWithin(root: ParentNode | null | undefined): FormatTarget | null;

package/dist/format/format-target.js

@@ -70,10 +70,39 @@ function textareaFormatTarget(el) {
     }
   );
 }
+const FORMAT_HOST_ATTR = "data-format-host";
+const registeredTargets = /* @__PURE__ */ new WeakMap();
+let lastFocused = null;
+function registerFormatElement(el, target) {
+  registeredTargets.set(el, target);
+  el.setAttribute(FORMAT_HOST_ATTR, "");
+  const onFocus = () => {
+    lastFocused = el;
+  };
+  el.addEventListener("focusin", onFocus);
+  return () => {
+    el.removeEventListener("focusin", onFocus);
+    if (registeredTargets.get(el) === target) {
+      registeredTargets.delete(el);
+      el.removeAttribute(FORMAT_HOST_ATTR);
+    }
+    if (lastFocused === el) lastFocused = null;
+  };
+}
+function formatTargetWithin(root) {
+  if (!root) return null;
+  const hosts = Array.from(root.querySelectorAll(`[${FORMAT_HOST_ATTR}]`));
+  if (hosts.length === 0) return null;
+  const active = typeof document === "undefined" ? null : document.activeElement;
+  const pick = hosts.find((el) => active && (el === active || el.contains(active))) ?? (lastFocused && hosts.includes(lastFocused) ? lastFocused : null) ?? hosts[0];
+  return registeredTargets.get(pick) ?? null;
+}
 export {
   MARKDOWN_FORMAT_HOST_KEY,
   applyEditToTextarea,
+  formatTargetWithin,
   markdownFormatHost,
+  registerFormatElement,
   textFormatTarget,
   textareaFormatTarget
 };

package/dist/format/useTextareaFormatting.js

@@ -2,7 +2,7 @@
 import { useEffect } from "react";
 import { useSelectionZone } from "@ai-matrx/rich-content/selection-toolbar/selection-zones";
 import { formatCommandForKey, keyNameOf } from "../core/markdown-format.js";
-import { markdownFormatHost, textareaFormatTarget } from "./format-target.js";
+import { markdownFormatHost, registerFormatElement, textareaFormatTarget } from "./format-target.js";
 function isApplePlatform() {
   if (typeof navigator === "undefined") return false;
   const platform = navigator.userAgentData?.platform ?? navigator.platform ?? "";
@@ -23,7 +23,11 @@ function useTextareaFormatting(element, enabled = true) {
       handleFormatChord(element, event);
     };
     element.addEventListener("keydown", onKeyDown);
-    return () => element.removeEventListener("keydown", onKeyDown);
+    const unregister = registerFormatElement(element, textareaFormatTarget(element));
+    return () => {
+      element.removeEventListener("keydown", onKeyDown);
+      unregister();
+    };
   }, [element, enabled]);
   useSelectionZone(
     element,

package/dist/in-place/InPlaceEditor.d.ts

@@ -39,3 +39,12 @@ export interface InPlaceAction {
     run: (text: string) => Promise<void>;
 }
 export declare function InPlaceEditor({ value, mode, write, close, caret, minHeight, expandable, startExpanded, discardDescription, editor, className, id, toolbarExtras, actions, }: InPlaceEditorProps): import("react").JSX.Element;
+/**
+ * The caret was placed where the person double-clicked, but the editor keeps
+ * growing for a moment after (tables, diagrams and code blocks finish drawing
+ * above it), which pushed it out of view: 0.2.1 placed the caret correctly and
+ * the person still saw the top of the answer. For a short settle window, every
+ * size change brings the caret back into view — until the person scrolls,
+ * types or clicks, which ends it at once.
+ */
+export declare function keepCaretInView(root: HTMLElement, settleMs?: number): () => void;

package/dist/in-place/InPlaceEditor.js

@@ -41,9 +41,13 @@ function InPlaceEditor({
   useEffect(() => {
     let tries = 0;
     let frame = 0;
+    let release = null;
     const place = () => {
       const c = controller.current;
-      if (c && (caret ? c.placeCaret(caret) : (c.focus(), true))) return;
+      if (c && (caret ? c.placeCaret(caret) : (c.focus(), true))) {
+        if (caret && shellRef.current) release = keepCaretInView(shellRef.current);
+        return;
+      }
       if (++tries > 90) {
         controller.current?.focus();
         return;
@@ -51,7 +55,10 @@ function InPlaceEditor({
       frame = requestAnimationFrame(place);
     };
     frame = requestAnimationFrame(place);
-    return () => cancelAnimationFrame(frame);
+    return () => {
+      cancelAnimationFrame(frame);
+      release?.();
+    };
   }, [caret]);
   const inputSinceReport = useRef(false);
   const onDraft = (text) => {
@@ -164,6 +171,41 @@ function InPlaceEditor({
     }
   );
 }
+function keepCaretInView(root, settleMs = 2500) {
+  let done = false;
+  const caretElement = () => {
+    const sel = typeof window === "undefined" ? null : window.getSelection();
+    if (!sel || sel.rangeCount === 0) return null;
+    const range = sel.getRangeAt(0);
+    const node = range.startContainer;
+    const el = node.nodeType === 1 ? node : node.parentElement;
+    if (!el || !root.contains(el)) return null;
+    const r = range.getBoundingClientRect();
+    return { el, rect: r.height || r.width ? r : el.getBoundingClientRect() };
+  };
+  const show = () => {
+    if (done) return;
+    const at = caretElement();
+    if (!at) return;
+    if (at.rect.top < 0 || at.rect.bottom > window.innerHeight) at.el.scrollIntoView({ block: "center" });
+  };
+  const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(show);
+  ro?.observe(root);
+  const tick = window.setInterval(show, 200);
+  const stop = () => {
+    if (done) return;
+    done = true;
+    ro?.disconnect();
+    window.clearInterval(tick);
+    window.clearTimeout(timer);
+    for (const type of ["wheel", "touchmove", "keydown", "pointerdown"]) window.removeEventListener(type, stop, true);
+  };
+  const timer = window.setTimeout(stop, settleMs);
+  for (const type of ["wheel", "touchmove", "keydown", "pointerdown"]) window.addEventListener(type, stop, { capture: true, passive: true });
+  show();
+  return stop;
+}
 export {
-  InPlaceEditor
+  InPlaceEditor,
+  keepCaretInView
 };

package/dist/in-place/caret-handoff.js

@@ -1,4 +1,5 @@
-const pending = /* @__PURE__ */ new Map();
+const PENDING_KEY = /* @__PURE__ */ Symbol.for("ai-matrx.rich-editor.in-place-caret-handoff");
+const pending = globalThis[PENDING_KEY] ??= /* @__PURE__ */ new Map();
 function handInPlaceCaret(key, caret) {
   if (caret) pending.set(key, caret);
   else pending.delete(key);

package/dist/panels/OutlinePanel.js

@@ -15,12 +15,8 @@ function OutlinePanel({
   const minLevel = Math.min(...entries.map((entry) => entry.level), 6);
   const copyLink = async (entry) => {
     const url = `${window.location.origin}${window.location.pathname}${window.location.search}#${entry.slug}`;
-    try {
-      if (!await copyText(url)) return;
-      toast.success(`Link to \u201C${entry.text}\u201D copied.`);
-    } catch {
-      toast.error("Copy failed \u2014 your browser blocked clipboard access.");
-    }
+    if (!await copyText(url, void 0, "Copy failed \u2014 your browser blocked clipboard access.")) return;
+    toast.success(`Link to \u201C${entry.text}\u201D copied.`);
   };
   return /* @__PURE__ */ jsxs("nav", { "aria-label": "Outline", className: cn("flex h-full flex-col overflow-hidden", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-3 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground", children: [

package/dist/source/SourceEditor.js

@@ -28,7 +28,7 @@ import { findMatches, replaceMatches } from "../core/find-replace.js";
 import { continueMarkupOnEnter, makeLink, setLinePrefix, toggleWrap } from "../core/source-format.js";
 import { markdownSourceLanguage } from "./markdown-language.js";
 import { formatMarkdown } from "../core/markdown-format.js";
-import { markdownFormatHost, textFormatTarget } from "../format/format-target.js";
+import { markdownFormatHost, registerFormatElement, textFormatTarget } from "../format/format-target.js";
 import { useSelectionZone } from "@ai-matrx/rich-content/selection-toolbar/selection-zones";
 import { RICH_EDITOR_SHORTCUTS, TYPED_TRIGGERS } from "../core/shortcuts.js";
 import { variableNamesInText, variableSuggestions } from "../core/variables.js";
@@ -273,9 +273,12 @@ function SourceEditor({
     });
   };
   const [zoneElement, setZoneElement] = useState(null);
-  useSelectionZone(zoneElement, { editable: !context.readOnly, host: markdownFormatHost(sourceFormatTarget(() => view.current)) });
+  const [formatTarget] = useState(() => sourceFormatTarget(() => view.current));
+  useSelectionZone(zoneElement, { editable: !context.readOnly, host: markdownFormatHost(formatTarget) });
+  useEffect(() => zoneElement ? registerFormatElement(zoneElement, formatTarget) : void 0, [zoneElement, formatTarget]);
   useImperativeHandle(handleRef, () => ({
     focus: () => view.current?.focus(),
+    formatTarget: () => formatTarget,
     selectedText: () => {
       const v = view.current;
       if (!v) return "";

package/dist/visual/VisualEditor.d.ts

@@ -3,6 +3,7 @@ import { type VisualLoadStats } from "../core/visual-document.js";
 import { 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";
 export interface ViewFindState {
     count: number;
     current: number;
@@ -12,6 +13,8 @@ export interface ViewFindState {
 /** What the shell drives in whichever view is showing. */
 export interface EditorViewHandle {
     focus: () => void;
+    /** The plain-text engines' FormatTarget (Source view) — the toolbar's format buttons act through it. */
+    formatTarget?: () => FormatTarget | null;
     selectedText: () => string;
     /** Replace the selection with literal text (markdown typed by an AI stays markdown). */
     replaceSelection: (text: string) => void;

package/dist/visual/VisualEditor.js

@@ -196,7 +196,7 @@ function VisualEditor({
       });
       const index = locateCaret(flat, context2);
       if (index === null) return false;
-      const pos = index < positions.length ? positions[index] : editor.state.doc.content.size - 1;
+      const pos = index > 0 && positions[index - 1] !== void 0 ? positions[index - 1] + 1 : positions[index] ?? editor.state.doc.content.size - 1;
       try {
         editor.view.dispatch(editor.state.tr.setSelection(TextSelection.near(editor.state.doc.resolve(pos))).scrollIntoView());
         editor.view.focus();

package/dist/visual/nodes/IslandBlockView.js

@@ -49,13 +49,9 @@ function IslandBlockView({ node, updateAttributes, deleteNode, selected, editor,
     });
   };
   const copy = async () => {
-    try {
-      if (!await copyText(raw)) return;
-      setCopied(true);
-      window.setTimeout(() => setCopied(false), 1200);
-    } catch {
-      toast.error("Copy failed \u2014 your browser blocked clipboard access.");
-    }
+    if (!await copyText(raw, void 0, "Copy failed \u2014 your browser blocked clipboard access.")) return;
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1200);
   };
   const isFence = islandType === "fence";
   const isMath = meta.language === "math";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-matrx/rich-editor",
-  "version": "0.2.0",
+  "version": "0.2.4",
   "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",
@@ -89,12 +89,12 @@
     "github-slugger": "^2.0.0",
     "lucide-react": "^1.48.0",
     "@ai-matrx/agents": "latest",
-    "@ai-matrx/design-system": "latest",
+    "@ai-matrx/alchemy": "latest",
     "@ai-matrx/content-ir": "latest",
-    "@ai-matrx/print": "latest",
+    "@ai-matrx/design-system": "latest",
     "@ai-matrx/kit": "latest",
-    "@ai-matrx/rich-content": "latest",
-    "@ai-matrx/alchemy": "latest"
+    "@ai-matrx/print": "latest",
+    "@ai-matrx/rich-content": "latest"
   },
   "peerDependencies": {
     "react": ">=19.0.0",