Add image upload

web/src/main/frontend/commands.cljs

@@ -29,7 +29,9 @@
      ["Link" link-steps]
      ;; same as link
      ["Image Link" link-steps]
-     ["Upload a file" nil]
+     ["Upload an image" [[:editor/click-hidden-file-input :id]]]
+     ;; TODO:
+     ;; ["Upload a file" nil]
      ]
     ;; Allow user to modify or extend, should specify how to extend.
     (:config @state/state))
@@ -69,6 +71,10 @@
 (defmethod handle-step :editor/show-input [[_ option]]
   (state/set-editor-show-input option))
 
+(defmethod handle-step :editor/click-hidden-file-input [[_ input-id]]
+  (when-let [input-file (gdom/getElement "upload-file")]
+    (.click input-file)))
+
 (defmethod handle-step :default [[type & _args]]
   (prn "No handler for step: " type))
 

web/src/main/frontend/components/editor.cljs

@@ -18,12 +18,12 @@
 (def *matched-commands (atom nil))
 (defonce *slash-caret-pos (atom nil))
 
-(defn- append-command!
+(defn- insert-command!
   [id command-output]
   (cond
     ;; replace string
     (string? command-output)
-    (handler/append-command! command-output)
+    (handler/insert-command! id command-output (:pos @*slash-caret-pos))
 
     ;; steps
     (vector? command-output)
@@ -47,7 +47,7 @@
       (ui/auto-complete
        (map first matched)
        (fn [chosen]
-         (append-command! id (get (into {} matched) chosen)))
+         (insert-command! id (get (into {} matched) chosen)))
        {:style {:top (+ top 20)
                 :left left
                 :width 400}}))))
@@ -193,14 +193,17 @@
 (defn get-matched-commands
   [input]
   (let [edit-content (gobj/get input "value")
-        last-command (commands/get-command-input edit-content)]
+        pos (:pos (util/get-caret-pos input))
+        last-command (subs edit-content
+                           (:pos @*slash-caret-pos)
+                           pos)]
     (or
-     (and (= \/ (last edit-content))
-          (or
-           (and
-            (>= (count edit-content) 2)
-            (contains? #{" " "\r" "\n" "\t"} (nth edit-content (- (count edit-content) 2))))
-           (= edit-content "/"))
+     (and (= \/ (nth edit-content (dec pos)))
+          ;; (or
+          ;;  (and
+          ;;   (>= (count edit-content) 2)
+          ;;   (contains? #{" " "\r" "\n" "\t"} (nth edit-content (- (count edit-content) 2))))
+          ;;  (= edit-content "/"))
           commands/commands-map)
      (and last-command
           (commands/get-matched-commands last-command)))))
@@ -247,18 +250,19 @@
         nil)
        (mixins/on-key-up
         state
+        ;; /
         {191 (fn [state e]
                (when-let [matched-commands (seq (get-matched-commands input))]
                  (reset! *show-commands true)
                  (reset! *slash-caret-pos (util/get-caret-pos input))))}
         (fn [e key-code]
-          (when (not= key-code 191)
+          (when (not= key-code 191)     ; not /
             (let [matched-commands (get-matched-commands input)]
               (if (seq matched-commands)
                 (if (= key-code 9)      ;tab
                   (do
                     (util/stop e)
-                    (append-command! input-id (last (first matched-commands))))
+                    (insert-command! input-id (last (first matched-commands))))
                   (do
                     (reset! *matched-commands matched-commands)
                     (reset! *show-commands true)))
@@ -310,4 +314,29 @@
                    (when-let [editor (gdom/getElement id)]
                      (.focus editor))
                    (handler/editor-set-new-value! new-value)))
-               (state/set-editor-show-input nil))))]))
+               (state/set-editor-show-input nil))))
+
+     [:input
+      {:id "upload-file"
+       :type "file"
+       :on-change (fn [e]
+                    (let [files (.-files (.-target e))]
+                      (image/upload
+                       files
+                       (fn [file file-name file-type]
+                         (handler/request-presigned-url
+                          file file-name file-type
+                          (fn [signed-url]
+                            ;; insert into the text
+                            (let [pos (:pos @*slash-caret-pos)
+                                  current-pos (:pos (util/get-caret-pos (gdom/getElement id)))
+                                  new-value (string/trimr
+                                             (util/format "%s [[%s][%s]] %s"
+                                                          (subs value 0 (max 0 (dec (dec pos))))
+                                                          signed-url
+                                                          file-name
+                                                          (subs value current-pos)))]
+                              (when-let [editor (gdom/getElement id)]
+                                (.focus editor))
+                              (handler/editor-set-new-value! new-value))))))))
+       :hidden true}]]))

web/src/main/frontend/handler.cljs

@@ -559,7 +559,6 @@
                                              (fn [{:keys [signed-url]}]
                                                (if signed-url
                                                  (do
-                                                   (prn "Get a singed url: " signed-url)
                                                    (url-handler signed-url))
                                                  (prn "Something error, can't get a valid signed url.")))
                                              (fn [error]
@@ -621,7 +620,7 @@
   (when-let [edit-content (state/get-edit-content)]
     (when (= \/ (last edit-content))
       (let [new-value (subs edit-content 0 (dec (count edit-content)))]
-       (state/set-edit-content! new-value)))))
+        (state/set-edit-content! new-value)))))
 
 (defn append-edit-content!
   [append-value]
@@ -632,14 +631,21 @@
         (when-let [current-input (gdom/getElement input-id)]
           (util/move-cursor-to-end current-input))))))
 
-(defn append-command!
-  [append-value]
+(defn insert-command!
+  [id value current-slash-pos]
   (when-let [edit-content (state/get-edit-content)]
-    (let [new-value (util/replace-last "/" edit-content (str append-value))]
+    (let [input (gdom/getElement id)
+          current-pos (:pos (util/get-caret-pos input))
+          prefix (util/replace-last "/"
+                                    (subs edit-content 0 current-pos)
+                                    (str value))
+          new-value (str
+                     prefix
+                     (subs edit-content current-pos))]
       (state/set-edit-content! new-value)
       (when-let [input-id (state/get-edit-input-id)]
         (when-let [current-input (gdom/getElement input-id)]
-          (util/move-cursor-to-end current-input))))))
+          (util/move-cursor-to input (count prefix)))))))
 
 (defn editor-set-new-value!
   [new-value]
@@ -648,18 +654,6 @@
     (when-let [current-input (gdom/getElement input-id)]
       (util/move-cursor-to-end current-input))))
 
-(defn insert-image!
-  [image-url]
-  ;; (let [content (state/get-edit-content)
-  ;;       image (str "<img src=\"" image-url "\" />")
-  ;;       new-content (str content "\n" "#+BEGIN_EXPORT html\n" image "\n#+END_EXPORT\n")
-  ;;       ;; node @state/edit-node
-  ;;       ]
-  ;;   (state/set-edit-content! new-content)
-  ;;   (set! (.-value node) new-content)
-  ;;   (util/move-cursor-to-end node))
-  )
-
 (defn search
   [q]
   (swap! state/state assoc :search/result (search/search q)))

web/src/main/frontend/util.cljs

@@ -432,3 +432,7 @@
   (let [{:keys [pos]} (get-caret-pos input)]
     (set! (.-selectionStart input) (+ pos n))
     (set! (.-selectionEnd input) (+ pos n))))
+
+(defn move-cursor-to [input n]
+  (set! (.-selectionStart input) n)
+  (set! (.-selectionEnd input) n))