fix: fix eslint issue

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "react/display-name": "off"
+  }
 }

package.json

@@ -76,6 +76,7 @@
     "node": ">=18"
   },
   "devDependencies": {
+    "@types/markdown-it": "^13.0.7",
     "@types/node": "20.9.4",
     "@types/react": "18.2.38",
     "@types/react-dom": "^18",

src/components/editor/live-editor.jsx → src/components/editor/live-editor.tsx

@@ -19,36 +19,36 @@ import { Sidebar } from './sidebar'
 const md = new MarkdownIt()
 
 const extensions = [
-  CommandFunctions,
-  TrackChangeExtension.configure({
-    enabled: false,
-  }),
-  StarterKit.configure({
-    bulletList: {
-      keepMarks: true,
-      keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help
-    },
-    orderedList: {
-      keepMarks: true,
-      keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help
-    },
-  }),
-  createSlashExtension('ai-slash', {
-    items: [
-      {
-        title: 'AI 续写',
-        command: 'continue',
-      },
-      {
-        title: 'AI 总结',
-        command: 'summarize',
-      }
-    ]
-  }),
-  createAiBlock(),
-  Color.configure({ types: [TextStyle.name, ListItem.name] }),
-  // @ts-ignore
-  TextStyle.configure({ types: [ListItem.name] }),
+	CommandFunctions,
+	TrackChangeExtension.configure({
+		enabled: false,
+	}),
+	StarterKit.configure({
+		bulletList: {
+			keepMarks: true,
+			keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help
+		},
+		orderedList: {
+			keepMarks: true,
+			keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help
+		},
+	}),
+	createSlashExtension('ai-slash', {
+		items: [
+			{
+				title: 'AI 续写',
+				command: 'continue',
+			},
+			{
+				title: 'AI 总结',
+				command: 'summarize',
+			}
+		]
+	}),
+	createAiBlock(),
+	Color.configure({ types: [TextStyle.name, ListItem.name] }),
+	// @ts-ignore
+	TextStyle.configure({ types: [ListItem.name] }),
 ]
 
 const content = `
@@ -78,35 +78,35 @@ Chinese text for testing grammar and spellings, select long text to see the menu
 `
 
 const LiveEditor = () => {
-  const editor = useEditor({
-    extensions,
-    content: md.render(content),
-    editorProps: {
-      attributes: {
-        class: 'prose lg:prose-xl bb-editor-inner',
-      },
-    },
-  })
-
-  return (<div className={'w-full'}>
-      <div className={'editor-block'}>
-        <div className={'domain-buttons'}>
-          <span className={'scene-text'}>Scene: (Todo)</span>
-          <button disabled={true} className={'domain-button'}>Blog</button>
-          <button disabled={true} className={'domain-button'}>Weekly Report</button>
-          <button disabled={true} className={'domain-button'}>Meeting Notes</button>
-          <button disabled={true} className={'domain-button'}>User Story</button>
-        </div>
-        <div className={'editor-section'}>
-          {editor && <MenuBar editor={editor}/>}
-          <EditorContent editor={editor}/>
-          {editor && <MenuBubble editor={editor}/>}
-        </div>
-      </div>
-
-      {editor && <div className={'lg:visible md:invisible sm:invisible'}><Sidebar eidtor={editor}/></div>}
-    </div>
-  )
+	const editor = useEditor({
+		extensions,
+		content: md.render(content),
+		editorProps: {
+			attributes: {
+				class: 'prose lg:prose-xl bb-editor-inner',
+			},
+		},
+	})
+
+	return (<div className={'w-full'}>
+			<div className={'editor-block'}>
+				<div className={'domain-buttons'}>
+					<span className={'scene-text'}>Scene: (Todo)</span>
+					<button disabled={true} className={'domain-button'}>Blog</button>
+					<button disabled={true} className={'domain-button'}>Weekly Report</button>
+					<button disabled={true} className={'domain-button'}>Meeting Notes</button>
+					<button disabled={true} className={'domain-button'}>User Story</button>
+				</div>
+				<div className={'editor-section'}>
+					{editor && <MenuBar editor={editor}/>}
+					<EditorContent editor={editor}/>
+					{editor && <MenuBubble editor={editor}/>}
+				</div>
+			</div>
+
+			{editor && <div className={'lg:visible md:invisible sm:invisible'}><Sidebar eidtor={editor}/></div>}
+		</div>
+	)
 }
 
 export default LiveEditor

src/components/editor/sidebar.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import * as Accordion from '@radix-ui/react-accordion'
+import { ChevronDownIcon } from '@radix-ui/react-icons'
+
+export const Sidebar: React.FC<any> = ({ editor }) => {
+	return <aside className={'fixed top-0 right-0 z-40 w-128 h-screen'} aria-label="Sidebar">
+		<div className={'h-full px-3 py-4 overflow-y-auto bg-gray-50 dark:bg-gray-800'}>
+			<Accordion.Root className={'AccordionRoot'} type="multiple" defaultValue={['item-1', 'item-2', 'item-3']}>
+				<Accordion.Item className={'AccordionItem'} value="item-1">
+					<AccordionTrigger>Grammarly</AccordionTrigger>
+					<AccordionContent>
+						TODO: use some model to check grammar
+					</AccordionContent>
+				</Accordion.Item>
+
+				<Accordion.Item className={'AccordionItem'} value="item-2">
+					<AccordionTrigger>Text Prediction</AccordionTrigger>
+					<AccordionContent>
+						TODO: use <a href="https://github.com/unit-mesh/edge-infer">EdgeInference</a> to predict text
+					</AccordionContent>
+				</Accordion.Item>
+
+				<Accordion.Item className={'AccordionItem'} value="item-3">
+					<AccordionTrigger>Similarity</AccordionTrigger>
+					<Accordion.Content className={'AccordionContent'}>
+						<div className={'AccordionContentText'}>
+							TODO: use <a href="https://github.com/unit-mesh/edge-infer">EdgeInference</a> to calculate similarity
+						</div>
+					</Accordion.Content>
+				</Accordion.Item>
+			</Accordion.Root>
+		</div>
+	</aside>
+}
+
+const AccordionTrigger: React.FC<any> = React.forwardRef(({ children, className, ...props }, forwardedRef) => (
+	<Accordion.Header className="AccordionHeader">
+		<Accordion.Trigger
+			className={'AccordionTrigger'}
+			{...props}
+			ref={forwardedRef}
+		>
+			{children}
+			<ChevronDownIcon className="AccordionChevron" aria-hidden/>
+		</Accordion.Trigger>
+	</Accordion.Header>
+))
+
+const AccordionContent: React.FC<any> = React.forwardRef(({ children, className, ...props }, forwardedRef) => (
+	<Accordion.Content
+		className={'AccordionContent'}
+		{...props}
+		ref={forwardedRef}
+	>
+		<div className="AccordionContentText">{children}</div>
+	</Accordion.Content>
+))