From 8c137d91b07a641e208c0d1fab282d61e763ad44 Mon Sep 17 00:00:00 2001 From: Tienson Qin Date: Mon, 4 May 2020 23:08:53 +0800 Subject: [PATCH] Add image upload --- web/src/main/frontend/commands.cljs | 8 ++- web/src/main/frontend/components/editor.cljs | 55 +++++++++++++++----- web/src/main/frontend/handler.cljs | 30 +++++------ web/src/main/frontend/util.cljs | 4 ++ 4 files changed, 65 insertions(+), 32 deletions(-) diff --git a/web/src/main/frontend/commands.cljs b/web/src/main/frontend/commands.cljs index d482c1245..d0173ec14 100644 --- a/web/src/main/frontend/commands.cljs +++ b/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)) diff --git a/web/src/main/frontend/components/editor.cljs b/web/src/main/frontend/components/editor.cljs index a6e0f75d0..efc2cd3bf 100644 --- a/web/src/main/frontend/components/editor.cljs +++ b/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}]])) diff --git a/web/src/main/frontend/handler.cljs b/web/src/main/frontend/handler.cljs index 612fe003e..b02ed322d 100644 --- a/web/src/main/frontend/handler.cljs +++ b/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 "") - ;; 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))) diff --git a/web/src/main/frontend/util.cljs b/web/src/main/frontend/util.cljs index bd0e790a6..25116a7ad 100644 --- a/web/src/main/frontend/util.cljs +++ b/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))