without passing element

apps/designer/app/canvas/features/wrapper-component/text-editor/editor.tsx

@@ -10,6 +10,7 @@ import { ToolbarConnectorPlugin } from "./plugins/plugin-toolbar-connector";
 import { OnChangePlugin } from "./plugins/plugin-on-change";
 import { config } from "./config";
 import { useEffect } from "react";
+import { useSelectedElement } from "~/canvas/shared/nano-states";
 
 type EditorProps = {
   children?: JSX.Element;
@@ -18,17 +19,15 @@ type EditorProps = {
   onChange: (updates: ChildrenUpdates) => void;
 };
 
-const Editor = ({
-  element,
-  instance,
-  editable,
-  children,
-  onChange,
-}: EditorProps) => {
+const Editor = ({ instance, editable, children, onChange }: EditorProps) => {
   const [editor] = useLexicalComposerContext();
+  const [element] = useSelectedElement();
 
   useEffect(() => {
-    editor.setRootElement(element);
+    if (element === undefined) editor.setRootElement(element);
+    return () => {
+      editor.setRootElement(null);
+    };
   }, [element]);
 
   return (

apps/designer/app/canvas/features/wrapper-component/text-editor/hooks/use-content-editable.tsx

@@ -1,31 +0,0 @@
-import { useLexicalComposerContext } from "../lexical";
-import { useCallback, useEffect } from "react";
-
-type RefCallback = (rootElement: null | HTMLElement) => void;
-
-const props = {
-  //autoCapitalize: false,
-  //autoComplete: false,
-  contentEditable: true,
-};
-
-export const useContentEditable = (
-  isEditing: boolean
-): [RefCallback, typeof props | undefined] => {
-  const [editor] = useLexicalComposerContext();
-
-  const ref: RefCallback = useCallback(
-    (rootElement) => {
-      editor.setRootElement(rootElement);
-    },
-    [editor]
-  );
-
-  useEffect(() => {
-    if (isEditing === true) return;
-    // Lets unset the root element when we are not editing
-    editor.setRootElement(null);
-  }, [editor, isEditing]);
-
-  return [ref, isEditing ? props : undefined];
-};

apps/designer/app/canvas/features/wrapper-component/wrapper-component.tsx

@@ -1,4 +1,4 @@
-import { useCallback, MouseEvent, FormEvent, useMemo, useRef } from "react";
+import { useCallback, MouseEvent, FormEvent, useMemo } from "react";
 import {
   type Instance,
   type CSS,
@@ -31,7 +31,7 @@ export const WrapperComponentDev = ({
 }: WrapperComponentDevProps) => {
   const className = useCss({ instance, css });
   const [editingInstanceId] = useTextEditingInstanceId();
-  const [element, setSelectedElement] = useSelectedElement();
+  const [, setSelectedElement] = useSelectedElement();
   const isEditing = editingInstanceId === instance.id;
   const focusRefCallback = useEnsureFocus();
 
@@ -78,7 +78,6 @@ export const WrapperComponentDev = ({
   if (isEditing) {
     return (
       <Editor
-        element={element}
         instance={instance}
         editable={<Component {...props} />}
         onChange={(updates) => {