From 66a24e99d37444e20f2a97ce32945fe1ae033ca8 Mon Sep 17 00:00:00 2001 From: charlie Date: Mon, 30 Nov 2020 22:05:52 +0800 Subject: [PATCH] [refactor] improve some input cases --- src/main/frontend/components/block.cljs | 4 +- src/main/frontend/components/editor.cljs | 304 ++++++++++++----------- src/main/frontend/ui.cljs | 4 +- src/main/frontend/util.cljs | 8 +- 4 files changed, 165 insertions(+), 155 deletions(-) diff --git a/src/main/frontend/components/block.cljs b/src/main/frontend/components/block.cljs index b25178952..293777602 100644 --- a/src/main/frontend/components/block.cljs +++ b/src/main/frontend/components/block.cljs @@ -613,10 +613,10 @@ nil)] (when-not (string/blank? youtube-id) [:iframe - {:allowfullscreen "allowfullscreen" + {:allow-full-screen "allowfullscreen" :allow "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" - :frameborder "0" + :frame-border "0" :src (str "https://www.youtube.com/embed/" youtube-id) :height "315" :width "560"}]))) diff --git a/src/main/frontend/components/editor.cljs b/src/main/frontend/components/editor.cljs index 495e8b2a2..88cbba38f 100644 --- a/src/main/frontend/components/editor.cljs +++ b/src/main/frontend/components/editor.cljs @@ -30,6 +30,8 @@ [frontend.text :as text] ["/frontend/utils" :as utils])) +(def *warn-on-infer* false) + (rum/defc commands < rum/reactive [id format] (when (and (util/react *show-commands) @@ -353,6 +355,9 @@ false *slash-caret-pos)))]) +(def evt-passthrough! #(if (instance? goog.events.Event %) (set! (. % -pt) true))) +(def evt-passthrough? #(if (instance? goog.events.Event %) (. % -pt))) + (rum/defcs box < rum/reactive (mixins/event-mixin (fn [state] @@ -397,6 +402,7 @@ insert? (not (editor-handler/in-auto-complete? input))) (util/stop e) + (evt-passthrough! e) (profile "Insert block" (editor-handler/insert-new-block! state)))))))))) @@ -406,6 +412,7 @@ (not (gobj/get e "ctrlKey")) (not (gobj/get e "metaKey")) (not (editor-handler/in-auto-complete? input))) + (evt-passthrough! e) (editor-handler/on-up-down state e true))) ;; down 40 (fn [state e] @@ -413,162 +420,165 @@ (not (gobj/get e "ctrlKey")) (not (gobj/get e "metaKey")) (not (editor-handler/in-auto-complete? input))) + (evt-passthrough! e) (editor-handler/on-up-down state e false))) ;; backspace - 8 (fn [state e] - (let [node (gdom/getElement input-id) - current-pos (:pos (util/get-caret-pos node)) - value (gobj/get node "value") - deleted (and (> current-pos 0) - (util/nth-safe value (dec current-pos))) - selected-start (gobj/get node "selectionStart") - selected-end (gobj/get node "selectionEnd") - block-id (:block-id (first (:rum/args state))) - page (state/get-current-page)] - (cond - (not= selected-start selected-end) - nil - - (and (zero? current-pos) - ;; not the top block in a block page - (not (and page - (util/uuid-string? page) - (= (medley/uuid page) block-id)))) - - (editor-handler/delete-block! state repo e) - - (and (> current-pos 1) - (= (util/nth-safe value (dec current-pos)) commands/slash)) - (do - (reset! *slash-caret-pos nil) - (reset! *show-commands false)) - - (and (> current-pos 1) - (= (util/nth-safe value (dec current-pos)) commands/angle-bracket)) - (do - (reset! *angle-bracket-caret-pos nil) - (reset! *show-block-commands false)) - - ;; pair - (and - deleted - (contains? - (set (keys editor-handler/delete-map)) - deleted) - (>= (count value) (inc current-pos)) - (= (util/nth-safe value current-pos) - (get editor-handler/delete-map deleted))) - - (do - (util/stop e) - (commands/delete-pair! id) - (cond - (and (= deleted "[") (state/get-editor-show-page-search?)) - (state/set-editor-show-page-search! false) - - (and (= deleted "(") (state/get-editor-show-block-search?)) - (state/set-editor-show-block-search! false) - - :else - nil)) - - ;; deleting hashtag - (and (= deleted "#") (state/get-editor-show-page-search-hashtag?)) - (state/set-editor-show-page-search-hashtag! false) - - :else - nil))) - ;; tab - 9 (fn [state e] - (let [input-id (state/get-edit-input-id) - input (and input-id (gdom/getElement id)) - pos (and input (:pos (util/get-caret-pos input)))] - (when-not (state/get-editor-show-input) - (util/stop e) - (let [direction (if (gobj/get e "shiftKey") ; shift+tab move to left - :left - :right)] - (p/let [_ (editor-handler/adjust-block-level! state direction)] - (and input pos (js/setTimeout #(when-let [input (gdom/getElement input-id)] - (util/move-cursor-to input pos)) - 0)))))))} - (fn [e key-code] - (let [key (gobj/get e "key") - value (gobj/get input "value") - pos (:pos (util/get-caret-pos input))] - (cond - (or - (and (= key "#") - (and - (> pos 0) - (= "#" (util/nth-safe value (dec pos))))) - (and (= key " ") - (state/get-editor-show-page-search-hashtag?))) - (state/set-editor-show-page-search-hashtag! false) - - (and - (not= key-code 8) ;; backspace - (or - (editor-handler/surround-by? input "#" " ") - (editor-handler/surround-by? input "#" :end) - (= key "#"))) - (do - (commands/handle-step [:editor/search-page-hashtag]) - (state/set-last-pos! (:pos (util/get-caret-pos input))) - (reset! commands/*slash-caret-pos (util/get-caret-pos input))) - - (and - (= key " ") - (state/get-editor-show-page-search-hashtag?)) - (state/set-editor-show-page-search-hashtag! false) - - (and - (contains? (set/difference (set (keys editor-handler/reversed-autopair-map)) - #{"`"}) - key) - (= (editor-handler/get-current-input-char input) key)) - (do - (util/stop e) - (util/cursor-move-forward input 1)) - - (contains? (set (keys editor-handler/autopair-map)) key) - (do - (util/stop e) - (editor-handler/autopair input-id key format nil) + 8 (fn [state e] + (let [node (gdom/getElement input-id) + current-pos (:pos (util/get-caret-pos node)) + value (gobj/get node "value") + deleted (and (> current-pos 0) + (util/nth-safe value (dec current-pos))) + selected-start (gobj/get node "selectionStart") + selected-end (gobj/get node "selectionEnd") + block-id (:block-id (first (:rum/args state))) + page (state/get-current-page)] (cond - (editor-handler/surround-by? input "[[" "]]") + (not= selected-start selected-end) + nil + + (and (zero? current-pos) + ;; not the top block in a block page + (not (and page + (util/uuid-string? page) + (= (medley/uuid page) block-id)))) (do - (commands/handle-step [:editor/search-page]) - (reset! commands/*slash-caret-pos (util/get-caret-pos input))) - (editor-handler/surround-by? input "((" "))") + (evt-passthrough! e) + (editor-handler/delete-block! state repo e)) + + (and (> current-pos 1) + (= (util/nth-safe value (dec current-pos)) commands/slash)) (do - (commands/handle-step [:editor/search-block :reference]) - (reset! commands/*slash-caret-pos (util/get-caret-pos input))) + (reset! *slash-caret-pos nil) + (reset! *show-commands false)) + + (and (> current-pos 1) + (= (util/nth-safe value (dec current-pos)) commands/angle-bracket)) + (do + (reset! *angle-bracket-caret-pos nil) + (reset! *show-block-commands false)) + + ;; pair + (and + deleted + (contains? + (set (keys editor-handler/delete-map)) + deleted) + (>= (count value) (inc current-pos)) + (= (util/nth-safe value current-pos) + (get editor-handler/delete-map deleted))) + + (do + (util/stop e) + (commands/delete-pair! id) + (cond + (and (= deleted "[") (state/get-editor-show-page-search?)) + (state/set-editor-show-page-search! false) + + (and (= deleted "(") (state/get-editor-show-block-search?)) + (state/set-editor-show-block-search! false) + + :else + nil)) + + ;; deleting hashtag + (and (= deleted "#") (state/get-editor-show-page-search-hashtag?)) + (state/set-editor-show-page-search-hashtag! false) + :else - nil)) + nil))) + ;; tab + 9 (fn [state e] + (let [input-id (state/get-edit-input-id) + input (and input-id (gdom/getElement id)) + pos (and input (:pos (util/get-caret-pos input)))] + (when-not (state/get-editor-show-input) + (util/stop e) + (let [direction (if (gobj/get e "shiftKey") ; shift+tab move to left + :left + :right)] + (p/let [_ (editor-handler/adjust-block-level! state direction)] + (and input pos (js/setTimeout #(when-let [input (gdom/getElement input-id)] + (util/move-cursor-to input pos)) + 0)))))))} + (fn [e key-code] + (when-not (evt-passthrough? e) + (let [key (gobj/get e "key") + value (gobj/get input "value") + pos (:pos (util/get-caret-pos input))] + (cond + (or + (and (= key "#") + (and + (> pos 0) + (= "#" (util/nth-safe value (dec pos))))) + (and (= key " ") + (state/get-editor-show-page-search-hashtag?))) + (state/set-editor-show-page-search-hashtag! false) - (let [sym "$"] - (and (= key sym) - (>= (count value) 1) - (> pos 0) - (= (nth value (dec pos)) sym) - (if (> (count value) pos) - (not= (nth value pos) sym) - true))) - (commands/simple-insert! input-id "$$" {:backward-pos 2}) + (and + (not= key-code 8) ;; backspace + (or + (editor-handler/surround-by? input "#" " ") + (editor-handler/surround-by? input "#" :end) + (= key "#"))) + (do + (commands/handle-step [:editor/search-page-hashtag]) + (state/set-last-pos! (:pos (util/get-caret-pos input))) + (reset! commands/*slash-caret-pos (util/get-caret-pos input))) - (let [sym "^"] - (and (= key sym) - (>= (count value) 1) - (> pos 0) - (= (nth value (dec pos)) sym) - (if (> (count value) pos) - (not= (nth value pos) sym) - true))) - (commands/simple-insert! input-id "^^" {:backward-pos 2}) + (and + (= key " ") + (state/get-editor-show-page-search-hashtag?)) + (state/set-editor-show-page-search-hashtag! false) - :else - nil)))) + (and + (contains? (set/difference (set (keys editor-handler/reversed-autopair-map)) + #{"`"}) + key) + (= (editor-handler/get-current-input-char input) key)) + (do + (util/stop e) + (util/cursor-move-forward input 1)) + + (contains? (set (keys editor-handler/autopair-map)) key) + (do + (util/stop e) + (editor-handler/autopair input-id key format nil) + (cond + (editor-handler/surround-by? input "[[" "]]") + (do + (commands/handle-step [:editor/search-page]) + (reset! commands/*slash-caret-pos (util/get-caret-pos input))) + (editor-handler/surround-by? input "((" "))") + (do + (commands/handle-step [:editor/search-block :reference]) + (reset! commands/*slash-caret-pos (util/get-caret-pos input))) + :else + nil)) + + (let [sym "$"] + (and (= key sym) + (>= (count value) 1) + (> pos 0) + (= (nth value (dec pos)) sym) + (if (> (count value) pos) + (not= (nth value pos) sym) + true))) + (commands/simple-insert! input-id "$$" {:backward-pos 2}) + + (let [sym "^"] + (and (= key sym) + (>= (count value) 1) + (> pos 0) + (= (nth value (dec pos)) sym) + (if (> (count value) pos) + (not= (nth value pos) sym) + true))) + (commands/simple-insert! input-id "^^" {:backward-pos 2}) + + :else + nil))))) (mixins/on-key-up state {} diff --git a/src/main/frontend/ui.cljs b/src/main/frontend/ui.cljs index 4f5ad479f..caf14af61 100644 --- a/src/main/frontend/ui.cljs +++ b/src/main/frontend/ui.cljs @@ -23,10 +23,10 @@ set-composition? #(reset! composition? %) on-composition (fn [e] (case e.type - "compositionend" (do (set-composition? false)) + "compositionend" (do (set-composition? false) (on-change e)) (set-composition? true))) props (assoc -props - :on-change (fn [e] (when (not @composition?) + :on-change (fn [e] (when-not @composition? (on-change e))) :on-composition-start on-composition :on-composition-update on-composition diff --git a/src/main/frontend/util.cljs b/src/main/frontend/util.cljs index abbfc471f..d068af299 100644 --- a/src/main/frontend/util.cljs +++ b/src/main/frontend/util.cljs @@ -253,7 +253,7 @@ (try (bean/->clj ((gobj/get caret-pos "position") input)) (catch js/Error e - nil))) + (js/console.error e)))) (defn minimize-html [s] @@ -434,12 +434,12 @@ (defn textarea-cursor-first-row? [input line-height] - (< (:top (get-caret-pos input)) line-height)) + (<= (:top (get-caret-pos input)) line-height)) (defn textarea-cursor-end-row? [input line-height] - (> (+ (:top (get-caret-pos input)) line-height) - (get-textarea-height input))) + (>= (+ (:top (get-caret-pos input)) line-height) + (get-textarea-height input))) (defn safe-split-first [pattern s] (if-let [first-index (string/index-of s pattern)]