mirror of
https://github.com/tenrok/BBob.git
synced 2026-06-20 20:00:33 +03:00
chore(readme): add plugin example
This commit is contained in:
@@ -270,6 +270,51 @@ render(<App />) // <span><span style="font-weight: bold;">Super <span style="fon
|
|||||||
|
|
||||||
### Create Plugin <a name="plugin"></a>
|
### Create Plugin <a name="plugin"></a>
|
||||||
|
|
||||||
|
For example lets parse all strings that similar to links like "https://some-site.com"
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { createRoot } from "react-dom/client";
|
||||||
|
|
||||||
|
import BBCode from "@bbob/react/es/Component";
|
||||||
|
import TagNode from "@bbob/plugin-helper/es/TagNode";
|
||||||
|
import { isStringNode } from "@bbob/plugin-helper/es";
|
||||||
|
|
||||||
|
const URL_RE = new RegExp(
|
||||||
|
`([--:\\w?@%&+~#=]+\\/*\\.[a-z]{2,4}\\/{0,2})((?:[?&](?:\\w+)=(?:\\w+))+|[^^).|,][--:\\w?@%&+~#=()_]+)?`,
|
||||||
|
"g"
|
||||||
|
);
|
||||||
|
|
||||||
|
const isValidUrl = (url) => URL_RE.test(url);
|
||||||
|
|
||||||
|
const linkParsePlugin = (tree) => {
|
||||||
|
return tree.walk((node) => {
|
||||||
|
if (isStringNode(node) && isValidUrl(node)) {
|
||||||
|
return TagNode.create(
|
||||||
|
"a",
|
||||||
|
{
|
||||||
|
href: node
|
||||||
|
},
|
||||||
|
`Url to: ${node}`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return node;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const rootElement = document.getElementById("root");
|
||||||
|
const root = createRoot(rootElement);
|
||||||
|
|
||||||
|
root.render(
|
||||||
|
<BBCode plugins={[linkParsePlugin]}>
|
||||||
|
https://github.com/JiLiZART/BBob Other text without link
|
||||||
|
</BBCode>
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
[](https://codesandbox.io/s/bbob-plugin-example-dmq1bh)
|
||||||
|
|
||||||
|
|
||||||
### Benchmarks <a name="benchmarks"></a>
|
### Benchmarks <a name="benchmarks"></a>
|
||||||
|
|
||||||
To test on your machine run
|
To test on your machine run
|
||||||
|
|||||||
Reference in New Issue
Block a user