diff --git a/app/lib/babycode.py b/app/lib/babycode.py index 4e19cc5..e9aca96 100644 --- a/app/lib/babycode.py +++ b/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"
  • {x}
    • " 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"{children}" + + m = re.match(hex_re, potential_color) + if m: + return f"{children}" + + # return just the way it was if we can't parse it + return f"[color={attr}]{children}[/color]" + TAGS = { "b": lambda children, attr: f"{children}", "i": lambda children, attr: f"{children}", "s": lambda children, attr: f"{children}", + "u": lambda children, attr: f"{children}", + "img": lambda children, attr: f"
    \"{children}\"
    ", "url": lambda children, attr: f"{children}", "quote": lambda children, attr: f"
    {children}
    ", "code": tag_code, "ul": lambda children, attr: f"", "ol": lambda children, attr: f"
      {tag_list(children)}
    ", + + "big": lambda children, attr: f"{children}", + "small": lambda children, attr: f"{children}", + "color": tag_color, + + "center": lambda children, attr: f"
    {children}
    ", + "right": lambda children, attr: f"
    {children}
    ", } def make_emoji(name, code): diff --git a/app/templates/babycode.html b/app/templates/babycode.html index c5e8ed6..d161d61 100644 --- a/app/templates/babycode.html +++ b/app/templates/babycode.html @@ -14,23 +14,68 @@

    Text formatting tags

    -
    @@ -60,6 +105,15 @@ {{ '[code]paragraph 1 \nstill paragraph 1[/code]' | babycode | safe }} That will produce:
    {{ 'paragraph 1 \nstill paragraph 1' | babycode | safe }} +

    Additionally, the following tags will break into a new paragraph:

    +
    diff --git a/app/templates/common/macros.html b/app/templates/common/macros.html index b6953b9..6b1b302 100644 --- a/app/templates/common/macros.html +++ b/app/templates/common/macros.html @@ -53,6 +53,7 @@ + diff --git a/data/static/js/babycode-editor.js b/data/static/js/babycode-editor.js index 441c6f0..6b8eccb 100644 --- a/data/static/js/babycode-editor.js +++ b/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"); diff --git a/data/static/style.css b/data/static/style.css index 4a7e2c2..cc2ffe7 100644 --- a/data/static/style.css +++ b/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; +} diff --git a/sass/style.scss b/sass/style.scss index 9f467a2..f198c9e 100644 --- a/sass/style.scss +++ b/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; +}