@multiplatform.one/rich-text 6.1.0 → 6.4.0

package/README.md

@@ -0,0 +1,60 @@
+# @multiplatform.one/rich-text
+
+Cross-platform rich text editor — [Tiptap](https://tiptap.dev) on web,
+[10Tap](https://github.com/10play/10tap-editor) on native — with markdown
+support and a shared command/state API.
+
+## Install
+
+```bash
+pnpm add @multiplatform.one/rich-text
+```
+
+Requires `react` and `react-native` (or react-native-web) as peers.
+
+## What it owns
+
+- **`RichEditor`** — the headless-ish editor surface (HTML/JSON content in,
+  HTML + JSON out), one API across web and native
+- **`RichTextEditor`** — the composed editor with toolbar chrome
+- Types: `RichEditorRef` (imperative commands), `RichEditorProps`,
+  `EditorCommand`, `EditorState`
+
+## What it must not do
+
+- No markdown _rendering_ — read-only markdown display lives in
+  `@multiplatform.one/markdown`
+- No form-field contract of its own — form integration wraps it from
+  `@multiplatform.one/forms` conventions
+
+## Usage
+
+```tsx
+import { RichEditor } from "@multiplatform.one/rich-text";
+
+export function NoteEditor() {
+  return (
+    <RichEditor
+      initialContent="<p>Hello <strong>world</strong></p>"
+      placeholder="Write something…"
+      autoFocus
+      onChange={(html, json) => {
+        console.log("content changed", html, json);
+      }}
+    />
+  );
+}
+```
+
+Pass `editable={false}` for a read-only view; use `onStateChange` to drive a
+custom toolbar (bold/italic/list active states).
+
+## Styling
+
+Editor chrome resolves through the knobs system in `@multiplatform.one/theme`
+(see `agent-os/standards/frontend/knobs-system.md` in the
+[multiplatform.one repo](https://gitlab.com/bitspur/frappe/multiplatform.one)).
+
+## License
+
+Apache-2.0

package/dist/cjs/RichEditor.cjs

@@ -46,15 +46,23 @@ const RichEditorImpl = (0, import_react.forwardRef)(({
   resizable = true,
   showStatusBar = true,
   sections,
+  capabilities = "full",
   hasError,
   editable = true,
   onStateChange,
+  fullscreen: fullscreenProp,
+  defaultFullscreen = false,
+  onFullscreenChange,
+  inlineEditing: _inlineEditing,
   ...editorProps
 }, ref) => {
   const internalRef = (0, import_react.useRef)(null);
   const frameRef = (0, import_react.useRef)(null);
   const [editorState, setEditorState] = (0, import_react.useState)(import_types.defaultEditorState);
   const [editorMode, setEditorMode] = (0, import_react.useState)("richtext");
+  const [internalFullscreen, setInternalFullscreen] = (0, import_react.useState)(defaultFullscreen);
+  const [linkDialogOpen, setLinkDialogOpen] = (0, import_react.useState)(false);
+  const fullscreen = fullscreenProp ?? internalFullscreen;
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)({
@@ -66,7 +74,65 @@ const RichEditorImpl = (0, import_react.forwardRef)(({
     setEditorState(state);
     onStateChange?.(state);
   }, [onStateChange]);
-  (0, import_react.useImperativeHandle)(ref, () => internalRef.current, []);
+  const handleFullscreenChange = (0, import_react.useCallback)(next => {
+    setInternalFullscreen(next);
+    onFullscreenChange?.(next);
+  }, [onFullscreenChange]);
+  (0, import_react.useEffect)(() => {
+    if (!fullscreen || typeof document === "undefined") return void 0;
+    const handleKeyDown = event => {
+      if (event.key !== "Escape") return;
+      const openOverlay = Array.from(document.querySelectorAll('[role="dialog"], [role="menu"], [role="listbox"]')).some(el => el.getClientRects().length > 0);
+      if (openOverlay) return;
+      handleFullscreenChange(false);
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [fullscreen, handleFullscreenChange]);
+  (0, import_react.useEffect)(() => {
+    if (!fullscreen || typeof document === "undefined") return void 0;
+    const frame = frameRef.current;
+    const prevHeight = frame?.style.height ?? "";
+    if (frame) frame.style.height = "";
+    const prevBodyOverflow = document.body.style.overflow;
+    const prevHtmlOverflow = document.documentElement.style.overflow;
+    const prevGutter = document.documentElement.style.scrollbarGutter;
+    document.body.style.overflow = "hidden";
+    document.documentElement.style.overflow = "hidden";
+    document.documentElement.style.scrollbarGutter = "auto";
+    return () => {
+      document.body.style.overflow = prevBodyOverflow;
+      document.documentElement.style.overflow = prevHtmlOverflow;
+      document.documentElement.style.scrollbarGutter = prevGutter;
+      if (frame) frame.style.height = prevHeight;
+    };
+  }, [fullscreen]);
+  const showToolbarNow = showToolbar && editable && editorMode === "richtext";
+  (0, import_react.useEffect)(() => {
+    const frame = frameRef.current;
+    if (!frame || !showToolbarNow || typeof document === "undefined") return void 0;
+    const handleKeyDown = event => {
+      if (!(event.metaKey || event.ctrlKey)) return;
+      if (event.altKey || event.shiftKey) return;
+      if (event.key.toLowerCase() !== "k") return;
+      event.preventDefault();
+      setLinkDialogOpen(true);
+    };
+    frame.addEventListener("keydown", handleKeyDown);
+    return () => frame.removeEventListener("keydown", handleKeyDown);
+  }, [showToolbarNow]);
+  (0, import_react.useImperativeHandle)(ref, () => ({
+    executeCommand: (command, payload) => internalRef.current?.executeCommand(command, payload),
+    getState: () => internalRef.current?.getState() ?? import_types.defaultEditorState,
+    getHTML: () => internalRef.current?.getHTML() ?? "",
+    getJSON: () => internalRef.current?.getJSON() ?? null,
+    getMarkdown: () => internalRef.current?.getMarkdown() ?? "",
+    setHTML: html => internalRef.current?.setHTML(html),
+    setJSON: json => internalRef.current?.setJSON(json),
+    setMarkdown: markdown => internalRef.current?.setMarkdown(markdown),
+    focus: () => internalRef.current?.focus(),
+    blur: () => internalRef.current?.blur()
+  }), []);
   const cappedRadius = (0, import_forms.clampRadiusForLargeComponent)(knobProps.borderRadius.borderRadius, 4);
   const {
     bodyFontFamily,
@@ -91,32 +157,46 @@ const RichEditorImpl = (0, import_react.forwardRef)(({
     children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_styled.EditorFrame, {
       ref: frameRef,
       hasError,
-      borderRadius: cappedRadius,
-      borderWidth: knobProps.borderRadius.borderWidth,
+      borderRadius: fullscreen ? 0 : cappedRadius,
+      borderWidth: fullscreen ? 0 : knobProps.borderRadius.borderWidth,
       borderColor: hasError ? "$red10" : "$color6",
-      backgroundColor: knobProps.inputBackground ?? "$color2",
+      backgroundColor: fullscreen ? "$background" : knobProps.inputBackground ?? "$color2",
       disabled,
-      position: "relative",
-      children: [showToolbar && !disabled && editorMode === "richtext" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FixedToolbar.FixedToolbar, {
+      position: fullscreen ? "fixed" : "relative",
+      ...(fullscreen && {
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 1e5
+      }),
+      children: [showToolbarNow && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FixedToolbar.FixedToolbar, {
         editorRef: internalRef,
         state: editorState,
         sections,
-        hasError
+        capabilities,
+        hasError,
+        fullscreen,
+        onFullscreenToggle: () => handleFullscreenChange(!fullscreen),
+        linkDialogOpen,
+        onLinkDialogOpenChange: setLinkDialogOpen
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TiptapEditor.TiptapEditor, {
         ref: internalRef,
         ...editorProps,
+        capabilities,
         editable,
         onStateChange: handleStateChange,
         hasError: false,
         showBubbleToolbar,
         bodyFontFamily,
         headingFontFamily,
-        editorMode
+        editorMode,
+        fullscreen
       }), showStatusBar && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_StatusBar.StatusBar, {
         state: editorState,
         mode: editorMode,
         onModeChange: setEditorMode
-      }), resizable && !disabled && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ResizeHandle.ResizeHandle, {
+      }), resizable && !disabled && !fullscreen && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ResizeHandle.ResizeHandle, {
         containerRef: frameRef,
         minHeight: editorProps.minHeight ?? 150,
         maxHeight: editorProps.maxHeight