svelte-intlayer 8.3.3 → 8.3.4

package/dist/client/setupIntlayer.svelte.js

@@ -1,6 +1,3 @@
-import { createCommunicator } from '../editor/communicator';
-import { createEditorEnabledClient } from '../editor/editorEnabled';
-import { createFocusDictionaryClient } from '../editor/focusDictionary';
 import { useEditor } from '../editor/useEditor';
 // Assuming setIntlayerContext exports a specific key or symbol
 import { setIntlayerContext } from './intlayerContext';
@@ -25,9 +22,6 @@ export const setupIntlayer = (initialLocale) => {
     // 1. Initialize your side effects
     // Note: If these need to run only in the browser, wrap them in $effect or onMount
     // inside your side-effect logic if they aren't already safe.
-    createCommunicator();
-    createEditorEnabledClient();
-    createFocusDictionaryClient();
     useEditor();
     // 2. Create Reactive State (Svelte 5)
     // We make the locale a "rune" so updates propagate

package/dist/editor/ContentSelectorWrapper.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
 import type { NodeProps } from '@intlayer/core/interpreter';
 import { isSameKeyPath } from '@intlayer/core/utils';
-import { MessageKey } from '@intlayer/editor';
+import { defineIntlayerElements, MessageKey } from '@intlayer/editor';
 import { NodeType } from '@intlayer/types/nodeType';
-import { get } from 'svelte/store';
-import ContentSelector from './ContentSelector.svelte';
-import { useCommunicator } from './communicator';
+import { onMount } from 'svelte';
+import { getEditorStateManager } from './communicator';
 import { useEditorEnabled } from './editorEnabled';
 import { useFocusDictionary } from './focusDictionary';
 import { useEditor } from './useEditor';
@@ -13,13 +12,14 @@ import { useEditor } from './useEditor';
 export let dictionaryKey: NodeProps['dictionaryKey'];
 export let keyPath: NodeProps['keyPath'];
 
+const manager = getEditorStateManager();
 const { focusedContent, setFocusedContent } = useFocusDictionary();
-const editorEnabled = useEditorEnabled();
-const communicatorStore = useCommunicator();
-const { enabled } = editorEnabled;
+const { enabled } = useEditorEnabled();
 
 useEditor();
 
+onMount(() => defineIntlayerElements());
+
 $: filteredKeyPath = keyPath.filter((key) => key.type !== NodeType.Translation);
 
 $: isSelected =
@@ -27,44 +27,35 @@ $: isSelected =
   ($focusedContent?.keyPath?.length ?? 0) > 0 &&
   isSameKeyPath($focusedContent?.keyPath ?? [], filteredKeyPath);
 
-const handleSelect = () => {
-  setFocusedContent({
-    dictionaryKey,
-    keyPath: filteredKeyPath,
-  });
+const handlePress = () => {
+  setFocusedContent({ dictionaryKey, keyPath: filteredKeyPath });
 };
 
 const handleHover = () => {
-  const { postMessage, senderId } = get(communicatorStore);
-  postMessage({
-    type: `${MessageKey.INTLAYER_HOVERED_CONTENT_CHANGED}/post`,
-    data: {
-      dictionaryKey,
-      keyPath: filteredKeyPath,
-    },
-    senderId,
-  });
+  manager.messenger.send(
+    `${MessageKey.INTLAYER_HOVERED_CONTENT_CHANGED}/post`,
+    { dictionaryKey, keyPath: filteredKeyPath }
+  );
 };
 
 const handleUnhover = () => {
-  const { postMessage, senderId } = get(communicatorStore);
-  postMessage({
-    type: `${MessageKey.INTLAYER_HOVERED_CONTENT_CHANGED}/post`,
-    data: null,
-    senderId,
-  });
+  manager.messenger.send(
+    `${MessageKey.INTLAYER_HOVERED_CONTENT_CHANGED}/post`,
+    null
+  );
 };
 </script>
 
 {#if $enabled}
-  <ContentSelector
-    onPress={handleSelect}
-    isSelecting={isSelected}
-    onHover={handleHover}
-    onUnhover={handleUnhover}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <intlayer-content-selector
+    is-selecting={isSelected || undefined}
+    on:intlayer:press={handlePress}
+    on:intlayer:hover={handleHover}
+    on:intlayer:unhover={handleUnhover}
   >
     <slot />
-  </ContentSelector>
+  </intlayer-content-selector>
 {:else}
   <slot />
 {/if}

package/dist/editor/communicator.d.ts

@@ -1,9 +1,7 @@
-import { type Writable } from 'svelte/store';
-export type Communicator = {
-    postMessage: typeof window.postMessage;
-    allowedOrigins?: string[];
+import { EditorStateManager } from '@intlayer/editor';
+export declare const createEditorStateManager: () => EditorStateManager;
+export declare const getEditorStateManager: () => EditorStateManager;
+export declare const useCommunicator: () => {
+    postMessage: (data: any) => void;
     senderId: string;
 };
-export type CommunicatorOptions = Omit<Communicator, 'senderId'>;
-export declare const createCommunicator: (options?: Partial<CommunicatorOptions>) => Writable<Communicator>;
-export declare const useCommunicator: () => Writable<Communicator>;

package/dist/editor/communicator.js

@@ -1,54 +1,59 @@
 import configuration from '@intlayer/config/built';
+import { EditorStateManager } from '@intlayer/editor';
 import { getContext, setContext } from 'svelte';
-import { writable } from 'svelte/store';
-const randomUUID = () => Math.random().toString(36).slice(2);
-const { editor } = configuration;
-const postMessage = (data) => {
-    if (typeof window === 'undefined')
-        return;
-    const isInIframe = window.self !== window.top;
-    if (!isInIframe)
-        return;
-    if (editor.applicationURL.length > 0) {
-        window.postMessage(data, editor.applicationURL);
-    }
-    if (editor.editorURL.length > 0) {
-        window.parent.postMessage(data, editor.editorURL);
-    }
-    if (editor.cmsURL.length > 0) {
-        window.parent.postMessage(data, editor.cmsURL);
-    }
-};
-const defaultValue = {
-    postMessage,
+const { editor } = configuration ?? {};
+const buildDefaultMessengerConfig = () => ({
     allowedOrigins: [
         editor?.applicationURL,
         editor?.editorURL,
         editor?.cmsURL,
-    ],
-    senderId: randomUUID(),
-};
-const COMMUNICATOR_KEY = Symbol('INTLAYER_COMMUNICATOR');
-export const createCommunicator = (options = {}) => {
-    const store = writable({
-        ...defaultValue,
-        ...options,
+    ].filter(Boolean),
+    postMessageFn: (payload, origin) => {
+        if (typeof window === 'undefined')
+            return;
+        const isInIframe = window.self !== window.top;
+        if (!isInIframe)
+            return;
+        window.parent?.postMessage(payload, origin);
+        window.postMessage(payload, origin);
+    },
+});
+const MANAGER_KEY = Symbol('INTLAYER_EDITOR_STATE_MANAGER');
+let globalManager = null;
+export const createEditorStateManager = () => {
+    const manager = new EditorStateManager({
+        mode: 'client',
+        messenger: buildDefaultMessengerConfig(),
+        configuration,
     });
-    setContext(COMMUNICATOR_KEY, store);
-    return store;
+    try {
+        setContext(MANAGER_KEY, manager);
+    }
+    catch {
+        // Outside component context
+    }
+    globalManager = manager;
+    return manager;
 };
-export const useCommunicator = () => {
-    let context;
-    // `getContext` must only run inside a component.
-    // If this is called in plain JS, we catch the error and fallback.
+export const getEditorStateManager = () => {
     try {
-        context = getContext(COMMUNICATOR_KEY);
+        const ctx = getContext(MANAGER_KEY);
+        if (ctx)
+            return ctx;
     }
     catch {
-        // called outside component -> ignore, we’ll use global store
+        // Outside component context
     }
-    if (!context) {
-        return createCommunicator();
+    if (!globalManager) {
+        return createEditorStateManager();
     }
-    return context;
+    return globalManager;
+};
+// Backward-compat alias
+export const useCommunicator = () => {
+    const manager = getEditorStateManager();
+    return {
+        postMessage: (data) => manager.messenger.send(data.type, data.data),
+        senderId: manager.messenger.senderId,
+    };
 };

package/dist/editor/dictionariesRecord.d.ts

@@ -1,5 +1,5 @@
-import type { Dictionary, LocalDictionaryId } from '@intlayer/types/dictionary';
-export type DictionaryContent = Record<LocalDictionaryId, Dictionary>;
+import type { DictionaryContent } from '@intlayer/editor';
+export type { DictionaryContent };
 export declare const useDictionariesRecord: () => {
-    dictionariesRecord: import("svelte/store").Writable<DictionaryContent | undefined>;
+    dictionariesRecord: import("svelte/store").Readable<DictionaryContent>;
 };

package/dist/editor/dictionariesRecord.js

@@ -1,18 +1,11 @@
-import { MessageKey } from '@intlayer/editor';
-import { useCrossFrameState } from './useCrossFrameState';
-let loaded = false;
+import { readable } from 'svelte/store';
+import { getEditorStateManager } from './communicator';
 export const useDictionariesRecord = () => {
-    const [dictionariesRecord, setDictionariesRecord] = useCrossFrameState(MessageKey.INTLAYER_LOCALE_DICTIONARIES_CHANGED, {});
-    if (!loaded && typeof window !== 'undefined') {
-        // Load dictionaries dynamically to do not impact the bundle, and send them to the editor
-        import('@intlayer/unmerged-dictionaries-entry').then((mod) => {
-            const unmergedDictionaries = mod.getUnmergedDictionaries();
-            const dictionariesList = Object.fromEntries(Object.values(unmergedDictionaries)
-                .flat()
-                .map((dictionary) => [dictionary.localId, dictionary]));
-            setDictionariesRecord?.(dictionariesList);
-        });
-        loaded = true;
-    }
+    const manager = getEditorStateManager();
+    const dictionariesRecord = readable(manager.localeDictionaries.value ?? {}, (set) => {
+        const handler = (e) => set(e.detail ?? {});
+        manager.localeDictionaries.addEventListener('change', handler);
+        return () => manager.localeDictionaries.removeEventListener('change', handler);
+    });
     return { dictionariesRecord };
 };

package/dist/editor/editorEnabled.d.ts

@@ -1,14 +1,5 @@
-import { type Readable, type Writable } from 'svelte/store';
+import { readable } from 'svelte/store';
 export type EditorEnabledStateProps = {
-    settingEnabled: Writable<boolean>;
-    wrapperEnabled: Writable<boolean>;
-    isInIframe: Writable<boolean>;
-    enabled: Readable<boolean>;
-};
-export declare const createEditorEnabledClient: () => {
-    settingEnabled: Writable<boolean>;
-    wrapperEnabled: Writable<boolean>;
-    isInIframe: Writable<boolean>;
-    enabled: Readable<boolean>;
+    enabled: ReturnType<typeof readable<boolean>>;
 };
 export declare const useEditorEnabled: () => EditorEnabledStateProps;

package/dist/editor/editorEnabled.js

@@ -1,41 +1,11 @@
-import configuration from '@intlayer/config/built';
-import { getContext, setContext } from 'svelte';
-import { derived, writable } from 'svelte/store';
-const EDITOR_ENABLED_KEY = Symbol('EDITOR_ENABLED');
-const detectIframe = () => {
-    if (typeof window === 'undefined')
-        return false;
-    return window.self !== window.top;
-};
-export const createEditorEnabledClient = () => {
-    const settingEnabled = writable(configuration.editor.enabled);
-    const wrapperEnabled = writable(false);
-    const isInIframe = writable(false);
-    const enabled = derived([settingEnabled, wrapperEnabled, isInIframe], ([$setting, $wrapper, $iframe]) => $setting && $wrapper && $iframe);
-    if (typeof window !== 'undefined') {
-        isInIframe.set(detectIframe());
-    }
-    const state = {
-        settingEnabled,
-        wrapperEnabled,
-        isInIframe,
-        enabled,
-    };
-    setContext(EDITOR_ENABLED_KEY, state);
-    return state;
-};
+import { readable } from 'svelte/store';
+import { getEditorStateManager } from './communicator';
 export const useEditorEnabled = () => {
-    let context;
-    // `getContext` must only run inside a component.
-    // If this is called in plain JS, we catch the error and fallback.
-    try {
-        context = getContext(EDITOR_ENABLED_KEY);
-    }
-    catch {
-        // called outside component -> ignore, we’ll use global store
-    }
-    if (!context) {
-        return createEditorEnabledClient();
-    }
-    return context;
+    const manager = getEditorStateManager();
+    const enabled = readable(manager.editorEnabled.value ?? false, (set) => {
+        const handler = (e) => set(e.detail);
+        manager.editorEnabled.addEventListener('change', handler);
+        return () => manager.editorEnabled.removeEventListener('change', handler);
+    });
+    return { enabled };
 };

package/dist/editor/focusDictionary.d.ts

@@ -1,16 +1,10 @@
+import type { FileContent } from '@intlayer/editor';
 import type { KeyPath } from '@intlayer/types/keyPath';
-import type { DictionaryKeys } from '@intlayer/types/module_augmentation';
-import type { Writable } from 'svelte/store';
-export type FocusedContent = {
-    dictionaryKey: DictionaryKeys;
-    keyPath: KeyPath[];
-} | null;
+import { readable } from 'svelte/store';
+export type { FileContent };
 export type FocusDictionaryStateProps = {
-    focusedContent?: Writable<FocusedContent | undefined>;
-    setFocusedContent: (content: FocusedContent) => void;
-};
-export declare const createFocusDictionaryClient: () => {
-    focusedContent: Writable<FocusedContent | undefined>;
-    setFocusedContent: (v: FocusedContent | ((prev: FocusedContent | undefined) => FocusedContent)) => void;
+    focusedContent: ReturnType<typeof readable<FileContent | null>>;
+    setFocusedContent: (content: FileContent | null) => void;
+    setFocusedContentKeyPath: (keyPath: KeyPath[]) => void;
 };
 export declare const useFocusDictionary: () => FocusDictionaryStateProps;

package/dist/editor/focusDictionary.js

@@ -1,22 +1,15 @@
-import { MessageKey } from '@intlayer/editor';
-import { getContext, setContext } from 'svelte';
-import { useCrossFrameState } from './useCrossFrameState';
-const FOCUS_DICTIONARY_KEY = Symbol('FOCUS_DICTIONARY');
-export const createFocusDictionaryClient = () => {
-    const [focusedContent, setFocusedContent] = useCrossFrameState(MessageKey.INTLAYER_FOCUSED_CONTENT_CHANGED, null);
-    setContext(FOCUS_DICTIONARY_KEY, { focusedContent, setFocusedContent });
-    return { focusedContent, setFocusedContent };
-};
+import { readable } from 'svelte/store';
+import { getEditorStateManager } from './communicator';
 export const useFocusDictionary = () => {
-    let context;
-    try {
-        context = getContext(FOCUS_DICTIONARY_KEY);
-    }
-    catch {
-        // called outside component -> ignore, we’ll use global store
-    }
-    if (!context) {
-        return createFocusDictionaryClient();
-    }
-    return context;
+    const manager = getEditorStateManager();
+    const focusedContent = readable(manager.focusedContent.value ?? null, (set) => {
+        const handler = (e) => set(e.detail);
+        manager.focusedContent.addEventListener('change', handler);
+        return () => manager.focusedContent.removeEventListener('change', handler);
+    });
+    return {
+        focusedContent,
+        setFocusedContent: (content) => manager.focusedContent.set(content),
+        setFocusedContentKeyPath: (keyPath) => manager.setFocusedContentKeyPath(keyPath),
+    };
 };

package/dist/editor/index.d.ts

@@ -1,6 +1,7 @@
 export { default as ContentSelector } from './ContentSelector.svelte';
 export { default as ContentSelectorWrapper } from './ContentSelectorWrapper.svelte';
 export * from './communicator';
+export * from './dictionariesRecord';
 export * from './editorEnabled';
 export * from './focusDictionary';
 export * from './useCrossFrameMessageListener';

package/dist/editor/index.js

@@ -1,6 +1,7 @@
 export { default as ContentSelector } from './ContentSelector.svelte';
 export { default as ContentSelectorWrapper } from './ContentSelectorWrapper.svelte';
 export * from './communicator';
+export * from './dictionariesRecord';
 export * from './editorEnabled';
 export * from './focusDictionary';
 export * from './useCrossFrameMessageListener';

package/dist/editor/useCrossFrameMessageListener.d.ts

@@ -1,2 +1,2 @@
-import { type MessageKey } from '@intlayer/editor';
+import type { MessageKey } from '@intlayer/editor';
 export declare const useCrossFrameMessageListener: <S>(key: `${MessageKey}` | `${MessageKey}/post` | `${MessageKey}/get`, onEventTriggered?: (data: S) => void, autoCleanup?: boolean) => (data?: S) => void;

package/dist/editor/useCrossFrameMessageListener.js

@@ -1,65 +1,17 @@
-import { compareUrls } from '@intlayer/editor';
 import { onDestroy } from 'svelte';
-import { get } from 'svelte/store';
-import { useCommunicator } from './communicator';
-const subscribers = new Map();
-let windowListenerAttached = false;
-const addSubscriber = (key, cb) => {
-    let set = subscribers.get(key);
-    if (!set) {
-        set = new Set();
-        subscribers.set(key, set);
-    }
-    set.add(cb);
-};
-const removeSubscriber = (key, cb) => {
-    const set = subscribers.get(key);
-    if (!set)
-        return;
-    set.delete(cb);
-    if (set.size === 0)
-        subscribers.delete(key);
-};
-const ensureGlobalListener = (allowedOrigins, selfId) => {
-    if (windowListenerAttached)
-        return;
-    if (typeof window === 'undefined')
-        return;
-    window.addEventListener('message', (event) => {
-        const { type, data, senderId } = event.data ?? {};
-        if (!type)
-            return;
-        if (senderId === selfId)
-            return;
-        if (!allowedOrigins ||
-            allowedOrigins.includes('*') ||
-            allowedOrigins.some((o) => compareUrls(o, event.origin))) {
-            subscribers.get(type)?.forEach((cb) => {
-                cb(data);
-            });
-        }
-    });
-    windowListenerAttached = true;
-};
+import { getEditorStateManager } from './communicator';
 export const useCrossFrameMessageListener = (key, onEventTriggered, autoCleanup = true) => {
-    const communicatorStore = useCommunicator();
-    const { allowedOrigins, senderId } = get(communicatorStore);
-    ensureGlobalListener(allowedOrigins, senderId);
+    const manager = getEditorStateManager();
     if (onEventTriggered) {
-        const cb = onEventTriggered;
-        addSubscriber(key, cb);
+        const unsub = manager.messenger.subscribe(key, onEventTriggered);
         if (autoCleanup) {
             try {
-                onDestroy(() => removeSubscriber(key, cb));
+                onDestroy(unsub);
             }
             catch {
-                // Might be called outside component, manual cleanup needed if needed
+                // Outside component context
             }
         }
     }
-    const postMessageWrapper = (data) => {
-        const { postMessage, senderId: currentSenderId } = get(communicatorStore);
-        postMessage({ type: key, data, senderId: currentSenderId }, '*');
-    };
-    return postMessageWrapper;
+    return (data) => manager.messenger.send(key, data);
 };

package/dist/editor/useCrossFrameState.d.ts

@@ -1,7 +1,7 @@
-import type { MessageKey } from '@intlayer/editor';
-import { type Writable } from 'svelte/store';
+import { type MessageKey } from '@intlayer/editor';
+import { writable } from 'svelte/store';
 export type CrossFrameStateOptions = {
     emit?: boolean;
     receive?: boolean;
 };
-export declare const useCrossFrameState: <S>(key: `${MessageKey}`, initialState?: S | (() => S), options?: CrossFrameStateOptions) => [Writable<S | undefined>, (v: S | ((prev: S | undefined) => S)) => void];
+export declare const useCrossFrameState: <S>(key: `${MessageKey}`, initialState?: S, options?: CrossFrameStateOptions) => [ReturnType<typeof writable<S | undefined>>, (value: S) => void];

package/dist/editor/useCrossFrameState.js

@@ -1,82 +1,30 @@
-import { get, writable } from 'svelte/store';
-import { useCommunicator } from './communicator';
-import { useCrossFrameMessageListener } from './useCrossFrameMessageListener';
-const crossFrameStateCache = new Map();
-const resolveState = (state, prevState) => {
-    if (typeof state === 'function') {
-        return state(prevState);
-    }
-    return state;
-};
-const toSerializable = (obj) => {
-    if (obj === null || obj === undefined)
-        return obj;
-    return JSON.parse(JSON.stringify(obj));
-};
+import { CrossFrameStateManager } from '@intlayer/editor';
+import { onDestroy } from 'svelte';
+import { writable } from 'svelte/store';
+import { getEditorStateManager } from './communicator';
 export const useCrossFrameState = (key, initialState, options = { emit: true, receive: true }) => {
-    if (crossFrameStateCache.has(key)) {
-        const { state, setState } = crossFrameStateCache.get(key);
-        return [state, setState];
-    }
+    const manager = getEditorStateManager();
     const { emit = true, receive = true } = options;
-    // Initialize state
-    const initialValue = resolveState(initialState);
-    const state = writable(initialValue);
-    const communicatorStore = useCommunicator();
-    const broadcastState = (value) => {
-        const { postMessage, senderId } = get(communicatorStore) ?? {};
-        if (!emit ||
-            typeof postMessage !== 'function' ||
-            typeof value === 'undefined') {
-            return;
-        }
-        postMessage({
-            type: `${key}/post`,
-            data: value,
-            senderId,
-        }, '*');
-    };
-    const setState = (valueOrUpdater) => {
-        state.update((prev) => {
-            const next = resolveState(valueOrUpdater, prev);
-            const serialised = toSerializable(next);
-            broadcastState(serialised);
-            return serialised;
+    const stateManager = new CrossFrameStateManager(key, manager.messenger, {
+        emit,
+        receive,
+        initialValue: initialState,
+    });
+    stateManager.start();
+    const store = writable(stateManager.value);
+    const handler = (e) => store.set(e.detail);
+    stateManager.addEventListener('change', handler);
+    try {
+        onDestroy(() => {
+            stateManager.removeEventListener('change', handler);
+            stateManager.stop();
         });
-    };
-    const postState = () => {
-        const { postMessage, senderId } = get(communicatorStore) ?? {};
-        if (typeof postMessage !== 'function')
-            return;
-        postMessage({
-            type: `${key}/post`,
-            data: get(state),
-            senderId,
-        }, '*');
-    };
-    // Emit initial state
-    broadcastState(initialValue);
-    // If receiving, ask for state
-    if (receive && typeof get(state) === 'undefined') {
-        const { postMessage, senderId } = get(communicatorStore) ?? {};
-        if (typeof postMessage === 'function') {
-            postMessage({ type: `${key}/get`, senderId }, '*');
-        }
     }
-    // Listen for updates
-    const listenerKey = receive ? `${key}/post` : `${key}/ignore`;
-    useCrossFrameMessageListener(listenerKey, (data) => {
-        if (receive) {
-            state.set(data);
-        }
-    });
-    // Listen for requests
-    const getListenerKey = emit ? `${key}/get` : `${key}/ignore`;
-    useCrossFrameMessageListener(getListenerKey, (_) => {
-        if (emit) {
-            broadcastState(get(state));
-        }
-    });
-    crossFrameStateCache.set(key, { state, setState, postState });
-    return [state, setState];
+    catch {
+        // Outside component context
+    }
+    const setState = (value) => {
+        stateManager.set(value);
+    };
+    return [store, setState];
 };

package/dist/editor/useEditor.js

@@ -1,46 +1,22 @@
-import { MessageKey } from '@intlayer/editor';
-import { onDestroy } from 'svelte';
-import { get } from 'svelte/store';
-import { useDictionariesRecord } from './dictionariesRecord';
-import { useEditorEnabled } from './editorEnabled';
-import { useCrossFrameMessageListener } from './useCrossFrameMessageListener';
-import { useIframeClickMerger } from './useIframeClickInterceptor';
-let initialized = false;
-let unsubscribeIsInIframe = null;
+import { defineIntlayerElements } from '@intlayer/editor';
+import { onDestroy, onMount } from 'svelte';
+import { createEditorStateManager } from './communicator';
 export const useEditor = () => {
     if (typeof window === 'undefined')
         return;
-    if (initialized)
-        return;
-    initialized = true;
-    const editorEnabled = useEditorEnabled();
-    useDictionariesRecord();
-    useIframeClickMerger();
-    // Listen for editor enabled
-    useCrossFrameMessageListener(`${MessageKey.INTLAYER_EDITOR_ENABLED}/post`, (data) => {
-        editorEnabled.wrapperEnabled.set(data);
-    }, false);
-    const getEditorEnabled = useCrossFrameMessageListener(`${MessageKey.INTLAYER_EDITOR_ENABLED}/get`, (data) => {
-        editorEnabled.wrapperEnabled.set(data);
-    }, false);
-    // Initial check
-    const checkEnabled = () => {
-        const inIframe = get(editorEnabled.isInIframe);
-        const setting = get(editorEnabled.settingEnabled);
-        if (inIframe && setting) {
-            getEditorEnabled();
-        }
-    };
-    checkEnabled();
-    // Subscribe to changes
-    editorEnabled.isInIframe.subscribe(() => checkEnabled());
-    // Keep track of unsubscribe so we *could* clean up if we ever wanted
-    unsubscribeIsInIframe = editorEnabled.isInIframe.subscribe(() => checkEnabled());
-    onDestroy(() => {
-        initialized = false;
-        if (unsubscribeIsInIframe) {
-            unsubscribeIsInIframe();
-            unsubscribeIsInIframe = null;
-        }
-    });
+    const manager = createEditorStateManager();
+    try {
+        onMount(() => {
+            defineIntlayerElements();
+            manager.start();
+        });
+        onDestroy(() => {
+            manager.stop();
+        });
+    }
+    catch {
+        // Outside component context - start immediately
+        defineIntlayerElements();
+        manager.start();
+    }
 };

package/dist/editor/useIframeClickInterceptor.js

@@ -1,29 +1,8 @@
 import { MessageKey, mergeIframeClick } from '@intlayer/editor';
-import { onDestroy, onMount } from 'svelte';
 import { useCrossFrameMessageListener } from './useCrossFrameMessageListener';
 export const useIframeClickInterceptor = () => {
-    const postMessage = useCrossFrameMessageListener(MessageKey.INTLAYER_IFRAME_CLICKED);
-    const handler = () => {
-        postMessage();
-    };
-    onMount(() => {
-        if (typeof window !== 'undefined') {
-            window.addEventListener('mousedown', handler);
-        }
-    });
-    onDestroy(() => {
-        if (typeof window !== 'undefined') {
-            window.removeEventListener('mousedown', handler);
-        }
-    });
+    useCrossFrameMessageListener(MessageKey.INTLAYER_IFRAME_CLICKED);
 };
 export const useIframeClickMerger = () => {
-    useIframeClickInterceptor();
-    useCrossFrameMessageListener(MessageKey.INTLAYER_IFRAME_CLICKED, (data) => {
-        // mergeIframeClick(data); // mergeIframeClick expects an event, but data might be stripped?
-        // Actually mergeIframeClick logic in editor package probably dispatches a custom event or similar.
-        // The Vue implementation passes `mergeIframeClick` directly as the callback.
-        // Let's assume mergeIframeClick handles whatever data is passed, or we wrap it if needed.
-        mergeIframeClick(data);
-    });
+    useCrossFrameMessageListener(MessageKey.INTLAYER_IFRAME_CLICKED, mergeIframeClick);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-intlayer",
-  "version": "8.3.3",
+  "version": "8.3.4",
   "description": "Easily internationalize i18n your Svelte applications with type-safe multilingual content management.",
   "keywords": [
     "intlayer",
@@ -72,12 +72,11 @@
     "typecheck": "tsc --noEmit --project tsconfig.types.json"
   },
   "dependencies": {
-    "@intlayer/api": "8.3.3",
-    "@intlayer/config": "8.3.3",
-    "@intlayer/core": "8.3.3",
-    "@intlayer/editor": "8.3.3",
-    "@intlayer/types": "8.3.3",
-    "@intlayer/unmerged-dictionaries-entry": "8.3.3"
+    "@intlayer/api": "8.3.4",
+    "@intlayer/config": "8.3.4",
+    "@intlayer/core": "8.3.4",
+    "@intlayer/editor": "8.3.4",
+    "@intlayer/types": "8.3.4"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "7.0.1",
@@ -90,7 +89,7 @@
     "rimraf": "6.1.3",
     "svelte": "5.53.11",
     "svelte-check": "4.4.5",
-    "tsdown": "0.21.2",
+    "tsdown": "0.21.4",
     "typescript": "5.9.3",
     "vite": "8.0.0",
     "vitest": "4.1.0"