From fea5319dc58ceadc01ef1bf597474be3c6d933bc Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Fri, 24 May 2024 15:43:15 +0200
Subject: [PATCH] block builde: add prview

---
 .../BuilderBlock/Block/Editor/TextareaBlock.php    |  1 +
 src/core/BuilderBlock/BuilderBlock.php             | 14 ++++++++++++++
 src/core/Resources/assets/css/admin.scss           |  7 +++++++
 .../components/builder-block/BuilderBlockItem.vue  | 10 ++++++++++
 4 files changed, 32 insertions(+)

diff --git a/src/core/BuilderBlock/Block/Editor/TextareaBlock.php b/src/core/BuilderBlock/Block/Editor/TextareaBlock.php
index b216eb5..bec2db6 100644
--- a/src/core/BuilderBlock/Block/Editor/TextareaBlock.php
+++ b/src/core/BuilderBlock/Block/Editor/TextareaBlock.php
@@ -21,6 +21,7 @@ class TextareaBlock extends EditorBlock
             ->addSetting(name: 'nl2br', label: 'Insert line breaks', type: 'checkbox', default: true)
             ->addSetting(name: 'allowHtml', label: 'Allow HTML', type: 'checkbox', default: false)
             ->addSetting(name: 'value', type: 'textarea')
+            ->setPreview('value')
         ;
     }
 }
diff --git a/src/core/BuilderBlock/BuilderBlock.php b/src/core/BuilderBlock/BuilderBlock.php
index 069f1da..e5660be 100644
--- a/src/core/BuilderBlock/BuilderBlock.php
+++ b/src/core/BuilderBlock/BuilderBlock.php
@@ -12,6 +12,7 @@ abstract class BuilderBlock
     protected array $widgets = [];
     protected array $vars = [];
     protected string $template = '';
+    protected ?string $preview = null;
     protected bool $isContainer = false;
     protected ?string $icon = null;
     protected int $order = 1;
@@ -171,6 +172,18 @@ abstract class BuilderBlock
         return $this->order;
     }
 
+    public function setPreview(?string $preview): self
+    {
+        $this->preview = $preview;
+
+        return $this;
+    }
+
+    public function getPreview(): ?string
+    {
+        return $this->preview;
+    }
+
     public function buildVars(array $data, array $context)
     {
     }
@@ -190,6 +203,7 @@ abstract class BuilderBlock
             'settings' => $this->getSettings(),
             'class' => $this->getClass(),
             'icon' => $this->getIcon(),
+            'preview' => $this->getPreview(),
         ];
     }
 }
diff --git a/src/core/Resources/assets/css/admin.scss b/src/core/Resources/assets/css/admin.scss
index 40964bd..b6044da 100644
--- a/src/core/Resources/assets/css/admin.scss
+++ b/src/core/Resources/assets/css/admin.scss
@@ -846,6 +846,13 @@ label.required::after {
     }
   }
 
+  .block-preview {
+    white-space: nowrap;
+    max-width: 30%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
   dialog {
     border: 0;
     padding: 0;
diff --git a/src/core/Resources/assets/js/components/builder-block/BuilderBlockItem.vue b/src/core/Resources/assets/js/components/builder-block/BuilderBlockItem.vue
index 6de91fe..59e30bc 100644
--- a/src/core/Resources/assets/js/components/builder-block/BuilderBlockItem.vue
+++ b/src/core/Resources/assets/js/components/builder-block/BuilderBlockItem.vue
@@ -31,6 +31,13 @@
         </button>
       </div>
 
+      <div
+        v-if="widget.preview && typeof item.settings[widget.preview] == 'string'"
+        class="block-preview"
+      >
+        {{ truncate(item.settings[widget.preview]) }}
+      </div>
+
       <div>
         <span class="block-id">
           {{ item.id }}
@@ -144,6 +151,9 @@ export default {
       this.openedBlocks[this.item.id] = !this.openedBlocks[this.item.id]
       this.showSettings = !this.showSettings
     },
+    truncate(value) {
+      return value.replace(/(<([^>]+)>)/ig, '')
+    },
     removeMe() {
       this.$emit('remove-item')
     },