Vizel API / vue/src / useVizelEditorState

Function: useVizelEditorState()

function useVizelEditorState<T>(selector, options?): ComputedRef<T>;

Defined in: packages/vue/src/_reactivity.ts:118

Subscribe to a slice of the editor's state.

The composable reads the editor from the surrounding VizelProvider via useVizelContextSafe. Outside a provider, the context returns null and the selector always observes the absence shape ({ editor: null, transaction: null }). Inside a provider, the composable mirrors the injected ShallowRef<Editor | null> into a private shallowRef<Editor | undefined> and re-attaches transaction listeners whenever the editor identity changes. The returned ComputedRef<T> re-evaluates the selector whenever the editor identity changes or the internal version counter increments.

equalityFn short-circuits notifications when the new selector result is structurally identical to the previous one. The composable reuses the previous returned value so consumers can safely compare with Object.is against the computed's .value.

The composable is SSR safe: editor stays undefined until onMounted runs in the consumer, so the selector receives { editor: null, transaction: null } during server rendering.

Transaction listeners detach in onScopeDispose. Calling the composable inside effectScope() or a child component cleans up automatically when the scope tears down, which removes the leak footgun a manual onBeforeUnmount registration would carry.

Type Parameters

Type Parameter
T

Parameters

Parameter	Type
selector	(snapshot) => T
options?	UseVizelEditorStateOptions<T>

Returns

ComputedRef<T>

Examples

<script setup lang="ts">
import { useVizelEditorState } from "@vizel/vue";
const isBold = useVizelEditorState(({ editor }) => editor?.isActive("bold") ?? false);
</script>

<script setup lang="ts">
import { shallowEqualObject, useVizelEditorState } from "@vizel/vue";
const marks = useVizelEditorState(
  ({ editor }) => ({
    bold: editor?.isActive("bold") ?? false,
    italic: editor?.isActive("italic") ?? false,
  }),
  { equalityFn: shallowEqualObject },
);
</script>