@ai-matrx/rich-editor 0.4.0 → 0.4.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.4.2
+### A short toolbar keeps what people reach for (2026-10-08)
+
+- `FormatButtons` folds by priority, not position: Bold, Italic, Text style, Bulleted list, Checklist and Link stay in view longest; history, inserts and the rest fold into More first. Display order never changes; dividers sit only between visible groups. The text-style menu is narrower (88px). Live: notes beside the chat panel showed only Undo, Redo, Text style and More.
+
+Consumer action: none.
+
+## 0.4.1
+### Edit in place: Write, Split, Source, Preview (2026-10-08)
+
+- Every edit-in-place editor (an AI answer in chat, window panels and the side drawer) offers Write (the visual editor, default), **Split** (the raw markdown editable on the left, the full live render on the right; stacked on a phone), Source and Preview — in the editor's own view switch, never behind a menu on desktop.
+- `RichEditor` gains `views` (the views offered, in order) and `viewLabels` (a host's own word for a view). Hosts that pass neither are unchanged.
+- The formatting toolbar works in Split's raw pane like in Source.
+
 ## 0.4.0
 ### ONE formatting toolbar in every editor and every mode (2026-10-07)
 

package/dist/editor/RichEditorImpl.d.ts

@@ -8,7 +8,9 @@ import type { BlockPlacement } from "../core/text-insertion.js";
 import type { DeclaredVariable } from "../core/variables.js";
 import { type ImagePolicyDeclaration } from "@ai-matrx/rich-content/levels/prose/remote-image-policy";
 import type { AnnotationRecord } from "@ai-matrx/rich-content/rich-document/host-types";
-export type RichEditorView = "visual" | "source" | "preview";
+export type RichEditorView = "visual" | "split" | "source" | "preview";
+/** The views a host gets unless it names its own (`views`). Split is offered where a host asks for it. */
+export declare const DEFAULT_VIEWS: readonly RichEditorView[];
 /**
  * What a host that carries its OWN chrome (view switch, find, outline, dictation,
  * its own right-click menu) drives the editor through. Every verb acts on the
@@ -72,6 +74,14 @@ export interface RichEditorProps {
      */
     view?: RichEditorView;
     onViewChange?: (view: RichEditorView) => void;
+    /**
+     * The views the switch offers, in order (default Visual, Source, Preview).
+     * Split — the raw text editable on the left, the full render live on the
+     * right — is offered by naming it here (edit-in-place: Write, Split, Source, Preview).
+     */
+    views?: readonly RichEditorView[];
+    /** A host's own word for a view ("Write" for Visual in edit-in-place). */
+    viewLabels?: Partial<Record<RichEditorView, string>>;
     /**
      * "full" (default): the editor's toolbar row — views, tools, dictation, Save.
      * "bare": no row of its own; the host's chrome carries the view switch, find,
@@ -135,4 +145,4 @@ export interface RichEditorProps {
      */
     imagePolicy?: ImagePolicyDeclaration;
 }
-export default function RichEditorImpl({ value, onSave, onChange, variables, onDeclareVariable, defaultView, view: controlledView, onViewChange, chrome, hostContextMenu, controllerRef, readOnly, placeholder, surfaceName, sourceFeature, contentSource, annotationRecord, saveLabel, className, toolbarExtras, onCancel, cancelLabel, defaultOutlineOpen, onNothingToSave, imagePolicy, }: RichEditorProps): import("react").JSX.Element;
+export default function RichEditorImpl({ value, onSave, onChange, variables, onDeclareVariable, defaultView, view: controlledView, onViewChange, views: viewsProp, viewLabels, chrome, hostContextMenu, controllerRef, readOnly, placeholder, surfaceName, sourceFeature, contentSource, annotationRecord, saveLabel, className, toolbarExtras, onCancel, cancelLabel, defaultOutlineOpen, onNothingToSave, imagePolicy, }: RichEditorProps): import("react").JSX.Element;

package/dist/editor/RichEditorImpl.js

@@ -7,6 +7,7 @@ import {
   Check,
   ChevronDown,
   Code2,
+  Columns2,
   Eye,
   Focus,
   Hash,
@@ -50,6 +51,7 @@ import { RichEditorContext } from "./RichEditorContext.js";
 import { VisualEditor } from "../visual/VisualEditor.js";
 import { SourceEditor } from "../source/SourceEditor.js";
 import { FormatButtons } from "../format/FormatButtons.js";
+import { SplitPanes } from "./SplitPanes.js";
 import { FindReplacePanel } from "../panels/FindReplacePanel.js";
 import { OutlinePanel } from "../panels/OutlinePanel.js";
 import { ShortcutsDialog } from "../panels/ShortcutsDialog.js";
@@ -59,7 +61,7 @@ import { withImagePolicy } from "@ai-matrx/rich-content/levels/prose/remote-imag
 import { RecordAnnotations } from "@ai-matrx/rich-content/host/app-bindings";
 import { annotationRecordOf } from "@ai-matrx/rich-content/host/app-bindings";
 import { formatCount } from "@ai-matrx/kit/format";
-const VIEWS = ["visual", "source", "preview"];
+const DEFAULT_VIEWS = ["visual", "source", "preview"];
 function describeDelta(delta) {
   const raw = delta.before ?? delta.after ?? "";
   const block = islandMeta(delta.islandType, raw);
@@ -79,6 +81,7 @@ function describeDelta(delta) {
 }
 const VIEW_META = {
   visual: { label: "Visual", icon: Type },
+  split: { label: "Split", icon: Columns2 },
   source: { label: "Source", icon: Code2 },
   preview: { label: "Preview", icon: Eye }
 };
@@ -91,6 +94,8 @@ function RichEditorImpl({
   defaultView = "visual",
   view: controlledView,
   onViewChange,
+  views: viewsProp,
+  viewLabels,
   chrome = "full",
   hostContextMenu = false,
   controllerRef,
@@ -110,6 +115,8 @@ function RichEditorImpl({
   imagePolicy
 }) {
   const isMobile = useIsMobile();
+  const VIEWS = viewsProp?.length ? viewsProp : DEFAULT_VIEWS;
+  const viewLabel = (option) => viewLabels?.[option] ?? VIEW_META[option].label;
   const [stored, setStored] = useState(value);
   const [current, setCurrent] = useState(value);
   const [view, setView] = useState(controlledView ?? defaultView);
@@ -404,18 +411,19 @@ function RichEditorImpl({
     },
     `source-${mountKey}`
   );
-  const body = view === "preview" ? /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-3xl px-6 py-6 sm:px-10", children: /* @__PURE__ */ jsx(
+  const rendered = (content) => /* @__PURE__ */ jsx(
     RichDocument,
     {
       imagePolicy: "inherit",
-      content: current,
+      content,
       source: contentSource,
       enableContextMenu: true,
       hideCopyButton: true,
       allowFullScreenEditor: false,
       actions: { exclude: ["edit", "delete-message"] }
     }
-  ) }) }) : hostContextMenu ? /* @__PURE__ */ jsx("div", { className: "h-full min-h-0", children: viewEditor }) : /* @__PURE__ */ jsx(
+  );
+  const editingBody = hostContextMenu ? /* @__PURE__ */ jsx("div", { className: "h-full min-h-0", children: viewEditor }) : /* @__PURE__ */ jsx(
     EditableContextMenu,
     {
       sourceFeature,
@@ -433,6 +441,10 @@ function RichEditorImpl({
       children: /* @__PURE__ */ jsx("div", { className: "h-full min-h-0", children: viewEditor })
     }
   );
+  const body = view === "preview" ? /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-3xl px-6 py-6 sm:px-10", children: rendered(current) }) }) : view === "split" ? (
+    // Split: the raw text (Source, raw) on the left, the live render of the same text on the right.
+    /* @__PURE__ */ jsx(SplitPanes, { stacked: isMobile, raw: editingBody, render: rendered(deferred) })
+  ) : editingBody;
   const CurrentViewIcon = VIEW_META[view].icon;
   const tools = [
     { id: "find", label: "Find & replace (\u2318F)", icon: Search, active: findMode !== null, disabled: view === "preview", run: () => setFindMode((mode) => mode ? null : "find") },
@@ -535,7 +547,7 @@ function RichEditorImpl({
                       "button",
                       {
                         type: "button",
-                        "aria-label": `View: ${VIEW_META[view].label}`,
+                        "aria-label": `View: ${viewLabel(view)}`,
                         title: "Switch view",
                         className: "flex h-8 shrink-0 items-center gap-1 rounded-md border border-border bg-background/60 px-2 text-xs font-medium text-primary",
                         children: [
@@ -548,7 +560,7 @@ function RichEditorImpl({
                       const Icon = VIEW_META[option].icon;
                       return /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => switchView(option), children: [
                         /* @__PURE__ */ jsx(Icon, { className: "mr-2 h-4 w-4" }),
-                        /* @__PURE__ */ jsx("span", { className: "flex-1", children: VIEW_META[option].label }),
+                        /* @__PURE__ */ jsx("span", { className: "flex-1", children: viewLabel(option) }),
                         view === option && /* @__PURE__ */ jsx(Check, { className: "ml-2 h-4 w-4 text-primary" })
                       ] }, option);
                     }) })
@@ -560,7 +572,7 @@ function RichEditorImpl({
                     {
                       type: "button",
                       role: "tab",
-                      title: VIEW_META[option].label,
+                      title: viewLabel(option),
                       "aria-selected": view === option,
                       onClick: () => switchView(option),
                       className: cn(
@@ -569,7 +581,7 @@ function RichEditorImpl({
                       ),
                       children: [
                         /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5" }),
-                        VIEW_META[option].label
+                        viewLabel(option)
                       ]
                     },
                     option
@@ -744,5 +756,6 @@ function ToolbarButton({
   );
 }
 export {
+  DEFAULT_VIEWS,
   RichEditorImpl as default
 };

package/dist/editor/SplitPanes.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+export interface SplitPanesProps {
+    /** The editable raw text (the Source engine). */
+    raw: ReactNode;
+    /** The live render of the same text. */
+    render: ReactNode;
+    /** Stack top/bottom instead of side by side (phones). */
+    stacked?: boolean;
+}
+export declare function SplitPanes({ raw, render, stacked }: SplitPanesProps): import("react").JSX.Element;
+export default SplitPanes;

package/dist/editor/SplitPanes.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@ai-matrx/design-system";
+function SplitPanes({ raw, render, stacked = false }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-split-view": "",
+      className: cn(
+        "grid h-full min-h-0",
+        stacked ? "grid-cols-1 grid-rows-2 divide-y divide-border" : "grid-cols-2 divide-x divide-border"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("section", { "aria-label": "Raw text", "data-split-pane": "raw", className: "min-h-0 min-w-0 overflow-hidden", children: raw }),
+        /* @__PURE__ */ jsx("section", { "aria-label": "Rendered", "data-split-pane": "render", className: "min-h-0 min-w-0 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "px-4 py-4 sm:px-6", children: render }) })
+      ]
+    }
+  );
+}
+var SplitPanes_default = SplitPanes;
+export {
+  SplitPanes,
+  SplitPanes_default as default
+};

package/dist/format/FormatButtons.js

@@ -54,15 +54,41 @@ const FORMAT_GROUPS = [
 ];
 const FORMAT_BUTTONS = FORMAT_GROUPS.flat();
 const ESSENTIAL_COMMANDS = ["bold", "italic", "bulletList", "taskList", "link"];
+const KEEP = {
+  bold: 20,
+  italic: 19,
+  style: 18,
+  bulletList: 17,
+  taskList: 16,
+  link: 15,
+  orderedList: 14,
+  undo: 13,
+  redo: 12,
+  strike: 11,
+  code: 10,
+  quote: 9,
+  codeBlock: 8,
+  table: 7,
+  horizontalRule: 6
+};
+const keepOf = (slot) => slot.kind === "button" ? KEEP[slot.spec.command] ?? 0 : slot.kind === "style" ? KEEP.style : 0;
 function slotsOf(variant) {
   if (variant === "essential") {
     return [{ kind: "style" }, ...ESSENTIAL_COMMANDS.map((command) => ({ kind: "button", spec: FORMAT_BUTTONS.find((b) => b.command === command) }))];
   }
   const out = [];
   FORMAT_GROUPS.forEach((group, index) => {
-    if (index > 0) out.push({ kind: "divider" });
-    out.push(...group.map((b) => ({ kind: "button", spec: b })));
-    if (index === 0) out.push({ kind: "divider" }, { kind: "style" });
+    const g = index === 0 ? 0 : index + 1;
+    out.push(...group.map((b) => ({ kind: "button", spec: b, group: g })));
+    if (index === 0) out.push({ kind: "style", group: 1 });
+  });
+  return out;
+}
+function withDividers(slots) {
+  const out = [];
+  slots.forEach((slot, i) => {
+    if (i > 0 && slot.group !== void 0 && slot.group !== slots[i - 1].group) out.push({ kind: "divider" });
+    out.push(slot);
   });
   return out;
 }
@@ -123,27 +149,23 @@ function FormatButtons({ resolve, disabled = false, className, size = "sm", vari
     resolve()?.run(command);
   };
   const button = size === "xs" ? 26 : 30;
-  const styleWidth = variant === "essential" ? size === "xs" ? 40 : 44 : 102;
+  const styleWidth = variant === "essential" ? size === "xs" ? 40 : 44 : 90;
   const widthOf = (slot) => slot.kind === "button" ? button : slot.kind === "style" ? styleWidth : 11;
   const all = slotsOf(variant);
-  let shown = all;
+  let kept = all;
   let folded = variant === "essential" ? slotsOf("full").filter((s) => s.kind === "button" && !ESSENTIAL_COMMANDS.includes(s.spec.command)) : [];
-  if (width > 0) {
-    const total = all.reduce((sum, s) => sum + widthOf(s), 0) + (folded.length ? button : 0);
-    if (total > width + 4) {
-      const budget = width - button;
-      let used = 0;
-      let count = 0;
-      for (const slot of all) {
-        if (used + widthOf(slot) > budget) break;
-        used += widthOf(slot);
-        count += 1;
-      }
-      shown = all.slice(0, count);
-      folded = [...all.slice(count), ...folded];
+  const rowWidth = (slots, more) => withDividers(slots).reduce((sum, s) => sum + widthOf(s), 0) + (more ? button : 0);
+  if (width > 0 && rowWidth(kept, folded.length > 0) > width + 4) {
+    const byKeep = [...all].sort((x, y) => keepOf(x) - keepOf(y));
+    const dropped = /* @__PURE__ */ new Set();
+    for (const slot of byKeep) {
+      if (rowWidth(all.filter((s) => !dropped.has(s)), true) <= width + 4) break;
+      dropped.add(slot);
     }
+    kept = all.filter((s) => !dropped.has(s));
+    folded = [...all.filter((s) => dropped.has(s)), ...folded];
   }
-  while (shown.length && shown[shown.length - 1].kind === "divider") shown = shown.slice(0, -1);
+  const shown = withDividers(kept);
   const foldedButtons = folded.filter((s) => s.kind === "button");
   const styleFolded = folded.some((s) => s.kind === "style");
   const iconClass = size === "xs" ? "h-3.5 w-3.5" : "h-4 w-4";
@@ -178,7 +200,7 @@ function FormatButtons({ resolve, disabled = false, className, size = "sm", vari
                   className: cn(
                     "inline-flex shrink-0 items-center gap-1 rounded-md px-1.5 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground",
                     size === "xs" ? "h-6" : "h-7",
-                    variant === "full" && "w-[100px] justify-between"
+                    variant === "full" && "w-[88px] justify-between"
                   ),
                   children: [
                     variant === "essential" ? /* @__PURE__ */ jsx(StyleIcon, { className: iconClass }) : /* @__PURE__ */ jsx("span", { className: "truncate", children: BLOCK_SHORT[currentStyle.command] }),

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

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import { type RichEditorProps } from "../editor/RichEditor.js";
+import { type RichEditorProps, type RichEditorView } from "../editor/RichEditor.js";
 import type { CaretContext } from "../core/caret-context.js";
 import { type InPlaceSaveMode } from "./in-place-session.js";
 export type InPlaceEditorPassThrough = Omit<RichEditorProps, "value" | "onSave" | "onChange" | "onCancel" | "onNothingToSave" | "cancelLabel" | "controllerRef">;
@@ -33,6 +33,16 @@ export interface InPlaceEditorProps {
      */
     actions?: readonly InPlaceAction[];
 }
+/**
+ * The modes of every edit-in-place editor, in this order (Arman, 2026-10-08:
+ * "Default: Write. Next option: Split (plain text on the left and full render
+ * on the right). Then, whatever else we need. But you cannot gobble them up and
+ * hide the things we need."). Write is the visual editor and always opens
+ * first (no per-person memory exists for this); Split shows the raw string
+ * next to its render. All four sit in the editor's own toolbar row.
+ */
+export declare const IN_PLACE_VIEWS: readonly RichEditorView[];
+export declare const IN_PLACE_VIEW_LABELS: Partial<Record<RichEditorView, string>>;
 export interface InPlaceAction {
     id: string;
     label: string;

package/dist/in-place/InPlaceEditor.js

@@ -8,6 +8,8 @@ import { cn } from "@ai-matrx/design-system";
 import { ConfirmDialog } from "@ai-matrx/rich-content/host/app-bindings";
 import RichEditor from "../editor/RichEditor.js";
 import { createInPlaceSession } from "./in-place-session.js";
+const IN_PLACE_VIEWS = ["visual", "split", "source", "preview"];
+const IN_PLACE_VIEW_LABELS = { visual: "Write" };
 function InPlaceEditor({
   value,
   mode = "explicit",
@@ -129,6 +131,8 @@ function InPlaceEditor({
           {
             defaultView: "visual",
             defaultOutlineOpen: false,
+            views: IN_PLACE_VIEWS,
+            viewLabels: IN_PLACE_VIEW_LABELS,
             ...editor,
             controllerRef: controller,
             value: openedOn,
@@ -206,6 +210,8 @@ function keepCaretInView(root, settleMs = 2500) {
   return stop;
 }
 export {
+  IN_PLACE_VIEWS,
+  IN_PLACE_VIEW_LABELS,
   InPlaceEditor,
   keepCaretInView
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-matrx/rich-editor",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "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",
@@ -90,13 +90,13 @@
     "@tiptap/suggestion": "^3.31.3",
     "github-slugger": "^2.0.0",
     "lucide-react": "^1.48.0",
-    "@ai-matrx/alchemy": "latest",
     "@ai-matrx/content-ir": "latest",
+    "@ai-matrx/agents": "latest",
     "@ai-matrx/design-system": "latest",
     "@ai-matrx/kit": "latest",
     "@ai-matrx/print": "latest",
-    "@ai-matrx/agents": "latest",
-    "@ai-matrx/rich-content": "latest"
+    "@ai-matrx/rich-content": "latest",
+    "@ai-matrx/alchemy": "latest"
   },
   "peerDependencies": {
     "react": ">=19.0.0",