From cd23011d100348723a024c5f8bee24a1884ab985 Mon Sep 17 00:00:00 2001
From: Jimmy Liow <lyj@hainatravel.com>
Date: Wed, 23 Oct 2024 16:36:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20EditorRefPlugin?=
 =?UTF-8?q?=EF=BC=9B=E4=BD=BF=E7=94=A8=20Lexical=20Editor=20=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=9B=BE=E6=96=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/LexicalEditor/Index.jsx        |  4 ++-
 .../LexicalEditor/plugins/EditorRefPlugin.jsx | 24 ++++++++++++++++++
 src/views/DesktopApp.jsx                      |  8 ++++--
 src/views/accounts/SnippetList.jsx            | 25 ++++++++++++++++---
 4 files changed, 54 insertions(+), 7 deletions(-)
 create mode 100644 src/components/LexicalEditor/plugins/EditorRefPlugin.jsx

diff --git a/src/components/LexicalEditor/Index.jsx b/src/components/LexicalEditor/Index.jsx
index 51f65f3..da46ffc 100644
--- a/src/components/LexicalEditor/Index.jsx
+++ b/src/components/LexicalEditor/Index.jsx
@@ -27,6 +27,7 @@ import ListMaxIndentLevelPlugin from "./plugins/ListMaxIndentLevelPlugin";
 import CodeHighlightPlugin from "./plugins/CodeHighlightPlugin";
 import AutoLinkPlugin from "./plugins/AutoLinkPlugin";
 import TabFocusPlugin from './plugins/TabFocusPlugin';
+import EditorRefPlugin from './plugins/EditorRefPlugin'
 // import ImagesPlugin from './plugins/ImagesPlugin';
 import { ImageNode } from './nodes/ImageNode';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
@@ -126,7 +127,7 @@ function MyOnChangePlugin({ onChange }) {
   }, [editor, onChange]);
   return null;
 }
-export default function Editor({ isRichText, onChange, initialValue, ...props }) {
+export default function Editor({ isRichText, editorRef, onChange, initialValue, ...props }) {
   // const isEditable = useLexicalEditable();
   return (
     <LexicalComposer initialConfig={editorConfig}>
@@ -152,6 +153,7 @@ export default function Editor({ isRichText, onChange, initialValue, ...props })
           <TabFocusPlugin />
           <TabIndentationPlugin />
           <HorizontalRulePlugin />
+          <EditorRefPlugin editorRef={editorRef} />
           {/* <ImagesPlugin /> */}
           {/* <ClickableLinkPlugin disabled={isEditable} /> */}
           <MyOnChangePlugin onChange={onChange}/>
diff --git a/src/components/LexicalEditor/plugins/EditorRefPlugin.jsx b/src/components/LexicalEditor/plugins/EditorRefPlugin.jsx
new file mode 100644
index 0000000..f53d588
--- /dev/null
+++ b/src/components/LexicalEditor/plugins/EditorRefPlugin.jsx
@@ -0,0 +1,24 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { useEffect } from 'react'
+
+/**
+ *
+ * Use this plugin to access the editor instance outside of the
+ * LexicalComposer. This can help with things like buttons or other
+ * UI components that need to update or read EditorState but need to
+ * be positioned outside the LexicalComposer in the React tree.
+ */
+export default function EditorRefPlugin({ editorRef }) {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    if (typeof editorRef === 'function') {
+      editorRef(editor)
+    } else if (typeof editorRef === 'object') {
+      editorRef.current = editor
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor])
+
+  return null
+}
diff --git a/src/views/DesktopApp.jsx b/src/views/DesktopApp.jsx
index 0a68282..dfb8203 100644
--- a/src/views/DesktopApp.jsx
+++ b/src/views/DesktopApp.jsx
@@ -143,7 +143,11 @@ function DesktopApp() {
                 items: [
                   {
                     label: <Link to="/account/profile">个人资料</Link>,
-                    key: '1',
+                    key: 'profile',
+                  },
+                  {
+                    label: <Link to="/account/snippet-list">图文集管理</Link>,
+                    key: 'snippet-list',
                   },
                   { type: 'divider' },
                   { label: <ReloadPrompt force />, key: 'reload' },
@@ -152,7 +156,7 @@ function DesktopApp() {
                   { type: 'divider' },
                   {
                     label: <Link to="/p/dingding/logout">退出</Link>,
-                    key: '3',
+                    key: 'logout',
                   },
                 ],
               }}
diff --git a/src/views/accounts/SnippetList.jsx b/src/views/accounts/SnippetList.jsx
index 3c69f19..f7d3232 100644
--- a/src/views/accounts/SnippetList.jsx
+++ b/src/views/accounts/SnippetList.jsx
@@ -6,11 +6,15 @@ import { copy, isNotEmpty, isEmpty } from '@/utils/commons'
 import { WhatsAppOutlined } from '@ant-design/icons'
 import { Row, Col, Tag, List, Form, Input, Button, Space } from 'antd'
 import dayjs from 'dayjs'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useState, useRef } from 'react'
 import { Link } from 'react-router-dom'
+import LexicalEditor from '@/components/LexicalEditor'
+import {$generateNodesFromDOM} from '@lexical/html'
 
 function SnippetList() {
   const [form] = Form.useForm()
+  const editorRef = useRef(null)
+  const [editorContent, setEditorContent] = useState('initialContent')
 
   return (
     <>
@@ -34,10 +38,18 @@ function SnippetList() {
           <Input placeholder='placeholder' />
         </Form.Item>
         <Form.Item>
-          <Button type='primary'>搜索</Button>
+          <Button type='primary' onClick={() => {
+            console.info(editorRef.current)
+            const editorStateJSONString = '{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"We are ","type":"text","version":1},{"detail":0,"format":1,"mode":"normal","style":"","text":"expert in customizing, and best-rated in delivering personalized Asia exploration","type":"text","version":1},{"detail":0,"format":0,"mode":"normal","style":"","text":", ensured by ","type":"text","version":1},{"detail":0,"format":1,"mode":"normal","style":"","text":"our company-managed local services across Asia","type":"text","version":1},{"detail":0,"format":0,"mode":"normal","style":"","text":". The proof is our over ","type":"text","version":1},{"detail":0,"format":1,"mode":"normal","style":"","text":"10,000 reviews with 98.8% 5-star ratings","type":"text","version":1},{"detail":0,"format":0,"mode":"normal","style":"","text":" on the most reputable platforms like ","type":"text","version":1},{"detail":0,"format":1,"mode":"normal","style":"","text":"TripAdvisor and Trustpilot","type":"text","version":1},{"detail":0,"format":0,"mode":"normal","style":"","text":".","type":"text","version":1}],"direction":"ltr","format":"start","indent":0,"type":"paragraph","version":1,"textFormat":0,"textStyle":""}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}'
+
+            const editorState = editorRef.current.parseEditorState(editorStateJSONString);
+            editorRef.current.setEditorState(editorState)
+          }}>搜索</Button>
         </Form.Item>
         <Form.Item>
-          <Button>新增</Button>
+          <Button onClick={() => {
+            console.info(JSON.stringify(editorRef.current.getEditorState()))
+          }}>新增</Button>
         </Form.Item>
       </Form>
       <Row gutter={16}>
@@ -52,7 +64,10 @@ function SnippetList() {
               'Highlights Travel Family Loyalty Club',
             ]}
             renderItem={(item) => (
-              <List.Item className='hover:bg-stone-50'>
+              <List.Item className='hover:bg-stone-50' onClick={(e) => {
+                console.info(item)
+                setEditorContent('<strong>' + item + '</strong>')
+              }}>
                 <Row gutter={16} className='w-full'>
                   <Col span={16}>
                     <Tag color='magenta'>类型</Tag>
@@ -70,8 +85,10 @@ function SnippetList() {
           <pre className='whitespace-pre-wrap break-words'>
           <p>Discover China with the <strong>award-winning</strong> and <strong>best-rated</strong> tour company for <strong>personalized travel in China</strong>. Honored as <strong>China's Leading Tour Operator</strong> by the <strong>World Travel Awards</strong>, we boast <strong>10,000+ reviews</strong> and a remarkable <strong>98.8% 5-star rating</strong>. Our expertise in customizing personalized China explorations is backed by our company-managed local services across China. Explore and kickstart your personalized travel experience with just a click!</p>
           </pre>
+          <LexicalEditor {...{ isRichText: true, editorRef }} onChange={() => {console.info('onChange')}} initialValue={editorContent} />
         </Col>
       </Row>
+
       </Space>
     </>
   )