@open-mercato/ui 0.6.1-develop.3246.1.dbef9d7392 → 0.6.1-develop.3260.1.dc719cac84

package/dist/backend/CrudForm.js

@@ -93,7 +93,7 @@ import { useGroupOrder } from "./crud/useGroupOrder.js";
 import { InjectedField } from "./injection/InjectedField.js";
 import { evaluateInjectedVisibility } from "./injection/visibility-utils.js";
 import { ComponentReplacementHandles } from "@open-mercato/shared/modules/widgets/component-registry";
-import { sanitizeHtmlRichText, sanitizeRichTextHref, sanitizeRichTextPasteContent } from "./utils/richTextSanitizer.js";
+import { RichEditor } from "../primitives/rich-editor.js";
 const EMPTY_OPTIONS = [];
 const SELECT_CLEAR_SENTINEL = "__crudform_select_clear__";
 const FOCUSABLE_SELECTOR = '[data-crud-focus-target], input:not([type="hidden"]):not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
@@ -2913,120 +2913,27 @@ const MarkdownEditor = React.memo(function MarkdownEditor2({ value = "", onChang
     }
   ) });
 }, (prev, next) => prev.value === next.value);
-const HtmlRichTextEditor = React.memo(function HtmlRichTextEditor2({ value = "", onChange }) {
+const HtmlRichEditorField = React.memo(function HtmlRichEditorField2({ value = "", onChange }) {
   const t = useT();
-  const boldLabel = t("ui.forms.richtext.bold");
-  const italicLabel = t("ui.forms.richtext.italic");
-  const underlineLabel = t("ui.forms.richtext.underline");
-  const listLabel = t("ui.forms.richtext.list");
-  const heading3Label = t("ui.forms.richtext.heading3");
-  const linkLabel = t("ui.forms.richtext.link");
-  const linkUrlPrompt = t("ui.forms.richtext.linkUrlPrompt");
-  const ref = React.useRef(null);
-  const applyingExternal = React.useRef(false);
-  const typingRef = React.useRef(false);
-  React.useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    const current = el.innerHTML;
-    const sanitizedValue = sanitizeHtmlRichText(value);
-    if (!typingRef.current && current !== sanitizedValue) {
-      applyingExternal.current = true;
-      el.innerHTML = sanitizedValue;
-      requestAnimationFrame(() => {
-        applyingExternal.current = false;
-      });
-    }
-  }, [value]);
-  const exec = (cmd, arg) => {
-    const el = ref.current;
-    if (!el) return;
-    el.focus();
-    try {
-      document.execCommand(cmd, false, arg);
-    } catch {
-    }
-  };
-  const onKeyDown = (e) => {
-    const isMod = e.metaKey || e.ctrlKey;
-    if (!isMod) return;
-    const k = e.key.toLowerCase();
-    if (k === "b") {
-      e.preventDefault();
-      exec("bold");
-    }
-    if (k === "i") {
-      e.preventDefault();
-      exec("italic");
-    }
-    if (k === "u") {
-      e.preventDefault();
-      exec("underline");
-    }
-  };
-  const onPaste = (e) => {
-    const html = e.clipboardData.getData("text/html");
-    const text = e.clipboardData.getData("text/plain");
-    const sanitizedPaste = sanitizeRichTextPasteContent(html, text);
-    if (!sanitizedPaste) return;
-    e.preventDefault();
-    exec(sanitizedPaste.command, sanitizedPaste.value);
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "w-full rounded border", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 px-2 py-1 border-b", children: [
-      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", className: "h-auto px-2 py-0.5 text-xs", onMouseDown: (e) => e.preventDefault(), onClick: () => exec("bold"), children: boldLabel }),
-      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", className: "h-auto px-2 py-0.5 text-xs", onMouseDown: (e) => e.preventDefault(), onClick: () => exec("italic"), children: italicLabel }),
-      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", className: "h-auto px-2 py-0.5 text-xs", onMouseDown: (e) => e.preventDefault(), onClick: () => exec("underline"), children: underlineLabel }),
-      /* @__PURE__ */ jsx("span", { className: "mx-2 text-muted-foreground", children: "|" }),
-      /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", className: "h-auto px-2 py-0.5 text-xs", onMouseDown: (e) => e.preventDefault(), onClick: () => exec("insertUnorderedList"), children: [
-        "\u2022 ",
-        listLabel
-      ] }),
-      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", className: "h-auto px-2 py-0.5 text-xs", onMouseDown: (e) => e.preventDefault(), onClick: () => exec("formatBlock", "<h3>"), children: heading3Label }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "ghost",
-          size: "sm",
-          className: "h-auto px-2 py-0.5 text-xs",
-          onMouseDown: (e) => e.preventDefault(),
-          onClick: () => {
-            const url = sanitizeRichTextHref(window.prompt(linkUrlPrompt));
-            if (url) exec("createLink", url);
-          },
-          children: linkLabel
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: "w-full px-2 py-2 min-h-[100px] sm:min-h-[160px] focus-visible:outline-none prose prose-sm max-w-none",
-        contentEditable: true,
-        suppressContentEditableWarning: true,
-        onKeyDown,
-        onPaste,
-        onInput: () => {
-          if (!applyingExternal.current) typingRef.current = true;
-        },
-        onBlur: () => {
-          const el = ref.current;
-          if (!el) return;
-          typingRef.current = false;
-          const sanitizedValue = sanitizeHtmlRichText(el.innerHTML);
-          if (el.innerHTML !== sanitizedValue) {
-            applyingExternal.current = true;
-            el.innerHTML = sanitizedValue;
-            requestAnimationFrame(() => {
-              applyingExternal.current = false;
-            });
-          }
-          onChange(sanitizedValue);
-        }
-      }
-    )
-  ] });
+  const labels = React.useMemo(() => ({
+    bold: t("ui.forms.richtext.bold"),
+    italic: t("ui.forms.richtext.italic"),
+    underline: t("ui.forms.richtext.underline"),
+    unorderedList: t("ui.forms.richtext.list"),
+    orderedList: t("ui.forms.richtext.orderedList", "Numbered list"),
+    heading: t("ui.forms.richtext.heading", "Heading"),
+    heading1: t("ui.forms.richtext.heading1", "Heading 1"),
+    heading2: t("ui.forms.richtext.heading2", "Heading 2"),
+    heading3: t("ui.forms.richtext.heading3"),
+    paragraph: t("ui.forms.richtext.paragraph", "Paragraph"),
+    link: t("ui.forms.richtext.link"),
+    linkUrlPrompt: t("ui.forms.richtext.linkUrlPrompt"),
+    placeholder: t("ui.forms.richtext.placeholder"),
+    comment: t("ui.forms.richtext.comment", "Add comment"),
+    mention: t("ui.forms.richtext.mention", "Mention"),
+    more: t("ui.forms.richtext.more", "More")
+  }), [t]);
+  return /* @__PURE__ */ jsx(RichEditor, { value, onChange, variant: "full", labels });
 }, (prev, next) => prev.value === next.value);
 const SimpleMarkdownEditor = React.memo(function SimpleMarkdownEditor2({ value = "", onChange }) {
   const t = useT();
@@ -3252,25 +3159,33 @@ const FieldControl = React.memo(
             }
           ),
           field.type === "date" && /* @__PURE__ */ jsx(
-            Input,
+            DatePicker,
             {
-              type: "date",
-              value: typeof value === "string" ? value : "",
-              onChange: (e) => setValue(field.id, e.target.value || void 0),
-              autoFocus: autoFocusField,
-              "data-crud-focus-target": "",
-              disabled
+              value: typeof value === "string" && value ? parseISO(value) : value instanceof Date ? value : null,
+              onChange: (date) => setValue(field.id, date ? format(date, "yyyy-MM-dd") : void 0),
+              disabled,
+              readOnly,
+              placeholder,
+              minDate: builtin?.minDate,
+              maxDate: builtin?.maxDate,
+              displayFormat: builtin?.displayFormat,
+              closeOnSelect: builtin?.closeOnSelect,
+              locale: builtin?.locale
             }
           ),
           field.type === "datetime-local" && /* @__PURE__ */ jsx(
-            Input,
+            DateTimePicker,
             {
-              type: "datetime-local",
-              value: typeof value === "string" ? value : "",
-              onChange: (e) => setValue(field.id, e.target.value || void 0),
-              autoFocus: autoFocusField,
-              "data-crud-focus-target": "",
-              disabled
+              value: typeof value === "string" && value ? new Date(value) : value instanceof Date ? value : null,
+              onChange: (date) => setValue(field.id, date ? format(date, "yyyy-MM-dd'T'HH:mm") : void 0),
+              disabled,
+              readOnly,
+              placeholder,
+              minuteStep: builtin?.minuteStep,
+              minDate: builtin?.minDate,
+              maxDate: builtin?.maxDate,
+              displayFormat: builtin?.displayFormat,
+              locale: builtin?.locale
             }
           ),
           field.type === "datepicker" && /* @__PURE__ */ jsx(
@@ -3328,7 +3243,7 @@ const FieldControl = React.memo(
             }
           ),
           field.type === "richtext" && builtin?.editor === "simple" && /* @__PURE__ */ jsx(SimpleMarkdownEditor, { value: String(value ?? ""), onChange: fieldSetValue }),
-          field.type === "richtext" && builtin?.editor === "html" && /* @__PURE__ */ jsx(HtmlRichTextEditor, { value: String(value ?? ""), onChange: fieldSetValue }),
+          field.type === "richtext" && builtin?.editor === "html" && /* @__PURE__ */ jsx(HtmlRichEditorField, { value: String(value ?? ""), onChange: fieldSetValue }),
           field.type === "richtext" && (!builtin?.editor || builtin.editor !== "simple" && builtin.editor !== "html") && /* @__PURE__ */ jsx(MarkdownEditor, { value: String(value ?? ""), onChange: fieldSetValue }),
           field.type === "tags" && /* @__PURE__ */ jsx(
             TagsInput,
@@ -3353,6 +3268,8 @@ const FieldControl = React.memo(
               placeholder,
               autoFocus: autoFocusField,
               suggestions: builtin?.suggestions ? builtin.suggestions : options.map((opt) => ({ value: opt.value, label: opt.label })),
+              seedOptions: builtin?.seedOptions ? builtin.seedOptions.map((opt) => ({ value: opt.value, label: opt.label })) : void 0,
+              resolveLabel: builtin?.resolveLabel,
               loadSuggestions: typeof builtin?.loadOptions === "function" ? async (query) => {
                 const opts = await loadFieldOptions(field, query);
                 return opts.map((opt) => ({ value: opt.value, label: opt.label }));