block builde: add prview

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')
         ;
     }
 }

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(),
         ];
     }
 }

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;

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')
     },