jimliu / bbcode-to-react Goto Github PK

View Code? Open in Web Editor NEW

24.0 3.0 21.0 248 KB

A utility for turning raw BBCode into React elements.

License: MIT License

JavaScript 96.25% Shell 3.75%

bbcode react react-component react-components

bbcode-to-react's Introduction

bbcode-to-react

A utility for turning raw BBCode into React elements.

Installation

Install bbcode-to-react and peer dependencies via NPM

npm install --save bbcode-to-react react

Import bbcode-to-react, example:

import React from 'react';
import parser from 'bbcode-to-react';
import { renderToString } from 'react-dom/server';

const Example = (props) => {
  return (
    <p>{parser.toReact('[b]strong[/b]')}</p>
  );
}

// render: <p><strong>strong</strong></p>
console.log(renderToString(<Example />));

Add new tag example

import React from 'react';
import parser, { Tag } from 'bbcode-to-react';

class YoutubeTag extends Tag {
  toReact() {
    // using this.getContent(true) to get it's inner raw text.
    const attributes = {
      src: this.getContent(true),
      width: this.params.width || 420,
      height: this.params.height || 315,
    };
    return (
      <iframe
        {...attributes}
        frameBorder="0"
        allowFullScreen
      />
    );
  }
}

class BoldTag extends Tag {
  toReact() {
    // using this.getComponents() to get children components.
    return (
      <b>{this.getComponents()}</b>
    );
  }
}

parser.registerTag('youtube', YoutubeTag); // add new tag
parser.registerTag('b', BoldTag); // replace exists tag

const Example = (props) => {
  return (
    <p>{parser.toReact('[youtube width="400"]https://www.youtube.com/embed/AB6RjNeDII0[/youtube]')}</p>
  );
}

Development

Install dependencies:

npm install

Run examples at http://localhost:8080/ with webpack dev server:

npm start

Run tests & coverage report:

npm test

Watch tests:

npm run test-watch

Credits

bbcodejs: bbcode-to-react uses the parser from bbcodejs, so much of the credit is due there.
reactstrap: bbcode-to-react uses the webpack config and publish scripts from reactstrap.

bbcode-to-react's People

Contributors

Stargazers

Watchers

Forkers

peet86 alyons tanninone lahzenegar oscarhermawan arnaudfl-forks starfahx xeroe casieber tominou warioz geraldcloudnine real1p3a sfanetti ostrichegret pb600 mikepotato shalomoveugene cedricverlinden

bbcode-to-react's Issues

No way to set the allowed/default tags.

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.

Only lowercase tags are allowed to register

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.

Doesn't decode nested tags

[p][b]111[/b][/p] is decoded as [p]111[/p]

Parse HTML and BBcode with LazyLoad Component

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

Use with react-redux

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!

Allow uppercase tags

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.

Some update available?

Any update for react 18? .w.

New Lines / Line Breaks are not correctly rendered

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 ?

Upgrade peer dependency to React 16

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?

Problems with [

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!

Uncaught TypeError: Cannot read property '0' of undefined

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.