added autofill pill on mouse click

copilot-platforms · Feb 29, 2024 · fd5b065 · fd5b065
1 parent 717322d
commit fd5b065
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 22 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -2,11 +2,18 @@
 @tailwind components;
 @tailwind utilities;
 
+.pill-extension {
+  display: inline-flex;
+  flex-wrap: wrap;
+  background-color: #eff1f4;
+  border-radius: 0.75rem;
+  padding: 0rem 0.5rem;
+}
+
 .editable .autofill-pill {
   background-color: #eff1f4;
   border-radius: 0.75rem;
   padding: 0.125rem 0.5rem;
-  padding: 0.125rem 0.5rem;
 }
 
 .image-resizer {

diff --git a/src/components/autofillFields/AutofillFields.tsx b/src/components/autofillFields/AutofillFields.tsx
@@ -88,7 +88,6 @@ const AutofillFields = () => {
                 label={el.replaceAll('{{', '').replaceAll('}}', '')}
                 handleClick={() => {
                   if (appState?.appState.readOnly) return
-                  // tiptapEditorUtils.insertContent(`${el}`)
                   tiptapEditorUtils.insertAutofill(`${el}`)
                 }}
               />
@@ -102,8 +101,7 @@ const AutofillFields = () => {
                   label={`client.${el.key}`}
                   handleClick={() => {
                     if (appState?.appState.readOnly) return
-                    // tiptapEditorUtils.insertContent(`{{client.${el.key}}}`)
-                    tiptapEditorUtils.insertAutofill(`${el}`)
+                    tiptapEditorUtils.insertAutofill(`{{client.${el.key}}}`)
                   }}
                 />
               )

diff --git a/src/components/tiptap/autofieldSelector/AutofillComponent.tsx b/src/components/tiptap/autofieldSelector/AutofillComponent.tsx
@@ -3,8 +3,8 @@ import React from 'react'
 
 export const AutofillComponent = () => {
   return (
-    <NodeViewWrapper className='autofill-pill' as='span'>
-      <NodeViewContent as='span' className='content' />
+    <NodeViewWrapper className='pill-extension' as='span'>
+      <NodeViewContent as='span' />
     </NodeViewWrapper>
   )
 }
diff --git a/src/components/tiptap/autofieldSelector/ext_autofill.ts b/src/components/tiptap/autofieldSelector/ext_autofill.ts
@@ -7,6 +7,20 @@ export const AutofillExtension = Node.create({
   group: 'inline',
   content: 'text*',
   inline: true,
+  selectable: false,
+  atom: true,
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      renderText({ options, node }: any) {
+        return `${node.attrs.label ?? node.attrs.id}`
+      },
+      renderHTML({ options, node }: any) {
+        return ['span', this.HTMLAttributes]
+      },
+    }
+  },
 
   parseHTML() {
     return [
@@ -18,30 +32,89 @@ export const AutofillExtension = Node.create({
 
   whitespace: 'normal',
 
-  renderHTML({ HTMLAttributes }) {
-    // return ['autofill', mergeAttributes(HTMLAttributes), 0]
-    return [
-      'span',
-      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
-    ]
-  },
-
   addNodeView() {
     return ReactNodeViewRenderer(AutofillComponent)
   },
 
   addAttributes() {
     return {
-      class: {
-        default: 'autofill-pill',
+      id: {
+        default: null,
+        parseHTML: (element) => element.getAttribute('data-id'),
+        renderHTML: (attributes) => {
+          if (!attributes.id) {
+            return {}
+          }
+
+          return {
+            'data-id': attributes.id,
+          }
+        },
+      },
+
+      label: {
+        default: null,
+        parseHTML: (element) => element.getAttribute('data-label'),
+        renderHTML: (attributes) => {
+          if (!attributes.label) {
+            return {}
+          }
+
+          return {
+            'data-label': attributes.label,
+          }
+        },
       },
     }
   },
 
-  addOptions() {
-    return {
-      inline: true,
-      HTMLAttributes: {},
+  renderHTML({ node, HTMLAttributes }) {
+    if (this.options.renderLabel !== undefined) {
+      return [
+        'span',
+        mergeAttributes(
+          { 'data-type': this.name },
+          this.options.HTMLAttributes,
+          HTMLAttributes,
+        ),
+        this.options.renderLabel({
+          options: this.options,
+          node,
+        }),
+      ]
+    }
+    const html = this.options.renderHTML({
+      options: this.options,
+      node,
+    })
+
+    if (typeof html === 'string') {
+      return [
+        'span',
+        mergeAttributes(
+          { 'data-type': this.name },
+          this.options.HTMLAttributes,
+          HTMLAttributes,
+        ),
+        html,
+      ]
+    }
+    return html
+  },
+
+  renderText({ node }) {
+    if (this.options.renderLabel !== undefined) {
+      console.warn(
+        'renderLabel is deprecated use renderText and renderHTML instead',
+      )
+      return this.options.renderLabel({
+        options: this.options,
+        node,
+      })
     }
+    return this.options.renderText({
+      options: this.options,
+      node,
+    })
   },
 })
diff --git a/src/utils/tiptapEditorUtils.ts b/src/utils/tiptapEditorUtils.ts
@@ -145,8 +145,7 @@ export class TiptapEditorUtils {
     this.editor
       .chain()
       .focus()
-      .setParagraph()
-      .insertContent(`<autofill>${content}</autofill>`)
+      .insertContent(`<autofill>${content}</autofill> `)
       .run()
   }