@ai-matrx/rich-editor 0.4.1 → 0.4.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.4.3
+### `chrome="format"`: the toolbar for hosts with no row of their own (2026-10-08)
+
+- `RichEditor` `chrome="format"` renders ONE slim row carrying only the formatting toolbar (no view switch, tools or Save) in every editable view — for hosts like a record's body that had `chrome="bare"` and so no formatting buttons. Editable text always has the toolbar (Arman, 2026-10-08).
+
+Consumer action: a `chrome="bare"` host with no toolbar row of its own switches to `chrome="format"`.
+
+## 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)
 

package/dist/editor/RichEditorImpl.d.ts

@@ -86,9 +86,11 @@ export interface RichEditorProps {
      * "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,
      * outline and dictation (a host that saves by itself — autosave — has no Save).
+     * "format": a host with no row of its own (a record's body): ONE slim row
+     * carrying only the formatting toolbar (2026-10-08: editable text always has it).
      * Shortcuts (⌘F, ⌘⌥H, ⌘⇧F, ⌘/) keep working either way.
      */
-    chrome?: "full" | "bare";
+    chrome?: "full" | "bare" | "format";
     /**
      * The host wraps the editor in its OWN right-click menu (its surface, scope and
      * record rows) — the editor then mounts none, so one menu answers. Drive text

package/dist/editor/RichEditorImpl.js

@@ -123,7 +123,7 @@ function RichEditorImpl({
   const [mountKey, setMountKey] = useState(0);
   const [findMode, setFindMode] = useState(null);
   const [outlineChoice, setOutlineChoice] = useState(
-    defaultOutlineOpen ?? (chrome === "bare" ? false : null)
+    defaultOutlineOpen ?? (chrome !== "full" ? false : null)
   );
   const outlineOpen = outlineChoice ?? !isMobile;
   const setOutlineOpen = (next) => setOutlineChoice(typeof next === "function" ? next(outlineOpen) : next);
@@ -538,6 +538,7 @@ function RichEditorImpl({
             saveButton
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "relative z-20 shrink-0", children: [
+            !focusMode && chrome === "format" && editable && /* @__PURE__ */ jsx("div", { className: "matrx-touch-targets flex min-h-9 items-center border-b border-border bg-card/80 px-1.5 py-0.5 backdrop-blur", "data-rich-editor-format-row": "", children: /* @__PURE__ */ jsx(FormatButtons, { className: "flex-1", resolve: () => handle.current?.formatTarget?.() ?? null }) }),
             !focusMode && chrome === "full" && /* @__PURE__ */ jsxs("div", { ref: toolbarRowRef, className: "matrx-touch-targets flex min-h-10 items-center gap-1 border-b border-border bg-card/80 px-2 py-1 backdrop-blur", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-x-auto", children: [
                 isMobile ? (

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-matrx/rich-editor",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "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",
@@ -93,9 +93,9 @@
     "@ai-matrx/agents": "latest",
     "@ai-matrx/alchemy": "latest",
     "@ai-matrx/content-ir": "latest",
+    "@ai-matrx/design-system": "latest",
     "@ai-matrx/kit": "latest",
     "@ai-matrx/print": "latest",
-    "@ai-matrx/design-system": "latest",
     "@ai-matrx/rich-content": "latest"
   },
   "peerDependencies": {