@imgly/editor-react-native 1.73.0 → 1.73.1

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

@@ -0,0 +1,143 @@
+@file:Suppress("UnusedReceiverParameter")
+
+package ly.img.editor.configuration.photo.callback
+
+import android.net.Uri
+import android.util.SizeF
+import androidx.core.net.toUri
+import kotlinx.coroutines.coroutineScope
+import kotlinx.coroutines.launch
+import ly.img.editor.configuration.photo.PhotoConfigurationBuilder
+import ly.img.editor.core.library.data.TextAssetSource
+import ly.img.editor.core.library.data.TypefaceProvider
+import ly.img.engine.DefaultAssetSource
+import ly.img.engine.DemoAssetSource
+import ly.img.engine.DesignBlock
+import ly.img.engine.SceneLayout
+import ly.img.engine.populateAssetSource
+
+/**
+ * The callback that is invoked when the editor is created.
+ */
+suspend fun PhotoConfigurationBuilder.onCreate(
+    preCreateScene: suspend PhotoConfigurationBuilder.() -> Unit = {
+        onPreCreateScene()
+    },
+    createScene: suspend PhotoConfigurationBuilder.() -> Unit = {
+        onCreateScene()
+    },
+    loadAssetSources: suspend PhotoConfigurationBuilder.() -> Unit = {
+        onLoadAssetSources()
+    },
+    postCreateScene: suspend PhotoConfigurationBuilder.() -> Unit = {
+        onPostCreateScene()
+    },
+    finally: suspend PhotoConfigurationBuilder.() -> Unit = {
+        onCreateFinally()
+    },
+) {
+    try {
+        preCreateScene()
+        createScene()
+        loadAssetSources()
+        postCreateScene()
+    } finally {
+        finally()
+    }
+}
+
+/**
+ * The callback that is invoked before the scene is created.
+ */
+fun PhotoConfigurationBuilder.onPreCreateScene() {
+    showLoading = true
+    editorContext.engine.editor.setSettingBoolean(keypath = "page/moveChildrenWhenCroppingFill", value = true)
+    editorContext.engine.editor.setSettingBoolean(keypath = "page/selectWhenNoBlocksSelected", value = true)
+    editorContext.engine.editor.setSettingBoolean(keypath = "page/highlightWhenCropping", value = true)
+    editorContext.engine.editor.setSettingBoolean(keypath = "doubleClickToCropEnabled", value = false)
+}
+
+/**
+ * The callback that is responsible for creating the scene.
+ */
+// highlight-starter-kit-on-create-scene
+suspend fun PhotoConfigurationBuilder.onCreateScene() {
+    getOrCreateSceneFromImage(imageUri = "https://cdn.img.ly/assets/demo/v3/ly.img.image/images/sample_1.jpg".toUri())
+}
+
+suspend fun PhotoConfigurationBuilder.getOrCreateSceneFromImage(
+    imageUri: Uri,
+    size: SizeF? = null,
+    dpi: Float = 300F,
+    pixelScaleFactor: Float = 1F,
+    sceneLayout: SceneLayout = SceneLayout.FREE,
+): DesignBlock = editorContext.engine.scene.get() ?: editorContext.engine.scene.createFromImage(
+    imageUri = imageUri,
+    dpi = dpi,
+    pixelScaleFactor = pixelScaleFactor,
+    sceneLayout = sceneLayout,
+).also {
+    size?.let {
+        val page = requireNotNull(editorContext.engine.scene.getCurrentPage())
+        editorContext.engine.block.setWidth(block = page, value = size.width)
+        editorContext.engine.block.setHeight(block = page, value = size.height)
+    }
+}
+// highlight-starter-kit-on-create-scene
+
+/**
+ * The callback that loads all the required assets sources.
+ */
+// highlight-starter-kit-on-load-asset-sources
+suspend fun PhotoConfigurationBuilder.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.PAGE_PRESETS.key,
+            DefaultAssetSource.EFFECT.key,
+            DefaultAssetSource.BLUR.key,
+            DefaultAssetSource.TYPEFACE.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,
+                )
+            }
+        }
+    }
+
+    // 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 PhotoConfigurationBuilder.onPostCreateScene() {
+    val page = requireNotNull(editorContext.engine.scene.getCurrentPage())
+    editorContext.engine.block.setScopeEnabled(block = page, key = "layer/move", 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 PhotoConfigurationBuilder.onCreateFinally() {
+    showLoading = false
+}

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

@@ -0,0 +1,82 @@
+package ly.img.editor.configuration.photo.callback
+
+import kotlinx.coroutines.CancellationException
+import ly.img.editor.configuration.photo.PhotoConfigurationBuilder
+import ly.img.engine.MimeType
+import java.nio.ByteBuffer
+
+/**
+ * The callback that is invoked when the export button is clicked.
+ */
+suspend fun PhotoConfigurationBuilder.onExport(
+    preExport: suspend PhotoConfigurationBuilder.() -> Unit = {
+        onPreExport()
+    },
+    exportByteBuffer: suspend PhotoConfigurationBuilder.() -> ByteBuffer = {
+        onExportByteBuffer()
+    },
+    postExport: suspend PhotoConfigurationBuilder.(ByteBuffer) -> Unit = {
+        onPostExport(it)
+    },
+    error: suspend PhotoConfigurationBuilder.(Exception) -> Unit = {
+        onExportError(it)
+    },
+    finally: suspend PhotoConfigurationBuilder.() -> 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 PhotoConfigurationBuilder.onPreExport() {
+    showLoading = true
+}
+
+/**
+ * The callback that exports the content of the editor into [ByteBuffer].
+ */
+// highlight-starter-kit-on-export-byte-buffer
+suspend fun PhotoConfigurationBuilder.onExportByteBuffer(): ByteBuffer = export(
+    block = requireNotNull(editorContext.engine.scene.get()),
+    mimeType = MimeType.PNG,
+)
+// 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 PhotoConfigurationBuilder.onPostExport(byteBuffer: ByteBuffer) {
+    val file = writeToFile(byteBuffer = byteBuffer, mimeType = MimeType.PNG)
+    shareFile(file = file, mimeType = MimeType.PNG)
+}
+// highlight-starter-kit-on-post-export
+
+/**
+ * The callback that is invoked in case any of the export functions throw an exception.
+ */
+fun PhotoConfigurationBuilder.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 PhotoConfigurationBuilder.onExportFinally() {
+    showLoading = false
+}

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

@@ -0,0 +1,49 @@
+package ly.img.editor.configuration.photo.callback
+
+import androidx.compose.ui.unit.dp
+import kotlinx.coroutines.coroutineScope
+import kotlinx.coroutines.flow.distinctUntilChangedBy
+import kotlinx.coroutines.flow.filter
+import kotlinx.coroutines.launch
+import ly.img.editor.configuration.photo.PhotoConfigurationBuilder
+import ly.img.editor.core.component.data.Insets
+import ly.img.editor.core.state.EditorViewMode
+
+/**
+ * The callback that is invoked when the editor is loaded and ready to be used.
+ */
+suspend fun PhotoConfigurationBuilder.onLoaded() {
+    coroutineScope {
+        launch { observeEditorViewMode() }
+        launch {
+            observeEditorEditMode(
+                extraInsets = { Insets(value = if (it == "Crop") 24.dp else 0.dp) },
+            ) { editMode ->
+                // Allow resize only in crop mode.
+                editorContext.engine.editor.setSettingBoolean(
+                    keypath = "page/allowResizeInteraction",
+                    value = editMode == "Crop",
+                )
+            }
+        }
+    }
+}
+
+/**
+ * Function that zooms to the current page when the [EditorViewMode] is preview.
+ */
+suspend fun PhotoConfigurationBuilder.observeEditorViewMode() {
+    editorContext.state
+        .distinctUntilChangedBy { it.viewMode to it.insets }
+        .filter { it.viewMode is EditorViewMode.Preview }
+        .collect { state ->
+            editorContext.engine.scene.immediateZoomToBlock(
+                block = requireNotNull(editorContext.engine.scene.getCurrentPage()),
+                paddingLeft = state.insets.left.value,
+                paddingTop = state.insets.top.value,
+                paddingRight = state.insets.right.value,
+                paddingBottom = 0F,
+                forceUpdate = true,
+            )
+        }
+}

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

@@ -0,0 +1,45 @@
+@file:Suppress("UnusedReceiverParameter")
+
+package ly.img.editor.configuration.photo.component
+
+import androidx.compose.runtime.Composable
+import ly.img.editor.configuration.photo.PhotoConfigurationBuilder
+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 PhotoConfigurationBuilder.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/photo/component/Dock.kt

@@ -0,0 +1,43 @@
+@file:Suppress("UnusedReceiverParameter")
+
+package ly.img.editor.configuration.photo.component
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import ly.img.editor.configuration.photo.PhotoConfigurationBuilder
+import ly.img.editor.core.component.Dock
+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.rememberEffect
+import ly.img.editor.core.component.rememberFilter
+import ly.img.editor.core.component.rememberShapesLibrary
+import ly.img.editor.core.component.rememberStickersLibrary
+import ly.img.editor.core.component.rememberTextLibrary
+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 PhotoConfigurationBuilder.rememberDock() = Dock.remember {
+    visible = {
+        val state by editorContext.state.collectAsState()
+        // Hide Dock in preview mode
+        state.viewMode !is EditorViewMode.Preview
+    }
+    listBuilder = {
+        Dock.ListBuilder.remember {
+            add { Dock.Button.rememberAdjustments() }
+            add { Dock.Button.rememberFilter() }
+            add { Dock.Button.rememberEffect() }
+            add { Dock.Button.rememberBlur() }
+            add { Dock.Button.rememberCrop() }
+            add { Dock.Button.rememberTextLibrary() }
+            add { Dock.Button.rememberShapesLibrary() }
+            add { Dock.Button.rememberStickersLibrary() }
+        }
+    }
+}

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

@@ -0,0 +1,52 @@
+@file:Suppress("UnusedReceiverParameter")
+
+package ly.img.editor.configuration.photo.component
+
+import androidx.compose.runtime.Composable
+import ly.img.editor.configuration.photo.PhotoConfigurationBuilder
+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 PhotoConfigurationBuilder.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/photo/component/NavigationBar.kt

@@ -0,0 +1,45 @@
+@file:Suppress("UnusedReceiverParameter")
+
+package ly.img.editor.configuration.photo.component
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import ly.img.editor.configuration.photo.PhotoConfigurationBuilder
+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 PhotoConfigurationBuilder.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/photo/component/Overlay.kt

@@ -0,0 +1,15 @@
+package ly.img.editor.configuration.photo.component
+
+import androidx.compose.runtime.Composable
+import ly.img.editor.configuration.photo.PhotoConfigurationBuilder
+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 PhotoConfigurationBuilder.rememberOverlay() = EditorComponent.remember {
+    decoration = { Overlay() }
+}

package/android/src/main/kotlin/ly/img/editor/configuration/postcard/EditorActivity.kt

@@ -0,0 +1,37 @@
+// highlight-starter-kit-activity-full
+package ly.img.editor.configuration.postcard
+
+import android.os.Bundle
+import androidx.activity.ComponentActivity
+import androidx.activity.compose.setContent
+import androidx.activity.enableEdgeToEdge
+import ly.img.editor.Editor
+import ly.img.editor.core.configuration.EditorConfiguration
+import ly.img.editor.core.configuration.remember
+
+/**
+ * Encapsulated editor to be used in legacy activity navigation.
+ * Delete this file if you are using jetpack compose navigation.
+ */
+class EditorActivity : ComponentActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        // This is required to remove the default action bar on top.
+        setTheme(android.R.style.Theme_Material_Light_NoActionBar)
+        // This is required, so that the editor is displayed full screen on relatively older devices.
+        enableEdgeToEdge()
+        setContent {
+            Editor(
+                license = null, // pass null or empty for evaluation mode with watermark
+                configuration = {
+                    EditorConfiguration.remember(::PostcardConfigurationBuilder)
+                },
+                onClose = {
+                    // Finish the activity, potentially handle errors.
+                    finish()
+                },
+            )
+        }
+    }
+}
+// highlight-starter-kit-activity-full

package/android/src/main/kotlin/ly/img/editor/configuration/postcard/PostcardConfigurationBuilder.kt

@@ -0,0 +1,106 @@
+package ly.img.editor.configuration.postcard
+
+import androidx.compose.runtime.Stable
+import ly.img.editor.BasicConfigurationBuilder
+import ly.img.editor.configuration.postcard.callback.onCreate
+import ly.img.editor.configuration.postcard.callback.onExport
+import ly.img.editor.configuration.postcard.callback.onLoaded
+import ly.img.editor.configuration.postcard.component.rememberCanvasMenu
+import ly.img.editor.configuration.postcard.component.rememberDock
+import ly.img.editor.configuration.postcard.component.rememberInspectorBar
+import ly.img.editor.configuration.postcard.component.rememberNavigationBar
+import ly.img.editor.configuration.postcard.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 postcard editor starter kit.
+ */
+@Stable
+class PostcardConfigurationBuilder : 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()
+    }
+}