support multiple codemirror values

Author: sprocketc

src/renderer/attribute/impl/style.cljs

@@ -10,10 +10,11 @@
 (defmethod attribute.hierarchy/form-element [:default :style]
   [_ k v {:keys [disabled]}]
   (let [codemirror-theme @(rf/subscribe [::theme.subs/codemirror])]
-    [:div.w-full.bg-primary.p-1
+    [:div.w-full.bg-primary.px-2.py-1
      {:class (when disabled "*:[&.CodeMirror]:opacity-50")}
-     [views/cm-editor v {:on-blur #(rf/dispatch [::element.events/set-attr k %])
-                         :attrs {:id (name k)}
-                         :options {:mode "css"
-                                   :readOnly disabled
-                                   :theme codemirror-theme}}]]))
+     [views/cm-editor (str v) {:on-blur #(rf/dispatch [::element.events/set-attr k %])
+                               :attrs {:id (name k)}
+                               :options {:mode "css"
+                                         :placeholder (when-not v "multiple")
+                                         :readOnly disabled
+                                         :theme codemirror-theme}}]]))

src/renderer/components.css

@@ -1,7 +1,6 @@
 @utility form-element {
-  @apply bg-primary border-0 w-full outline-none shadow-none!;
+  @apply bg-primary border-0 w-full outline-none px-3 py-1 shadow-none!;
 
-  padding: 4px 12px;
   box-sizing: border-box;
   font-size: 12px;
   color: var(--font-color) !important;

src/renderer/overrides.css

@@ -125,6 +125,10 @@
   @apply bg-secondary!;
 }
 
+.CodeMirror-placeholder {
+  @apply text-disabled! font-sans!;
+}
+
 .CodeMirror {
   @apply font-mono h-auto z-0;
   background: transparent !important;

src/renderer/views.cljs

@@ -10,6 +10,7 @@
    ["@radix-ui/react-switch" :as Switch]
    ["@repath-project/react-color" :refer [PhotoshopPicker]]
    ["codemirror" :as codemirror]
+   ["codemirror/addon/display/placeholder.js"]
    ["codemirror/addon/hint/css-hint.js"]
    ["codemirror/addon/hint/show-hint.js"]
    ["codemirror/mode/css/css.js"]