refactor: simplify code

unit-mesh · Dec 2, 2023 · 747c641 · 747c641
1 parent af80612
commit 747c641
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 63 deletions.
diff --git a/editor/src/components/editor/extensions/inline-completion/inline-completion.tsx b/editor/src/components/editor/extensions/inline-completion/inline-completion.tsx
@@ -13,66 +13,63 @@ declare module '@tiptap/core' {
 	}
 }
 
-export const createInlineCompletion = () => {
-	const extensionName = "inline-completion-completion";
-
-	return Node.create({
-		name: extensionName,
-		group: "block",
-		defining: true,
-		isolating: true,
-		content: "text*",
-		addOptions() {
-			return {
-				HTMLAttributes: {
-					class: "inline-completion-completion",
-				},
-			}
-		},
-		addKeyboardShortcuts() {
-			return {
-				"Mod-\\": (): boolean => {
-					this.editor.commands.triggerInlineCompletion()
-					return true
-				},
-				"Tab": (): boolean => {
-					this.editor.commands.completeInlineCompletion()
-					return true
-				},
-				"`": (): boolean => {
-					this.editor.commands.completeInlineCompletion()
-					return true
-				},
-				Escape: (): boolean => {
-					this.editor.commands.cancelInlineCompletion();
-					return true
-				},
-			}
-		},
-		// @ts-ignore
-		addCommands() {
-			return {
-				triggerInlineCompletion: (options: any) => ({ commands }: { commands: any }) => {
-					return commands.insertContent({
-						type: this.name,
-						attrs: options,
-					})
-				},
-				completeInlineCompletion: (options: any) => ({ commands }: { commands: any }) => {
-					const pos = this.editor.view.state.selection.$anchor.pos;
-					commands.deleteNode(this.name)
-					commands.insertContentAt(pos, "done completion")
-				},
-				cancelInlineCompletion: (options: any) => ({ commands }: { commands: any }) => {
-					commands.deleteNode(this.name)
-				}
+const extensionName = "inline-completion-completion";
+export const InlineCompletion = Node.create({
+	name: extensionName,
+	group: "block",
+	defining: true,
+	isolating: true,
+	content: "text*",
+	addOptions() {
+		return {
+			HTMLAttributes: {
+				class: "inline-completion-completion",
+			},
+		}
+	},
+	addKeyboardShortcuts() {
+		return {
+			"Mod-\\": (): boolean => {
+				this.editor.commands.triggerInlineCompletion()
+				return true
+			},
+			"Tab": (): boolean => {
+				this.editor.commands.completeInlineCompletion()
+				return true
+			},
+			"`": (): boolean => {
+				this.editor.commands.completeInlineCompletion()
+				return true
+			},
+			Escape: (): boolean => {
+				this.editor.commands.cancelInlineCompletion();
+				return true
+			},
+		}
+	},
+	// @ts-ignore
+	addCommands() {
+		return {
+			triggerInlineCompletion: (options: any) => ({ commands }: { commands: any }) => {
+				return commands.insertContent({
+					type: this.name,
+					attrs: options,
+				})
+			},
+			completeInlineCompletion: (options: any) => ({ commands }: { commands: any }) => {
+				const pos = this.editor.view.state.selection.$anchor.pos;
+				commands.deleteNode(this.name)
+				commands.insertContentAt(pos, "done completion")
+			},
+			cancelInlineCompletion: (options: any) => ({ commands }: { commands: any }) => {
+				commands.deleteNode(this.name)
 			}
-		},
-		addNodeView() {
-			return ReactNodeViewRenderer(InlineCompletionView);
-		},
-	})
-}
+		}
+	},
+	addNodeView() {
+		return ReactNodeViewRenderer(InlineCompletionView);
+	},
+});
 
 const InlineCompletionView = (props?: { editor: Editor }) => {
 	const $container = useRef();
@@ -90,11 +87,11 @@ const InlineCompletionView = (props?: { editor: Editor }) => {
 		return () => {
 			document.removeEventListener("keydown", handleKeyDown);
 		};
-	}, []);
+	}, [props?.editor?.commands]);
 
 	return (
 		<NodeViewWrapper ref={$container}>
-			<span>show inline completion <span className={'inline-completion-tip'}><KeyboardIcon />`</span></span>
+			<span>show inline completion <span className={'inline-completion-tip'}><KeyboardIcon/>`</span></span>
 		</NodeViewWrapper>
 	);
 };

diff --git a/editor/src/components/editor/live-editor.tsx b/editor/src/components/editor/live-editor.tsx
@@ -11,7 +11,7 @@ import { useTranslation } from "react-i18next";
 import MarkdownIt from 'markdown-it'
 import { useDebounce } from 'use-debounce';
 
-import { createInlineCompletion } from "@/components/editor/extensions/inline-completion/inline-completion";
+import { InlineCompletion } from "@/components/editor/extensions/inline-completion/inline-completion";
 import { MenuBubble } from '@/components/editor/menu/menu-bubble'
 import { createSlashExtension } from './extensions/slash-command/slash-extension'
 import { createQuickBox } from '@/components/editor/extensions/quick-box/quick-box-extension'
@@ -51,7 +51,7 @@ const extensions = [
 	TrackChangeExtension.configure({
 		enabled: false,
 	}),
-	createInlineCompletion(),
+	InlineCompletion,
 	StarterKit.configure({
 		bulletList: {
 			keepMarks: true,