We The Curious Developers

We The Curious Developers

  • Guidelines
  • CuriOs SDK
  • Software
  • Films
  • Art
  • Audio
  • Photography

›Components

Getting Started

  • Getting Started Overview
  • ClI
  • Working With Us

Technical

  • Hardware

Frames

  • Frames Overview
  • Info Panel
  • Media Browser
  • Touch to Start

Components

  • Components Overview
  • Box
  • Button
  • Card
  • Checkbox
  • Header
  • Heading
  • Hero
  • Icon
  • Text Input
  • Markdown Viewer
  • Modal
  • WTCProvider
  • Table
  • Text
  • Video Player
  • Calendar
  • Dropdown
  • InputAutoComplete
  • Radio
  • Sidebar
  • Slider
  • Notification
  • IconNavButton
  • IconSideBar
  • List
  • Tab
  • Title
  • Toggle
  • Value

Markdown Viewer component

Props

export interface MarkdownViewerProps {
  input: string;
  escapeHtml: boolean;
  disallowedTypes?: string[];
  unwrapDisallowed?: boolean;
}
  • input The Markdown source to parse (required)
  • escapeHtml Setting to false will cause HTML to be rendered. Be aware that setting this to false might cause security issues if the input is user-generated. Use at your own risk. (default: true).
  • disallowedTypes - Defines which types of nodes should be disallowed (not rendered).
  • unwrapDisallowed - boolean Setting to true will try to extract/unwrap the children of disallowed nodes. For instance, if disallowing Strong, the default behaviour is to simply skip the text within the strong altogether, while the behaviour some might want is to simply have the text returned without the strong wrapping it. (default: false)

Node types

The node types available are the following, use these names in disallowedTypes:

  • root - Root container element that contains the rendered markdown
  • text - Text rendered inside of other elements, such as paragraphs
  • break - Hard-break (<br>)
  • paragraph - Paragraph (<p>)
  • emphasis - Emphasis (<em>)
  • strong - Strong/bold (<strong>)
  • thematicBreak - Horizontal rule / thematic break (<hr>)
  • blockquote - Block quote (<blockquote>)
  • delete - Deleted/strike-through (<del>)
  • link - Link (<a>)
  • image - Image (<img>)
  • linkReference - Link (through a reference) (<a>)
  • imageReference - Image (through a reference) (<img>)
  • table - Table (<table>)
  • tableHead - Table head (<thead>)
  • tableBody - Table body (<tbody>)
  • tableRow - Table row (<tr>)
  • tableCell - Table cell (<td>/<th>)
  • list - List (<ul>/<ol>)
  • listItem - List item (<li>)
  • definition - Definition (not rendered by default)
  • heading - Heading (<h1>-<h6>)
  • inlineCode - Inline code (<code>)
  • code - Block of code (<pre><code>)
  • html - HTML node (Best-effort rendering)
  • virtualHtml - When not using the HTML parser plugin, a cheap and dirty approach to supporting simple HTML elements without a complete parser.
  • parsedHtml - When using the HTML parser plugin, HTML parsed to a React element.

Note: Disallowing a node will also prevent the rendering of any children of that node, unless the unwrapDisallowed option is set to true. E.g., disallowing a paragraph will not render its children text nodes.

Last updated on 5/7/2019
← Text InputModal →
  • Props
  • Node types
Docs
Getting Started (or other categories)Guides (or other categories)API Reference (or other categories)
Community
User ShowcaseStack OverflowProject ChatTwitter
More
BlogGitHubStar
Copyright © 2020 We The Curious