EditorToolBar

The formatting bar for Editor: undo/redo, text style, marks, lists, alignment, link, colour, emoji, image, table, divider, equations and collapsible sections, plus contextual table operations.

<script setup lang="ts">
import RyderEditor from "@opeolluwa/ryder/components/notes/Editor.vue"
import RyderEditorToolBar from "@opeolluwa/ryder/components/notes/EditorToolBar.vue"
</script>

<template>
  <RyderEditor v-model="content">
    <template #toolbar>
      <RyderEditorToolBar :upload-image="uploadImage" />
    </template>
  </RyderEditor>
</template>

WARNING

EditorToolBar must be rendered inside <Domternal> — that is, in Editor's toolbar slot. It resolves its editor with useCurrentEditor(); outside a <Domternal> there is no editor, and every button silently no-ops.

Examples

The live bar (inside an Editor, which is where it belongs):

<script setup lang="ts">
import { ref } from "vue";
import Editor from "../../../src/components/notes/Editor.vue";
import EditorToolBar from "../../../src/components/notes/EditorToolBar.vue";

const content = ref(
  "<h1>Ryder notes</h1><p>Start typing — <strong>bold</strong>, lists, tables, links and equations all work.</p>",
);
</script>

<template>
  <div class="rounded-xl border border-gray-200 pb-24 dark:border-white/10">
    <Editor v-model="content">
      <template #toolbar>
        <EditorToolBar />
      </template>
    </Editor>
  </div>

  <details class="mt-3 text-xs text-gray-500 dark:text-white/50">
    <summary class="cursor-pointer">Model value (HTML)</summary>
    <pre
      class="mt-2 overflow-x-auto rounded-lg bg-gray-50 p-3 dark:bg-white/5"
    >{{ content }}</pre>
  </details>
</template>

Props

Prop	Type	Default	Description
uploadImage	(file: File) => Promise<string>	—	Uploads a picked image and resolves to its public URL; falls back to POST /api/upload. This is the only prop.

Emits

None.

Slots

None.

Notes

• Editor state is read with useEditorState() from @domternal/vue, so active toggles (bold, italic, heading level, lists, alignment, link, colour, undo / redo availability) track the selection automatically.
• Buttons use @mousedown.prevent so pressing one does not steal the document selection before the command runs.
• The table toolbar (insert/delete rows and columns, header row, delete table) only appears when the selection is inside a table.
• The root renders inside ToolBarWrapper — a fixed bottom bar — so give the editor pb-24 breathing room underneath it.
• The image button opens a hidden <input type="file" accept="image/*">; the resolved URL is inserted with setImage({ src }).