BBob

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

Packages

Package	Status	Size	Description
@bbob/core		3.2K	Core package
@bbob/react		1.0K	React renderer
@bbob/preset-react		1.8K	React default tags preset
@bbob/html		689B	HTML renderer
@bbob/preset-html5		1.6K	HTML5 default tags preset

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

npm i @bbob/core @bbob/html @bbob/preset-html5

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

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

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

React Preset

Also you can use predefined preset for React

import reactPreset from '@bbob/preset-react'
import { render } from '@bbob/react'
import bbob from '@bbob/core'

console.log(bbob(reactPreset()).process(`[quote]Text[/quote]`, { render }).html) 
/* It produces a VDOM Nodes equal to
  React.createElement('blockquote', React.createElement('p', 'Text'))
*/

React usage

Component

Or you can use React Component

import React from 'react'
import { render } from 'react-dom'

import BBCode from '@bbob/react'
import reactPreset from '@bbob/preset-react'

const MyComponent = () => (
  <BBCode plugins={[reactPreset()]}>
    [quote]Text[/quote]
  </BBCode>
)

render(<MyComponent />) // <div><blockquote><p>Text</p></blockquote></div>

Render prop

PostHTML usage

Create Plugin