3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-12 18:01:39 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎉 Implement sending comments on ctrl+enter (#3749)

Browse source 
This enables sending comments with ctrl+enter / cmd+enter (in addition to the existing clicking on the "Post" button), in the style of most chat apps.

Signed-off-by: Belén Albeza <belen@hey.com>
This commit is contained in:
Belén Albeza 2023-11-02 16:33:09 +01:00 • committed by GitHub
parent ffcec9ec03
commit ac9c5f4606
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 29 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

47
frontend/src/app/main/ui/comments.cljs
View file

@ -29,27 +29,19 @@
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(mf/defc resizing-textarea (mf/defc resizing-textarea
{::mf/wrap-props false {::mf/wrap-props false }
::mf/forward-ref true} [props]
[props ref]
(let [value (d/nilv (unchecked-get props "value") "") (let [value (d/nilv (unchecked-get props "value") "")
on-focus (unchecked-get props "on-focus") on-focus (unchecked-get props "on-focus")
on-blur (unchecked-get props "on-blur") on-blur (unchecked-get props "on-blur")
placeholder (unchecked-get props "placeholder") placeholder (unchecked-get props "placeholder")
on-change (unchecked-get props "on-change") on-change (unchecked-get props "on-change")
on-esc (unchecked-get props "on-esc") on-esc (unchecked-get props "on-esc")
on-ctrl-enter (unchecked-get props "on-ctrl-enter")
autofocus? (unchecked-get props "autofocus") autofocus? (unchecked-get props "autofocus")
select-on-focus? (unchecked-get props "select-on-focus") select-on-focus? (unchecked-get props "select-on-focus")
local-ref (mf/use-ref) local-ref (mf/use-ref)
ref (or ref local-ref)
on-key-down
(mf/use-fn
(fn [event]
(when (and (kbd/esc? event)
(fn? on-esc))
(on-esc event))))
on-change* on-change*
(mf/use-fn (mf/use-fn
@ -58,6 +50,17 @@
(let [content (dom/get-target-val event)] (let [content (dom/get-target-val event)]
(on-change content)))) (on-change content))))
on-key-down
(mf/use-fn
(mf/deps on-esc on-ctrl-enter on-change*)
(fn [event]
(cond
(and (kbd/esc? event) (fn? on-esc)) (on-esc event)
(and (kbd/mod? event) (kbd/enter? event) (fn? on-ctrl-enter))
(do
(on-change* event)
(on-ctrl-enter event)))))
on-focus* on-focus*
(mf/use-fn (mf/use-fn
(mf/deps select-on-focus? on-focus) (mf/deps select-on-focus? on-focus)
@ -74,12 +77,12 @@
(mf/use-layout-effect (mf/use-layout-effect
nil nil
(fn [] (fn []
(let [node (mf/ref-val ref)] (let [node (mf/ref-val local-ref)]
(set! (.-height (.-style node)) "0") (set! (.-height (.-style node)) "0")
(set! (.-height (.-style node)) (str (+ 2 (.-scrollHeight node)) "px"))))) (set! (.-height (.-style node)) (str (+ 2 (.-scrollHeight node)) "px")))))
[:textarea [:textarea
{:ref ref {:ref local-ref
:auto-focus autofocus? :auto-focus autofocus?
:on-key-down on-key-down :on-key-down on-key-down
:on-focus on-focus* :on-focus on-focus*
@ -127,6 +130,7 @@
:on-blur on-blur :on-blur on-blur
:on-focus on-focus :on-focus on-focus
:select-on-focus? false :select-on-focus? false
:on-ctrl-enter on-submit
:on-change on-change}] :on-change on-change}]
(when (or @show-buttons? (seq @content)) (when (or @show-buttons? (seq @content))
[:div {:class (stl/css :buttons-wrapper)} [:div {:class (stl/css :buttons-wrapper)}
@ -149,6 +153,7 @@
:placeholder "Reply" :placeholder "Reply"
:on-blur on-blur :on-blur on-blur
:on-focus on-focus :on-focus on-focus
:on-ctrl-enter on-submit
:on-change on-change}] :on-change on-change}]
(when (or @show-buttons? (seq @content)) (when (or @show-buttons? (seq @content))
[:div.buttons [:div.buttons
@ -188,13 +193,15 @@
on-change on-change
(mf/use-fn (mf/use-fn
(mf/deps draft) (mf/deps draft)
(fn [content] (fn [content]
(st/emit! (dcm/update-draft-thread {:content content})))) (st/emit! (dcm/update-draft-thread {:content content}))))
on-submit on-submit
(mf/use-fn (mf/use-fn
(mf/deps draft) (mf/deps draft)
(partial on-submit draft))] (partial on-submit draft))]
(if new-css-system (if new-css-system
[:* [:*
[:div [:div
@ -213,7 +220,8 @@
:autofocus true :autofocus true
:select-on-focus? false :select-on-focus? false
:on-esc on-esc :on-esc on-esc
:on-change on-change}] :on-change on-change
:on-ctrl-enter on-submit}]
[:div {:class (stl/css :buttons-wrapper)} [:div {:class (stl/css :buttons-wrapper)}
[:input {:on-click on-esc [:input {:on-click on-esc
@ -243,6 +251,7 @@
:value (or content "") :value (or content "")
:autofocus true :autofocus true
:on-esc on-esc :on-esc on-esc
:on-ctrl-enter on-submit
:on-change on-change}] :on-change on-change}]
[:div.buttons [:div.buttons
[:input.btn-primary [:input.btn-primary
@ -278,6 +287,7 @@
:autofocus true :autofocus true
:select-on-focus true :select-on-focus true
:select-on-focus? false :select-on-focus? false
:on-ctrl-enter on-submit*
:on-change on-change}] :on-change on-change}]
[:div {:class (stl/css :buttons-wrapper)} [:div {:class (stl/css :buttons-wrapper)}
[:input {:type "button" [:input {:type "button"
@ -296,6 +306,7 @@
[:& resizing-textarea {:value @content [:& resizing-textarea {:value @content
:autofocus true :autofocus true
:select-on-focus true :select-on-focus true
:on-ctrl-enter on-submit*
:on-change on-change}] :on-change on-change}]
[:div.buttons [:div.buttons
[:input.btn-primary {:type "button" [:input.btn-primary {:type "button"