@ai-matrx/rich-editor 0.4.0 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 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/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.1",
   "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/kit": "latest",
     "@ai-matrx/print": "latest",
-    "@ai-matrx/agents": "latest",
+    "@ai-matrx/design-system": "latest",
     "@ai-matrx/rich-content": "latest"
   },
   "peerDependencies": {