From 1996067c69d559285a21dbb07413b7e1c8bc906f Mon Sep 17 00:00:00 2001
From: wnhlee <2wheeh@gmail.com>
Date: Fri, 26 Apr 2024 16:31:43 +0900
Subject: [PATCH] refactor: move useEditorRef into EditorRefPlugin

---
 ui/src/editor/plugins/eidtor-ref/index.tsx | 9 +++++++++
 ui/src/editor/plugins/index.tsx            | 8 ++------
 2 files changed, 11 insertions(+), 6 deletions(-)
 create mode 100644 ui/src/editor/plugins/eidtor-ref/index.tsx

diff --git a/ui/src/editor/plugins/eidtor-ref/index.tsx b/ui/src/editor/plugins/eidtor-ref/index.tsx
new file mode 100644
index 00000000..77c5de87
--- /dev/null
+++ b/ui/src/editor/plugins/eidtor-ref/index.tsx
@@ -0,0 +1,9 @@
+import { EditorRefPlugin as LexicalEditorRefPlugin } from '@lexical/react/LexicalEditorRefPlugin';
+
+import { useEditorRef } from '@/context/editor/editor-ref-context';
+
+export function EditorRefPlugin() {
+  const { onRef } = useEditorRef() ?? {};
+
+  return onRef ? <LexicalEditorRefPlugin editorRef={onRef} /> : null;
+}
diff --git a/ui/src/editor/plugins/index.tsx b/ui/src/editor/plugins/index.tsx
index 492bf9a5..9497bb1d 100644
--- a/ui/src/editor/plugins/index.tsx
+++ b/ui/src/editor/plugins/index.tsx
@@ -1,12 +1,10 @@
 import { ContentEditable } from '@lexical/react/LexicalContentEditable';
-import { EditorRefPlugin } from '@lexical/react/LexicalEditorRefPlugin';
 import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
 import { ListPlugin } from '@lexical/react/LexicalListPlugin';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin';
 
-import { useEditorRef } from '@/context/editor/editor-ref-context';
-
+import { EditorRefPlugin } from '@/editor/plugins/eidtor-ref';
 import { FixIOSKoreanIssuePlugin } from '@/editor/plugins/fix-ios-korean-issue';
 import { HistoryPlugin } from '@/editor/plugins/history';
 import { ListMaxIndentLevelPlugin } from '@/editor/plugins/list-max-indent-level';
@@ -21,8 +19,6 @@ function Placeholder() {
 }
 
 export function Plugins({ maxLength }: { maxLength?: number }) {
-  const { onRef } = useEditorRef() ?? {};
-
   return (
     <>
       <RichTextPlugin
@@ -43,7 +39,7 @@ export function Plugins({ maxLength }: { maxLength?: number }) {
       <FixIOSKoreanIssuePlugin />
       <ListMaxIndentLevelPlugin maxDepth={3} />
       <PlaceholderPlugin />
-      {onRef !== undefined && <EditorRefPlugin editorRef={onRef} />}
+      <EditorRefPlugin />
       {maxLength && <MaxLengthPlugin maxLength={maxLength} />}
     </>
   );