mirrors/bbob
2
0
Fork 0
mirror of https://github.com/tenrok/BBob.git synced 2026-06-14 18:42:24 +03:00
Code Activity

feat: new @bbob/html api (#4)

Browse Source
This commit is contained in:
Nikolay Kostyurin
2018-10-12 00:43:20 +02:00
committed by GitHub
parent bf993813fc
commit 575c1bb932
12 changed files with 66 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+46 -10
View File
@@ -118,8 +118,8 @@ export default createPreset({
Also you can use predefined preset for HTML
```js
import html5Preset from '@bbob/preset-html5'
import { render } from '@bbob/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>
@@ -130,27 +130,39 @@ console.log(bbob(html5Preset()).process(`[quote]Text[/quote]`, { render }).html)
Also you can use predefined preset for React
```js
import reactPreset from '@bbob/preset-react'
import bbobRender from '@bbob/react/es/render'
import reactPreset from "@bbob/preset-react";
import reactRender from "@bbob/react/es/render";
console.log(bbob(reactPreset()).process(`[quote]Text[/quote]`, { render }).html)
/* It produces a VDOM Nodes equal to
React.createElement('blockquote', React.createElement('p', 'Text'))
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](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/lp7q9yj0lq)
### React usage <a name="react"></a>
#### Component <a name="react-component"></a>
Or you can use React Component
```jsx
```js
import React from 'react'
import { render } from 'react-dom'
import BBCode from '@bbob/react'
import reactPreset from '@bbob/preset-react'
import BBCode from '@bbob/react/es/Component'
import reactPreset from '@bbob/preset-react/es'
const MyComponent = () => (
<BBCode plugins={[reactPreset()]}>
@@ -160,9 +172,33 @@ const MyComponent = () => (
render(<MyComponent />) // <div><blockquote><p>Text</p></blockquote></div>
```
[![Edit 306pzr9k5p](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/306pzr9k5p)
#### Render prop <a name="react-render"></a>
Or pass result as render prop
```js
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](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/x7w52lqmzz)
### PostHTML usage <a name="posthtml"></a>
### Create Plugin <a name="plugin"></a>