BBob is a tool to parse and transform BBCode written in pure javascript, no dependencies
Packages
Package | Status | Size | Description |
---|---|---|---|
@bbob/core | Core package | ||
@bbob/react | React renderer | ||
@bbob/preset-react | React default tags preset | ||
@bbob/html | HTML renderer | ||
@bbob/preset-html5 | HTML5 default tags preset |
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);
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>
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>