Composables

useEditorState, useTheme, useLocale, useTiptapStore and useCollaborationUsers.

useEditorState

Derive UI state from an editor, re-evaluated at most once per animation frame and only for transactions that change the document, selection or stored marks. The selector runs outside Vue's dependency tracking, so it is safe to call editor.can() and editor.isActive() many times.

import { useEditorState } from 'vue-echo-editor'

const state = useEditorState(editor, e => ({
  bold: e.isActive('bold'),
  canUndo: e.can().undo(),
  words: e.storage.characterCount.words(),
}), {
  // Re-run when these change too
  sources: [() => props.disabled],
  // Skip updates when nothing changed
  equalityFn: (a, b) => a.bold === b.bold && a.canUndo === b.canUndo && a.words === b.words,
})
OptionTypeDescription
sourcesWatchSource[]Extra reactive sources that trigger a re-evaluation.
equalityFn(a, b) => booleanKeep the previous value when it returns true. Defaults to Object.is.

Listeners are removed automatically when the calling component (or effect scope) is disposed.

useTheme

const { theme, borderRadius, isDark, themes, borderRadiusOptions, setTheme, setBorderRadius, toggleTheme } = useTheme()

Shared across all editors, persisted to localStorage, SSR-safe. See Theming.

useLocale

const { lang, t, direction } = useLocale()

t.value('editor.bold.tooltip')          // translated string
t.value('greeting', { name: 'Ada' })    // with {placeholders}
direction.value                          // 'ltr' | 'rtl'

lang is read-only — change it with await locale.setLang(code). See Internationalization.

useTiptapStore

UI state of one editor (fullscreen, preview, source code, find & replace, AI menu, spell check, printer, disabled):

import { useTiptapStore } from 'vue-echo-editor'

const store = useTiptapStore(editor)
store.toggleFullscreen()
store.state.isFullscreen

Inside components rendered by <EchoEditor> (custom buttons, node views) the editor argument can be omitted — the store is injected.

useRovingToolbar

Arrow-key navigation for your own toolbars:

<script setup lang="ts">
import { useRovingToolbar } from 'vue-echo-editor'

const { toolbarRef, onKeydown } = useRovingToolbar()
</script>

<template>
  <div ref="toolbarRef" role="toolbar" aria-label="Formatting" @keydown="onKeydown">
    <button>Bold</button>
    <button>Italic</button>
  </div>
</template>

useCollaborationUsers

From vue-echo-editor/collaboration:

const { users } = useCollaborationUsers(provider)   // provider can be a ref or getter
// [{ clientId, name, color, avatar?, isSelf }]

useEditor

Tiptap's own useEditor is re-exported for building a completely custom editor UI with Echo Editor extensions.

Editor instance
Working with the underlying Tiptap editor — commands, content and events.
Plugins
Package extensions, toolbar buttons, slash commands and translations with definePlugin().