FIX: Preserve authored BBCode CSS and contain layout artwork

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 /gems
 /auto_generated
+.eslintcache

.husky/pre-commit

@@ -1 +1 @@
-yarn lint-staged
+pnpm lint-staged

.npmrc

@@ -1 +1,2 @@
-engine-strict=true
+engine-strict = true
+auto-install-peers = false

Gemfile.lock

@@ -1,80 +1,99 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    activesupport (7.1.3.3)
+    activesupport (8.1.3)
       base64
       bigdecimal
-      concurrent-ruby (~> 1.0, >= 1.0.2)
+      concurrent-ruby (~> 1.0, >= 1.3.1)
       connection_pool (>= 2.2.5)
       drb
       i18n (>= 1.6, < 2)
+      json
+      logger (>= 1.4.2)
       minitest (>= 5.1)
-      mutex_m
-      tzinfo (~> 2.0)
-    ast (2.4.2)
-    base64 (0.2.0)
-    bigdecimal (3.1.8)
-    concurrent-ruby (1.2.3)
-    connection_pool (2.4.1)
-    drb (2.2.1)
-    i18n (1.14.5)
+      securerandom (>= 0.3)
+      tzinfo (~> 2.0, >= 2.0.5)
+      uri (>= 0.13.1)
+    ast (2.4.3)
+    base64 (0.3.0)
+    bigdecimal (4.1.2)
+    concurrent-ruby (1.3.7)
+    connection_pool (3.0.2)
+    drb (2.2.3)
+    i18n (1.15.2)
       concurrent-ruby (~> 1.0)
-    json (2.7.2)
-    language_server-protocol (3.17.0.3)
-    minitest (5.23.1)
-    mutex_m (0.2.0)
-    parallel (1.24.0)
-    parser (3.3.1.0)
+    json (2.20.0)
+    language_server-protocol (3.17.0.6)
+    lint_roller (1.1.0)
+    logger (1.7.0)
+    minitest (6.0.6)
+      drb (~> 2.0)
+      prism (~> 1.5)
+    parallel (2.1.0)
+    parser (3.3.11.1)
       ast (~> 2.4.1)
       racc
     prettier_print (1.2.1)
-    racc (1.8.0)
-    rack (3.0.12)
+    prism (1.9.0)
+    racc (1.8.1)
+    rack (3.2.6)
     rainbow (3.1.1)
-    regexp_parser (2.9.2)
-    rexml (3.3.9)
-    rubocop (1.64.0)
+    regexp_parser (2.12.0)
+    rubocop (1.88.2)
       json (~> 2.3)
-      language_server-protocol (>= 3.17.0)
-      parallel (~> 1.10)
+      language_server-protocol (~> 3.17.0.2)
+      lint_roller (~> 1.1.0)
+      parallel (>= 1.10)
       parser (>= 3.3.0.2)
       rainbow (>= 2.2.2, < 4.0)
-      regexp_parser (>= 1.8, < 3.0)
-      rexml (>= 3.2.5, < 4.0)
-      rubocop-ast (>= 1.31.1, < 2.0)
+      regexp_parser (>= 2.9.3, < 3.0)
+      rubocop-ast (>= 1.49.0, < 2.0)
       ruby-progressbar (~> 1.7)
-      unicode-display_width (>= 2.4.0, < 3.0)
-    rubocop-ast (1.31.3)
-      parser (>= 3.3.1.0)
-    rubocop-capybara (2.20.0)
-      rubocop (~> 1.41)
-    rubocop-discourse (3.8.0)
+      unicode-display_width (>= 2.4.0, < 4.0)
+    rubocop-ast (1.50.0)
+      parser (>= 3.3.7.2)
+      prism (~> 1.7)
+    rubocop-capybara (3.0.0)
+      lint_roller (~> 1.1)
+      rubocop (~> 1.81)
+    rubocop-discourse (3.18.0)
       activesupport (>= 6.1)
-      rubocop (>= 1.59.0)
-      rubocop-capybara (>= 2.0.0)
-      rubocop-factory_bot (>= 2.0.0)
-      rubocop-rails (>= 2.25.0)
-      rubocop-rspec (>= 2.25.0)
-    rubocop-factory_bot (2.25.1)
-      rubocop (~> 1.41)
-    rubocop-rails (2.25.0)
+      lint_roller (>= 1.1.0)
+      rubocop-capybara (>= 2.23.0)
+      rubocop-discourse-base (>= 1.0.0)
+      rubocop-factory_bot (>= 2.27.0)
+      rubocop-rails (>= 2.30.3)
+      rubocop-rspec (>= 3.0.1)
+      rubocop-rspec_rails (>= 2.31.0)
+    rubocop-discourse-base (1.0.0)
+      rubocop (>= 1.80.0)
+    rubocop-factory_bot (2.28.0)
+      lint_roller (~> 1.1)
+      rubocop (~> 1.72, >= 1.72.1)
+    rubocop-rails (2.35.5)
       activesupport (>= 4.2.0)
+      lint_roller (~> 1.1)
       rack (>= 1.1)
-      rubocop (>= 1.33.0, < 2.0)
-      rubocop-ast (>= 1.31.1, < 2.0)
-    rubocop-rspec (2.29.2)
-      rubocop (~> 1.40)
-      rubocop-capybara (~> 2.17)
-      rubocop-factory_bot (~> 2.22)
-      rubocop-rspec_rails (~> 2.28)
-    rubocop-rspec_rails (2.28.3)
-      rubocop (~> 1.40)
+      rubocop (>= 1.75.0, < 2.0)
+      rubocop-ast (>= 1.44.0, < 2.0)
+    rubocop-rspec (3.10.2)
+      lint_roller (~> 1.1)
+      regexp_parser (>= 2.0)
+      rubocop (~> 1.86, >= 1.86.2)
+    rubocop-rspec_rails (2.32.0)
+      lint_roller (~> 1.1)
+      rubocop (~> 1.72, >= 1.72.1)
+      rubocop-rspec (~> 3.5)
     ruby-progressbar (1.13.0)
-    syntax_tree (6.2.0)
+    securerandom (0.4.1)
+    syntax_tree (6.3.0)
       prettier_print (>= 1.2.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
-    unicode-display_width (2.5.0)
+    unicode-display_width (3.2.0)
+      unicode-emoji (~> 4.1)
+    unicode-emoji (4.2.0)
+    uri (1.1.1)
 
 PLATFORMS
   ruby
@@ -84,4 +103,4 @@ DEPENDENCIES
   syntax_tree
 
 BUNDLED WITH
-   2.5.10
+  4.0.15

app/controllers/bb_code/admin/refresh_controller.rb

@@ -9,10 +9,10 @@ def index
         begin
           # Skip warmup in development mode - it makes boot take ~2s longer
           PrettyText.cook("warm up **pretty text**")
-          render json: nil, status: 200
+          render json: nil, status: :ok
         rescue => e
           Rails.logger.error("Failed to warm up pretty text: #{e}")
-          render json: nil, status: 500
+          render json: nil, status: :internal_server_error
         end
       end
     end

assets/javascripts/discourse/initializers/class.js

@@ -2,6 +2,7 @@
  * @file Initializes and adds any custom user styles to the post
  */
 import { withPluginApi } from "discourse/lib/plugin-api";
+import { decorateBBCodeScrollers } from "../lib/bbcode-scroll-containers";
 
 /**
  * Adds the inline styles for the style tag inside a given post
@@ -10,7 +11,7 @@ import { withPluginApi } from "discourse/lib/plugin-api";
 function addClassStyleCode(post) {
   // cleans up existing styles
   post.querySelectorAll("style[data-rendered-class]").forEach((el) => {
-    post.removeChild(el);
+    el.remove();
   });
 
   post.querySelectorAll("template[data-bbcode-plus='class']").forEach((el) => {
@@ -28,9 +29,15 @@ function addClassStyleCode(post) {
     }
     post.prepend(style);
   });
+
+  return decorateBBCodeScrollers(post);
 }
 
 function initializeClassStyle(api) {
+  if (!api.container.lookup("service:site-settings").bbcode_enabled) {
+    return;
+  }
+
   api.decorateCookedElement(addClassStyleCode, { id: "add class style code" });
 }
 

assets/javascripts/discourse/lib/bbcode-scroll-containers.js

@@ -0,0 +1,64 @@
+import { cancel, schedule } from "@ember/runloop";
+
+const positionedScrollers = new WeakMap();
+const pendingDecorations = new WeakMap();
+const scrollableOverflow = new Set(["auto", "scroll"]);
+
+export function decorateBBCodeScrollers(post) {
+  pendingDecorations.get(post)?.();
+  if (post.isConnected) {
+    containBBCodeScrollers(post);
+    return;
+  }
+
+  // Cooked content is decorated before insertion; measure CSS after adoption.
+  let timer;
+  const cleanup = () => {
+    cancel(timer);
+    if (pendingDecorations.get(post) === cleanup) {
+      pendingDecorations.delete(post);
+    }
+  };
+  pendingDecorations.set(post, cleanup);
+  timer = schedule("afterRender", () => {
+    pendingDecorations.delete(post);
+    containBBCodeScrollers(post);
+  });
+  return cleanup;
+}
+
+/** Anchor absolute artwork to static scrollers so it clips and scrolls with the layout. */
+export function containBBCodeScrollers(post) {
+  const view = post.ownerDocument.defaultView;
+  if (!post.isConnected || !view) {
+    return;
+  }
+
+  post.querySelectorAll('div[data-bbcode-div="true"]').forEach((element) => {
+    const previous = positionedScrollers.get(element);
+    if (
+      previous &&
+      element.style.position === "relative" &&
+      !element.style.getPropertyPriority("position")
+    ) {
+      // Re-evaluate changed class styles, preserving any new author positioning.
+      if (previous.value) {
+        element.style.setProperty("position", previous.value, previous.priority);
+      } else {
+        element.style.removeProperty("position");
+      }
+    }
+    positionedScrollers.delete(element);
+
+    const computed = view.getComputedStyle(element);
+    if (computed.position !== "static" || !scrollableOverflow.has(computed.overflowX)) {
+      return;
+    }
+
+    positionedScrollers.set(element, {
+      value: element.style.getPropertyValue("position"),
+      priority: element.style.getPropertyPriority("position"),
+    });
+    element.style.setProperty("position", "relative");
+  });
+}

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

@@ -174,6 +174,7 @@ export function setup(helper) {
     "div.bb-message-content",
     "div.bb-message-them",
     "div.bb-message-me",
+    "div[data-bbcode-div=true]",
     "div[style=*]",
     "fieldset.bb-fieldset",
     "legend.bb-fieldset-legend",

assets/stylesheets/common/accordion.scss

@@ -32,10 +32,12 @@ div.bb-accordion {
       &:hover {
         background: $title-hover-bg-color;
       }
+
       &::before {
         display: none;
       }
     }
+
     &[open=""] summary.bb-slide-title {
       border-bottom: 1px solid $border-color;
     }
@@ -46,9 +48,9 @@ div.bb-accordion {
       background-color: $content-bg-color;
       border-right: 1px solid $border-color;
       border-left: 1px solid $border-color;
-
       padding: 6px;
     }
+
     &:last-child {
       border-bottom: unset;
     }

assets/stylesheets/common/block.scss

@@ -74,6 +74,7 @@ table.bb-block {
       td.bb-block-content {
         border-color: $color;
       }
+
       td.bb-block-icon {
         background-image: url($image);
 
@@ -90,62 +91,51 @@ table.bb-block {
   }
 
   @include block-builder("dice", "Dice", #0a941d, "/plugins/bbcode/images/colordice.png");
-
   @include block-builder("dice10", "Dice", #0a941d, "/plugins/bbcode/images/colordice10.png");
-
   @include block-builder("setting", "Setting", #0a941d, "/plugins/bbcode/images/colorsetting.png");
-
   @include block-builder(
     "important",
     "Important",
     #94920a,
     "/plugins/bbcode/images/colorexclaim.png"
   );
-
   @include block-builder(
     "treasure",
     "Treasure",
     #cbc939,
     "/plugins/bbcode/images/colortreasure.png"
   );
-
   @include block-builder(
     "announcement",
     "Announcement",
     #940a0a,
     "/plugins/bbcode/images/colorannounce.png"
   );
-
   @include block-builder("warning", "Warning", #940a0a, "/plugins/bbcode/images/colorwarning.png");
-
   @include block-builder(
     "encounter",
     "Encounter",
     #940a0a,
     "/plugins/bbcode/images/colorencounter.png"
   );
-
   @include block-builder(
     "storyteller",
     "Storyteller",
     #bf7e00,
     "/plugins/bbcode/images/colorpencil.png"
   );
-
   @include block-builder(
     "question",
     "Question",
     #5e0a94,
     "/plugins/bbcode/images/colorquestion.png"
   );
-
   @include block-builder(
     "information",
     "Information",
     #0a1694,
     "/plugins/bbcode/images/colorinfo.png"
   );
-
   @include block-builder(
     "character",
     "Character",
@@ -154,7 +144,7 @@ table.bb-block {
   );
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (width <= 600px) {
   table.bb-block td.bb-block-icon {
     height: 75px;
     background-size: 50px;