fix: slug

menu: move file/* to title dropdown, add new button
mhuebert · Jul 28, 2023 · 66ab9fd · 66ab9fd
1 parent 9ec792b
commit 66ab9fd
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 39 deletions.
diff --git a/editor2/src/main/maria/cloud/menubar.cljs b/editor2/src/main/maria/cloud/menubar.cljs
@@ -1,6 +1,7 @@
 (ns maria.cloud.menubar
-  (:require ["@radix-ui/react-menubar" :as menu :refer [Item Separator Root Menu Trigger Portal Content]]
-            ["@radix-ui/react-avatar" :as ava]
+  (:require ["@radix-ui/react-avatar" :as ava]
+            ["@radix-ui/react-menubar" :as menu :refer [Item Separator Root Menu Trigger Portal Content]]
+            ["@radix-ui/react-popover" :as Popover]
             [applied-science.js-interop :as j]
             [clojure.string :as str]
             [maria.cloud.github :as gh]
@@ -43,9 +44,11 @@
           (when (:bindings cmd)
             [shortcut (keymaps/show-binding (first (:bindings cmd)))])])))
 
-(def trigger-classes (v/classes ["px-1 h-7 bg-transparent hover:bg-zinc-200 rounded"
+(def trigger-classes (v/classes ["px-1 h-7 bg-transparent rounded"
+                                 "hover:bg-zinc-200"
                                  "data-[highlighted]:bg-zinc-200"
-                                 "data-[state=open]:bg-zinc-200"]))
+                                 "data-[delayed-open]:bg-zinc-200"
+                                 "data-[state*=open]:bg-zinc-200"]))
 (def trigger
   (v/from-element menu/Trigger
                   {:class trigger-classes}))
@@ -146,6 +149,8 @@
          [:el menu/Content {:class "MenubarContent mt-2"}
           (when (persist/writable? id)
             [item {:on-click start-editing!} "Rename"])
+          [command-item :file/revert]
+          [command-item :file/save]
           (when (= :file.provider/gist provider)
             [:<>
              separator
@@ -156,8 +161,8 @@
                 :class item-classes}
                "View on GitHub"
                [icons/arrow-top-right-on-square:mini "w-4 h-4 ml-1"]]]])
-
-          ]]])]))
+          separator
+          [command-item :file/duplicate]]]])]))
 
 (defn has-selection? [el]
   (some-> (j/get el :selectionStart)
@@ -167,6 +172,9 @@
   (when (= :file.provider/gist provider)
     [icons/github "w-4 h-5 mr-2"]))
 
+(defn popover [trigger content]
+  )
+
 (ui/defview menubar []
   (let [menubar-content @(ui/use-context ::!content)]
     [:<>
@@ -178,16 +186,16 @@
         [icon-btn {:on-click #(swap! ui/!state update :sidebar/visible? not)}
          [icons/bars3 "w-4 h-4"]])
       [:el Root {:class "flex flex-row w-full items-center gap-1"}
-       [menu "File"
-        [command-item :file/new]
-        [command-item :file/duplicate]
-        separator
-        [command-item :file/revert]
-        separator
-        [command-item :file/save]
-        [command-item :file/save-as-clerk-project]]
        [:div.flex-grow]
        menubar-content
+       (let [cmd (keymaps/resolve-command :file/new)]
+         [ui/tooltip
+          [:div.cursor-pointer.p-1
+           {:class [trigger-classes
+                    "text-zinc-500 hover:text-zinc-700"]
+            :on-click #(keymaps/run-command cmd)}
+           [icons/document-plus:mini "w-5 h-5 -mt-[2px]"]]
+          (:title (keymaps/resolve-command :file/new))])
        [:div.flex-grow]
        [command-bar/input]
        (if-let [{:keys [photo-url display-name]} (gh/get-user)]

diff --git a/editor2/src/main/maria/editor/code/sci.cljs b/editor2/src/main/maria/editor/code/sci.cljs
@@ -30,10 +30,10 @@
 
 (def prefix->loadable
   (->> config/loadables
-       (reduce-kv (fn [out loadable libnames]
-                    (reduce (fn [out libname]
-                              (assoc out libname loadable))
-                            out libnames)) {})))
+       (reduce-kv (fn [out k {:keys [loadable provides]}]
+                    (reduce (fn [out lib-prefix]
+                              (assoc out lib-prefix loadable))
+                            out provides)) {})))
 
 (defn lib-prefix [libname]
   (symbol (first (str/split (str libname) #"\."))))

diff --git a/editor2/src/main/maria/editor/extensions/config.cljs b/editor2/src/main/maria/editor/extensions/config.cljs
@@ -1,14 +1,25 @@
 (ns maria.editor.extensions.config
-  (:require [shadow.lazy :as lazy]))
+  (:require [shadow.lazy :as lazy]
+            [shadow.loader]))
 
 ;; feel free to submit a PR with additional extension config here
 
 (def loadables
   "A map of shadow lazy modules to namespace prefixes that they provide."
-  {(lazy/loadable maria.editor.extensions.reagent/install!) '[reagent]
-   (lazy/loadable maria.editor.extensions.emmy/install!) '[leva
-                                                           emmy
-                                                           mafs
-                                                           jsxgraph
-                                                           mathbox
-                                                           mathlive]})
+  {:reagent {:loadable (lazy/loadable maria.editor.extensions.reagent/install!)
+             :provides '[reagent]}
+   :emmy {:loadable (lazy/loadable maria.editor.extensions.emmy/install!)
+          :provides '[leva
+                      emmy
+                      mafs
+                      jsxgraph
+                      mathbox
+                      mathlive]
+          :depends-on #{:reagent}}})
+
+(defn get-load-order [dep-name loadables]
+  (let [dep (get loadables dep-name)
+        deps (set (:depends-on dep))]
+    (concat
+      (mapcat #(get-load-order % loadables) deps)
+      [(:loadable dep)])))
diff --git a/editor2/src/main/maria/editor/icons.cljs b/editor2/src/main/maria/editor/icons.cljs
@@ -82,20 +82,31 @@
 
 (defn loading [class]
   (v/x
-    [:svg {:xmlns   "http://www.w3.org/2000/svg"
+    [:svg {:xmlns "http://www.w3.org/2000/svg"
            :viewBox "0 0 20 20"
-           :fill    "currentColor"
-           :class   ["rotate-3s" class]}
+           :fill "currentColor"
+           :class ["rotate-3s" class]}
      [:path
       {:fillRule "evenodd"
-       :d        "M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"
+       :d "M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"
        :clipRule "evenodd"}]]))
 
 (defn github [class]
-  [:svg {:class class :xmlns "http://www.w3.org/2000/svg" :width "16" :height "16" :fill "currentColor" :viewBox "0 0 16 16"}
-   [:path {:d "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"}]])
+  (v/x
+    [:svg {:class class :xmlns "http://www.w3.org/2000/svg" :width "16" :height "16" :fill "currentColor" :viewBox "0 0 16 16"}
+     [:path {:d "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"}]]))
 
 (defn arrow-top-right-on-square:mini [class]
-  [:svg {:class class :xmlns "http://www.w3.org/2000/svg" :viewBox "0 0 20 20" :fill "currentColor"}
-   [:path {:fillRule "evenodd" :d "M4.25 5.5a.75.75 0 00-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 00.75-.75v-4a.75.75 0 011.5 0v4A2.25 2.25 0 0112.75 17h-8.5A2.25 2.25 0 012 14.75v-8.5A2.25 2.25 0 014.25 4h5a.75.75 0 010 1.5h-5z" :clipRule "evenodd"}]
-   [:path {:fillRule "evenodd" :d "M6.194 12.753a.75.75 0 001.06.053L16.5 4.44v2.81a.75.75 0 001.5 0v-4.5a.75.75 0 00-.75-.75h-4.5a.75.75 0 000 1.5h2.553l-9.056 8.194a.75.75 0 00-.053 1.06z" :clipRule "evenodd"}]])
+  (v/x
+    [:svg {:class class :xmlns "http://www.w3.org/2000/svg" :viewBox "0 0 20 20" :fill "currentColor"}
+     [:path {:fillRule "evenodd" :d "M4.25 5.5a.75.75 0 00-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 00.75-.75v-4a.75.75 0 011.5 0v4A2.25 2.25 0 0112.75 17h-8.5A2.25 2.25 0 012 14.75v-8.5A2.25 2.25 0 014.25 4h5a.75.75 0 010 1.5h-5z" :clipRule "evenodd"}]
+     [:path {:fillRule "evenodd" :d "M6.194 12.753a.75.75 0 001.06.053L16.5 4.44v2.81a.75.75 0 001.5 0v-4.5a.75.75 0 00-.75-.75h-4.5a.75.75 0 000 1.5h2.553l-9.056 8.194a.75.75 0 00-.053 1.06z" :clipRule "evenodd"}]]))
+
+(defn document-plus:mini [class]
+  (v/x
+    [:svg.w-5.h-5 {:class class :xmlns "http://www.w3.org/2000/svg" :viewBox "0 0 20 20" :fill "currentColor"}
+     [:path {:fill-rule "evenodd" :d "M4.5 2A1.5 1.5 0 003 3.5v13A1.5 1.5 0 004.5 18h11a1.5 1.5 0 001.5-1.5V7.621a1.5 1.5 0 00-.44-1.06l-4.12-4.122A1.5 1.5 0 0011.378 2H4.5zM10 8a.75.75 0 01.75.75v1.5h1.5a.75.75 0 010 1.5h-1.5v1.5a.75.75 0 01-1.5 0v-1.5h-1.5a.75.75 0 010-1.5h1.5v-1.5A.75.75 0 0110 8z" :clip-rule "evenodd"}]])
+  #_(v/x
+      [:svg {:xmlns "http://www.w3.org/2000/svg" :fill "none" :viewBox "0 0 24 24" :strokeWidth "{1.5}" :stroke "currentColor" :class class}
+       [:path {:strokeLinecap "round" :strokeLinejoin "round" :d "M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"}]])
+  )
diff --git a/editor2/src/main/maria/editor/keymaps.cljs b/editor2/src/main/maria/editor/keymaps.cljs
@@ -471,7 +471,9 @@
                       {:focus/prose true}))))))
 
 (defn resolve-command
-  ([cmd] (resolve-command (get-context) cmd))
+  ([cmd] (if (and (map? cmd) (:context cmd))
+           cmd
+           (resolve-command (get-context) cmd)))
   ([context cmd]
    (let [cmd (if (keyword? cmd)
                (@!command-registry cmd)

diff --git a/editor2/src/main/maria/editor/util.cljc b/editor2/src/main/maria/editor/util.cljc
@@ -135,10 +135,11 @@
 
 (defn slug [title]
   (-> title
-      (str/replace #"[^\w\d_]" "")
+      (str/replace #"[^\w\d_ ]" "")
       str/lower-case
       (truncate-segmented 35 "")
-      (str/replace #"\s+" "_")))
+      (str/replace #"[\s_]+" "_")))
+
 
 (comment
   (truncate-segmented "This is a long string" 7 "...")

diff --git a/editor2/src/main/maria/ui.cljc b/editor2/src/main/maria/ui.cljc
@@ -1,6 +1,7 @@
 (ns maria.ui
   (:require #?(:cljs ["react" :as react])
             #?(:cljs ["prosemirror-keymap" :refer [keydownHandler]])
+            #?(:cljs ["@radix-ui/react-tooltip" :as Tooltip])
             [applied-science.js-interop :as j]
             [clojure.pprint]
             [yawn.view :as v]
@@ -87,4 +88,14 @@
 #?(:cljs
    (defn keydown-handler [bindings]
      (let [handler (keydownHandler (clj->js bindings))]
-       (fn [e] (handler #js{} e)))))
+       (fn [e] (handler #js{} e)))))
+
+#?(:cljs
+   (ui/defview tooltip [trigger content]
+     [:el Tooltip/Provider {:delay-duration 400}
+      [:el Tooltip/Root
+       [:el Tooltip/Trigger {:asChild true} trigger]
+
+       [:el.bg-zinc-600.text-white.rounded.shadow.text-sm.px-2.py-1.z-60 Tooltip/Content
+        [:el.fill-zinc-600 Tooltip/Arrow]
+        content]]]))