Skip to main content

Function: TextEditingLayer

TextEditingLayer(__namedParameters): Element

This design layer provides text-editing capabilities for TextArea items on a panel. By default, inline editing will be activated automatically on whichever item's ID is currently the activeId from idaStore. You can toggle inline editing manually using idaStore.setActiveId.

You may also choose to an alternative editingMode depending on the needs of your design experience and the type of fonts you plan to use.

A placeholderText can also be provided if localization of the text placeholder is needed. Note that this will be treated as an override to the default placeholder text implementation for the RichTextArea. This means additional considerations will need to be made to support templates that use metadata to drive text placeholder values.

Remarks

This design layer depends on values from the following:

  • A RichTextProvider (from @design-stack-ct/rich-text-manager) placed somewhere above it in the react component tree
  • The IDAItemLayoutExtension to position the inline editor's text
  • The ItemSelectionExtension to determine if a text area is active and should be editable
  • The ItemPermissionsExtension to determine if text is allowed to be edited (optional; requires ItemMetaDataExtension, ItemLocksExtension, ItemTemplateExtension)
  • The DesignLayerItemVisibilityExtension to hide text previews while editing (optional but highly recommended) You must register these extensions/providers as well as their dependencies in order to use this component as intended.

Parameters

NameType
__namedParametersTextEditingLayerProps

Returns

Element

Defined in

packages/design-engine-react-components/src/components/textEditing/TextEditingLayer.tsx:41