[TASK] Better snippet insertion by Sidebar and Dibba (#211)

#211

* fixed reappearing deleted content on multiple websites;

Signed-off-by: Sahil Shubham <[email protected]>

* better pasting mechansim;

Signed-off-by: Sahil Shubham <[email protected]>

* fixed onChange trigger when copying to clipboard;

Signed-off-by: Sahil Shubham <[email protected]>

* added changeset for this and previous PR

Signed-off-by: Sahil Shubham <[email protected]>

Author: sahil-shubham

.changeset/dull-papayas-lick.md

@@ -0,0 +1,6 @@
+---
+'mexit': minor
+'mexit-webapp': patch
+---
+
+Better mechanism for pasting snippets. Also screenshot action with cropping.

apps/extension/src/Components/Dibba/index.tsx

@@ -47,7 +47,15 @@ interface PublicNode {
   content: NodeEditorContent
 }
 
-export const insertSnippet = async (item: Snippet) => {
+// TODO: add more domains and their supported types
+// Also a better matching for the domains
+const supportedDomains: Record<string, 'plain' | 'html'> = {
+  'https://mail.google.com': 'html',
+  'https://www.figma.com': 'plain',
+  'https://keep.google.com': 'plain'
+}
+
+export const copySnippetToClipboard = async (item: Snippet) => {
   const text = convertContentToRawText(item.content, '\n')
 
   let html = text
@@ -103,6 +111,21 @@ function getUpcomingData(selection: Selection) {
   return { range, text }
 }
 
+function simulateOnChange() {
+  const inputEvent = new InputEvent('input', {
+    bubbles: true,
+    cancelable: false
+  })
+
+  const changeEvent = new Event('change', {
+    bubbles: true,
+    cancelable: false
+  })
+
+  document.activeElement.dispatchEvent(inputEvent)
+  document.activeElement.dispatchEvent(changeEvent)
+}
+
 // TODO: whether or not to enable dibba should be a user's preference
 // we don't users to move away because they have doubts of us forcing a 'keylogger' on them
 export default function Dibba() {
@@ -205,9 +228,50 @@ export default function Dibba() {
       console.log(error)
     }
 
+    const originMatch = supportedDomains[window.location.origin]
+
     switch (item.type) {
       case QuickLinkType.snippet: {
-        await insertSnippet(item as Snippet)
+        if (originMatch === 'html') {
+          const filterdContent = convertToCopySnippet(item.content)
+          const convertedContent = convertToCopySnippet(filterdContent, {
+            filter: defaultCopyFilter,
+            converter: defaultCopyConverter
+          })
+
+          const tempEditor = createPlateEditor({
+            plugins: getPlugins(
+              createPlateUI({
+                [ELEMENT_TAG]: CopyTag as any
+              }),
+              {
+                exclude: { dnd: true }
+              }
+            )
+          })
+
+          const html = serializeHtml(tempEditor, {
+            nodes: convertedContent
+          })
+
+          const node = new DOMParser().parseFromString(html, 'text/html').body
+          dibbaState.extra.range.insertNode(node)
+          dibbaState.extra.range.collapse(false)
+
+          // Combining the inserted text node into one
+          document.activeElement.normalize()
+          simulateOnChange()
+        } else if (originMatch === 'plain') {
+          dibbaState.extra.range.insertNode(document.createTextNode(parseSnippet(item).text))
+          dibbaState.extra.range.collapse(false)
+
+          // Combining the inserted text node into one
+          document.activeElement.normalize()
+          simulateOnChange()
+        } else {
+          simulateOnChange()
+          await copySnippetToClipboard(item as Snippet)
+        }
         break
       }
       case 'Links': {
@@ -257,6 +321,7 @@ export default function Dibba() {
         setDibbaState({ visualState: VisualState.hidden })
       } else if (['Tab', 'Enter', ' ', ']'].includes(event.key)) {
         event.preventDefault()
+        event.stopPropagation()
 
         handleClick(results[activeIndex])
       }
@@ -356,7 +421,7 @@ export default function Dibba() {
       {listItem?.content && (
         <ComboSeperator>
           <section>
-            <EditorPreviewRenderer noMouseEvents content={listItem.content} editorId={listItem.id} />
+            <EditorPreviewRenderer noMouseEvents content={listItem.content} editorId={listItem.id} readOnly={true} />
           </section>
         </ComboSeperator>
       )}

apps/extension/src/Components/Sidebar/SnippetsInfoBar.tsx

@@ -13,7 +13,7 @@ import useRaju from '../../Hooks/useRaju'
 import { useSnippets } from '../../Hooks/useSnippets'
 import { useSnippetStore } from '../../Stores/useSnippetStore'
 import { getElementById } from '../../contentScript'
-import { insertSnippet } from '../Dibba'
+import { copySnippetToClipboard } from '../Dibba'
 import SnippetCard from './SnippetCard'
 
 export const SnippetsInfoBar = () => {
@@ -31,7 +31,7 @@ export const SnippetsInfoBar = () => {
   const onInsertSnippet = (snippetId: string) => {
     const snippet = getSnippet(snippetId)
 
-    insertSnippet(snippet)
+    copySnippetToClipboard(snippet)
   }
 
   const onSearch = async (newSearchTerm: string) => {

apps/extension/src/Hooks/useActionExecutor.ts

@@ -1,17 +1,11 @@
 /* eslint-disable no-case-declarations */
-import { createPlateEditor, createPlateUI, serializeHtml } from '@udecode/plate'
 import toast from 'react-hot-toast'
 
 import {
   ActionType,
   CategoryType,
-  convertContentToRawText,
-  convertToCopySnippet,
   createNodeWithUid,
-  defaultCopyConverter,
-  defaultCopyFilter,
   ELEMENT_PARAGRAPH,
-  ELEMENT_TAG,
   getBlockMetadata,
   getNewDraftKey,
   ILink,
@@ -22,11 +16,7 @@ import {
   SingleNamespace
 } from '@mexit/core'
 
-import Action from '../Components/Action'
-import { insertSnippet } from '../Components/Dibba'
-import { StyledInput } from '../Components/Search/styled'
-import { CopyTag } from '../Editor/components/Tags/CopyTag'
-import getPlugins from '../Editor/plugins/index'
+import { copySnippetToClipboard } from '../Components/Dibba'
 import useDataStore from '../Stores/useDataStore'
 import { useLayoutStore } from '../Stores/useLayoutStore'
 import { useSputlitStore } from '../Stores/useSputlitStore'
@@ -114,7 +104,7 @@ export function useActionExecutor() {
 
       case QuickLinkType.snippet: {
         const snippet = getSnippet(item.id)
-        insertSnippet(snippet)
+        copySnippetToClipboard(snippet)
         setVisualState(VisualState.animatingOut)
         break
       }