markdown-flow-ui 0.3.2-dev.2 → 0.3.2

package/dist/components/MarkdownFlowEditor/MarkdownFlowEditor.es.js

@@ -1,700 +1,478 @@
-import { jsx as p, jsxs as $ } from "react/jsx-runtime";
-import { useEffect as I, useMemo as T, useState as L, useRef as U, useCallback as s } from "react";
-import Ze from "../../node_modules/@uiw/react-codemirror/esm/index.es.js";
-import { autocompletion as qe } from "../../node_modules/@codemirror/autocomplete/dist/index.es.js";
-import { EditorView as Te } from "../../node_modules/@codemirror/view/dist/index.es.js";
-import { markdown as Me } from "../../node_modules/@codemirror/lang-markdown/dist/index.es.js";
-import { syntaxHighlighting as et, defaultHighlightStyle as tt } from "../../node_modules/@codemirror/language/dist/index.es.js";
-import { Tooltip as rt, TooltipTrigger as nt, TooltipContent as ot } from "../ui/tooltip.es.js";
-import at from "./components/CustomDialog.es.js";
-import lt from "./components/CustomPopover.es.js";
-import it from "./components/EditorToolbar.es.js";
-import st from "./components/VariableSearchDropdown.es.js";
-import ct from "./editor-context.es.js";
-import ut from "./components/ImageInject.es.js";
-import mt from "./components/VideoInject.es.js";
-import ft from "./components/VariableSelect.es.js";
-import { SelectedOption as m } from "./types.es.js";
+import { jsx as a, jsxs as w } from "react/jsx-runtime";
+import { useEffect as L, useMemo as T, useState as j, useRef as ee, useCallback as s } from "react";
+import we from "../../node_modules/@uiw/react-codemirror/esm/index.es.js";
+import { autocompletion as Le } from "../../node_modules/@codemirror/autocomplete/dist/index.es.js";
+import { EditorView as te } from "../../node_modules/@codemirror/view/dist/index.es.js";
+import { markdown as Te } from "../../node_modules/@codemirror/lang-markdown/dist/index.es.js";
+import { syntaxHighlighting as ke, defaultHighlightStyle as Ve } from "../../node_modules/@codemirror/language/dist/index.es.js";
+import { Tooltip as Oe, TooltipTrigger as Ee, TooltipContent as Se } from "../ui/tooltip.es.js";
+import ye from "./components/CustomDialog.es.js";
+import xe from "./components/EditorToolbar.es.js";
+import be from "./editor-context.es.js";
+import Pe from "./components/ImageInject.es.js";
+import De from "./components/VideoInject.es.js";
+import { SelectedOption as f } from "./types.es.js";
 /* empty css                          */
-import { getImageContentToInsert as ht, getVideoContentToInsert as pt, createSlashCommands as gt, parseContentInfo as dt } from "./utils.es.js";
-import Vt from "./plugins/ImgPlaceholder.es.js";
-import bt from "./plugins/VideoPlaceholder.es.js";
-import { mediaPlaceholderLabels as Ct } from "./plugins/mediaPlaceholderLabels.es.js";
-import St from "./plugins/VariablePlaceholder.es.js";
-import It, { QuestionSyntaxHighlighter as vt } from "./plugins/SyntaxHighlighter.es.js";
-import ne from "../../node_modules/i18next/dist/esm/i18next.es.js";
-import { DEFAULT_EDITOR_LOCALE as oe, editorLocaleResources as Le, getEditorLocaleMessages as wt } from "./editorI18n.es.js";
-import { normalizeMarkdownFlowLocale as Tt, getMarkdownFlowDirection as Lt, getMarkdownFlowLanguage as kt } from "../../lib/locale.es.js";
-import { useDetachedLanguage as Et } from "../../lib/useDetachedLanguage.es.js";
-import { useResolvedDirection as yt } from "../../lib/useResolvedDirection.es.js";
-import { initReactI18next as Ot } from "../../node_modules/react-i18next/dist/es/initReactI18next.es.js";
-import { useTranslation as Pt } from "../../node_modules/react-i18next/dist/es/useTranslation.es.js";
-import { d as N } from "../../_virtual/index.es.js";
-ne.isInitialized ? Object.entries(Le).forEach(([C, d]) => {
-  ne.addResourceBundle(
-    C,
+import { getImageContentToInsert as Ne, getVideoContentToInsert as Me, createSlashCommands as Re, parseContentInfo as Be } from "./utils.es.js";
+import Fe from "./plugins/ImgPlaceholder.es.js";
+import je from "./plugins/VideoPlaceholder.es.js";
+import { mediaPlaceholderLabels as Ae } from "./plugins/mediaPlaceholderLabels.es.js";
+import He from "./plugins/SyntaxHighlighter.es.js";
+import A from "../../node_modules/i18next/dist/esm/i18next.es.js";
+import { DEFAULT_EDITOR_LOCALE as H, editorLocaleResources as oe, getEditorLocaleMessages as $e } from "./editorI18n.es.js";
+import { normalizeMarkdownFlowLocale as qe, getMarkdownFlowDirection as ze, getMarkdownFlowLanguage as Ge } from "../../lib/locale.es.js";
+import { useDetachedLanguage as We } from "../../lib/useDetachedLanguage.es.js";
+import { useResolvedDirection as _e } from "../../lib/useResolvedDirection.es.js";
+import { initReactI18next as Ke } from "../../node_modules/react-i18next/dist/es/initReactI18next.es.js";
+import { useTranslation as Qe } from "../../node_modules/react-i18next/dist/es/useTranslation.es.js";
+A.isInitialized ? Object.entries(oe).forEach(([b, I]) => {
+  A.addResourceBundle(
+    b,
     "translation",
-    d.translation,
+    I.translation,
     !0,
     !0
   );
-}) : ne.use(Ot).init({
-  resources: Le,
-  lng: oe,
-  fallbackLng: oe,
+}) : A.use(Ke).init({
+  resources: oe,
+  lng: H,
+  fallbackLng: H,
   interpolation: { escapeValue: !1 }
 });
-const ke = [], Ee = (C, d) => {
-  if (!C || d < 0)
-    return !1;
-  for (const l of N.findDocumentVariableMarkers(C))
-    if (l.name !== null && d >= l.start + 2 && d <= l.end - 2)
-      return !0;
-  return !1;
-}, xt = (C = "") => C ? N.formatVariableReference(C) : "{{  }}", ur = ({
-  content: C = "",
-  editMode: d = "codeEdit",
-  questionMode: l = !1,
-  variables: ae,
-  systemVariables: le,
-  onChange: D,
-  onBlur: ye,
-  locale: Y,
-  lang: Oe,
-  uploadProps: Pe,
-  disabled: n = !1,
-  toolbarActionsRight: J,
-  onReady: xe
+const Tt = ({
+  content: b = "",
+  editMode: I = "codeEdit",
+  onChange: k,
+  onBlur: ne,
+  locale: P,
+  lang: re,
+  uploadProps: ie,
+  disabled: t = !1,
+  toolbarActionsRight: D,
+  onReady: le
 }) => {
-  const { t: i, i18n: X } = Pt(), H = Tt(
-    Y ?? oe
-  ), ie = Lt(Y), se = Oe ?? kt(Y);
-  I(() => {
-    X.language !== H && X.changeLanguage(H);
-  }, [X, H]);
-  const f = wt(H), S = T(
+  const { t: l, i18n: N } = Qe(), V = qe(
+    P ?? H
+  ), $ = ze(P), q = re ?? Ge(P);
+  L(() => {
+    N.language !== V && N.changeLanguage(V);
+  }, [N, V]);
+  const O = $e(V), u = T(
     () => ({
-      image: i("toolbarInsertImage", {
+      image: l("toolbarInsertImage", {
         defaultValue: "Insert image"
       }),
-      video: i("toolbarInsertVideo", {
+      video: l("toolbarInsertVideo", {
         defaultValue: "Insert video"
       }),
-      variable: i("slashVariable", {
-        defaultValue: "Variable"
-      }),
-      addVariable: i("toolbarInsertNewVariable", {
-        defaultValue: "Insert new variable"
-      }),
-      search: i("toolbarInsertExistingVariable", {
-        defaultValue: "Insert existing variable"
-      }),
-      confirmOutput: i("toolbarConfirmOutput", {
+      confirmOutput: l("toolbarConfirmOutput", {
         defaultValue: "Confirm output"
       }),
-      insertLink: i("toolbarInsertLink", {
+      insertLink: l("toolbarInsertLink", {
         defaultValue: "Insert link"
       }),
-      insertButton: i("toolbarInsertButton", {
+      insertButton: l("toolbarInsertButton", {
         defaultValue: "Insert button"
       }),
-      insertSingleChoice: i("toolbarInsertSingleChoice", {
+      insertSingleChoice: l("toolbarInsertSingleChoice", {
         defaultValue: "Insert single choice"
       }),
-      insertMultiChoice: i("toolbarInsertMultiChoice", {
+      insertMultiChoice: l("toolbarInsertMultiChoice", {
         defaultValue: "Insert multi choice"
       }),
-      insertInput: i("toolbarInsertInput", {
+      insertInput: l("toolbarInsertInput", {
         defaultValue: "Insert input"
       }),
-      singleChoiceOption1: i("toolbarChoiceOption1", {
+      singleChoiceOption1: l("toolbarChoiceOption1", {
         defaultValue: "Option 1"
       }),
-      singleChoiceOption2: i("toolbarChoiceOption2", {
+      singleChoiceOption2: l("toolbarChoiceOption2", {
         defaultValue: "Option 2"
       }),
-      inputPlaceholder: i("toolbarInputPlaceholder", {
+      inputPlaceholder: l("toolbarInputPlaceholder", {
         defaultValue: "Please enter"
       })
     }),
-    [i]
-  ), Ne = T(
-    () => ({
-      searchPlaceholder: i("variableSearchPlaceholder", {
-        defaultValue: "Search variable"
-      }),
-      systemLabel: i("variableSectionSystem", "System Variables"),
-      customLabel: i("variableSectionCustom", "Custom Variables"),
-      emptyLabel: i("variableNotFound", "No variables found")
-    }),
-    [i]
-  ), De = d === "quickEdit" ? i("placeholderQuickEdit", {
-    defaultValue: i("placeholderCodeEdit", {
-      defaultValue: i("placeholder")
+    [l]
+  ), se = I === "quickEdit" ? l("placeholderQuickEdit", {
+    defaultValue: l("placeholderCodeEdit", {
+      defaultValue: l("placeholder")
     })
-  }) : i("placeholderCodeEdit", { defaultValue: i("placeholder") }), R = T(() => {
-    const e = /* @__PURE__ */ new Set();
-    return (le ?? ke).flatMap((r) => {
-      const o = typeof r?.name == "string" ? N.normalizeVariableName(r.name) : null;
-      return o === null || e.has(o) ? [] : (e.add(o), [{ ...r, name: o }]);
-    });
-  }, [le]), Z = T(() => {
-    const e = new Set(
-      R.map((o) => o.name)
-    ), r = /* @__PURE__ */ new Set();
-    return (ae ?? ke).flatMap((o) => {
-      const t = typeof o?.name == "string" ? N.normalizeVariableName(o.name) : null;
-      return t === null || e.has(t) || r.has(t) ? [] : (r.add(t), [{ ...o, name: t }]);
-    });
-  }, [ae, R]), [q, k] = L(!1), [M, y] = L(!1), j = U(null), A = Et(j, se), { resolvedDirection: z } = yt(
-    j,
-    ie
-  ), [Re, B] = L(null), [ce, ee] = L(
-    Z
-  ), [_, Ae] = L(
-    R
-  );
-  I(() => {
-    ee(Z);
-  }, [Z]), I(() => {
-    Ae(R);
-  }, [R]);
-  const [v, E] = L(
-    m.Empty
-  ), [u, F] = L(), a = U(null), G = U(null), Q = U(null), [te, ue] = L(!1), g = s(() => {
-    ue(!1), Q.current = null;
-  }, []);
-  I(() => {
-    l && g();
-  }, [g, l]);
-  const ze = s(
-    (e) => {
-      if (!n) {
-        if (te && Q.current === e) {
-          g();
-          return;
-        }
-        Q.current = e, ue(!0);
-      }
-    },
-    [g, n, te]
-  ), Be = {
+  }) : l("placeholderCodeEdit", { defaultValue: l("placeholder") }), [M, p] = j(!1), R = ee(null), E = We(R, q), { resolvedDirection: S } = _e(
+    R,
+    $
+  ), [v, g] = j(
+    f.Empty
+  ), [c, y] = j(), r = ee(null), ce = {
     selectedOption: v,
-    setSelectedOption: E,
-    dialogOpen: q,
-    setDialogOpen: k,
-    popoverOpen: M,
-    setPopoverOpen: y,
-    popoverPosition: Re,
-    setPopoverPosition: B
+    setSelectedOption: g,
+    dialogOpen: M,
+    setDialogOpen: p
   };
-  I(() => {
-    n && (k(!1), y(!1), E(m.Empty), F(null), B(null), g());
-  }, [
-    g,
-    n,
-    k,
-    y,
-    B,
-    E,
-    F
-  ]);
-  const O = s(
-    (e) => {
-      if (l || d !== "quickEdit" || !e)
-        return;
-      const r = N.extractVariableNames(e);
-      if (!r.length)
-        return;
-      const o = new Set(
-        _.map((t) => t.name)
-      );
-      ee((t) => {
-        const c = new Set(t.map((b) => b.name)), h = /* @__PURE__ */ new Set(), V = [];
-        return r.forEach((b) => {
-          const w = b;
-          !b || o.has(w) || c.has(w) || h.has(w) || (V.push({ name: b }), h.add(w));
-        }), V.length ? [...V, ...t] : t;
-      });
-    },
-    [d, l, _]
-  );
-  I(() => {
-    O(C);
-  }, [C, O]);
-  const re = s(
+  L(() => {
+    t && (p(!1), g(f.Empty), y(null));
+  }, [t, p, g, y]);
+  const B = s(
     (e) => {
-      if (!(n || l && e === m.Variable))
-        if (g(), E(e), e === m.Variable) {
-          if (a.current) {
-            const { state: r } = a.current, o = r.selection.main.from, t = a.current.coordsAtPos(o);
-            t && B({
-              x: t.left,
-              y: t.bottom
-            });
-          }
-          y(!0);
-        } else
-          k(!0);
+      t || (g(e), p(!0));
     },
-    [g, n, l]
-  ), P = s(
+    [t]
+  ), d = s(
     (e) => {
-      if (n || !a.current) return;
-      const { state: r, dispatch: o } = a.current, t = r.selection.main.from;
-      o({
-        changes: { from: t, insert: e },
-        selection: { anchor: t + e.length }
+      if (t || !r.current) return;
+      const { state: n, dispatch: i } = r.current, o = n.selection.main.from;
+      i({
+        changes: { from: o, insert: e },
+        selection: { anchor: o + e.length }
       });
     },
-    [a, n]
-  ), me = s(
+    [r, t]
+  ), z = s(
     (e) => {
-      if (n || !a.current)
+      if (t || !r.current)
         return;
-      const { state: r, dispatch: o } = a.current, t = r.selection.main;
-      o({
-        changes: { from: t.from, to: t.to, insert: e },
-        selection: { anchor: t.from + e.length }
+      const { state: n, dispatch: i } = r.current, o = n.selection.main;
+      i({
+        changes: { from: o.from, to: o.to, insert: e },
+        selection: { anchor: o.from + e.length }
       });
     },
-    [n]
-  ), fe = s(() => {
-    a.current?.focus();
-  }, []), he = s(() => a.current?.state.doc.toString() ?? "", []), pe = s(
+    [t]
+  ), G = s(() => {
+    r.current?.focus();
+  }, []), W = s(() => r.current?.state.doc.toString() ?? "", []), _ = s(
     (e) => {
-      if (n)
+      if (t)
         return;
-      if (!a.current) {
-        D?.(e);
+      if (!r.current) {
+        k?.(e);
         return;
       }
-      const r = a.current, { state: o, dispatch: t } = r;
-      t({
-        changes: { from: 0, to: o.doc.length, insert: e },
+      const n = r.current, { state: i, dispatch: o } = n;
+      o({
+        changes: { from: 0, to: i.doc.length, insert: e },
         selection: { anchor: e.length }
       });
     },
-    [n, D]
-  ), W = s(() => {
-    if (n || !u || !a.current || u.from === -1)
+    [t, k]
+  ), x = s(() => {
+    if (t || !c || !r.current || c.from === -1)
       return;
-    const { from: e, to: r } = u, { dispatch: o } = a.current;
-    o({
-      changes: { from: e, to: r, insert: "" }
+    const { from: e, to: n } = c, { dispatch: i } = r.current;
+    i({
+      changes: { from: e, to: n, insert: "" }
     });
-  }, [u, a, n]), K = s(
-    (e, r, o = !1) => {
-      if (n || !a.current)
-        return;
-      const t = a.current, { state: c, dispatch: h } = t, V = r ?? c.selection.main, b = xt(e);
-      if (!b) return;
-      const w = N.normalizeVariableName(e) ?? "", Xe = o ? b.length : 3 + w.length;
-      h({
-        changes: {
-          from: V.from,
-          to: V.to,
-          insert: b
-        },
-        selection: {
-          anchor: V.from + Xe
-        }
-      }), t.focus();
-    },
-    [n]
-  ), Fe = s(() => {
-    n || (g(), K(""));
-  }, [g, n, K]), $e = s(() => {
-    if (n || !a.current)
+  }, [c, r, t]), ae = s(() => {
+    if (t || !r.current)
       return;
-    const e = a.current, { state: r, dispatch: o } = e, t = r.selection.main;
-    o({
+    const e = r.current, { state: n, dispatch: i } = e, o = n.selection.main;
+    i({
       changes: {
-        from: t.from,
-        to: t.to,
+        from: o.from,
+        to: o.to,
         insert: "======"
       },
       selection: {
-        anchor: t.from + 3
+        anchor: o.from + 3
       }
     }), e.focus();
-  }, [n]), He = s(() => {
-    if (n || !a.current)
+  }, [t]), ue = s(() => {
+    if (t || !r.current)
       return;
-    const e = a.current, { state: r, dispatch: o } = e, t = r.selection.main;
-    o({
+    const e = r.current, { state: n, dispatch: i } = e, o = n.selection.main;
+    i({
       changes: {
-        from: t.from,
-        to: t.to,
+        from: o.from,
+        to: o.to,
         insert: "[]()"
       },
       selection: {
-        anchor: t.from + 1
+        anchor: o.from + 1
       }
     }), e.focus();
-  }, [n]), je = s(() => {
-    if (n || !a.current)
+  }, [t]), me = s(() => {
+    if (t || !r.current)
       return;
-    const e = a.current, { state: r, dispatch: o } = e, t = r.selection.main;
-    o({
+    const e = r.current, { state: n, dispatch: i } = e, o = n.selection.main;
+    i({
       changes: {
-        from: t.from,
-        to: t.to,
+        from: o.from,
+        to: o.to,
         insert: "?[]"
       },
       selection: {
-        anchor: t.from + 2
+        anchor: o.from + 2
       }
     }), e.focus();
-  }, [n]), _e = s(() => {
-    if (n || !a.current)
+  }, [t]), fe = s(() => {
+    if (t || !r.current)
       return;
-    const e = a.current, { state: r, dispatch: o } = e, t = r.selection.main, c = S.singleChoiceOption1, h = S.singleChoiceOption2, V = `?[%{{ ${l ? f.questionPlaceholder : ""} }} ${c} | ${h}]`;
-    o({
+    const e = r.current, { state: n, dispatch: i } = e, o = n.selection.main, m = u.singleChoiceOption1, h = u.singleChoiceOption2, F = `?[%{{  }} ${m} | ${h}]`;
+    i({
       changes: {
-        from: t.from,
-        to: t.to,
-        insert: V
+        from: o.from,
+        to: o.to,
+        insert: F
       },
       selection: {
-        anchor: t.from + 6,
-        head: t.from + 6 + (l ? f.questionPlaceholder.length : 0)
+        anchor: o.from + 6
       }
     }), e.focus();
   }, [
-    n,
-    S.singleChoiceOption1,
-    S.singleChoiceOption2,
-    l,
-    f.questionPlaceholder
-  ]), Ge = s(() => {
-    if (n || !a.current)
+    t,
+    u.singleChoiceOption1,
+    u.singleChoiceOption2
+  ]), pe = s(() => {
+    if (t || !r.current)
       return;
-    const e = a.current, { state: r, dispatch: o } = e, t = r.selection.main, c = S.singleChoiceOption1, h = S.singleChoiceOption2, V = `?[%{{ ${l ? f.questionPlaceholder : ""} }} ${c} || ${h}]`;
-    o({
+    const e = r.current, { state: n, dispatch: i } = e, o = n.selection.main, m = u.singleChoiceOption1, h = u.singleChoiceOption2, F = `?[%{{  }} ${m} || ${h}]`;
+    i({
       changes: {
-        from: t.from,
-        to: t.to,
-        insert: V
+        from: o.from,
+        to: o.to,
+        insert: F
       },
       selection: {
-        anchor: t.from + 6,
-        head: t.from + 6 + (l ? f.questionPlaceholder.length : 0)
+        anchor: o.from + 6
       }
     }), e.focus();
   }, [
-    n,
-    S.singleChoiceOption1,
-    S.singleChoiceOption2,
-    l,
-    f.questionPlaceholder
-  ]), Qe = s(() => {
-    if (n || !a.current)
+    t,
+    u.singleChoiceOption1,
+    u.singleChoiceOption2
+  ]), he = s(() => {
+    if (t || !r.current)
       return;
-    const e = a.current, { state: r, dispatch: o } = e, t = r.selection.main, c = S.inputPlaceholder ?? "请输入", h = `?[%{{ ${l ? f.questionPlaceholder : ""} }}...${c}]`;
-    o({
+    const e = r.current, { state: n, dispatch: i } = e, o = n.selection.main, h = `?[%{{  }}...${u.inputPlaceholder ?? "请输入"}]`;
+    i({
       changes: {
-        from: t.from,
-        to: t.to,
+        from: o.from,
+        to: o.to,
         insert: h
       },
       selection: {
-        anchor: t.from + 6,
-        head: t.from + 6 + (l ? f.questionPlaceholder.length : 0)
+        anchor: o.from + 6
       }
     }), e.focus();
-  }, [
-    n,
-    S.inputPlaceholder,
-    l,
-    f.questionPlaceholder
-  ]), We = s(
+  }, [t, u.inputPlaceholder]), ge = s(
     ({
       resourceUrl: e,
-      resourceTitle: r,
-      scalePercent: o
+      resourceTitle: n,
+      scalePercent: i
     }) => {
-      if (!e || n) return;
-      const t = ht({
+      if (!e || t) return;
+      const o = Ne({
         resourceUrl: e,
-        resourceTitle: r,
-        scalePercent: o
+        resourceTitle: n,
+        scalePercent: i
       });
-      if (u?.type === m.Image) {
-        if (W(), !a.current) return;
-        const { dispatch: c } = a.current;
-        c({
-          changes: { from: u.from, insert: t }
+      if (c?.type === f.Image) {
+        if (x(), !r.current) return;
+        const { dispatch: m } = r.current;
+        m({
+          changes: { from: c.from, insert: o }
         });
       } else
-        P(t);
-      k(!1);
+        d(o);
+      p(!1);
     },
-    [W, n, P, u]
-  ), Ke = s(
+    [x, t, d, c]
+  ), de = s(
     ({
       resourceUrl: e,
-      resourceTitle: r
+      resourceTitle: n
     }) => {
-      if (n)
+      if (t)
         return;
-      const o = pt(e, r);
-      if (u?.type === m.Video) {
-        if (W(), !a.current) return;
-        const { dispatch: t } = a.current;
-        t({
-          changes: { from: u.from, insert: o }
+      const i = Me(e, n);
+      if (c?.type === f.Video) {
+        if (x(), !r.current) return;
+        const { dispatch: o } = r.current;
+        o({
+          changes: { from: c.from, insert: i }
         });
       } else
-        P(o);
-      k(!1);
-    },
-    [W, n, P, u]
-  ), ge = s(
-    (e) => {
-      if (n)
-        return;
-      const r = u?.type === m.Variable ? { from: u.from, to: u.to } : void 0;
-      K(e.name, r, !0), y(!1), g();
+        d(i);
+      p(!1);
     },
-    [n, K, u, g]
-  ), de = s(() => qe({
+    [x, t, d, c]
+  ), K = s(() => Le({
     override: [
-      gt(
-        re,
-        {
-          // divider: currentStrings.slashDivider,
-          // fixedText: currentStrings.slashFixedText,
-          image: f.slashImage,
-          video: f.slashVideo,
-          variable: f.slashVariable
-        },
-        { enableVariables: !l }
-      )
+      Re(B, {
+        // divider: currentStrings.slashDivider,
+        // fixedText: currentStrings.slashFixedText,
+        image: O.slashImage,
+        video: O.slashVideo
+      })
     ]
   }), [
     // currentStrings.slashDivider,
     // currentStrings.slashFixedText,
-    f.slashImage,
-    f.slashVideo,
-    f.slashVariable,
-    re,
-    l
-  ]), Ve = s(
-    (e) => {
-      if (a.current = e.view, !l && d === "quickEdit" && G.current && e.selectionSet) {
-        const r = e.state.selection.main.head, o = e.state.doc.toString();
-        Ee(
-          o,
-          r
-        ) || (O(o), G.current = null);
-      }
-    },
-    [O, d, l]
-  ), be = s(
+    O.slashImage,
+    O.slashVideo,
+    B
+  ]), Q = s((e) => {
+    r.current = e.view;
+  }, []), U = s(
     (e) => {
-      if (e.stopPropagation(), n)
+      if (e.stopPropagation(), t)
         return;
-      const { type: r, from: o, to: t, dataset: c, target: h } = e.detail;
-      if (l && r === m.Variable) return;
-      const V = dt(r, c);
-      if (F({
-        type: r,
-        value: V,
-        from: o,
-        to: t
-      }), E(r), r === m.Variable) {
-        if (h) {
-          const b = h.getBoundingClientRect(), w = h.ownerDocument.defaultView?.getComputedStyle(
-            j.current ?? h
-          ).direction;
-          B({
-            x: w === "rtl" ? b.right : b.left,
-            y: b.bottom
-          });
-        }
-        y(!0);
-      } else
-        k(!0);
+      const { type: n, from: i, to: o, dataset: m } = e.detail, h = Be(n, m);
+      y({
+        type: n,
+        value: h,
+        from: i,
+        to: o
+      }), g(n), p(!0);
     },
-    [n, l]
+    [t]
   );
-  I(() => {
-    q || (E(m.Empty), F(null));
-  }, [q]), I(() => {
-    !M && v === m.Variable && (E(m.Empty), F(null));
-  }, [M, v]), I(() => {
-    const e = (r) => {
-      r.detail.view === a.current && be(r);
+  L(() => {
+    M || (g(f.Empty), y(null));
+  }, [M]), L(() => {
+    const e = (n) => {
+      n.detail.view === r.current && U(n);
     };
     return window.addEventListener("globalTagClick", e), () => {
       window.removeEventListener("globalTagClick", e);
     };
-  }, [be]);
-  const Ce = i("imageDefaultTitle"), Se = i("videoDefaultTitle"), Ie = T(
-    () => Ct.of({
-      image: Ce,
-      video: Se
+  }, [U]);
+  const J = l("imageDefaultTitle"), X = l("videoDefaultTitle"), Y = T(
+    () => Ae.of({
+      image: J,
+      video: X
     }),
-    [Ce, Se]
-  ), Ue = T(() => {
+    [J, X]
+  ), Ce = T(() => {
     const e = [
-      Te.lineWrapping,
-      Me(),
-      et(tt),
-      l ? vt : It
+      te.lineWrapping,
+      Te(),
+      ke(Ve),
+      He
     ];
-    return n || e.push(de()), d === "quickEdit" && (e.push(
-      Ie,
-      Vt,
-      bt
+    return t || e.push(K()), I === "quickEdit" && e.push(
+      Y,
+      Fe,
+      je
       // fixedTextPlaceholderExtension,
       // DividerPlaceholder,
-    ), l || e.push(St)), e.push(
-      Te.updateListener.of((r) => {
-        Ve(r);
+    ), e.push(
+      te.updateListener.of((n) => {
+        Q(n);
       })
     ), e;
   }, [
-    n,
-    d,
-    de,
-    Ve,
-    Ie,
-    l
-  ]), Ye = s(
+    t,
+    I,
+    K,
+    Q,
+    Y
+  ]), Ie = s(
     (e) => {
-      if (n)
-        return;
-      if (l) {
-        D?.(e);
-        return;
-      }
-      const r = a.current?.state.selection.main.head ?? -1;
-      Ee(
-        e,
-        r
-      ) ? G.current = e : (G.current = null, O(e)), D?.(e);
+      t || k?.(e);
     },
-    [O, D, n, l]
-  ), ve = !l && !n && te, x = T(
+    [k, t]
+  ), C = T(
     () => ({
-      insertTextAtCursor: P,
-      replaceSelection: me,
-      focus: fe,
-      getContent: he,
-      setContent: pe
+      insertTextAtCursor: d,
+      replaceSelection: z,
+      focus: G,
+      getContent: W,
+      setContent: _
     }),
-    [fe, he, P, me, pe]
-  ), we = s(
+    [G, W, d, z, _]
+  ), Z = s(
     (e) => {
-      n || "render" in e || e.onClick?.(x);
+      t || "render" in e || e.onClick?.(C);
     },
-    [n, x]
-  ), Je = T(() => J?.length ? /* @__PURE__ */ p("div", { className: "markdown-flow-editor-toolbar-right", children: J.map((e) => {
+    [t, C]
+  ), ve = T(() => D?.length ? /* @__PURE__ */ a("div", { className: "markdown-flow-editor-toolbar-right", children: D.map((e) => {
     if ("render" in e)
-      return /* @__PURE__ */ p(
+      return /* @__PURE__ */ a(
         "div",
         {
           className: "markdown-flow-editor-toolbar-right-item",
-          children: e.render(x)
+          children: e.render(C)
         },
         e.key
       );
-    const r = e.label || e.tooltip || void 0, o = /* @__PURE__ */ $(
+    const n = e.label || e.tooltip || void 0, i = /* @__PURE__ */ w(
       "button",
       {
         type: "button",
-        disabled: n || e.disabled,
-        onClick: () => we(e),
+        disabled: t || e.disabled,
+        onClick: () => Z(e),
         className: "markdown-flow-editor-toolbar-right-button",
-        "aria-label": r,
+        "aria-label": n,
         title: e.label || e.tooltip,
         children: [
-          e.icon ? /* @__PURE__ */ p("span", { className: "toolbar-right-icon", children: e.icon }) : null,
-          e.label ? /* @__PURE__ */ p("span", { className: "toolbar-right-label", children: e.label }) : null
+          e.icon ? /* @__PURE__ */ a("span", { className: "toolbar-right-icon", children: e.icon }) : null,
+          e.label ? /* @__PURE__ */ a("span", { className: "toolbar-right-label", children: e.label }) : null
         ]
       },
       e.key
-    ), t = e.tooltip ? /* @__PURE__ */ $(rt, { children: [
-      /* @__PURE__ */ p(nt, { asChild: !0, children: o }),
-      /* @__PURE__ */ p(
-        ot,
+    ), o = e.tooltip ? /* @__PURE__ */ w(Oe, { children: [
+      /* @__PURE__ */ a(Ee, { asChild: !0, children: i }),
+      /* @__PURE__ */ a(
+        Se,
         {
           side: "top",
-          dir: z,
-          lang: A,
+          dir: S,
+          lang: E,
           children: e.tooltip
         }
       )
-    ] }) : o;
-    return /* @__PURE__ */ p(
+    ] }) : i;
+    return /* @__PURE__ */ a(
       "div",
       {
         className: "markdown-flow-editor-toolbar-right-item",
-        children: t
+        children: o
       },
       e.key
     );
   }) }) : null, [
-    n,
-    x,
-    we,
-    z,
-    A,
-    J
+    t,
+    C,
+    Z,
+    S,
+    E,
+    D
   ]);
-  return I(() => {
-    xe?.(x);
-  }, [x]), /* @__PURE__ */ $(
+  return L(() => {
+    le?.(C);
+  }, [C]), /* @__PURE__ */ w(
     "div",
     {
       className: "markdown-flow-editor",
-      ref: j,
-      dir: ie,
-      lang: se,
-      "data-disabled": n ? "true" : void 0,
-      "aria-disabled": n,
+      ref: R,
+      dir: $,
+      lang: q,
+      "data-disabled": t ? "true" : void 0,
+      "aria-disabled": t,
       children: [
-        /* @__PURE__ */ p(
-          it,
-          {
-            disabled: n,
-            enableVariables: !l,
-            labels: S,
-            tooltipDirection: z,
-            tooltipLanguage: A,
-            onSelect: re,
-            onInsertVariablePlaceholder: Fe,
-            onVariableSearchToggle: ze,
-            onVariableSearchClose: g,
-            onInsertConfirmOutput: $e,
-            onInsertLink: He,
-            onInsertButton: je,
-            onInsertSingleChoice: _e,
-            onInsertMultiChoice: Ge,
-            onInsertInputField: Qe,
-            variableSearchActive: ve,
-            rightSlot: Je
-          }
-        ),
-        !l && /* @__PURE__ */ p(
-          st,
+        /* @__PURE__ */ a(
+          xe,
           {
-            open: ve,
-            anchorElement: Q.current,
-            onClose: g,
-            onSelect: ge,
-            variables: ce,
-            systemVariables: _,
-            labels: Ne
+            disabled: t,
+            labels: u,
+            tooltipDirection: S,
+            tooltipLanguage: E,
+            onSelect: B,
+            onInsertConfirmOutput: ae,
+            onInsertLink: ue,
+            onInsertButton: me,
+            onInsertSingleChoice: fe,
+            onInsertMultiChoice: pe,
+            onInsertInputField: he,
+            rightSlot: ve
           }
         ),
-        /* @__PURE__ */ p("div", { className: "markdown-flow-editor-body relative overflow-auto", children: /* @__PURE__ */ $(ct.Provider, { value: Be, children: [
-          /* @__PURE__ */ p(
-            Ze,
+        /* @__PURE__ */ a("div", { className: "markdown-flow-editor-body relative overflow-auto", children: /* @__PURE__ */ w(be.Provider, { value: ce, children: [
+          /* @__PURE__ */ a(
+            we,
             {
-              extensions: Ue,
+              extensions: Ce,
               basicSetup: {
                 lineNumbers: !1,
                 searchKeymap: !1,
@@ -704,66 +482,49 @@ const ke = [], Ee = (C, d) => {
                 foldGutter: !1
               },
               className: "rounded-md",
-              placeholder: De,
-              value: C,
+              placeholder: se,
+              value: b,
               theme: "light",
               minHeight: "2rem",
-              editable: !n,
-              onChange: Ye,
-              onBlur: ye
+              editable: !t,
+              onChange: Ie,
+              onBlur: ne
             }
           ),
-          !n && /* @__PURE__ */ $(
-            at,
+          !t && /* @__PURE__ */ w(
+            ye,
             {
-              dir: z,
-              lang: A,
+              dir: S,
+              lang: E,
               labels: {
-                closeButtonLabel: i("dialogCloseLabel"),
-                title: v === m.Image ? i("dialogTitleImage") : v === m.Video ? i("dialogTitleVideo") : v === m.Variable ? i("dialogTitleVariable") : i("dialogTitle")
+                closeButtonLabel: l("dialogCloseLabel"),
+                title: v === f.Image ? l("dialogTitleImage") : v === f.Video ? l("dialogTitleVideo") : l("dialogTitle")
               },
               children: [
-                v === m.Image && /* @__PURE__ */ p(
-                  ut,
+                v === f.Image && /* @__PURE__ */ a(
+                  Pe,
                   {
-                    value: u?.value,
-                    onSelect: We,
-                    uploadProps: Pe
+                    value: c?.value,
+                    onSelect: ge,
+                    uploadProps: ie
                   }
                 ),
-                v === m.Video && /* @__PURE__ */ p(
-                  mt,
+                v === f.Video && /* @__PURE__ */ a(
+                  De,
                   {
-                    value: u?.value,
-                    onSelect: Ke
+                    value: c?.value,
+                    onSelect: de
                   }
                 )
               ]
             }
-          ),
-          !n && !l && /* @__PURE__ */ p(lt, { dir: z, lang: A, children: /* @__PURE__ */ p(
-            ft,
-            {
-              variables: ce,
-              systemVariables: _,
-              selectedName: u?.value?.variableName,
-              onSelect: ge,
-              onAddVariable: (e) => {
-                ee((r) => {
-                  const o = e.name;
-                  return r.some(
-                    (c) => c.name === o
-                  ) ? r : [e, ...r];
-                });
-              }
-            }
-          ) })
+          )
         ] }) })
       ]
     }
   );
 };
 export {
-  ur as default
+  Tt as default
 };
 //# sourceMappingURL=MarkdownFlowEditor.es.js.map