From faf4b27ee121dbb796382d0776c932489b48d3b2 Mon Sep 17 00:00:00 2001 From: Filipe Silva Date: Tue, 9 Aug 2022 10:46:38 +0100 Subject: [PATCH] Revert "Improve block performance" --- src/cljs/athens/views/blocks/content.cljs | 5 +- src/cljs/athens/views/blocks/editor.cljs | 46 ++++++++----------- .../athens/views/blocks/types/default.cljs | 2 +- src/js/components/Block/Container.tsx | 5 +- src/js/theme/theme.js | 8 ---- 5 files changed, 26 insertions(+), 40 deletions(-) diff --git a/src/cljs/athens/views/blocks/content.cljs b/src/cljs/athens/views/blocks/content.cljs index ca6cd3e835..a134102a1d 100644 --- a/src/cljs/athens/views/blocks/content.cljs +++ b/src/cljs/athens/views/blocks/content.cljs @@ -266,7 +266,6 @@ :on-mouse-enter (fn [e] (textarea-mouse-enter e uid)) :on-mouse-down (fn [e] (textarea-mouse-down e uid))}]) [parse-and-render @read-value (or original-uid uid)]] - (when editing? - [autocomplete-search/inline-search-el block state-hooks last-event] - [autocomplete-slash/slash-menu-el block last-event])])))) + [autocomplete-search/inline-search-el block state-hooks last-event] + [autocomplete-slash/slash-menu-el block last-event]])))) diff --git a/src/cljs/athens/views/blocks/editor.cljs b/src/cljs/athens/views/blocks/editor.cljs index 5a5e34c54a..ab117bde16 100644 --- a/src/cljs/athens/views/blocks/editor.cljs +++ b/src/cljs/athens/views/blocks/editor.cljs @@ -7,7 +7,6 @@ ["/components/EmojiPicker/EmojiPicker" :refer [EmojiPickerPopoverContent]] ["/components/References/InlineReferences" :refer [ReferenceGroup ReferenceBlock]] ["@chakra-ui/react" :refer [VStack PopoverAnchor Popover Button Breadcrumb BreadcrumbItem BreadcrumbLink HStack]] - ["react-intersection-observer" :refer [useInView]] [athens.common-db :as common-db] [athens.db :as db] [athens.events.inline-refs :as inline-refs.events] @@ -172,7 +171,6 @@ key properties _refs]} (reactive/get-reactive-block-document [:block/uid uid]) - [ref in-view?] (useInView {:delay 250}) reactions-enabled? (:reactions @feature-flags) user-id (or (:username @(rf/subscribe [:presence/current-user])) ;; We use empty string for when there is no user information, like in PKM. @@ -181,19 +179,19 @@ (props->reactions properties))] [:<> - [:div.block-body {:ref ref} + [:div.block-body (when (and children? (or (seq children) (seq properties))) - (when in-view? [:> Toggle {:isOpen (if (or (and (true? linked-ref) @linked-ref-open?) - (and (false? linked-ref) open)) - true - false) - :onClick (fn [e] - (.. e stopPropagation) - (if (true? linked-ref) - (rf/dispatch [::linked-ref.events/toggle-open! uid]) - (toggle uid (not open))))}])) + [:> Toggle {:isOpen (if (or (and (true? linked-ref) @linked-ref-open?) + (and (false? linked-ref) open)) + true + false) + :onClick (fn [e] + (.. e stopPropagation) + (if (true? linked-ref) + (rf/dispatch [::linked-ref.events/toggle-open! uid]) + (toggle uid (not open))))}]) (when key [:> PropertyName {:name (:node/title key) @@ -211,7 +209,7 @@ [:> Popover {:isOpen @show-emoji-picker? :placement "bottom-end" - :isLazy true + :onOpen #(js/console.log "tried to open") :onClose hide-emoji-picker-fn} [:> PopoverAnchor @@ -233,32 +231,30 @@ :on-drag-start (fn [e] (bullet-drag-start e uid)) :on-drag-end (fn [e] (bullet-drag-end e uid)) :unreadNotification (actions/unread-notification? properties)}]] - (when (and reactions-enabled? in-view?) + (when reactions-enabled? [:> EmojiPickerPopoverContent {:onClose hide-emoji-picker-fn :onEmojiSelected (fn [e] (toggle-reaction [:block/uid uid] (.. e -detail -unicode) user-id))}])] + + + [content/block-content-el block-o state-hooks] - (when (and - in-view? - reactions) [:> Reactions {:reactions (clj->js reactions) - :currentUser user-id - :onToggleReaction (partial toggle-reaction [:block/uid uid])}]) + (when reactions [:> Reactions {:reactions (clj->js reactions) + :currentUser user-id + :onToggleReaction (partial toggle-reaction [:block/uid uid])}]) ;; Show comments when the toggle is on (when (and @show-comments? - in-view? open (or @show-textarea (comments/get-comment-thread-uid @db/dsdb uid))) [inline-comments/inline-comments (comments/get-comments-in-thread @db/dsdb (comments/get-comment-thread-uid @db/dsdb uid)) uid false]) - (when in-view? [presence/inline-presence-el uid]) + [presence/inline-presence-el uid] - (when (and - in-view? - (> (count _refs) 0) (not= :block-embed? opts)) + (when (and (> (count _refs) 0) (not= :block-embed? opts)) [block-refs-count-el (count _refs) (fn [e] @@ -269,14 +265,12 @@ ;; Inline refs (when (and (> (count _refs) 0) - in-view? (not= :block-embed? opts) @inline-refs-open?) [inline-linked-refs-el block-el uid]) ;; Properties (when (and @enable-properties? - in-view? (or (and (true? linked-ref) @linked-ref-open?) (and (false? linked-ref) open))) (for [prop (common-db/sort-block-properties properties)] diff --git a/src/cljs/athens/views/blocks/types/default.cljs b/src/cljs/athens/views/blocks/types/default.cljs index cad7eec597..45000216e7 100644 --- a/src/cljs/athens/views/blocks/types/default.cljs +++ b/src/cljs/athens/views/blocks/types/default.cljs @@ -371,7 +371,7 @@ (when (= @drag-target :before) [drop-area-indicator/drop-area-indicator {:placement "above"}]) - [:f> editor/editor-component + [editor/editor-component block-el block-o true diff --git a/src/js/components/Block/Container.tsx b/src/js/components/Block/Container.tsx index c1fe006aee..4abe0bd0e5 100644 --- a/src/js/components/Block/Container.tsx +++ b/src/js/components/Block/Container.tsx @@ -1,9 +1,9 @@ import React from 'react'; -import { Box, AlertIcon, Alert, AlertTitle, useMergeRefs } from "@chakra-ui/react"; +import { Box, useMergeRefs } from "@chakra-ui/react"; import { withErrorBoundary } from "react-error-boundary"; import { useContextMenu } from '@/utils/useContextMenu'; -const ERROR_MESSAGE = An error occurred while rendering this block.; +const ERROR_MESSAGE = "An error occurred while rendering this block."; // Don't open the context menu on these elements const CONTAINER_CONTEXT_MENU_FILTERED_TAGS = ["A", "BUTTON", "INPUT", "TEXTAREA", "LABEL", "VIDEO", "EMBED", "IFRAME", "IMG"]; @@ -52,6 +52,7 @@ const _Container = React.forwardRef(({ children, isDragging, isHidden, isSelecte isHoveredNotChild && "is-hovered-not-child", hasPresence ? "is-presence" : "", ].filter(Boolean).join(' ')} + display="flex" lineHeight="2em" position="relative" borderRadius="0.125rem" diff --git a/src/js/theme/theme.js b/src/js/theme/theme.js index faf39a9b62..000d483d3e 100644 --- a/src/js/theme/theme.js +++ b/src/js/theme/theme.js @@ -230,14 +230,6 @@ const components = { color: "var(--toast-color)", } }) - }, - subtle: { - container: { - borderRadius: "md" - }, - title: { - fontWeight: "normal" - }, } } },