DeltaHtml (DeltaHtml v0.4.0)

View Source

Convert Quill (Slab) Delta document format to HTML.

This is useful to display rich text entered by users in your web UI or emails. It sanitizes input (prevents malicious HTML) and allows you to store only the document model (delta) and not also the HTML.

Usage 

iex> DeltaHtml.to_html([%{"insert" => "word\n"}])
"<p>word</p>"

# With whitespace preservation
iex> DeltaHtml.to_html([%{"insert" => "word\n"}], preserve_whitespace: true)
"<div style=\"white-space: pre-wrap;\"><p>word</p></div>"

Supported features

Inline

  • ✅ Background Color - background
  • ✅ Bold - bold
  • ✅ Color - color
  • ✅ Font - font (only 'serif' and 'monospace')
  • ✅ Inline Code - code
  • ✅ Italic - italic
  • ✅ Link - link
  • ✅ Size - size (only 'small', 'large', and 'huge')
  • ✅ Strikethrough - strike
  • ✅ Superscript/Subscript - script
  • ✅ Underline - underline

Block

  • ✅ Blockquote - blockquote
  • ✅ Header - header
  • ✅ Indent - indent
  • ✅ List - list
  • ✅ Text Alignment - align
  • ✅ Text Direction - direction
  • ❌ Code Block - code-block
  • ❌ Formula - formula (requires KaTeX)
  • ❌ Image - image
  • ❌ Video - video

Plugins

  • ✅ quill-mention - output as #{denotation_char}#{id}, e.g. +name

Extensibility

Currently there are no extensions points e.g. to support further formats or plugins. It's a fairly short single file, so just copy and paste.

Alternatives

  • Convert in browser
    • quill.getSemanticHTML(0)
    • Con: Need to store Delta and HTML.
    • Con: Need to sanitize HTML on server.
    • Con: Less control over output (separate transform pass on server?), especially for plugins like quill-mention.
  • NIF
  • Markdown instead of Delta/Quill

Summary

Functions

to_html(delta, opts \\ [])

Convert Quill Delta to HTML.

Functions

to_html(delta, opts \\ [])

Convert Quill Delta to HTML.

Options

  • :preserve_whitespace - When true, wraps the output in a div with white-space: pre-wrap to preserve whitespace. Defaults to false.

Examples 

iex> to_html([%{"insert" => "word\n"}])
"<p>word</p>"

iex> to_html([%{"insert" => "word\n"}], preserve_whitespace: true)
"<div style=\"white-space: pre-wrap;\"><p>word</p></div>"