fix: exploring slowness on annotation modal

sanity-io · Sep 30, 2024 · 22fc794 · 22fc794
1 parent 7aed0c0
commit 22fc794
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 17 deletions.
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/Annotation.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/Annotation.tsx
@@ -6,6 +6,7 @@ import {
   type ReactElement,
   type ReactNode,
   useCallback,
+  useEffect,
   useMemo,
   useState,
 } from 'react'
@@ -269,6 +270,10 @@ export const DefaultAnnotationComponent = (props: BlockAnnotationProps) => {
   const hasWarning = validation.some((v) => v.level === 'warning')
   const hasMarkers = markers.length > 0
 
+  useEffect(() => {
+    console.log('open', open)
+  }, [open])
+
   const {t} = useTranslation()
   const toneKey = useMemo(() => {
     if (hasError) {
@@ -318,6 +323,7 @@ export const DefaultAnnotationComponent = (props: BlockAnnotationProps) => {
           referenceElement={referenceElement}
           schemaType={schemaType}
         >
+          <div>testing</div>
           {children}
         </ObjectEditModal>
       )}

diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx
@@ -76,6 +76,9 @@ export const ActionMenu = memo(function ActionMenu(props: ActionMenuProps) {
   const children = useMemo(
     () =>
       actions.map((action) => {
+        if (action.title === 'Link') {
+          // console.log(action)
+        }
         const annotationDisabled =
           action.type === 'annotation' && (isEmptyTextBlock || isSelectingMultipleBlocks)
         const annotationDisabledText = isEmptyTextBlock
@@ -102,7 +105,7 @@ export const ActionMenu = memo(function ActionMenu(props: ActionMenuProps) {
             onClick={() => action.handle(active)}
             selected={active}
             text={action.title || action.key}
-            tooltipText={annotationDisabled ? annotationDisabledText : action.title || action.key}
+            tooltipText={isSelectingMultipleBlocks ? 'multi' : 'not'}
             tooltipProps={{
               disabled: disabled,
               placement: tooltipPlacement,

diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/helpers.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/helpers.tsx
@@ -98,6 +98,8 @@ function getPTEAnnotationActions(
   const types = editor.schemaTypes
   const focusChild = PortableTextEditor.focusChild(editor)
   const hasText = focusChild && focusChild.text
+
+  console.log(types.annotations)
   return types.annotations.map((aType) => {
     return {
       type: 'annotation',

diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/hooks.ts b/packages/sanity/src/core/form/inputs/PortableText/toolbar/hooks.ts
@@ -54,8 +54,10 @@ export function useActionGroups({
 
   const handleInsertAnnotation = useCallback(
     async (schemaType: ObjectSchemaType) => {
-      const initialValue = await resolveInitialValue(schemaType)
-      const paths = PortableTextEditor.addAnnotation(editor, schemaType, initialValue)
+      console.log('res', Date.now())
+      // const initialValue = resolveInitialValue(schemaType)
+      // console.log(initialValue,  Date.now())
+      const paths = PortableTextEditor.addAnnotation(editor, schemaType, {})
       if (paths && paths.markDefPath) {
         onMemberOpen(paths.markDefPath)
       }

diff --git a/packages/sanity/src/core/form/members/array/items/ArrayOfObjectsItem.tsx b/packages/sanity/src/core/form/members/array/items/ArrayOfObjectsItem.tsx
@@ -91,6 +91,7 @@ export function ArrayOfObjectsItem(props: MemberItemProps) {
 
   const handleOpenItem = useCallback(
     (path: Path) => {
+      console.log('item')
       onPathOpen(path)
       onSetPathCollapsed(path, false)
     },

diff --git a/packages/sanity/src/core/form/members/object/fields/ArrayOfObjectsField.tsx b/packages/sanity/src/core/form/members/object/fields/ArrayOfObjectsField.tsx
@@ -168,7 +168,9 @@ export function ArrayOfObjectsField(props: {
 
   const handleOpenItem = useCallback(
     (path: Path) => {
+      console.log('field')
       onPathOpen(path)
+      return
       onSetPathCollapsed(path, false)
     },
     [onPathOpen, onSetPathCollapsed],

diff --git a/packages/sanity/src/core/form/store/formState.ts b/packages/sanity/src/core/form/store/formState.ts
@@ -242,6 +242,7 @@ export interface PrepareFormState {
 export function createPrepareFormState({
   decorators = {},
 }: CreatePrepareFormStateOptions = {}): PrepareFormState {
+  console.log('prep')
   const memoizePrepareFieldMember = createMemoizer<PrepareFieldMember>({
     decorator: decorators.prepareFieldMember,
     getPath: ({parent, field}) => [...parent.path, field.name],
@@ -1221,6 +1222,8 @@ export function createPrepareFormState({
         readOnly: scopedReadOnly,
       })
 
+      console.log('open me', isEqual(itemPath, parent.openPath))
+
       return {
         kind: 'item',
         key,

diff --git a/packages/sanity/src/core/form/store/useFormState.ts b/packages/sanity/src/core/form/store/useFormState.ts
@@ -120,6 +120,7 @@ export function useFormState<
   ])
 
   return useMemo(() => {
+    // console.log('mem go', openPath)
     return prepareFormState({
       schemaType,
       fieldGroupState: reconciledFieldGroupState,

diff --git a/packages/sanity/src/core/form/studio/contexts/FormCallbacks.tsx b/packages/sanity/src/core/form/studio/contexts/FormCallbacks.tsx
@@ -43,6 +43,7 @@ export const FormCallbacksProvider = memo(function FormCallbacksProvider(
     ref.current.onPathBlur(path)
   }, [])
   const onPathOpen = useCallback((path: Path) => {
+    console.log(ref.current.onPathOpen)
     ref.current.onPathOpen(path)
   }, [])
   const onSetPathCollapsed = useCallback((path: Path, collapsed: boolean) => {

diff --git a/packages/sanity/src/structure/panes/document/DocumentPaneProvider.tsx b/packages/sanity/src/structure/panes/document/DocumentPaneProvider.tsx
@@ -548,20 +548,42 @@ export const DocumentPaneProvider = memo((props: DocumentPaneProviderProps) => {
     isDeleted,
   ])
 
-  const formState = useFormState({
-    schemaType: schemaType!,
-    documentValue: displayed,
-    readOnly,
-    comparisonValue: compareValue,
-    focusPath,
-    openPath,
-    collapsedPaths,
-    presence,
-    validation,
-    collapsedFieldSets,
-    fieldGroupState,
-    changesOpen,
-  })
+  const memoFormStateArg = useMemo(
+    () => ({
+      schemaType: schemaType!,
+      documentValue: displayed,
+      readOnly,
+      comparisonValue: compareValue,
+      focusPath,
+      openPath,
+      collapsedPaths,
+      presence,
+      validation,
+      collapsedFieldSets,
+      fieldGroupState,
+      changesOpen,
+    }),
+    [
+      changesOpen,
+      collapsedFieldSets,
+      collapsedPaths,
+      compareValue,
+      displayed,
+      fieldGroupState,
+      focusPath,
+      openPath,
+      presence,
+      readOnly,
+      schemaType,
+      validation,
+    ],
+  )
+
+  const formState = useFormState(memoFormStateArg)
+
+  useEffect(() => {
+    console.log('new form state')
+  }, [formState])
 
   useEffect(() => {
     setDocumentMeta({
@@ -578,6 +600,7 @@ export const DocumentPaneProvider = memo((props: DocumentPaneProviderProps) => {
   const setOpenPath = useCallback(
     (path: Path) => {
       const ops = getExpandOperations(formStateRef.current!, path)
+      console.log(ops)
       ops.forEach((op) => {
         if (op.type === 'expandPath') {
           onSetCollapsedPath((prevState) => setAtPath(prevState, op.path, false))
@@ -767,6 +790,7 @@ export const DocumentPaneProvider = memo((props: DocumentPaneProviderProps) => {
 
   // Reset `focusPath` when `documentId` or `params.path` changes
   useEffect(() => {
+    console.log('this effect')
     if (ready && params.path) {
       const {path, ...restParams} = params
       const pathFromUrl = resolveKeyedPath(formStateRef.current?.value, pathFromString(path))