mirror of
https://github.com/tenrok/BBob.git
synced 2026-06-20 20:00:33 +03:00
chore: readme
This commit is contained in:
committed by
GitHub
parent
880aa558b1
commit
bf993813fc
@@ -47,7 +47,9 @@ written in pure javascript, no dependencies
|
|||||||
[DEMO Playground](https://codepen.io/JiLiZART/full/vzMvpd)
|
[DEMO Playground](https://codepen.io/JiLiZART/full/vzMvpd)
|
||||||
|
|
||||||
## Table of contents
|
## Table of contents
|
||||||
* [Basic usage](#basic)
|
* [Usage](#usage)
|
||||||
|
* [Basic usage](#basic-usage)
|
||||||
|
* [React usage](#react-usage)
|
||||||
* [Presets](#presets)
|
* [Presets](#presets)
|
||||||
* [Create your own preset](#create-preset)
|
* [Create your own preset](#create-preset)
|
||||||
* [HTML Preset](#html-preset)
|
* [HTML Preset](#html-preset)
|
||||||
@@ -58,7 +60,7 @@ written in pure javascript, no dependencies
|
|||||||
* [PostHTML usage](#posthtml)
|
* [PostHTML usage](#posthtml)
|
||||||
* [Create Plugin](#plugin)
|
* [Create Plugin](#plugin)
|
||||||
|
|
||||||
### Basic usage <a name="basic"></a>
|
### Basic usage <a name="basic-usage"></a>
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
npm i @bbob/core @bbob/html @bbob/preset-html5
|
npm i @bbob/core @bbob/html @bbob/preset-html5
|
||||||
@@ -74,6 +76,21 @@ const processed = bbob(presetHTML5()).process(`[i]Text[/i]`, { render })
|
|||||||
console.log(processed.html); // <span style="font-style: italic;">Text</span>
|
console.log(processed.html); // <span style="font-style: italic;">Text</span>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### React usage <a name="react-usage"></a>
|
||||||
|
|
||||||
|
```shell
|
||||||
|
npm i @bbob/react @bbob/preset-react
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
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())}</span>)); // <span><span style="font-style: italic;">Text</span></span>
|
||||||
|
```
|
||||||
|
|
||||||
### Presets <a name="basic"></a>
|
### Presets <a name="basic"></a>
|
||||||
|
|
||||||
Its a way to transform parsed BBCode AST tree to another tree by rules in preset
|
Its a way to transform parsed BBCode AST tree to another tree by rules in preset
|
||||||
@@ -82,10 +99,8 @@ Its a way to transform parsed BBCode AST tree to another tree by rules in preset
|
|||||||
|
|
||||||
```js
|
```js
|
||||||
import { createPreset } from '@bbob/preset'
|
import { createPreset } from '@bbob/preset'
|
||||||
import { render } from '@bbob/html'
|
|
||||||
import bbob from '@bbob/core'
|
|
||||||
|
|
||||||
const preset = createPreset({
|
export default createPreset({
|
||||||
quote: node => ({
|
quote: node => ({
|
||||||
tag: 'blockquote',
|
tag: 'blockquote',
|
||||||
attrs: {},
|
attrs: {},
|
||||||
@@ -96,8 +111,6 @@ const preset = createPreset({
|
|||||||
}],
|
}],
|
||||||
}),
|
}),
|
||||||
})
|
})
|
||||||
|
|
||||||
console.log(bbob(preset()).process(`[quote]Text[/quote]`, { render }).html) // <blockquote><p>Text</p></blockquote>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
#### HTML Preset <a name="html-preset"></a>
|
#### HTML Preset <a name="html-preset"></a>
|
||||||
@@ -118,8 +131,7 @@ Also you can use predefined preset for React
|
|||||||
|
|
||||||
```js
|
```js
|
||||||
import reactPreset from '@bbob/preset-react'
|
import reactPreset from '@bbob/preset-react'
|
||||||
import { render } from '@bbob/react'
|
import bbobRender from '@bbob/react/es/render'
|
||||||
import bbob from '@bbob/core'
|
|
||||||
|
|
||||||
console.log(bbob(reactPreset()).process(`[quote]Text[/quote]`, { render }).html)
|
console.log(bbob(reactPreset()).process(`[quote]Text[/quote]`, { render }).html)
|
||||||
/* It produces a VDOM Nodes equal to
|
/* It produces a VDOM Nodes equal to
|
||||||
|
|||||||
Reference in New Issue
Block a user