@imgly/editor-react-native 1.73.0 → 1.74.0

package/android/src/main/kotlin/ly/img/editor/configuration/apparel/callback/OnCreate.kt

@@ -0,0 +1,190 @@
+@file:OptIn(UnstableEditorApi::class)
+
+package ly.img.editor.configuration.apparel.callback
+
+import androidx.core.net.toUri
+import kotlinx.coroutines.coroutineScope
+import kotlinx.coroutines.launch
+import ly.img.editor.configuration.apparel.ApparelConfigurationBuilder
+import ly.img.editor.core.UnstableEditorApi
+import ly.img.editor.core.library.data.AssetSourceType
+import ly.img.editor.core.library.data.SystemGalleryAssetSource
+import ly.img.editor.core.library.data.SystemGalleryPermission
+import ly.img.editor.core.library.data.TextAssetSource
+import ly.img.editor.core.library.data.TypefaceProvider
+import ly.img.engine.BlendMode
+import ly.img.engine.Color
+import ly.img.engine.DefaultAssetSource
+import ly.img.engine.DemoAssetSource
+import ly.img.engine.DesignBlockType
+import ly.img.engine.ShapeType
+import ly.img.engine.StrokeStyle
+import ly.img.engine.populateAssetSource
+
+/**
+ * The callback that is invoked when the editor is created.
+ */
+suspend fun ApparelConfigurationBuilder.onCreate(
+    preCreateScene: suspend ApparelConfigurationBuilder.() -> Unit = {
+        onPreCreateScene()
+    },
+    createScene: suspend ApparelConfigurationBuilder.() -> Unit = {
+        onCreateScene()
+    },
+    loadAssetSources: suspend ApparelConfigurationBuilder.() -> Unit = {
+        onLoadAssetSources()
+    },
+    postCreateScene: suspend ApparelConfigurationBuilder.() -> Unit = {
+        onPostCreateScene()
+    },
+    finally: suspend ApparelConfigurationBuilder.() -> Unit = {
+        onCreateFinally()
+    },
+) {
+    try {
+        preCreateScene()
+        createScene()
+        loadAssetSources()
+        postCreateScene()
+    } finally {
+        finally()
+    }
+}
+
+/**
+ * The callback that is invoked before the scene is created.
+ */
+fun ApparelConfigurationBuilder.onPreCreateScene() {
+    showLoading = true
+    editorContext.engine.editor.setSettingBoolean(
+        keypath = "ubq://page/dimOutOfPageAreas",
+        value = false,
+    )
+}
+
+/**
+ * The callback that is responsible for creating the scene.
+ */
+// highlight-starter-kit-on-create-scene
+suspend fun ApparelConfigurationBuilder.onCreateScene() {
+    getOrLoadScene(sceneUri = "file:///android_asset/scene/apparel.scene".toUri())
+}
+// highlight-starter-kit-on-create-scene
+
+/**
+ * The callback that loads all the required assets sources.
+ */
+// highlight-starter-kit-on-load-asset-sources
+suspend fun ApparelConfigurationBuilder.onLoadAssetSources() {
+    // Load asset sources in parallel from content.json files
+    coroutineScope {
+        listOf(
+            DefaultAssetSource.STICKER.key,
+            DefaultAssetSource.VECTOR_PATH.key,
+            DefaultAssetSource.FILTER_LUT.key,
+            DefaultAssetSource.FILTER_DUO_TONE.key,
+            DefaultAssetSource.CROP_PRESETS.key,
+            DefaultAssetSource.EFFECT.key,
+            DefaultAssetSource.BLUR.key,
+            DefaultAssetSource.TYPEFACE.key,
+            DemoAssetSource.IMAGE.key,
+            DemoAssetSource.TEXT_COMPONENTS.key,
+        ).forEach { assetSource ->
+            launch {
+                val baseUri = editorContext.baseUri
+                editorContext.engine.populateAssetSource(
+                    id = assetSource,
+                    jsonUri = "$baseUri/$assetSource/content.json".toUri(),
+                    replaceBaseUri = baseUri,
+                )
+            }
+        }
+    }
+
+    // Load local asset sources
+    editorContext.engine.asset.addLocalSource(
+        sourceId = DemoAssetSource.IMAGE_UPLOAD.key,
+        supportedMimeTypes = listOf(
+            "image/jpeg",
+            "image/png",
+            "image/heic",
+            "image/heif",
+            "image/svg+xml",
+            "image/gif",
+            "image/bmp",
+        ),
+    )
+
+    // Register gallery asset sources
+    listOf(
+        AssetSourceType.GalleryAllVisuals,
+        AssetSourceType.GalleryImage,
+        AssetSourceType.GalleryVideo,
+    ).forEach { type ->
+        editorContext.engine.asset.addSource(
+            source = SystemGalleryAssetSource(
+                context = editorContext.engine.applicationContext,
+                type = type,
+            ),
+        )
+    }
+    SystemGalleryPermission.setMode(systemGalleryConfiguration)
+
+    // Register text asset source
+    TypefaceProvider().provideTypeface(
+        engine = editorContext.engine,
+        name = "Roboto",
+    )?.let {
+        val textAssetSource = TextAssetSource(engine = editorContext.engine, typeface = it)
+        editorContext.engine.asset.addSource(textAssetSource)
+    }
+}
+// highlight-starter-kit-on-load-asset-sources
+
+/**
+ * The callback that is invoked right after [onCreateScene], after the scene is created.
+ */
+fun ApparelConfigurationBuilder.onPostCreateScene() {
+    val engine = editorContext.engine
+    val page = requireNotNull(engine.scene.getCurrentPage())
+    engine.block.setClipped(block = page, clipped = true)
+    engine.block.setBoolean(block = page, property = "fill/enabled", value = false)
+
+    // Add dotted outline design block.
+    engine.block.findByName(ApparelConfigurationBuilder.Companion.OUTLINE_BLOCK_NAME).firstOrNull() ?: run {
+        val outline = engine.block.create(blockType = DesignBlockType.Graphic)
+        engine.block.setName(block = outline, name = ApparelConfigurationBuilder.Companion.OUTLINE_BLOCK_NAME)
+        engine.block.setShape(
+            block = outline,
+            shape = engine.block.createShape(ShapeType.Rect),
+        )
+        engine.block.appendChild(parent = page, child = outline)
+        engine.block.setFillEnabled(block = outline, enabled = false)
+        engine.block.setStrokeEnabled(block = outline, enabled = true)
+        engine.block.setStrokeColor(
+            block = outline,
+            color = Color.fromRGBA(r = 1F, g = 1F, b = 1F),
+        )
+        engine.block.setStrokeStyle(block = outline, style = StrokeStyle.DOTTED)
+        engine.block.setStrokeWidth(block = outline, width = 1.0F)
+        engine.block.setBlendMode(block = outline, blendMode = BlendMode.DIFFERENCE)
+        engine.block.setScopeEnabled(
+            block = outline,
+            key = "editor/select",
+            enabled = false,
+        )
+        engine.block.setScopeEnabled(
+            block = outline,
+            key = "lifecycle/destroy",
+            enabled = false,
+        )
+    }
+}
+
+/**
+ * The callback that is invoked as the last step of [onCreate].
+ * It always runs, no matter success or failure on previous steps.
+ */
+fun ApparelConfigurationBuilder.onCreateFinally() {
+    showLoading = false
+}

package/android/src/main/kotlin/ly/img/editor/configuration/apparel/callback/OnExport.kt

@@ -0,0 +1,82 @@
+package ly.img.editor.configuration.apparel.callback
+
+import kotlinx.coroutines.CancellationException
+import ly.img.editor.configuration.apparel.ApparelConfigurationBuilder
+import ly.img.engine.MimeType
+import java.nio.ByteBuffer
+
+/**
+ * The callback that is invoked when the export button is clicked.
+ */
+suspend fun ApparelConfigurationBuilder.onExport(
+    preExport: suspend ApparelConfigurationBuilder.() -> Unit = {
+        onPreExport()
+    },
+    exportByteBuffer: suspend ApparelConfigurationBuilder.() -> ByteBuffer = {
+        onExportByteBuffer()
+    },
+    postExport: suspend ApparelConfigurationBuilder.(ByteBuffer) -> Unit = {
+        onPostExport(it)
+    },
+    error: suspend ApparelConfigurationBuilder.(Exception) -> Unit = {
+        onExportError(it)
+    },
+    finally: suspend ApparelConfigurationBuilder.() -> Unit = {
+        onExportFinally()
+    },
+) {
+    try {
+        preExport()
+        val result = exportByteBuffer()
+        postExport(result)
+    } catch (exception: Exception) {
+        error(exception)
+    } finally {
+        finally()
+    }
+}
+
+/**
+ * The callback that is invoked before the export is started.
+ */
+fun ApparelConfigurationBuilder.onPreExport() {
+    showLoading = true
+}
+
+/**
+ * The callback that exports the content of the editor into [ByteBuffer].
+ */
+// highlight-starter-kit-on-export-byte-buffer
+suspend fun ApparelConfigurationBuilder.onExportByteBuffer(): ByteBuffer = export(
+    block = requireNotNull(editorContext.engine.scene.get()),
+    mimeType = MimeType.PDF,
+)
+// highlight-starter-kit-on-export-byte-buffer
+
+/**
+ * The callback that is invoked after [onExportByteBuffer] and handles its output.
+ */
+// highlight-starter-kit-on-post-export
+suspend fun ApparelConfigurationBuilder.onPostExport(byteBuffer: ByteBuffer) {
+    val file = writeToFile(byteBuffer = byteBuffer, mimeType = MimeType.PDF)
+    shareFile(file = file, mimeType = MimeType.PDF)
+}
+// highlight-starter-kit-on-post-export
+
+/**
+ * The callback that is invoked in case any of the export functions throw an exception.
+ */
+fun ApparelConfigurationBuilder.onExportError(error: Exception) {
+    if (error is CancellationException) {
+        throw error
+    }
+    this.error = error
+}
+
+/**
+ * The callback that is invoked as the last step of [onExportByteBuffer].
+ * It always runs, no matter success or failure on previous steps.
+ */
+fun ApparelConfigurationBuilder.onExportFinally() {
+    showLoading = false
+}

package/android/src/main/kotlin/ly/img/editor/configuration/apparel/callback/OnLoaded.kt

@@ -0,0 +1,88 @@
+package ly.img.editor.configuration.apparel.callback
+
+import kotlinx.coroutines.coroutineScope
+import kotlinx.coroutines.flow.distinctUntilChanged
+import kotlinx.coroutines.flow.distinctUntilChangedBy
+import kotlinx.coroutines.flow.filter
+import kotlinx.coroutines.flow.map
+import kotlinx.coroutines.launch
+import ly.img.editor.configuration.apparel.ApparelConfigurationBuilder
+import ly.img.editor.core.state.EditorViewMode
+import ly.img.engine.SizeMode
+
+/**
+ * The callback that is invoked when the editor is loaded and ready to be used.
+ */
+suspend fun ApparelConfigurationBuilder.onLoaded() {
+    coroutineScope {
+        launch { observeEditorViewMode() }
+        launch { observeEditorEditMode() }
+        launch { observePageSizeChanges() }
+        launch { observeIsTouchActive() }
+    }
+}
+
+/**
+ * Function that zooms to the backdrop image (t-shirt) when the [EditorViewMode] is preview.
+ */
+suspend fun ApparelConfigurationBuilder.observeEditorViewMode() {
+    editorContext.state
+        .distinctUntilChangedBy { it.viewMode to it.insets }
+        .filter { it.viewMode is EditorViewMode.Preview }
+        .collect { state ->
+            val engine = editorContext.engine
+            val scene = requireNotNull(engine.scene.get())
+            val backdropImage =
+                engine.block.getChildren(scene).first { engine.block.getKind(it) == "image" }
+            engine.scene.immediateZoomToBlock(
+                block = backdropImage,
+                paddingLeft = state.insets.left.value,
+                paddingTop = state.insets.top.value,
+                paddingRight = state.insets.right.value,
+                paddingBottom = 0F,
+                forceUpdate = true,
+            )
+        }
+}
+
+/**
+ * Function that observes the size changes of the page and updates the dimensions of the dotted outline block
+ * accordingly.
+ */
+suspend fun ApparelConfigurationBuilder.observePageSizeChanges() {
+    val engine = editorContext.engine
+    val page = requireNotNull(engine.scene.getCurrentPage())
+    val outline = engine.block.findByName(ApparelConfigurationBuilder.OUTLINE_BLOCK_NAME).first()
+    engine.event.subscribe(listOf(page))
+        .map { engine.block.getWidth(block = page) to engine.block.getHeight(block = page) }
+        .distinctUntilChanged()
+        .collect { (width, height) ->
+            engine.block.setHeightMode(block = outline, mode = SizeMode.ABSOLUTE)
+            engine.block.setHeight(block = outline, value = height)
+            engine.block.setWidthMode(block = outline, mode = SizeMode.ABSOLUTE)
+            engine.block.setWidth(block = outline, value = width)
+            engine.block.setPositionX(
+                block = outline,
+                value = engine.block.getPositionX(block = page),
+            )
+            engine.block.setPositionY(
+                block = outline,
+                value = engine.block.getPositionY(block = page),
+            )
+        }
+}
+
+/**
+ * Function that observes the [ly.img.editor.core.state.EditorState.isTouchActive] value and updates
+ * the visibility of the dotted outline block accordingly.
+ */
+suspend fun ApparelConfigurationBuilder.observeIsTouchActive() {
+    val engine = editorContext.engine
+    val outline = engine.block.findByName(ApparelConfigurationBuilder.OUTLINE_BLOCK_NAME).first()
+    editorContext.state
+        .distinctUntilChangedBy { it.isTouchActive }
+        .collect {
+            engine.block.setVisible(block = outline, visible = it.isTouchActive)
+            engine.block.setOpacity(block = outline, value = if (it.isTouchActive) 1F else 0F)
+        }
+}

package/android/src/main/kotlin/ly/img/editor/configuration/apparel/component/CanvasMenu.kt

@@ -0,0 +1,45 @@
+@file:Suppress("UnusedReceiverParameter")
+
+package ly.img.editor.configuration.apparel.component
+
+import androidx.compose.runtime.Composable
+import ly.img.editor.configuration.apparel.ApparelConfigurationBuilder
+import ly.img.editor.core.component.CanvasMenu
+import ly.img.editor.core.component.EditorComponentId
+import ly.img.editor.core.component.remember
+import ly.img.editor.core.component.rememberBringForward
+import ly.img.editor.core.component.rememberDelete
+import ly.img.editor.core.component.rememberDuplicate
+import ly.img.editor.core.component.rememberSelectGroup
+import ly.img.editor.core.component.rememberSendBackward
+
+/**
+ * The configuration of the component that is displayed as horizontal list of items next to
+ * the selected design block.
+ */
+@Composable
+fun ApparelConfigurationBuilder.rememberCanvasMenu() = CanvasMenu.remember {
+    listBuilder = {
+        CanvasMenu.ListBuilder.remember {
+            add { CanvasMenu.Button.rememberSelectGroup() }
+            if (editorContext.isSelectionInGroup) {
+                add {
+                    CanvasMenu.Divider.remember {
+                        id = { EditorComponentId("ly.img.component.canvasMenu.divider1") }
+                    }
+                }
+            }
+            add { CanvasMenu.Button.rememberBringForward() }
+            add { CanvasMenu.Button.rememberSendBackward() }
+            if (editorContext.canSelectionMove) {
+                add {
+                    CanvasMenu.Divider.remember {
+                        id = { EditorComponentId("ly.img.component.canvasMenu.divider2") }
+                    }
+                }
+            }
+            add { CanvasMenu.Button.rememberDuplicate() }
+            add { CanvasMenu.Button.rememberDelete() }
+        }
+    }
+}

package/android/src/main/kotlin/ly/img/editor/configuration/apparel/component/Dock.kt

@@ -0,0 +1,37 @@
+@file:Suppress("UnusedReceiverParameter")
+
+package ly.img.editor.configuration.apparel.component
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.graphics.Color
+import ly.img.editor.configuration.apparel.ApparelConfigurationBuilder
+import ly.img.editor.core.component.DefaultDecoration
+import ly.img.editor.core.component.Dock
+import ly.img.editor.core.component.remember
+import ly.img.editor.core.component.rememberAssetLibrary
+import ly.img.editor.core.state.EditorViewMode
+
+/**
+ * The configuration of the component that is displayed as horizontal list of items at the bottom of the editor.
+ */
+@Composable
+fun ApparelConfigurationBuilder.rememberDock() = Dock.remember {
+    visible = {
+        val state by editorContext.state.collectAsState()
+        // Hide Dock in preview mode
+        state.viewMode !is EditorViewMode.Preview
+    }
+    decoration = {
+        // Show transparent background
+        Dock.DefaultDecoration(
+            background = Color.Transparent,
+        ) { it() }
+    }
+    listBuilder = {
+        Dock.ListBuilder.remember {
+            add { Dock.Button.rememberAssetLibrary() }
+        }
+    }
+}

package/android/src/main/kotlin/ly/img/editor/configuration/apparel/component/InspectorBar.kt

@@ -0,0 +1,52 @@
+@file:Suppress("UnusedReceiverParameter")
+
+package ly.img.editor.configuration.apparel.component
+
+import androidx.compose.runtime.Composable
+import ly.img.editor.configuration.apparel.ApparelConfigurationBuilder
+import ly.img.editor.core.component.InspectorBar
+import ly.img.editor.core.component.remember
+import ly.img.editor.core.component.rememberAdjustments
+import ly.img.editor.core.component.rememberBlur
+import ly.img.editor.core.component.rememberCrop
+import ly.img.editor.core.component.rememberDelete
+import ly.img.editor.core.component.rememberDuplicate
+import ly.img.editor.core.component.rememberEditText
+import ly.img.editor.core.component.rememberEffect
+import ly.img.editor.core.component.rememberEnterGroup
+import ly.img.editor.core.component.rememberFillStroke
+import ly.img.editor.core.component.rememberFilter
+import ly.img.editor.core.component.rememberFormatText
+import ly.img.editor.core.component.rememberLayer
+import ly.img.editor.core.component.rememberReplace
+import ly.img.editor.core.component.rememberSelectGroup
+import ly.img.editor.core.component.rememberShape
+import ly.img.editor.core.component.rememberTextBackground
+
+/**
+ * The configuration of the component that is displayed as horizontal list of items at the
+ * bottom of the editor when a design block is selected.
+ */
+@Composable
+fun ApparelConfigurationBuilder.rememberInspectorBar() = InspectorBar.remember {
+    listBuilder = {
+        InspectorBar.ListBuilder.remember {
+            add { InspectorBar.Button.rememberReplace() } // Image, Sticker, Audio
+            add { InspectorBar.Button.rememberEditText() } // Text
+            add { InspectorBar.Button.rememberFormatText() } // Text
+            add { InspectorBar.Button.rememberFillStroke() } // Page, Image, Shape, Text
+            add { InspectorBar.Button.rememberTextBackground() } // Text
+            add { InspectorBar.Button.rememberCrop() } // Image
+            add { InspectorBar.Button.rememberAdjustments() } // Image
+            add { InspectorBar.Button.rememberFilter() } // Image
+            add { InspectorBar.Button.rememberEffect() } // Image
+            add { InspectorBar.Button.rememberBlur() } // Image
+            add { InspectorBar.Button.rememberShape() } // Image, Shape
+            add { InspectorBar.Button.rememberSelectGroup() } // Image, Sticker, Shape, Text
+            add { InspectorBar.Button.rememberEnterGroup() } // Group
+            add { InspectorBar.Button.rememberLayer() } // Image, Sticker, Shape, Text
+            add { InspectorBar.Button.rememberDuplicate() } // Image, Sticker, Shape, Text
+            add { InspectorBar.Button.rememberDelete() } // Image, Sticker, Shape, Text
+        }
+    }
+}

package/android/src/main/kotlin/ly/img/editor/configuration/apparel/component/NavigationBar.kt

@@ -0,0 +1,45 @@
+@file:Suppress("UnusedReceiverParameter")
+
+package ly.img.editor.configuration.apparel.component
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import ly.img.editor.configuration.apparel.ApparelConfigurationBuilder
+import ly.img.editor.core.component.EditorTrigger
+import ly.img.editor.core.component.NavigationBar
+import ly.img.editor.core.component.remember
+import ly.img.editor.core.component.rememberCloseEditor
+import ly.img.editor.core.component.rememberExport
+import ly.img.editor.core.component.rememberRedo
+import ly.img.editor.core.component.rememberTogglePreviewMode
+import ly.img.editor.core.component.rememberUndo
+
+/**
+ * The configuration of the component that is displayed as horizontal list of items at the top of the editor.
+ */
+@Composable
+fun ApparelConfigurationBuilder.rememberNavigationBar() = NavigationBar.remember {
+    scope = {
+        val historyTrigger by EditorTrigger.remember {
+            editorContext.engine.editor.onHistoryUpdated()
+        }
+        // Update NavigationBar whenever the editor history changes
+        remember(this, historyTrigger) {
+            NavigationBar.Scope(parentScope = this)
+        }
+    }
+    listBuilder = {
+        NavigationBar.ListBuilder.remember {
+            aligned(alignment = Alignment.Start) {
+                add { NavigationBar.Button.rememberCloseEditor() }
+            }
+            aligned(alignment = Alignment.End) {
+                add { NavigationBar.Button.rememberUndo() }
+                add { NavigationBar.Button.rememberRedo() }
+                add { NavigationBar.Button.rememberTogglePreviewMode() }
+                add { NavigationBar.Button.rememberExport() }
+            }
+        }
+    }
+}

package/android/src/main/kotlin/ly/img/editor/configuration/apparel/component/Overlay.kt

@@ -0,0 +1,15 @@
+package ly.img.editor.configuration.apparel.component
+
+import androidx.compose.runtime.Composable
+import ly.img.editor.configuration.apparel.ApparelConfigurationBuilder
+import ly.img.editor.core.component.EditorComponent
+import ly.img.editor.core.component.remember
+
+/**
+ * The configuration of the component that is displayed over the editor. It is useful if you want to display a popup dialog or anything in the
+ * overlay.
+ */
+@Composable
+fun ApparelConfigurationBuilder.rememberOverlay() = EditorComponent.remember {
+    decoration = { Overlay() }
+}

package/android/src/main/kotlin/ly/img/editor/configuration/design/DesignConfigurationBuilder.kt

@@ -0,0 +1,106 @@
+package ly.img.editor.configuration.design
+
+import androidx.compose.runtime.Stable
+import ly.img.editor.BasicConfigurationBuilder
+import ly.img.editor.configuration.design.callback.onCreate
+import ly.img.editor.configuration.design.callback.onExport
+import ly.img.editor.configuration.design.callback.onLoaded
+import ly.img.editor.configuration.design.component.rememberCanvasMenu
+import ly.img.editor.configuration.design.component.rememberDock
+import ly.img.editor.configuration.design.component.rememberInspectorBar
+import ly.img.editor.configuration.design.component.rememberNavigationBar
+import ly.img.editor.configuration.design.component.rememberOverlay
+import ly.img.editor.core.EditorScope
+import ly.img.editor.core.ScopedProperty
+import ly.img.editor.core.component.EditorComponent
+import ly.img.editor.core.event.EditorEvent
+
+/**
+ * Configuration builder class for design editor starter kit.
+ */
+@Stable
+class DesignConfigurationBuilder : BasicConfigurationBuilder() {
+    /**
+     * The callback that is invoked when the editor is created.
+     * Check parent class declaration for more details.
+     */
+    override var onCreate: (suspend EditorScope.() -> Unit)? = {
+        onCreate()
+    }
+
+    /**
+     * The callback that is invoked when the editor is loaded and ready to be used.
+     * Check parent class declaration for more details.
+     */
+    override var onLoaded: (suspend EditorScope.() -> Unit)? = {
+        onLoaded()
+    }
+
+    /**
+     * The callback that is invoked when the export button is clicked.
+     * Check parent class declaration for more details.
+     */
+    override var onExport: (suspend EditorScope.() -> Unit)? = {
+        onExport()
+    }
+
+    /**
+     * The callback that is invoked after [EditorEvent.OnClose] event is triggered or when the system back button is clicked
+     * and editor cannot handle the event internally.
+     * Check parent class declaration for more details.
+     */
+    override var onClose: (suspend EditorScope.() -> Unit)? = {
+        showConfirmationOrCloseEditor()
+    }
+
+    /**
+     * The callback that is invoked after the editor captures an error.
+     * Check parent class declaration for more details.
+     */
+    override var onError: (suspend EditorScope.(Throwable) -> Unit)? = {
+        error = it
+    }
+
+    /**
+     * The configuration of the component that is displayed as horizontal list of items at the bottom of the editor.
+     * Check parent class declaration for more details.
+     */
+    override var dock: ScopedProperty<EditorScope, EditorComponent<*>>? = {
+        rememberDock()
+    }
+
+    /**
+     * The configuration of the component that is displayed as horizontal list of items at the top of the editor.
+     * Check parent class declaration for more details.
+     */
+    override var navigationBar: ScopedProperty<EditorScope, EditorComponent<*>>? = {
+        rememberNavigationBar()
+    }
+
+    /**
+     * The configuration of the component that is displayed as horizontal list of items at the
+     * bottom of the editor when a design block is selected.
+     * Check parent class declaration for more details.
+     */
+    override var inspectorBar: ScopedProperty<EditorScope, EditorComponent<*>>? = {
+        rememberInspectorBar()
+    }
+
+    /**
+     * The configuration of the component that is displayed as horizontal list of items next to
+     * the selected design block.
+     * Check parent class declaration for more details.
+     */
+    override var canvasMenu: ScopedProperty<EditorScope, EditorComponent<*>>? = {
+        rememberCanvasMenu()
+    }
+
+    /**
+     * The configuration of the component that is displayed over the editor. It is useful if you want to display a popup dialog or anything in the
+     * overlay.
+     * Check parent class declaration for more details.
+     */
+    override var overlay: ScopedProperty<EditorScope, EditorComponent<*>>? = {
+        rememberOverlay()
+    }
+}