markdown-flow-ui 0.2.14 → 0.2.16-dev.1

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

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