vue-intlayer/dist/esm/editor/focusDictionary.mjs

Easily internationalize i18n your Vue applications with type-safe multilingual content management.

import { MessageKey as i } from "@intlayer/editor";
import { ref as u, readonly as a, inject as f, watch as r } from "vue";
import { createSharedComposable as l } from "./createSharedComposable.mjs";
import { useCrossFrameState as C } from "./useCrossFrameState.mjs";
let n = null;
const c = Symbol("FocusDictionary"), d = () => {
  if (n) return n;
  const t = u(null), e = (o) => {
    t.value = o;
  }, s = (o) => {
    t.value && e({ ...t.value, keyPath: o });
  };
  return n = {
    focusedContent: a(t),
    setFocusedContent: e,
    setFocusedContentKeyPath: s
  }, n;
}, S = (t) => {
  const e = d();
  t.provide(c, e);
}, O = l(() => {
  const t = f(
    c
  ), [e, s] = C(
    i.INTLAYER_FOCUSED_CONTENT_CHANGED
  );
  if (!t)
    throw new Error("FocusDictionary state not found");
  return r(t.focusedContent, (o) => {
    JSON.stringify(o) !== JSON.stringify(e.value) && s(o);
  }), r(e, (o) => {
    JSON.stringify(o) !== JSON.stringify(t.focusedContent.value) && t.setFocusedContent(o ?? null);
  }), t;
});
export {
  d as createFocusDictionaryClient,
  S as installFocusDictionary,
  O as useFocusDictionary
};