weifuwu 0.40.0 → 0.50.0

package/dist/components/index.js

@@ -96,7 +96,7 @@ var Textarea = (_init, _ctx) => (props) => {
 };
 
 // src/components/Select/Select.ts
-var Select = (_init, _ctx) => (props) => {
+var SelectNative = (_init, _ctx) => (props) => {
   const { label, value, options, placeholder, required, disabled, error, onChange, children } = props;
   const optionEls = [];
   if (placeholder) {
@@ -112,7 +112,7 @@ var Select = (_init, _ctx) => (props) => {
     value: value ?? "",
     required: required || void 0,
     disabled: disabled || void 0,
-    onChange
+    onChange: (e) => onChange?.(e.target.value)
   }, children ?? optionEls);
   const wrapChildren = [];
   if (label) {
@@ -124,6 +124,82 @@ var Select = (_init, _ctx) => (props) => {
   if (error) wrapChildren.push(h("div", { class: "wf-select-err" }, error));
   return h("div", { class: `wf-select-wrap${error ? " wf-select--err" : ""}` }, wrapChildren);
 };
+var SelectSearchable = (_init, ctx) => {
+  const $ = ctx.ui.$();
+  $.open = false;
+  $.keyword = "";
+  $.filteredOptions = [];
+  return (props) => {
+    const { label, value, options = [], placeholder, required, disabled, error, onChange, onSearch } = props;
+    const filtered = $.keyword ? options.filter((o) => o.label.toLowerCase().includes($.keyword.toLowerCase())) : options;
+    const selectedOption = options.find((o) => o.value === value);
+    const handleInput = async (keyword) => {
+      $.keyword = keyword;
+      $.open = true;
+      if (onSearch && keyword) {
+        const result = await onSearch(keyword);
+        if (result) $.filteredOptions = result;
+      }
+    };
+    const handleSelect = (opt) => {
+      if (opt.disabled) return;
+      $.keyword = "";
+      $.open = false;
+      onChange?.(opt.value);
+    };
+    const trigger = h("div", {
+      class: `wf-select-search-trigger${disabled ? " wf-select-search--disabled" : ""}${error ? " wf-select--err" : ""}`,
+      onClick: disabled ? void 0 : () => {
+        $.open = !$.open;
+      }
+    }, [
+      h("input", {
+        class: "wf-select-search-input",
+        type: "text",
+        value: $.open ? $.keyword : selectedOption?.label ?? "",
+        placeholder: selectedOption ? void 0 : placeholder ?? "",
+        disabled,
+        readOnly: !$.open || void 0,
+        onInput: (e) => handleInput(e.target.value),
+        onFocus: () => {
+          if (!disabled) $.open = true;
+        },
+        onBlur: () => {
+          setTimeout(() => {
+            $.open = false;
+            $.keyword = "";
+          }, 150);
+        }
+      })
+    ]);
+    const wrapChildren = [];
+    if (label) {
+      const labelContent = [label];
+      if (required) labelContent.push(h("span", { class: "wf-select-req" }, "*"));
+      wrapChildren.push(h("label", { class: "wf-select-label" }, labelContent));
+    }
+    const displayOptions = $.keyword && onSearch && $.filteredOptions.length > 0 ? $.filteredOptions : filtered;
+    const menuChildren = displayOptions.length > 0 ? displayOptions.map(
+      (opt) => h("div", {
+        class: `wf-select-search-opt${opt.value === value ? " wf-select-search-opt--sel" : ""}${opt.disabled ? " wf-select-search-opt--dis" : ""}`,
+        key: opt.value,
+        onMouseDown: (e) => {
+          e.preventDefault();
+          handleSelect(opt);
+        }
+      }, opt.label)
+    ) : $.keyword ? [h("div", { class: "wf-select-search-empty" }, "\u65E0\u5339\u914D")] : [];
+    const menu = $.open ? h("div", { class: "wf-select-search-menu" }, menuChildren) : null;
+    wrapChildren.push(h("div", { class: "wf-select-search" }, [trigger, menu].filter(Boolean)));
+    if (error) wrapChildren.push(h("div", { class: "wf-select-err" }, error));
+    return h("div", { class: `wf-select-wrap${error ? " wf-select--err" : ""}` }, wrapChildren);
+  };
+};
+var Select = (_init, ctx) => {
+  const nativeRender = SelectNative(_init, ctx);
+  const searchableRender = SelectSearchable(_init, ctx);
+  return (props) => props.searchable ? searchableRender(props) : nativeRender(props);
+};
 
 // src/components/Checkbox/Checkbox.ts
 var Checkbox = (_init, _ctx) => (props) => {
@@ -192,31 +268,62 @@ var RadioGroup = (_init, _ctx) => (props) => {
 };
 
 // src/components/Table/Table.ts
+function sortData(data, columns, sortKey, sortOrder) {
+  if (!sortKey || !sortOrder) return data;
+  const col = columns.find((c) => c.key === sortKey);
+  if (!col || !col.sortable) return data;
+  const sorted = [...data];
+  sorted.sort((a, b) => {
+    const va = a[sortKey];
+    const vb = b[sortKey];
+    const result = col.sorter ? col.sorter(va, vb) : String(va ?? "").localeCompare(String(vb ?? ""));
+    return sortOrder === "desc" ? -result : result;
+  });
+  return sorted;
+}
 var Table = (_init, _ctx) => (props) => {
-  const { data = [], columns, onRowClick } = props;
-  const headerCells = columns.map(
-    (col) => h("th", {
-      class: "wf-table-th",
+  const { data = [], columns, onRowClick, sortKey, sortOrder, onSort, emptyText } = props;
+  const sortedData = sortData(data, columns, sortKey, sortOrder);
+  const headerCells = columns.map((col) => {
+    const isSorted = col.key === sortKey && sortOrder;
+    const isAsc = sortOrder === "asc";
+    let label = col.label;
+    if (col.sortable) {
+      label += isSorted ? isAsc ? " \u25B2" : " \u25BC" : " \u21C5";
+    }
+    return h("th", {
+      class: `wf-table-th${col.sortable ? " wf-table-th--sortable" : ""}${isSorted ? " wf-table-th--sorted" : ""}`,
       scope: "col",
-      style: col.width ? { width: col.width } : void 0
-    }, col.label)
-  );
+      style: col.width ? { width: col.width } : void 0,
+      onClick: col.sortable && onSort ? () => onSort(col.key, isSorted && isAsc ? "desc" : "asc") : void 0
+    }, label);
+  });
   const headerRow = h("tr", { class: "wf-table-tr" }, headerCells);
   const thead = h("thead", { class: "wf-table-thead" }, headerRow);
-  const bodyRows = data.map((row, i) => {
-    const cells = columns.map((col) => {
-      const val = row[col.key];
-      const content = col.render ? col.render(val, row, i) : String(val ?? "");
-      return h("td", { class: "wf-table-td" }, content);
+  let bodyRows;
+  if (sortedData.length === 0 && emptyText) {
+    const colspan = columns.length;
+    bodyRows = [
+      h(
+        "tr",
+        { class: "wf-table-tr" },
+        h("td", { class: "wf-table-td wf-table-empty", colspan, style: { textAlign: "center" } }, emptyText)
+      )
+    ];
+  } else {
+    bodyRows = sortedData.map((row, i) => {
+      const cells = columns.map((col) => {
+        const val = row[col.key];
+        const content = col.render ? col.render(val, row, i) : String(val ?? "");
+        return h("td", { class: "wf-table-td" }, content);
+      });
+      return h("tr", {
+        class: "wf-table-tr",
+        onClick: onRowClick ? () => onRowClick(row, i) : void 0,
+        style: onRowClick ? { cursor: "pointer" } : void 0
+      }, cells);
     });
-    return h("tr", {
-      class: "wf-table-tr",
-      onClick: onRowClick ? (e) => {
-        onRowClick(row, i);
-      } : void 0,
-      style: onRowClick ? { cursor: "pointer" } : void 0
-    }, cells);
-  });
+  }
   const tbody = h("tbody", { class: "wf-table-tbody" }, bodyRows);
   return h("table", { class: "wf-table" }, [thead, tbody]);
 };
@@ -291,16 +398,19 @@ function trapFocus(container) {
 // src/components/Modal/Modal.ts
 var Modal = (_props, ctx) => {
   let prevOpen;
-  ctx.ui.onmounted((el) => {
-    lockScroll();
-    const cleanupFocus = trapFocus(el);
-    return () => {
+  let focusCleanup;
+  const rootRef = (el) => {
+    if (el) {
+      lockScroll();
+      const modalEl = el.querySelector(".wf-modal") ?? el;
+      focusCleanup = trapFocus(modalEl);
+    } else {
       unlockScroll();
-      cleanupFocus();
-    };
-  });
+      focusCleanup?.();
+    }
+  };
   return (props) => {
-    const { open, title, onClose, children, footer } = props;
+    const { open, title, onClose, children, footer, width, closable = true } = props;
     const ML = ctx?.i18n?.components?.Modal ?? {};
     if (prevOpen !== open) {
       prevOpen = open;
@@ -310,19 +420,21 @@ var Modal = (_props, ctx) => {
       class: "wf-modal-overlay",
       onClick: onClose
     });
-    const closeBtn = h("button", {
+    const closeBtn = closable ? h("button", {
       class: "wf-modal-close",
       onClick: onClose,
       type: "button"
-    }, "\u2715");
-    const titleEl = title ? h("div", { class: "wf-modal-header" }, [title, closeBtn]) : null;
+    }, "\u2715") : null;
+    const titleEl = title ? h("div", { class: "wf-modal-header" }, [title, closeBtn].filter(Boolean)) : null;
     const bodyEl = h("div", { class: "wf-modal-body" }, children);
     const footerEl = footer ? h("div", { class: "wf-modal-footer" }, footer) : null;
     const content = h("div", {
       class: "wf-modal-content",
-      onClick: (e) => e.stopPropagation()
+      onClick: (e) => e.stopPropagation(),
+      style: width ? { minWidth: width, maxWidth: width } : void 0
     }, [titleEl, bodyEl, footerEl].filter(Boolean));
     const root = h("div", {
+      ref: rootRef,
       class: "wf-modal wf-modal--enter",
       role: "dialog",
       "aria-modal": "true",
@@ -333,13 +445,25 @@ var Modal = (_props, ctx) => {
 };
 
 // src/components/Toast/Toast.ts
+function positionClass(pos) {
+  const map = {
+    "top-right": "wf-toast--tr",
+    "top-left": "wf-toast--tl",
+    "bottom-right": "wf-toast--br",
+    "bottom-left": "wf-toast--bl",
+    "top-center": "wf-toast--tc"
+  };
+  return map[pos] ?? "wf-toast--tr";
+}
 var Toast = (_init, ctx) => (props) => {
-  const { toasts = [], onRemove } = props;
-  if (toasts.length === 0) return null;
-  const items = toasts.map(
+  const { toasts = [], onRemove, position = "top-right", duration = 0, max = 0 } = props;
+  const visible = max > 0 && toasts.length > max ? toasts.slice(-max) : toasts;
+  if (visible.length === 0) return null;
+  const items = visible.map(
     (t) => h("div", {
       class: `wf-toast wf-toast--${t.type}`,
       key: t.id,
+      "data-duration": (t.duration ?? duration) || void 0,
       onClick: onRemove ? () => onRemove(t.id) : void 0
     }, [
       h("span", { class: "wf-toast-icon" }, iconFor(t.type)),
@@ -347,7 +471,10 @@ var Toast = (_init, ctx) => (props) => {
     ])
   );
   return createPortal(
-    h("div", { class: "wf-toast-container" }, items),
+    h("div", {
+      class: `wf-toast-container ${positionClass(position)}`,
+      "data-max": max || void 0
+    }, items),
     "toast"
   );
 };
@@ -431,10 +558,7 @@ var Tabs = (_init, _ctx) => (props) => {
 
 // src/components/Dropdown/Dropdown.ts
 var Dropdown = (_init, ctx) => {
-  let wrapEl;
-  ctx.ui.onmounted((el) => {
-    wrapEl = el;
-  });
+  let wrapEl = null;
   return (props) => {
     const { trigger, items = [], open } = props;
     const pos = (() => {
@@ -459,7 +583,10 @@ var Dropdown = (_init, ctx) => {
     }, menuItems) : null;
     const portalContent = open ? createPortal(menu, "dropdown") : null;
     return h("div", {
-      class: `wf-dropdown${open ? " wf-dropdown--open" : ""}`
+      class: `wf-dropdown${open ? " wf-dropdown--open" : ""}`,
+      ref: (el) => {
+        wrapEl = el;
+      }
     }, [trigger, portalContent].filter(Boolean));
   };
 };
@@ -607,15 +734,67 @@ var Steps = (_init, _ctx) => (props) => {
 };
 
 // src/components/Form/Form.ts
+async function validateValues(values, rules) {
+  const errors = {};
+  for (const [field, fieldRules] of Object.entries(rules)) {
+    const val = values[field] ?? "";
+    for (const rule of fieldRules) {
+      if (rule.required && !String(val).trim()) {
+        errors[field] = rule.message;
+        break;
+      }
+      if (rule.pattern && !rule.pattern.test(String(val))) {
+        errors[field] = rule.message;
+        break;
+      }
+      if (rule.minLength != null && String(val).length < rule.minLength) {
+        errors[field] = rule.message;
+        break;
+      }
+      if (rule.maxLength != null && String(val).length > rule.maxLength) {
+        errors[field] = rule.message;
+        break;
+      }
+      if (rule.validator) {
+        const result = await rule.validator(val);
+        if (result !== true) {
+          errors[field] = typeof result === "string" ? result : rule.message;
+          break;
+        }
+      }
+    }
+  }
+  return errors;
+}
 var Form = (_init, _ctx) => (props) => {
-  const { onSubmit, children } = props;
-  const handleSubmit = (e) => {
+  const { validation, onSubmit, onError, children } = props;
+  const handleSubmit = async (e) => {
     e.preventDefault();
-    onSubmit?.();
+    const form = e.target;
+    const data = new FormData(form);
+    const values = {};
+    for (const [key, val] of data.entries()) {
+      if (key in values) {
+        const prev = values[key];
+        values[key] = Array.isArray(prev) ? [...prev, val] : [prev, val];
+      } else {
+        values[key] = val;
+      }
+    }
+    if (validation) {
+      const errors = await validateValues(values, validation);
+      if (Object.keys(errors).length > 0) {
+        onError?.(errors);
+        return;
+      }
+      onError?.({});
+    }
+    await onSubmit?.(values);
   };
   return h("form", {
     class: "wf-form",
-    onSubmit: handleSubmit
+    onSubmit: handleSubmit,
+    noValidate: validation ? true : void 0
   }, children);
 };
 
@@ -807,6 +986,7 @@ var FileUpload = (_init, ctx) => {
       const updated = files.filter((_, idx) => idx !== i);
       onChange?.(updated);
     };
+    let fileInput = null;
     const inputEl = h("input", {
       type: "file",
       class: "wf-upload-input",
@@ -814,14 +994,14 @@ var FileUpload = (_init, ctx) => {
       multiple: multiple || void 0,
       disabled: disabled || void 0,
       onChange: handleChange,
-      style: { display: "none" }
+      style: { display: "none" },
+      ref: (el) => {
+        fileInput = el;
+      }
     });
     const dropZone = h("div", {
       class: `wf-upload-zone${disabled ? " wf-upload-zone--disabled" : ""}${error ? " wf-upload-zone--err" : ""}`,
-      onClick: disabled ? void 0 : () => {
-        const input = document.querySelector(".wf-upload-input");
-        input?.click();
-      },
+      onClick: disabled ? void 0 : () => fileInput?.click(),
       ref: dragRef
     }, children ?? h("div", { class: "wf-upload-placeholder" }, [
       h("span", { class: "wf-upload-icon" }, "\u{1F4C1}"),
@@ -917,14 +1097,17 @@ var Tooltip = (_props, ctx) => {
 // src/components/Drawer/Drawer.ts
 var Drawer = (_props, ctx) => {
   let prevOpen;
-  ctx.ui.onmounted((el) => {
-    lockScroll();
-    const cleanupFocus = trapFocus(el);
-    return () => {
+  let focusCleanup;
+  const rootRef = (el) => {
+    if (el) {
+      lockScroll();
+      const panelEl = el.querySelector(".wf-drawer") ?? el;
+      focusCleanup = trapFocus(panelEl);
+    } else {
       unlockScroll();
-      cleanupFocus();
-    };
-  });
+      focusCleanup?.();
+    }
+  };
   return (props) => {
     const { open, title, position = "right", onClose, children, footer } = props;
     const DL = ctx?.i18n?.components?.Drawer ?? {};
@@ -950,10 +1133,15 @@ var Drawer = (_props, ctx) => {
       onClick: (e) => e.stopPropagation()
     }, [titleEl, bodyEl, footerEl].filter(Boolean));
     const root = h("div", {
+      ref: rootRef,
       class: `wf-drawer wf-drawer--${position} wf-drawer--enter`,
       role: "dialog",
       "aria-modal": "true",
-      "aria-label": title ?? (DL.ariaLabel ?? "\u4FA7\u8FB9\u9762\u677F")
+      "aria-label": title ?? (DL.ariaLabel ?? "\u4FA7\u8FB9\u9762\u677F"),
+      tabIndex: -1,
+      onKeyDown: (e) => {
+        if (e.key === "Escape") onClose?.();
+      }
     }, [overlay, panel]);
     return createPortal(root, "drawer");
   };
@@ -975,7 +1163,6 @@ var Popover = (_props, ctx) => {
     };
     const updatePos = (e) => {
       pos = computeFixedPos(e.currentTarget, position, 6, true);
-      ctx.ui.render();
     };
     const onClick = trigger === "click" && !disabled ? (e) => {
       updatePos(e);
@@ -1003,7 +1190,7 @@ var Popover = (_props, ctx) => {
       }
     }) : null;
     const popover = isOpen ? h("div", {
-      class: "wf-popover wf-popover--enter",
+      class: `wf-popover wf-popover--${position} wf-popover--enter`,
       style: { top: p.top, left: p.left },
       role: "tooltip"
     }, [
@@ -1030,6 +1217,20 @@ var Skeleton = (_init) => (props) => {
     `wf-skeleton--${variant}`,
     className
   ].filter(Boolean).join(" ");
+  if (variant === "table") {
+    const cols = props.cols ?? 3;
+    const rows = Array.from({ length: lines }, (_, r) => {
+      const cells = Array.from({ length: cols }, (_2, c) => {
+        const cellW = r === lines - 1 && c === cols - 1 ? "40%" : void 0;
+        return h("div", {
+          class: "wf-skeleton wf-skeleton--text",
+          style: cellW ? { width: cellW } : void 0
+        });
+      });
+      return h("div", { class: "wf-skeleton-row" }, cells);
+    });
+    return h("div", { class: "wf-skeleton-table" }, rows);
+  }
   if (lines <= 1) {
     return h("div", { class: cls, style: Object.keys(style).length ? style : void 0 });
   }
@@ -1066,20 +1267,19 @@ var InView = (_props, ctx) => {
   let inView = false;
   let entered = false;
   let io;
-  ctx.ui.onmounted((el) => {
-    const sentinel = el.querySelector(".wf-inview-pending");
-    if (!sentinel) return;
-    io = new IntersectionObserver((entries) => {
-      if (entries[0]?.isIntersecting) {
-        inView = true;
-        ctx.ui.render();
-      }
-    }, { threshold: _props.threshold ?? 0, rootMargin: _props.rootMargin ?? "0px" });
-    io.observe(sentinel);
-    return () => {
+  const sentinelRef = (el) => {
+    if (el) {
+      io = new IntersectionObserver((entries) => {
+        if (entries[0]?.isIntersecting) {
+          inView = true;
+          ctx.ui.render();
+        }
+      }, { threshold: _props.threshold ?? 0, rootMargin: _props.rootMargin ?? "0px" });
+      io.observe(el);
+    } else {
       io?.disconnect();
-    };
-  });
+    }
+  };
   return (props) => {
     if (inView) {
       if (!entered) {
@@ -1094,7 +1294,11 @@ var InView = (_props, ctx) => {
     return h("div", {
       class: "wf-inview wf-inview--pending"
     }, [
-      h("div", { class: "wf-inview-pending", style: { width: "1px", height: "1px", opacity: 0, pointerEvents: "none" } }),
+      h("div", {
+        class: "wf-inview-pending",
+        style: { width: "1px", height: "1px", opacity: 0, pointerEvents: "none" },
+        ref: sentinelRef
+      }),
       placeholderEl
     ]);
   };
@@ -1192,10 +1396,7 @@ var DatePicker = (_props, ctx) => {
   let selDay = now.getDate();
   let rangeStart = null;
   let rangeEnd = null;
-  let inputEl;
-  ctx.ui.onmounted((el) => {
-    inputEl = el.querySelector(".wf-datepicker-input");
-  });
+  let inputEl = null;
   return (props) => {
     const { mode = "date", value, onChange, placeholder = L.placeholder ?? "\u9009\u62E9\u65E5\u671F", disabled } = props;
     const isOpen = show;
@@ -1455,6 +1656,9 @@ var DatePicker = (_props, ctx) => {
         type: "text",
         placeholder,
         value: displayValue || "",
+        ref: (el) => {
+          inputEl = el;
+        },
         readonly: true,
         disabled,
         onClick: toggle
@@ -2011,7 +2215,21 @@ var Editor = (_props, ctx) => {
   let tableHoverRow = -1;
   let tableHoverCol = -1;
   let sourceText = "";
-  let editorEl;
+  let editorEl = null;
+  let savedRange = null;
+  const saveSelection = () => {
+    const sel = window.getSelection();
+    if (sel && sel.rangeCount > 0) savedRange = sel.getRangeAt(0);
+  };
+  const restoreSelection = () => {
+    if (!editorEl || !savedRange) return;
+    editorEl.focus();
+    const sel = window.getSelection();
+    if (sel) {
+      sel.removeAllRanges();
+      sel.addRange(savedRange);
+    }
+  };
   return (props) => {
     const { value = "", onChange, onUpload, placeholder = "", disabled = false, minHeight = "200px" } = props;
     const toolbarItems = props.toolbar ?? DEFAULT_TOOLBAR;
@@ -2042,6 +2260,7 @@ var Editor = (_props, ctx) => {
         return;
       }
       if (item === "link") {
+        saveSelection();
         const sel = window.getSelection();
         if (!sel || sel.isCollapsed) {
           showLinkInput = true;
@@ -2070,7 +2289,7 @@ var Editor = (_props, ctx) => {
       showLinkInput = false;
       ctx.ui.render();
       if (!url) return;
-      if (editorEl) editorEl.focus();
+      editorEl?.focus();
       exec("createLink", url);
       activeFormats = queryFormats();
       if (editorEl && onChange) emitChange(editorEl.innerHTML);
@@ -2107,7 +2326,7 @@ var Editor = (_props, ctx) => {
       showImageInput = false;
       imageUrl = "";
       ctx.ui.render();
-      if (editorEl) editorEl.focus();
+      editorEl?.focus();
       insertImageFn(url);
     };
     const cancelImage = () => {
@@ -2120,7 +2339,7 @@ var Editor = (_props, ctx) => {
       tableHoverRow = -1;
       tableHoverCol = -1;
       ctx.ui.render();
-      if (editorEl) editorEl.focus();
+      restoreSelection();
       insertTable(rows, cols);
       if (editorEl && onChange) emitChange(editorEl.innerHTML);
     };
@@ -2166,14 +2385,9 @@ var Editor = (_props, ctx) => {
       const val = e.target.value;
       onChange?.(val);
     };
-    const editorRef = (el) => {
-      if (el) editorEl = el;
-      return () => {
-        editorEl = void 0;
-      };
-    };
     const handleKeyUp = (e) => {
       if (disabled || !isRichMode) return;
+      saveSelection();
       const isFormatShortcut = (e.ctrlKey || e.metaKey) && ["b", "i", "u"].includes(e.key.toLowerCase());
       if (isFormatShortcut) {
         activeFormats = queryFormats();
@@ -2183,6 +2397,7 @@ var Editor = (_props, ctx) => {
     };
     const handleMouseUp = () => {
       if (!isRichMode) return;
+      saveSelection();
       activeFormats = queryFormats();
       ctx.ui.render();
     };
@@ -2209,10 +2424,7 @@ var Editor = (_props, ctx) => {
           h("button", {
             class: "wf-btn wf-btn--primary wf-btn--sm",
             type: "button",
-            onClick: () => {
-              const input = document.querySelector("[data-editor-link-input]");
-              confirmLink(input?.value ?? "");
-            }
+            onClick: () => confirmLink(linkUrl)
           }, "\u786E\u5B9A")
         ]
       },
@@ -2273,10 +2485,7 @@ var Editor = (_props, ctx) => {
             class: "wf-btn wf-btn--primary wf-btn--sm",
             type: "button",
             disabled: imageUploading || void 0,
-            onClick: () => {
-              const input = document.querySelector("[data-image-input]");
-              confirmImageUrl(input?.value ?? "");
-            }
+            onClick: () => confirmImageUrl(imageUrl)
           }, onUpload ? "\u63D2\u5165" : "\u786E\u5B9A")
         ]
       },
@@ -2299,7 +2508,9 @@ var Editor = (_props, ctx) => {
         onKeyUp: handleKeyUp,
         onMouseUp: handleMouseUp,
         onMouseDown: handleMouseDown,
-        ref: editorRef
+        ref: (el) => {
+          editorEl = el;
+        }
       });
     } else {
       editorBody = h("textarea", {
@@ -2317,9 +2528,9 @@ var Editor = (_props, ctx) => {
       class: `wf-editor${disabled ? " wf-editor--disabled" : ""}`
     }, [
       !disabled && toolbarItems.length > 0 ? renderToolbar(toolbarItems, activeFormats, !isRichMode, handleToolbarItem, customRender) : null,
+      editorBody,
       linkModal,
       imageModal,
-      editorBody,
       h("input", { type: "hidden", value, "aria-hidden": "true" })
     ]);
   };