From aa3ee4e4128659fcfd17030a3e4fdebf276a89d4 Mon Sep 17 00:00:00 2001 From: Per-Kristian Nordnes Date: Thu, 15 Dec 2022 13:30:29 +0100 Subject: [PATCH] refactor(core/form/input): use updated types for block schemas and pt render callbacks --- .../core/form/inputs/PortableText/Compositor.tsx | 14 +++++++------- .../src/core/form/inputs/PortableText/Editor.tsx | 11 +++++------ .../form/inputs/PortableText/text/Annotation.tsx | 6 +++--- .../form/inputs/PortableText/text/ListItem.tsx | 11 +++++------ .../core/form/inputs/PortableText/text/Style.tsx | 13 ++++++++----- .../form/inputs/PortableText/toolbar/helpers.tsx | 2 +- 6 files changed, 29 insertions(+), 28 deletions(-) diff --git a/packages/sanity/src/core/form/inputs/PortableText/Compositor.tsx b/packages/sanity/src/core/form/inputs/PortableText/Compositor.tsx index d76aac903ba..2d8937ee74d 100644 --- a/packages/sanity/src/core/form/inputs/PortableText/Compositor.tsx +++ b/packages/sanity/src/core/form/inputs/PortableText/Compositor.tsx @@ -130,12 +130,12 @@ export function Compositor(props: Omit { const { - value: block, - type: blockType, - renderDefault, + children, focused: blockFocused, - selected, path: blockPath, + selected, + type: blockType, + value: block, } = blockProps const isTextBlock = block._type === editor.types.block.name if (isTextBlock) { @@ -152,7 +152,7 @@ export function Compositor(props: Omit - {renderDefault(blockProps)} + {children} ) } @@ -192,16 +192,16 @@ export function Compositor(props: Omit { const { + children, focused: childFocused, path: childPath, - renderDefault, selected, type: childType, value: child, } = childProps const isSpan = child._type === editor.types.span.name if (isSpan) { - return renderDefault(childProps) + return children } return ( { - const {value, renderDefault, type, focused, selected} = props - const CustomComponent = type.components?.item - const rendered = renderDefault(props) + const {children, value, type, focused, selected} = props + const CustomComponent = type.component if (CustomComponent) { // eslint-disable-next-line react/jsx-no-bind return ( @@ -63,13 +62,13 @@ const renderDecorator: RenderDecoratorFunction = (props) => { title={type.title} value={value} // eslint-disable-next-line react/jsx-no-bind - renderDefault={() => {rendered}} + renderDefault={() => {children}} > - {rendered} + {children} ) } - return {rendered} + return {children} } const renderStyle: RenderStyleFunction = (props) => { diff --git a/packages/sanity/src/core/form/inputs/PortableText/text/Annotation.tsx b/packages/sanity/src/core/form/inputs/PortableText/text/Annotation.tsx index b2d0518d780..a2aed7feb0f 100644 --- a/packages/sanity/src/core/form/inputs/PortableText/text/Annotation.tsx +++ b/packages/sanity/src/core/form/inputs/PortableText/text/Annotation.tsx @@ -62,7 +62,7 @@ const TooltipBox = styled(Box).attrs({forwardedAs: 'span'})` export const Annotation = function Annotation(props: AnnotationProps) { const {onItemOpen, onItemClose, renderCustomMarkers, scrollElement, renderProps, readOnly} = props - const {type, value, path, renderDefault, selected, focused} = renderProps + const {children, type, value, path, selected, focused} = renderProps const {Markers = DefaultMarkers} = useFormBuilder().__internal.components const annotationRef = useRef(null) const editor = usePortableTextEditor() @@ -80,11 +80,11 @@ export const Annotation = function Annotation(props: AnnotationProps) { const text = useMemo( () => ( - {renderDefault(renderProps)} + {children} ), - [renderDefault, renderProps] + [children] ) const openItem = useCallback(() => { diff --git a/packages/sanity/src/core/form/inputs/PortableText/text/ListItem.tsx b/packages/sanity/src/core/form/inputs/PortableText/text/ListItem.tsx index b498796c17d..58cb366b243 100644 --- a/packages/sanity/src/core/form/inputs/PortableText/text/ListItem.tsx +++ b/packages/sanity/src/core/form/inputs/PortableText/text/ListItem.tsx @@ -1,19 +1,18 @@ import {BlockListItemRenderProps} from '@sanity/portable-text-editor' -import React, {useCallback, useMemo} from 'react' +import React, {useCallback} from 'react' export const ListItem = (props: BlockListItemRenderProps) => { - const {block, type, selected, focused, level, value, renderDefault} = props - const children = useMemo(() => renderDefault(props), [props, renderDefault]) - const _renderDefault = useCallback(() => children, [children]) + const {block, children, type, selected, focused, level, value} = props + const renderDefault = useCallback(() => <>{children}, [children]) - const CustomComponent = type.components?.item + const CustomComponent = type.component if (CustomComponent) { return ( { - const {block, type, selected, focused, value, renderDefault} = props + const {block, focused, children, selected, type, value} = props const DefaultComponent = useMemo( () => (block.style && TEXT_STYLES[block.style] ? TEXT_STYLES[block.style] : TEXT_STYLES[0]), [block.style] ) - const children = useMemo(() => renderDefault(props), [props, renderDefault]) - const _renderDefault = useCallback(() => children, [children]) + const defaultRendered = useMemo( + () => {children}, + [DefaultComponent, children] + ) + const _renderDefault = useCallback(() => defaultRendered, [defaultRendered]) - const CustomComponent = type.components?.item + const CustomComponent = type.component if (CustomComponent) { return ( @@ -30,5 +33,5 @@ export const Style = (props: BlockStyleRenderProps) => { ) } - return {children} + return defaultRendered } 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 7fd401c1531..5f3e49a32db 100644 --- a/packages/sanity/src/core/form/inputs/PortableText/toolbar/helpers.tsx +++ b/packages/sanity/src/core/form/inputs/PortableText/toolbar/helpers.tsx @@ -123,7 +123,7 @@ export function getBlockStyles(types: PortableTextMemberTypes): BlockStyleItem[] return { key: `style-${style.value}`, style: style.value, - styleComponent: style && style.components?.item, + styleComponent: style && style.component, title: style.title, } })