Revert "Revert "Improve block performance""

src/cljs/athens/components.cljs

@@ -87,7 +87,7 @@
             renderer-k (block-type-dispatcher/block-type->protocol-k block-type ff)
             renderer   (block-type-dispatcher/block-type->protocol renderer-k {})]
         ^{:key renderer-k}
-        [types/transclusion-view renderer blocks/block-el block-uid  {} :embed])
+        [:f> types/transclusion-view renderer blocks/block-el block-uid  {} :embed])
       ;; roam actually hides the brackets around [[embed]]
       [:span "{{" content "}}"])))
 

src/cljs/athens/types/default/view.cljs

@@ -176,7 +176,7 @@
                                                     :pr        "1.3rem"
                                                     "textarea" {:background "transparent"}}}}
            [:<>
-            [block-el
+            [:f> block-el
              (util/recursively-modify-block-for-embed block embed-id)
              {:linked-ref false}
              {:block-embed? true}]

src/cljs/athens/views/pages/block_page.cljs

@@ -154,13 +154,13 @@
            [:> PageBody
             (for [prop (common-db/sort-block-properties properties)]
               ^{:key (:db/id prop)}
-              [blocks/block-el prop])])
+              [:f> blocks/block-el prop])])
 
          ;; Children
          [:> PageBody
           (for [child children]
             (let [{:keys [db/id]} child]
-              ^{:key id} [blocks/block-el child]))]
+              ^{:key id} [:f> blocks/block-el child]))]
 
          ;; Refs
          [:> PageFooter

src/cljs/athens/views/pages/node_page.cljs

@@ -309,7 +309,7 @@
                              (swap! state assoc :block new-B :parents new-P))}
                 [parse-and-render (common-db/breadcrumb-string @db/dsdb uid) uid]]]))]
          [:> Box {:class "block-embed"}
-          [blocks/block-el
+          [:f> blocks/block-el
            (recursively-modify-block-for-embed block embed-id)
            linked-ref-data
            {:block-embed? true}]]]))))
@@ -517,14 +517,14 @@
                       (seq properties))
              (for [prop (common-db/sort-block-properties properties)]
                ^{:key (:db/id prop)}
-               [blocks/block-el prop]))]
+               [:f> blocks/block-el prop]))]
 
           ;; Children
           [:div
            (for [{:block/keys [uid] :as child} children]
              ^{:key uid}
              [perf-mon/hoc-perfmon {:span-name "block-el"}
-              [blocks/block-el child]])]]
+              [:f> blocks/block-el child]])]]
 
          ;; References
          [:> PageFooter

src/js/components/Block/Autocomplete.tsx

@@ -98,10 +98,6 @@ export const Autocomplete = ({ isOpen, onClose, event, children }) => {
     }
   }, [isOpen]);
 
-  if (!isOpen) {
-    return false;
-  }
-
   return (
     <Popover
       isOpen={isOpen}

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 { ContextMenuContext } from "@/App/ContextMenuContext";
 
-const ERROR_MESSAGE = "An error occurred while rendering this block.";
+const ERROR_MESSAGE = <Alert ml={4} status='error'><AlertIcon /><AlertTitle>An error occurred while rendering this block.</AlertTitle></Alert>;
 
 // Don't open the context menu on these elements
 const CONTAINER_CONTEXT_MENU_FILTERED_TAGS = ["A", "BUTTON", "INPUT", "TEXTAREA", "LABEL", "VIDEO", "EMBED", "IFRAME", "IMG"];
@@ -102,6 +102,9 @@ const _Container = React.forwardRef(({ children, isDragging, isHidden, isSelecte
           minHeight: '2em',
           position: "relative",
         },
+        "> .block-body > .block-content": {
+          gridArea: "content",
+        },
         "&:hover > .block-toggle, &:focus-within > .block-toggle": { opacity: "1" },
         "button.block-edit-toggle": {
           position: "absolute",

src/js/theme/theme.js

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