TextEditingLayer

The TextEditingLayer is an implementation of IDA Framework's DesignLayer that enables interactive editing of an activated text item. The presence of a SelectAndMoveDesignLayer will allow activating an item by clicking it while it is selected.

tip

If you require more control over which item is currently "active", that state is stored and can be accessed via IdaStore.activeId and IdaStore.setActiveId.

An addition to the usual providers, TextEditingLayer requires the presence of a RichTextProvider from @design-stack-ct/rich-text-manager in order to function correctly.

Required Extensions

You will need to add the following extensions and their dependencies to your Interactive Design Engine in order for this layer to function as intended:

• ItemLayoutExtension
• ItemSelectionExtension
• ItemPermissionsExtension
  • ItemTemplateExtension
  • ItemLocksExtension
  • ItemMetadataExtension

It is also recommended to add the DesignLayerItemVisibilityExtension. When it is available, TextEditingLayer will automatically hide item previews from the ItemPreviewDesignLayer while inline text editing is active (preventing visual overlapping).

Unlicensed fonts and non-inline editing

By default, the TextEditingLayer always renders an inline text editor for a given item, no matter the license on the text area's font family. However, some fonts may have a license that restrict it from being downloaded and used on the user's client. If you would like to automatically switch to a text bar that floats above the item rather than downloading the font for inline text editing, you can pass the prop editingMode='license-based' to the TextEditingLayer. With this setting, the inline text editor will switch to the floating text based on the fonts currently set on the given text item. If you instead would prefer to always use the floating text bar regardless of font licensing, you can pass the value 'floating' to the editingMode prop instead.

Example Usage

import {
    DesignEngineProvider,
    SelectArea,
    DesignArea,
    TextEditingLayer,
    DesignLayerItemVisibilityExtension,
    IDAItemLayoutExtension
} from '@design-stack-ct/design-engine-react-components';
import {
    InteractiveDesignEngine,
    ItemSelectionExtension,
    ItemPermissionsExtension,
    ItemLocksExtension,
    ItemMetadataExtension,
} from '@design-stack-ct/interactive-design-engine-core';
import { RichTextProvider } from '@design-stack-ct/rich-text-manager';

export function CustomDesignExperience() {
    const [designEngine, setDesignEngine] = useState(() => new InteractiveDesignEngine(...));

    designEngine.designExtensionSystem.addExtension(IDAItemLayoutExtension);
    designEngine.designExtensionSystem.addExtension(ItemSelectionExtension);
    designEngine.designExtensionSystem.addExtension(ItemPermissionsExtension);
    designEngine.designExtensionSystem.addExtension(ItemLocksExtension);
    designEngine.designExtensionSystem.addExtension(ItemMetadataExtension);
    designEngine.designExtensionSystem.addExtension(DesignLayerItemVisibilityExtension); // To hide item previews while editing

    const defaultFontConfig: FontConfiguration = {
        fontRepositoryUrl: 'https://fonts.documents.cimpress.io/v1/repositories/aff15d65-e10f-492d-b8ea-cfd454c93c3f/published',
        fontFamilies: ['alegreya sans', ...otherFonts],
        defaultFontFamily: 'alegreya sans',
    };

    return (
        <DesignEngineProvider designEngine={designEngine}>
            <RichTextProvider designEngine={designEngine as any} fontConfiguration={defaultFontConfig}>
                <SelectArea>
                    {designEngine.layoutStore.visiblePanels.map((panel) => (
                        <DesignArea panel={panel}>
                            <TextEditingLayer panel={panel} />
                        </DesignArea>
                    ))}
                </SelectArea>
            </RichTextProvider>
        </DesignEngineProvider>
    );
}