Skip to content

Integration Props

Beyond preset / features, these props are for host integration and typically do not trigger session rebuild (read dynamically via getters).

Upload

vue
<YanivEditor
  :upload-image="async (file) => (await upload(file)).url"
  :upload-video="async (file) => (await upload(file)).url"
/>

When not provided, a local upload falls back to a blob: object URL produced by URL.createObjectURL(file), plus an "upload handler not configured" notice. That URL is only valid for the current page session (it dies on reload), so it must not be persisted — production integrations have to pass the handlers.

Pasting an image straight from the clipboard is a different path (the PasteImage extension) and inserts a data: URL; it does not go through the upload handlers.

vue
<YanivEditor :gallery-images="images" />

See Templates and Gallery.

Templates

vue
<YanivEditor :custom-templates="templates" />

@ Mention Suggestions

With the slashCommand capability on (the notion preset enables it), typing @ in the document opens a suggestion menu. Without mentionItems it shows built-in placeholder data, so production integrations should pass real data:

vue
<YanivEditor
  preset="notion"
  :mention-items="[
    { id: 'u-1', label: 'Ada', href: '/people/ada', type: 'user' },
    { id: 'p-1', label: 'Release plan', href: '/pages/release', type: 'page' },
  ]"
/>

The same prop feeds the block menu's "page link" item. Like uploads and the gallery, changing it does not trigger a session rebuild.

AI Host Config

vue
<YanivEditor
  preset="full"
  :features="{ ai: true }"
  :ai-config="{
    provider: 'openai',
    apiKey: process.env.OPENAI_KEY,
    model: 'gpt-4o-mini',
    storageMode: 'memory',
    showSettings: false,
  }"
/>

See AI Config API.

Outline Initial State

When the outline gate is on, the panel is collapsed by default. To open it initially:

vue
<YanivEditor preset="full" :default-outline-expanded="true" />

This prop does not trigger session rebuild. See Outline.

Z-Index

Default overlay base is 1000, configured via zIndexBase on both YanivEditor and YanivInlineEditor (written to --ye-z-base on .yaniv-editor). Raise it when the host page has high-stacking UI:

vue
<YanivEditor :z-index-base="1500" />

Overlays mount inside the editor overlay portal (.yaniv-editor__overlay-portal), not on document.body.

See Z-Index and Overlay Mounting for the full token table, host stacking guidance, and custom-shell requirements.

Controlled Content

vue
<YanivEditor :initial-content="doc" @update="doc = $event" />

Full Editor content protocol is JSON (JSONContent). Inline uses HTML (v-model:content).

Controlled write-back uses signature deduplication to avoid cursor jumps from emit feedback. In preview mode, ContentAdapter can still write via raw transactions; JSON is schema-adapted (unknown nodes/marks stripped) before write.

Expose

ts
const editorRef = ref<InstanceType<typeof YanivEditor>>();

editorRef.value?.getEditor(); // Tiptap Editor | null
editorRef.value?.getJSON();
editorRef.value?.getHTML();
editorRef.value?.getText();

Advanced Runtime

Custom shells can use:

ts
import {
  resolveEditorProfile,
  buildExtensions,
  CAPABILITIES,
  ContentAdapter,
  applyPhaseTransition,
} from "@yanivjs/yaniv-editor";

See Composables API and Architecture.