jimliu / bbcode-to-react Goto Github PK
View Code? Open in Web Editor NEWA utility for turning raw BBCode into React elements.
License: MIT License
A utility for turning raw BBCode into React elements.
License: MIT License
Hi,
Would you please help add a new function to parse the text to HTML and BBCode with the support of Lazy Load Component?
I tried to load PDF BBCode with react-view-pdf but got an issue with the rendering.
Thank you
Hi there!
Is it possible to use the bbcode-to-react library with other tools such as React Redux?
I'd like to be able to create a custom tag and have that tag access the redux store.
Do you know an easy way to do this?
Thanks!
[p][b]111[/b][/p] is decoded as [p]111[/p]
I have been using this with a React 16 project and it seems to work great. Perhaps we can update the peerDependencies to include React 16 as well?
When parsing tags this code entirely relies on a parse result:
let params = this.parseParams(token.slice(1, -1));
let tagName = params[0][0].toLowerCase();
However parseParam will return an empty array for empty tags or tags that start with on, because of this
if (name) {
const n = name.trim();
// ignore on* events attribute
if (n.length && n.toLowerCase().indexOf('on') !== 0) {
params.push([n, value]);
}
}
Now "[ ]" is used for example by github for an empty checkbox, [on...] could be all kind of things, both are valid and shouldn't cause the parser to throw an exception.
Hi, thanks for this great library! We are using it sometimes for mathematical equations, when characters like [ is needed. However the parser then fails, and reports bad results like [b][[/b] becomes bold [[/b] instead of simply bold [.
I tried to figure out how to run your repo, however somehow the readme mentions webpack dev server, but it just builds on npm run. Also no idea how to run tonic-example. Thanks for your help and suggestions!
When upgrading to React 16.4 we noticed some weird behavior. Tags that used to be recognized by the bbcode-to-react
parser were suddenly being displayed as text.
After doing some research, we found out that when registering tags for the parser, the first argument passed needs to be all lowercase. Even if the tag in the content string that is passed is not all lowercase.
So, if you register your tag like this, the tag will be recognized by the parser:
parser.registerTag('centeredimage', ImageCenteredTag)
If you register your tag like this, the tag will not be recognized by the parser:
parser.registerTag('centeredImage', ImageCenteredTag)
Interestingly, it doesn't matter which content string you pass to the parser, both will work. So the content string can be [centeredimage]
or [centeredImage]
.
This is not a huge issue, and everything works as expected, but I just wanted to report these findings so other users can take note.
Hey guys, not sure what I'm doing wrong but the parser doesn't output new lines / line breaks using
toReact method. toHTML method works well but then I have a problem with Quotes :(.
render() { return <div className="html-content"> {parser.toReact(this.props.toParse)} </div> }
I believe that the space / newline exists under this form:
Which is enter/return key symbol.
How do we add this to the module ?
The only way I see to set the allowed/default tags is via Parser's constructor but the parser instance is created as module.exports in index.js leaving no way to change them.
Some way to clear the list of tags so only those we register work would be ideal.
This works only for lowercase tags, like [b]...[/b], etc.
It would be nice, if it also worked with uppercase tags, like [B]...[/B], etc.
Any update for react 18? .w.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.