Edit Text

import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.64.0/index.js';

const config = {
  // license: import.meta.env.VITE_CESDK_LICENSE,
  userId: 'guides-user'
  // baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.64.0/assets'
};

CreativeEngine.init(config, document.getElementById('cesdk_canvas')).then(
  async (instance) => {
    // Add default assets used in scene.
    instance.addDefaultAssetSources();

    instance.editor.setEditMode('Transform');
    instance.editor.onStateChanged(() => {
      console.log('EditMode is ', instance.editor.getEditMode());
    });

    document.addEventListener('cesdk-blur', (event) => {
      const relatedTarget = event.detail;

      if (focusShouldStayOnEngine(relatedTarget)) {
        event.preventDefault();
      } else if (engineShouldExitTextMode(relatedTarget)) {
        instance.editor.setEditMode('Transform');
      }
    });

    function focusShouldStayOnEngine(newActiveElement) {
      // When clicking on blank space, don't blur the engine input
      return newActiveElement == null;
    }

    function engineShouldExitTextMode() {
      return false;
    }

    document.addEventListener('cesdk-refocus', (event) => {
      const relatedTarget = event.detail;

      if (focusShouldStayOnUI(relatedTarget)) {
        event.preventDefault();
      }
    });

    function focusShouldStayOnUI(newActiveElement) {
      // User might have clicked a button that opens a dialog
      // Afterwards we want an input in the dialog to receive focus
      return newActiveElement?.id === 'open-dialog';
    }

    await instance.scene.loadFromURL(
      'https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_postcard_1.scene'
    );
  }
);

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
      html {
        overscroll-behavior-x: contain;
      }
    </style>
  </head>

  <body>
    <canvas
      id="cesdk_canvas"
      width="1024"
      height="720"
      style="width: 1024px; height: 720px"
    ></canvas>
    <br />
    <button>Button will not steal focus</button>
    <input
      type="text"
      name=""
      id=""
      placeholder="Input field will steal focus"
    />

    <script type="module" src="index.js"></script>
    <script>
      // Make sure to adapt the canvas resolution to high-dpi displays
      const canvas = document.getElementById('cesdk_canvas');
      const updatePixelRatio = () => {
        let dpr = window.devicePixelRatio;
        canvas.width = `${dpr * canvas.getBoundingClientRect().width}`;
        canvas.height = `${dpr * canvas.getBoundingClientRect().height}`;
        matchMedia(`(resolution: ${dpr}dppx)`).addEventListener(
          'change',
          updatePixelRatio,
          { once: true }
        );
      };
      updatePixelRatio();
    </script>
  </body>
</html>

In this example, we want to show how to set up text editing in the Headless CreativeEngine.

Depending on your use cases, text editing can require a little more complicated setup, because the focus for the user’s keyboard input might need to be managed between the CreativeEngine itself and your UI components.

Text Edit Mode#

The Engine always operates in one of three EditModes:

Transform: In this mode you can transform blocks in the scene by moving them around, selecting, or resizing them. This is the default mode.
Crop: This mode is used when cropping image blocks.
Text: Then double-clicking on a text block, the engine switches to this mode to let you edit the text content of a text block.

You can query and set the EditMode using the EditorAPI’s getEditMode() and setEditMode(mode) methods. Certain interactions will cause the engine to switch the mode by itself (such as double-clicking on a text block).

You get notified of changes in the EditorState using the onStateChanged method of the EditorAPI. Inside the callback, use getEditMode() to know the current mode.

Text Editing Focus#

When the engine enters Text mode, it will focus the browser’s input on the text content of the block you are editing. From here, several things can happen:

The user presses ESC, clicks somewhere on the canvas outside of the text block, or Text mode is ended via a call to setEditMode('Transform'). In this case, the browser will blur the text input of the engine, and you are back in the Transform mode.
The user focuses a text input field, number input field, text area or a contentEditable element outside of the canvas. In this case the engine will stay in Text mode, but will no longer have focus. Keyboard input will now go to the input field that has received focus.
The user clicks on a blank space or any focusable DOM element, that does not require keyboard input.

This behavior should be sufficient for most use cases. If your requirements are more complicated, we provide a way to customize what’s happening through events.

CreativeEngine DOM Events#

There are currently two types of custom DOM events that the CreativeEngine dispatches on the canvas element. You can add a listener for it there or on any of its parent elements.

`cesdk-blur`#

When the text input in the engine has been blurred, this event will be dispatched. You can call preventDefault() on the event to force focus back to the canvas input. The event.detail property will contain a reference to the element that has received focus (if available, otherwise it’s null). You can use that element during the decision whether to call preventDefault().

A use case for this could be to prevent disabling the text-input heuristic, forcing refocus even if the user clicked on a text input, or to call editor.setEditMode('Transform') to exit the text edit mode whenever the input is blurred.

`cesdk-refocus`#

Just before the engine refocuses its text input, you can call preventDefault() on this event to prevent this from happening. This event also contains currently focused element (or null) it in its event.detail property.

A use case for this would be to treat a particular input element as if it were a text input and let it keep keyboard focus after it’s been focused.

Full Code#

Here’s the full code:

import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.64.0/index.js';

const config = {
  // license: 'YOUR_CESDK_LICENSE_KEY',
  userId: 'guides-user',
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.64.0/assets'
};

CreativeEngine.init(config, document.getElementById('cesdk_canvas')).then(
  async (cesdk) => {
    // Add default assets used in scene.
    cesdk.addDefaultAssetSources();

    cesdk.editor.setEditMode('Transform');
    cesdk.editor.onStateChanged(() => {
      console.log('EditMode is ', cesdk.editor.getEditMode());
    });

    document.addEventListener('cesdk-blur', (event) => {
      const relatedTarget = event.detail;

      if (focusShouldStayOnEngine(relatedTarget)) {
        event.preventDefault();
      } else if (engineShouldExitTextMode(relatedTarget)) {
        cesdk.editor.setEditMode('Transform');
      }
    });

    function focusShouldStayOnEngine(newActiveElement) {
      // When clicking on blank space, don't blur the engine input
      return newActiveElement == null;
    }

    function engineShouldExitTextMode() {
      return false;
    }

    document.addEventListener('cesdk-refocus', (event) => {
      const relatedTarget = event.detail;

      if (focusShouldStayOnUI(relatedTarget)) {
        event.preventDefault();
      }
    });

    function focusShouldStayOnUI(newActiveElement) {
      // User might have clicked a button that opens a dialog
      // Afterwards we want an input in the dialog to receive focus
      return newActiveElement?.id === 'open-dialog';
    }

    await cesdk.scene.loadFromURL(
      'https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_postcard_1.scene'
    );
  }
);

Edit Ranges Within Text Blocks#

const text = engine.block.create('text');

engine.block.replaceText(text, 'Hello World');
engine.block.removeText(text, 0, 6);
engine.block.setTextColor(text, { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }, 1, 4);
const colorsInRange = engine.block.getTextColors(text, 2, 5);
engine.block.setTextFontWeight(text, 'bold', 0, 5);
const fontWeights = engine.block.getTextFontWeights(text);
engine.block.setTextFontSize(text, 12, 0, 5);
const fontSizes = engine.block.getTextFontSizes(text);
engine.block.setTextFontStyle(text, 'italic', 0, 5);
const fontStyles = engine.block.getTextFontStyles(text);
engine.block.setTextCase(text, 'Titlecase');
const textCases = engine.block.getTextCases(text);
const canToggleBold = engine.block.canToggleBoldFont(text);
const canToggleItalic = engine.block.canToggleItalicFont(text);
engine.block.toggleBoldFont(text);
engine.block.toggleItalicFont(text);
const typefaceAssetResults = await engine.asset.findAssets('ly.img.typeface', {
  query: 'Open Sans',
  page: 0,
  perPage: 100
});
const typeface = typefaceAssetResults.assets[0].payload.typeface;
const font = typeface.fonts.find((font) => font.subFamily === 'Bold');
engine.block.setFont(text, font.uri, typeface);
engine.block.setTypeface(text, typeface, 2, 5);
engine.block.setTypeface(text, typeface);
const defaultTypeface = engine.block.getTypeface(text);
const typeface = engine.block.getTypefaces(text);
const selectedRange = engine.block.getTextCursorRange();
const lineCount = engine.block.getTextVisibleLineCount(text);
const lineBoundingBox = engine.block.getTextVisibleLineGlobalBoundingBoxXYWH(
  text,
  0
);

In this example, we will show you how to use the CreativeEditor SDK’s CreativeEngine to edit ranges within text blocks.

replaceText(id: DesignBlockId, text: string, from?: number, to?: number): void

Inserts the given text into the selected range of the text block. Required scope: ‘text/edit’

block: The text block into which to insert the given text.
text: The text which should replace the selected range in the block.
from: The start index of the UTF-16 range that should be replaced. If the value is negative, this will fall back to the start of the entire text range.
to: The UTF-16 index after the last grapheme that should be replaced by the inserted text. If from and to are negative, a this will fall back to the end of the entire text range, so the entire text will be replaced. If to is negative but from is greater than or equal to 0, the text will be inserted at the index defined by from.

removeText(id: DesignBlockId, from?: number, to?: number): void

Removes selected range of text of the given text block. Required scope: ‘text/edit’

block: The text block from which the selected text should be removed.
from: The start index of the UTF-16 range that should be removed. If the value is negative, this will fall back to the start of the entire text range.
to: The UTF-16 index after the last grapheme that should be removed. If the value is negative, this will fall back to the end of the entire text range.

setTextColor(id: DesignBlockId, color: Color, from?: number, to?: number): void

Changes the color of the text in the selected range to the given color. Required scope: ‘text/edit’

block: The text block whose color should be changed.
color: The new color of the selected text range.
from: The start index of the UTF-16 range whose color should be changed. If the value is negative and the block is currently being edited, this will fall back to the start of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the start of the entire text range.
to: The UTF-16 index after the last grapheme whose color should be changed. If the value is negative and the block is currently being edited, this will fall back to the end of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the end of the entire text range.

getTextColors(id: DesignBlockId, from?: number, to?: number): Array<Color>

Returns the ordered unique list of colors of the text in the selected range.

block: The text block whose colors should be returned.
from: The start index of the UTF-16 range whose colors should be returned. If the value is negative and the block is currently being edited, this will fall back to the start of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the start of the entire text range.
to: The UTF-16 index after the last grapheme whose colors should be returned. If the value is negative and the block is currently being edited, this will fall back to the end of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the end of the entire text range.

setTextFontWeight(id: DesignBlockId, fontWeight: FontWeight, from?: number, to?: number): void

Changes the weight of the text in the selected range to the given weight. Required scope: ‘text/edit’

block: The text block whose weight should be changed.
fontWeight: The new weight of the selected text range.
from: The start index of the UTF-16 range whose weight should be changed. If the value is negative and the block is currently being edited, this will fall back to the start of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the start of the entire text range.
to: The UTF-16 index after the last grapheme whose weight should be changed. If the value is negative and the block is currently being edited, this will fall back to the end of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the end of the entire text range.

getTextFontWeights(id: DesignBlockId, from?: number, to?: number): FontWeight[]

Returns the ordered unique list of font weights of the text in the selected range.

block: The text block whose font weights should be returned.
from: The start index of the UTF-16 range whose font weights should be returned. If the value is negative and the block is currently being edited, this will fall back to the start of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the start of the entire text range.
to: The UTF-16 index after the last grapheme whose font weights should be returned. If the value is negative and the block is currently being edited, this will fall back to the end of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the end of the entire text range.

setTextFontSize(id: DesignBlockId, fontSize: number, from?: number, to?: number): void
setTextFontSize(id: DesignBlockId, fontSize: number, options?: TextFontSizeOptions): void

Sets the given font size for the text block. If the font size is applied to the entire text block, its font size property will be updated. Required scope: ‘text/character’

block: The text block whose font size should be changed.
fontSize: The new font size.
from: The start index of the UTF-16 range whose font size should be changed. If the value is negative and the block is currently being edited, this will fall back to the start of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the start of the entire text range.
to: The UTF-16 index after the last grapheme whose font size should be changed. If the value is negative and the block is currently being edited, this will fall back to the end of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the end of the entire text range.
options: An optional object with unit (‘Point’ or ‘Pixel’), from, and to properties for more precise control.

// Examples with unit support
engine.block.setTextFontSize(text, 16, { unit: 'Pixel' });
engine.block.setTextFontSize(text, 24, { unit: 'Point', from: 0, to: 10 });

getTextFontSizes(id: DesignBlockId, from?: number, to?: number): number[]
getTextFontSizes(id: DesignBlockId, options?: TextRangeOptions): number[]

Returns the ordered unique list of font sizes of the text in the selected range.

block: The text block whose font sizes should be returned.
from: The start index of the grapheme range whose font sizes should be returned. If the value is negative and the block is currently being edited, this will fall back to the start of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the start of the entire text range.
to: The UTF-16 index after the last grapheme whose font sizes should be returned. If the value is negative and the block is currently being edited, this will fall back to the end of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the end of the entire text range.
options: An optional object with unit (‘Point’ or ‘Pixel’), from, and to properties to get font sizes in the specified unit.

// Example with unit support
const pixelSizes = engine.block.getTextFontSizes(text, { unit: 'Pixel' });
const pointSizes = engine.block.getTextFontSizes(text, {
  unit: 'Point',
  from: 0,
  to: 10
});

setTextFontStyle(id: DesignBlockId, fontStyle: FontStyle, from?: number, to?: number): void

Changes the style of the text in the selected range to the given style. Required scope: ‘text/edit’

block: The text block whose style should be changed.
fontStyle: The new style of the selected text range.
from: The start index of the UTF-16 range whose style should be changed. If the value is negative and the block is currently being edited, this will fall back to the start of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the start of the entire text range.
to: The UTF-16 index after the last grapheme whose style should be changed. If the value is negative and the block is currently being edited, this will fall back to the end of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the end of the entire text range.

getTextFontStyles(id: DesignBlockId, from?: number, to?: number): FontStyle[]

Returns the ordered unique list of font styles of the text in the selected range.

block: The text block whose font styles should be returned.
from: The start index of the UTF-16 range whose font styles should be returned. If the value is negative and the block is currently being edited, this will fall back to the start of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the start of the entire text range.
to: The UTF-16 index after the last grapheme whose font styles should be returned. If the value is negative and the block is currently being edited, this will fall back to the end of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the end of the entire text range.

setTextCase(id: DesignBlockId, textCase: TextCase, from?: number, to?: number): void

Sets the given text case for the selected range of text. Required scope: ‘text/character’

id: The text block whose text case should be changed.
textCase: The new text case value.
from: The start index of the UTF-16 range whose text cases should be returned. If the value is negative and the block is currently being edited, this will fall back to the start of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the start of the entire text range.
to: The UTF-16 index after the last grapheme whose text cases should be returned. If the value is negative and the block is currently being edited, this will fall back to the end of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the end of the entire text range.

getTextCases(id: DesignBlockId, from?: number, to?: number): TextCase[]

Returns the ordered list of text cases of the text in the selected range.

block: The text block whose text cases should be returned.
from: The start index of the UTF-16 range whose text cases should be returned. If the value is negative and the block is currently being edited, this will fall back to the start of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the start of the entire text range.
to: The UTF-16 index after the last grapheme whose text cases should be returned. If the value is negative and the block is currently being edited, this will fall back to the end of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the end of the entire text range.

canToggleBoldFont(id: DesignBlockId, from?: number, to?: number): boolean

Returns whether the font weight of the given text block can be toggled between bold and normal. If any part of the selected range is not already bold and the necessary bold font is available, then this function returns true.

id: The text block whose font weight should be toggled.
from: The start index of the UTF-16 range whose font weight should be toggled. If the value is negative and the block is currently being edited, this will fall back to the start of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the start of the entire text range.
to: The UTF-16 index after the last grapheme whose font weight should be toggled. If the value is negative and the block is currently being edited, this will fall back to the end of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the end of the entire text range.
Returns Whether the font weight of the given block can be toggled between bold and normal.

canToggleItalicFont(id: DesignBlockId, from?: number, to?: number): boolean

Toggles the bold font style of the given text block. If any part of the selected range is not already italic and the necessary italic font is available, then this function returns true.

id: The text block whose font style should be toggled.
from: The start index of the UTF-16 range whose font style should be toggled. If the value is negative and the block is currently being edited, this will fall back to the start of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the start of the entire text range.
to: The UTF-16 index after the last grapheme whose font style should be toggled. If the value is negative and the block is currently being edited, this will fall back to the end of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the end of the entire text range.
Returns Whether the font style of the given block can be toggled between italic and normal.

toggleBoldFont(id: DesignBlockId, from?: number, to?: number): void

Toggles the font weight of the given text block between bold and normal. If any part of the selected range is not already bold, all of the selected range will become bold. Only if the entire range is already bold will this function toggle it all back to normal. Required scope: ‘text/character’

id: The text block whose font weight should be toggled.
from: The start index of the UTF-16 range whose font weight should be toggled. If the value is negative and the block is currently being edited, this will fall back to the start of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the start of the entire text range.
to: The UTF-16 index after the last grapheme whose font weight should be toggled. If the value is negative and the block is currently being edited, this will fall back to the end of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the end of the entire text range.

toggleItalicFont(id: DesignBlockId, from?: number, to?: number): void

Toggles the font style of the given text block between italic and normal. If any part of the selected range is not already italic, all of the selected range will become italic. Only if the entire range is already italic will this function toggle it all back to normal. Required scope: ‘text/character’

id: The text block whose font style should be toggled.
from: The start index of the UTF-16 range whose font style should be toggled. If the value is negative and the block is currently being edited, this will fall back to the start of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the start of the entire text range.
to: The UTF-16 index after the last grapheme whose font style should be toggled. If the value is negative and the block is currently being edited, this will fall back to the end of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the end of the entire text range.

setFont(id: DesignBlockId, fontFileUri: string, typeface: Typeface): void

Sets the given font and typeface for the text block. Existing formatting is reset. Required scope: ‘text/character’

id: The text block whose font should be changed.
fontFileUri: The URI of the new font file.
typeface: The typeface of the new font.

setTypeface(id: DesignBlockId, typeface: Typeface, from?: number, to?: number): void

Sets the given typeface for the text block. The current formatting, e.g., bold or italic, is retained as far as possible. Some formatting might change if the new typeface does not support it, e.g. thin might change to light, bold to normal, and/or italic to non-italic. If the typeface is applied to the entire text block, its typeface property will be updated. If a run does not support the new typeface, it will fall back to the default typeface from the typeface property. Required scope: ‘text/character’

id: The text block whose font should be changed.
typeface: The new typeface.
from: The start index of the UTF-16 range whose typeface should be changed. If the value is negative and the block is currently being edited, this will fall back to the start of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the start of the entire text range.
to: The UTF-16 index after the last grapheme whose typeface should be changed. If the value is negative and the block is currently being edited, this will fall back to the end of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the end of the entire text range.

getTypeface(id: DesignBlockId): Typeface

Returns the current typeface of the given text block.

id: The text block whose typeface should be queried.
Returns the typeface property of the text block. Does not return the typefaces of the text runs.
Throws An error if the block does not have a valid typeface.

getTypefaces(id: DesignBlockId, from?: number, to?: number): Typeface[]

Returns the current typefaces of the given text block.

id: The text block whose typefaces should be queried.
from: The start index of the grapheme range whose typefaces should be returned. If the value is negative and the block is currently being edited, this will fall back to the start of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the start of the entire text range.
to: The UTF-16 index after the last grapheme whose typefaces should be returned. If the value is negative and the block is currently being edited, this will fall back to the end of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the end of the entire text range.
Returns The typefaces of the text block.
Throws An error if the block does not have a valid typeface.

getTextCursorRange(): Range

Returns the UTF-16 indices of the selected range of the text block that is currently being edited. If both the start and end index of the returned range have the same value, then the text cursor is positioned at that index.

Returns The selected UTF-16 range or { from: -1, to: -1 } if no text block is currently being edited.

getTextVisibleLineCount(id: DesignBlockId): number

Returns the number of visible lines in the given text block.

id: The text block whose line count should be returned.
Returns The number of lines in the text block.

getTextVisibleLineGlobalBoundingBoxXYWH(id: DesignBlockId, lineIndex: number): XYWH

Returns the bounds of the visible area of the given line of the text block. The values are in the scene’s global coordinate space (which has its origin at the top left).

id: The text block whose line bounding box should be returned.
lineIndex: The index of the line whose bounding box should be returned.
Returns The bounding box of the line.

Text Type#

A block for displaying text content.

This section describes the properties available for the Text Type (//ly.img.ubq/text) block type.

Property	Type	Default Value	Description
`alwaysOnBottom`	`Bool`	`false`	If true, this element’s global sorting order is automatically adjusted to be lower than all other siblings.
`alwaysOnTop`	`Bool`	`false`	If true, this element’s global sorting order is automatically adjusted to be higher than all other siblings.
`backgroundColor/color`	`Color`	`{"r":0.667,"g":0.667,"b":0.667,"a":1}`	The color of the background.
`backgroundColor/cornerRadius`	`Float`	`0`	The corner radius of the background.
`backgroundColor/enabled`	`Bool`	`false`	Whether the background color is enabled.
`backgroundColor/paddingBottom`	`Float`	`0`	The bottom padding of the background.
`backgroundColor/paddingLeft`	`Float`	`0`	The left padding of the background.
`backgroundColor/paddingRight`	`Float`	`0`	The right padding of the background.
`backgroundColor/paddingTop`	`Float`	`0`	The top padding of the background.
`blend/mode`	`Enum`	`"Normal"`	The blend mode to use when compositing the block., Possible values: `"PassThrough"`, `"Normal"`, `"Darken"`, `"Multiply"`, `"ColorBurn"`, `"LinearBurn"`, `"DarkenColor"`, `"Lighten"`, `"Screen"`, `"ColorDodge"`, `"LinearDodge"`, `"LightenColor"`, `"Overlay"`, `"SoftLight"`, `"HardLight"`, `"VividLight"`, `"LinearLight"`, `"PinLight"`, `"HardMix"`, `"Difference"`, `"Exclusion"`, `"Subtract"`, `"Divide"`, `"Hue"`, `"Saturation"`, `"Color"`, `"Luminosity"`
`clipped`	`Bool`	`false`	This component is used to identify elements whose contents and children should be clipped to their bounds.
`contentFill/mode`	`Enum`	`"Cover"`	Defines how content should be resized to fit its container (e.g., Cover, Contain, Stretch)., Possible values: `"Crop"`, `"Cover"`, `"Contain"`
`dropShadow/blurRadius/x`	`Float`	`1`	The horizontal blur radius of the drop shadow.
`dropShadow/blurRadius/y`	`Float`	`1`	The vertical blur radius of the drop shadow.
`dropShadow/clip`	`Bool`	`false`	Whether the drop shadow should be clipped to the block’s bounds.
`dropShadow/color`	`Color`	`{"r":0,"g":0,"b":0,"a":0.25}`	The color of the drop shadow.
`dropShadow/enabled`	`Bool`	`false`	Whether the drop shadow is enabled.
`dropShadow/offset/x`	`Float`	`1.76777`	The horizontal offset of the drop shadow.
`dropShadow/offset/y`	`Float`	`1.76777`	The vertical offset of the drop shadow.
`fill/enabled`	`Bool`	`true`	Whether the fill should be rendered or not.
`fill/solid/color`	`Color`	`"-"`	The fill color.
`flip/horizontal`	`Bool`	`"-"`	Whether the block is flipped horizontally.
`flip/vertical`	`Bool`	`"-"`	Whether the block is flipped vertically.
`globalBoundingBox/height`	`Float`	`"-"`	The height of the block’s axis-aligned bounding box in world coordinates., (read-only)
`globalBoundingBox/width`	`Float`	`"-"`	The width of the block’s axis-aligned bounding box in world coordinates., (read-only)
`globalBoundingBox/x`	`Float`	`"-"`	The x-coordinate of the block’s axis-aligned bounding box in world coordinates., (read-only)
`globalBoundingBox/y`	`Float`	`"-"`	The y-coordinate of the block’s axis-aligned bounding box in world coordinates., (read-only)
`height`	`Float`	`100`	The height of the block’s frame.
`height/mode`	`Enum`	`"Absolute"`	A mode describing how the height dimension may be interpreted (Undefined, Exactly, AtMost)., Possible values: `"Absolute"`, `"Percent"`, `"Auto"`
`highlightEnabled`	`Bool`	`true`	Show highlighting when selected or hovered
`lastFrame/height`	`Float`	`"-"`	The height of the block’s frame from the previous layout pass., (read-only)
`lastFrame/width`	`Float`	`"-"`	The width of the block’s frame from the previous layout pass., (read-only)
`lastFrame/x`	`Float`	`"-"`	The x-coordinate of the block’s frame from the previous layout pass., (read-only)
`lastFrame/y`	`Float`	`"-"`	The y-coordinate of the block’s frame from the previous layout pass., (read-only)
`opacity`	`Float`	`1`	The opacity of the block.
`placeholder/enabled`	`Bool`	`false`	Whether the placeholder behavior is enabled or not.
`placeholderBehavior/enabled`	`Bool`	`false`	Whether the placeholder behavior is enabled or not.
`playback/duration`	`Double`	`5`	The duration in seconds for which this block should be visible.
`playback/timeOffset`	`Double`	`0`	The time in seconds relative to its parent at which this block should first appear.
`position/x`	`Float`	`0`	The x-coordinate of the block’s origin.
`position/x/mode`	`Enum`	`"Absolute"`	A mode describing how the x-position may be interpreted., Possible values: `"Absolute"`, `"Percent"`, `"Auto"`
`position/y`	`Float`	`0`	The y-coordinate of the block’s origin.
`position/y/mode`	`Enum`	`"Absolute"`	A mode describing how the y-position may be interpreted., Possible values: `"Absolute"`, `"Percent"`, `"Auto"`
`rotation`	`Float`	`0`	The rotation of the block in degrees.
`selected`	`Bool`	`false`	Indicates if the block is currently selected.
`selectionEnabled`	`Bool`	`true`	Whether the block can be selected in the editor.
`stroke/color`	`Color`	`{"r":0.67,"g":0.67,"b":0.67,"a":1}`	The color of the stroke.
`stroke/cornerGeometry`	`Enum`	`"Miter"`	The geometry of the stroke at corners (e.g., Miter, Round, Bevel)., Possible values: `"Bevel"`, `"Miter"`, `"Round"`
`stroke/enabled`	`Bool`	`false`	Whether the stroke is enabled.
`stroke/position`	`Enum`	`"Center"`	The position of the stroke relative to the shape’s edge (Inside, Center, Outside)., Possible values: `"Center"`, `"Inner"`, `"Outer"`
`stroke/style`	`Enum`	`"Solid"`	The style of the stroke (e.g., Solid, Dotted, Dashed)., Possible values: `"Dashed"`, `"DashedRound"`, `"Dotted"`, `"LongDashed"`, `"LongDashedRound"`, `"Solid"`
`stroke/width`	`Float`	`4.72441`	The width of the stroke.
`text/automaticFontSizeEnabled`	`Bool`	`false`	Whether the font size should be automatically determined to fit the entire text within the block’s frame.
`text/clipLinesOutsideOfFrame`	`Bool`	`true`	Whether or not to display lines outside the frame.
`text/externalReference`	`String`	`""`	An external reference that may hint at the source that was used to populate fontFileURI.
`text/fontFileUri`	`String`	`""`	The URI of a font file.
`text/fontSize`	`Float`	`10`	The font size in points.
`text/hasClippedLines`	`Bool`	`false`	A tag indicating that text lines are outside the block’s frame and are hidden., (read-only)
`text/horizontalAlignment`	`Enum`	`"Left"`	The horizontal text alignment., Possible values: `"Left"`, `"Right"`, `"Center"`
`text/letterSpacing`	`Float`	`0`	The letter spacing relative to the original spacing.
`text/lineHeight`	`Float`	`1`	The line height relative to the font size.
`text/maxAutomaticFontSize`	`Float`	`-1`	The upper font size limit if the font size is automatically calculated.
`text/minAutomaticFontSize`	`Float`	`-1`	The lower font size limit if the font size is automatically calculated.
`text/paragraphSpacing`	`Float`	`0`	The additional spacing between paragraphs relative to the font size.
`text/text`	`String`	`"Text"`	The text content.
`text/typeface`	`String`	`""`	The typeface of the font.
`text/verticalAlignment`	`Enum`	`"Top"`	The vertical text alignment., Possible values: `"Top"`, `"Bottom"`, `"Center"`
`transformLocked`	`Bool`	`false`	DesignBlocks with this tag can’t be transformed (moved, rotated, scaled, cropped, or flipped).
`visible`	`Bool`	`true`	If the block is visible in the editor.
`width`	`Float`	`100`	The width of the block’s frame.
`width/mode`	`Enum`	`"Absolute"`	A mode describing how the width dimension may be interpreted (Undefined, Exactly, AtMost)., Possible values: `"Absolute"`, `"Percent"`, `"Auto"`

Full Code#

Here’s the full code:

const text = engine.block.create('text');

engine.block.replaceText(text, 'Hello World');
engine.block.removeText(text, 0, 6);
engine.block.setTextColor(text, { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }, 1, 4);
const colorsInRange = engine.block.getTextColors(text, 2, 5);
engine.block.setTextFontWeight(text, 'bold', 0, 5);
const fontWeights = engine.block.getTextFontWeights(text);
engine.block.setTextFontSize(text, 12, 0, 5);
const fontSizes = engine.block.getTextFontSizes(text);
engine.block.setTextFontStyle(text, 'italic', 0, 5);
const fontStyles = engine.block.getTextFontStyles(text);
engine.block.setTextCase(text, 'Titlecase');
const textCases = engine.block.getTextCases(text);
const canToggleBold = engine.block.canToggleBoldFont(text);
const canToggleItalic = engine.block.canToggleItalicFont(text);
engine.block.toggleBoldFont(text);
engine.block.toggleItalicFont(text);
const typefaceAssetResults = await engine.asset.findAssets('ly.img.typeface', {
  query: 'Open Sans',
  page: 0,
  perPage: 100
});
const typeface = typefaceAssetResults.assets[0].payload.typeface;
const font = typeface.fonts.find((font) => font.subFamily === 'Bold');
engine.block.setFont(text, font.uri, typeface);
engine.block.setTypeface(text, typeface, 2, 5);
engine.block.setTypeface(text, typeface);
const defaultTypeface = engine.block.getTypeface(text);
const typeface = engine.block.getTypefaces(text);
const selectedRange = engine.block.getTextCursorRange();
const lineCount = engine.block.getTextVisibleLineCount(text);
const lineBoundingBox = engine.block.getTextVisibleLineGlobalBoundingBoxXYWH(
  text,
  0
);

Text Edit Mode#

Text Editing Focus#

CreativeEngine DOM Events#

cesdk-blur#

cesdk-refocus#

Full Code#

Edit Ranges Within Text Blocks#

Text Type#

Full Code#

`cesdk-blur`#

`cesdk-refocus`#