diff --git a/src/cljs/athens/views/blocks/content.cljs b/src/cljs/athens/views/blocks/content.cljs index a134102a1d..ca6cd3e835 100644 --- a/src/cljs/athens/views/blocks/content.cljs +++ b/src/cljs/athens/views/blocks/content.cljs @@ -266,6 +266,7 @@ :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)]] - [autocomplete-search/inline-search-el block state-hooks last-event] - [autocomplete-slash/slash-menu-el block last-event]])))) + (when editing? + [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 ab117bde16..5a5e34c54a 100644 --- a/src/cljs/athens/views/blocks/editor.cljs +++ b/src/cljs/athens/views/blocks/editor.cljs @@ -7,6 +7,7 @@ ["/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] @@ -171,6 +172,7 @@ 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. @@ -179,19 +181,19 @@ (props->reactions properties))] [:<> - [:div.block-body + [:div.block-body {:ref ref} (when (and children? (or (seq children) (seq properties))) - [:> 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 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))))}])) (when key [:> PropertyName {:name (:node/title key) @@ -209,7 +211,7 @@ [:> Popover {:isOpen @show-emoji-picker? :placement "bottom-end" - :onOpen #(js/console.log "tried to open") + :isLazy true :onClose hide-emoji-picker-fn} [:> PopoverAnchor @@ -231,30 +233,32 @@ :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 reactions-enabled? + (when (and reactions-enabled? in-view?) [:> 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 reactions [:> Reactions {:reactions (clj->js reactions) - :currentUser user-id - :onToggleReaction (partial toggle-reaction [:block/uid uid])}]) + (when (and + in-view? + 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]) - [presence/inline-presence-el uid] + (when in-view? [presence/inline-presence-el uid]) - (when (and (> (count _refs) 0) (not= :block-embed? opts)) + (when (and + in-view? + (> (count _refs) 0) (not= :block-embed? opts)) [block-refs-count-el (count _refs) (fn [e] @@ -265,12 +269,14 @@ ;; 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 45000216e7..cad7eec597 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"}]) - [editor/editor-component + [:f> 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 4abe0bd0e5..c1fe006aee 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, useMergeRefs } from "@chakra-ui/react"; +import { Box, AlertIcon, Alert, AlertTitle, 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,7 +52,6 @@ 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 000d483d3e..faf39a9b62 100644 --- a/src/js/theme/theme.js +++ b/src/js/theme/theme.js @@ -230,6 +230,14 @@ const components = { color: "var(--toast-color)", } }) + }, + subtle: { + container: { + borderRadius: "md" + }, + title: { + fontWeight: "normal" + }, } } },