@particle-academy/react-fancy 4.13.1 → 4.14.0

package/README.md

@@ -162,7 +162,7 @@ npx vite build                      # Build demo app (verifies imports work)
 |-----------|-------------|------|
 | Composer | Chat-style message input composing textarea + actions | [docs](docs/Composer.md) |
 | Chart | SVG-based Bar, Line, Area, Pie, Donut, and Sparkline charts | [docs](docs/Chart.md) |
-| Editor | Toolbar chrome wrapper for contentEditable | [docs](docs/Editor.md) |
+| Editor | Toolbar chrome wrapper for contentEditable, with a Source toggle to edit raw HTML/Markdown | [docs](docs/Editor.md) |
 | Kanban | Drag-and-drop board with columns and cards | [docs](docs/Kanban.md) |
 | Canvas | Interactive node canvas with pan, zoom, and connections | [docs](docs/Canvas.md) |
 | Diagram | Entity-relationship diagram with draggable nodes and relation lines | [docs](docs/Diagram.md) |

package/dist/index.cjs

@@ -11344,6 +11344,31 @@ function useEditor() {
   }
   return ctx;
 }
+function EditorSourceToggle({
+  className,
+  icon = "</>",
+  title = "Source",
+  activeTitle = "Rich text"
+}) {
+  const { showSource, setShowSource } = useEditor();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => setShowSource(!showSource),
+      title: showSource ? activeTitle : title,
+      "aria-pressed": showSource,
+      "data-react-fancy-editor-source-toggle": "",
+      className: cn(
+        "inline-flex h-8 items-center justify-center rounded-md px-2 font-mono text-xs transition-colors",
+        showSource ? "bg-zinc-200 dark:bg-zinc-700" : "hover:bg-zinc-100 dark:hover:bg-zinc-800",
+        className
+      ),
+      children: icon
+    }
+  );
+}
+EditorSourceToggle.displayName = "EditorSourceToggle";
 var DEFAULT_ACTIONS = [
   { icon: "B", label: "Bold", command: "bold" },
   { icon: "I", label: "Italic", command: "italic" },
@@ -11354,9 +11379,10 @@ function EditorToolbar({
   actions = DEFAULT_ACTIONS,
   onAction,
   children,
-  className
+  className,
+  showSourceToggle = true
 }) {
-  const { exec } = useEditor();
+  const { exec, showSource } = useEditor();
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -11365,26 +11391,31 @@ function EditorToolbar({
         "flex items-center gap-0.5 border-b border-zinc-200 px-2 py-1.5 dark:border-zinc-700",
         className
       ),
-      children: children ?? actions.map((action) => /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => {
-            if (onAction) {
-              onAction(action.command);
-            } else {
-              exec(action.command, action.commandArg);
-            }
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        actions.map((action) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            disabled: showSource,
+            onClick: () => {
+              if (onAction) {
+                onAction(action.command);
+              } else {
+                exec(action.command, action.commandArg);
+              }
+            },
+            title: action.label,
+            className: cn(
+              "inline-flex h-8 w-8 items-center justify-center rounded-md text-sm transition-colors",
+              action.active ? "bg-zinc-200 dark:bg-zinc-700" : "hover:bg-zinc-100 dark:hover:bg-zinc-800",
+              showSource && "cursor-not-allowed opacity-40 hover:bg-transparent"
+            ),
+            children: action.icon
           },
-          title: action.label,
-          className: cn(
-            "inline-flex h-8 w-8 items-center justify-center rounded-md text-sm transition-colors",
-            action.active ? "bg-zinc-200 dark:bg-zinc-700" : "hover:bg-zinc-100 dark:hover:bg-zinc-800"
-          ),
-          children: action.icon
-        },
-        `${action.command}-${action.commandArg ?? ""}`
-      ))
+          `${action.command}-${action.commandArg ?? ""}`
+        )),
+        showSourceToggle && /* @__PURE__ */ jsxRuntime.jsx(EditorSourceToggle, { className: "ml-auto" })
+      ] })
     }
   );
 }
@@ -11590,20 +11621,58 @@ function extensionEditorClasses(extensions) {
     ].join(" ");
   }).join(" ");
 }
-function EditorContent({ className, maxHeight }) {
-  const { contentRef, lineSpacing, placeholder, extensions, _initialHtml, _onInput } = useEditor();
-  const initialized = react.useRef(false);
+function EditorContent({ className, maxHeight, sourceClassName }) {
+  const {
+    contentRef,
+    lineSpacing,
+    placeholder,
+    extensions,
+    outputFormat,
+    showSource,
+    _initialHtml,
+    _onInput,
+    _sourceValue,
+    _onSourceInput
+  } = useEditor();
+  const seededHtml = react.useRef(null);
   react.useEffect(() => {
+    if (showSource) {
+      seededHtml.current = null;
+      return;
+    }
     const el = contentRef.current;
-    if (el && _initialHtml && !initialized.current) {
+    if (el && seededHtml.current !== _initialHtml) {
       el.innerHTML = _initialHtml;
-      initialized.current = true;
+      seededHtml.current = _initialHtml;
     }
-  }, [contentRef, _initialHtml]);
+  }, [contentRef, _initialHtml, showSource]);
   const extClasses = react.useMemo(
     () => extensionEditorClasses(extensions),
     [extensions]
   );
+  if (showSource) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        "data-react-fancy-editor-source": "",
+        value: _sourceValue,
+        onChange: (e) => _onSourceInput(e.target.value),
+        spellCheck: false,
+        placeholder,
+        "aria-label": `${outputFormat === "markdown" ? "Markdown" : "HTML"} source`,
+        style: {
+          maxHeight: maxHeight ? `${maxHeight}px` : void 0
+        },
+        className: cn(
+          "block min-h-[120px] w-full resize-y px-4 py-3 font-mono text-xs leading-relaxed outline-none",
+          "bg-zinc-50 text-zinc-800 focus:outline-none dark:bg-zinc-900 dark:text-zinc-200",
+          "placeholder:text-zinc-400",
+          maxHeight && "overflow-y-auto",
+          sourceClassName
+        )
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -11795,20 +11864,29 @@ function EditorRoot({
   placeholder,
   mode: modeProp,
   extensions: instanceExtensions,
-  unsafe = false
+  unsafe = false,
+  showSource: showSourceProp,
+  defaultShowSource = false,
+  onShowSourceChange
 }) {
   const contentRef = react.useRef(null);
   const [value, setValue] = useControllableState(controlledValue, defaultValue, onChange);
+  const [showSource, setShowSource] = useControllableState(
+    showSourceProp,
+    defaultShowSource,
+    onShowSourceChange
+  );
   const mode = useFieldMode(modeProp);
   const isView = mode === "view";
   const initialHtml = react.useMemo(
     () => toHtml(value, outputFormat, unsafe, valueFormat),
-    // Seed the contentEditable from the LIVE value when (re)entering edit mode.
-    // EditorContent reads this once on mount, and it only mounts in edit mode —
-    // so this captures the current value on view→edit, not a stale mount snapshot,
-    // and does NOT re-run on every keystroke.
+    // Seed the contentEditable from the LIVE value when (re)entering edit mode —
+    // and when returning from the raw-source view, which may have rewritten the
+    // value out from under the rich-text surface. EditorContent re-seeds when
+    // this recomputes; it does NOT re-run on every keystroke (`value` is not a
+    // dep, so typing in the rich-text surface never re-seeds it).
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [isView, outputFormat, unsafe, valueFormat]
+    [isView, outputFormat, unsafe, valueFormat, showSource]
   );
   const extensions = react.useMemo(
     () => mergeExtensions(instanceExtensions),
@@ -11845,6 +11923,12 @@ function EditorRoot({
     },
     [handleInput]
   );
+  const handleSourceInput = react.useCallback(
+    (next) => {
+      setValue(next);
+    },
+    [setValue]
+  );
   const wrapSelection = react.useCallback(
     (before, after) => {
       const sel = window.getSelection();
@@ -11868,8 +11952,12 @@ function EditorRoot({
     lineSpacing,
     placeholder,
     extensions,
+    showSource,
+    setShowSource,
     _initialHtml: initialHtml,
-    _onInput: handleInput
+    _onInput: handleInput,
+    _sourceValue: value,
+    _onSourceInput: handleSourceInput
   };
   if (isView) {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -11913,7 +12001,8 @@ var ToolbarWithSeparator = Object.assign(EditorToolbar, {
 });
 var Editor = Object.assign(EditorRoot, {
   Toolbar: ToolbarWithSeparator,
-  Content: EditorContent
+  Content: EditorContent,
+  SourceToggle: EditorSourceToggle
 });
 var MenuContext = react.createContext(null);
 function useMenu() {