Shapes and Text

Slides uses the shared Shape engine for editable shapes, connectors, and shape text. FSlide.insertShape() returns a shape Facade backed by the Slides command pipeline.

Insert a shape

const slide = univerAPI.getActivePresentation()?.getActiveSlide()if (!slide) {  throw new Error('No active slide')}const shape = slide.insertShape({  shapeType: univerAPI.Enum.ShapeTypeEnum.RoundRect,  transform: { left: 80, top: 64, width: 320, height: 120 },  visible: true,  selectable: true,  shapeData: {    fill: {      fillType: univerAPI.Enum.ShapeFillEnum.SolidFill,      color: '#dbeafe',    },  },})

insertShape() can return null when the Shape host adapter is unavailable or the input cannot be created. Register the Shape dependencies used by the Slides setup before inserting shapes.

Add rich text

if (shape) {  const richText = univerAPI.newRichText()    .text('Quarterly ')    .bold('review')  shape.getText()    .setRichText(richText)    .setHorizontalAlign(univerAPI.Enum.HorizontalAlign.CENTER)    .setVerticalAlign(univerAPI.Enum.VerticalAlign.MIDDLE)}

Use slide.getShape(id) or slide.getShapes() to retrieve shape Facades. Common element methods update position, size, visibility, name, and description; slide.deleteElement(shape) removes the shape.

Edit shape text

Use the shape returned by insertShape() below or in the preceding example. getText() returns a live FShapeText handle. Read plain text with getPlainText(), replace the entire text with setText(), and format it with font, color and alignment methods.

if (!shape) throw new Error('Shape is not available')const shapeText = shape.getText()console.log(shapeText.getPlainText())shapeText  .setText('Quarterly review')  .setFontSize(18)  .setColor('#2563eb')  .setBold(true)  .setHorizontalAlign(univerAPI.Enum.HorizontalAlign.CENTER)  .setVerticalAlign(univerAPI.Enum.VerticalAlign.MIDDLE)

setText() replaces the existing text; use setRichText() when you need multiple styles in one shape. To modify existing rich text, call getRichText()?.copy(), edit the builder, then pass it to setRichText(). Changes to that detached builder are not applied automatically. See text style and text box padding and layout for more options.

const richText = univerAPI.newRichText()  .text('Quarterly ')  .bold('review')shapeText.setRichText(richText)

Shape format painter

Select a shape, activate the format painter, then select the target shape. It copies fill, stroke, effects, and supported text formatting while keeping the target’s identity, geometry, text content, and formula bindings. Clear formatting restores insertion defaults. SmartArt is excluded. The corresponding shape UI plugin registers this behavior automatically.

Merge shapes

Select 2–10 supported objects on the same slide, then use Merge Shapes. The operations are union (all areas), combine (exclude overlaps), intersect (shared area), subtract (remove other objects from the primary object), and fragment (split into regions). The primary object supplies formatting. Merging replaces the selected objects and supports undo/redo and collaboration.

The command below uses the current selection. merged is false when the selection or operation cannot be applied. Objects must be editable and share the same group scope. Connectors, SmartArt, OLE objects, charts, and tables are not merge operands; some effects, animations, and complex text layouts also prevent merging.

Text boxes can be converted to outlines for merging, so their text is no longer editable as text afterward. The exact rendered font must be readable. UniverSlidesUIPlugin can resolve supported loaded Web fonts; for other font sources, supply mergeShapeFontResolver(font, unitId, text) in its configuration. Return the matching font bytes as an ArrayBuffer (or a promise), including the correct weight, style, and fallback face; return undefined when no exact face is available. A missing font rejects the merge without changing the objects.

import { MergeSlideShapesCommand } from '@univerjs-pro/slides-ui'const merged = await univerAPI.executeCommand(MergeSlideShapesCommand.id, {  operation: 'union',})