🎉 Add UI for toggling bullet lists (under config flag)

common/src/app/common/flags.cljc

@@ -187,6 +187,8 @@
     :available-viewer-wasm
     :stroke-path
     :stroke-per-side
+    ;; Enables bullet lists in the v3 (WASM) text editor.
+    :text-editor-wasm-v1-lists
 
     :custom-shortcuts
     :remote-media-processing

frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs

@@ -52,6 +52,9 @@
   Evaluated once at module load time; cf/flags is immutable after startup."
   (contains? cf/flags :token-typography-row))
 
+(def ^:private text-lists-flag-enabled?
+  (contains? cf/flags :text-editor-wasm-v1-lists))
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Sub-components
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -230,6 +233,37 @@
                          :allow-empty  true
                          :options      options}]]))
 
+(mf/defc list-options*
+  [{:keys [values on-change on-blur]}]
+  (let [list-style-type (:list-style-type values)
+        ;; Mixed selections leave no option selected
+        selected        (if (= list-style-type :multiple)
+                          nil
+                          (d/nilv list-style-type "none"))
+        options
+        (mf/with-memo []
+          [{:value "none"
+            :id    "list-style-none"
+            :label (tr "workspace.options.text-options.list-none")
+            :icon  i/remove}
+           {:value "disc"
+            :id    "list-style-disc"
+            :label (tr "workspace.options.text-options.list-bullets")
+            :icon  i/view-as-list}])
+
+        handle-change
+        (mf/use-fn
+         (mf/deps on-change on-blur)
+         (fn [value]
+           (on-change {:list-style-type value})
+           (when (some? on-blur) (on-blur))))]
+
+    [:div {:class (stl/css :list-options)}
+     [:> radio-buttons* {:selected  selected
+                         :on-change handle-change
+                         :name      "list-options"
+                         :options   options}]]))
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Helpers
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -360,6 +394,10 @@
         ;; --- Helpers
         multiple?       (->> values vals (d/seek #(= % :multiple)))
 
+        ;; v3 can be toggled at runtime, so it is read on render
+        text-editor-v3?      (features/use-feature "text-editor-wasm/v1")
+        text-lists-enabled?  (and text-lists-flag-enabled? text-editor-v3?)
+
         apply-token!
         (mf/use-fn
          (mf/deps ids typography-tokens)
@@ -596,4 +634,7 @@
           [:div {:class (stl/css :text-decoration-options)}
            [:> vertical-align* common-props]
            [:> text-decoration-options* (mf/spread-props common-props {:token-applied current-token-name})]
-           [:> text-direction-options* common-props]])])]))
+           [:> text-direction-options* common-props]])
+
+        (when (and more-options-open? text-lists-enabled?)
+          [:> list-options* common-props])])]))

frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss

@@ -59,7 +59,8 @@
 .text-direction-options,
 .vertical-align-options,
 .grow-options,
-.text-decoration-options {
+.text-decoration-options,
+.list-options {
   block-size: $sz-32;
 }
 

frontend/translations/en.po

@@ -8151,6 +8151,14 @@ msgstr "Letter Spacing"
 msgid "workspace.options.text-options.line-height"
 msgstr "Line height"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:251
+msgid "workspace.options.text-options.list-bullets"
+msgstr "Bullet list"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:247
+msgid "workspace.options.text-options.list-none"
+msgstr "No list"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:212
 msgid "workspace.options.text-options.strikethrough"
 msgstr "Strikethrough (%s)"

frontend/translations/es.po

@@ -8240,6 +8240,14 @@ msgstr "Espaciado entre letras"
 msgid "workspace.options.text-options.line-height"
 msgstr "Altura de línea"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:251
+msgid "workspace.options.text-options.list-bullets"
+msgstr "Lista con viñetas"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:247
+msgid "workspace.options.text-options.list-none"
+msgstr "Sin lista"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:212
 msgid "workspace.options.text-options.strikethrough"
 msgstr "Tachado (%s)"