bench

Author: stipsan

.oxlintrc.json

@@ -32,7 +32,7 @@
         "jsx-no-new-object-as-prop": "off",
         "jsx-no-new-array-as-prop": "off",
         "jsx-no-jsx-as-prop": "off",
-        "jsx-no-new-function-as-prop": "off",
+        "jsx-no-new-function-as-prop": "off"
       }
     }
   ]

demo/components/SpeechSynthesis.tsx

@@ -1,6 +1,5 @@
 import type {PortableTextMarkComponent} from '@portabletext/react'
 
-
 interface SpeechSynthesisMark {
   _type: 'speech'
   pitch?: number
@@ -15,14 +14,16 @@ export const SpeechSynthesis: PortableTextMarkComponent<SpeechSynthesisMark> = (
 }) => {
   const pitch = value?.pitch || 1
 
-
   return (
-    <button type="button" onClick={() => {
-      const msg = new SpeechSynthesisUtterance()
-    msg.text = text
-    msg.pitch = pitch
-    window.speechSynthesis.speak(msg)
-    }}>
+    <button
+      type="button"
+      onClick={() => {
+        const msg = new SpeechSynthesisUtterance()
+        msg.text = text
+        msg.pitch = pitch
+        window.speechSynthesis.speak(msg)
+      }}
+    >
       {children}
     </button>
   )

demo/components/TermDefinition.tsx

@@ -23,7 +23,11 @@ export const TermDefinition: PortableTextMarkComponent<DefinitionMark> = ({value
         </Text>
       }
     >
-      <span style={{textDecoration: 'underline'}} onMouseOver={() => setOpen(true)} onMouseOut={() => setOpen(false)}>
+      <span
+        style={{textDecoration: 'underline'}}
+        onMouseOver={() => setOpen(true)}
+        onMouseOut={() => setOpen(false)}
+      >
         {children}
       </span>
     </Popover>

demo/demo.tsx

@@ -1,6 +1,6 @@
 import {type PortableTextComponents, PortableText} from '@portabletext/react'
 import {studioTheme, ThemeProvider} from '@sanity/ui'
-import {StrictMode} from 'react'
+import {StrictMode, useEffect, useState} from 'react'
 import {createRoot} from 'react-dom/client'
 
 import {AnnotatedMap} from './components/AnnotatedMap'
@@ -49,7 +49,15 @@ const ptComponents: PortableTextComponents = {
 }
 
 function Demo() {
-  return <PortableText value={blocks} components={ptComponents} />
+  const [count, setCount] = useState(0)
+  const showingEverything = count >= blocks.length
+  const blocksToShow = showingEverything ? blocks : blocks.slice(0, count)
+  useEffect(() => {
+    if (!showingEverything) {
+      setCount(count + 1)
+    }
+  }, [showingEverything, count])
+  return <PortableText value={blocksToShow} components={ptComponents} />
 }
 
 const root = createRoot(document.getElementById('demo-root')!)

package.json

@@ -77,6 +77,7 @@
     "refractor": "^5.0.0",
     "rimraf": "^5.0.1",
     "rollup-plugin-visualizer": "^6.0.5",
+    "@portabletext/react-latest": "npm:@portabletext/react@latest",
     "styled-components": "npm:@sanity/css-in-js@6.1.26",
     "tsdown": "^0.17.2",
     "typescript": "5.9.3",

pnpm-lock.yaml

@@ -13,20 +13,29 @@ import {
   DefaultUnknownType,
 } from './unknown'
 
-export const DefaultHardBreak = (): JSX.Element => <br />
+const DefaultHardBreak = (): JSX.Element => <br />
 
-export const defaultBlockStyles: Record<
+const DefaultParagraph: PortableTextBlockComponent = ({children}) => <p>{children}</p>
+const DefaultBlockquote: PortableTextBlockComponent = ({children}) => <blockquote>{children}</blockquote>
+const DefaultH1: PortableTextBlockComponent = ({children}) => <h1>{children}</h1>
+const DefaultH2: PortableTextBlockComponent = ({children}) => <h2>{children}</h2>
+const DefaultH3: PortableTextBlockComponent = ({children}) => <h3>{children}</h3>
+const DefaultH4: PortableTextBlockComponent = ({children}) => <h4>{children}</h4>
+const DefaultH5: PortableTextBlockComponent = ({children}) => <h5>{children}</h5>
+const DefaultH6: PortableTextBlockComponent = ({children}) => <h6>{children}</h6>
+
+const defaultBlockStyles: Record<
   PortableTextBlockStyle,
   PortableTextBlockComponent | undefined
 > = {
-  normal: ({children}) => <p>{children}</p>,
-  blockquote: ({children}) => <blockquote>{children}</blockquote>,
-  h1: ({children}) => <h1>{children}</h1>,
-  h2: ({children}) => <h2>{children}</h2>,
-  h3: ({children}) => <h3>{children}</h3>,
-  h4: ({children}) => <h4>{children}</h4>,
-  h5: ({children}) => <h5>{children}</h5>,
-  h6: ({children}) => <h6>{children}</h6>,
+  normal: DefaultParagraph,
+  blockquote: DefaultBlockquote,
+  h1: DefaultH1,
+  h2: DefaultH2,
+  h3: DefaultH3,
+  h4: DefaultH4,
+  h5: DefaultH5,
+  h6: DefaultH6,
 }
 
 export const defaultComponents: PortableTextReactComponents = {

src/components/defaults.tsx

@@ -42,8 +42,11 @@ export function PortableText<B extends TypedObject = PortableTextBlock>({
   onMissingComponent: missingComponentHandler = printWarning,
 }: PortableTextProps<B>): ReactNode {
   const handleMissingComponent = missingComponentHandler || noop
-  const blocks = useMemo(() => Array.isArray(input) ? input : [input], [input])
-  const nested = useMemo(() => nestLists(blocks, listNestingMode || LIST_NEST_MODE_HTML), [blocks, listNestingMode])
+  const blocks = useMemo(() => (Array.isArray(input) ? input : [input]), [input])
+  const nested = useMemo(
+    () => nestLists(blocks, listNestingMode || LIST_NEST_MODE_HTML),
+    [blocks, listNestingMode],
+  )
 
   const components = useMemo(() => {
     return componentOverrides
@@ -300,15 +303,10 @@ function RenderCustomBlock({
   index: number
   isInline: boolean
 }) {
-  const nodeOptions = {
-    value: node,
-    isInline,
-    index,
-    renderNode,
-  }
-
   const Node = components.types[node._type]
-  return Node ? <Node {...nodeOptions} /> : null
+  return Node ? (
+    <Node value={node} isInline={isInline} index={index} renderNode={renderNode} />
+  ) : null
 }
 
 function RenderBlock({
@@ -326,13 +324,13 @@ function RenderBlock({
   index: number
   isInline: boolean
 }) {
-  const {_key, ...props} = serializeBlock({
+  const block = serializeBlock({
     node,
     index,
     isInline,
     renderNode,
   })
-  const style = props.node.style || 'normal'
+  const style = block.node.style || 'normal'
   const handler =
     typeof components.block === 'function' ? components.block : components.block[style]
   const Block = handler || components.unknownBlockStyle
@@ -344,7 +342,11 @@ function RenderBlock({
     })
   }
 
-  return <Block {...props} value={props.node} renderNode={renderNode} />
+  return (
+    <Block index={block.index} isInline={block.isInline} value={block.node} renderNode={renderNode}>
+      {block.children}
+    </Block>
+  )
 }
 
 function RenderText({
@@ -377,20 +379,13 @@ function RenderUnknownType({
   index: number
   isInline: boolean
 }) {
-  const nodeOptions = {
-    value: node,
-    isInline,
-    index,
-    renderNode,
-  }
-
   handleMissingComponent(unknownTypeWarning(node._type), {
     nodeType: 'block',
     type: node._type,
   })
 
   const UnknownType = components.unknownType
-  return <UnknownType {...nodeOptions} />
+  return <UnknownType value={node} isInline={isInline} index={index} renderNode={renderNode} />
 }
 
 function serializeBlock(options: Serializable<PortableTextBlock>): SerializedBlock {