Vizel API / svelte/src / createVizelEditorState

Function: createVizelEditorState()

Call Signature

function createVizelEditorState<T>(selector, options?): object;

Defined in: packages/svelte/src/runes/createVizelEditorState.svelte.ts:109

Selector-style editor-state rune. Returns the projection of the latest editor snapshot through selector, re-evaluated on every Tiptap transaction and selectionUpdate.

Two call forms resolve the editor:

• createVizelEditorState(selector, options?) reads the editor from getVizelContextSafe, so a consumer under <Vizel> or <VizelProvider> never threads the editor through props.
• createVizelEditorState(getEditor, selector, options?) subscribes to the editor the getter returns, so a status bar rendered OUTSIDE the provider tree still tracks state. The getter mirrors the source createVizelState, createVizelAutoSave, and createVizelComment already accept, and parallels React's options.editor override.

Behavior:

• Subscribes through createSubscriber so the listeners attach exactly once per consumer effect and detach when every consumer tears down. The teardown closure detaches transaction and selectionUpdate listeners atomically.
• Skips re-emission whenever equalityFn(prev, next) returns true, which keeps fine-grained derived computations from re-running on no-op transactions (such as IME composition heartbeats).
• Is SSR-safe: the listener-attach effect runs only when the editor becomes non-null, and the first current read against an uninitialised editor evaluates the selector against { editor: null, transaction: null } so server-rendered markup matches the client's first paint.

Type Parameters

Type Parameter
T

Parameters

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

Returns

object

current

readonly current: T;

Examples

<script lang="ts">
  import { createVizelEditorState } from "@vizel/svelte";

  // Track only character count; bold toggles do not re-render the badge.
  const characters = createVizelEditorState(
    ({ editor }) => editor?.storage.characterCount?.characters() ?? 0,
  );
</script>

<span>{characters.current} characters</span>

<script lang="ts">
  // Subscribe to an explicit editor held outside the provider tree.
  const stats = createVizelEditorState(
    () => editorRef,
    ({ editor }) => getVizelEditorState(editor),
  );
</script>

<span>{stats.current.characterCount} characters</span>

Call Signature

function createVizelEditorState<T>(
   getEditor, 
   selector, 
   options?): object;

Defined in: packages/svelte/src/runes/createVizelEditorState.svelte.ts:113

Selector-style editor-state rune. Returns the projection of the latest editor snapshot through selector, re-evaluated on every Tiptap transaction and selectionUpdate.

Two call forms resolve the editor:

• createVizelEditorState(selector, options?) reads the editor from getVizelContextSafe, so a consumer under <Vizel> or <VizelProvider> never threads the editor through props.
• createVizelEditorState(getEditor, selector, options?) subscribes to the editor the getter returns, so a status bar rendered OUTSIDE the provider tree still tracks state. The getter mirrors the source createVizelState, createVizelAutoSave, and createVizelComment already accept, and parallels React's options.editor override.

Behavior:

• Subscribes through createSubscriber so the listeners attach exactly once per consumer effect and detach when every consumer tears down. The teardown closure detaches transaction and selectionUpdate listeners atomically.
• Skips re-emission whenever equalityFn(prev, next) returns true, which keeps fine-grained derived computations from re-running on no-op transactions (such as IME composition heartbeats).
• Is SSR-safe: the listener-attach effect runs only when the editor becomes non-null, and the first current read against an uninitialised editor evaluates the selector against { editor: null, transaction: null } so server-rendered markup matches the client's first paint.

Type Parameters

Type Parameter
T

Parameters

Parameter	Type
getEditor	VizelEditorStateSource
selector	(snapshot) => T
options?	CreateVizelEditorStateOptions<T>

Returns

object

current

readonly current: T;

Examples

<script lang="ts">
  import { createVizelEditorState } from "@vizel/svelte";

  // Track only character count; bold toggles do not re-render the badge.
  const characters = createVizelEditorState(
    ({ editor }) => editor?.storage.characterCount?.characters() ?? 0,
  );
</script>

<span>{characters.current} characters</span>

<script lang="ts">
  // Subscribe to an explicit editor held outside the provider tree.
  const stats = createVizelEditorState(
    () => editorRef,
    ({ editor }) => getVizelEditorState(editor),
  );
</script>

<span>{stats.current.characterCount} characters</span>