FloatingToolbar
Floating mark toolbar. Appears above the current (non-collapsed) selection.
Positioned with position: fixed in viewport coordinates, so it works
inside any layout (scrollable containers, overflow: hidden ancestors…)
without a positioning wrapper.
Placement (see anchor.js): centred above the selection; flipped BELOW it when there is no room above, measured against
the part of the viewport where the selection is visible (the viewport intersected with its scroll containers, so a
selection at the top edge of a scroll container gets the toolbar below it); clamped horizontally inside the viewport
(and the container); repositioned on scroll (window or any scrollable ancestor) and resize; hidden while the selection
is entirely scrolled out of view.
A host with a sticky / fixed header over the top of the viewport (outside any scroll container) can reserve room for it
with the CSS custom property --nb-toolbar-inset-top (a length in px, set on the toolbar or any ancestor, e.g.
--nb-toolbar-inset-top: 56px): the toolbar never goes above that line, and a selection hidden under it hides the toolbar.
Usage
<script>
import { FloatingToolbar } from '@aionbuilders/nabu/ui';
</script>
<FloatingToolbar {engine} />Props
| Prop | Type | Description |
|---|---|---|
engine | Nabu | The editor this component works on (a |
Source: src/lib/ui/FloatingToolbar.svelte