BBob

BBob is a tool to parse and transform BBCode Written in pure javascript, no dependencies

Packages

Package	Status	Size	Description
@bbob/core		1.5K	Core package
@bbob/react		1.0K	React renderer
@bbob/preset-react		1.0K	React default tags preset
@bbob/html		0.7K	Vue.js integration
@bbob/preset-html5	[	1.1K	Preact integration

DEMO Playground

Table of contents

• Basic usage
• Presets
  • Create your own preset
  • HTML Preset
  • React Preset
• React usage
  • Component
  • Render prop
• PostHTML usage
• Create Plugin

Basic usage

import bbob from '@bbob/core'
import { render } from '@bbob/html'
import presetHTML5 from '@bbob/preset-html5'

const processed = bbob(presetHTML5()).process(`[i]Text[/i]`, { render })

console.log(processed.html); // <span style="font-style: italic;">Text</span>

Presets

Its a way to transform parsed BBCode AST tree to another tree by rules in preset

Create your own preset

import { createPreset } from '@bbob/preset'
import { render } from '@bbob/html'
import bbob from '@bbob/core'

const preset = createPreset({
  quote: node => ({
    tag: 'blockquote',
    attrs: {},
    content: [{
      tag: 'p',
      attrs: {},
      content: node.content,
    }],
  }),
})

console.log(bbob(preset()).process(`[quote]Text[/quote]`, { render }).html) // <blockquote><p>Text</p></blockquote>

HTML Preset

Also you can use predefined preset for HTML

React Preset

React usage

Component

Render prop

PostHTML usage

Create Plugin