CB/ui: add styling for asciidoc classes (!44)

This adds a few asciidoctor classes to the sanitizer and adds styling for them.

- support for making elements `float`
- support for [tables without borders](https://codeberg.org/tastytea/asciidoctor-rendering-test/src/branch/main/README.adoc#_with_gridnone)
- make [TOC-title](https://codeberg.org/tastytea/asciidoctor-rendering-test/src/branch/main/README.adoc) bold
- make [admonition blocks](https://codeberg.org/tastytea/asciidoctor-rendering-test/src/branch/main/README.adoc#_admonitions) look nice

I tried adding more border-styles for tables, but clashed with existing rules and couldn't figure out how to solve it. I don't think it's that important for this use-case so i didn't try too hard. 😊

Co-authored-by: tastytea <[email protected]>
Reviewed-on: https://codeberg.org/Codeberg/gitea/pulls/44
Co-authored-by: tastytea <[email protected]>
Co-committed-by: tastytea <[email protected]>

Author: 2 people

modules/markup/sanitizer.go

@@ -94,6 +94,18 @@ func createDefaultPolicy() *bluemonday.Policy {
 	// Allow 'color' and 'background-color' properties for the style attribute on text elements.
 	policy.AllowStyles("color", "background-color").OnElements("span", "p")
 
+	// AsciiDoc: Allow classes for float-direction
+	policy.AllowAttrs("class").Matching(regexp.MustCompile(`(^| )(text-)?(left|center|right)$`)).OnElements("div")
+
+	// AsciiDoc: Allow classes for admonition blocks
+	policy.AllowAttrs("class").Matching(regexp.MustCompile(`^admonitionblock (note|tip|important|caution|warning)( |$)`)).OnElements("div")
+	policy.AllowAttrs("class").Matching(regexp.MustCompile(`^title$`)).OnElements("div")
+	policy.AllowAttrs("class").Matching(regexp.MustCompile(`^(icon|content)$`)).OnElements("td")
+
+	// AsciiDoc: Allow classes for table styling: borders and horizontal alignment
+	policy.AllowAttrs("class").Matching(regexp.MustCompile(`^tableblock frame-(all|ends|sides|none) grid-(all|rows|cols|none)( |$)`)).OnElements("table")
+	policy.AllowAttrs("class").Matching(regexp.MustCompile(`^tableblock halign-(left|center|right)( |$)`)).OnElements("th", "td")
+
 	// Allow generally safe attributes
 	generalSafeAttrs := []string{
 		"abbr", "accept", "accept-charset",

web_src/less/markup/content.less

@@ -558,3 +558,83 @@
   border-top-left-radius: 0 !important;
   border-top-right-radius: 0 !important;
 }
+
+.asciidoc {
+  .left {
+    float: left;
+  }
+
+  .right {
+    float: right
+  }
+
+  .text-left,
+  .halign-left {
+    text-align: left;
+  }
+
+  .text-center,
+  .halign-center {
+    text-align: center;
+  }
+
+  .text-right,
+  .halign-right {
+    text-align: right;
+  }
+
+  table {
+    &.frame-none {
+      border-width: 0 !important;
+    }
+
+    &.grid-none {
+      tr,
+      th,
+      td {
+        border-width: 0 !important;
+      }
+    }
+  }
+
+  #user-content-toctitle {
+    font-weight: bold;
+  }
+
+  .admonitionblock {
+    > table {
+      border: 0 !important;
+      border-radius: 0.2em;
+
+      tr,
+      td {
+        border: 0 !important;
+      }
+
+      .icon {
+        font-weight: bold;
+        border-right: 0.1em solid !important;
+        vertical-align: top;
+      }
+
+      .content {
+        background-color: var(--color-body);
+      }
+    }
+
+    .admonition-colours() {
+      tip: var(--color-green);
+      note: var(--color-blue);
+      important: var(--color-red);
+      caution: var(--color-yellow);
+      warning: var(--color-orange);
+    }
+
+    each(.admonition-colours(), .(@colour, @class) {
+      &.@{class} .icon {
+        color: @colour;
+        background: linear-gradient(to left, @colour, transparent 0.5em);
+      }
+    })
+  }
+}