@adecore/editor-react 0.31.11 → 0.32.0

package/dist/FindReplace.js

@@ -1,74 +1,532 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { c as _c } from "react/compiler-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
 import { MAX_REPLACEMENT_PAGE, MAX_REPLACEMENT_CHARACTERS } from '@adecore/editor';
 import { compileFind, EMPTY_FIND_QUERY } from './find-query.js';
-export function FindReplace({ editor, className, onClose }) {
-    const { t } = useTranslation('editor');
-    const [query, setQuery] = useState(EMPTY_FIND_QUERY);
-    const [replacement, setReplacement] = useState('');
-    const [preserveCase, setPreserveCase] = useState(false);
-    const [state, setState] = useState({ count: 0, current: null });
-    const root = useRef(null);
-    const compiled = useMemo(() => compileFind(query), [query]);
-    useEffect(() => editor.onFind(setState), [editor]);
-    useEffect(() => {
-        editor.find(compiled.kind === 'pattern' ? query : null);
-    }, [editor, query, compiled]);
-    useEffect(() => {
-        editor.setReplacePreview(compiled.kind === 'pattern' ? replacement : null, { preserveCase });
-    }, [editor, compiled, replacement, preserveCase]);
-    useEffect(() => () => {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function FindReplace(t0) {
+  const $ = _c(129);
+  const {
+    editor,
+    className,
+    onClose
+  } = t0;
+  const {
+    t
+  } = useTranslation("editor");
+  const [query, setQuery] = useState(EMPTY_FIND_QUERY);
+  const [replacement, setReplacement] = useState("");
+  const [preserveCase, setPreserveCase] = useState(false);
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = {
+      count: 0,
+      current: null
+    };
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const [state, setState] = useState(t1);
+  const root = useRef(null);
+  let t2;
+  if ($[1] !== query) {
+    t2 = compileFind(query);
+    $[1] = query;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const compiled = t2;
+  let t3;
+  let t4;
+  if ($[3] !== editor) {
+    t3 = () => editor.onFind(setState);
+    t4 = [editor];
+    $[3] = editor;
+    $[4] = t3;
+    $[5] = t4;
+  } else {
+    t3 = $[4];
+    t4 = $[5];
+  }
+  useEffect(t3, t4);
+  let t5;
+  if ($[6] !== compiled.kind || $[7] !== editor || $[8] !== query) {
+    t5 = () => {
+      editor.find(compiled.kind === "pattern" ? query : null);
+    };
+    $[6] = compiled.kind;
+    $[7] = editor;
+    $[8] = query;
+    $[9] = t5;
+  } else {
+    t5 = $[9];
+  }
+  let t6;
+  if ($[10] !== compiled || $[11] !== editor || $[12] !== query) {
+    t6 = [editor, query, compiled];
+    $[10] = compiled;
+    $[11] = editor;
+    $[12] = query;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  useEffect(t5, t6);
+  let t7;
+  if ($[14] !== compiled.kind || $[15] !== editor || $[16] !== preserveCase || $[17] !== replacement) {
+    t7 = () => {
+      editor.setReplacePreview(compiled.kind === "pattern" ? replacement : null, {
+        preserveCase
+      });
+    };
+    $[14] = compiled.kind;
+    $[15] = editor;
+    $[16] = preserveCase;
+    $[17] = replacement;
+    $[18] = t7;
+  } else {
+    t7 = $[18];
+  }
+  let t8;
+  if ($[19] !== compiled || $[20] !== editor || $[21] !== preserveCase || $[22] !== replacement) {
+    t8 = [editor, compiled, replacement, preserveCase];
+    $[19] = compiled;
+    $[20] = editor;
+    $[21] = preserveCase;
+    $[22] = replacement;
+    $[23] = t8;
+  } else {
+    t8 = $[23];
+  }
+  useEffect(t7, t8);
+  let t10;
+  let t9;
+  if ($[24] !== editor) {
+    t9 = () => () => {
+      editor.endFind();
+      editor.setReplacePreview(null);
+    };
+    t10 = [editor];
+    $[24] = editor;
+    $[25] = t10;
+    $[26] = t9;
+  } else {
+    t10 = $[25];
+    t9 = $[26];
+  }
+  useEffect(t9, t10);
+  let t11;
+  let t12;
+  if ($[27] !== editor) {
+    t11 = () => () => {
+      if (root.current?.contains(root.current.ownerDocument.activeElement) === true) {
+        editor.focus();
+      }
+    };
+    t12 = [editor];
+    $[27] = editor;
+    $[28] = t11;
+    $[29] = t12;
+  } else {
+    t11 = $[28];
+    t12 = $[29];
+  }
+  useLayoutEffect(t11, t12);
+  const failure = state.failed ?? state.captureFailed;
+  let t13;
+  if ($[30] !== compiled.kind || $[31] !== failure || $[32] !== state.count || $[33] !== state.current || $[34] !== state.large || $[35] !== state.limited || $[36] !== state.noSelection || $[37] !== state.replaceFailed || $[38] !== state.replaced || $[39] !== state.searching || $[40] !== t) {
+    t13 = compiled.kind === "invalid" ? t("find.invalid") : state.replaceFailed !== undefined ? t(`find.replace.failed.${state.replaceFailed}`, {
+      edits: formatNumber(MAX_REPLACEMENT_PAGE),
+      characters: formatNumber(MAX_REPLACEMENT_CHARACTERS)
+    }) : failure !== undefined ? t(`find.failed.${failure}`) : state.searching ? t("find.searching") : state.large ? t("find.large") : state.noSelection ? t("find.noSelection") : state.replaced !== undefined ? t("find.replaced", {
+      count: formatNumber(state.replaced)
+    }) : state.limited && state.current === null ? t("find.countMore", {
+      total: formatNumber(state.count)
+    }) : t(state.limited ? "find.countLimited" : "find.count", {
+      total: formatNumber(state.count),
+      current: state.current === null ? "0" : formatNumber(state.current + 1)
+    });
+    $[30] = compiled.kind;
+    $[31] = failure;
+    $[32] = state.count;
+    $[33] = state.current;
+    $[34] = state.large;
+    $[35] = state.limited;
+    $[36] = state.noSelection;
+    $[37] = state.replaceFailed;
+    $[38] = state.replaced;
+    $[39] = state.searching;
+    $[40] = t;
+    $[41] = t13;
+  } else {
+    t13 = $[41];
+  }
+  const label = t13;
+  const t14 = `adecore-editor-find ${className ?? ""}`;
+  let t15;
+  if ($[42] !== t) {
+    t15 = t("find.label");
+    $[42] = t;
+    $[43] = t15;
+  } else {
+    t15 = $[43];
+  }
+  let t16;
+  if ($[44] !== editor || $[45] !== onClose) {
+    t16 = event => {
+      if (event.key === "Escape" && !event.nativeEvent.isComposing) {
+        event.preventDefault();
         editor.endFind();
         editor.setReplacePreview(null);
-    }, [editor]);
-    // The host closes the widget by unmounting it, with the keyboard in it or not; only a keyboard in it is handed back.
-    useLayoutEffect(() => () => {
-        if (root.current?.contains(root.current.ownerDocument.activeElement) === true) {
-            editor.focus();
-        }
-    }, [editor]);
-    const failure = state.failed ?? state.captureFailed;
-    const label = compiled.kind === 'invalid'
-        ? t('find.invalid')
-        : state.replaceFailed !== undefined
-            ? t(`find.replace.failed.${state.replaceFailed}`, {
-                edits: formatNumber(MAX_REPLACEMENT_PAGE),
-                characters: formatNumber(MAX_REPLACEMENT_CHARACTERS)
-            })
-            : failure !== undefined
-                ? t(`find.failed.${failure}`)
-                : state.searching
-                    ? t('find.searching')
-                    : state.large
-                        ? t('find.large')
-                        : state.noSelection
-                            ? t('find.noSelection')
-                            : state.replaced !== undefined
-                                ? t('find.replaced', { count: formatNumber(state.replaced) })
-                                : state.limited && state.current === null
-                                    ? t('find.countMore', { total: formatNumber(state.count) })
-                                    : t(state.limited ? 'find.countLimited' : 'find.count', {
-                                        total: formatNumber(state.count),
-                                        current: state.current === null ? '0' : formatNumber(state.current + 1)
-                                    });
-    return (_jsxs("div", { ref: root, className: `adecore-editor-find ${className ?? ''}`, role: "search", "aria-label": t('find.label'), onKeyDown: (event) => {
-            if (event.key === 'Escape' && !event.nativeEvent.isComposing) {
-                event.preventDefault();
-                editor.endFind();
-                editor.setReplacePreview(null);
-                onClose?.();
-                editor.focus();
-            }
-        }, children: [_jsxs("div", { className: "adecore-editor-find-row", children: [_jsx("input", { type: "text", "aria-label": t('find.label'), value: query.text, onChange: (event) => setQuery({ ...query, text: event.target.value }), onKeyDown: (event) => {
-                            if (event.nativeEvent.isComposing) {
-                                return;
-                            }
-                            if (event.key === 'Enter') {
-                                event.preventDefault();
-                                editor.findStep(event.shiftKey ? -1 : 1);
-                            }
-                        } }), _jsx("output", { "aria-live": "polite", children: label }), _jsx(Button, { size: "xs", onClick: () => editor.findStep(-1), children: t('find.previous') }), _jsx(Button, { size: "xs", onClick: () => editor.findStep(1), children: t('find.next') })] }), _jsx("div", { className: "adecore-editor-find-row", children: ['caseSensitive', 'wholeWord', 'regex', 'inSelection'].map((option) => (_jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: query[option] === true, onChange: (event) => setQuery({ ...query, [option]: event.target.checked }) }), t(`find.${option}`)] }, option))) }), _jsxs("div", { className: "adecore-editor-find-row", children: [_jsx("input", { type: "text", "aria-label": t('find.replace.label'), value: replacement, onChange: (event) => setReplacement(event.target.value) }), _jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: preserveCase, onChange: (event) => setPreserveCase(event.target.checked) }), t('find.replace.preserveCase')] }), _jsx(Button, { size: "xs", disabled: state.searching === true, onClick: () => editor.replace(replacement, { preserveCase }), children: t('find.replace.one') }), _jsx(Button, { size: "xs", disabled: state.searching === true, onClick: () => void editor.replaceAllAsync(replacement, { preserveCase }), children: t('find.replace.allLabel') })] })] }));
-}
+        onClose?.();
+        editor.focus();
+      }
+    };
+    $[44] = editor;
+    $[45] = onClose;
+    $[46] = t16;
+  } else {
+    t16 = $[46];
+  }
+  let t17;
+  if ($[47] !== t) {
+    t17 = t("find.label");
+    $[47] = t;
+    $[48] = t17;
+  } else {
+    t17 = $[48];
+  }
+  let t18;
+  if ($[49] !== query) {
+    t18 = event_0 => setQuery({
+      ...query,
+      text: event_0.target.value
+    });
+    $[49] = query;
+    $[50] = t18;
+  } else {
+    t18 = $[50];
+  }
+  let t19;
+  if ($[51] !== editor) {
+    t19 = event_1 => {
+      if (event_1.nativeEvent.isComposing) {
+        return;
+      }
+      if (event_1.key === "Enter") {
+        event_1.preventDefault();
+        editor.findStep(event_1.shiftKey ? -1 : 1);
+      }
+    };
+    $[51] = editor;
+    $[52] = t19;
+  } else {
+    t19 = $[52];
+  }
+  let t20;
+  if ($[53] !== query.text || $[54] !== t17 || $[55] !== t18 || $[56] !== t19) {
+    t20 = /*#__PURE__*/_jsx("input", {
+      type: "text",
+      "aria-label": t17,
+      value: query.text,
+      onChange: t18,
+      onKeyDown: t19
+    });
+    $[53] = query.text;
+    $[54] = t17;
+    $[55] = t18;
+    $[56] = t19;
+    $[57] = t20;
+  } else {
+    t20 = $[57];
+  }
+  let t21;
+  if ($[58] !== label) {
+    t21 = /*#__PURE__*/_jsx("output", {
+      "aria-live": "polite",
+      children: label
+    });
+    $[58] = label;
+    $[59] = t21;
+  } else {
+    t21 = $[59];
+  }
+  let t22;
+  if ($[60] !== editor) {
+    t22 = () => editor.findStep(-1);
+    $[60] = editor;
+    $[61] = t22;
+  } else {
+    t22 = $[61];
+  }
+  let t23;
+  if ($[62] !== t) {
+    t23 = t("find.previous");
+    $[62] = t;
+    $[63] = t23;
+  } else {
+    t23 = $[63];
+  }
+  let t24;
+  if ($[64] !== t22 || $[65] !== t23) {
+    t24 = /*#__PURE__*/_jsx(Button, {
+      size: "xs",
+      onClick: t22,
+      children: t23
+    });
+    $[64] = t22;
+    $[65] = t23;
+    $[66] = t24;
+  } else {
+    t24 = $[66];
+  }
+  let t25;
+  if ($[67] !== editor) {
+    t25 = () => editor.findStep(1);
+    $[67] = editor;
+    $[68] = t25;
+  } else {
+    t25 = $[68];
+  }
+  let t26;
+  if ($[69] !== t) {
+    t26 = t("find.next");
+    $[69] = t;
+    $[70] = t26;
+  } else {
+    t26 = $[70];
+  }
+  let t27;
+  if ($[71] !== t25 || $[72] !== t26) {
+    t27 = /*#__PURE__*/_jsx(Button, {
+      size: "xs",
+      onClick: t25,
+      children: t26
+    });
+    $[71] = t25;
+    $[72] = t26;
+    $[73] = t27;
+  } else {
+    t27 = $[73];
+  }
+  let t28;
+  if ($[74] !== t20 || $[75] !== t21 || $[76] !== t24 || $[77] !== t27) {
+    t28 = /*#__PURE__*/_jsxs("div", {
+      className: "adecore-editor-find-row",
+      children: [t20, t21, t24, t27]
+    });
+    $[74] = t20;
+    $[75] = t21;
+    $[76] = t24;
+    $[77] = t27;
+    $[78] = t28;
+  } else {
+    t28 = $[78];
+  }
+  let t29;
+  if ($[79] === Symbol.for("react.memo_cache_sentinel")) {
+    t29 = ["caseSensitive", "wholeWord", "regex", "inSelection"];
+    $[79] = t29;
+  } else {
+    t29 = $[79];
+  }
+  let t30;
+  if ($[80] !== query || $[81] !== t) {
+    t30 = /*#__PURE__*/_jsx("div", {
+      className: "adecore-editor-find-row",
+      children: t29.map(option => /*#__PURE__*/_jsxs("label", {
+        children: [/*#__PURE__*/_jsx("input", {
+          type: "checkbox",
+          checked: query[option] === true,
+          onChange: event_2 => setQuery({
+            ...query,
+            [option]: event_2.target.checked
+          })
+        }), t(`find.${option}`)]
+      }, option))
+    });
+    $[80] = query;
+    $[81] = t;
+    $[82] = t30;
+  } else {
+    t30 = $[82];
+  }
+  let t31;
+  if ($[83] !== t) {
+    t31 = t("find.replace.label");
+    $[83] = t;
+    $[84] = t31;
+  } else {
+    t31 = $[84];
+  }
+  let t32;
+  if ($[85] === Symbol.for("react.memo_cache_sentinel")) {
+    t32 = event_3 => setReplacement(event_3.target.value);
+    $[85] = t32;
+  } else {
+    t32 = $[85];
+  }
+  let t33;
+  if ($[86] !== replacement || $[87] !== t31) {
+    t33 = /*#__PURE__*/_jsx("input", {
+      type: "text",
+      "aria-label": t31,
+      value: replacement,
+      onChange: t32
+    });
+    $[86] = replacement;
+    $[87] = t31;
+    $[88] = t33;
+  } else {
+    t33 = $[88];
+  }
+  let t34;
+  if ($[89] === Symbol.for("react.memo_cache_sentinel")) {
+    t34 = event_4 => setPreserveCase(event_4.target.checked);
+    $[89] = t34;
+  } else {
+    t34 = $[89];
+  }
+  let t35;
+  if ($[90] !== preserveCase) {
+    t35 = /*#__PURE__*/_jsx("input", {
+      type: "checkbox",
+      checked: preserveCase,
+      onChange: t34
+    });
+    $[90] = preserveCase;
+    $[91] = t35;
+  } else {
+    t35 = $[91];
+  }
+  let t36;
+  if ($[92] !== t) {
+    t36 = t("find.replace.preserveCase");
+    $[92] = t;
+    $[93] = t36;
+  } else {
+    t36 = $[93];
+  }
+  let t37;
+  if ($[94] !== t35 || $[95] !== t36) {
+    t37 = /*#__PURE__*/_jsxs("label", {
+      children: [t35, t36]
+    });
+    $[94] = t35;
+    $[95] = t36;
+    $[96] = t37;
+  } else {
+    t37 = $[96];
+  }
+  const t38 = state.searching === true;
+  let t39;
+  if ($[97] !== editor || $[98] !== preserveCase || $[99] !== replacement) {
+    t39 = () => editor.replace(replacement, {
+      preserveCase
+    });
+    $[97] = editor;
+    $[98] = preserveCase;
+    $[99] = replacement;
+    $[100] = t39;
+  } else {
+    t39 = $[100];
+  }
+  let t40;
+  if ($[101] !== t) {
+    t40 = t("find.replace.one");
+    $[101] = t;
+    $[102] = t40;
+  } else {
+    t40 = $[102];
+  }
+  let t41;
+  if ($[103] !== t38 || $[104] !== t39 || $[105] !== t40) {
+    t41 = /*#__PURE__*/_jsx(Button, {
+      size: "xs",
+      disabled: t38,
+      onClick: t39,
+      children: t40
+    });
+    $[103] = t38;
+    $[104] = t39;
+    $[105] = t40;
+    $[106] = t41;
+  } else {
+    t41 = $[106];
+  }
+  const t42 = state.searching === true;
+  let t43;
+  if ($[107] !== editor || $[108] !== preserveCase || $[109] !== replacement) {
+    t43 = () => void editor.replaceAllAsync(replacement, {
+      preserveCase
+    });
+    $[107] = editor;
+    $[108] = preserveCase;
+    $[109] = replacement;
+    $[110] = t43;
+  } else {
+    t43 = $[110];
+  }
+  let t44;
+  if ($[111] !== t) {
+    t44 = t("find.replace.allLabel");
+    $[111] = t;
+    $[112] = t44;
+  } else {
+    t44 = $[112];
+  }
+  let t45;
+  if ($[113] !== t42 || $[114] !== t43 || $[115] !== t44) {
+    t45 = /*#__PURE__*/_jsx(Button, {
+      size: "xs",
+      disabled: t42,
+      onClick: t43,
+      children: t44
+    });
+    $[113] = t42;
+    $[114] = t43;
+    $[115] = t44;
+    $[116] = t45;
+  } else {
+    t45 = $[116];
+  }
+  let t46;
+  if ($[117] !== t33 || $[118] !== t37 || $[119] !== t41 || $[120] !== t45) {
+    t46 = /*#__PURE__*/_jsxs("div", {
+      className: "adecore-editor-find-row",
+      children: [t33, t37, t41, t45]
+    });
+    $[117] = t33;
+    $[118] = t37;
+    $[119] = t41;
+    $[120] = t45;
+    $[121] = t46;
+  } else {
+    t46 = $[121];
+  }
+  let t47;
+  if ($[122] !== t14 || $[123] !== t15 || $[124] !== t16 || $[125] !== t28 || $[126] !== t30 || $[127] !== t46) {
+    t47 = /*#__PURE__*/_jsxs("div", {
+      ref: root,
+      className: t14,
+      role: "search",
+      "aria-label": t15,
+      onKeyDown: t16,
+      children: [t28, t30, t46]
+    });
+    $[122] = t14;
+    $[123] = t15;
+    $[124] = t16;
+    $[125] = t28;
+    $[126] = t30;
+    $[127] = t46;
+    $[128] = t47;
+  } else {
+    t47 = $[128];
+  }
+  return t47;
+}