Move @workduck-io/mex-editor inside Extension (#77)

#77

* Use chromeStorageAdapter from inside of extension for stores

* mex-space editor inside extension now, with new useElementOnChange hook

* TagComponent in extension editor now, tsc --noEmit generates no errors

* Remove references to @workduck-io/mex-editor inside extension

* Remove redundant useHotKeys hook call

* Remove redundant useOnMouseClick hook call

* fixed extension quicklink element; removed duplicate code;

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

* fixed editor components positioning;

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

Co-authored-by: Sahil Shubham <[email protected]>

Author: Mukul Mehta

apps/extension/package.json

@@ -17,7 +17,6 @@
     "@sentry/react": "^6.17.2",
     "@vespaiach/axios-fetch-adapter": "^0.1.1",
     "@workduck-io/dwindle": "^0.0.15",
-    "@workduck-io/mex-editor": "^0.5.0",
     "chrome-extension-async": "^3.4.1",
     "core-js": "^3.21.1",
     "crypto-browserify": "^3.12.0",

apps/extension/src/Components/Editor/BalloonToolbar/components/useTransform.ts

@@ -3,16 +3,13 @@ import { TEditor, getNodes, getSelectionText, insertNodes } from '@udecode/plate
 
 import genereateName from 'project-name-generator'
 import toast from 'react-hot-toast'
-import { ELEMENT_ILINK, ILinkNode } from '@workduck-io/mex-editor'
 import { convertContentToRawText } from '@mexit/core'
 import { generateSnippetId, mog } from '@mexit/core'
 import { useContentStore } from '../../../../Stores/useContentStore'
 import { useSnippetStore } from '../../../../Stores/useSnippetStore'
 
 export const useTransform = () => {
-  // const addILink = useDataStore((s) => s.addILink)
   const addSnippet = useSnippetStore((s) => s.addSnippet)
-  const setContent = useContentStore((s) => s.setContent)
 
   const convertSelectionToQABlock = (editor: TEditor) => {
     try {
@@ -47,32 +44,6 @@ export const useTransform = () => {
     }, false)
   }
 
-  const replaceSelectionWithLink = (editor: TEditor, ilink: string, inline: boolean) => {
-    try {
-      const selectionPath = Editor.path(editor, editor.selection)
-
-      // mog('replaceSelectionWithLink  selPath', { selectionPath })
-
-      if (inline) Transforms.delete(editor)
-      else
-        Transforms.removeNodes(editor, {
-          at: editor.selection,
-          hanging: false
-        })
-      // Transforms.liftNodes(editor, { at: editor.selection, mode: 'lowest' })
-
-      // mog('replaceSelectionWithLink  detFrag', { selectionPath })
-
-      insertNodes<ILinkNode>(editor, [{ type: ELEMENT_ILINK, value: ilink, children: [] }], {
-        at: editor.selection
-      })
-      // mog('replaceSelectionWithLink  insNode', { sel: editor.selection })
-    } catch (e) {
-      console.error(e)
-      return e
-    }
-  }
-
   /**
    * Converts selection to new snippet
    * Shows notification of snippet creation
@@ -155,7 +126,6 @@ export const useTransform = () => {
     if (!isConvertable(editor)) return
 
     Editor.withoutNormalizing(editor, () => {
-      const selectionPath = Editor.path(editor, editor.selection)
       const nodes = Array.from(
         getNodes(editor, {
           mode: 'highest',

apps/extension/src/Components/Editor/Components.tsx

@@ -1,18 +1,18 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
+import { createPlateUI, withProps } from '@udecode/plate'
+import { StyledElement } from '@udecode/plate-styled-components'
+import { MediaEmbedElement, TableWrapper, LinkElement } from '@mexit/shared'
+import TagElement from '../../Editor/components/Tags/TagElement'
+import QuickLinkElement from '../../Editor/plugins/QuickLink/components/QuickLinkElement'
 import {
-  createPlateUI,
+  ELEMENT_ILINK,
   ELEMENT_LINK,
   ELEMENT_MEDIA_EMBED,
   ELEMENT_PARAGRAPH,
   ELEMENT_TABLE,
-  withProps
-} from '@udecode/plate'
-import { StyledElement } from '@udecode/plate-styled-components'
-import { TagElement } from '@workduck-io/mex-editor'
-import { MediaEmbedElement, TableWrapper, LinkElement } from '@mexit/shared'
-
-export const ELEMENT_TAG = 'tag'
+  ELEMENT_TAG
+} from '@mexit/core'
 
 export const components = {
   [ELEMENT_LINK]: withProps(LinkElement, {
@@ -26,6 +26,7 @@ export const components = {
     }
   }),
   [ELEMENT_TAG]: TagElement,
+  [ELEMENT_ILINK]: QuickLinkElement,
   [ELEMENT_MEDIA_EMBED]: MediaEmbedElement,
   [ELEMENT_TABLE]: TableWrapper
 }

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

@@ -1,17 +1,8 @@
 import { createPlugins, ELEMENT_MEDIA_EMBED, ELEMENT_TABLE } from '@udecode/plate'
-import {
-  MexEditor,
-  ComboboxKey,
-  QuickLinkElement,
-  ComboboxConfig,
-  ELEMENT_TAG,
-  ELEMENT_ILINK
-} from '@workduck-io/mex-editor'
 import { useSpring } from 'react-spring'
 import { useDebouncedCallback } from 'use-debounce'
 
-import React, { useState, useEffect, useMemo, useRef } from 'react'
-import styled from 'styled-components'
+import React, { useState, useMemo } from 'react'
 
 import { EditorStyles, useEditorChange } from '@mexit/shared'
 import generatePlugins from '../../Utils/plugins'
@@ -22,11 +13,12 @@ import { useTagStore } from '../../Hooks/useTags'
 
 import components from './Components'
 import BallonMarkToolbarButtons from './BalloonToolbar/EditorBalloonToolbar'
-import { Tag, CaptureType, QuickLinkType, ActionType } from '@mexit/core'
+import { Tag, QuickLinkType, ActionType, ELEMENT_TAG, ELEMENT_ILINK } from '@mexit/core'
 import { useEditorContext } from '../../Hooks/useEditorContext'
-import { styleSlot } from '../../contentScript'
 import useDataStore from '../../Stores/useDataStore'
-import { MexEditorOptions } from '@workduck-io/mex-editor/lib/types/editor'
+import { ComboboxConfig, ComboboxKey } from '../../Editor/types'
+import MexEditor from '../../Editor/MexEditor'
+import { MexEditorOptions } from '../../Editor/types/editor'
 
 interface EditorProps {
   nodePath?: string
@@ -43,12 +35,6 @@ const commands = [
     icon: 'ri:table-line',
     type: 'Quick Actions'
   },
-  // {
-  //   command: 'canvas',
-  //   text: 'Insert Drawing canvas',
-  //   icon: 'ri:markup-line',
-  //   type: 'Quick Actions'
-  // },
   {
     command: 'webem',
     text: 'Insert Web embed',
@@ -60,18 +46,11 @@ const commands = [
 export const Editor: React.FC<EditorProps> = ({ readOnly, onChange }) => {
   const { searchResults, activeIndex, activeItem } = useSputlitContext()
   const { previewMode, nodeContent, node, setPreviewMode } = useEditorContext()
-  const currTabURL = window.location.href
-  const [pageMetaTags, setPageMetaTags] = useState<any[]>([])
-  const [userTags, setUserTags] = useState<Tag[]>([])
   const ilinks = useDataStore((store) => store.ilinks)
 
   const addTags = useTagStore((store) => store.addTags)
   const tags = useTagStore((store) => store.tags)
 
-  const plugins = createPlugins(generatePlugins())
-  const userDetails = useAuthStore((store) => store.userDetails)
-  const workspaceDetails = useAuthStore((store) => store.workspaceDetails)
-
   useEditorChange(node.nodeid, nodeContent, onChange)
 
   const comboboxConfig: ComboboxConfig = {
@@ -183,7 +162,7 @@ export const Editor: React.FC<EditorProps> = ({ readOnly, onChange }) => {
           options={editorOptions}
           editorId={node.nodeid}
           value={nodeContent}
-          portalElement={document.getElementById('mexit').shadowRoot.getElementById('sputlit-main')}
+          portalElement={document.getElementById('mexit').shadowRoot.getElementById('sputlit-container')}
         />
       </EditorStyles>
     </EditorWrapper>

apps/extension/src/Editor/MexEditor.tsx

@@ -0,0 +1,57 @@
+import React, { useState, useEffect } from 'react'
+import { Plate, selectEditor, usePlateEditorRef } from '@udecode/plate'
+import { useComboboxConfig } from './components/ComboBox/config'
+import { MultiComboboxContainer } from './components/MultiCombobox/multiComboboxContainer'
+import { useMexEditorStore } from './store/editor'
+import { MexEditorProps, MexEditorValue } from './types/editor'
+
+export function MexEditor(props: MexEditorProps) {
+  const editorRef = usePlateEditorRef()
+  const [content, setContent] = useState<MexEditorValue>([])
+  const setMetaData = useMexEditorStore((s) => s.setMetaData)
+
+  useEffect(() => {
+    if (editorRef && props?.options?.focusOptions) {
+      selectEditor(editorRef, props.options.focusOptions)
+    }
+    setMetaData(props.meta)
+  }, [editorRef, props.editorId]) // eslint-disable-line
+
+  const { plugins, comboOnKeydownConfig } = useComboboxConfig(
+    props.editorId,
+    props?.comboboxConfig,
+    props?.components,
+    props?.plugins
+  )
+
+  const onChange = (value: MexEditorValue) => {
+    setContent(value)
+    if (props.onChange) {
+      props.onChange(value)
+    }
+  }
+
+  return (
+    <>
+      <Plate
+        id={props.editorId}
+        value={props.value}
+        onChange={onChange}
+        editableProps={props?.options?.editableProps}
+        plugins={plugins}
+      >
+        <>
+          <MultiComboboxContainer
+            keys={comboOnKeydownConfig.keys}
+            slashCommands={comboOnKeydownConfig.slashCommands}
+            portalElement={props?.portalElement}
+          />
+          {props.options?.withBalloonToolbar && props.BalloonMarkToolbarButtons}
+        </>
+      </Plate>
+      {props.debug && <pre>{JSON.stringify(content, null, 2)}</pre>}
+    </>
+  )
+}
+
+export default MexEditor

apps/extension/src/Editor/components/ComboBox/config.tsx

@@ -0,0 +1,78 @@
+import { PlatePlugin, PlatePluginComponent } from '@udecode/plate'
+import useMemoizedPlugins, { generatePlugins } from '../../plugins'
+import { QuickLinkComboboxItem } from '../../plugins/QuickLink/components/QuickLinkComboboxItem'
+import { ELEMENT_ILINK, ELEMENT_TAG } from '@mexit/core'
+import useMultiComboboxOnChange from '../MultiCombobox/useMultiComboboxChange'
+import useMultiComboboxOnKeyDown from '../MultiCombobox/useMultiComboboxOnKeyDown'
+import { SlashComboboxItem } from '../SlashCommands/SlashComboboxItem'
+import { TagComboboxItem } from '../Tags/TagComboboxItem'
+import { ComboboxConfig, ComboboxKey, ComboboxKeyDownConfig, ComboboxOnChangeConfig } from './types'
+
+export const useComboboxConfig = (
+  editorId: string,
+  config: ComboboxConfig,
+  components: Record<string, PlatePluginComponent<any | undefined>> = {},
+  customPlugins?: Array<PlatePlugin>
+) => {
+  const keys = config.onKeyDownConfig.keys
+
+  const comboOnKeydownConfig: ComboboxKeyDownConfig = {
+    keys: {
+      ilink: {
+        slateElementType: ELEMENT_ILINK,
+        newItemHandler: keys.ilink.newItemHandler,
+        itemRenderer: QuickLinkComboboxItem
+      },
+      tag: {
+        slateElementType: ELEMENT_TAG,
+        newItemHandler: keys.tag.newItemHandler,
+        itemRenderer: TagComboboxItem
+      },
+      slash_command: {
+        slateElementType: 'slash_command',
+        newItemHandler: keys.slash_command.newItemHandler,
+        itemRenderer: SlashComboboxItem
+      }
+    },
+    slashCommands: config.onKeyDownConfig.slashCommands
+  }
+
+  const comboOnChangeConfig: ComboboxOnChangeConfig = {
+    ilink: {
+      cbKey: ComboboxKey.ILINK,
+      trigger: '[[',
+      data: []
+    },
+    tag: {
+      cbKey: ComboboxKey.TAG,
+      trigger: '#',
+      data: [],
+      icon: 'ri:hashtag'
+    },
+    slash_command: {
+      cbKey: ComboboxKey.SLASH_COMMAND,
+      trigger: '/',
+      icon: 'ri:flask-line',
+      data: []
+    },
+    ...(config.onChangeConfig as any)
+  }
+
+  const prePlugins = useMemoizedPlugins(customPlugins ?? generatePlugins(), components)
+
+  const plugins = [
+    ...prePlugins,
+    {
+      key: 'MULTI_COMBOBOX',
+      handlers: {
+        onChange: useMultiComboboxOnChange(editorId, comboOnChangeConfig),
+        onKeyDown: useMultiComboboxOnKeyDown(comboOnKeydownConfig)
+      }
+    }
+  ]
+
+  return {
+    plugins,
+    comboOnKeydownConfig
+  }
+}