add [u], [big], [small], [color], [center], [right] tags to babycode

app/lib/babycode.py

@@ -2,6 +2,37 @@ from .babycode_parser import Parser
 from markupsafe import escape
 import re
 
+NAMED_COLORS = [
+    'black', 'silver', 'gray', 'white', 'maroon', 'red',
+    'purple', 'fuchsia', 'green', 'lime', 'olive', 'yellow',
+    'navy', 'blue', 'teal', 'aqua', 'aliceblue', 'antiquewhite',
+    'aqua', 'aquamarine', 'azure', 'beige', 'bisque', 'black',
+    'blanchedalmond', 'blue', 'blueviolet', 'brown', 'burlywood', 'cadetblue',
+    'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson',
+    'cyan', 'aqua', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray',
+    'darkgreen', 'darkgrey', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange',
+    'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategray',
+    'darkslategrey', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray',
+    'dimgrey', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'fuchsia',
+    'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'gray', 'green',
+    'greenyellow', 'grey', 'gray', 'honeydew', 'hotpink', 'indianred',
+    'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen',
+    'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray',
+    'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue',
+    'lightslategray', 'lightslategrey', 'lightsteelblue', 'lightyellow', 'lime', 'limegreen',
+    'linen', 'magenta', 'fuchsia', 'maroon', 'mediumaquamarine', 'mediumblue',
+    'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise',
+    'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite',
+    'navy', 'oldlace', 'olive', 'olivedrab', 'orange', 'orangered',
+    'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip',
+    'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'purple',
+    'rebeccapurple', 'red', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon',
+    'sandybrown', 'seagreen', 'seashell', 'sienna', 'silver', 'skyblue',
+    'slateblue', 'slategray', 'slategrey', 'snow', 'springgreen', 'steelblue',
+    'tan', 'teal', 'thistle', 'tomato', 'transparent', 'turquoise',
+    'violet', 'wheat', 'white', 'whitesmoke', 'yellow', 'yellowgreen',
+]
+
 def tag_code(children, attr):
     is_inline = children.find('\n') == -1
     if is_inline:
@@ -16,16 +47,39 @@ def tag_list(children):
     list_body = re.sub(r"\n\n+", "\1", list_body)
     return " ".join([f"<li>{x}</li>" for x in list_body.split("\1") if x])
 
+def tag_color(children, attr):
+    hex_re = r"^#?([0-9a-f]{6}|[0-9a-f]{3})$"
+    potential_color = attr.lower().strip()
+
+    if potential_color in NAMED_COLORS:
+        return f"<span style='color: {potential_color};'>{children}</span>"
+
+    m = re.match(hex_re, potential_color)
+    if m:
+        return f"<span style='color: #{m.group(1)};'>{children}</span>"
+
+    # return just the way it was if we can't parse it
+    return f"[color={attr}]{children}[/color]"
+
 TAGS = {
     "b": lambda children, attr: f"<strong>{children}</strong>",
     "i": lambda children, attr: f"<em>{children}</em>",
     "s": lambda children, attr: f"<del>{children}</del>",
+    "u": lambda children, attr: f"<u>{children}</u>",
+
     "img": lambda children, attr: f"<div class=\"post-img-container\"><img class=\"block-img\" src=\"{attr}\" alt=\"{children}\"></div>",
     "url": lambda children, attr: f"<a href={attr}>{children}</a>",
     "quote": lambda children, attr: f"<blockquote>{children}</blockquote>",
     "code": tag_code,
     "ul": lambda children, attr: f"<ul>{tag_list(children)}</ul>",
     "ol": lambda children, attr: f"<ol>{tag_list(children)}</ol>",
+
+    "big": lambda children, attr: f"<span style='font-size: 2rem;'>{children}</span>",
+    "small": lambda children, attr: f"<span style='font-size: 0.75rem;'>{children}</span>",
+    "color": tag_color,
+
+    "center": lambda children, attr: f"<div style='text-align: center;'>{children}</div>",
+    "right": lambda children, attr: f"<div style='text-align: right;'>{children}</div>",
 }
 
 def make_emoji(name, code):

app/templates/babycode.html

@@ -14,23 +14,68 @@
       </section>
       <section class="babycode-guide-section">
         <h2 id="text-formatting-tags">Text formatting tags</h2>
-        <ul>
+        <ul class='babycode-guide-list'>
           <li>To make some text <strong>bold</strong>, enclose it in <code class="inline-code">[b][/b]</code>:<br>
           [b]Hello World[/b]<br>
           Will become<br>
           <strong>Hello World</strong>
+          </li>
         </ul>
-        <ul>
+        <ul class='babycode-guide-list'>
           <li>To <em>italicize</em> text, enclose it in <code class="inline-code">[i][/i]</code>:<br>
           [i]Hello World[/i]<br>
           Will become<br>
           <em>Hello World</em>
+          </li>
         </ul>
-        <ul>
+        <ul class='babycode-guide-list'>
           <li>To make some text <del>strikethrough</del>, enclose it in <code class="inline-code">[s][/s]</code>:<br>
           [s]Hello World[/s]<br>
           Will become<br>
           <del>Hello World</del>
+          </li>
+        </ul>
+        <ul class='babycode-guide-list'>
+          <li>To <u>underline</u> some text, enclose it in <code class="inline-code">[u][/u]</code>:<br>
+          [u]Hello World[/u]<br>
+          Will become<br>
+          <u>Hello World</u>
+          </li>
+        </ul>
+        <ul class='babycode-guide-list'>
+          <li>To make some text {{ "[big]big[/big]" | babycode | safe }}, enclose it in <code class="inline-code">[big][/big]</code>:<br>
+          [big]Hello World[/big]<br>
+          Will become<br>
+          {{ "[big]Hello World[/big]" | babycode | safe }}
+          <li>Similarly, you can make text {{ "[small]small[/small]" | babycode | safe }} with <code class="inline-code">[small][/small]</code>:<br>
+          [small]Hello World[/small]<br>
+          Will become<br>
+          {{ "[small]Hello World[/small]" | babycode | safe }}
+          </li>
+        </ul>
+        <ul class='babycode-guide-list'>
+          <li>You can change the text color by using <code class="inline-code">[color][/color]</code>:<br>
+          [color=red]Red text[/color]<br>
+          [color=white]White text[/color]<br>
+          [color=#3b08f0]Blueish text[/color]<br>
+          Will become<br>
+          {{ "[color=red]Red text[/color]" | babycode | safe }}<br>
+          {{ "[color=white]White text[/color]" | babycode | safe }}<br>
+          {{ "[color=#3b08f0]Blueish text[/color]" | babycode | safe }}<br>
+          </li>
+        </ul>
+        <ul class='babycode-guide-list'>
+          <li>You can center text by enclosing it in <code class="inline-code">[center][/center]</code>:<br>
+          [center]Hello World[/center]<br>
+          Will become<br>
+          {{ "[center]Hello World[/center]" | babycode | safe }}
+          </li>
+          <li>You can right-align text by enclosing it in <code class="inline-code">[right][/right]</code>:<br>
+          [right]Hello World[/right]<br>
+          Will become<br>
+          {{ "[right]Hello World[/right]" | babycode | safe }}
+          </li>
+          Note: the center and right tags will break the paragraph. See <a href="#paragraph-rules">Paragraph rules</a> for more details.
         </ul>
       </section>
       <section class="babycode-guide-section">
@@ -60,6 +105,15 @@
         {{ '[code]paragraph 1  \nstill paragraph 1[/code]' | babycode | safe }}
         That will produce:<br>
         {{ 'paragraph 1  \nstill paragraph 1' | babycode | safe }}
+        <p>Additionally, the following tags will break into a new paragraph:</p>
+        <ul>
+          <li><code class="inline-code">[code]</code> (code block, not inline);</li>
+          <li><code class="inline-code">[img]</code>;</li>
+          <li><code class="inline-code">[center]</code>;</li>
+          <li><code class="inline-code">[right]</code>;</li>
+          <li><code class="inline-code">[ul]</code> and <code class="inline-code">[ol]</code>;</li>
+          <li><code class="inline-code">[quote]</code>.</li>
+        </ul>
       </section>
       <section class="babycode-guide-section">
         <h2 id="links">Links</h2>

app/templates/common/macros.html

@@ -53,6 +53,7 @@
       <button class="babycode-button" type=button id="post-editor-bold" title="Insert Bold"><strong>B</strong></button>
       <button class="babycode-button" type=button id="post-editor-italics" title="Insert Italics"><em>I</em></button>
       <button class="babycode-button" type=button id="post-editor-strike" title="Insert Strikethrough"><del>S</del></button>
+      <button class="babycode-button" type=button id="post-editor-underline" title="Insert Underline"><u>U</u></button>
       <button class="babycode-button" type=button id="post-editor-url" title="Insert Link"><code>://</code></button>
       <button class="babycode-button" type=button id="post-editor-code" title="Insert Code block"><code>&lt;/&gt;</code></button>
       <button class="babycode-button contain-svg full" type=button id="post-editor-img" title="Insert Image"><img src="/static/misc/image.svg"></button>

data/static/js/babycode-editor.js

@@ -42,6 +42,7 @@
   const buttonBold = document.getElementById("post-editor-bold");
   const buttonItalics = document.getElementById("post-editor-italics");
   const buttonStrike = document.getElementById("post-editor-strike");
+  const buttonUnderline = document.getElementById("post-editor-underline");
   const buttonUrl = document.getElementById("post-editor-url");
   const buttonCode = document.getElementById("post-editor-code");
   const buttonImg = document.getElementById("post-editor-img");
@@ -105,6 +106,10 @@
     e.preventDefault();
     insertTag("s")
   })
+  buttonUnderline.addEventListener("click", (e) => {
+    e.preventDefault();
+    insertTag("u")
+  })
   buttonUrl.addEventListener("click", (e) => {
     e.preventDefault();
     insertTag("url=", false, "link label");

data/static/style.css

@@ -792,7 +792,8 @@ ul, ol {
 
 .babycode-button-container {
   display: flex;
-  gap: 10px;
+  gap: 5px;
+  flex-wrap: wrap;
 }
 
 .babycode-button {
@@ -851,3 +852,7 @@ footer {
   margin: auto;
   justify-content: center;
 }
+
+.babycode-guide-list {
+  border-bottom: 1px dashed;
+}

sass/style.scss

@@ -787,7 +787,8 @@ ul, ol {
 
 .babycode-button-container {
   display: flex;
-  gap: 10px;
+  gap: 5px;
+  flex-wrap: wrap;
 }
 
 .babycode-button {
@@ -834,3 +835,7 @@ footer {
   margin: auto;
   justify-content: center;
 }
+
+.babycode-guide-list {
+  border-bottom: 1px dashed;
+}