From 22fc794014fe49128f7b8a401a7a001dffa0502d Mon Sep 17 00:00:00 2001 From: Jordan Lawrence Date: Mon, 30 Sep 2024 14:46:04 +0100 Subject: [PATCH] fix: exploring slowness on annotation modal --- .../inputs/PortableText/object/Annotation.tsx | 6 +++ .../PortableText/toolbar/ActionMenu.tsx | 5 +- .../inputs/PortableText/toolbar/helpers.tsx | 2 + .../form/inputs/PortableText/toolbar/hooks.ts | 6 ++- .../array/items/ArrayOfObjectsItem.tsx | 1 + .../object/fields/ArrayOfObjectsField.tsx | 2 + .../sanity/src/core/form/store/formState.ts | 3 ++ .../src/core/form/store/useFormState.ts | 1 + .../form/studio/contexts/FormCallbacks.tsx | 1 + .../panes/document/DocumentPaneProvider.tsx | 52 ++++++++++++++----- 10 files changed, 62 insertions(+), 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 index 7d0bd20f525..0f4f5988616 100644 --- 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} > +
testing
{children} )} diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx index 8dd0551d57f..86fb4db566d 100644 --- 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 index 58ae95fca7e..e0fa7c4085f 100644 --- 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 index aec537d67ee..d82477846c4 100644 --- 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 index 75381e61af7..417fe6c7d60 100644 --- 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 index 6e68f79e074..fff3f080ed9 100644 --- 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 index 0968ab4db91..72207ee1600 100644 --- 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({ 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 index a57912da68b..17906e5f50d 100644 --- 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 index 8b86d6613c0..c927899722a 100644 --- 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 index dc43f0902da..d096540a30f 100644 --- 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))