@firecms/core 3.5.0 → 3.5.2-canary.16bf7bb

package/dist/{editor-BSo_aS1I.js → editor-WZytSO_1.js}

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import { c } from "react-compiler-runtime";
 import React__default, { createContext, useContext, forwardRef, useRef, useState, useEffect, useLayoutEffect } from "react";
-import { defaultBorderMixin, cls, TextFieldsIcon, CheckBoxIcon, LooksOneIcon, LooksTwoIcon, Looks3Icon, FormatListBulletedIcon, FormatListNumberedIcon, FormatQuoteIcon, CodeIcon, ImageIcon, TableChartIcon, AutoFixHighIcon, TextField, Tooltip, IconButton, CheckIcon, Popover, Button, KeyboardArrowDownIcon, focusedDisabled, DeleteIcon, FormatBoldIcon, FormatItalicIcon, FormatUnderlinedIcon, FormatStrikethroughIcon, useInjectStyles, Separator, TextareaAutosize } from "@firecms/ui";
+import { defaultBorderMixin, cls, TextFieldsIcon, CheckBoxIcon, LooksOneIcon, LooksTwoIcon, Looks3Icon, FormatListBulletedIcon, FormatListNumberedIcon, FormatQuoteIcon, CodeIcon, ImageIcon, TableChartIcon, AutoFixHighIcon, TextField, Tooltip, IconButton, CheckIcon, Popover, Button, KeyboardArrowDownIcon, focusedDisabled, DeleteIcon, Typography, FormatBoldIcon, FormatItalicIcon, FormatUnderlinedIcon, FormatStrikethroughIcon, useInjectStyles, Separator, TextareaAutosize } from "@firecms/ui";
 import { useTranslation } from "./index.es.js";
 import { autoUpdate, computePosition, offset, flip, shift } from "@floating-ui/dom";
 import { NodeSelection, Plugin, PluginKey, TextSelection, EditorState } from "prosemirror-state";
@@ -2668,7 +2668,7 @@ function getUrlFromString(str) {
   }
 }
 const LinkSelector = (t0) => {
-  const $ = c(58);
+  const $ = c(66);
   const {
     open,
     onOpenChange
@@ -2681,20 +2681,23 @@ const LinkSelector = (t0) => {
   const {
     t
   } = useTranslation();
+  const [error, setError] = useState(null);
+  const isInputInvalid = !!error;
   let t1;
-  let t2;
-  if ($[0] !== open) {
+  if ($[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
     t1 = () => {
-      if (open && inputRef.current) {
-        inputRef.current.focus();
-      }
+      setError(null);
     };
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  let t2;
+  if ($[1] !== open) {
     t2 = [open];
-    $[0] = open;
-    $[1] = t1;
+    $[1] = open;
     $[2] = t2;
   } else {
-    t1 = $[1];
     t2 = $[2];
   }
   useEffect(t1, t2);
@@ -2702,195 +2705,227 @@ const LinkSelector = (t0) => {
     return null;
   }
   let t3;
-  if ($[3] !== onOpenChange || $[4] !== view) {
+  if ($[3] !== isInputInvalid) {
     t3 = (e) => {
-      e.preventDefault();
+      if (isInputInvalid) {
+        setError(null);
+      }
+    };
+    $[3] = isInputInvalid;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  const handleChange = t3;
+  let t4;
+  if ($[5] !== onOpenChange || $[6] !== t || $[7] !== view) {
+    t4 = (e_0) => {
+      e_0.preventDefault();
+      e_0.stopPropagation();
+      setError(null);
       const value = inputRef.current?.value;
       if (!value) {
         return;
       }
       const url = getUrlFromString(value);
-      if (url) {
-        setMark(schema.marks.link, {
-          href: url
-        })(view.state, view.dispatch);
-        view.focus();
-        onOpenChange(false);
+      if (!url) {
+        setError(t("editor_invalid_url"));
+        return;
       }
+      setMark(schema.marks.link, {
+        href: url
+      })(view.state, view.dispatch);
+      view.focus();
+      onOpenChange(false);
     };
-    $[3] = onOpenChange;
-    $[4] = view;
-    $[5] = t3;
+    $[5] = onOpenChange;
+    $[6] = t;
+    $[7] = view;
+    $[8] = t4;
   } else {
-    t3 = $[5];
+    t4 = $[8];
   }
-  const handleSubmit = t3;
-  let t4;
-  if ($[6] !== onOpenChange || $[7] !== view) {
-    t4 = () => {
+  const handleSubmit = t4;
+  let t5;
+  if ($[9] !== onOpenChange || $[10] !== view) {
+    t5 = () => {
       unsetMark(schema.marks.link)(view.state, view.dispatch);
       view.focus();
       onOpenChange(false);
     };
-    $[6] = onOpenChange;
-    $[7] = view;
-    $[8] = t4;
+    $[9] = onOpenChange;
+    $[10] = view;
+    $[11] = t5;
   } else {
-    t4 = $[8];
+    t5 = $[11];
   }
-  const handleRemoveLink = t4;
+  const handleRemoveLink = t5;
   let T0;
   let T1;
   let href;
   let t10;
   let t11;
   let t12;
-  let t5;
+  let t13;
   let t6;
   let t7;
   let t8;
   let t9;
-  if ($[9] !== onOpenChange || $[10] !== open || $[11] !== state) {
+  if ($[12] !== onOpenChange || $[13] !== open || $[14] !== state) {
     const isActive = isMarkActive(state, schema.marks.link);
-    let t132;
-    if ($[23] !== state) {
-      t132 = getMarkAttributes(state, schema.marks.link).href || "";
-      $[23] = state;
-      $[24] = t132;
+    let t142;
+    if ($[26] !== state) {
+      t142 = getMarkAttributes(state, schema.marks.link).href || "";
+      $[26] = state;
+      $[27] = t142;
     } else {
-      t132 = $[24];
+      t142 = $[27];
     }
-    href = t132;
+    href = t142;
     T1 = Popover;
-    t10 = true;
-    t11 = open;
-    t12 = onOpenChange;
+    t11 = true;
+    t12 = open;
+    t13 = onOpenChange;
     T0 = Button;
-    t6 = "text";
-    t7 = "button";
-    t8 = "gap-2 rounded-none";
-    t9 = "text";
-    t5 = cls("underline decoration-stone-400 underline-offset-4", {
+    t7 = "text";
+    t8 = "button";
+    t9 = "gap-2 rounded-none";
+    t10 = "text";
+    t6 = cls("underline decoration-stone-400 underline-offset-4", {
       "text-blue-500": isActive
     });
-    $[9] = onOpenChange;
-    $[10] = open;
-    $[11] = state;
-    $[12] = T0;
-    $[13] = T1;
-    $[14] = href;
-    $[15] = t10;
-    $[16] = t11;
-    $[17] = t12;
-    $[18] = t5;
-    $[19] = t6;
-    $[20] = t7;
-    $[21] = t8;
-    $[22] = t9;
-  } else {
-    T0 = $[12];
-    T1 = $[13];
-    href = $[14];
-    t10 = $[15];
-    t11 = $[16];
-    t12 = $[17];
-    t5 = $[18];
-    t6 = $[19];
-    t7 = $[20];
-    t8 = $[21];
-    t9 = $[22];
-  }
-  let t13;
-  if ($[25] !== t) {
-    t13 = t("editor_link");
-    $[25] = t;
-    $[26] = t13;
+    $[12] = onOpenChange;
+    $[13] = open;
+    $[14] = state;
+    $[15] = T0;
+    $[16] = T1;
+    $[17] = href;
+    $[18] = t10;
+    $[19] = t11;
+    $[20] = t12;
+    $[21] = t13;
+    $[22] = t6;
+    $[23] = t7;
+    $[24] = t8;
+    $[25] = t9;
   } else {
-    t13 = $[26];
+    T0 = $[15];
+    T1 = $[16];
+    href = $[17];
+    t10 = $[18];
+    t11 = $[19];
+    t12 = $[20];
+    t13 = $[21];
+    t6 = $[22];
+    t7 = $[23];
+    t8 = $[24];
+    t9 = $[25];
   }
   let t14;
-  if ($[27] !== t13 || $[28] !== t5) {
-    t14 = /* @__PURE__ */ jsx("p", { className: t5, children: t13 });
-    $[27] = t13;
-    $[28] = t5;
+  if ($[28] !== t) {
+    t14 = t("editor_link");
+    $[28] = t;
     $[29] = t14;
   } else {
     t14 = $[29];
   }
   let t15;
-  if ($[30] !== T0 || $[31] !== t14 || $[32] !== t6 || $[33] !== t7 || $[34] !== t8 || $[35] !== t9) {
-    t15 = /* @__PURE__ */ jsx(T0, { variant: t6, type: t7, className: t8, color: t9, children: t14 });
-    $[30] = T0;
-    $[31] = t14;
-    $[32] = t6;
-    $[33] = t7;
-    $[34] = t8;
-    $[35] = t9;
-    $[36] = t15;
+  if ($[30] !== t14 || $[31] !== t6) {
+    t15 = /* @__PURE__ */ jsx("p", { className: t6, children: t14 });
+    $[30] = t14;
+    $[31] = t6;
+    $[32] = t15;
   } else {
-    t15 = $[36];
+    t15 = $[32];
   }
   let t16;
-  if ($[37] !== t) {
-    t16 = t("editor_paste_or_type_link");
-    $[37] = t;
-    $[38] = t16;
+  if ($[33] !== T0 || $[34] !== t10 || $[35] !== t15 || $[36] !== t7 || $[37] !== t8 || $[38] !== t9) {
+    t16 = /* @__PURE__ */ jsx(T0, { variant: t7, type: t8, className: t9, color: t10, children: t15 });
+    $[33] = T0;
+    $[34] = t10;
+    $[35] = t15;
+    $[36] = t7;
+    $[37] = t8;
+    $[38] = t9;
+    $[39] = t16;
   } else {
-    t16 = $[38];
+    t16 = $[39];
   }
   let t17;
-  if ($[39] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t17 = cls("text-surface-900 dark:text-white flex-grow bg-transparent p-1 text-sm outline-none", focusedDisabled);
-    $[39] = t17;
+  if ($[40] !== t) {
+    t17 = t("editor_paste_or_type_link");
+    $[40] = t;
+    $[41] = t17;
   } else {
-    t17 = $[39];
+    t17 = $[41];
   }
   let t18;
-  if ($[40] !== href || $[41] !== open || $[42] !== t16) {
-    t18 = /* @__PURE__ */ jsx("input", { ref: inputRef, autoFocus: open, placeholder: t16, defaultValue: href, className: t17 });
-    $[40] = href;
-    $[41] = open;
-    $[42] = t16;
-    $[43] = t18;
+  if ($[42] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t18 = cls("text-surface-900 dark:text-white flex-grow bg-transparent p-1 text-sm outline-none", focusedDisabled);
+    $[42] = t18;
   } else {
-    t18 = $[43];
+    t18 = $[42];
   }
   let t19;
-  if ($[44] !== handleRemoveLink || $[45] !== href) {
-    t19 = href ? /* @__PURE__ */ jsx(Button, { size: "small", variant: "text", type: "button", color: "text", className: "flex items-center", onClick: handleRemoveLink, children: /* @__PURE__ */ jsx(DeleteIcon, { size: "small" }) }) : /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", variant: "text", children: /* @__PURE__ */ jsx(CheckIcon, { size: "small" }) });
-    $[44] = handleRemoveLink;
-    $[45] = href;
-    $[46] = t19;
+  if ($[43] !== href || $[44] !== isInputInvalid || $[45] !== open || $[46] !== t17) {
+    t19 = /* @__PURE__ */ jsx("input", { ref: inputRef, autoFocus: open, placeholder: t17, defaultValue: href, className: t18, "aria-invalid": isInputInvalid });
+    $[43] = href;
+    $[44] = isInputInvalid;
+    $[45] = open;
+    $[46] = t17;
+    $[47] = t19;
   } else {
-    t19 = $[46];
+    t19 = $[47];
   }
   let t20;
-  if ($[47] !== handleSubmit || $[48] !== t18 || $[49] !== t19) {
-    t20 = /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "flex p-1 gap-1", children: [
-      t18,
-      t19
-    ] });
-    $[47] = handleSubmit;
-    $[48] = t18;
-    $[49] = t19;
+  if ($[48] !== handleRemoveLink || $[49] !== href) {
+    t20 = href ? /* @__PURE__ */ jsx(Button, { size: "small", variant: "text", type: "button", color: "text", className: "flex items-center", onClick: handleRemoveLink, children: /* @__PURE__ */ jsx(DeleteIcon, { size: "small" }) }) : /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", variant: "text", children: /* @__PURE__ */ jsx(CheckIcon, { size: "small" }) });
+    $[48] = handleRemoveLink;
+    $[49] = href;
     $[50] = t20;
   } else {
     t20 = $[50];
   }
   let t21;
-  if ($[51] !== T1 || $[52] !== t10 || $[53] !== t11 || $[54] !== t12 || $[55] !== t15 || $[56] !== t20) {
-    t21 = /* @__PURE__ */ jsx(T1, { modal: t10, open: t11, onOpenChange: t12, trigger: t15, children: t20 });
-    $[51] = T1;
-    $[52] = t10;
-    $[53] = t11;
-    $[54] = t12;
-    $[55] = t15;
-    $[56] = t20;
-    $[57] = t21;
+  if ($[51] !== handleChange || $[52] !== handleSubmit || $[53] !== t19 || $[54] !== t20) {
+    t21 = /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "flex p-1 gap-1", onChange: handleChange, children: [
+      t19,
+      t20
+    ] });
+    $[51] = handleChange;
+    $[52] = handleSubmit;
+    $[53] = t19;
+    $[54] = t20;
+    $[55] = t21;
+  } else {
+    t21 = $[55];
+  }
+  let t22;
+  if ($[56] !== error) {
+    t22 = error && /* @__PURE__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "error", role: "alert", "aria-live": "polite", children: error }) });
+    $[56] = error;
+    $[57] = t22;
+  } else {
+    t22 = $[57];
+  }
+  let t23;
+  if ($[58] !== T1 || $[59] !== t11 || $[60] !== t12 || $[61] !== t13 || $[62] !== t16 || $[63] !== t21 || $[64] !== t22) {
+    t23 = /* @__PURE__ */ jsxs(T1, { modal: t11, open: t12, onOpenChange: t13, trigger: t16, children: [
+      t21,
+      t22
+    ] });
+    $[58] = T1;
+    $[59] = t11;
+    $[60] = t12;
+    $[61] = t13;
+    $[62] = t16;
+    $[63] = t21;
+    $[64] = t22;
+    $[65] = t23;
   } else {
-    t21 = $[57];
+    t23 = $[65];
   }
-  return t21;
+  return t23;
 };
 const TextButtons = () => {
   const $ = c(3);
@@ -4560,4 +4595,4 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
 export {
   FireCMSEditor
 };
-//# sourceMappingURL=editor-BSo_aS1I.js.map
+//# sourceMappingURL=editor-WZytSO_1.js.map