Features

Toolbar and shortcuts

The floating toolbar, selection bubble, / menu, block menu, word count, readability score and every keyboard shortcut.

The viveEditor interface comes from @viveeditor/ui: a floating toolbar below the text, a small bubble when you select text, a block menu that opens with /, and a word count. This page explains what each part does, how to turn it off and which keyboard shortcuts exist. The one-script build and the framework components show the toolbar already; with the npm packages you call createUI yourself.

Set up the interface

import { createUI } from '@viveeditor/ui'
import '@viveeditor/ui/style.css'

const ui = createUI(editor, { locale: 'en', theme: 'auto' })

createUI mounts into the element that holds the editor and removes itself when the editor is destroyed. It only shows tools whose commands are registered: without the table extension there is no table button. The interface talks to the editor only through commands and queries.

Option What it does
locale 'tr' or 'en'. Without it, the page’s lang decides: Turkish if it starts with tr, English otherwise.
messages Replaces some of the labels with your own text.
theme 'light' (default), 'dark' or 'auto'. Use the --ve-accent CSS variable for your brand colour.
readability 'atesman', 'flesch' or false. The default follows the language.
bubble false turns off the selection bubble.
slash false turns off the / menu.
source false removes the HTML source button.
files The File menu; false hides it. See Open, save and print.
plugins Extra menus such as mentions, emoji and templates plug in here from @viveeditor/ui/extras.
onError Receives errors raised in the interface.

Floating toolbar

The toolbar sits below the text and stays at the bottom of the screen while you scroll a long article. On phones it moves above the on-screen keyboard.

From left to right: the block type button; bold, italic, underline, strikethrough and inline code; text colour and highlight; bulleted list, numbered list, task list, quote, table, image and video; alignment; link and find and replace; undo, redo, File and HTML source. The word count sits at the end.

Below 560 pixels only bold, italic and link stay in place, and the other tools move to the “More tools” menu. In wider spaces, tools that do not fit move into that menu in a fixed order; the menu shows only the tools that moved.

The HTML source button opens the document’s HTML in an editable text area. While it is open the other tools are disabled; when you close it, your changes are applied to the editor.

Selection bubble

When you select text, a small toolbar opens just above the selection. On touch screens it opens below the selection, so your finger does not cover it. It holds bold, italic, link and inline code; plugins such as the AI assistant add their own buttons. The bubble does not open while an image is selected. Esc closes it, and bubble: false removes it.

The / menu

Type / at the start of a paragraph to open the block menu. The letters you type next filter the list. Search ignores Turkish letter marks, and English keywords also work (/table, /video).

The entries are: Heading 1, 2 and 3, bulleted list, numbered list, task list, quote, code block, table (3×3 with a header row), image, video and divider. Image and video do not insert anything directly; they open their panel.

Move with ↑ and ↓, choose with Enter or Tab, and close with Esc. Focus stays in the text, and screen readers announce the active entry. The mention, emoji, formula, footnote and template plugins add their own entries.

Block menu

The button at the start of the toolbar shows the type of the block at the cursor, such as Paragraph, Heading 2 or Quote. Open it to switch between paragraph, Heading 1–3, the lists, quote and code block. Choosing Paragraph also removes a list or quote around the block.

Word count and readability

The count at the end of the toolbar shows how many words the document has. If you set a character limit, it shows the characters used and the limit instead. The count updates when you pause typing.

Click the count to open the “Text statistics” panel:

  • the readability score (0–100) and its band,
  • the number of words and sentences,
  • the average sentence length,
  • the reading time (based on 200 words per minute).

The Turkish interface uses the Ateşman formula and the English interface uses Flesch. Pass readability to choose another formula; false hides the score and keeps the statistics. The score needs at least 10 words.

Band Ateşman Flesch
Very easy 90 and above 80 and above
Easy 70–89 60–79
Fair 50–69 50–59
Hard 30–49 30–49
Very hard below 30 below 30

To use the same measure in your own code, call measureText(text, 'flesch') from @viveeditor/ui.

Keyboard shortcuts

On a Mac, use ⌘ instead of Ctrl and ⌥ instead of Alt. The toolbar hints show each shortcut for your operating system. A shortcut works when its extension is loaded.

Action Windows and Linux Mac
Bold Ctrl+B ⌘+B
Italic Ctrl+I ⌘+I
Underline Ctrl+U ⌘+U
Strikethrough Ctrl+Shift+S ⌘+⇧+S
Inline code Ctrl+E ⌘+E
Highlight Ctrl+Shift+H ⌘+⇧+H
Heading 1–6 Ctrl+Alt+1 … 6 ⌘+⌥+1 … 6
Bulleted list Ctrl+Shift+8 ⌘+⇧+8
Numbered list Ctrl+Shift+7 ⌘+⇧+7
Task list Ctrl+Shift+9 ⌘+⇧+9
Quote Ctrl+Shift+B ⌘+⇧+B
Code block Ctrl+Alt+C ⌘+⌥+C
Align left Ctrl+Shift+L ⌘+⇧+L
Align center Ctrl+Shift+E ⌘+⇧+E
Align right Ctrl+Shift+R ⌘+⇧+R
Justify Ctrl+Shift+J ⌘+⇧+J
Link Ctrl+K ⌘+K
Find and replace Ctrl+F ⌘+F
Undo Ctrl+Z ⌘+Z
Redo Ctrl+Shift+Z or Ctrl+Y ⌘+⇧+Z or ⌘+Y
New line in the same paragraph Shift+Enter ⇧+Enter
Move to the toolbar Alt+F10 ⌥+F10
AI assistant Ctrl+J ⌘+J

The AI shortcut works only when the AI assistant plugin is added.

Moving around

  • In the toolbar, ← and → move between buttons, and Home and End jump to the first and last. Esc takes you back to the text.
  • In a list, Tab indents the item and Shift+Tab outdents it.
  • In a table, Tab moves to the next cell and adds a row in the last cell; Shift+Tab goes back.
  • In a code block, Tab indents and Shift+Tab outdents.
  • To leave a table or code block with the keyboard, press Esc and then Tab; focus moves to the next element after the editor.
  • Panels and menus close with Esc, and focus returns to their button or to the text.

Typing shortcuts

Some marks typed at the start of a line turn into blocks:

Type Result
# to ###### and a space Heading 1–6
-, * or + and a space Bulleted list
1. and a space Numbered list (another number starts from that number)
[ ] and a space Task list ([x] starts checked)
> and a space Quote
``` and a space Code block (you can add a language name)
--- Divider

Inside text, **bold** or __bold__, *italic* or _italic_, ~~strikethrough~~ and backticks for inline code are formatted as you type.

Can I turn the toolbar off completely?

Yes. Pass ui false to the framework components or mountEditor; with the npm packages, do not call createUI. Keyboard shortcuts come from the extensions, so they still work without the toolbar.

Why does the readability score show a dash?

The score needs at least 10 words. For shorter text the panel says "Write at least 10 words for a score." Words, sentences and reading time are still shown.

Why is a tool missing?

The toolbar only shows tools whose commands are registered. Without the table extension there is no table button, for example. In narrow spaces some tools move to the More tools menu.

Last updated: