refactor: extract comment code #18

unit-mesh · Dec 1, 2023 · a9e2cb3 · a9e2cb3
1 parent 08bda5c
commit a9e2cb3
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 29 deletions.
diff --git a/editor/package-lock.json b/editor/package-lock.json
diff --git a/editor/package.json b/editor/package.json
@@ -113,6 +113,7 @@
     "@types/node": "20.9.4",
     "@types/react": "18.2.38",
     "@types/react-dom": "^18",
+    "@types/uuid": "^9.0.7",
     "autoprefixer": "^10.0.1",
     "eslint": "^8",
     "eslint-config-next": "14.0.3",

diff --git a/editor/src/components/editor/comment.tsx b/editor/src/components/editor/comment.tsx
@@ -0,0 +1,17 @@
+import { v4 } from 'uuid'
+
+export interface Comment {
+	id: string
+	content: string
+	replies: Comment[]
+	createdAt: Date
+}
+
+export const getNewComment = (content: string): Comment => {
+	return {
+		id: `a${v4()}a`,
+		content,
+		replies: [],
+		createdAt: new Date()
+	}
+}
diff --git a/editor/src/components/editor/intelli/advice-extension.ts b/editor/src/components/editor/intelli/advice-extension.ts
@@ -2,11 +2,12 @@
 import { Mark, mergeAttributes, Range } from "@tiptap/core";
 import { Mark as PMMark } from "@tiptap/pm/model";
 import { CommandProps } from "@tiptap/react";
+import { Comment } from "../comment";
 
 declare module "@tiptap/core" {
 	interface Commands<ReturnType> {
 		advice: {
-			setAdviceCommand: (advice: string) => ReturnType;
+			setAdviceCommand: (newComment: Comment) => ReturnType;
 			setAdvice: (commentId: string) => ReturnType;
 			unsetAdvice: (commentId: string) => ReturnType;
 		};
@@ -19,7 +20,7 @@ export interface MarkWithRange {
 }
 
 export interface CommentOptions {
-	setAdviceCommand: (advice: string) => void;
+	setAdviceCommand: (comment: Comment) => void;
 	HTMLAttributes: Record<string, any>;
 	onAdviceActivated: (commentId: string | null) => void;
 }
@@ -36,7 +37,7 @@ export const AdviceExtension = Mark.create<CommentOptions, CommentStorage>({
 
 	addOptions() {
 		return {
-			setAdviceCommand: (advice: string) => {
+			setAdviceCommand: (comment: Comment) => {
 			},
 			HTMLAttributes: {},
 			onAdviceActivated: () => {
@@ -97,8 +98,8 @@ export const AdviceExtension = Mark.create<CommentOptions, CommentStorage>({
 	// @ts-ignore
 	addCommands() {
 		return {
-			setAdviceCommand: (advice: string) => ({ commands }: CommandProps) => {
-				this.options.setAdviceCommand(advice);
+			setAdviceCommand: (comment: Comment) => ({ commands }: CommandProps) => {
+				this.options.setAdviceCommand(comment);
 			},
 			setAdvice: (commentId) => ({ commands }) => {
 				if (!commentId) return false;

diff --git a/editor/src/components/editor/intelli/menu/menu-bubble.tsx b/editor/src/components/editor/intelli/menu/menu-bubble.tsx
@@ -6,6 +6,7 @@ import { Editor } from "@tiptap/core";
 import { CookieIcon } from "@radix-ui/react-icons";
 import { ActionExecutor } from "@/components/editor/action/ActionExecutor";
 import { Button, DropdownMenu } from "@radix-ui/themes";
+import { getNewComment } from '../../comment';
 
 export const MenuBubble = ({ editor }: {
 	editor: Editor
@@ -101,7 +102,9 @@ export const MenuBubble = ({ editor }: {
 				variant="outline"
 				key={index}
 				onClick={() => {
-					editor.commands?.setAdviceCommand("TODO, we are working on it")
+					const newComment = getNewComment("TODO, we are working on it")
+					editor.commands?.setAdvice(newComment.id)
+					editor.commands?.setAdviceCommand(newComment)
 					menu.action?.(editor)
 				}}
 			>

diff --git a/editor/src/components/editor/live-editor.tsx b/editor/src/components/editor/live-editor.tsx
@@ -7,7 +7,6 @@ import TextStyle from '@tiptap/extension-text-style'
 import StarterKit from '@tiptap/starter-kit'
 import { CharacterCount } from "@tiptap/extension-character-count";
 import { useTranslation } from "react-i18next";
-import { v4 } from 'uuid'
 
 import MarkdownIt from 'markdown-it'
 import { useDebounce } from 'use-debounce';
@@ -24,26 +23,10 @@ import { CommandFunctions } from './action/command-functions'
 import { Sidebar } from './sidebar'
 
 import "./editor.css"
+import { Comment } from "@/components/editor/comment";
 
 const md = new MarkdownIt()
 
-
-interface Comment {
-	id: string
-	content: string
-	replies: Comment[]
-	createdAt: Date
-}
-
-const getNewComment = (content: string): Comment => {
-	return {
-		id: `a${v4()}a`,
-		content,
-		replies: [],
-		createdAt: new Date()
-	}
-}
-
 const LiveEditor = () => {
 	const { t, i18n } = useTranslation();
 
@@ -72,11 +55,9 @@ const LiveEditor = () => {
 			HTMLAttributes: {
 				class: "my-advice",
 			},
-			setAdviceCommand: (advice: string) => {
-				const newComment = getNewComment(advice)
-				setComments([...comments, newComment])
-				editor?.commands.setAdvice(newComment.id)
-				setActiveCommentId(newComment.id)
+			setAdviceCommand: (comment: Comment) => {
+				setComments([...comments, comment])
+				setActiveCommentId(comment.id)
 				setTimeout(focusCommentWithActiveId)
 			},
 			onAdviceActivated: (commentId) => {