support markdown in JS tooltips

`marked` adds about 44k to the bundle size unfortunately :-(

ftl/core/deck-config.ftl

@@ -1,5 +1,8 @@
 ### Text shown on the "Deck Options" screen
 
+
+## Top section
+
 # Used in the deck configuration screen to show how many decks are used
 # by a particular configuration group, eg "Group1 (used by 3 decks)"
 deck-config-used-by-decks =
@@ -25,12 +28,12 @@ deck-config-review-limit-tooltip =
 
 deck-config-learning-title = Learning
 deck-config-learning-steps = Learning steps
-# Please don't translate '5m' or '2d'
+# Please don't translate `5m` or `2d`
--deck-config-delay-hint = Delays can be in minutes (eg "5m"), or days (eg "2d").
+-deck-config-delay-hint = Delays can be in minutes (eg `5m`), or days (eg `2d`).
 deck-config-learning-steps-tooltip =
     One or more delays, separated by spaces. The first delay will be used
-    when you press the Again button on a new card, and is 1 minute by default.
+    when you press the `Again` button on a new card, and is 1 minute by default.
-    The Good button will advance to the next step, which is 10 minutes by default.
+    The `Good` button will advance to the next step, which is 10 minutes by default.
     Once all steps have been passed, the card will become a review card, and
     will appear on a different day. { -deck-config-delay-hint }
 deck-config-interday-step-priority = Interday step priority
@@ -42,10 +45,10 @@ deck-config-review-mix-show-before-reviews = Show before reviews
 ## New Cards section
 
 deck-config-graduating-interval-tooltip =
-    The number of days to wait before showing a card again, after the Good button
+    The number of days to wait before showing a card again, after the `Good` button
     is pressed on the final learning step.
 deck-config-easy-interval-tooltip =
-    The number of days to wait before showing a card again, after the Easy button
+    The number of days to wait before showing a card again, after the `Easy` button
     is used to immediately remove a card from learning.
 deck-config-new-insertion-order = Insertion order
 deck-config-new-insertion-order-tooltip =
@@ -56,12 +59,13 @@ deck-config-new-insertion-order-sequential = Sequential (oldest cards first)
 deck-config-new-insertion-order-random = Random
 deck-config-new-gather-priority = Gather priority
 deck-config-new-gather-priority-tooltip =
-    <b>Deck</b> gathers cards from each subdeck in order, and stops when the
+    `Deck`: gathers cards from each subdeck in order, and stops when the
     limit of the selected deck has been exceeded. This is faster, and allows you
-    to prioritize subdecks that are closer to the top. <b>Position</b> gathers
+    to prioritize subdecks that are closer to the top.
-    cards from all decks before they are sorted. This ensures the oldest cards
+    
-    will be shown first, even if the parent limit is not high enough to see
+    `Position`: gathers cards from all decks before they are sorted. This
-    cards from all decks.
+    ensures the oldest cards will be shown first, even if the parent limit is
+    not high enough to see cards from all decks.
 deck-config-new-gather-priority-deck = Deck
 deck-config-new-gather-priority-position = Position
 deck-config-sort-order = Sort order
@@ -96,19 +100,20 @@ deck-config-sort-order-descending-intervals = Descending intervals
 
 deck-config-relearning-steps = Relearning steps
 deck-config-relearning-steps-tooltip =
-    Zero or more delays, separated by spaces. By default, pressing the Again
+    Zero or more delays, separated by spaces. By default, pressing the `Again`
     button on a review card will show it again 10 minutes later. If no delays
     are provided, the card will have its interval changed, without entering
     relearning. { -deck-config-delay-hint }
 deck-config-leech-threshold-tooltip =
-    The number of times Again needs to be pressed on a review card before it is
+    The number of times `Again` needs to be pressed on a review card before it is
     marked as a leech. Leeches are cards that consume a lot of your time, and
     when a card is marked as a leech, it's a good idea to rewrite it, delete it, or
     think of a mnemonic to help you remember it.
 # See actions-suspend-card and scheduling-tag-only for the wording
 deck-config-leech-action-tooltip =
-    <b>Tag Only</b>: Add a "leech" tag to the note, and display a pop-up.<br>
+    `Tag Only`: Add a "leech" tag to the note, and display a pop-up.
-    <b>Suspend Card</b>: In addition to tagging the note, hide the card until it is
+    
+    `Suspend Card`: In addition to tagging the note, hide the card until it is
     manually unsuspended.
 
 ## Burying section
@@ -144,21 +149,21 @@ deck-config-always-include-question-audio-tooltip =
 deck-config-advanced-title = Advanced
 deck-config-maximum-interval-tooltip =
     The maximum number of days a review card will wait. When reviews have
-    reached the limit, Hard, Good and Easy will all give the same delay.
+    reached the limit, `Hard`, `Good` and `Easy` will all give the same delay.
     The shorter you set this, the greater your workload will be.
 deck-config-starting-ease-tooltip =
-    The ease multiplier new cards start with. By default, the Good button on a
+    The ease multiplier new cards start with. By default, the `Good` button on a
-    newly-learnt card will delay the next review by 2.5x the previous delay.
+    newly-learned card will delay the next review by 2.5x the previous delay.
 deck-config-easy-bonus-tooltip =
     An extra multiplier that is applied to a review card's interval when you rate
-    it Easy.
+    it `Easy`.
 deck-config-interval-modifier-tooltip =
     This multiplier is applied to all reviews, and minor adjustments can be used
     to make Anki more conservative or aggressive in its scheduling. Please see
     the manual before changing this option.
-deck-config-hard-interval-tooltip = The multiplier applied to a review interval when answering Hard.
+deck-config-hard-interval-tooltip = The multiplier applied to a review interval when answering `Hard`.
-deck-config-new-interval-tooltip = The multiplier applied to a review interval when answering Again.
+deck-config-new-interval-tooltip = The multiplier applied to a review interval when answering `Again`.
-deck-config-minimum-interval-tooltip = The minimum interval given to a review card after answering Again.
+deck-config-minimum-interval-tooltip = The minimum interval given to a review card after answering `Again`.
 
 ## Adding/renaming
 

ts/deckoptions/BUILD.bazel

@@ -28,6 +28,7 @@ compile_svelte(
     deps = [
         "//ts/sveltelib",
         "@npm//@types/bootstrap",
+        "@npm//@types/marked",
     ],
 )
 
@@ -98,6 +99,7 @@ esbuild(
         "@npm//bootstrap",
         ":base_css",
         "//ts/sveltelib",
+        "@npm//marked",
     ] + svelte_names,
 )
 
@@ -129,6 +131,7 @@ svelte_check(
     ]) + [
         "@npm//@types/bootstrap",
         "@npm//@types/lodash-es",
+        "@npm//@types/marked",
     ],
 )
 

ts/deckoptions/ConfigEntry.svelte

@@ -3,6 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
+    import marked from "marked";
     import { slide } from "svelte/transition";
     import RevertButton from "./RevertButton.svelte";
     import HelpPopup from "./HelpPopup.svelte";
@@ -15,6 +16,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let warnings: string[] = [];
     export let wholeLine = false;
     export let id: string | undefined = undefined;
+
+    let renderedTooltip: string;
+    $: renderedTooltip = marked(tooltip);
 </script>
 
 <style lang="scss">
@@ -59,8 +63,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <div class="table">
             <span class="vcenter">
                 {label}
-                {#if tooltip}
+                {#if renderedTooltip}
-                    <HelpPopup html={tooltip} />
+                    <HelpPopup html={renderedTooltip} />
                 {/if}
             </span>
         </div>

ts/deckoptions/deckoptions-base.scss

@@ -41,3 +41,9 @@ html {
     max-width: 300px;
     text-align: left;
 }
+
+// the default code color in tooltips is difficult to read; we'll probably
+// want to add more of our own styling in the future
+code {
+    color: var(--flag1-bg);
+}

ts/licenses.json

@@ -120,6 +120,12 @@
         "path": "node_modules/@types/long",
         "licenseFile": "node_modules/@types/long/LICENSE"
     },
+    "@types/marked@2.0.2": {
+        "licenses": "MIT",
+        "repository": "https://github.com/DefinitelyTyped/DefinitelyTyped",
+        "path": "node_modules/@types/marked",
+        "licenseFile": "node_modules/@types/marked/LICENSE"
+    },
     "@types/node@15.0.2": {
         "licenses": "MIT",
         "repository": "https://github.com/DefinitelyTyped/DefinitelyTyped",
@@ -467,6 +473,13 @@
         "path": "node_modules/long",
         "licenseFile": "node_modules/long/LICENSE"
     },
+    "marked@2.0.3": {
+        "licenses": "MIT",
+        "repository": "https://github.com/markedjs/marked",
+        "publisher": "Christopher Jeffrey",
+        "path": "node_modules/marked",
+        "licenseFile": "node_modules/marked/LICENSE.md"
+    },
     "mathjax@3.1.4": {
         "licenses": "Apache-2.0",
         "repository": "https://github.com/mathjax/MathJax",

ts/package.json

@@ -57,6 +57,7 @@
         "@mdi/svg": "^5.9.55",
         "@popperjs/core": "^2.9.2",
         "@types/lodash-es": "^4.17.4",
+        "@types/marked": "^2.0.2",
         "bootstrap": "=5.0.0-beta3",
         "bootstrap-icons": "^1.4.0",
         "css-browser-selector": "^0.6.5",
@@ -65,6 +66,7 @@
         "jquery": "^3.5.1",
         "jquery-ui-dist": "^1.12.1",
         "lodash-es": "^4.17.21",
+        "marked": "^2.0.3",
         "mathjax": "^3.1.2",
         "protobufjs": "^6.10.2"
     },

ts/yarn.lock

@@ -989,6 +989,11 @@
   resolved "https://registry.yarnpkg.com/@types/long/-/long-4.0.1.tgz#459c65fa1867dafe6a8f322c4c51695663cc55e9"
   integrity sha512-5tXH6Bx/kNGd3MgffdmP4dy2Z+G4eaXw0SE81Tq3BNadtnMR5/ySMzX4SLEzHJzSmPNn4HIdpQsBvXMUykr58w==
 
+"@types/marked@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@types/marked/-/marked-2.0.2.tgz#33a15106383f6e42cd6bdd38093e6b19904e29e1"
+  integrity sha512-P4zanhCQKs4tiWPPBGpB7lHflgFCP9DFGNI5YtpW9MALKoy2qs9rHNWJ+z55cegD9uCfnmsKuaosq9FNvbxrOw==
+
 "@types/node@*", "@types/node@>=13.7.0":
   version "15.0.2"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-15.0.2.tgz#51e9c0920d1b45936ea04341aa3e2e58d339fb67"
@@ -3333,6 +3338,11 @@ marked@^0.8.2:
   resolved "https://registry.yarnpkg.com/marked/-/marked-0.8.2.tgz#4faad28d26ede351a7a1aaa5fec67915c869e355"
   integrity sha512-EGwzEeCcLniFX51DhTpmTom+dSA/MG/OBUDjnWtHbEnjAH180VzUeAw+oE4+Zv+CoYBWyRlYOTR0N8SO9R1PVw==
 
+marked@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-2.0.3.tgz#3551c4958c4da36897bda2a16812ef1399c8d6b0"
+  integrity sha512-5otztIIcJfPc2qGTN8cVtOJEjNJZ0jwa46INMagrYfk0EvqtRuEHLsEe0LrFS0/q+ZRKT0+kXK7P2T1AN5lWRA==
+
 mathjax@^3.1.2:
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/mathjax/-/mathjax-3.1.4.tgz#4e8932d12845c0abae8b7f1976ea98cb505e8420"