Cp 48 Add autocomplete and arrow keys support (#14)

* initial setup for color picker

* initial tiptap editor setup

* floating menu container's layout added

* floating menu: heading, list, paragraph features

* floating menu: table, list

* comment

* comment change

* comment change

* bubble menu container features

* editor features: link, callout, embed

* added extension starter kit for now

* changed cropper aspect ratio to 16/9

* updated styling to match the design

* setup of autofield selector in editor after {{

* autofill fields feature integrated

* autofill fields feature integrated

* fix bug white storing original template

* added background color feature

* added all icons as svg in src directory

* fix minor bug

* fix eslint errors

* fix import orders

* changed state name to generic

* removed if editor is defined check

* created separate FieldOptions component

* added separate component for reusable codes

* fix: import order, separated reusable components

* fix: import order, separated reusable components

* fix merge conflict

* fix eslint errors

* fix merge conflict

* removed top HOME layout

* added type / for commands initially

* added undo feature

* removed autofill fields from bubble menu dropdown

* fix bullet list typo

* added link on bubble menu

* fix autocomplete extra {{ adding issue

* added autocomplete on / command

* autofill field inserts on cursor position

* added callout in formating option

* formating option shows the current formating used

* fix minor issue

* eslint fix

* setup for autocomplete

* integrated settings api

* integrated settings api

* changed api base url

* changed api base url

* changed api base url

* removed baseUrl from constants

* resolved bugs

* added separate component for floating menu btns

* added placeholder extension for placeholder

* integrated with the copilot apis

* smoothen color picker/removed footer after save

* aligned colorpicker properly

* remove footer after cancel button click

* added packages

* autofill menu: autocomplete and arrow command

* added fixes for autofill

* fixed issues

* fixed issues

* fixes: padding,undefined value,events

* resolved PR review comments

Author: aatbip

.eslintrc.json

@@ -27,6 +27,7 @@
     "no-unused-vars": "warn",
     "@typescript-eslint/no-unused-vars": ["warn"],
     "@next/next/no-img-element": "off",
-    "react-hooks/exhaustive-deps": "off"
+    "react-hooks/exhaustive-deps": "off",
+    "@typescript-eslint/no-explicit-any": "warn"
   }
 }

package.json

@@ -19,9 +19,12 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.18",
     "@mui/material": "^5.14.18",
+    "@prisma/client": "^5.6.0",
     "@tiptap/extension-gapcursor": "^2.1.12",
     "@tiptap/extension-image": "^2.1.12",
     "@tiptap/extension-link": "^2.1.12",
+    "@tiptap/extension-mention": "^2.1.13",
+    "@tiptap/extension-placeholder": "^2.1.13",
     "@tiptap/extension-table": "^2.1.12",
     "@tiptap/extension-table-cell": "^2.1.12",
     "@tiptap/extension-table-header": "^2.1.12",
@@ -30,13 +33,15 @@
     "@tiptap/pm": "^2.1.12",
     "@tiptap/react": "^2.1.12",
     "@tiptap/starter-kit": "^2.1.12",
+    "@tiptap/suggestion": "^2.1.12",
+    "@types/react-color": "^3.0.10",
     "handlebars": "^4.7.8",
-    "@prisma/client": "^5.6.0",
     "@vercel/blob": "^0.15.1",
     "@vercel/postgres": "^0.5.1",
     "next": "latest",
     "prisma": "^5.6.0",
     "react": "latest",
+    "react-color": "^2.19.3",
     "react-dom": "latest",
     "react-dropzone": "^14.2.3",
     "react-easy-crop": "^5.0.2",

src/app/api/autofill/route.ts

@@ -0,0 +1,18 @@
+import { NextResponse } from 'next/server'
+
+export async function GET() {
+  const options = {
+    method: 'GET',
+    headers: {
+      accept: 'application/json',
+      'X-API-KEY': process.env.COPILOT_API_KEY as string,
+    },
+  }
+
+  const res = await fetch(
+    'https://api-beta.copilot.com/v1/custom-fields',
+    options,
+  )
+  const { data } = await res.json()
+  return NextResponse.json({ autofillFields: data })
+}

src/app/api/companies/route.ts

@@ -0,0 +1,20 @@
+import { NextResponse, NextRequest } from 'next/server'
+
+export async function GET(req: NextRequest) {
+  const companyId = req.nextUrl.searchParams.get('companyId') as string
+
+  const options = {
+    method: 'GET',
+    headers: {
+      accept: 'application/json',
+      'X-API-KEY': process.env.COPILOT_API_KEY as string,
+    },
+  }
+
+  const res = await fetch(
+    `https://api-beta.copilot.com/v1/companies/${companyId}`,
+    options,
+  )
+  const company = await res.json()
+  return NextResponse.json({ data: company })
+}

src/app/components/EditorInterface.tsx

@@ -1,5 +1,8 @@
 'use client'
 
+import { useEditor, EditorContent } from '@tiptap/react'
+import { useEffect, useState } from 'react'
+
 import Handlebars from 'handlebars'
 import CalloutExtension from '@/components/tiptap/callout/CalloutExtension'
 import Document from '@tiptap/extension-document'
@@ -23,17 +26,20 @@ import Italic from '@tiptap/extension-italic'
 import Strike from '@tiptap/extension-strike'
 import Gapcursor from '@tiptap/extension-gapcursor'
 import History from '@tiptap/extension-history'
+import Placeholder from '@tiptap/extension-placeholder'
+import Mention from '@tiptap/extension-mention'
+import FloatingCommandExtension from '@/components/tiptap/floatingMenu/floatingCommandExtension'
+import { floatingMenuSuggestion } from '@/components/tiptap/floatingMenu/floatingMenuSuggestion'
+import { autofillMenuSuggestion } from '@/components/tiptap/autofieldSelector/autofillMenuSuggestion'
 
-import AutofieldSelector from '@/components/tiptap/autofieldSelector/AutofieldSelector'
-import FloatingMenuContainer from '@/components/tiptap/floatingMenu/FloatingMenu'
 import BubbleMenuContainer from '@/components/tiptap/bubbleMenu/BubbleMenu'
 import LinkInput from '@/components/tiptap/linkInput/LinkInput'
 import NoteDisplay from '@/components/display/NoteDisplay'
 import { When } from '@/components/hoc/When'
 
 import { useAppState } from '@/hooks/useAppState'
-import { useEditor, EditorContent } from '@tiptap/react'
-import { FC, useEffect, useState } from 'react'
+import { IClient, ISettings } from '@/types/interfaces'
+import LoaderComponent from '@/components/display/Loader'
 
 const EditorInterface = () => {
   const appState = useAppState()
@@ -53,6 +59,18 @@ const EditorInterface = () => {
       CalloutExtension,
       Gapcursor,
       History,
+      FloatingCommandExtension.configure({
+        suggestion: floatingMenuSuggestion,
+      }),
+      Mention.configure({
+        suggestion: autofillMenuSuggestion,
+        renderLabel({ node }) {
+          return `${node.attrs.label ?? node.attrs.id}`
+        },
+      }),
+      Placeholder.configure({
+        placeholder: initialEditorContent,
+      }),
       Link.extend({
         exitable: true,
       }),
@@ -86,7 +104,7 @@ const EditorInterface = () => {
       CodeBlock,
       Code,
     ],
-    content: initialEditorContent,
+    content: '',
   })
 
   const [originalTemplate, setOriginalTemplate] = useState<string | undefined>()
@@ -101,46 +119,104 @@ const EditorInterface = () => {
   useEffect(() => {
     if (appState?.appState.readOnly) {
       const template = Handlebars?.compile(originalTemplate || '')
-      const mockData = appState.appState.mockData.filter(
-        (el) => el.givenName === appState.appState.selectedClient,
-      )[0]
-      const c = template({ client: mockData })
-      editor?.chain().focus().setContent(c).run()
+      const _client = appState.appState.clientList.find(
+        (el) => el.id === (appState.appState.selectedClient as IClient).id,
+      )
+      const client = {
+        ..._client,
+        company: appState?.appState.selectedClientCompanyName,
+      }
+      const c = template({ client: client })
+      setTimeout(() => {
+        editor?.chain().focus().setContent(c).run()
+      })
     } else {
-      editor
-        ?.chain()
-        .focus()
-        .setContent(originalTemplate as string)
-        .run()
+      setTimeout(() => {
+        editor
+          ?.chain()
+          .focus()
+          .setContent(originalTemplate as string)
+          .run()
+      })
     }
-  }, [appState?.appState.selectedClient])
+  }, [
+    appState?.appState.selectedClient,
+    appState?.appState.selectedClientCompanyName,
+  ])
 
   useEffect(() => {
-    if (appState?.appState.readOnly) return
-    setOriginalTemplate(editor?.getHTML())
+    if (!appState?.appState.readOnly) {
+      setOriginalTemplate(editor?.getHTML())
+    }
   }, [editor?.getText(), appState?.appState.readOnly])
 
   useEffect(() => {
-    if (!editor) return
+    if (appState?.appState.settings) {
+      if (
+        originalTemplate !== appState?.appState.settings.content ||
+        appState?.appState.settings.backgroundColor !==
+          appState?.appState.editorColor
+      ) {
+        appState?.toggleChangesCreated(true)
+      } else {
+        appState?.toggleChangesCreated(false)
+      }
+    }
+  }, [
+    originalTemplate,
+    appState?.appState.editorColor,
+    appState?.appState.bannerImg,
+    appState?.appState.readOnly,
+  ])
 
-    appState?.setEditor(editor)
+  useEffect(() => {
+    if (editor) {
+      appState?.setEditor(editor)
 
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.metaKey && event.key === 'z') {
-        event.preventDefault() // Prevent the default behavior of Cmd+Z (e.g., browser undo)
-        editor.chain().focus().undo().run() // Perform undo operation
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.metaKey && event.key === 'z') {
+          event.preventDefault() // Prevent the default behavior of Cmd+Z (e.g., browser undo)
+          editor.chain().focus().undo().run() // Perform undo operation
+        }
+      }
+      document.addEventListener('keydown', handleKeyDown)
+      return () => {
+        document.removeEventListener('keydown', handleKeyDown)
       }
-    }
-    document.addEventListener('keydown', handleKeyDown)
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown)
     }
   }, [editor])
 
+  useEffect(() => {
+    ;(async () => {
+      appState?.setLoading(true)
+      const res = await fetch(`/api/settings`)
+      const { data } = await res.json()
+      setOriginalTemplate(data.content)
+      appState?.setSettings(data)
+      appState?.setLoading(false)
+    })()
+  }, [])
+
+  useEffect(() => {
+    if (appState?.appState.settings) {
+      editor
+        ?.chain()
+        .focus()
+        .setContent((appState?.appState.settings as ISettings).content)
+        .run()
+      appState?.setEditorColor(
+        (appState?.appState.settings as ISettings).backgroundColor,
+      )
+    }
+  }, [appState?.appState.settings])
+
   if (!editor) return null
 
   return (
     <>
+      <When condition={appState?.appState.loading as boolean}>
+        <LoaderComponent />
+      </When>
       <div
         className={`overflow-y-auto overflow-x-hidden max-h-screen w-full ${
           appState?.appState.changesCreated && 'pb-10'
@@ -160,20 +236,13 @@ const EditorInterface = () => {
           }}
         >
           <div>
-            <FloatingMenuContainer editor={editor} />
             <BubbleMenuContainer editor={editor} />
             <LinkInput editor={editor} />
-            <AutofieldSelector editor={editor} />
           </div>
 
           <EditorContent
             editor={editor}
             readOnly={appState?.appState.readOnly}
-            onClick={() => {
-              if (editor.getText() === initialEditorContent) {
-                editor.chain().focus().clearContent().run()
-              }
-            }}
           />
         </div>
         <When condition={!!appState?.appState.readOnly}>

src/app/components/Footer.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { When } from '@/components/hoc/When'
+import { useAppState } from '@/hooks/useAppState'
+
+export const Footer = () => {
+  const appState = useAppState()
+
+  const handleSave = async () => {
+    const content = appState?.appState.editor?.getHTML()
+    try {
+      appState?.setLoading(true)
+      await fetch(`/api/settings`, {
+        method: 'PUT',
+        body: JSON.stringify({
+          backgroundColor: appState?.appState.editorColor,
+          content: content,
+        }),
+      })
+      appState?.setLoading(false)
+      appState?.toggleChangesCreated(false)
+    } catch (e) {
+      console.error(e)
+      appState?.setLoading(false)
+    }
+  }
+
+  const handleCancel = async () => {
+    if (appState?.appState.editor) {
+      appState?.setEditorColor(
+        appState.appState.settings?.backgroundColor as string,
+      )
+      appState?.appState.editor
+        .chain()
+        .focus()
+        .setContent(appState?.appState.settings?.content as string)
+        .run()
+    }
+    appState?.toggleChangesCreated(false)
+  }
+
+  return (
+    <When
+      condition={
+        (appState?.appState.changesCreated as boolean) &&
+        !appState?.appState.readOnly
+      }
+    >
+      <div className='w-full flex flex-row justify-end gap-6 py-4 px-6 fixed bottom-0 bg-white'>
+        <button
+          className='py-1 px-3 text-new-dark rounded text-[13px] rounded bg-white border border-slate-300'
+          onClick={handleCancel}
+        >
+          Cancel
+        </button>
+        <button
+          className='bg-new-dark py-1 px-3 text-white text-[13px] rounded'
+          onClick={handleSave}
+        >
+          Save changes
+        </button>
+      </div>
+    </When>
+  )
+}