writers-mark

Easy, safe and flexible markup for user-generated content.

Usage no npm install needed!

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

README

Writer's Mark

npm install size github actions Known Vulnerabilities codecov.io

Core functionalities for Writer's Mark.

Getting started

Installation

npm install writers-mark

Usage

import {Context} from 'writers-mark';

const ctx = new Context();

// Compile a style.
const style = ctx.compileStyle(styleString);

// Compile a text.
const text = ctx.compileText(contextString, [style]);

// Style and texts are dumb data objects, so they can be serialized.
const styleStr = JSON.stringify(style);
const textStr = JSON.stringify(text);

// ... and deserialized

const recoveredStyle = JSON.parse(styleStr);
const recoveredText = JSON.parse(textStr);

// Deserialized content can be validated.
if(context.isStyleValid(recoveredStyle) && context.isTextValid(recoveredText)) {
  // Do something with it
}

Rendering the text as HTML/CSS is not within the scope of this module, please see writers-mark-dom or writers-mark-react for that.

CSS Whitelist

While the library has sane defaults for allowed CSS properties, you are free to override the whitelist. Stars denote postfix wildcards.

const ctx = new Context({
  para: ['text-align', 'margin', 'margin-left'],
  span: ['font-weight'],
  cont: [],
});

Safety

The library's default CSS properties preclude anything that could lead to javascript and/or downloading resources. On top of that, values or keys including semicolons, the sequence url(, or any escape sequence are ignored.

However, This specific library does NOT perform any html escaping by itself. This is delegated to the rendering process.