@ant-design/agentic-ui 2.0.0

package/dist/MarkdownEditor/editor/tools/InsertAutocomplete.js

@@ -0,0 +1,811 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/MarkdownEditor/editor/tools/InsertAutocomplete.tsx
+import {
+  CheckSquareOutlined,
+  CodeOutlined,
+  FontSizeOutlined,
+  OrderedListOutlined,
+  PlayCircleOutlined,
+  TableOutlined,
+  UnorderedListOutlined
+} from "@ant-design/icons";
+import { Button, ConfigProvider, Input, Menu, Tabs } from "antd";
+import classNames from "classnames";
+import isHotkey from "is-hotkey";
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef
+} from "react";
+import ReactDOM from "react-dom";
+import { Editor, Element, Node, Transforms } from "slate";
+import { ReactEditor } from "slate-react";
+import { I18nContext } from "../../../i18n";
+import { useSubject } from "../../hooks/subscribe";
+import { selChange$ } from "../plugins/useOnchange";
+import { useEditorStore } from "../store";
+import { getOffsetLeft } from "../utils/dom";
+import { EditorUtils } from "../utils/editorUtils";
+import { getRemoteMediaType } from "../utils/media";
+import { useLocalState } from "../utils/useLocalState";
+import { useStyle } from "./insertAutocompleteStyle";
+var ImageIcon = () => {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      className: "ant-menu-item-icon",
+      viewBox: "0 0 1024 1024",
+      version: "1.1",
+      width: "1em",
+      height: "1em"
+    },
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        fill: "currentColor",
+        d: "M0 128l0 768 1024 0L1024 128 0 128zM944 816 80 816 80 208l864 0L944 816zM704 368c0 53.024 42.976 96 96 96 53.024 0 96-42.976 96-96 0-53.024-42.976-96-96-96C746.976 272 704 314.976 704 368M888 760l-192-288-128 96-240-304-192 496L888 760z"
+      }
+    )
+  );
+};
+var Quote = () => {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      className: "ant-menu-item-icon",
+      viewBox: "0 0 1024 1024",
+      version: "1.1",
+      width: "1em",
+      height: "1em"
+    },
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d: "M128 472.896h341.344v341.344H128zM128 472.896L272.096 192h110.08l-144.128 280.896z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d: "M544 472.896h341.344v341.344H544zM544 472.896L688.096 192h110.08l-144.128 280.896z",
+        fill: "currentColor"
+      }
+    )
+  );
+};
+var replaceUrl = [
+  {
+    reg: /https?:\/\/youtu.be\/([\w-]+)(\?si=\w+)?/i,
+    replace: (match) => {
+      return `https://www.youtube.com/embed/${match[1]}${match[2] || ""}`;
+    }
+  },
+  {
+    reg: /https?:\/\/www.bilibili.com\/video\/([\w-]+)\/?/,
+    replace: (match) => {
+      return `https://player.bilibili.com/player.html?isOutside=true&bvid=${match[1]}`;
+    }
+  },
+  {
+    reg: /src=["']([^"\n]+)["']/i,
+    replace: (match) => {
+      return match[1];
+    }
+  }
+];
+var getInsertOptions = (ctx, locale) => {
+  const options = [
+    {
+      label: ["元素", "Elements"],
+      key: "element",
+      children: [
+        {
+          label: [(locale == null ? void 0 : locale.table) || "表格"],
+          key: "table",
+          task: "insertTable",
+          icon: /* @__PURE__ */ React.createElement(TableOutlined, null)
+        },
+        {
+          label: [(locale == null ? void 0 : locale.quote) || "引用"],
+          key: "quote",
+          task: "insertQuote",
+          icon: /* @__PURE__ */ React.createElement(Quote, null)
+        },
+        {
+          label: [(locale == null ? void 0 : locale.code) || "代码"],
+          key: "code",
+          task: "insertCode",
+          icon: /* @__PURE__ */ React.createElement(CodeOutlined, null)
+        }
+      ]
+    },
+    {
+      label: ["媒体", "media"],
+      key: "media",
+      children: [
+        {
+          label: [(locale == null ? void 0 : locale.localeImage) || "本地图片"],
+          task: "uploadImage",
+          key: "localeImage",
+          args: ["", true],
+          icon: /* @__PURE__ */ React.createElement(ImageIcon, null)
+        }
+      ]
+    },
+    {
+      label: ["列表", "List"],
+      key: "list",
+      children: [
+        {
+          label: [locale["b-list"] || "无序列表"],
+          task: "list",
+          key: "b-list",
+          args: ["unordered"],
+          icon: /* @__PURE__ */ React.createElement(UnorderedListOutlined, null)
+        },
+        {
+          label: [locale["n-list"] || "有序列表"],
+          task: "list",
+          key: "n-list",
+          args: ["ordered"],
+          icon: /* @__PURE__ */ React.createElement(OrderedListOutlined, null)
+        },
+        {
+          label: [locale["t-list"] || "任务列表"],
+          task: "list",
+          key: "t-list",
+          args: ["task"],
+          icon: /* @__PURE__ */ React.createElement(CheckSquareOutlined, null)
+        }
+      ]
+    }
+  ];
+  if (ctx.isTop) {
+    options.splice(2, 0, {
+      label: ["标题", "Heading"],
+      key: "head",
+      children: [
+        {
+          label: [(locale == null ? void 0 : locale.head1) || "主标题"],
+          task: "head",
+          key: "head1",
+          args: [1],
+          icon: /* @__PURE__ */ React.createElement(FontSizeOutlined, null)
+        },
+        {
+          label: [(locale == null ? void 0 : locale.head2) || "段标题"],
+          task: "head",
+          key: "head2",
+          icon: /* @__PURE__ */ React.createElement(FontSizeOutlined, null),
+          args: [2]
+        },
+        {
+          label: [(locale == null ? void 0 : locale.head3) || "小标题"],
+          task: "head",
+          key: "head3",
+          icon: /* @__PURE__ */ React.createElement(FontSizeOutlined, null),
+          args: [3]
+        }
+      ]
+    });
+  }
+  return options;
+};
+var InsertAutocomplete = (props) => {
+  var _a;
+  const {
+    markdownEditorRef,
+    markdownContainerRef,
+    openInsertCompletion,
+    setOpenInsertCompletion,
+    keyTask$,
+    insertCompletionText$
+  } = useEditorStore();
+  const dom = useRef(null);
+  const ctx = useRef({ path: [], isTop: true });
+  const [state, setState] = useLocalState({
+    index: 0,
+    filterOptions: [],
+    options: [],
+    left: 0,
+    insertLink: false,
+    insertAttachment: false,
+    loading: false,
+    insertUrl: "",
+    top: 0,
+    bottom: 0,
+    text: ""
+  });
+  const clickClose = useCallback((e) => {
+    var _a2;
+    if (!((_a2 = dom.current) == null ? void 0 : _a2.contains(e.target))) {
+      close();
+    }
+  }, []);
+  const close = useCallback(() => {
+    setState({
+      filterOptions: [],
+      options: [],
+      index: 0,
+      text: "",
+      insertLink: false,
+      insertAttachment: false,
+      insertUrl: ""
+    });
+    if (typeof window === "undefined")
+      return;
+    window.removeEventListener("click", clickClose);
+  }, []);
+  const runInsertTask = useCallback(
+    (op, params) => __async(void 0, null, function* () {
+      var _a2;
+      if (params == null ? void 0 : params.isCustom) {
+        Transforms.delete(markdownEditorRef.current, {
+          at: ctx.current.path
+        });
+        yield (_a2 = props.runInsertTask) == null ? void 0 : _a2.call(props, op, {
+          x: state.left,
+          y: state.top || state.bottom || 0
+        });
+        if (typeof window === "undefined")
+          return;
+        if (typeof window.matchMedia === "undefined")
+          return;
+        setOpenInsertCompletion == null ? void 0 : setOpenInsertCompletion(false);
+        close();
+        return;
+      }
+      if (op.task === "image" || op.task === "attachment") {
+        if (op.task === "image") {
+          setState({ insertLink: true });
+          setTimeout(() => {
+            var _a3, _b;
+            (_b = (_a3 = dom.current) == null ? void 0 : _a3.querySelector("input")) == null ? void 0 : _b.focus();
+          }, 30);
+        } else {
+          setState({ insertAttachment: true });
+        }
+      } else if (op) {
+        Transforms.insertText(markdownEditorRef.current, "", {
+          at: {
+            anchor: Editor.start(markdownEditorRef.current, ctx.current.path),
+            focus: Editor.end(markdownEditorRef.current, ctx.current.path)
+          }
+        });
+        keyTask$.next({
+          key: op.task,
+          args: op.args
+        });
+        if (typeof window === "undefined")
+          return;
+        if (typeof window.matchMedia === "undefined")
+          return;
+        setOpenInsertCompletion == null ? void 0 : setOpenInsertCompletion(false);
+        close();
+      }
+    }),
+    []
+  );
+  const insertAttachByLink = useCallback(() => __async(void 0, null, function* () {
+    setState({ loading: true });
+    try {
+      let url = state.insertUrl;
+      let size = 0;
+      let name = url;
+      if (/^https?:\/\//.test(url)) {
+        const res = yield fetch(url);
+        if (!res.ok) {
+          throw new Error();
+        }
+        size = Number(res.headers.get("content-length") || 0);
+        const match = url.match(/([\w_-]+)\.\w+$/);
+        if (match) {
+          name = match[1];
+        }
+      }
+      Transforms.insertText(markdownEditorRef.current, "", {
+        at: {
+          anchor: Editor.start(markdownEditorRef.current, ctx.current.path),
+          focus: Editor.end(markdownEditorRef.current, ctx.current.path)
+        }
+      });
+      const node = {
+        type: "attach",
+        name,
+        url,
+        size,
+        children: [{ text: "" }]
+      };
+      Transforms.setNodes(markdownEditorRef.current, node, {
+        at: ctx.current.path
+      });
+      EditorUtils.focus(markdownEditorRef.current);
+      const next = Editor.next(markdownEditorRef.current, {
+        at: ctx.current.path
+      });
+      if ((next == null ? void 0 : next[0].type) === "paragraph" && !Node.string(next[0])) {
+        Transforms.delete(markdownEditorRef.current, { at: next[1] });
+      }
+      const [m] = Editor.nodes(markdownEditorRef.current, {
+        match: (n) => !!n.type,
+        mode: "lowest"
+      });
+      selChange$.next({ node: m, sel: markdownEditorRef.current.selection });
+      close();
+    } finally {
+      setState({ loading: false });
+    }
+  }), []);
+  const keydown = useCallback((e) => {
+    if (state.options.length && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+      e.preventDefault();
+      if (e.key === "ArrowUp" && state.index > 0) {
+        setState({ index: state.index - 1 });
+        const key = state.options[state.index].key;
+        const target = document.querySelector(
+          `[data-action="${key}"]`
+        );
+        if (target && dom.current.scrollTop > target.offsetTop) {
+          dom.current.scroll({
+            top: dom.current.scrollTop - 160 + 30
+          });
+        }
+      }
+      if (e.key === "ArrowDown" && state.index < state.options.length - 1) {
+        setState({ index: state.index + 1 });
+        const key = state.options[state.index].key;
+        const target = document.querySelector(
+          `[data-action="${key}"]`
+        );
+        if (target && target.offsetTop > dom.current.scrollTop + dom.current.clientHeight - 30) {
+          dom.current.scroll({
+            top: target.offsetTop - 30
+          });
+        }
+      }
+    }
+    if (e.key === "Enter" && openInsertCompletion) {
+      const op = state.options[state.index];
+      if (op) {
+        e.preventDefault();
+        e.stopPropagation();
+        runInsertTask(op);
+      }
+    }
+    if (isHotkey("esc", e)) {
+      setOpenInsertCompletion == null ? void 0 : setOpenInsertCompletion(false);
+      EditorUtils.focus(markdownEditorRef.current);
+    }
+    if (isHotkey("backspace", e)) {
+      setOpenInsertCompletion == null ? void 0 : setOpenInsertCompletion(false);
+      EditorUtils.focus(markdownEditorRef.current);
+    }
+  }, []);
+  const i18n = useContext(I18nContext);
+  const insertOptions = useMemo(() => {
+    return getInsertOptions(
+      {
+        isTop: ctx.current.isTop
+      },
+      i18n.locale
+    );
+  }, [i18n.locale, ctx.current.isTop]);
+  const insertMedia = useCallback(() => __async(void 0, null, function* () {
+    setState({ loading: true });
+    try {
+      let url = state.insertUrl;
+      for (const r of replaceUrl) {
+        const m = url.match(r.reg);
+        if (m) {
+          url = r.replace(m);
+          break;
+        }
+      }
+      if (!/^(\w+:)?\/\//.test(url)) {
+        throw new Error();
+      }
+      const type = yield getRemoteMediaType(url);
+      if (!type) {
+        throw new Error();
+      }
+      Transforms.insertText(markdownEditorRef.current, "", {
+        at: {
+          anchor: Editor.start(markdownEditorRef.current, ctx.current.path),
+          focus: Editor.end(markdownEditorRef.current, ctx.current.path)
+        }
+      });
+      const node = EditorUtils.createMediaNode(url, "image", {});
+      Transforms.setNodes(markdownEditorRef.current, node, {
+        at: ctx.current.path
+      });
+      EditorUtils.focus(markdownEditorRef.current);
+      const [n] = Editor.nodes(markdownEditorRef.current, {
+        match: (n2) => !!n2.type,
+        mode: "lowest"
+      });
+      selChange$.next({
+        sel: markdownEditorRef.current.selection,
+        node: n
+      });
+      close();
+    } finally {
+      setState({ loading: false });
+    }
+  }), []);
+  useSubject(insertCompletionText$, (text) => {
+    var _a2;
+    let tempText = text || "";
+    let filterOptions = [];
+    let options = [];
+    if (tempText) {
+      for (let item of insertOptions) {
+        const ops = item.children.filter((op) => {
+          return op.label.some(
+            (l) => l.toLowerCase().includes(tempText.toLowerCase())
+          );
+        });
+        options.push(...ops);
+        if (ops.length) {
+          filterOptions.push(__spreadProps(__spreadValues({}, item), {
+            children: ops
+          }));
+        }
+      }
+    } else {
+      filterOptions = insertOptions;
+      options = insertOptions.reduce(
+        (a, b) => a.concat(b.children),
+        []
+      );
+    }
+    if (props.insertOptions && ((_a2 = props == null ? void 0 : props.insertOptions) == null ? void 0 : _a2.length)) {
+      filterOptions.unshift({
+        label: ["快捷设置", "My Quick"],
+        key: "quick",
+        children: [...props.insertOptions]
+      });
+    }
+    setState({
+      index: 0,
+      text: tempText,
+      options,
+      filterOptions
+    });
+  });
+  useEffect(() => {
+    var _a2;
+    const calculatePosition = (nodeEl, containerEl) => {
+      const top = nodeEl.getBoundingClientRect().top;
+      const left = getOffsetLeft(nodeEl, containerEl) + 24;
+      const containerScrollTop = containerEl.scrollTop;
+      const containerHeight = document.documentElement.clientHeight;
+      const nodeHeight = nodeEl.clientHeight;
+      const nodeTopRelativeToContainer = top - containerScrollTop;
+      const nodeBottomRelativeToContainer = nodeTopRelativeToContainer + nodeHeight;
+      const spaceAbove = nodeTopRelativeToContainer;
+      const spaceBelow = containerHeight - nodeBottomRelativeToContainer;
+      if (spaceBelow < 212 && spaceAbove < 212) {
+        return {
+          top: void 0,
+          bottom: 0,
+          left
+        };
+      }
+      if (spaceBelow < 212 && spaceAbove >= 212) {
+        return {
+          top: void 0,
+          bottom: containerHeight - nodeTopRelativeToContainer,
+          left
+        };
+      }
+      if (spaceBelow >= 212) {
+        return {
+          top: nodeBottomRelativeToContainer,
+          bottom: void 0,
+          left
+        };
+      }
+      return void 0;
+    };
+    const setupEventListeners = () => {
+      var _a3, _b;
+      if (typeof window === "undefined")
+        return;
+      (_a3 = markdownContainerRef == null ? void 0 : markdownContainerRef.current) == null ? void 0 : _a3.addEventListener("keydown", keydown);
+      (_b = markdownContainerRef == null ? void 0 : markdownContainerRef.current) == null ? void 0 : _b.addEventListener("click", clickClose);
+    };
+    const removeEventListeners = () => {
+      var _a3, _b;
+      if (typeof window === "undefined")
+        return;
+      (_a3 = markdownContainerRef == null ? void 0 : markdownContainerRef.current) == null ? void 0 : _a3.removeEventListener("keydown", keydown);
+      (_b = markdownContainerRef == null ? void 0 : markdownContainerRef.current) == null ? void 0 : _b.removeEventListener("click", clickClose);
+    };
+    if (openInsertCompletion) {
+      const [node] = Editor.nodes(markdownEditorRef.current, {
+        match: (n) => Element.isElement(n),
+        mode: "lowest"
+      });
+      if (node) {
+        ctx.current = {
+          path: node[1],
+          isTop: EditorUtils.isTop(markdownEditorRef.current, node[1])
+        };
+        if (((_a2 = node == null ? void 0 : node[0]) == null ? void 0 : _a2.type) === "paragraph") {
+          const el = ReactEditor.toDOMNode(markdownEditorRef.current, node[0]);
+          if (el) {
+            const position = calculatePosition(el, document.body);
+            if (position) {
+              setState(position);
+            } else {
+              setState({ top: 0, left: 0, bottom: void 0 });
+            }
+          }
+        }
+        setupEventListeners();
+        setTimeout(() => {
+          var _a3;
+          (_a3 = dom.current) == null ? void 0 : _a3.scroll({ top: 0 });
+        });
+      }
+    } else {
+      removeEventListeners();
+      close();
+    }
+    return () => {
+      removeEventListeners();
+    };
+  }, [openInsertCompletion]);
+  const context = useContext(ConfigProvider.ConfigContext);
+  const baseClassName = context == null ? void 0 : context.getPrefixCls(`md-editor-insert-autocomplete`);
+  const { wrapSSR, hashId } = useStyle(baseClassName);
+  return ReactDOM.createPortal(
+    wrapSSR(
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          ref: dom,
+          className: classNames(baseClassName, hashId),
+          style: {
+            position: "absolute",
+            zIndex: 9999,
+            display: !openInsertCompletion || !state.filterOptions.length ? "none" : "flex",
+            width: state.insertLink || state.insertAttachment ? 320 : void 0,
+            maxHeight: 212,
+            overflowY: "auto",
+            left: state.left,
+            top: state.top,
+            bottom: state.bottom
+          },
+          onMouseDown: (e) => {
+            e.preventDefault();
+          }
+        },
+        !state.insertLink && !state.insertAttachment && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+          Menu,
+          {
+            items: (_a = props.optionsRender) == null ? void 0 : _a.call(
+              props,
+              state.filterOptions.map((l) => {
+                var _a2, _b, _c, _d;
+                return {
+                  label: (_a2 = l == null ? void 0 : l.label) == null ? void 0 : _a2[1],
+                  key: l == null ? void 0 : l.key,
+                  icon: (_c = (_b = l == null ? void 0 : l.children) == null ? void 0 : _b[0]) == null ? void 0 : _c.icon,
+                  children: (_d = l == null ? void 0 : l.children) == null ? void 0 : _d.map((el) => {
+                    var _a3;
+                    return {
+                      label: (_a3 = el.label) == null ? void 0 : _a3[1],
+                      key: el.key,
+                      icon: el.icon,
+                      onClick: (_) => {
+                        var _a4, _b2;
+                        _.domEvent.stopPropagation();
+                        _.domEvent.preventDefault();
+                        const task = insertOptions.map((o) => o == null ? void 0 : o.children).flat(1).find((o) => {
+                          return o.key === el.key;
+                        });
+                        const myInsertOptions = (_b2 = (_a4 = props == null ? void 0 : props.insertOptions) == null ? void 0 : _a4.find) == null ? void 0 : _b2.call(
+                          _a4,
+                          (o) => o.key === el.key
+                        );
+                        if (myInsertOptions) {
+                          runInsertTask(myInsertOptions, {
+                            isCustom: true
+                          });
+                          return;
+                        }
+                        if (task) {
+                          runInsertTask(task);
+                        }
+                      }
+                    };
+                  })
+                };
+              }).map((l) => {
+                return l == null ? void 0 : l.children;
+              }).flat(1) || []
+            )
+          }
+        )),
+        state.insertLink && /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              padding: 8
+            }
+          },
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              style: {
+                fontSize: "1em",
+                color: "rgba(0,0,0,0.8)",
+                marginBottom: 4,
+                display: "flex",
+                alignContent: "center",
+                gap: 4
+              }
+            },
+            /* @__PURE__ */ React.createElement(PlayCircleOutlined, null),
+            /* @__PURE__ */ React.createElement("span", null, "Embed media links")
+          ),
+          /* @__PURE__ */ React.createElement(
+            Input,
+            {
+              placeholder: "Paste media link",
+              onMouseDown: (e) => e.stopPropagation(),
+              value: state.insertUrl,
+              onKeyDown: (e) => {
+                if (isHotkey("enter", e)) {
+                  insertMedia();
+                }
+              },
+              onChange: (e) => setState({ insertUrl: e.target.value })
+            }
+          ),
+          /* @__PURE__ */ React.createElement(
+            Button,
+            {
+              block: true,
+              loading: state.loading,
+              type: "primary",
+              size: "small",
+              style: {
+                marginTop: "1em"
+              },
+              onClick: insertMedia,
+              disabled: !state.insertUrl
+            },
+            "Embed"
+          )
+        ),
+        state.insertAttachment && /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              width: 320,
+              padding: 8
+            }
+          },
+          /* @__PURE__ */ React.createElement(
+            Tabs,
+            {
+              size: "small",
+              items: [
+                {
+                  label: "Local",
+                  key: "local",
+                  children: /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+                    Button,
+                    {
+                      block: true,
+                      size: "small",
+                      type: "primary",
+                      onClick: () => {
+                        Transforms.insertText(markdownEditorRef.current, "", {
+                          at: {
+                            anchor: Editor.start(
+                              markdownEditorRef.current,
+                              ctx.current.path
+                            ),
+                            focus: Editor.end(
+                              markdownEditorRef.current,
+                              ctx.current.path
+                            )
+                          }
+                        });
+                        setState({ insertUrl: "" });
+                        insertAttachByLink();
+                      }
+                    },
+                    "Choose a file"
+                  ))
+                },
+                {
+                  label: "Embed Link",
+                  key: "embed",
+                  children: /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+                    Input,
+                    {
+                      placeholder: "Paste attachment link",
+                      onMouseDown: (e) => e.stopPropagation(),
+                      value: state.insertUrl,
+                      onKeyDown: (e) => {
+                        if (isHotkey("enter", e)) {
+                          insertAttachByLink();
+                        }
+                      },
+                      onChange: (e) => setState({ insertUrl: e.target.value })
+                    }
+                  ), /* @__PURE__ */ React.createElement(
+                    Button,
+                    {
+                      block: true,
+                      loading: state.loading,
+                      type: "primary",
+                      style: {
+                        marginTop: "1em"
+                      },
+                      size: "small",
+                      onClick: insertAttachByLink,
+                      disabled: !state.insertUrl
+                    },
+                    "Embed"
+                  ))
+                }
+              ]
+            }
+          )
+        )
+      )
+    ),
+    document.body
+  );
+};
+export {
+  InsertAutocomplete,
+  getInsertOptions
+};