Media Embed Parsing And Links Fixes (#278)

#278

* media embed parsing fixed, snippets setting array in list fixes

* Open node path fixed from highlight, remove tag in highlight

* Multiple calls on clicking Add Tag in Shortener fixed

* Changeset added

Author: dineshsingh1

.changeset/curvy-months-provide.md

@@ -0,0 +1,6 @@
+---
+'mexit': patch
+'mexit-webapp': patch
+---
+
+Bulk snippets, Media embed URL fixed

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

@@ -1,27 +1,8 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react'
+import React, { useMemo } from 'react'
 
-import edit2Line from '@iconify/icons-ri/edit-2-line'
-import linkM from '@iconify/icons-ri/link-m'
-import searchLine from '@iconify/icons-ri/search-line'
-import { Icon } from '@iconify/react'
-import fuzzysort from 'fuzzysort'
-import { debounce, reduce } from 'lodash'
-
-import { Infobox } from '@workduck-io/mex-components'
-
-import { mog, SingleHighlight, SourceHighlights } from '@mexit/core'
-import {
-  SnippetCards,
-  SidebarListFilterWrapper,
-  SidebarListFilter,
-  Input,
-  SnippetSidebarHelp,
-  HighlightSidebarHelp,
-  CenteredFlex
-} from '@mexit/shared'
+import { SnippetCards, CenteredFlex } from '@mexit/shared'
 
 import { useHighlightStore } from '../../Stores/useHighlightStore'
-import { getElementById } from '../../contentScript'
 import { GenericCard } from './GenericCard'
 import { HighlightGroups } from './HighlightGroup'
 import { ShortenerComponent } from './ShortenerComponent'

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

@@ -56,7 +56,7 @@ export const HighlightGroups = ({ highlights }: { highlights: SourceHighlights }
   const { getPathFromNodeid } = useLinks()
 
   const openNote = (nodeid: string) => {
-    window.open(`${MEXIT_FRONTEND_URL_BASE}/node/${nodeid}`, '_blank')
+    window.open(`${MEXIT_FRONTEND_URL_BASE}/editor/${nodeid}`, '_blank')
   }
 
   return (

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

@@ -121,7 +121,7 @@ export const ShortenerComponent = () => {
       <TagsLabel
         tags={tags}
         onClick={() => console.log('clicked on tags')}
-        onDelete={(val: string) => console.log('link delete', val)}
+        onDelete={(val: string) => onRemoveTag(val)}
       />
     </ShortenerWrapper>
   )

apps/extension/src/Editor/plugins/index.tsx

@@ -40,16 +40,13 @@ import {
   ELEMENT_H5,
   ELEMENT_H6,
   ELEMENT_PARAGRAPH,
-  createTablePlugin,
-  parseIframeUrl,
-  parseTwitterUrl,
-  MediaEmbedTweet,
-  parseVideoUrl,
-  MediaEmbedVideo
+  createTablePlugin
 } from '@udecode/plate'
 
+import { useAuth } from '@workduck-io/dwindle'
+
 import { ELEMENT_EXCALIDRAW } from '@mexit/core'
-import { MediaIFrame, parseRestMediaUrls, TableWrapper, useUploadToCDN } from '@mexit/shared'
+import { TableWrapper, useUploadToCDN } from '@mexit/shared'
 
 import { createQuickLinkPlugin } from './QuickLink'
 import { createBlockModifierPlugin } from './createBlockModifierPlugin'
@@ -64,7 +61,6 @@ import {
   optionsSelectOnBackspacePlugin,
   optionsSoftBreakPlugin
 } from './options'
-import { useAuth } from '@workduck-io/dwindle'
 
 export type PluginOptionType = {
   exclude: {
@@ -157,26 +153,7 @@ export const generatePlugins = (options: PluginOptionType) => {
     // createDeserializeMDPlugin(),
 
     // Media and link embed
-    createMediaEmbedPlugin({
-      options: {
-        transformUrl: parseIframeUrl,
-        rules: [
-          // {
-          //   parser: parseTwitterUrl,
-          //   component: MediaEmbedTweet
-          // },
-          {
-            parser: parseVideoUrl,
-            component: MediaEmbedVideo
-          },
-          {
-            parser: parseRestMediaUrls,
-            component: MediaIFrame
-          }
-        ]
-      }
-    }),
-
+    createMediaEmbedPlugin(),
     // Custom Plugins
     // createBlurSelectionPlugin() ,
 

apps/webapp/src/Actions/Components/Shortener.tsx

@@ -143,7 +143,7 @@ export const Shortener = () => {
         <Label>Add an Alias</Label>
         <Input placeholder="Shorcut" value={short} onChange={(event) => setShort(getValidTitle(event.target.value))} />
       </InputRow>
-      <LoadingButton loading={isLoading} onClick={onShortenLinkSubmit} type="submit">
+      <LoadingButton id="mex-save-shortened-url" loading={isLoading} type="submit">
         Save
       </LoadingButton>
     </Form>

apps/webapp/src/Components/CreateTodoModal/TaskEditor/plugins.ts

@@ -20,7 +20,6 @@ import {
   createPlugins,
   createSingleLinePlugin,
   parseIframeUrl,
-  parseTwitterUrl,
   MediaEmbedVideo,
   parseVideoUrl,
   MediaEmbedTweet
@@ -46,6 +45,7 @@ import { createMentionPlugin } from '../../../Editor/Plugins/createMentionsPlugi
 import { createTagPlugin } from '../../../Editor/Plugins/createTagPlugin'
 import { createTodoPlugin } from '../../../Editor/Plugins/createTodoPlugin'
 import { optionsCreateNodeIdPlugin, optionsSelectOnBackspacePlugin } from '../../../Editor/Plugins/options'
+import { parseTwitterUrl } from '../../../Editor/Plugins/parseTwitterUrl'
 import Todo from '../../Todo'
 
 const generateTodoPlugins = (uploadImage?: UploadImageFn) => {

apps/webapp/src/Components/Sidebar/SnippetList.tsx

@@ -25,15 +25,7 @@ const SnippetList = () => {
 
   const sortedSnippets = React.useMemo(() => {
     return snippets
-      .sort((a, b) => {
-        if (a.title < b.title) {
-          return -1
-        }
-        if (a.title > b.title) {
-          return 1
-        }
-        return 0
-      })
+      .sort((a, b) => (a.title < b.title ? 1 : -1))
       .map((snippet) => ({
         id: snippet.id,
         label: snippet.title,
@@ -42,9 +34,11 @@ const SnippetList = () => {
       }))
   }, [snippets])
 
+  mog('Snippets', { sortedSnippets, snippets })
+
   return (
     <SidebarWrapper>
-      <SidebarHeaderLite title="Snippets" icon={quillPenLine} />
+      <SidebarHeaderLite title={`Snippets (${snippets.length})`} icon={quillPenLine} />
       <SidebarList
         items={sortedSnippets}
         onClick={onOpenSnippet}

apps/webapp/src/Editor/Components/Combobox/index.tsx

@@ -1,14 +1,21 @@
 import React, { useCallback, useEffect, useState } from 'react'
 
+import { shift, offset, flip } from '@floating-ui/react-dom-interactions'
 import { Icon } from '@iconify/react'
 import useMergedRef from '@react-hook/merged-ref'
-import { getPlateEditorRef, getRangeBoundingClientRect,  PortalBody,  useEditorState, usePlateEditorRef, useVirtualFloating } from '@udecode/plate'
+import {
+  getPlateEditorRef,
+  getRangeBoundingClientRect,
+  PortalBody,
+  useEditorState,
+  usePlateEditorRef,
+  useVirtualFloating
+} from '@udecode/plate'
 import { useTheme } from 'styled-components'
 
-import { shift, offset, flip } from '@floating-ui/react-dom-interactions'
 import { DisplayShortcut } from '@workduck-io/mex-components'
 
-import {  mog, NodeEditorContent } from '@mexit/core'
+import { mog, NodeEditorContent } from '@mexit/core'
 import { ComboboxItem, ComboboxItemTitle, MexIcon, PreviewMeta } from '@mexit/shared'
 import {
   ActionTitle,
@@ -107,7 +114,6 @@ export const Combobox = ({ onSelectItem, onRenderItem, isSlash, portalElement }:
   const editor = usePlateEditorRef()
   const theme = useTheme()
 
-
   const menuProps = combobox ? combobox.getMenuProps({}, { suppressRefError: true }) : { ref: null }
 
   const comboProps = (item, index) => {
@@ -141,7 +147,7 @@ export const Combobox = ({ onSelectItem, onRenderItem, isSlash, portalElement }:
   useEffect(() => {
     return () => closeMenu()
   }, [])
-  
+
   useEffect(() => {
     const comboItem = items[itemIndex]
 
@@ -179,13 +185,9 @@ export const Combobox = ({ onSelectItem, onRenderItem, isSlash, portalElement }:
     }
   }, [itemIndex, items, activeBlock, isOpen, search])
 
-const getBoundingClientRect = useCallback(
-    () => { 
-  
-      return getRangeBoundingClientRect(editor, targetRange)
-  
-    }, [editor, targetRange]
-  )
+  const getBoundingClientRect = useCallback(() => {
+    return getRangeBoundingClientRect(editor, targetRange)
+  }, [editor, targetRange])
 
   // Update popper position
   const { style, floating } = useVirtualFloating({
@@ -201,9 +203,8 @@ const getBoundingClientRect = useCallback(
 
   return (
     <PortalBody>
-        {isOpen && (
-
-      <ComboboxRoot {...menuProps} ref={floating} style={style} isOpen={isOpen}>
+      {isOpen && (
+        <ComboboxRoot {...menuProps} ref={floating} style={style} isOpen={isOpen}>
           <>
             {!isBlockTriggered && (
               <div id="List" style={{ flex: 1 }}>
@@ -290,17 +291,16 @@ const getBoundingClientRect = useCallback(
                     readOnly
                     draftView
                     editorId={
-                      isBlockTriggered && activeBlock ? activeBlock.blockId : `${items[itemIndex]?.key}_Preview_Block`
+                      isBlockTriggered && activeBlock ? activeBlock?.blockId : `${items[itemIndex]?.key}_Preview_Block`
                     }
                   />
                 </section>
                 {preview && <PreviewMeta meta={metaData} />}
               </ComboSeperator>
             )}
           </>
-      </ComboboxRoot>
-        )}
-
+        </ComboboxRoot>
+      )}
     </PortalBody>
   )
 }

apps/webapp/src/Editor/Hooks/useComboboxOnKeyDown.ts

@@ -13,7 +13,6 @@ import { ComboConfigData, ComboSearchType } from '../Types/MultiCombobox'
 import { getNextWrappingIndex } from '../Utils/getNextWrappingIndex'
 import { getNodeIdFromEditor } from '../Utils/helper'
 import { CreateNewPrefix, SnippetCommandPrefix } from '../constants'
-import { useMexEditorStore } from './useMexEditorStore'
 
 const pure = (id: string) => {
   let newId = id

apps/webapp/src/Editor/Plugins/index.tsx

@@ -42,28 +42,29 @@ import {
   ELEMENT_PARAGRAPH,
   createTablePlugin,
   parseIframeUrl,
-  parseTwitterUrl,
   parseVideoUrl,
   MediaEmbedTweet,
   MediaEmbedVideo
 } from '@udecode/plate'
 
+import { useAuth } from '@workduck-io/dwindle'
+
 import { ELEMENT_EXCALIDRAW } from '@mexit/core'
 import { TableWrapper, parseRestMediaUrls, MediaIFrame, useUploadToCDN } from '@mexit/shared'
 
 import { withStyledDraggables } from '../Actions/withDraggables'
 import { withStyledPlaceHolders } from '../Actions/withPlaceholder'
 import { withBlockOptions } from '../Components/Blocks'
+import { PlateFloatingLink } from '../Components/FloatingLink'
 import { createBlockModifierPlugin } from './createBlockModifierPlugin'
 import { createBlurSelectionPlugin } from './createBlurSelection'
 import { createHighlightTextPlugin } from './createHighlightTextPlugin'
 import { createILinkPlugin } from './createILinkPlugin'
 import { createInlineBlockPlugin } from './createInlineBlockPlugin'
 import { createMentionPlugin } from './createMentionsPlugin'
 import { createTagPlugin } from './createTagPlugin'
-import { createTodoPlugin } from './createTodoPlugin'
 import { createTaskViewLinkPlugin } from './createTaskViewLinkPlugin'
-
+import { createTodoPlugin } from './createTodoPlugin'
 import {
   optionsAutoFormatRule,
   optionsCreateNodeIdPlugin,
@@ -72,8 +73,7 @@ import {
   optionsSelectOnBackspacePlugin,
   optionsSoftBreakPlugin
 } from './options'
-import { PlateFloatingLink } from '../Components/FloatingLink'
-import { useAuth } from '@workduck-io/dwindle'
+import { parseTwitterUrl } from './parseTwitterUrl'
 
 export type PluginOptionType = {
   exclude?: {

apps/webapp/src/Editor/Plugins/parseTwitterUrl.ts

@@ -0,0 +1,47 @@
+import { MediaPlugin } from '@udecode/plate'
+import { getPluginOptions, PlateEditor, RenderFunction, Value } from '@udecode/plate-core'
+
+import { mog } from '@mexit/core'
+
+const twitterRegex = /^https?:\/\/twitter\.com\/(?:#!\/)?(\w+)\/status(es)?\/(?<id>\d+)/
+
+export const parseTwitterUrl = (url: string): EmbedUrlData | undefined => {
+  mog('URL IS', { url })
+  if (url?.match(twitterRegex)) {
+    return {
+      provider: 'twitter',
+      id: twitterRegex.exec(url)?.groups?.id,
+      url
+    }
+  }
+}
+
+export type EmbedUrlData = {
+  url?: string
+  provider?: string
+  id?: string
+  component?: RenderFunction<EmbedUrlData>
+}
+
+export const parseMediaUrl = <V extends Value>(
+  editor: PlateEditor<V>,
+  {
+    pluginKey,
+    url
+  }: {
+    pluginKey: string
+    url: string
+  }
+): EmbedUrlData => {
+  const { rules } = getPluginOptions<MediaPlugin, V>(editor, pluginKey)
+  if (!rules) return { url }
+
+  for (const { parser, component } of rules) {
+    const parsed = parser(url)
+    if (parsed) {
+      return { ...parsed, component }
+    }
+  }
+
+  return { url }
+}

apps/webapp/src/Hooks/useUpdater.ts

@@ -32,9 +32,8 @@ export const useUpdater = () => {
       updateLinksFromContent(noteId, content)
       updateTagsFromContent(noteId, content)
       const todos = getTodosFromContent(content)
-      mog('CONTENT FOR TODOS', { todos })
+      mog(`[${noteId}]: Updating from Contnet`, { todos })
       updateNodeTodos(noteId, todos)
-
       updateDocument('node', noteId, content)
     }
   }

apps/webapp/src/Stores/useTodoStore.ts

@@ -151,7 +151,9 @@ const useTodoStore = create<TodoStoreType>(
           }
 
           const nTodo = todos[nodeid] ?? []
+          mog('NUN TOODS', { nTodo })
           const nodeTodos = todosContent.map((content) => {
+            mog('found todo', { content })
             const todo = nTodo.find((todo) => todo.id === content.id && nodeid === todo.nodeid)
             const tags = getTagsFromContent([content])
             const mentions = getMentionsFromContent([content])