Observe Editing State
In this example, we will show you how to use the CreativeEditor SDK's CreativeEngine to set and query the editor state in the
editor API, i.e., what type of content the user is currently able to edit.
This example uses the headless CreativeEngine. See the Setup article for a detailed guide.
To get started right away, you can also access the
block API within a running CE.SDK instance via
Check out the APIs Overview to see that illustrated in more detail.
The editor state consists of the current edit mode, which informs what type of content the user is currently able to edit. The edit mode can be set to either
'Text', or a custom user-defined one. You can also query the intended mouse cursor and the location of the text cursor while editing text.
Instead of having to constantly query the state in a loop, you can also be notified when the state has changed to then act on these changes in a callback.
onStateChanged: (callback: () => void) => (() => void)
Subscribe to changes to the editor state.
callback: This function is called at the end of the engine update, if the editor state has changed.
- Returns A method to unsubscribe.
setEditMode(mode: 'Transform' | 'Crop' | 'Text' | string): void
Set the edit mode of the editor. An edit mode defines what type of content can currently be edited by the user. Hint: the initial edit mode is "Transform".
mode: "Transform", "Crop", "Text", or a custom value.
getEditMode(): 'Transform' | 'Crop' | 'Text' | string
Get the current edit mode of the editor. An edit mode defines what type of content can currently be edited by the user.
- Returns "Transform", "Crop", "Text", or a custom value.
getCursorType(): 'Arrow' | 'Move' | 'MoveNotPermitted' | 'Resize' | 'Rotate' | 'Text'
Get the type of cursor that should be displayed by the application.
- Returns The cursor type.
Get the rotation with which to render the mouse cursor.
- Returns The angle in radians.
Get the current text cursor's x position in screen space.
- Returns The text cursor's x position in screen space.
Get the current text cursor's y position in screen space.
- Returns The text cursor's y position in screen space.
const unsubscribeState = engine.editor.onStateChanged(() => console.log('Editor state has changed'));// Native modes: 'Transform', 'Crop', 'Text'engine.editor.setEditMode('Crop');engine.editor.getEditMode(); // 'Crop'// Use this information to alter the displayed cursorengine.editor.getCursorType();engine.editor.getCursorRotation();// Query information about the text cursor positionengine.editor.getTextCursorPositionInScreenSpaceX();engine.editor.getTextCursorPositionInScreenSpaceY();