@univerjs-pro/slides-ui
Canvas, sidebar, playback, insertion tools, editable SmartArt commands, shape merging, and object rendering UI for Univer Slides in Web SDK.
import { UniverSlidesUIPlugin } from '@univerjs-pro/slides-ui'import enUS from '@univerjs-pro/slides-ui/locale/en-US'import '@univerjs-pro/slides-ui/lib/index.css'univer.registerPlugin(UniverSlidesUIPlugin)Shape merging
The root entry exports MergeSlideShapesCommand. It supports union, combine, intersect, subtract, and fragment for eligible selections on the current slide. See selection requirements and command usage.
IUniverSlidesUIConfig.mergeShapeFontResolver optionally provides font bytes for text outlines:
interface IUniverSlidesUIConfig { mergeShapeFontResolver?: ( font: string, unitId: string, text: string, ) => ArrayBuffer | undefined | Promise<ArrayBuffer | undefined>}Return the exact rendered face, including fallback, weight, and style; reuse buffers for the same face. Return undefined for unavailable or mixed fallback faces. Without an override, the plugin resolves supported readable loaded Web fonts. Browser Canvas APIs cannot read installed font files, and missing faces reject text merging without modifying the objects.
Menu configuration
Configure the shared Ribbon through UniverUIPlugin's menu and ribbonType options. They are not options of UniverSlidesUIPlugin. For example, slide.menu.insert.text and slide.menu.insert.shape accept sibling order and Ribbon gridLayout overrides.
Import @univerjs/ui/facade to use FUniver.updateMenuConfig() at runtime. createMenu() and createSubmenu() also accept placement options. See the Slides menu guide for initialization and update examples.
editor.enabled: false skips registration of the Slides Ribbon. Overrides do not register the missing menu items.
Selection activates the relevant shape, image, or chart format tab. Mixed selections containing images or charts use common object controls. The root exports SLIDE_CHART_FORMAT_RIBBON_TAB for chart menu contributions, alongside SLIDE_SHAPE_FORMAT_RIBBON_TAB and SLIDE_SHAPE_FORMAT_RIBBON_GROUP_ADVANCED. See contextual controls.
Entry Points
- Locale:
@univerjs-pro/slides-ui/locale/* - Style:
@univerjs-pro/slides-ui/lib/index.css
How is this guide?