@ai-matrx/rich-editor 0.2.5 → 0.2.6

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.2.6
+
+- Source view: where the toolbar row cannot hold the format buttons AND the tools (an in-place editor in a chat column, under 980px), the tools fold into the one "More tools" menu — nothing scrolls off the row (2026-10-07: Outline, Focus and Shortcuts had slid out of view).
+
+### Consumer action
+
+- None required.
+
 ## 0.2.5
 
 - The selection toolbar's formatting reaches a focused plain-text editor even when its zone's host half never reached the toolbar's target (2026-10-07 live: notes Split's textarea answered ⌘B and the header buttons, yet its selection toolbar showed no Bold). `focusedFormatTarget()` (format-target) is the fallback for an editable selection.

package/dist/editor/RichEditorImpl.js

@@ -426,6 +426,16 @@ 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 toolbarRowRef = useRef(null);
+  const [toolbarRowWidth, setToolbarRowWidth] = useState(0);
+  useEffect(() => {
+    const row = toolbarRowRef.current;
+    if (!row || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => setToolbarRowWidth(row.getBoundingClientRect().width));
+    ro.observe(row);
+    return () => ro.disconnect();
+  }, [focusMode, chrome]);
+  const compactTools = isMobile || view === "source" && !readOnly && toolbarRowWidth > 0 && toolbarRowWidth < 980;
   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 })
@@ -498,7 +508,7 @@ function RichEditorImpl({
             saveButton
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "relative z-20 shrink-0", children: [
-            !focusMode && chrome === "full" && /* @__PURE__ */ jsxs("div", { 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: [
+            !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 ? (
                   // A phone gets the view as one compact menu, so every control fits.
@@ -548,15 +558,15 @@ function RichEditorImpl({
                   );
                 }) }),
                 formatButtons,
-                !isMobile && /* @__PURE__ */ jsxs(Fragment, { children: [
+                !compactTools && /* @__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)),
                   micButton
                 ] })
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
-                isMobile && micButton,
-                isMobile && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+                compactTools && micButton,
+                compactTools && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
                   /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
                     "button",
                     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-matrx/rich-editor",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "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",
@@ -88,13 +88,13 @@
     "@tiptap/suggestion": "^3.31.3",
     "github-slugger": "^2.0.0",
     "lucide-react": "^1.48.0",
-    "@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/rich-content": "latest"
+    "@ai-matrx/rich-content": "latest",
+    "@ai-matrx/agents": "latest"
   },
   "peerDependencies": {
     "react": ">=19.0.0",