Packages

Table of contents

Basic usage

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

importbbobHTMLfrom'@bbob/html'importpresetHTML5from'@bbob/preset-html5'constprocessed=bbobHTML(`[i]Text[/i]`,presetHTML5())console.log(processed);// <span>Text</span>

React usage

npm i @bbob/react @bbob/preset-react

importReactfrom'react'importBBCodefrom'@bbob/react';importpresetReactfrom'@bbob/preset-react';constplugins=[presetReact()];exportdefault()=>(<BBCodeplugins={plugins}>    [table]      [tr]          [td]table 1[/td]          [td]table 2[/td]      [/tr]      [tr]          [td]table 3[/td]          [td]table 4[/td]      [/tr]    [/table]</BBCode>)

import{render}from'@bbob/react'exportdefault()=>render(`[table]  [tr]      [td]table 1[/td]      [td]table 2[/td]  [/tr]  [tr]      [td]table 3[/td]      [td]table 4[/td]  [/tr][/table]`)

Vue 2 usage

npm i @bbob/vue2 @bbob/preset-vue

importVuefrom'vue'importVueBbobfrom'@bbob/vue2';Vue.use(VueBbob);

<template><divclass="html"><h2>Generated HTML here</h2><bbob-bbcodecontainer="div":plugins="plugins">{{ bbcode }}</bbob-bbcode></div></template><script>importVuefrom'vue'importpresetfrom'@bbob/preset-vue'exportdefaultVue.extend({name:'App',data(){return{bbcode:'Text [b]bolded[/b] and [i]Some Name[/i]',plugins:[preset()],}}})</script>

Parse options

onlyAllowTags

importbbobHTMLfrom'@bbob/html'importpresetHTML5from'@bbob/preset-html5'constprocessed=bbobHTML(`[i][b]Text[/b][/i]`,presetHTML5(),{onlyAllowTags:['i']})console.log(processed);// <span>[b]Text[/b]</span>

contextFreeTags

importbbobHTMLfrom'@bbob/html'importpresetHTML5from'@bbob/preset-html5'constprocessed=bbobHTML(`[b]Text[/b][code][b]Text[/b][/code]`,presetHTML5(),{contextFreeTags:['code']})console.log(processed);// <span>Text</span><pre>[b]Text[/b]</pre>

enableEscapeTags

importbbobHTMLfrom'@bbob/html'importpresetHTML5from'@bbob/preset-html5'constprocessed=bbobHTML(`[b]Text[/b]'\\[b\\]Text\\[/b\\]'`,presetHTML5(),{enableEscapeTags:true})console.log(processed);// <span>Text</span>[b]Text[/b]

caseFreeTags

importbbobHTMLfrom'@bbob/html'importpresetHTML5from'@bbob/preset-html5'constprocessed=bbobHTML(`[h1]some[/H1]`,presetHTML5(),{caseFreeTags:true})console.log(processed);// <h1>some</h1>

importbbobHTMLfrom'@bbob/html'importpresetHTML5from'@bbob/preset-html5'constprocessed=bbobHTML(`[b]Text[/b]'\\[b\\]Text\\[/b\\]'`,presetHTML5(),{enableEscapeTags:true})console.log(processed);// <span>Text</span>[b]Text[/b]

Presets

Create your own preset

import{createPreset}from'@bbob/preset'exportdefaultcreatePreset({quote:(node)=>({tag:'blockquote',attrs:node.attrs,content:[{tag:'p',attrs:{},content:node.content,}],}),})

HTML Preset

importhtml5Presetfrom'@bbob/preset-html5/es'import{render}from'@bbob/html/es'importbbobfrom'@bbob/core'console.log(bbob(html5Preset()).process(`[quote]Text[/quote]`,{ render}).html)// <blockquote><p>Text</p></blockquote>

React Preset

importreactPresetfrom"@bbob/preset-react";importreactRenderfrom"@bbob/react/es/render";constpreset=reactPreset.extend((tags,options)=>({  ...tags,quote:node=>({tag:"blockquote",content:node.content})}));constresult=reactRender(`[quote]Text[/quote]`,reactPreset());/*It produces a VDOM Nodes equal toReact.createElement('blockquote', 'Text')*/document.getElementById("root").innerHTML=JSON.stringify(result,4);

React usage

Component

importReactfrom'react'import{render}from'react-dom'importBBCodefrom'@bbob/react/es/Component'importreactPresetfrom'@bbob/preset-react/es'constMyComponent=()=>(<BBCodeplugins={[reactPreset()]}options={{onlyAllowTags:['i']}}>    [quote]Text[/quote]</BBCode>)render(<MyComponent/>)// <div><blockquote><p>Text</p></blockquote></div>

Render prop

importReactfrom"react";import{render}from'react-dom'importreactRenderfrom'@bbob/react/es/render'importreactPresetfrom'@bbob/preset-react/es'consttoReact=input=>reactRender(input,reactPreset())consttext=toReact('[b]Super [i]easy[/i][/b] [u]to[/u] render')constApp=({ renderProp})=>(<span>{text}</span>)render(<App/>)// <span><span>Super <span>easy</span></span> <span>to</span> render</span>

PostHTML usage

Create Plugin

import{createRoot}from"react-dom/client";importBBCodefrom"@bbob/react/es/Component";importTagNodefrom"@bbob/plugin-helper/es/TagNode";import{isStringNode}from"@bbob/plugin-helper/es";constURL_RE=newRegExp(`([--:\\w?@%&+~#=]+\\/*\\.[a-z]{2,4}\\/{0,2})((?:[?&](?:\\w+)=(?:\\w+))+|[^^).|,][--:\\w?@%&+~#=()_]+)?`,"g");constisValidUrl=(url)=>URL_RE.test(url);constlinkParsePlugin=(tree)=>{returntree.walk((node)=>{if(isStringNode(node)&&isValidUrl(node)){returnTagNode.create("a",{href:node},`Url to:${node}`);}returnnode;});};constrootElement=document.getElementById("root");constroot=createRoot(rootElement);root.render(<BBCodeplugins={[linkParsePlugin]}>    https://github.com/JiLiZART/BBob Other text without link</BBCode>);

Benchmarks

npm run buildnode benchmark

Donations