Editor Frequent Save Fixes; Image Upload Client Expiry Fixed

.changeset/kind-insects-battle.md

@@ -0,0 +1,6 @@
+---
+'mexit': patch
+'mexit-webapp': patch
+---
+
+Editor Frequent Save Fixes; Image Upload Client Expiry Fixed

apps/extension/package.json

@@ -18,7 +18,7 @@
     "@tippyjs/react": "^4.2.6",
     "@vespaiach/axios-fetch-adapter": "^0.1.1",
     "@webcomponents/custom-elements": "1.5.0",
-    "@workduck-io/dwindle": "^0.0.21",
+    "@workduck-io/dwindle": "^0.0.23",
     "@workduck-io/mex-components": "^0.0.17",
     "@workduck-io/tinykeys": "^1.5.0",
     "chrome-extension-async": "^3.4.1",
@@ -84,4 +84,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

apps/webapp/package.json

@@ -26,7 +26,7 @@
     "@sentry/react": "^6.17.4",
     "@sentry/tracing": "^6.17.4",
     "@tippyjs/react": "^4.2.6",
-    "@workduck-io/dwindle": "^0.0.21",
+    "@workduck-io/dwindle": "^0.0.23",
     "@workduck-io/flexsearch": "^0.7.22",
     "@workduck-io/mex-components": "^0.0.17",
     "@workduck-io/tinykeys": "^1.5.0",

apps/webapp/src/Components/Editor/ContentEditor.tsx

@@ -1,12 +1,12 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { focusEditor, getPlateEditorRef } from '@udecode/plate'
 import toast from 'react-hot-toast'
 import { useLocation, useParams } from 'react-router-dom'
 
 import { tinykeys } from '@workduck-io/tinykeys'
 
-import { defaultContent } from '@mexit/core'
+import { defaultContent, NodeEditorContent } from '@mexit/core'
 import { StyledEditor, EditorWrapper, isOnEditableElement } from '@mexit/shared'
 
 import { BlockOptionsMenu } from '../../Editor/Components/BlockContextMenu'
@@ -73,9 +73,17 @@ const ContentEditor = () => {
   const shortcuts = useHelpStore((store) => store.shortcuts)
   const isUserEditing = useEditorStore((store) => store.isEditing)
 
-  const nodeContent = useMemo(() => {
-    if (fsContent?.content) return fsContent.content
-    return defaultContent.content
+  const setInternalUpdate = useContentStore((store) => store.setInternalUpdate)
+
+  const [nodeContent, setNodeContent] = useState<NodeEditorContent>(
+    useContentStore.getState().contents?.[nodeid]?.content ?? defaultContent.content
+  )
+
+  useEffect(() => {
+    const internalUpdate = useContentStore.getState().internalUpdate
+
+    if (!internalUpdate && fsContent?.content) setNodeContent(fsContent?.content)
+    else setInternalUpdate(false)
   }, [nodeid, fsContent])
 
   const onChangeSave = useCallback(
@@ -216,7 +224,7 @@ const ContentEditor = () => {
             includeBlockInfo={true}
             // getSuggestions={getSuggestions}
             onChange={onChangeSave}
-            content={nodeContent?.length ? nodeContent : defaultContent.content}
+            content={nodeContent}
             nodeUID={nodeid}
             readOnly={viewOnly}
             autoFocus={false}

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

@@ -72,7 +72,7 @@ const Editor: React.FC<EditorProps> = ({
   const onDelayPerform = useDebouncedCallback((value) => {
     const f = !readOnly && typeof onChange === 'function' ? onChange : () => undefined
     f(value)
-  }, 400)
+  }, 200)
 
   const saveAfterDelay = useDebouncedCallback(
     typeof onAutoSave === 'function' ? onAutoSave : () => undefined,

apps/webapp/src/Components/Editor/SnippetEditor.tsx

@@ -4,6 +4,7 @@ import arrowLeftLine from '@iconify/icons-ri/arrow-left-line'
 import { getPlateEditorRef, selectEditor } from '@udecode/plate'
 import { debounce } from 'lodash'
 import { useForm } from 'react-hook-form'
+import { toast } from 'react-hot-toast'
 import { useLocation } from 'react-router-dom'
 
 import { IconButton } from '@workduck-io/mex-components'
@@ -98,14 +99,19 @@ const SnippetEditor = () => {
       Escape: (event) => {
         event.preventDefault()
         returnToSnippets()
+      },
+      '$mod+s': (event) => {
+        event.preventDefault()
+        saveSnippet()
+        toast('Saved')
       }
     })
 
     return () => {
       saveSnippet()
       unsubscribe()
     }
-  }, [])
+  }, [snippetid])
 
   const callbackAfterSave = () => {
     const { title } = getSnippetExtras()
@@ -128,6 +134,7 @@ const SnippetEditor = () => {
     onDelay(value)
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   const handleBannerButtonClick = () => {}
 
   return (

apps/webapp/src/Hooks/API/useNodeAPI.ts

@@ -74,15 +74,13 @@ export const useApi = () => {
       tags: getTagsFromContent(options.content)
     }
 
-    setContent(noteID, options.content ?? defaultContent.content)
-
     const data = await client
       .post(apiURLs.node.create, reqData, {
         headers: workspaceHeaders()
       })
       .then((d: any) => {
         const metadata = extractMetadata(d.data)
-        const content = deserializeContent(d.data.data ?? options.content)
+        const content = d.data.data ? deserializeContent(d.data.data) : options.content
         updateFromContent(noteID, content, metadata)
         addLastOpened(noteID)
         return d.data
@@ -191,15 +189,19 @@ export const useApi = () => {
       .post(url, reqData, {
         headers: workspaceHeaders()
       })
-      .then((d) => {
-        if (!isShared) {
-          setMetadata(noteID, extractMetadata(d.data))
-        } else {
-          updateMetadata(noteID, {
-            updatedAt: Date.now(),
-            lastEditedBy: currentUser.userID
-          })
-        }
+      .then((d: any) => {
+        const contentToSet = d.data.data ? deserializeContent(d.data.data) : content
+        const origMetadata = extractMetadata(d.data)
+        const metadata = isShared
+          ? {
+              ...origMetadata,
+              updatedAt: Date.now(),
+              lastEditedBy: currentUser.userID
+            }
+          : extractMetadata(d.data)
+
+        setContent(noteID, contentToSet, metadata)
+
         addLastOpened(noteID)
         return d.data
       })

apps/webapp/src/Hooks/useNamespaces.tsx

@@ -100,7 +100,7 @@ export const useNamespaces = () => {
 
   const getDefaultNamespace = (): SingleNamespace | undefined => {
     const namespaces = useDataStore.getState().namespaces
-    const namespace = namespaces.find((ns) => ns.name === RESERVED_NAMESPACES.default)
+    const namespace = namespaces.find((ns) => ns.name === RESERVED_NAMESPACES.default) ?? namespaces[0]
     return namespace
   }
 

apps/webapp/src/Hooks/useSave.ts

@@ -21,7 +21,7 @@ interface SaveEditorValueOptions {
 }
 
 export const useDataSaverFromContent = () => {
-  const setContent = useContentStore((state) => state.setContent)
+  const setInternalUpdate = useContentStore((state) => state.setInternalUpdate)
   const getContent = useContentStore((state) => state.getContent)
 
   const { updateLinksFromContent } = useLinks()
@@ -40,9 +40,9 @@ export const useDataSaverFromContent = () => {
     options?: SaveEditorValueOptions
   ) => {
     if (editorValue) {
-      setContent(nodeId, editorValue)
       mog('saveEditorValueAndUpdateStores', { nodeId, editorValue, options })
 
+      setInternalUpdate(true)
       if (options?.saveApi !== false) await saveDataAPI(nodeId, namespace, editorValue, options?.isShared ?? false)
 
       updateLinksFromContent(nodeId, editorValue)

apps/webapp/src/Stores/useEditorStore.tsx

@@ -5,7 +5,6 @@ import { persist } from 'zustand/middleware'
 
 import { NodeContent, NodeProperties, defaultContent, getInitialNode } from '@mexit/core'
 
-import { Settify } from '../Editor/Utils/helper'
 import { ComboTriggerType } from './useComboboxStore'
 import { useContentStore } from './useContentStore'
 

libs/core/src/Stores/contentStoreConstructor.ts

@@ -1,13 +1,15 @@
 import { Contents, NodeContent, NodeEditorContent, NodeMetadata } from '../Types/Editor'
 
 export interface ContentStoreState {
+  internalUpdate: boolean
+  setInternalUpdate: (value: boolean) => void
   contents: Contents
   saved: boolean
   setSaved: (saved: boolean) => void
   removeContent: (nodeid: string) => void
   getContent: (nodeid: string) => NodeContent
   getContentFromLink: (url: string) => NodeContent[]
-  setContent: (nodeid: string, content: NodeEditorContent, metadata?: NodeMetadata) => void
+  setContent: (nodeid: string, content: NodeEditorContent, metadata?: NodeMetadata, internalUpdate?: boolean) => void
   getAllMetadata: () => Record<string, NodeMetadata>
   getMetadata: (nodeid: string) => NodeMetadata
   setMetadata: (nodeid: string, metadata: NodeMetadata) => void
@@ -19,18 +21,24 @@ export interface ContentStoreState {
 }
 
 export const contentStoreConstructor = (set, get) => ({
+  internalUpdate: false,
+  setInternalUpdate: (value: boolean) => {
+    set({ internalUpdate: value })
+  },
   contents: {},
   saved: false,
   setSaved: (saved) => set(() => ({ saved })),
-  setContent: (nodeid, content, metadata) => {
+  setContent: (nodeid, content, metadata, internalUpdate) => {
     const oldContent = get().contents
 
-    const oldMetadata = oldContent[nodeid] && oldContent[nodeid].metadata ? oldContent[nodeid].metadata : undefined
+    const oldMetadata = oldContent[nodeid]?.metadata ?? {}
     delete oldContent[nodeid]
-    const nmetadata = { ...oldMetadata, ...metadata }
+    const nmetadata = metadata ? { ...oldMetadata, ...metadata } : oldMetadata
     set({
       contents: { [nodeid]: { type: 'editor', content, metadata: nmetadata }, ...oldContent }
     })
+
+    if (internalUpdate) get().setInternalUpdate(true)
   },
   getAllMetadata: () => {
     const contents = get().contents

yarn.lock

@@ -5882,10 +5882,10 @@
   resolved "https://registry.yarnpkg.com/@webcomponents/custom-elements/-/custom-elements-1.5.0.tgz#7d07ff4979312dda167cc0a2b7586e76dc1cf6ab"
   integrity sha512-c+7jPQCs9h/BYVcZ2Kna/3tsl3A/9EyXfvWjp5RiTDm1OpTcbZaCa1z4RNcTe/hUtXaqn64JjNW1yrWT+rZ8gg==
 
-"@workduck-io/dwindle@^0.0.21":
-  version "0.0.21"
-  resolved "https://npm.pkg.github.com/download/@workduck-io/dwindle/0.0.21/f3e68b45c46ec747eb52a29830910c2865b16015#f3e68b45c46ec747eb52a29830910c2865b16015"
-  integrity sha512-5i8wNKeRDAaec0+GCdSNrx434orG3m/7UY+KR79nX6mGV+AvsQVaaMlqAYuSBl760SC4RSF0OtckztnbkWmq6A==
+"@workduck-io/dwindle@^0.0.23":
+  version "0.0.23"
+  resolved "https://npm.pkg.github.com/download/@workduck-io/dwindle/0.0.23/86ec8b63ccece0b318aefa0786690ffa59fd7b2f#86ec8b63ccece0b318aefa0786690ffa59fd7b2f"
+  integrity sha512-oJiFB4xUK6Fhj4OnPgdoKEZVZJ9TOsUEdaFbvYGyCqDLZzYx2ZupyNR67eO87nNUxrzHJN8ajKFqFGS+ZLImcQ==
   dependencies:
     "@aws-sdk/client-cognito-identity" "^3.17.0"
     "@aws-sdk/client-s3" "^3.17.0"