portabletext/react-portabletext

Type Guard

sjblurton opened this issue · 1 comments

react-portable-text.tsx markKey

I'm having an issue with the types for markKey as it's expecting a string but the type could be a string or undefined.
@portabletext/react/src/react-portable-text.tsx line 180

Screenshot 2022-11-20 at 20 24 42

Now if the types are right then we need a way to deal with it possibly being undefined and type-guarded. Or maybe it's already type guided but we are not inferring the type after?

  function renderSpan(node: ToolkitNestedPortableTextSpan, _index: number, key: string) {
    const {markDef, markType, markKey} = node
    const Span = components.marks[markType] || components.unknownMark
    const children = node.children.map((child, childIndex) =>
      renderNode({node: child, index: childIndex, isInline: true, renderNode})
    )

    if (Span === components.unknownMark) {
      handleMissingComponent(unknownMarkWarning(markType), {nodeType: 'mark', type: markType})
    }

  const isDefined  =<T,> (value: T | undefined): value is T => typeof value !== 'undefined' 

  if(isDefined(markKey))
    return (
      <Span
        key={key}
        text={spanToPlainText(node)}
        value={markDef}
        markType={markType}
        markKey={markKey}
        renderNode={renderNode}
      >
        {children}
      </Span>
    )

    return <></>
  }

buildMarksTree.ts

website/node_modules/@portabletext/toolkit/src/buildMarksTree.ts. line 94

_key

Screenshot 2022-11-20 at 20 40 22

markDef

Screenshot 2022-11-20 at 20 43 47

similar issue here with _key, and markDef...

    const isDefined  =<T,> (value: T | undefined): value is T => typeof value !== 'undefined' 

    for (const markKey of marksNeeded) {
      const markDef = markDefs.find((def) => def._key === markKey)
      const markType = markDef ? markDef._type : markKey
      const node: ToolkitNestedPortableTextSpan<M> = {
        _type: '@span',
        children: [],
        markType,
        markKey,
      }

    if(isDefined(span._key)) node._key = span._key
    if(isDefined(markDef)) node.markDef = markDef

My suggestion would be something like this, but you may have better ideas.

upgraded to V2 and the issue is fixed. sorry.