How to view BBob output? #8

Rhababo · 2023-09-23T16:11:58Z

Rhababo
Sep 23, 2023

I'm curious if there is a way to see the html output BBob creates before it is sent to markdown?

Right now I have the plugin running on a local discourse instance, so I can see how it works in combination with markdown, but it would be helpful to have a way to debug BBob directly.

Rhababo · 2023-09-23T17:26:00Z

Rhababo
Sep 23, 2023
Author

Somewhat related

I'm confused about how package.json is used in this context.

I assumed that ember would locate package.json in the plugin folder and then install the needed dependencies. But when I look in the node_modules folder, the plugin dependencies aren't there (bbob for example).

However, the plugin still seems to be operating as intended. Linebreaks are replaced with <br/>, and the [nobr][/nobr] tags seem to work as well.

Any ideas/clarifications? I'm trying to step through the functionality of bbob and the current plugin structure.

1 reply

Alteras1 Sep 28, 2023
Collaborator

Ya, this is kinda a weird issue with how discourse uses ember. Basically all discourse dependencies are wrapped up as either a ruby gem dependency or if they are js, are actually part of the repo. So for plugins, it basically means we have to wrap all of our files in the plugin as well or provide it via CDN.

How we're doing it is making the dev include the dependencies. Yarn does install node_modules dependencies, but we don't use it directly. We use a build step, either yarn run build or yarn start, that uses Rollup to bundle everything from the bbcode-src directory together into the assets/javascripts directory for discourse to lock onto.

tl;dr run yarn start during your dev and all the js will get bundled together.

Rhababo · 2023-09-24T04:01:14Z

Rhababo
Sep 24, 2023
Author

Not sure how discourse/yarn manages plugin dependencies, but I did throw together some simple html to play with the bbob code output.

<!doctype html>
<html lang="">

<head>
  <script src="lib/bbcode-parser.min.js"></script>
  <script src="lib/bbcode-plugin.js"> </script>
  <title></title>
</head>

<body>
    <form>
      <label for="bbob-input">Bbob Input:</label>
      <textarea id="bbob-input" name="bbob input" placeholder="Enter text here"></textarea>
    </form>
    <br/>
    <br/>
    <h2>Output from Bbcode preprocessor:</h2>
    <pre>
      <div id="output"></div>
    </pre>

    <script>
      // Get a reference to the "bbob-input" input field
      const bbobInput = document.getElementById("bbob-input");
      
      // Add an input event listener to detect changes in the input field
      bbobInput.addEventListener("input", function () {
      const enteredText = bbobInput.value; // Get the current value of the input
        const outputDiv = document.getElementById("output");
        outputDiv.textContent = preprocessor(enteredText);
    });
  </script>

</body>

</html>

And the two included files are essentially copy-pasted from the ones in the plugin, except I had to remove the helper function from the bbcode-plugin.js, since this just treats it as basic javascript.

And seeing this work is when I realized that the rollup.config.js embeds the bbob logic into the bbcode-parser.min.js

Let me know if there's a better way to see the bbcode-parser output, but this will work for me for now.

0 replies

Alteras1 · 2023-09-28T05:09:30Z

Alteras1
Sep 28, 2023
Collaborator

Sorry for the late reply. If you want to see what BBob outputs in the plugin, you put a console.warn at assets/javascripts/lib/discourse-markdown/bbcode-plugin.js right before the return of the preprocessor function

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to view BBob output? #8

Uh oh!

{{title}}

Uh oh!

Replies: 3 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

How to view BBob output? #8

Uh oh!

Rhababo Sep 23, 2023

Replies: 3 comments · 1 reply

Uh oh!

Rhababo Sep 23, 2023 Author

Uh oh!

Alteras1 Sep 28, 2023 Collaborator

Uh oh!

Rhababo Sep 24, 2023 Author

Uh oh!

Alteras1 Sep 28, 2023 Collaborator

Rhababo
Sep 23, 2023

Replies: 3 comments 1 reply

Rhababo
Sep 23, 2023
Author

Alteras1 Sep 28, 2023
Collaborator

Rhababo
Sep 24, 2023
Author

Alteras1
Sep 28, 2023
Collaborator