Scrollbox resolved

README.md

@@ -57,7 +57,7 @@ The goal of this repo and plugin is to provide users with the BBCode suite that
 - [ ] Center Block
 - [x] Background ✔️
 - [x] Border ✔️
-- [ ] Scroll Box
+- [x] Scroll Box
 - [ ] Div Box
 - [ ] Anchors
 - [ ] Rows & Columns

assets/javascripts/bbcode-parser.min.js

@@ -399,6 +399,16 @@
         return toNode('span', { class: 'bb-pindent' }, node.content);
     };
 
+    /**
+     * @file Adds [scroll] to bbcode
+     * @example [scroll]content[/scroll]
+     */
+    const scroll = (node) => {
+      const attrs = preprocessAttr(node.attrs)._default;
+      const heightInput = parseHeight(attrs);
+      return toNode("div", { class:"bb-scroll", style: `height: ${heightInput}px` }, node.content);
+    }
+
     const side = (node) => {
       const attrs = preprocessAttr(node.attrs)._default || "left";
       return toNode("div", { class: "bb-side", "data-side": attrs }, node.content);
@@ -534,6 +544,7 @@
       note,
       ooc,
       pindent,
+      scroll,
       side,
       size,
       spoiler,

assets/javascripts/lib/discourse-markdown/bbcode-plugin.js

@@ -93,6 +93,7 @@ export function setup(helper) {
     "div.bb-note-tape",
     "div.bb-ooc",
     "div.bb-right",
+    "div.bb-scroll",
     "div.bb-side",
     "div.bb-spoiler-content",
     "div[style=*]",

assets/stylesheets/common/index.scss

@@ -11,6 +11,7 @@
 @import 'note.scss';
 @import 'ooc.scss';
 @import 'pindent.scss';
+@import 'scroll.scss';
 @import 'side.scss';
 @import 'size.scss';
 @import 'spoiler.scss';

assets/stylesheets/common/scroll.scss

@@ -0,0 +1,6 @@
+.bb-scroll {
+    max-width: 100%; 
+    padding: 5px; 
+    overflow:auto; 
+    border: 1px solid; 
+}

bbcode-src/preset.js

@@ -16,6 +16,7 @@ import { nobr } from "./tags/nobr";
 import { note } from "./tags/note";
 import { ooc } from "./tags/ooc";
 import { pindent } from "./tags/pindent";
+import { scroll } from "./tags/scroll";
 import { side } from "./tags/side";
 import { size } from "./tags/size";
 import { inlinespoiler, spoiler } from "./tags/spoiler";
@@ -39,6 +40,7 @@ const tags = {
   note,
   ooc,
   pindent,
+  scroll,
   side,
   size,
   spoiler,

bbcode-src/tags/scroll.js

@@ -0,0 +1,32 @@
+import { preprocessAttr, toNode } from "../utils/common";
+
+/**
+ * Parse the user provided height and return a valid height value
+ * @param {Number} heightValue obtains the input of the user entered height (default is 700)
+ * @returns A validated number less than 0.
+ */
+function parseHeight(heightValue) {
+    const maxHeight = 700;
+    const parsedHeight = heightValue && heightValue.trim() !== ""
+        ? heightValue.replace ( /[^\d.]/g, '' )
+        : 0;
+
+    if(parsedHeight && parsedHeight >= 0 && parsedHeight <= maxHeight) {
+        return parsedHeight;
+    } else {
+        // if the value = 0 then nothing will be returned
+        return parsedHeight === 0
+            ? 0
+            : maxHeight;
+    }
+}
+
+/**
+ * @file Adds [scroll] to bbcode
+ * @example [scroll]content[/scroll]
+ */
+export const scroll = (node) => {
+    const attrs = preprocessAttr(node.attrs)._default;
+    const heightInput = parseHeight(attrs);
+    return toNode("div", { class: "bb-scroll",style: `height: ${heightInput}px` }, node.content);
+}