writers-mark-dom

Dom Renderer for Writer's Mark

Usage no npm install needed!

<script type="module">
  import writersMarkDom from 'https://cdn.skypack.dev/writers-mark-dom';
</script>

README

Writer's Mark Dom Renderer

npm install size github actions Known Vulnerabilities codecov.io

A safe standalone DOM renderer for writers-mark.

Installation

npm install writers-mark writers-mark-dom

Usage

This library is meant to consume the output of the core writers-mark-ts library. It consists of a single render() function that accepts Writer's Mark IR and a target HTMLElement as parameters.

import {Context} from 'writers-mark'
import {render} from 'writers-mark-dom'

const ctx = new Context();

const style = ctx.compileStyle(styleString);
const text = ctx.compileText(contextString, [style]);

render(text, document.getElementById('root'));

N.B. Due to the way IFrame sandboxes work, the target HTML element must be in the dom already.

Rendering pre-compiled content:

It is possible to substantially speed up rendering by caching the results of ctx.compileText(). However, there is one important consideration:

render() expects the Writer's Mark IR to be valid. Unless you have full trust in the entire chain of custody between the call call to Context.compileText() and the call to render(), you should always check the validity of the IR before rendering it.

import {Context} from 'writers-mark'
import {render} from 'writers-mark-dom'

const ctx = new Context();

const style = ctx.compileStyle(styleString);
fetch("http://example.com/path_to_resource.json")
  .then(response => response.json())
  .then(text => {
    if(ctx.isTextValid(text)) {
      render(text, document.getElementById('root');
    }
  }));

Safety

Here are the measures the library takes to ensure rendered User-Generated Content is safe:

  • Writer's Mark is rendered in a sandboxed iframe.
    • The only policy enabled is allow-same-origin, which is currently required for the rendering to work.
  • All rendering is performed through the DOM api. No text-based rendering whatsoever is used, including when rendering style rules.
  • The list of tags used, and the attributes that are set is:
    • <p> : class
    • <span> : class
    • <a> : href
    • <style>
      • The only selectors used are classes.
      • The allowed attributes are determined by the Context .