Revert "Improve block performance"

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]]))))
 

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)]

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

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 = <Alert ml={4} status='error'><AlertIcon /><AlertTitle>An error occurred while rendering this block.</AlertTitle></Alert>;
+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"

src/js/theme/theme.js

@@ -230,14 +230,6 @@ const components = {
             color: "var(--toast-color)",
           }
         })
-      },
-      subtle: {
-        container: {
-          borderRadius: "md"
-        },
-        title: {
-          fontWeight: "normal"
-        },
       }
     }
   },