Render a NAST to JSX.Element
or HTML.
npm i nast-util-to-react
Then,
// CommonJS Module style
const { renderToHTML, renderToJSX } = require('nast-util-to-react');
// or ES Module style
import { renderToHTML, renderToJSX } from 'nast-util-to-react';
Render a tree to HTML. This is just a wrapper that use ReactDOMServer.renderToStaticMarkup()
to generate HTML from the return value of renderToJSX()
.
Type: NAST.Block
Type: string
A HTML string.
Render a tree to JSX.Element
.
Type: NAST.Block
Type: JSX.Element
This can be used as a child in a React component, which means it's easier to apply further processing, also it has a small benefit, which is that no dangerouslySetInnerHTML
is needed.
-
Block can have color or background color.
Status: See commit 0a51743
-
Smart color inference based on the following rules.
Status: See commit 0a51743
(I = Block) If I have a color, I use my color. If I don't have a color, I ask my parent for it. If I don't have a parent, then just pretend I have a color.
-
-
Smart layout (full width, page width, normal) for some media blocks and embed blocks.
Status: Image has best support, others have different partial support.
Note: Images larger than page width but smaller than full width are unsupported and are displayed as page width.
This feature should be moved to a wrapper block where all blocks can use if needed.
-
Caption in media blocks and embed blocks.
Inline (SemanticString)
-
Bold, Italic, Strike, Link, Code, Colored, Commented.
-
Mention an Individual
Shows the individual's name.
-
Mention a Resource
Show the resource's name.
-
Mention a DateTime
Support
start_date
andend_date
.
-
Text
-
Embedded Page / Link To Page
Gotcha 1: Empty pages and filled pages has the same "filled" icon.
Gotcha 2: Embedded Page and Link To Page looks the same.
-
Heading (1, 2, 3)
-
Bulleted List
-
Numbered List
-
Toggle List
-
To-do List
-
Quote
-
Divider
-
Callout
-
Table
Gotcha 1: Only property types "Title", "Text", "URL", "Checkbox", "Select", "Multi-select" are correctly supported, other types are treated as "Text".
Gotcha 2: Always wrap text.
-
Gallery
Gotcha 1: Only property type "Title" is rendered.
Gotcha 2: For "Card Preview" option, only "Page Cover" is supported.
-
List
-
Calendar
-
Board
- Image
- Web Bookmark
- Video
- Audio
- Code
- File
- Embed
-
Table of Contents
-
Math Equation
-
Template Button
Status: The template is directly rendered as children like normal content blocks.
-
Breadcrumb
Status: Unable to implement in current rendering framework because it does not allow traveling to other pages.
Auto-detect changes and rebuild.
npm run dev
Generate data for testing.
npm run update-test-data
Test rendering to HTML.
npm run test