Contentful rich text renderer for solid-js, based upon rich-text-react-renderer but with some tweaks

Last update: Jun 13, 2022

License: MIT Strict TypeScript Checked

Release npm package Test

rich-text-solid-renderer

Solid-js renderer for contentful rich text.

Installation

Using npm:

npm install rich-text-solid-renderer

Using yarn:

yarn add rich-text-solid-renderer

Usage

import {ParentComponent} from 'solid-js';
import SolidRichText from 'rich-text-solid-renderer';

const document = {
  nodeType: 'document',
  data: {},
  content: [
    {
      nodeType: 'paragraph',
      data: {},
      content: [
        {
          nodeType: 'text',
          value: 'Hello world!',
          marks: [],
          data: {}
        },
      ],
    },
  ],
};

const Parent: ParentComponent = (props) => {
    return <SolidRichText document={document}/>
}; // -> 

Hello world!

import {ParentComponent} from 'solid-js';
import SolidRichText from 'rich-text-solid-renderer';

const document = {
  nodeType: 'document',
  content: [
    {
      nodeType: 'paragraph',
      content: [
        {
          nodeType: 'text',
          value: 'Hello',
          marks: [{ type: 'bold' }],
        },
        {
          nodeType: 'text',
          value: ' world!',
          marks: [{ type: 'italic' }],
        },
      ],
    },
  ],
};


const Parent: ParentComponent = (props) => {
    return <SolidRichText document={document}/>
};
// -> 

Hello world!

You can also pass custom renderers for both marks and nodes as an optional parameter like so:

{props.children}

; const Text = (props) =>

{props.children}

; const options = { renderMark: { [MARKS.BOLD]: props => {props.children}, }, renderNode: { [BLOCKS.PARAGRAPH]: (props) => {props.children}, }, renderText: text => text.replace('!', '?'), }; const Parent: ParentComponent = (props) => { return }; // ->

Hello

world?

">
import { BLOCKS, MARKS } from '@contentful/rich-text-types';
import {ParentComponent} from 'solid-js';
import SolidRichText, { NodeRendererProps } from 'rich-text-solid-renderer';


const document = {
  nodeType: 'document',
  content: [
    {
      nodeType: 'paragraph',
      content: [
        {
          nodeType: 'text',
          value: 'Hello',
          marks: [{ type: 'bold' }],
        },
        {
          nodeType: 'text',
          value: ' world!',
          marks: [{ type: 'italic' }],
        },
      ],
    },
  ],
};

const Bold = (props) => <p className="bold">{props.children}</p>;

const Text = (props) => <p className="align-center">{props.children}</p>;

const options = {
  renderMark: {
    [MARKS.BOLD]: props => <Bold>{props.children}</Bold>,
  },
  renderNode: {
    [BLOCKS.PARAGRAPH]: (props) => <Text>{props.children}</Text>,
  },
  renderText: text => text.replace('!', '?'),
};

const Parent: ParentComponent = (props) => {
    return <SolidRichText document={document} option={options}/>
};
// -> 

Hello

world?

Last, but not least, you can pass a custom rendering component for an embedded entry:

import { BLOCKS } from '@contentful/rich-text-types';
import SolidRichText from 'rich-text-solid-renderer';

const document = {
  nodeType: 'document',
  content: [
    {
      nodeType: 'embedded-entry-block',
      data: {
        target: (...)Link<'Entry'>(...);
      },
    },
  ]
};

const CustomComponent = (props) => (
  <div>
    <h2>{props.title}</h2>
    <p>{props.description}</p>
  </div>
);

const options = {
  renderNode: {
    [BLOCKS.EMBEDDED_ENTRY]: (props) => {
      return <CustomComponent title={props.node.data.target.fields.title} description={props.node.data.target.fields.description} />
    }
  }
};

const Parent: ParentComponent = (props) => {
    return <SolidRichText document={document} option={options}/>
};
// -> 

[title]

[description]

The renderNode keys should be one of the following BLOCKS and INLINES properties as defined in @contentful/rich-text-types:

  • BLOCKS

    • DOCUMENT
    • PARAGRAPH
    • HEADING_1
    • HEADING_2
    • HEADING_3
    • HEADING_4
    • HEADING_5
    • HEADING_6
    • UL_LIST
    • OL_LIST
    • LIST_ITEM
    • QUOTE
    • HR
    • EMBEDDED_ENTRY
    • EMBEDDED_ASSET
  • INLINES

    • EMBEDDED_ENTRY (this is different from the BLOCKS.EMBEDDED_ENTRY)
    • HYPERLINK
    • ENTRY_HYPERLINK
    • ASSET_HYPERLINK

The renderMark keys should be one of the following MARKS properties as defined in @contentful/rich-text-types:

  • BOLD
  • ITALIC
  • UNDERLINE
  • CODE

The renderText callback is a function that has a single string argument and returns a React node. Each text node is evaluated individually by this callback. A possible use case for this is to replace instances of \n produced by Shift + Enter with
React elements. This could be accomplished in the following way:

const options = {
  renderText: (props) => {
            return props.split('\n').reduce((children, textSegment, index) => {
              return [...children, index > 0 && <br />, textSegment];
            }, []);
          },
};

GitHub

https://github.com/joeldsouzax/rich-text-solid-renderer
You might also like...

A completely customizable framework for building rich text editors

A completely customizable framework for building rich text editors

A completely customizable framework for building rich text editors

Jun 19, 2022

๐Ÿ“๐Ÿธ A configurable rich text editor built with Draft.js

๐Ÿ“๐Ÿธ A configurable rich text editor built with Draft.js

Draftail ๐Ÿ“ ๐Ÿธ A configurable rich text editor built with Draft.js. Check out our demos! Features Draftail aims for a mouse-free, keyboard-centric exp

Jun 20, 2022

โœ๏ธ A very simple but useful Markdown Previewer and Markdown Editor with CodeMirror, Markedjs, and Create-react-app

Markdown Editor A very simple but useful Markdown Previewer and Markdown Editor with CodeMirror, Markedjs and Create-react-app Preview Markdown Editor

May 26, 2022

Perseus is Khan Academy's new exercise question editor and renderer.

As of January 2018 this repo is no longer under active development. It will, however, remain open source. Perseus Perseus is Khan Academy's new exerci

Jun 16, 2022

Rich content editor for React

React editor ormBuilder Form editor component FormBuilder Props components: custom form editor fields. getComponents: map form editor fields. dat

May 24, 2021

(alpha) Compose a React-based text editor using a suite of standard plugins

React Editor Kit (currently in alpha) A suite of plugins for composing react-based text editors. Editor Kit is built using Slate (v0.50+) - the fantas

Apr 10, 2022

An online collaborative text editor based on event sourcing architecture.

Text sourcing An online collaborative text editor based on event sourcing. Working example can be found here: https://text-sourcing.tomasz-rewak.com/

May 18, 2022

A React framework for building text editors.

A React framework for building text editors.

Draft.js Draft.js is a JavaScript rich text editor framework, built for React and backed by an immutable model. Extensible and Customizable: We provid

Jun 25, 2022

Wysiwyg / Text editor components built using React and Prosemirror

Wysiwyg / Text editor components built using React and Prosemirror

Wysiwyg / Text editor components built using React and Prosemirror

Jun 9, 2022
JS React based rich editors based on Draft.js
JS React based rich editors based on Draft.js

React - Rich editors Synopsis React rich-editors-like components. Based on draft-js. Package provide these public components: RichEditor EmailRichEdit

Jul 8, 2021
React Trix rich text editor is react wrapper built for the Trix editor
React Trix rich text editor is react wrapper built for the Trix editor

React wrapper for Trix rich text editor created by Basecamp

Jun 10, 2022
Pure Rich-text Editor with TS & React-hooks

react-editor is FINALLY RETURNED !! It's been over 4 years... Now react-editor is BACK with fully TS & REACT-HOOKS integrated Rich-text Editor with TS

May 23, 2022
The react-web-editor is a WYSIWYG editor library. you can resize and drag your component. It also has simple rich text editor
The react-web-editor is a WYSIWYG editor library. you can resize and drag your component. It also has simple rich text editor

react-web-editor A Simple WYSIWYG editor for react users You can make your own editor using our library You can explore various features on the websit

Jun 8, 2022
A toolkit to test Slate rich text editors with Jest, React Testing Library, and hyperscript
A toolkit to test Slate rich text editors with Jest, React Testing Library, and hyperscript

Slate Test Utils slate-test-utils-wave.mp4 Created with Wave Snippets A toolkit to test Slate rich text editors with Jest, React Testing Library, and

Jun 14, 2022
Rich Text Editor built with React and ProseMirror

Notice: This project still under active development. API documentations will be available later. CZI-ProseMirror ยท Drop-In WYSIWYG editor based on Pro

Jun 11, 2022
React component for Froala WYSIWYG HTML Rich Text Editor.

React JS Froala WYSIWYG Editor react-froala-wyswiyg provides React bindings to the Froala WYSIWYG editor VERSION 3. Installation npm install react-fro

Jun 21, 2022
A simple Rich Text Editor created using TypeScript and React
A simple Rich Text Editor created using TypeScript and React

TSRTE This is a very simple Rich Text Editor created using TypeScript. Its purpose is nothing more than to help me practice using TypeScript and React

Jun 1, 2022
Megadraft is a Rich Text editor built on top of Facebook's Draft.JS featuring a nice default base of components and extensibility

Megadraft Rich Text editor built on top of Facebook's draft.js Discussion and Support Join the #megadraft channel on the DraftJS Slack team! Live Exam

Jun 20, 2022
Rich text editor with a high degree of customization

Rich text editor with a high degree of customization

Sep 13, 2021