/bbob

⚡️Blazing fast BBCode transforming and parsing tool in pure javascript, no dependencies

Primary LanguageHTMLMIT LicenseMIT

BBob a BBCode processor

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

Build Status codecov CodeFactor BCH compliance Known Vulnerabilities

Packages

Package Status Size Description
@bbob/core @bbob/core-status @bbob/core-size Core package
@bbob/react @bbob/react-status @bbob/react-size React renderer
@bbob/preset-react @bbob/preset-react-status @bbob/preset-react-size React default tags preset
@bbob/html @bbob/html-status @bbob/html-size HTML renderer
@bbob/preset-html5 @bbob/preset-html5-status @bbob/preset-html5-size HTML5 default tags preset

DEMO Playground

Table of contents

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>

React usage

npm i @bbob/react @bbob/preset-react
import React from 'react'
import {render} from 'react-dom'
import bbobReactRender from '@bbob/react/es/render'
import presetReact from '@bbob/preset-react'

console.log(render(<span>{bbobReactRender(`[i]Text[/i]`, presetReact(), { onlyAllowTags: ['i'] })}</span>)); // <span><span style="font-style: italic;">Text</span></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'

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

HTML Preset

Also you can use predefined preset for HTML

import html5Preset from '@bbob/preset-html5/es'
import { render } from '@bbob/html/es'
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 reactRender from "@bbob/react/es/render";

const preset = reactPreset.extend((tags, options) => ({
  quote: node => ({
    tag: "blockquote",
    content: node.content
  })
}));

const result = reactRender(`[quote]Text[/quote]`, reactPreset());

/* 
It produces a VDOM Nodes equal to
React.createElement('blockquote', 'Text')
*/
document.getElementById("root").innerHTML = JSON.stringify(result, 4);

Edit lp7q9yj0lq

React usage

Component

Or you can use React Component

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

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

const MyComponent = () => (
  <BBCode plugins={[reactPreset()]} options={{ onlyAllowTags: ['i'] }}>
    [quote]Text[/quote]
  </BBCode>
)

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

Edit 306pzr9k5p

Render prop

Or pass result as render prop

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

import reactRender from '@bbob/react/es/render'
import reactPreset from '@bbob/preset-react/es'

const toReact = input => reactRender(input, reactPreset())

const text = toReact('[b]Super [i]easy[/i][/b] [u]to[/u] render')

const App = ({ renderProp }) => (
  <span>{text}</span>
)

render(<App />) // <span><span style="font-weight: bold;">Super <span style="font-style: italic;">easy</span></span> <span style="text-decoration: underline;">to</span> render</span>

Edit x7w52lqmzz

PostHTML usage

Create Plugin