From 9ad2ce417bf2ce6ace4bf6589babb7d41c2e104e Mon Sep 17 00:00:00 2001 From: charlie Date: Sat, 14 May 2022 16:15:24 +0800 Subject: [PATCH] fix(ui): wrong position of page preview tip #5268 --- src/main/frontend/components/block.cljs | 79 ++++++++++++++++--------- 1 file changed, 52 insertions(+), 27 deletions(-) diff --git a/src/main/frontend/components/block.cljs b/src/main/frontend/components/block.cljs index 26de8aac57..c914d85ba7 100644 --- a/src/main/frontend/components/block.cljs +++ b/src/main/frontend/components/block.cljs @@ -457,41 +457,66 @@ (rum/defc page-preview-trigger [{:keys [children sidebar? tippy-position tippy-distance fixed-position? open? manual?] :as config} page-name] - (let [page-name (util/page-name-sanity-lc page-name) + (let [*tippy-ref (rum/create-ref) + page-name (util/page-name-sanity-lc page-name) redirect-page-name (or (model/get-redirect-page-name page-name (:block/alias? config)) page-name) page-original-name (model/get-page-original-name redirect-page-name) - html-template (fn [] - (when redirect-page-name - [:div.tippy-wrapper.overflow-y-auto.p-4 - {:style {:width 600 - :text-align "left" - :font-weight 500 - :max-height 600 - :padding-bottom 64}} - (if (and (string? page-original-name) (string/includes? page-original-name "/")) - [:div.my-2 - (->> - (for [page (string/split page-original-name #"/")] - (when (and (string? page) page) - (page-reference false page {} nil))) - (interpose [:span.mx-2.opacity-30 "/"]))] - [:h2.font-bold.text-lg (if (= page-name redirect-page-name) - page-original-name - [:span - [:span.text-sm.mr-2 "Alias:"] - page-original-name])]) - (let [page (db/entity [:block/name (util/page-name-sanity-lc redirect-page-name)])] - (editor-handler/insert-first-page-block-if-not-exists! redirect-page-name {:redirect? false}) - (when-let [f (state/get-page-blocks-cp)] - (f (state/get-current-repo) page {:sidebar? sidebar? :preview? true})))]))] + html-template (rum/defc _ [] + (let [*el-popup (rum/use-ref nil)] + + (rum/use-effect! + (fn [] + (let [el-popup (rum/deref *el-popup) + cb (fn [^js e] + (when-not (:editor/editing? @state/state) + ;; Esc + (and (= e.which 27) + (when-let [tp (rum/deref *tippy-ref)] + (.hideTooltip tp)))))] + + (js/setTimeout #(.focus el-popup)) + (.addEventListener el-popup "keyup" cb) + #(.removeEventListener el-popup "keyup" cb))) + []) + + (when redirect-page-name + [:div.tippy-wrapper.overflow-y-auto.p-4.outline-none + {:ref *el-popup + :tab-index -1 + :style {:width 600 + :text-align "left" + :font-weight 500 + :max-height 600 + :padding-bottom 64}} + (if (and (string? page-original-name) (string/includes? page-original-name "/")) + [:div.my-2 + (->> + (for [page (string/split page-original-name #"/")] + (when (and (string? page) page) + (page-reference false page {} nil))) + (interpose [:span.mx-2.opacity-30 "/"]))] + [:h2.font-bold.text-lg (if (= page-name redirect-page-name) + page-original-name + [:span + [:span.text-sm.mr-2 "Alias:"] + page-original-name])]) + (let [page (db/entity [:block/name (util/page-name-sanity-lc redirect-page-name)])] + (editor-handler/insert-first-page-block-if-not-exists! redirect-page-name {:redirect? false}) + (when-let [f (state/get-page-blocks-cp)] + (f (state/get-current-repo) page {:sidebar? sidebar? :preview? true})))])))] + (if (or (not manual?) open?) - (ui/tippy {:html html-template + (ui/tippy {:ref *tippy-ref + :html html-template :interactive true :delay [1000, 100] :fixed-position? fixed-position? :position (or tippy-position "top") - :distance (or tippy-distance 10)} + :distance (or tippy-distance 10) + :popperOptions {:modifiers {:preventOverflow + {:enabled true + :boundariesElement "viewport"}}}} children) children)))