Fix block inserter search (#2)

jeffreyvr · Oct 16, 2024 · 3f38426 · 3f38426
1 parent fc59490
commit 3f38426
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 50 deletions.
diff --git a/assets/css/frame.css b/assets/css/frame.css
diff --git a/assets/js/paver.js b/assets/js/paver.js
diff --git a/resources/css/_toolbar.css b/resources/css/_toolbar.css
@@ -7,6 +7,7 @@
   border-radius: 3px;
   display: none;
   z-index: 100;
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
   animation: fadeIn 0.2s ease-in-out;
 

diff --git a/resources/js/paver.js b/resources/js/paver.js
@@ -157,37 +157,13 @@ window.Paver = function (data) {
             this.log('Blocks allowed in this block:', this.allowedBlocks)
         },
 
-        filteredBlocks() {
-            let filteredBlocks = this.blocks
-                .filter(i =>
-                    i.name.toLowerCase().startsWith(this.blockInserter.search.toLowerCase())
-                )
-                .filter(i =>
-                    this.allowedBlocks.length === 0 ||
-                    this.allowedBlocks.includes(i.reference)
-                )
-                .filter(i =>
-                    !i.childOnly || this.allowedBlocks.includes(i.reference)
-                );
-
-            if(filteredBlocks.length > this.blockInserter.limit) {
-                this.blockInserter.showExpandButton = true
-            } else {
-                this.blockInserter.showExpandButton = false
-            }
-
-            if (!this.blockInserter.showAll) {
-                filteredBlocks = filteredBlocks.slice(0, this.blockInserter.limit);
-            }
-
-            return filteredBlocks;
-        },
-
         init() {
             this.waitForFrame()
 
             this.listeners()
 
+            this.determineVisibleInsertableBlocks()
+
             this.watchers()
 
             Shortcuts.revert(() => this.revert())
@@ -310,6 +286,49 @@ window.Paver = function (data) {
 
                 helpers.dispatchToFrame(this.$refs.editor, 'updateEditingBlock', JSON.parse(JSON.stringify(value)))
             })
+
+            this.$watch('blockInserter.search', () => {
+                this.determineVisibleInsertableBlocks()
+            })
+
+            this.$watch('blockInserter.limit', () => {
+                this.determineVisibleInsertableBlocks()
+            })
+
+            this.$watch('blockInserter.showAll', () => {
+                this.determineVisibleInsertableBlocks()
+            })
+
+            this.$watch('allowedBlocks', () => {
+                this.determineVisibleInsertableBlocks()
+            })
+        },
+
+
+        determineVisibleInsertableBlocks() {
+            const searchTerm = this.blockInserter.search.trim().toLowerCase()
+            const allowedBlocks = this.allowedBlocks.length ? this.allowedBlocks : null
+            const blocks = this.$refs.blocksInserter.querySelectorAll('.paver__block-handle')
+
+            let visibleCount = 0
+            let totalVisible = 0
+
+            blocks.forEach(block => {
+                const blockName = block.getAttribute('data-block').trim().toLowerCase()
+                const matchesSearch = !searchTerm || blockName.includes(searchTerm)
+                const isAllowed = !allowedBlocks || allowedBlocks.includes(blockName)
+                const withinLimit = this.blockInserter.showAll || visibleCount < this.blockInserter.limit
+
+                if (matchesSearch && isAllowed) {
+                    totalVisible++
+                    block.style.display = withinLimit ? 'flex' : 'none'
+                    if (withinLimit) visibleCount++
+                } else {
+                    block.style.display = 'none'
+                }
+            })
+
+            this.blockInserter.showExpandButton = totalVisible > this.blockInserter.limit
         },
 
         root() {
@@ -354,7 +373,7 @@ window.Paver = function (data) {
 
             // `allowRootDrop` is a dirty hack as Sortable does not recognize it
             // when an item is first dragged over the frame and then dragged
-            // out of it; it will still add the item on 'dragend' - yuck.
+            // out of it it will still add the item on 'dragend' - yuck.
             this.root().addEventListener("dragenter", () => this.allowRootDrop = true)
             document.querySelector('body').addEventListener("dragenter", () => this.allowRootDrop = false)
 
@@ -428,12 +447,12 @@ window.Paver = function (data) {
         },
 
         frameHeightManager() {
-            const iframeBodyHeight = this.$refs.editor.contentWindow.document.body.scrollHeight;
+            const iframeBodyHeight = this.$refs.editor.contentWindow.document.body.scrollHeight
 
             document.querySelector('iframe').style.height = iframeBodyHeight + 'px'
 
             helpers.listenFromFrame('height', (height) => {
-                this.log('Setting editor height to', height);
+                this.log('Setting editor height to', height)
 
                 this.$refs.editor.style.height = height + 'px'
             })
@@ -514,7 +533,7 @@ window.Paver = function (data) {
         isLoaded() {
             setTimeout(() => {
                 this.loading = false
-            }, 100);
+            }, 100)
         },
 
         async fetchBlock(evt) {

diff --git a/resources/views/editor.php b/resources/views/editor.php
@@ -6,7 +6,7 @@ class="paver__container"
         texts: <?php echo htmlspecialchars(json_encode(paver()->getLocalizations()), ENT_QUOTES, 'UTF-8'); ?>,
         content: '<?php echo htmlspecialchars($content, ENT_QUOTES, 'UTF-8'); ?>',
         api: <?php echo htmlspecialchars(json_encode(paver()->api()), ENT_QUOTES, 'UTF-8'); ?>,
-        blocks: <?php echo htmlspecialchars(paver()->blocksJson()); ?>,
+        blocks: <?php echo htmlspecialchars(paver()->blocks(encode: true)); ?>,
         ...<?php echo htmlspecialchars(json_encode($config)); ?>
     })">
 
@@ -76,12 +76,12 @@ class="paver__editor"
                         Whoops, we don't have any blocks (yet)!
                     </div>
                     <div x-ref="blocksInserter" class="paver__block-grid paver__sortable">
-                        <template x-for="(block, index) in filteredBlocks()" :key="index">
-                            <div class="paver__sortable-item paver__block-handle" :data-block="block.reference">
-                                <span x-html="block.icon"></span>
-                                <span x-text="block.name"></span>
+                        <?php foreach(paver()->blocks() as $block) : ?>
+                            <div class="paver__sortable-item paver__block-handle" data-block="<?php echo $block['reference']; ?>">
+                                <span><?php echo $block['icon']; ?></span>
+                                <span><?php echo $block['name']; ?></span>
                             </div>
-                        </template>
+                        <?php endforeach; ?>
                     </div>
                     <div x-show="blockInserter.showExpandButton">
                         <button type="button" class="paver__expand-btn" x-on:click="blockInserter.showAll = !blockInserter.showAll">

diff --git a/src/Paver.php b/src/Paver.php
@@ -92,23 +92,26 @@ public function api()
         return $this->api;
     }
 
-    public function blocks()
+    public function blocks($encode = false, $withInstance = false): string|array
     {
-        return $this->blocks;
-    }
-
-    public function blocksJson(): string
-    {
-        return json_encode(array_map(function ($block) {
+        $blocks = array_map(function ($block) use($withInstance) {
             $instance = BlockFactory::createById($block);
 
-            return [
+            $data = [
                 'name' => $instance->name,
                 'reference' => $instance::$reference,
                 'icon' => $instance->getIcon(),
                 'childOnly' => $instance->childOnly,
             ];
-        }, array_keys($this->blocks)));
+
+            if($withInstance) {
+                $data['instance'] = $instance;
+            }
+
+            return $data;
+        }, array_keys($this->blocks));
+
+        return $encode ? json_encode($blocks) : $blocks;
     }
 
     public function getBlock($name, $instance = false)
@@ -137,9 +140,8 @@ public function render(array|string|null $content = null, array $config = [])
             $content = json_decode($content, true);
         }
 
-        foreach (paver()->blocks() as $block) {
-            BlockFactory::create($block)
-                ->beforeEditorRender();
+        foreach (paver()->blocks(withInstance: true) as $block) {
+            $block['instance']->beforeEditorRender();
         }
 
         $data = [