refactor(core/form/input): use updated types for block schemas and pt…

… render callbacks

packages/sanity/src/core/form/inputs/PortableText/Compositor.tsx

@@ -130,12 +130,12 @@ export function Compositor(props: Omit<InputProps, 'schemaType' | 'arrayFunction
   const renderBlock = useCallback(
     (blockProps: BlockRenderProps) => {
       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<InputProps, 'schemaType' | 'arrayFunction
             selected={selected}
             type={blockType as BlockSchemaType}
           >
-            {renderDefault(blockProps)}
+            {children}
           </TextBlock>
         )
       }
@@ -192,16 +192,16 @@ export function Compositor(props: Omit<InputProps, 'schemaType' | 'arrayFunction
   const renderChild = useCallback(
     (childProps: BlockChildRenderProps) => {
       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 (
         <InlineObject

packages/sanity/src/core/form/inputs/PortableText/Editor.tsx

@@ -51,9 +51,8 @@ interface EditorProps {
 }
 
 const renderDecorator: RenderDecoratorFunction = (props) => {
-  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={() => <Decorator mark={value}>{rendered}</Decorator>}
+        renderDefault={() => <Decorator mark={value}>{children}</Decorator>}
       >
-        {rendered}
+        {children}
       </CustomComponent>
     )
   }
-  return <Decorator mark={value}>{rendered}</Decorator>
+  return <Decorator mark={value}>{children}</Decorator>
 }
 
 const renderStyle: RenderStyleFunction = (props) => {

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<HTMLElement>(null)
   const editor = usePortableTextEditor()
@@ -80,11 +80,11 @@ export const Annotation = function Annotation(props: AnnotationProps) {
   const text = useMemo(
     () => (
       <span ref={setTextElement} data-annotation="">
-        {renderDefault(renderProps)}
+        {children}
       </span>
     ),
 
-    [renderDefault, renderProps]
+    [children]
   )
 
   const openItem = useCallback(() => {

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 (
       <CustomComponent
         block={block}
         focused={focused}
         level={level}
-        renderDefault={_renderDefault}
+        renderDefault={renderDefault}
         selected={selected}
         title={type.title}
         value={value}

packages/sanity/src/core/form/inputs/PortableText/text/Style.tsx

@@ -4,16 +4,19 @@ import React, {useCallback, useMemo} from 'react'
 import {TEXT_STYLES} from './textStyles'
 
 export const Style = (props: BlockStyleRenderProps) => {
-  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(
+    () => <DefaultComponent>{children}</DefaultComponent>,
+    [DefaultComponent, children]
+  )
+  const _renderDefault = useCallback(() => defaultRendered, [defaultRendered])
 
-  const CustomComponent = type.components?.item
+  const CustomComponent = type.component
   if (CustomComponent) {
     return (
       <Text data-testid={`text-style--${value}`}>
@@ -30,5 +33,5 @@ export const Style = (props: BlockStyleRenderProps) => {
       </Text>
     )
   }
-  return <DefaultComponent>{children}</DefaultComponent>
+  return defaultRendered
 }

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,
     }
   })