@particle-academy/react-fancy 4.7.1 → 4.8.0

package/dist/index.d.cts

@@ -2064,6 +2064,14 @@ interface EditorProps {
     outputFormat?: "html" | "markdown";
     lineSpacing?: number;
     placeholder?: string;
+    /**
+     * View/edit mode — like the react-fancy inputs. Resolution: this prop →
+     * nearest `<Form>` / `<FormProvider>` context → `"edit"`. In `"view"` mode the
+     * editor renders its value read-only through `<ContentRenderer>` (matching
+     * `outputFormat` — markdown/html) instead of the editable toolbar + content.
+     * @default "edit"
+     */
+    mode?: FieldMode;
     /** Per-instance render extensions. Merged with any globally-registered extensions. */
     extensions?: RenderExtension[];
     /**
@@ -2091,7 +2099,7 @@ declare namespace EditorContent {
     var displayName: string;
 }
 
-declare function EditorRoot({ children, className, value: controlledValue, defaultValue, onChange, outputFormat, lineSpacing, placeholder, extensions: instanceExtensions, unsafe, }: EditorProps): react.JSX.Element;
+declare function EditorRoot({ children, className, value: controlledValue, defaultValue, onChange, outputFormat, lineSpacing, placeholder, mode: modeProp, extensions: instanceExtensions, unsafe, }: EditorProps): react.JSX.Element;
 declare const Editor: typeof EditorRoot & {
     Toolbar: typeof EditorToolbar & {
         Separator: typeof EditorToolbarSeparator;

package/dist/index.d.ts

@@ -2064,6 +2064,14 @@ interface EditorProps {
     outputFormat?: "html" | "markdown";
     lineSpacing?: number;
     placeholder?: string;
+    /**
+     * View/edit mode — like the react-fancy inputs. Resolution: this prop →
+     * nearest `<Form>` / `<FormProvider>` context → `"edit"`. In `"view"` mode the
+     * editor renders its value read-only through `<ContentRenderer>` (matching
+     * `outputFormat` — markdown/html) instead of the editable toolbar + content.
+     * @default "edit"
+     */
+    mode?: FieldMode;
     /** Per-instance render extensions. Merged with any globally-registered extensions. */
     extensions?: RenderExtension[];
     /**
@@ -2091,7 +2099,7 @@ declare namespace EditorContent {
     var displayName: string;
 }
 
-declare function EditorRoot({ children, className, value: controlledValue, defaultValue, onChange, outputFormat, lineSpacing, placeholder, extensions: instanceExtensions, unsafe, }: EditorProps): react.JSX.Element;
+declare function EditorRoot({ children, className, value: controlledValue, defaultValue, onChange, outputFormat, lineSpacing, placeholder, mode: modeProp, extensions: instanceExtensions, unsafe, }: EditorProps): react.JSX.Element;
 declare const Editor: typeof EditorRoot & {
     Toolbar: typeof EditorToolbar & {
         Separator: typeof EditorToolbarSeparator;

package/dist/index.js

@@ -11589,6 +11589,71 @@ function mergeExtensions(instanceExtensions) {
   }
   return merged;
 }
+function RenderedContent({
+  html,
+  extensions: instanceExtensions,
+  unsafe = false
+}) {
+  const extensions = useMemo(
+    () => mergeExtensions(instanceExtensions),
+    [instanceExtensions]
+  );
+  const segments = useMemo(
+    () => parseSegments(html, extensions),
+    [html, extensions]
+  );
+  const renderHtml = (content) => unsafe ? content : sanitizeHtml(content);
+  if (segments.length === 1 && segments[0].type === "html") {
+    return /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: renderHtml(segments[0].content) } });
+  }
+  if (segments.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: segments.map((segment, i) => {
+    if (segment.type === "html") {
+      return segment.content ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: renderHtml(segment.content) } }, i) : null;
+    }
+    const ext = extensions.find(
+      (e) => e.tag.toLowerCase() === segment.tag
+    );
+    if (!ext) return null;
+    const Component = ext.component;
+    const isBlock = ext.block !== false;
+    const Wrapper = isBlock ? "div" : "span";
+    return /* @__PURE__ */ jsx(Wrapper, { "data-render-extension": segment.tag, children: /* @__PURE__ */ jsx(Component, { content: segment.content, attributes: segment.attributes }) }, i);
+  }) });
+}
+RenderedContent.displayName = "RenderedContent";
+function ContentRenderer({
+  value,
+  format = "auto",
+  lineSpacing = 1.6,
+  className,
+  extensions: instanceExtensions,
+  unsafe = false
+}) {
+  const extensions = useMemo(
+    () => mergeExtensions(instanceExtensions),
+    [instanceExtensions]
+  );
+  const html = useMemo(() => {
+    const safe = value ?? "";
+    const resolvedFormat = format === "auto" ? detectFormat(safe) : format;
+    const raw = resolvedFormat === "markdown" ? marked.parse(safe, { async: false }) : safe;
+    return unsafe ? raw : sanitizeHtml(raw);
+  }, [value, format, unsafe]);
+  const hasExtensions = extensions.length > 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-react-fancy-content-renderer": "",
+      style: { lineHeight: lineSpacing },
+      className: cn("text-sm", proseClasses, className),
+      children: hasExtensions ? /* @__PURE__ */ jsx(RenderedContent, { html, extensions, unsafe }) : /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: html } })
+    }
+  );
+}
+ContentRenderer.displayName = "ContentRenderer";
 function toHtml(value, outputFormat, unsafe) {
   if (!value) return "";
   const raw = (() => {
@@ -11608,16 +11673,22 @@ function EditorRoot({
   outputFormat = "html",
   lineSpacing = 1.6,
   placeholder,
+  mode: modeProp,
   extensions: instanceExtensions,
   unsafe = false
 }) {
   const contentRef = useRef(null);
-  const [, setValue] = useControllableState(controlledValue, defaultValue, onChange);
+  const [value, setValue] = useControllableState(controlledValue, defaultValue, onChange);
+  const mode = useFieldMode(modeProp);
+  const isView = mode === "view";
   const initialHtml = useMemo(
-    () => toHtml(controlledValue ?? defaultValue, outputFormat, unsafe),
-    // Only compute once on mount — don't re-run when value changes from user input
+    () => toHtml(value, outputFormat, unsafe),
+    // 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.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
+    [isView, outputFormat, unsafe]
   );
   const extensions = useMemo(
     () => mergeExtensions(instanceExtensions),
@@ -11680,10 +11751,35 @@ function EditorRoot({
     _initialHtml: initialHtml,
     _onInput: handleInput
   };
+  if (isView) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-react-fancy-editor": "",
+        "data-mode": "view",
+        className: cn(
+          "overflow-hidden rounded-xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900",
+          className
+        ),
+        children: /* @__PURE__ */ jsx(
+          ContentRenderer,
+          {
+            value,
+            format: outputFormat,
+            lineSpacing,
+            extensions: instanceExtensions,
+            unsafe,
+            className: "px-4 py-3"
+          }
+        )
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(EditorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
     "div",
     {
       "data-react-fancy-editor": "",
+      "data-mode": "edit",
       className: cn(
         "overflow-hidden rounded-xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900",
         className
@@ -11699,71 +11795,6 @@ var Editor = Object.assign(EditorRoot, {
   Toolbar: ToolbarWithSeparator,
   Content: EditorContent
 });
-function RenderedContent({
-  html,
-  extensions: instanceExtensions,
-  unsafe = false
-}) {
-  const extensions = useMemo(
-    () => mergeExtensions(instanceExtensions),
-    [instanceExtensions]
-  );
-  const segments = useMemo(
-    () => parseSegments(html, extensions),
-    [html, extensions]
-  );
-  const renderHtml = (content) => unsafe ? content : sanitizeHtml(content);
-  if (segments.length === 1 && segments[0].type === "html") {
-    return /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: renderHtml(segments[0].content) } });
-  }
-  if (segments.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Fragment, { children: segments.map((segment, i) => {
-    if (segment.type === "html") {
-      return segment.content ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: renderHtml(segment.content) } }, i) : null;
-    }
-    const ext = extensions.find(
-      (e) => e.tag.toLowerCase() === segment.tag
-    );
-    if (!ext) return null;
-    const Component = ext.component;
-    const isBlock = ext.block !== false;
-    const Wrapper = isBlock ? "div" : "span";
-    return /* @__PURE__ */ jsx(Wrapper, { "data-render-extension": segment.tag, children: /* @__PURE__ */ jsx(Component, { content: segment.content, attributes: segment.attributes }) }, i);
-  }) });
-}
-RenderedContent.displayName = "RenderedContent";
-function ContentRenderer({
-  value,
-  format = "auto",
-  lineSpacing = 1.6,
-  className,
-  extensions: instanceExtensions,
-  unsafe = false
-}) {
-  const extensions = useMemo(
-    () => mergeExtensions(instanceExtensions),
-    [instanceExtensions]
-  );
-  const html = useMemo(() => {
-    const safe = value ?? "";
-    const resolvedFormat = format === "auto" ? detectFormat(safe) : format;
-    const raw = resolvedFormat === "markdown" ? marked.parse(safe, { async: false }) : safe;
-    return unsafe ? raw : sanitizeHtml(raw);
-  }, [value, format, unsafe]);
-  const hasExtensions = extensions.length > 0;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-react-fancy-content-renderer": "",
-      style: { lineHeight: lineSpacing },
-      className: cn("text-sm", proseClasses, className),
-      children: hasExtensions ? /* @__PURE__ */ jsx(RenderedContent, { html, extensions, unsafe }) : /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: html } })
-    }
-  );
-}
-ContentRenderer.displayName = "ContentRenderer";
 var MenuContext = createContext(null);
 function useMenu() {
   const ctx = useContext(MenuContext);