Tags

external
Rich text
Solid

SolidJS rich text renderer

For SolidJS, there is a helper library that makes the integration process of rich texts very simple.

To install, use npm or another package manager:

npm install @caisy/rich-text-solid-renderer --save

For ease of use, just pass the JSON and the component will convert it to HTML:

 <RichTextRenderer node={text.json} />

to ensure that you pass the correct object to node, it should contain something like this:

{ type: "doc", ... }

An example using the rich text render with SolidStart can also be found here on Stackblitz:
https://stackblitz.com/github/caisy-io/rich-text-solid-demo

Here is also an advanced example overwriting the documentLink to render images that are linked inside the text:

<RichTextRenderer node={text.json} overwrites={
  {
    "documentLink": ({node}: {node: {attrs: {documentId: string}}}) => {
      const linkedAsset = text.connections.find((connection) => connection.id === node.attrs.documentId);

      if (linkedAsset && linkedAsset.src) {
        return <img src={linkedAsset.src}></img>
      }

      return null
    }
  }
}/>

Source Code:
https://github.com/caisy-io/rich-text-solid-demo

You can overwrite any node, depending on the use case. For example by overwriting text, you can replace variables with dynamic text or create you own link handling logic.


single caisy logo without name
caisy
Solutions
Resources
Made for you

© 2023 caisy

Tags

external
Rich text
Solid