Readme React sample

[maartenhvdh]

Brief bug description

React sample in the readme didn't work for me

Repro steps

1. Install
2. Copy paste React sample
3. Gives multiple errors, mainly on naming

Expected behavior

This is the working React sample:

import { PortableText, PortableTextReactComponents } from "@portabletext/react";
import {
  browserParse,
  transformToPortableText,
} from '@kontent-ai/rich-text-resolver';
import { useMemo } from "react";

const createPortableTextComponents = (linkedItems) => {
  const portableTextComponents: Partial<PortableTextReactComponents> = {
    types: {
      component: (block) => {
        const item = linkedItems.find(
          (item) => item.system.codename === block.value.component._ref
        );
        return <div>{item?.elements.text_element.value}</div>;
      },
      table: ({ value }) => {
        const table = (
          <table>
            {value.rows.map((row) => (
              <tr>
                {row.cells.map((cell) => {
                  return (
                    <td>
                      <PortableText
                        value={cell.content}
                        components={portableTextComponents}
                      />
                    </td>
                  );
                })}
              </tr>
            ))}
          </table>
        );
        return table;
      },
      image: ({ value }) => {
        // It is possible to use images from the rich text element response same as for linked items
        // const image = images.find(image => image.image_id === value.asset._ref)
        return <img src={value.asset.url}></img>;
      },
    },
    marks: {
      link: ({ value, children }) => {
        const target = (value?.href || "").startsWith("http")
          ? "_blank"
          : undefined;
        return (
          <a
            href={value?.href}
            target={target}
            rel={value?.rel}
            title={value?.title}
            data-new-window={value["data-new-window"]}
          >
            {children}
          </a>
        );
      },
      internalLink: ({ value, children }) => {
        // It is possible to use links from the rich text element response same as for linked items
        // const item = links.find(link => link.link_id === value.reference._ref);
        return (
          <a href={"https://somerandomwebsite.xyz/" + value.reference._ref}>
            {children}
          </a>
        );
      },
    },
  };

  const MyComponent = ({ props }) => {
    // https://github.com/portabletext/react-portabletext#customizing-components
    const parsedTree = browserParse(props.element.value);
    const portableText = transformToPortableText(parsedTree);

    return (
      <PortableText value={portableText} components={portableTextComponents} />
    );
  }
};

Test environment

n/a

Additional context

n/a

Screenshots

n/a

[Simply007]

I wrapped code sample to code snippet syntax

[Simply007]

I still don't understand the transformation of createPortableTextComponents that does not return portable components and is not being used inside the component.

Could you provide the errors you got? Are you using TS or JS?

The sample itself should work more like a skeleton that you adjust with your resolvers (we might need to emphasize that).

There is a working example that this skeleton is derived from: kontent-ai-bot/sample-app-react#224

In PR, there are also some functional issues I described in the review.

[maartenhvdh]

I am using typescript and I have it up and running in my MOAD environment but I had issues with:

[Simply007]

I am using typescript and I have it up and running in my MOAD environment but I had issues with:

Yes - that is because you removed the brackets and forgot to add a return statement around the expression (thus function return void):

• https://github.com/kontent-ai/rich-text-resolver-js/pull/19/files#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5L136-L198

[maartenhvdh]

So this works for me:

import { PortableText, PortableTextReactComponents } from "@portabletext/react";
import {
  browserParse,
  transformToPortableText,
} from '@kontent-ai/rich-text-resolver';
import { useMemo } from "react";

const createPortableTextComponents = (linkedItems) => {
  const portableTextComponents: Partial<PortableTextReactComponents> = {
    types: {
      component: (block) => {
        const item = linkedItems.find(
          (item) => item.system.codename === block.value.component._ref
        );
        return <div>{item?.elements.text_element.value}</div>;
      },
      table: ({ value }) => {
        const table = (
          <table>
            {value.rows.map((row) => (
              <tr>
                {row.cells.map((cell) => {
                  return (
                    <td>
                      <PortableText
                        value={cell.content}
                        components={portableTextComponents}
                      />
                    </td>
                  );
                })}
              </tr>
            ))}
          </table>
        );
        return table;
      },
      image: ({ value }) => {
        // It is possible to use images from the rich text element response same as for linked items
        // const image = images.find(image => image.image_id === value.asset._ref)
        return <img src={value.asset.url}></img>;
      },
    },
    marks: {
      link: ({ value, children }) => {
        const target = (value?.href || "").startsWith("http")
          ? "_blank"
          : undefined;
        return (
          <a
            href={value?.href}
            target={target}
            rel={value?.rel}
            title={value?.title}
            data-new-window={value["data-new-window"]}
          >
            {children}
          </a>
        );
      },
      internalLink: ({ value, children }) => {
        // It is possible to use links from the rich text element response same as for linked items
        // const item = links.find(link => link.link_id === value.reference._ref);
        return (
          <a href={"https://somerandomwebsite.xyz/" + value.reference._ref}>
            {children}
          </a>
        );
      },
    },
  }
  return portableTextComponents;
};

const MyComponent = ({ props }) => {
  // https://github.com/portabletext/react-portabletext#customizing-components
  const portableTextComponents = useMemo(
    () => createPortableTextComponents(props.element.linkedItems),
    [props.element.linkedItems]
  );

  const parsedTree = browserParse(props.element.value);
  const portableText = transformToPortableText(parsedTree);

  return (
    <PortableText value={portableText} components={portableTextComponents} />
  );
};

[pokornyd]

v1.0.0 modified the codebase and changed some naming. all code examples were adjusted accordingly. readability was chosen over complexity, so they are not copy-paste and assume some SDK and code knowledge, which is clearly communicated via inline comments. closing