json-rt v1.2.1

JSON Rich text

Simple json format to represent and serialize your rich text.

🚀 How to use

Just write a simple json like structure, that is readable:

import { RichTextJson } from 'json-rt'

const myText: RichTextJson = [
  'This is my first', { text: 'beautiful', bold: true}, 'rich text!'
]

For string parsing use simply JSON.parse or jsonSerializer.parse:

import { jsonSerializer } from 'json-rt'

const serializer = jsonSerializer()
const jsonRichText = serializer.parse("[\"hello\", {\"text\": \"world\", \"bold\":true}]")

📃 Html serializer

Serialize json object into html using htmlParser

import { htmlSerializer } from 'json-rt'

const serializer = htmlSerializer()
const myText = [
  {text: 'JSON Rich text', line: true, header: 1},
  {text: 'Simple json format to represent and serialize your rich text.', line: true},
]
const html = serializer.convert(myText)
// <div><h1>JSON Rich text</h1></div>
// <div>Simple json format to represent and serialize your rich text.</div>

Use config to define your own serializers or to redefine default serializers.

const serializer = htmlSerializer({
  serializers: {
    // Icon serializer - all content with 'icon' key will be serialized by this.
    // Receives inner content and value from format.
    icon: (content: HtmlContent, iconClass: string): HtmlContent => ({
        el: 'i',
        classes: new Map([[`fas fa-${iconClass}`, true]]),
        content
      })
  }
})
const myText = [
  'Rich text! ', { text: '', icon: 'pencil'}
]
const html = serializer.convert(myText)
// Rich text! <i class="fas fa-pencil"></i>

🎨 Predefined serializers

✅ TODO

• Do right json parsing with type checks
• htmlSerializer parse function

🔮 Planned features

• More supported markup by default: color, class...
• More serializers: Markdown, Phaser (game engine)
• Parsers from documents

⚖️ Licence

This project is under MIT licence.