markdown-flow-ui 0.3.1 → 0.3.2-dev.1

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

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