From 93e4c8c26e96f5ab4076aa41224279d4e4400a33 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sat, 20 Aug 2022 01:12:31 +0300
Subject: [PATCH] without passing element

---
 .../wrapper-component/text-editor/editor.tsx  | 15 +++++----
 .../hooks/use-content-editable.tsx            | 31 -------------------
 .../wrapper-component/wrapper-component.tsx   |  5 ++-
 3 files changed, 9 insertions(+), 42 deletions(-)
 delete mode 100644 apps/designer/app/canvas/features/wrapper-component/text-editor/hooks/use-content-editable.tsx

diff --git a/apps/designer/app/canvas/features/wrapper-component/text-editor/editor.tsx b/apps/designer/app/canvas/features/wrapper-component/text-editor/editor.tsx
index f33724b0e8..f9318fa648 100644
--- a/apps/designer/app/canvas/features/wrapper-component/text-editor/editor.tsx
+++ b/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 (
diff --git a/apps/designer/app/canvas/features/wrapper-component/text-editor/hooks/use-content-editable.tsx b/apps/designer/app/canvas/features/wrapper-component/text-editor/hooks/use-content-editable.tsx
deleted file mode 100644
index 3edd0dae17..0000000000
--- a/apps/designer/app/canvas/features/wrapper-component/text-editor/hooks/use-content-editable.tsx
+++ /dev/null
@@ -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];
-};
diff --git a/apps/designer/app/canvas/features/wrapper-component/wrapper-component.tsx b/apps/designer/app/canvas/features/wrapper-component/wrapper-component.tsx
index 9a16adb378..e4921062a0 100644
--- a/apps/designer/app/canvas/features/wrapper-component/wrapper-component.tsx
+++ b/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) => {