@ai-matrx/rich-editor 0.5.7 → 0.5.9

package/CHANGELOG.md

@@ -1,11 +1,25 @@
 # Changelog
 
-## 0.5.7
+## 0.5.9
+
+- `hasEditInPlaceTarget()`: a right-click menu offers "Edit" only over in-place content.
+
+Consumer action: none.
+
+## 0.5.8
 
 Automatic changed-only republish (docs/metadata drift since the last tag — see
-`git diff npm/rich-editor/v0.5.6..npm/rich-editor/v0.5.7 -- apps/shared/rich-editor`).
+`git diff npm/rich-editor/v0.5.7..npm/rich-editor/v0.5.8 -- apps/shared/rich-editor`).
 No source changes intended and no consumer action required.
 
+## 0.5.7
+
+- Edit in place never opens on a double-click (Arman, 2026-10-08: he double-clicks to select paragraphs). It opens from the bar's Edit icon or a right-click "Edit" through `openEditInPlaceFromLastInteraction()` (`EDIT_IN_PLACE_EVENT` on the zone; the caret lands where he right-clicked).
+- The opened editor scrolls fully into view (`scrollEditorIntoView`: nearest, or top-aligned when taller than the viewport).
+- `RichEditor formatRow="own-row"`: row 1 = view switch + Save / Cancel, row 2 = the formatting toolbar alone; the in-place editor uses it.
+
+Consumer action: a host whose only door was the double-click wires its Edit icon / right-click "Edit" to `openEditInPlaceFromLastInteraction()`.
+
 ## 0.5.5
 ### Images in Write after a reload; image paste in textareas; checklist Enter and `- ` (2026-10-08)
 

package/dist/editor/RichEditorImpl.d.ts

@@ -122,6 +122,12 @@ export interface RichEditorProps {
     className?: string;
     /** Extra controls on the right of the toolbar (host actions). */
     toolbarExtras?: ReactNode;
+    /**
+     * Where the formatting toolbar sits in the full chrome: "inline" (the view row) or "own-row" — row 1
+     * holds the view switch + Save / Cancel, row 2 the formatting toolbar alone, with room for its buttons
+     * (the edit-in-place editor, Arman 2026-10-08).
+     */
+    formatRow?: "inline" | "own-row";
     /**
      * Leave the editor (an in-place editor going back to its reading view). Shows
      * a Cancel button beside Save; the host decides what to do with unsaved text.
@@ -147,4 +153,4 @@ export interface RichEditorProps {
      */
     imagePolicy?: ImagePolicyDeclaration;
 }
-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;
+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, formatRow, onCancel, cancelLabel, defaultOutlineOpen, onNothingToSave, imagePolicy, }: RichEditorProps): import("react").JSX.Element;

package/dist/editor/RichEditorImpl.js

@@ -107,6 +107,7 @@ function RichEditorImpl({
   saveLabel = "Save",
   className,
   toolbarExtras,
+  formatRow = "inline",
   onCancel,
   cancelLabel = "Cancel",
   defaultOutlineOpen,
@@ -582,7 +583,7 @@ function RichEditorImpl({
                     option
                   );
                 }) }),
-                formatButtons,
+                formatRow === "inline" ? formatButtons : null,
                 !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)),
@@ -617,6 +618,7 @@ function RichEditorImpl({
                 saveButton
               ] })
             ] }),
+            !focusMode && chrome === "full" && formatRow === "own-row" && 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": "own-row", children: /* @__PURE__ */ jsx(FormatButtons, { className: "flex-1", resolve: () => handle.current?.formatTarget?.() ?? null }) }),
             findMode && view !== "preview" && /* @__PURE__ */ jsx(
               FindReplacePanel,
               {

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

@@ -1,4 +1,4 @@
-import { type MouseEvent, type ReactNode } from "react";
+import { type ReactNode } from "react";
 import { type CaretContext } from "../core/caret-context.js";
 import { type InPlaceEditorProps } from "./InPlaceEditor.js";
 export interface InPlaceOpening {
@@ -6,9 +6,19 @@ export interface InPlaceOpening {
     /** The rendered view's height when it was swapped out. */
     height: number;
 }
+/** The DOM event that opens the editor of the read zone it is dispatched on (detail: the point, if any). */
+export declare const EDIT_IN_PLACE_EVENT = "matrx:edit-in-place";
+/** Did the person just press in / right-click an edit-in-place zone (a menu offers "Edit" only then)? */
+export declare function hasEditInPlaceTarget(maxAgeMs?: number): boolean;
 /**
- * The double-click half, for hosts that keep their own swap (the AI answer).
- * Spread `readProps` on the element that holds the rendered text.
+ * Open the edit-in-place editor the person last pressed in or right-clicked (within `maxAgeMs`):
+ * the door for a bar's Edit icon and a right-click menu's "Edit". False when none is on screen.
+ */
+export declare function openEditInPlaceFromLastInteraction(maxAgeMs?: number): boolean;
+/**
+ * The opening half, for hosts that keep their own swap (the AI answer). Spread `readProps` on the
+ * element that holds the rendered text. A double-click never opens it (it selects text); the
+ * zone opens on `EDIT_IN_PLACE_EVENT` (`openEditInPlaceFromLastInteraction`).
  */
 export declare function useInPlaceTrigger({ canEdit, onOpen }: {
     canEdit: boolean;
@@ -16,8 +26,8 @@ export declare function useInPlaceTrigger({ canEdit, onOpen }: {
 }): {
     readProps: {
         ref: import("react").RefObject<HTMLDivElement | null>;
-        onDoubleClick: (event: MouseEvent<HTMLDivElement>) => void;
         "data-edit-in-place": "read";
+        "data-edit-in-place-door": string;
     } | {
         ref: import("react").RefObject<HTMLDivElement | null>;
         "data-edit-in-place": "off";

package/dist/in-place/EditInPlace.js

@@ -1,25 +1,62 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { useLayoutEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { cn } from "@ai-matrx/design-system";
 import { caretContextAt, domPointAt } from "../core/caret-context.js";
 import { InPlaceEditor } from "./InPlaceEditor.js";
 const INTERACTIVE = "a, button, input, textarea, select, label, summary, [role='button'], [contenteditable], [data-edit-in-place-ignore]";
+const EDIT_IN_PLACE_EVENT = "matrx:edit-in-place";
+const READ_ZONE = '[data-edit-in-place="read"][data-edit-in-place-door]';
+const state = globalThis[/* @__PURE__ */ Symbol.for("ai-matrx.rich-editor.in-place-last")] ??= {
+  last: null,
+  installed: false
+};
+function remember(event) {
+  const target = event.target instanceof Element ? event.target : null;
+  const zone = target?.closest(READ_ZONE);
+  if (!zone) return;
+  const point = event;
+  const onText = event.type === "contextmenu" && !target?.closest(INTERACTIVE);
+  state.last = { zone, x: onText ? point.clientX : null, y: onText ? point.clientY : null, at: Date.now() };
+}
+function installTracking() {
+  if (state.installed || typeof document === "undefined") return;
+  state.installed = true;
+  document.addEventListener("pointerdown", remember, true);
+  document.addEventListener("contextmenu", remember, true);
+}
+function hasEditInPlaceTarget(maxAgeMs = 15e3) {
+  const last = state.last;
+  return !!last && last.zone.isConnected && Date.now() - last.at <= maxAgeMs && last.zone.getAttribute("data-edit-in-place") === "read";
+}
+function openEditInPlaceFromLastInteraction(maxAgeMs = 15e3) {
+  const last = state.last;
+  if (!last || !last.zone.isConnected || Date.now() - last.at > maxAgeMs) return false;
+  if (last.zone.getAttribute("data-edit-in-place") !== "read") return false;
+  last.zone.dispatchEvent(new CustomEvent(EDIT_IN_PLACE_EVENT, { detail: { x: last.x, y: last.y } }));
+  return true;
+}
 function useInPlaceTrigger({ canEdit, onOpen }) {
   const ref = useRef(null);
-  const onDoubleClick = (event) => {
-    if (!canEdit || event.defaultPrevented) return;
-    const target = event.target instanceof Element ? event.target : null;
-    if (target?.closest(INTERACTIVE)) return;
+  const onOpenRef = useRef(onOpen);
+  useEffect(() => {
+    onOpenRef.current = onOpen;
+  });
+  useEffect(() => {
     const root = ref.current;
-    if (!root) return;
-    const point = domPointAt(document, event.clientX, event.clientY);
-    const caret = point ? caretContextAt(root, point.node, point.offset) : null;
-    window.getSelection()?.removeAllRanges();
-    onOpen({ caret, height: root.getBoundingClientRect().height });
-  };
+    if (!canEdit || !root) return;
+    installTracking();
+    const open = (event) => {
+      const detail = event.detail;
+      const point = detail && detail.x !== null && detail.y !== null ? domPointAt(document, detail.x, detail.y) : null;
+      const caret = point ? caretContextAt(root, point.node, point.offset) : null;
+      onOpenRef.current({ caret, height: root.getBoundingClientRect().height });
+    };
+    root.addEventListener(EDIT_IN_PLACE_EVENT, open);
+    return () => root.removeEventListener(EDIT_IN_PLACE_EVENT, open);
+  });
   return {
-    readProps: canEdit ? { ref, onDoubleClick, "data-edit-in-place": "read" } : { ref, "data-edit-in-place": "off" }
+    readProps: canEdit ? { ref, "data-edit-in-place": "read", "data-edit-in-place-door": "" } : { ref, "data-edit-in-place": "off" }
   };
 }
 function EditInPlace({
@@ -67,6 +104,9 @@ function EditInPlace({
   return /* @__PURE__ */ jsx("div", { ...readProps, className: cn(canEdit && "cursor-text", readClassName), children });
 }
 export {
+  EDIT_IN_PLACE_EVENT,
   EditInPlace,
+  hasEditInPlaceTarget,
+  openEditInPlaceFromLastInteraction,
   useInPlaceTrigger
 };

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

@@ -58,3 +58,5 @@ export declare function InPlaceEditor({ value, mode, write, close, caret, minHei
  * types or clicks, which ends it at once.
  */
 export declare function keepCaretInView(root: HTMLElement, settleMs?: number): () => void;
+/** Bring the whole editor into view: "nearest" when it fits, its top aligned when it is taller than the viewport. */
+export declare function scrollEditorIntoView(element: HTMLElement | null): void;

package/dist/in-place/InPlaceEditor.js

@@ -40,6 +40,14 @@ function InPlaceEditor({
   const shellRef = useRef(null);
   const controller = useRef(null);
   const dirty = draft !== openedOn;
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => scrollEditorIntoView(shellRef.current));
+    const settled = window.setTimeout(() => scrollEditorIntoView(shellRef.current), 400);
+    return () => {
+      cancelAnimationFrame(frame);
+      window.clearTimeout(settled);
+    };
+  }, []);
   useEffect(() => {
     let tries = 0;
     let frame = 0;
@@ -129,6 +137,7 @@ function InPlaceEditor({
         /* @__PURE__ */ jsx(
           RichEditor,
           {
+            formatRow: "own-row",
             defaultView: "visual",
             defaultOutlineOpen: false,
             views: IN_PLACE_VIEWS,
@@ -209,9 +218,15 @@ function keepCaretInView(root, settleMs = 2500) {
   show();
   return stop;
 }
+function scrollEditorIntoView(element) {
+  if (!element || typeof element.scrollIntoView !== "function") return;
+  const tall = element.getBoundingClientRect().height > (typeof window === "undefined" ? 0 : window.innerHeight);
+  element.scrollIntoView({ block: tall ? "start" : "nearest", inline: "nearest" });
+}
 export {
   IN_PLACE_VIEWS,
   IN_PLACE_VIEW_LABELS,
   InPlaceEditor,
-  keepCaretInView
+  keepCaretInView,
+  scrollEditorIntoView
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-matrx/rich-editor",
-  "version": "0.5.7",
+  "version": "0.5.9",
   "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,12 +90,12 @@
     "@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/print": "latest",
     "@ai-matrx/kit": "latest",
-    "@ai-matrx/agents": "latest",
+    "@ai-matrx/print": "latest",
     "@ai-matrx/rich-content": "latest"
   },
   "peerDependencies": {