<p align="center"> <img alt="BBob a BBCode processor" src="https://github.com/JiLiZART/bbob/blob/master/.github/card.png?raw=true" /> </p> <p align="center"> BBob is a tool to parse and transform (BBCode)[https://en.wikipedia.org/wiki/BBCode] written in pure javascript, no dependencies </p>

Packages

| Package | Status | Size | Description | |----------------------|------------------------------------------------------------|-----------------------------|---------------------------| | @bbob/react | | @bbob/react-size | React renderer | | @bbob/preset-react | | @bbob/preset-react-size | React default tags preset | | @bbob/vue3 | | @bbob/vue3-size | Vue 3 renderer | | @bbob/vue2 | | @bbob/vue2-size | Vue 2 renderer | | @bbob/preset-vue | | @bbob/preset-vue-size | Vue default tags preset | | @bbob/html | | @bbob/html-size | HTML renderer | | @bbob/preset-html5 | | @bbob/preset-html5-size | HTML5 default tags preset | | @bbob/core | | @bbob/core-size | Core package |

DEMO Playground

Usage
Parse Options
Presets
React usage
- Component
- Render prop
PostHTML usage
Create Plugin
Benchmarks
Donate

Basic usage <a name="basic-usage"></a>

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

import bbobHTML from '@bbob/html'
import presetHTML5 from '@bbob/preset-html5'

const processed = bbobHTML(`[i]Text[/i]`, presetHTML5())

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

React usage <a name="react-usage"></a>

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

import React from 'react'
import BBCode from '@bbob/react';
import presetReact from '@bbob/preset-react';

const plugins = [presetReact()];

export default () => (
    <BBCode plugins={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'

export default () => 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 <a name="vue2-usage"></a>

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

import Vue from 'vue'
import VueBbob from '@bbob/vue2';

Vue.use(VueBbob);

<template>
  <div class="html">
    <h2>Generated HTML here</h2>
    <bbob-bbcode container="div" :plugins="plugins">{{ bbcode }}</bbob-bbcode>
  </div>
</template>
<script>
  import Vue from 'vue'
  import preset from '@bbob/preset-vue'
  
  export default Vue.extend({
    name: 'App',
    data() {
      return {
        bbcode: 'Text [b]bolded[/b] and [i]Some Name[/i]',
        plugins: [
          preset()
        ],
      }
    }
  })
</script>

More examples available in <a href="https://github.com/JiLiZART/BBob/tree/master/examples">examples folder</a>

Parse options <a name="parse-options"></a>

onlyAllowTags

Parse only allowed tags

import bbobHTML from '@bbob/html'
import presetHTML5 from '@bbob/preset-html5'

const processed = bbobHTML(`[i][b]Text[/b][/i]`, presetHTML5(), { onlyAllowTags: ['i'] })

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

contextFreeTags

Enable context free mode that ignores parsing all tags inside given tags

import bbobHTML from '@bbob/html'
import presetHTML5 from '@bbob/preset-html5'

const processed = bbobHTML(`[b]Text[/b][code][b]Text[/b][/code]`, presetHTML5(), { contextFreeTags: ['code'] })

console.log(processed); // <span style="font-weight: bold;">Text</span><pre>[b]Text[/b]</pre>

enableEscapeTags

Enable escape support for tags

import bbobHTML from '@bbob/html'
import presetHTML5 from '@bbob/preset-html5'

const processed = bbobHTML(`[b]Text[/b]'\\[b\\]Text\\[/b\\]'`, presetHTML5(), { enableEscapeTags: true })

console.log(processed); // <span style="font-weight: bold;">Text</span>[b]Text[/b]

caseFreeTags

Allows to parse case insensitive tags like [h1]some[/H1] -> <h1>some</h1>

import bbobHTML from '@bbob/html'
import presetHTML5 from '@bbob/preset-html5'

const processed = bbobHTML(`[h1]some[/H1]`, presetHTML5(), { caseFreeTags: true })

console.log(processed); // <h1>some</h1>

import bbobHTML from '@bbob/html'
import presetHTML5 from '@bbob/preset-html5'

const processed = bbobHTML(`[b]Text[/b]'\\[b\\]Text\\[/b\\]'`, presetHTML5(), { enableEscapeTags: true })

console.log(processed); // <span style="font-weight: bold;">Text</span>[b]Text[/b]

Presets <a name="basic"></a>

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

Create your own preset <a name="create-preset"></a>

import { createPreset } from '@bbob/preset'

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

HTML Preset <a name="html-preset"></a>

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 <a name="react-preset"></a>

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) => ({
  ...tags,
  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 <a name="react"></a>

Component <a name="react-component"></a>

Or you can use React Component

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

import BBCode from '@bbob/react/

BBob

Install / Use

README