https://github.com/JiLiZART/bbob/blob/8cb1d495ddb14546d242de56cc56cd2b284e8af0/packages/bbob-parser/src/utils.js#L39-L45

после аглификации мы получаем: for(;i()&&e(a());)o();return t.substr(start,r-start)

var start = idx - теряется

[url]javascript:alert("hello")[/url]
Need to filter out javascript: links

[color=red]test[/color]
[quote]xxxsdfasdf
sdfasdfasdf

[url=xxx]xxx[/url]

url will lost

Warning: Component: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
at Component (webpack-internal:///(app-client)/./node_modules/@bbob/react/dist/index.js:1076:26)
at Parser (webpack-internal:///(app-client)/./src/components/forms/TextEditor/editor/Parser.js:17:11)

After install your library, i get this error.

I am using NextJS.

`import React from "react";
import BBCode from "@bbob/react";
import presetReact from "@bbob/preset-react";

const plugins = [presetReact()];

function Parser({ text }) {
return {text};
}

export default Parser;
`

Thanks for this! It's really useful.

I'm fairly new to JavaScript/React and was wondering if this was expected behaviour when formatting BBcode. The styling looks perfect but when inspecting I see that a DOM node is created for each word, including whitespace characters. Is this normal or anything to worry about?

produces

Cheers!

First of all, thanks for this parser 😃
I still encounter the same problem with version 3.0.0.
Am I doing something wrong, or did you never find the time to add it to the preset?

Anyway I will add color tag to HTML5 preset. This is a temporary fix :)

Originally posted by @JiLiZART in #71 (comment)

Thanks for this library, it works well and I didn't found any issue 🚀

It could be nice to add information about each node like the position in the original string and the length of start/end tag (including the separator character, arguments and spaces).

It could be also nice to have the raw inner content of the current tag (if I want to make a [code][/code] tag that don't render anything in it).

For the following string: "example [b=value] my text [/b ] end", we could imagine to add a startTag and endTag with the following informations:

[
  "example",
  " ",
  {
    "tag": "b",
    "attrs": {
      "value": "value"
    },
    startTag: {
      "index": 8,
      "length: 9
    },
    endTag: {
      "index": 26,
      "length: 7
    },
    "content": [
      " ",
      "my",
      " ",
      "text",
      " "
    ]
  },
  " ",
  "end"
]

What do you think?

If I construct bbcode like this [url=http://example.com/post?view=19]Some[/url].
Parser just drops view=19 part. And generates html <a href="http://example.com/post?">Some</a>

If analyzed correctly, there is a subtle difference between TagNode.content = null and TagNode.content = [], that causes these code snippets to generate different representations of TagNode:

The following produce different results when rendered as HTML:

const img1 = TagNode.create("img", { src: "..." }, null);
// As used in HTML5 Preset
const img2 = toNode("img", { src: "..." }, null);

The first one will create:

<img src="..."></img>

and the latter one:

<img src="..."/>

Found this, when I preferred TagNode.create over the toNode way as done in HTML5 Preset in my own preset.

I assume, such topics will also pop up when migrating to TypeScript. At least I found it hard to follow the track if and if, how null contents are/have to be handled.

When somehow plugin may return null instead of TagNode.create, so we need to handle this situation.
Now parser stuck in infinity loop when null is present.

Any newline character seems to be ignored, leaving my content rendered all on a single line. The conversion to react / html components is working but due to the ignoring of new lines it doesn't display correctly.

Is there a setting for this?

Hi,
can you help me how to create own BBCode and pass unique attributes on vue component.
Example BBCode:
[QUOTE=Narendra;25/06/2021;id001]Quote Content[/QUOTE]
to this template component:

<div class="q-wrap">
    <div class="q-chat">
        <p class="q-header">25/06/2021, Narendra said:</p>
        <hr>
        <slot></slot>
    </div>
</div>

Thank you.

I noticed the issue #89, and I found myself dealing with some typescript errors.

Could not find a declaration file for module '@bbob/react/es/render'. 'd:/WindowsDesktopDocsEtc/Documents/MxRepos/pz-description-editor/node_modules/@bbob/react/es/render.js' implicitly has an 'any' type.

and the error

Could not find a declaration file for module '@bbob/preset-react'. 'd:/WindowsDesktopDocsEtc/Documents/MxRepos/pz-description-editor/node_modules/@bbob/preset-react/lib/index.js' implicitly has an 'any' type.

I would like to share my simple solution for this issue for the next person that tries to google it, replace the import from.
with the following

const presetReact = require('@bbob/preset-react').default
const bbobReactRender = require('@bbob/react/es/render').default;

Let me know if there is a better solution to this error.

My dependencies:

"dependencies": {
   "@bbob/preset-react": "^2.8.1",
   "@bbob/react": "^2.8.1",
   "@testing-library/jest-dom": "^5.16.5",
   "@testing-library/react": "^13.4.0",
   "@testing-library/user-event": "^13.5.0",
   "@types/jest": "^27.5.2",
   "@types/node": "^16.18.3",
   "@types/react": "^18.0.24",
   "@types/react-dom": "^18.0.8",
   "react": "^18.2.0",
   "react-dom": "^18.2.0",
   "react-scripts": "5.0.1",
   "react-textarea-autosize": "^8.3.4",
   "typescript": "^4.8.4",
   "web-vitals": "^2.1.4"
 },
 "devDependencies": {
   "autoprefixer": "^10.4.13",
   "postcss": "^8.4.18",
   "tailwindcss": "^3.2.1"
 }

Project made using version 5.0.1 of create-react-app

First off; thank you for the great library! It's been a pleasure to work with so far.

This issue pertains to the React component using the React presets. I am experiencing a runtime error when specific (not all) improper BBCode is passed to the parser, and am unable to gracefully handle the error using onError or try-catch block. I've created a sandbox to illustrate the issue.

Sandbox: https://codesandbox.io/s/purple-cloud-k8fjl?file=/src/index.js
In this sandbox, I'm using BBCode component in React to render the BBCode [b]Testing[/b][hr].

Expected behavior: It should process the [b]Testing[/b] and leave the problematic [hr] unprocessed. So I expect it to render the following: Testing[hr]

It should also either trigger an onError() call, or the code in the catch block of the try-catch. Ideally we want it handled in onError(), but I included the try-catch in this sandbox because it's weird that the try-catch does not catch it. Maybe that can indicate something about the cause of the problem.

Actual behavior: Neither the onError() function nor the catch block are called. The application crashes with a runtime error. The specific error depends on what specifically broke the parser. In my example I use "[hr]" and it throws:

Invariant Violation
hr is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.
    in hr (created by Component)
    in span (created by Component)
    in Component (at src/index.js:10)
    in App (at src/index.js:25)

[hr] is not the only tag that causes this; it also breaks on [br] and [col], so it seems to be a special case and there may be other cases. It does not break on all improper BBCode but I am not sure what the conditions are that trigger this.

It is possible this is not an issue with bbob but an error in my own code; if so I would be grateful for any help with what I did wrong, and how to properly handle it to get the behavior I want :)

Thank you again!

If "naively" creating custom tag mappings, you may run into this exception:

Uncaught RangeError: Maximum call stack size exceeded
    at Object.code (myHtml5Preset.ts:160:12)
    at myHtml5Preset.ts:72:72
    at k8 (utils.js:7:33)

To reproduce, create a tag-rule that generates "itself as child". For example, for parsing within CKEditor 5, we need to represent [code] as <pre><code>. If we naively adapt the code from HTML5 Preset for Blockquote:

We end up with a rule like this:

  code: (node) => toNode('pre', {}, [toNode('code', {}, node.content)]),

The problem: As parents are processed first, the newly created code will be processed afterward, so that we end up in an endless loop resulting in the RangeError given above.

Workaround:

As the above "naive mapping" may be a result of not fully understanding the internal processing in BBob, the suggestion is to actually "fix" this issue by documenting this possible workaround as "best-practice":

  code: (node) => toNode('pre', {}, [toNode('htmlCode', {}, node.content)]),
  htmlCode: (node) => toNode('code', {}, node.content),

This workaround tricks the processing order by creating an intermediate node htmlCode, that is resolved once the children of <pre> created by the original code rule are processed.

Example
[user=123]

Should return
[{"tag":"user","attrs":{"123":"123"},"content":null}]

[COLOR="#ff0000"]text color red [/COLOR]

now with presetHTML5 parse like this:

[{"tag":"color","attrs":{"#ff0000":"#ff0000"},"content":["text"," ","color"," ","red"]}]

<color #ff0000="#ff0000">text color red</color>

how to get the correct code:

<span style="color:#ff0000">text color red</span>

???

[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.

Reproduction: link

Would you consider handling single attributes like the following:

[quote='username']...[/quote]

I looked around in the presets to see how attributes are handled but didn't see anything that looked like these single attributes (without an explicit field name) are supported or configurable via a preset.

From this bb-code: [url href=https://www.google.com?params=123]google[/url] I expect to receive a link of the form: <a href="https://www.google.com?params=123">google</a>.
But I get: <a href="" https://www.google.com?params="123">google</a>.

Is there a way to escape a bbcode tag, with for example a backslash? Say for example I have the following BBCode:

This is [b]a test[/b] of \[b\]escaping\[/b\] bbcode, I would want the parser to produce something like the following tree:

[
  "This",
  " ",
  "is",
  " ",
  {
    "tag": "b",
    "attrs": {},
    "content": [
      "a",
      " ",
      "test"
    ]
  },
  "of",
  " ",
  "[b]escaping[/b]",
  " ",
  "bbcode"
]

Is this possible?

Seems Lerna goes down lerna/lerna#3121. Now time to move to NX
https://nx.dev/

For future HTML support parser needs to context-free tags.

Example:
Input
[style] [b]asdasd[/b] [/style]
Result
<style> [b]asdasd[/b] </style>

Hi, thanks for the awesome library. However, I encountered this special use case, as the platform I'm working on allowed users to type programming code under [code] tag, if user enters anything BBCode alike under code tag, it is possible that the string is being parsed (Example as follows).

[code][align=left][b]avc[/b][/align][/code]

would be transpiled into

<pre><p style="text-align:left"><b>avc</b></p></pre>

while the expected result is

<pre>[align=left][b]avc[/b][/align]</pre>

I would like to ask if it is possible to instruct the parser to stop parsing children when certain tags are encountered.

Hi.
[list] tag with order attribute (1, A, a, I, i) should be converted to ol instead of ul.

For example:

[list] // <ul>
[list=1] // <ol type="1">
[list=A] // <ol type="A">

Add first class vue support for both 2 and 3 version

First I want to start by saying this library is fantastic, thanks for your work on it. Before using this lib, I tried regexes which ended up getting overly complex and slow. I'm happy to submit PRs for everything below, just wanted to talk through some of it through beforehand.

I noticed a few bugs so far...

• PropTypes error from @bbob/react (#27).
• reactPreset.extend doesn't work, but presetHTML5.extend does (#29).
• Warning: Each child in a list should have a unique "key" prop. with react (#30).
• Uppercase tags cause issues in react (see below) (#34).
• [*] tags inside lists don't work in react.
• I can help with some documentation (e.g. options, create a preset).

These ones are necessary, but would be nice to have...

• Expose getUniqAttr from plugin-helpers so preset authors and consumers can use it.

Uppercase Tags

For example, something like [B] kind of works in the demo because most browsers will automatically recognize and lowercase it (at least in the inspector) so it will still be rendered. That said the styling attributes you're adding with the b definition are lost and the demo only shows it bold because of default browser styling.

In react however, the following error is thrown:

<B /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

To fix this issue, I simply injected a little preset before the main one to lowercase all tag names:

            plugins={[
                (tree, core) => {
                    tree.walk(node => {
                        if (typeof node === 'object' && node.tag) {
                            node.tag = node.tag.toLowerCase()
                        }

                        return node
                    })
                },
                preset()
            ]}

That works, but feels a little hacky so I'm thinking this probably makes sense as a built-in but I'm not sure where to put it.

This one is best described with a picture.
Input:

Expected output:

Hello,

When you place a text to render and it contains brackets even though it is not a BBCODE it tries to render it and the text is no longer displayed.

For example:

Input:

  <BBCode plugins={reactPreset()}>
    [b]Super [i]easy[/i][/b] [u]to[/u] render [IMPORTANT] text
  </BBCode>

Output:
<span><span style="font-weight: bold;">Super <span style="font-style: italic;">easy</span></span> <span style="text-decoration: underline;">to</span> render <important></important> text</span>

Expected output:
<span><span style="font-weight: bold;">Super <span style="font-style: italic;">easy</span></span> <span style="text-decoration: underline;">to</span> render [IMPORTANT] text</span>

For fix this, i need to past a list of allowed bbcodes, but i don't know if another option more easy.

Thanks.

Hi @JiLiZART,

Just FYI, I happened to need a bbcode parser in dart but there are no available libraries so I decided to port bbob at https://github.com/edwardez/bbob_dart , now parser has been ported.

Thanks for creating this awesome library!

Regards,
Edward

First off, thanks for providing this great module! I'm working on integrating this into a React Native app, using a custom built preset that creates appropriate React Native components for my project. So far, so good. I've wrapped the react component in @bbob/react in a functional component as below, but I'm just running into one warning with PropTypes. In React Native, all text must be inside a Text component, so I need to override the default container with (my custom) Text component.

<BBCodeCore
            container={Text}
            componentProps={rest}
            plugins={[myPreset()]}
            options={{
                onlyAllowTags: [
                    'b',
                    'code',
                    'i',
                    'img',
                    'list',
                    '*',
                    'quote',
                    'url',
                ],
            }}
        >
            {children}
        </BBCodeCore>

This all works fine functionally, but in development I'm getting the below warning from prop-types:

Warning: Failed prop type: Invalid prop 'container' supplied to 'Component', expected a ReactNode.

I believe I'm setting this property as intended, but if there's a different way to do it to avoid the warning, let me know. Otherwise, is it possible to augment the prop-type for this property to also support this scenario?

Looking at the official definition of tags https://www.bbcode.org/reference.php the HTML5 preset is incomplete.
Is there a plan to add the missing tags?

Hello,

Because of how the lib parse the text, it's complicated to replace a string that contains a space in it (by example user names, emojis or links) 😅

It could be nice to add a list of keywords (that support space character) to the parser and extract these strings as a custom node type. It could be awesome if it can support both case sensitive and case unsensitive and be supported in tags and nested tags ❤️

If we add a "type" on each node, it could be relevant to also parse the "\n" and "\r" as type "eol" and support native http/https link detection as "link" type. 😊

[
  "example",
  " ",
  {
    "type": "keyword",
    "keyword": "my username"
  },
  {
    "type": "tag",
    "tag": "b",
    "attrs": {
      "value": "value"
    },
    "content": [
      " ",
      "my",
      " ",
      "text",
      " "
    ]
  },
  " ",
  {
    "type": "eol"
  },
  {
    "type": "link",
    "link": "https://github.com/JiLiZART/BBob/"
  },
  " ",
  "end"
]

Hello,

I need to know if the package offers the possibility that when passing a bbcode for example [spoiler] content [/ spoiler], use an existing component in react as <SpoilerCustomTag content = {node.content} /> and that within that component it is return the respective JSX to render.

This is because spoilers require an open or closed button.

Thanks.

EDIT.

Custom preset

const myPreset = reactPreset.extend((tags, options) => ({
  ...tags,
  spoiler: (node) => ({
    ...node,
    tag: () => test(node.content)
  })
}));

Application

const App = () => (
  <BBCode plugins={myPreset()}>
    [spoiler][b]test[/b][/spoiler]
  </BBCode>
);

Spoiler Custom Component with state

const test = (content) => {
  const [open, setOpen] = useState(false);
  return open ? (
    <div>{content}</div>
  ) : (
    <button onClick={() => setOpen(true)}>Open</button>
  );
};

The problem is when spoiler bbocde has another bbcodes inside, the error is the next:
Invariant Violation
Objects are not valid as a React child (found: object with keys {tag, attrs, content}). If you meant to render a collection of children, use an array instead.

@JiLiZART

Script injection is still very easy to achieve.
As mentioned in #66 (comment) you can inject JavaScript via on* attributes.
[aaa onclick=alert('Hacked')]Click Me[/aaa]

I don't think the solution is to blacklist certain attributes. IMO it shouldn't even be possible to set any attributes unless explicitly enabled in a preset. Even a style attribute can be used maliciously.

Furthermore it is not save to allow the creation of an arbitrary html tag. For example some websites might use custom elements which themselves might be exploitable.

I'ld strongly prefer it this library was safe by default.

Hello!

Looks like there's an issue with bundling the es modules. I'm trying to wrap it inside my own package with its own set of bbcode tags, and when I bundle it to esm or cjs (using rollup), I get quite a few "___ is not exported by ___" errors. Looks like it's because some import statements use the /lib directory.

i.e.

[!] Error: 'SLASH' is not exported by node_modules/BBob/packages/bbob-plugin-helper/lib/char.js, imported by node_modules/BBob/packages/bbob-parser/es/Token.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
node_modules/BBob/packages/bbob-parser/es/Token.js (1:36)
1: import { OPEN_BRAKET, CLOSE_BRAKET, SLASH } from '@bbob/plugin-helper/lib/char';

This is my rollup.config.js, where src/index.ts imports @bbob/html, @bbob/preset, and @bbob/core, and applies its own set of tags.

import resolve from "@rollup/plugin-node-resolve";
import typescript from "@rollup/plugin-typescript";
import pkg from "./package.json";

export default [

  // CommonJS (for Node) and ES module (for bundlers) build.
  {
    input: "src/index.ts",
    output: [
      { file: pkg.main, format: "cjs", sourcemap: true },
      { file: pkg.module, format: "es", sourcemap: true },
    ],
    plugins: [resolve(), typescript({ tsconfig: "./tsconfig.json" })],
  },
];

The name escapeHTML suggests, that the method may be used to sanitize text-content and get rid of probably malicious nested HTML in BBCode, like [i]<script>javascript:alert("XSS!"</script>[/i]. Unfortunately, the method has an extra turn, to support escaping of probably unsafe href attributes: It also escapes problematic protocols assuming, we are in a URL-context.

Thus, naively reused in custom API the above will escape the text content to:

<script>javascript%3Aalert... (etc.)

The suggestion for clarity is to name the method escapeHTMLAttribute or, as this is considered breaking, at least mention this usage in the JSdoc.

Otherwise, I think the best option for escaping (and I tend to switch to it) is to rely on DOM processing as suggested in #148 (comment).

While possible a bad example, the following will produce corrupted data in AST:

[url=javascript:alert('XSS ME');]TEXT[/url]
[url=javascript:alert("XSS ME");]TEXT[/url]

This can already be seen in the HTML Render demo, that outputs the (processed) AST tree as:

[
  {"tag":"a","attrs":{"href":"ME');"},"content":["TEXT"]},
  "\n",
  {"tag":"a","attrs":{"href":");"},"content":["TEXT"]},"\n"
]

If debugging the parsed tree prior to processing, the first line is represented as:

[
  {
    "tag": "url",
    "attrs": {
      "javascript:alert('XSS": "javascript:alert('XSS",
      "ME');": "ME');"
    },
    "content": [
      "TEXT"
    ]
  }
]

the second one as:

[
  {
    "tag": "url",
    "attrs": {
      "javascript:alert(\"XSS ME": "javascript:alert(\"XSS ME",
      ");": ");"
    },
    "content": [
      "TEXT"
    ]
  }
]

This is possible a similar issue to: #194.

While it may be argued, if the BBCode should not have used, for example, quotes for the first example (which works as expected):

[url="javascript:alert('XSS ME');"]TEXT[/url]

The pain point is, that typically BBCode origins from manually written markup. Thus, more fault-tolerance would be highly appreciated.

Alternative Challenges

[quote=J. D.]T[/quote]
[quote=J. "The T" D.]T[/quote]

With enableEscapeTags: true, when trying to write [b]test[\b] page is crashed.

The allowed tags settings doesn't have an option for checking for case sensitivity.

One option to fix this is to add a .toLowerCase() to the isAllowedTag() function in the parser

const isAllowedTag = (value) => {
    if (options.onlyAllowTags && options.onlyAllowTags.length) {
      return options.onlyAllowTags.indexOf(value**.toLowerCase()**) >= 0;
    }

    return true;
  };

toTagNode() already contains a .toLowerCase() statement

toTagNode() {
return new TagNode(this.tag.toLowerCase(), this.attrs, this.content);
}

so all tags get converted to lowercase anyway.

Could we either add .toLowerCase() to the isAllowedTag function, or, if we want block incorrectly cased tags, can we add an option that when flagged allows for case insensitive tags?

Is there any plan for TypeScript supporting?

Add ability to pass render and render bbcodes to react in react preset

from bbob-react

 "peerDependencies": {
    "prop-types": "15.x",
    "react": "15.x"
  },

Without understanding the details, the description may benefit from some enhanced description (see below). Given my assumptions and tests are correct, I will refer to a possibly even dangerous flaw in getUniqAttr handling, which can be summarized as: You can fake unique attributes within BBCode.

Suggestion for Description Enhancement

/**
 * Given a record of string to some value, this method will
 * retrieve the last entry in the record and return its key
 * when it is equal to its value.
 *
 * Such entries typically represent so-called _unique attributes_
 * after parsing, so that `[url=someUrl]` gets parsed to an
 * attributes object like: `{ someUrl: "someUrl" }`.
 *
 * @example
 * getUniqAttr({ 'foo': true, 'bar': bar' }) => 'bar'
 * @example
 * getUniqAttr({ 'bar': bar', 'foo': true }) => null
 * @param attrs - record of strings to attribute values
 * @returns {string|null} `null`, if no unique attribute could be determined
 */

The Flaw

Stumbled across this while trying to add a sanitizer that forbids on* attributes to be created during processing.

Thus, the attribute found as being "unique" may not always have been "unique" within the original BBCode.

Perhaps one possible option would be using a Symbol() as key for the unique attribute. But I did not dive into parsing, if this is even feasible.

Examples:

[tooltip message="this is a \\]message"]prevented[/tooltip]

[tooltip message="this is \\[b\\]Text\\[/b\\] message"]prevented[/tooltip]

// Inconsistent tag '/tooltip'

Escaping standard nested tags works:

[u]start \\[s\\]Text\\[/s\\] end[/u]

Despite data: and javascript: as well-known attack-vectors for XSS, the file: protocol may also cause malicious behavior. I think, it is rather safe (thus, backward-compatible) to also escape it here:

Only for local use of BBob, the file: protocol may be relevant. Thus, for full backward-compatiblity, we would require to add some flag to the options.

With onlyAllowTags set to ['b', 'i', 'u'], this happens:

Input: hello [blah foo="bar"]world[/blah]

Output: hello [blah]world[/blah]

It's still returned as a string in the AST, but there's some sort of pre-processing going on that strips out the would-be attributes.

Repro: https://jsfiddle.net/6acujnf5/3/

Hi,

I have two questions: How/where could I add custom bbcodes for the parser? And where do I find all supported bb-tags by default?

Thanks!