diff --git a/.eslintrc.json b/.eslintrc.json
index bffb357..eb82587 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "react/display-name": "off"
+  }
 }
diff --git a/package-lock.json b/package-lock.json
index 2319a85..4bc6905 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -71,6 +71,7 @@
         "tippy.js": "^6.3.7"
       },
       "devDependencies": {
+        "@types/markdown-it": "^13.0.7",
         "@types/node": "20.9.4",
         "@types/react": "18.2.38",
         "@types/react-dom": "^18",
@@ -2029,6 +2030,28 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "node_modules/@types/linkify-it": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-3.0.5.tgz",
+      "integrity": "sha512-yg6E+u0/+Zjva+buc3EIb+29XEg4wltq7cSmd4Uc2EE/1nUVmxyzpX6gUXD0V8jIrG0r7YeOGVIbYRkxeooCtw==",
+      "dev": true
+    },
+    "node_modules/@types/markdown-it": {
+      "version": "13.0.7",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-13.0.7.tgz",
+      "integrity": "sha512-U/CBi2YUUcTHBt5tjO2r5QV/x0Po6nsYwQU4Y04fBS6vfoImaiZ6f8bi3CjTCxBPQSO1LMyUqkByzi8AidyxfA==",
+      "dev": true,
+      "dependencies": {
+        "@types/linkify-it": "*",
+        "@types/mdurl": "*"
+      }
+    },
+    "node_modules/@types/mdurl": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-1.0.5.tgz",
+      "integrity": "sha512-6L6VymKTzYSrEf4Nev4Xa1LCHKrlTlYCBMTlQKFuddo1CvQcE52I0mwfOJayueUC7MJuXOeHTcIU683lzd0cUA==",
+      "dev": true
+    },
     "node_modules/@types/node": {
       "version": "20.9.4",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.9.4.tgz",
diff --git a/package.json b/package.json
index 8792f96..98adab1 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/editor/live-editor.jsx b/src/components/editor/live-editor.tsx
similarity index 55%
rename from src/components/editor/live-editor.jsx
rename to src/components/editor/live-editor.tsx
index 73af1c1..1efb625 100644
--- a/src/components/editor/live-editor.jsx
+++ b/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
\ No newline at end of file
diff --git a/src/components/editor/sidebar.jsx b/src/components/editor/sidebar.jsx
deleted file mode 100644
index 7bf9fc5..0000000
--- a/src/components/editor/sidebar.jsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from 'react'
-import * as Accordion from '@radix-ui/react-accordion'
-import { ChevronDownIcon } from '@radix-ui/react-icons'
-
-export const Sidebar = ({ 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.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.forwardRef(({ children, className, ...props }, forwardedRef) => (
-  <Accordion.Content
-    className={'AccordionContent'}
-    {...props}
-    ref={forwardedRef}
-  >
-    <div className="AccordionContentText">{children}</div>
-  </Accordion.Content>
-))
\ No newline at end of file
diff --git a/src/components/editor/sidebar.tsx b/src/components/editor/sidebar.tsx
new file mode 100644
index 0000000..1abdb4b
--- /dev/null
+++ b/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>
+))
\ No newline at end of file