From 7fe1acd47da082451d7c9f47d27c51a598c2f7a8 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Sat, 11 May 2024 17:45:57 +0200
Subject: [PATCH 1/6] add base of the block builder

---
 src/core/Entity/Site/Page/BuilderBlock.php    |  20 +++
 src/core/Entity/Site/Page/ChoiceBlock.php     |  11 +-
 src/core/Entity/Site/Page/JsonBlock.php       |  19 +++
 src/core/Form/Site/Page/BuilderBlockType.php  |  32 ++++
 src/core/Form/Type/BuilderType.php            |  40 +++++
 src/core/Resources/assets/css/admin.scss      |  48 ++++++
 src/core/Resources/assets/js/admin.js         |   1 +
 .../components/builder-block/BuilderBlock.vue | 145 ++++++++++++++++++
 .../builder-block/BuilderBlockCreate.vue      |  64 ++++++++
 .../builder-block/BuilderBlockForm.vue        |  29 ++++
 .../builder-block/BuilderBlockItem.vue        | 108 +++++++++++++
 .../assets/js/modules/builder-block.js        |  28 ++++
 .../Resources/assets/js/modules/tinymce.js    |   9 ++
 .../form/bootstrap_4_form_theme.html.twig     |   9 ++
 14 files changed, 553 insertions(+), 10 deletions(-)
 create mode 100644 src/core/Entity/Site/Page/BuilderBlock.php
 create mode 100644 src/core/Entity/Site/Page/JsonBlock.php
 create mode 100644 src/core/Form/Site/Page/BuilderBlockType.php
 create mode 100644 src/core/Form/Type/BuilderType.php
 create mode 100644 src/core/Resources/assets/js/components/builder-block/BuilderBlock.vue
 create mode 100644 src/core/Resources/assets/js/components/builder-block/BuilderBlockCreate.vue
 create mode 100644 src/core/Resources/assets/js/components/builder-block/BuilderBlockForm.vue
 create mode 100644 src/core/Resources/assets/js/components/builder-block/BuilderBlockItem.vue
 create mode 100644 src/core/Resources/assets/js/modules/builder-block.js

diff --git a/src/core/Entity/Site/Page/BuilderBlock.php b/src/core/Entity/Site/Page/BuilderBlock.php
new file mode 100644
index 0000000..7f63bb8
--- /dev/null
+++ b/src/core/Entity/Site/Page/BuilderBlock.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Core\Entity\Site\Page;
+
+use Doctrine\ORM\Mapping as ORM;
+
+#[ORM\Entity]
+class BuilderBlock extends JsonBlock
+{
+    public function getValue()
+    {
+        $value = parent::getValue();
+
+        if (is_string($value)) {
+            return json_decode($value);
+        }
+
+        return [];
+    }
+}
diff --git a/src/core/Entity/Site/Page/ChoiceBlock.php b/src/core/Entity/Site/Page/ChoiceBlock.php
index a0c65b4..47deefa 100644
--- a/src/core/Entity/Site/Page/ChoiceBlock.php
+++ b/src/core/Entity/Site/Page/ChoiceBlock.php
@@ -5,15 +5,6 @@ namespace App\Core\Entity\Site\Page;
 use Doctrine\ORM\Mapping as ORM;
 
 #[ORM\Entity]
-class ChoiceBlock extends Block
+class ChoiceBlock extends JsonBlock
 {
-    public function getValue()
-    {
-        return json_decode(parent::getValue(), true);
-    }
-
-    public function setValue($value): self
-    {
-        return parent::setValue(json_encode($value));
-    }
 }
diff --git a/src/core/Entity/Site/Page/JsonBlock.php b/src/core/Entity/Site/Page/JsonBlock.php
new file mode 100644
index 0000000..47101d5
--- /dev/null
+++ b/src/core/Entity/Site/Page/JsonBlock.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Core\Entity\Site\Page;
+
+use Doctrine\ORM\Mapping as ORM;
+
+#[ORM\Entity]
+class JsonBlock extends Block
+{
+    public function getValue()
+    {
+        return json_decode(parent::getValue(), true);
+    }
+
+    public function setValue($value): self
+    {
+        return parent::setValue(json_encode($value));
+    }
+}
diff --git a/src/core/Form/Site/Page/BuilderBlockType.php b/src/core/Form/Site/Page/BuilderBlockType.php
new file mode 100644
index 0000000..e3c5cc3
--- /dev/null
+++ b/src/core/Form/Site/Page/BuilderBlockType.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Core\Form\Site\Page;
+
+use App\Core\Entity\Site\Page\BuilderBlock;
+use App\Core\Form\Type\BuilderType;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+class BuilderBlockType extends AbstractType
+{
+    public function buildForm(FormBuilderInterface $builder, array $options)
+    {
+        $builder->add(
+            'value',
+            BuilderType::class,
+            array_merge([
+                'required' => false,
+                'label' => false,
+            ], $options['options']),
+        );
+    }
+
+    public function configureOptions(OptionsResolver $resolver)
+    {
+        $resolver->setDefaults([
+            'data_class' => BuilderBlock::class,
+            'options' => [],
+        ]);
+    }
+}
diff --git a/src/core/Form/Type/BuilderType.php b/src/core/Form/Type/BuilderType.php
new file mode 100644
index 0000000..f817b26
--- /dev/null
+++ b/src/core/Form/Type/BuilderType.php
@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Core\Form\Type;
+
+use Symfony\Component\Form\Extension\Core\Type\CollectionType as BaseCollectionType;
+use Symfony\Component\Form\FormInterface;
+use Symfony\Component\Form\FormView;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\CollectionType;
+
+class BuilderType extends AbstractType
+{
+    /**
+     * {@inheritdoc}
+     */
+    public function buildView(FormView $view, FormInterface $form, array $options)
+    {
+        parent::buildView($view, $form, $options);
+
+        $view->vars = array_replace($view->vars, [
+        ]);
+    }
+
+    public function configureOptions(OptionsResolver $resolver)
+    {
+        parent::configureOptions($resolver);
+
+        $resolver->setDefaults([
+            'allow_add' => true,
+            'allow_remove' => true,
+            'compound' => false,
+        ]);
+    }
+
+    public function getBlockPrefix()
+    {
+        return 'builder';
+    }
+}
diff --git a/src/core/Resources/assets/css/admin.scss b/src/core/Resources/assets/css/admin.scss
index d3b2414..dd958bc 100644
--- a/src/core/Resources/assets/css/admin.scss
+++ b/src/core/Resources/assets/css/admin.scss
@@ -759,3 +759,51 @@ label.required::after {
   color: #49555b;
   font-size: 20px;
 }
+
+.builder-widget {
+  .block {
+    border: 1px solid rgba(map-get($theme-colors, 'dark-blue'), 0.3);
+    padding: 10px;
+    border-radius: 4px;
+    margin-bottom: 10px;
+    background: rgba(map-get($theme-colors, 'dark-blue'), 0.02);
+  }
+
+  .block-header {
+    .block-header-item {
+      font-size: 12px;
+      display: inline-block;
+      margin-bottom: 3px;
+      padding: 2px 6px;
+      border-radius: 4px;
+      margin-bottom: 5px;
+      margin-right: 2px;
+      cursor: pointer;
+    }
+  }
+
+  .block-label {
+    background: map-get($theme-colors, 'dark-blue');
+    border: 1px solid map-get($theme-colors, 'dark-blue');
+    color: lighten(map-get($theme-colors, 'dark-blue'), 100%);
+  }
+
+  .block-settings-toggler {
+    background: none;
+    border: 1px solid map-get($theme-colors, 'dark-blue');
+    color: map-get($theme-colors, 'dark-blue');
+  }
+
+  .block-settings {
+    padding: 4px;
+  }
+
+  .builder-add {
+    text-align: center;
+    margin-bottom: -5px;
+
+    .picker {
+      text-align: left;
+    }
+  }
+}
diff --git a/src/core/Resources/assets/js/admin.js b/src/core/Resources/assets/js/admin.js
index 58cb77c..c1c988d 100644
--- a/src/core/Resources/assets/js/admin.js
+++ b/src/core/Resources/assets/js/admin.js
@@ -29,3 +29,4 @@ require('./modules/file-picker.js')()
 require('./modules/analytics.js')()
 require('./modules/page.js')()
 require('./modules/node.js')()
+require('./modules/builder-block.js')()
diff --git a/src/core/Resources/assets/js/components/builder-block/BuilderBlock.vue b/src/core/Resources/assets/js/components/builder-block/BuilderBlock.vue
new file mode 100644
index 0000000..e61e7a5
--- /dev/null
+++ b/src/core/Resources/assets/js/components/builder-block/BuilderBlock.vue
@@ -0,0 +1,145 @@
+<template>
+  <div class="block" :key="blockKey">
+    <BuilderBlockItem
+      v-for="(block, key) in value"
+      :item="block"
+      :widgets="widgets"
+      @remove-item="removeBlock(key)"
+    />
+    <div class="container">
+      <BuilderBlockCreate
+        :container="value"
+        :widgets="widgets"
+        :allowedWidgets="[]"
+      />
+    </div>
+    <textarea :name="name" class="d-none">{{ toJson(value) }}</textarea>
+  </div>
+</template>
+
+<script>
+import BuilderBlockItem from './BuilderBlockItem'
+import BuilderBlockCreate from './BuilderBlockCreate'
+import BuilderBlockForm from './BuilderBlockForm'
+
+const widgets = {
+  row: {
+    label: 'Bootstrap row',
+    settings: {
+    },
+    isContainer: true,
+    widgets: ['column'],
+  },
+  column: {
+    label: 'Bootstrap column',
+    settings: {
+      size: {label: 'Size', type: 'input', attr: {type: 'number'}},
+      sizeMd: {label: 'Size MD', type: 'input', attr: {type: 'number'}},
+    },
+    isContainer: true,
+    widgets: [],
+  },
+  tinymce: {
+    label: 'TinyMCE',
+    settings: {
+      value: {label: 'Value', type: 'textarea', attr: {'data-tinymce': ''}},
+    },
+    isContainer: false,
+    widgets: [],
+  }
+}
+
+const blocks = [
+  {
+    widget: 'row',
+    settings: {},
+    children: [
+      {
+        widget: 'column',
+        settings: {
+          size: 12,
+          sizeMd: 6,
+        },
+        children: [
+          {
+            widget: 'tinymce',
+            settings: {
+              value: '<p>Hello, world!</p>',
+            },
+            children: null
+          },
+        ],
+      },
+      {
+        widget: 'column',
+        settings: {
+          size: 12,
+          sizeMd: 6,
+        },
+        children: [],
+      },
+    ]
+  }
+]
+
+export default {
+  name: 'BuilderBlock',
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    initialValue: {
+      type: Array,
+      required: false,
+    }
+  },
+  data() {
+    return {
+      value: this.initialValue,
+      widgets,
+      blockKey: 0
+    }
+  },
+  methods: {
+    toJson(value) {
+      return JSON.stringify(value)
+    },
+    triggerBuilderBlockEvent() {
+      document.querySelector('body').dispatchEvent(new Event('builder_block.update'))
+    },
+    removeBlock(key) {
+      let newValue = []
+
+      this.value.forEach((v, k) => {
+        if (k !== key) {
+          newValue.push(v)
+        }
+      })
+
+      console.log(newValue)
+
+      this.value = newValue
+      ++this.blockKey
+    }
+  },
+  components: {
+    BuilderBlockItem,
+    BuilderBlockCreate,
+    BuilderBlockForm,
+  },
+  mounted() {
+    this.triggerBuilderBlockEvent()
+  },
+  created() {
+    this.triggerBuilderBlockEvent()
+  },
+  updated() {
+    this.triggerBuilderBlockEvent()
+  }
+}
+</script>
diff --git a/src/core/Resources/assets/js/components/builder-block/BuilderBlockCreate.vue b/src/core/Resources/assets/js/components/builder-block/BuilderBlockCreate.vue
new file mode 100644
index 0000000..3a4b9ee
--- /dev/null
+++ b/src/core/Resources/assets/js/components/builder-block/BuilderBlockCreate.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="builder-add">
+    <span class="btn btn-sm btn-secondary" v-on:click="togglePicker">
+      <span class="fa fa-plus"></span>
+    </span>
+
+    <div class="picker mt-2 list-group" :class="{'d-none': !showPicker}">
+      <div v-for="(widget, name) in widgets" v-if="allowedWidgets.length == 0 || allowedWidgets.includes(name)" class="list-group-item">
+        <div class="float-right">
+          <span class="btn btn-sm btn-primary" v-on:click="add(name, widget)">
+            <span class="fa fa-plus"></span>
+          </span>
+        </div>
+
+        {{ widget.label }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'BuilderBlockCreate',
+  props: {
+    container: {
+      type: Array,
+      required: true
+    },
+    widgets: {
+      type: Object,
+      required: true
+    },
+    allowedWidgets: {
+      type: Array,
+      required: true
+    },
+  },
+  data() {
+    return {
+      showPicker: false
+    }
+  },
+  methods: {
+    add(name, widget) {
+      this.container.push({
+        widget: name,
+        settings: {},
+        children: [],
+      })
+
+      this.$emit('updateContainer', this.container)
+      this.togglePicker()
+    },
+    togglePicker() {
+      this.showPicker = !this.showPicker
+    }
+  },
+  components: {
+  },
+  mounted() {
+  }
+}
+</script>
diff --git a/src/core/Resources/assets/js/components/builder-block/BuilderBlockForm.vue b/src/core/Resources/assets/js/components/builder-block/BuilderBlockForm.vue
new file mode 100644
index 0000000..4aa215c
--- /dev/null
+++ b/src/core/Resources/assets/js/components/builder-block/BuilderBlockForm.vue
@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <div v-if="value !== null && typeof value === 'object'">
+      <BuilderBlockForm v-for="(item, key) in value" :name="name + '[' + key + ']'" :value="item" />
+    </div>
+    <div v-else>
+      <input type="text" :name="name" :value="value">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BuilderBlockForm',
+  props: {
+    name: {
+      type: name,
+      required: true
+    },
+    value: {
+      required: true
+    }
+  },
+  data() {
+    return {
+    }
+  },
+}
+</script>
diff --git a/src/core/Resources/assets/js/components/builder-block/BuilderBlockItem.vue b/src/core/Resources/assets/js/components/builder-block/BuilderBlockItem.vue
new file mode 100644
index 0000000..e885b87
--- /dev/null
+++ b/src/core/Resources/assets/js/components/builder-block/BuilderBlockItem.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="block" v-if="widget" :key="blockKey">
+    <div class="block-header">
+      <div class="float-right">
+        <div class="block-header-item text-white bg-danger" v-on:click="removeMe(item)">
+          <span class="fa fa-trash"></span>
+        </div>
+      </div>
+      <div class="block-header-item block-label" data-toggle="tooltip" data-placement="top" :title="item.widget">
+        {{ widget.label }}
+      </div>
+      <div class="block-header-item block-settings-toggler" v-on:click="toggleSettings" v-if="Object.keys(widget.settings).length">
+        <span class="fa fa-cog"></span>
+      </div>
+    </div>
+
+    <div class="block-settings" v-if="Object.keys(widget.settings).length" :class="{'d-none': !showSettings}">
+      <div class="row">
+        <div
+          v-for="(params, setting) in widget.settings"
+          class="col-12 form-group"
+        >
+          <label v-text="params.label"></label>
+
+          <input
+            v-if="params.type == 'input'"
+            v-model="item.settings[setting]"
+            v-bind="params.attr"
+            class="form-control"
+          />
+          <textarea
+            v-if="params.type == 'textarea'"
+            v-model="item.settings[setting]"
+            v-bind="params.attr"
+            class="form-control"
+          ></textarea>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="item.children !== null && item.children.length > 0" v-for="(child, key) in item.children">
+      <BuilderBlockItem
+        :item="child"
+        :widgets="widgets"
+        @remove-item="removeBlock(key)"
+      />
+    </div>
+
+    <div v-if="widget.isContainer" class="container">
+      <BuilderBlockCreate
+        :container="item.children"
+        :widgets="widgets"
+        :allowedWidgets="widget.widgets"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import BuilderBlockCreate from './BuilderBlockCreate'
+
+export default {
+  name: 'BuilderBlockItem',
+  props: {
+    widgets: {
+      type: Object,
+      required: true
+    },
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      widget: null,
+      showSettings: false,
+      blockKey: 0
+    }
+  },
+  methods: {
+    toggleSettings() {
+      this.showSettings = !this.showSettings
+    },
+    removeMe() {
+      this.$emit('remove-item')
+    },
+    removeBlock(key) {
+      let children = []
+
+      this.item.children.forEach((v, k) => {
+        if (k !== key) {
+          children.push(v)
+        }
+      })
+
+      this.item.children = children
+      ++this.blockKey
+    }
+  },
+  components: {
+    BuilderBlockCreate,
+  },
+  mounted() {
+    this.widget = this.widgets[this.item.widget]
+  }
+}
+</script>
diff --git a/src/core/Resources/assets/js/modules/builder-block.js b/src/core/Resources/assets/js/modules/builder-block.js
new file mode 100644
index 0000000..5c87bfc
--- /dev/null
+++ b/src/core/Resources/assets/js/modules/builder-block.js
@@ -0,0 +1,28 @@
+const Vue = require('vue').default
+
+const BuilderBlock = require('../components/builder-block/BuilderBlock').default
+
+module.exports = () => {
+  const wrappers = document.querySelectorAll('.builder-widget')
+
+  wrappers.forEach((wrapper) => {
+    const component = wrapper.querySelector('.builder-widget-component')
+
+    return new Vue({
+      el: component,
+      template: `<BuilderBlock
+        :initialValue="value"
+        name="${component.getAttribute('data-name')}"
+        id="${component.getAttribute('data-id')}"
+      />`,
+      data() {
+        return {
+          value: JSON.parse(component.getAttribute('data-value'))
+        }
+      },
+      components: {
+        BuilderBlock
+      }
+    })
+  })
+}
diff --git a/src/core/Resources/assets/js/modules/tinymce.js b/src/core/Resources/assets/js/modules/tinymce.js
index d85ac09..1f6ab2c 100644
--- a/src/core/Resources/assets/js/modules/tinymce.js
+++ b/src/core/Resources/assets/js/modules/tinymce.js
@@ -74,6 +74,8 @@ const createTinymceConfig = function () {
       })
 
       editor.on('Change', () => {
+        editor.save();
+        editor.getElement().dispatchEvent(new Event('input'));
         window.tinymce.triggerSave(false, true)
       })
     }
@@ -618,6 +620,13 @@ const doInitEditor = () => {
 }
 
 module.exports = function () {
+  document.querySelector('body').addEventListener('builder_block.update', () => {
+    window.setTimeout(() => {
+      createTinymceConfig()
+      doInitEditor()
+    }, 500)
+  })
+
   $(() => {
     createTinymceConfig()
     doInitEditor()
diff --git a/src/core/Resources/views/form/bootstrap_4_form_theme.html.twig b/src/core/Resources/views/form/bootstrap_4_form_theme.html.twig
index 05895ce..fc86bb8 100644
--- a/src/core/Resources/views/form/bootstrap_4_form_theme.html.twig
+++ b/src/core/Resources/views/form/bootstrap_4_form_theme.html.twig
@@ -1,5 +1,14 @@
 {% extends 'bootstrap_4_layout.html.twig' %}
 
+{% block builder_widget %}
+    {% set row_attr = row_attr|merge({class: 'builder-widget ' ~ (row_attr.class ?? '')}) %}
+
+    <div {% for attr, value in row_attr %}{{ attr }}="{{ value }}" {% endfor %}>
+        <div class="builder-widget-component" data-value="{{ value is iterable ? value|json_encode : value }}" data-name="{{ full_name }}" data-id="{{ id }}">
+        </div>
+    </div>
+{% endblock %}
+
 {% block grapesjs_widget %}
     <div class="gjs"></div>
     <div class="d-none">

From 78965bbf10da0f814a108962eab4d8b595236b88 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Sun, 12 May 2024 14:30:28 +0200
Subject: [PATCH 2/6] allow to move blocks

update builder view
---
 src/core/Resources/assets/css/admin.scss      |  11 +-
 .../components/builder-block/BuilderBlock.vue | 174 +++++++++++-------
 .../builder-block/BuilderBlockCreate.vue      | 106 +++++++++--
 .../builder-block/BuilderBlockForm.vue        |  29 ---
 .../builder-block/BuilderBlockItem.vue        |  88 +++++++--
 .../builder-block/BuilderBlockSetting.vue     |  57 ++++++
 6 files changed, 332 insertions(+), 133 deletions(-)
 delete mode 100644 src/core/Resources/assets/js/components/builder-block/BuilderBlockForm.vue
 create mode 100644 src/core/Resources/assets/js/components/builder-block/BuilderBlockSetting.vue

diff --git a/src/core/Resources/assets/css/admin.scss b/src/core/Resources/assets/css/admin.scss
index dd958bc..099dfe7 100644
--- a/src/core/Resources/assets/css/admin.scss
+++ b/src/core/Resources/assets/css/admin.scss
@@ -773,10 +773,9 @@ label.required::after {
     .block-header-item {
       font-size: 12px;
       display: inline-block;
-      margin-bottom: 3px;
+      margin-bottom: 10px;
       padding: 2px 6px;
       border-radius: 4px;
-      margin-bottom: 5px;
       margin-right: 2px;
       cursor: pointer;
     }
@@ -788,7 +787,7 @@ label.required::after {
     color: lighten(map-get($theme-colors, 'dark-blue'), 100%);
   }
 
-  .block-settings-toggler {
+  .block-settings-inverse {
     background: none;
     border: 1px solid map-get($theme-colors, 'dark-blue');
     color: map-get($theme-colors, 'dark-blue');
@@ -798,9 +797,13 @@ label.required::after {
     padding: 4px;
   }
 
+  .block-id {
+    font-size: 12px;
+    margin-right: 5px;
+  }
+
   .builder-add {
     text-align: center;
-    margin-bottom: -5px;
 
     .picker {
       text-align: left;
diff --git a/src/core/Resources/assets/js/components/builder-block/BuilderBlock.vue b/src/core/Resources/assets/js/components/builder-block/BuilderBlock.vue
index e61e7a5..9bacbdd 100644
--- a/src/core/Resources/assets/js/components/builder-block/BuilderBlock.vue
+++ b/src/core/Resources/assets/js/components/builder-block/BuilderBlock.vue
@@ -4,7 +4,11 @@
       v-for="(block, key) in value"
       :item="block"
       :widgets="widgets"
+      :isFirst="key === 0"
+      :isLast="key == Object.keys(value)[Object.keys(value).length -1]"
       @remove-item="removeBlock(key)"
+      @move-item-up="moveBlockUp(key)"
+      @move-item-down="moveBlockDown(key)"
     />
     <div class="container">
       <BuilderBlockCreate
@@ -20,18 +24,27 @@
 <script>
 import BuilderBlockItem from './BuilderBlockItem'
 import BuilderBlockCreate from './BuilderBlockCreate'
-import BuilderBlockForm from './BuilderBlockForm'
 
 const widgets = {
-  row: {
-    label: 'Bootstrap row',
+  bsContainer: {
+    category: 'Boostrap',
+    label: 'Container',
     settings: {
     },
     isContainer: true,
-    widgets: ['column'],
+    widgets: [],
   },
-  column: {
-    label: 'Bootstrap column',
+  bsRow: {
+    category: 'Boostrap',
+    label: 'Row',
+    settings: {
+    },
+    isContainer: true,
+    widgets: ['bsColumn'],
+  },
+  bsColumn: {
+    category: 'Boostrap',
+    label: 'Column',
     settings: {
       size: {label: 'Size', type: 'input', attr: {type: 'number'}},
       sizeMd: {label: 'Size MD', type: 'input', attr: {type: 'number'}},
@@ -40,15 +53,102 @@ const widgets = {
     widgets: [],
   },
   tinymce: {
+    category: 'Editor',
     label: 'TinyMCE',
     settings: {
       value: {label: 'Value', type: 'textarea', attr: {'data-tinymce': ''}},
     },
     isContainer: false,
     widgets: [],
+  },
+  select: {
+    category: null,
+    label: 'Item with Select',
+    settings: {
+      value: {label: 'Value', type: 'select', attr: {}, options: [
+        {value: 'a', text: 'A'},
+        {value: 'b', text: 'B'},
+      ]}
+    },
   }
 }
 
+export default {
+  name: 'BuilderBlock',
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    initialValue: {
+      type: Array,
+      required: false,
+    }
+  },
+  data() {
+    return {
+      value: this.initialValue,
+      widgets,
+      blockKey: 0
+    }
+  },
+  methods: {
+    toJson(value) {
+      return JSON.stringify(value)
+    },
+    triggerBuilderBlockEvent() {
+      document.querySelector('body').dispatchEvent(new Event('builder_block.update'))
+    },
+    moveBlockUp(key) {
+      const prev = this.value[key-1]
+      const current = this.value[key]
+
+      this.value[key-1] = current
+      this.value[key] = prev
+      ++this.blockKey
+    },
+    moveBlockDown(key) {
+      const next = this.value[key+1]
+      const current = this.value[key]
+
+      this.value[key+1] = current
+      this.value[key] = next
+      ++this.blockKey
+    },
+    removeBlock(key) {
+      let newValue = []
+
+      this.value.forEach((v, k) => {
+        if (k !== key) {
+          newValue.push(v)
+        }
+      })
+
+      this.value = newValue
+      ++this.blockKey
+    },
+  },
+  components: {
+    BuilderBlockItem,
+    BuilderBlockCreate,
+  },
+  mounted() {
+    this.triggerBuilderBlockEvent()
+  },
+  created() {
+    this.triggerBuilderBlockEvent()
+  },
+  updated() {
+    this.triggerBuilderBlockEvent()
+  }
+}
+
+/*
+
 const blocks = [
   {
     widget: 'row',
@@ -81,65 +181,5 @@ const blocks = [
     ]
   }
 ]
-
-export default {
-  name: 'BuilderBlock',
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    name: {
-      type: String,
-      required: true,
-    },
-    initialValue: {
-      type: Array,
-      required: false,
-    }
-  },
-  data() {
-    return {
-      value: this.initialValue,
-      widgets,
-      blockKey: 0
-    }
-  },
-  methods: {
-    toJson(value) {
-      return JSON.stringify(value)
-    },
-    triggerBuilderBlockEvent() {
-      document.querySelector('body').dispatchEvent(new Event('builder_block.update'))
-    },
-    removeBlock(key) {
-      let newValue = []
-
-      this.value.forEach((v, k) => {
-        if (k !== key) {
-          newValue.push(v)
-        }
-      })
-
-      console.log(newValue)
-
-      this.value = newValue
-      ++this.blockKey
-    }
-  },
-  components: {
-    BuilderBlockItem,
-    BuilderBlockCreate,
-    BuilderBlockForm,
-  },
-  mounted() {
-    this.triggerBuilderBlockEvent()
-  },
-  created() {
-    this.triggerBuilderBlockEvent()
-  },
-  updated() {
-    this.triggerBuilderBlockEvent()
-  }
-}
+*/
 </script>
diff --git a/src/core/Resources/assets/js/components/builder-block/BuilderBlockCreate.vue b/src/core/Resources/assets/js/components/builder-block/BuilderBlockCreate.vue
index 3a4b9ee..11588af 100644
--- a/src/core/Resources/assets/js/components/builder-block/BuilderBlockCreate.vue
+++ b/src/core/Resources/assets/js/components/builder-block/BuilderBlockCreate.vue
@@ -1,18 +1,66 @@
+<style scoped>
+.categories {
+  padding: 10px;
+  text-align: left;
+}
+
+.category {
+  padding: 10px 0;
+}
+
+.category-label {
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+
+.widget {
+  display: inline-block;
+  background: #fff;
+  padding: 10px;
+  text-align: center;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-right: 5px;
+  border: 1px solid #1e2430;
+}
+
+.widget:hover {
+  background: #eee;
+}
+
+.widget-label {
+  font-weight: bold;
+  padding: 0 0 10px 0;
+}
+</style>
+
 <template>
   <div class="builder-add">
     <span class="btn btn-sm btn-secondary" v-on:click="togglePicker">
       <span class="fa fa-plus"></span>
     </span>
 
-    <div class="picker mt-2 list-group" :class="{'d-none': !showPicker}">
-      <div v-for="(widget, name) in widgets" v-if="allowedWidgets.length == 0 || allowedWidgets.includes(name)" class="list-group-item">
-        <div class="float-right">
-          <span class="btn btn-sm btn-primary" v-on:click="add(name, widget)">
-            <span class="fa fa-plus"></span>
-          </span>
-        </div>
+    <div class="categories mt-2 list-group" :class="{'d-none': !showPicker}">
+      <div
+        v-for="category in categories()"
+        v-if="Object.keys(category.widgets).length"
+        class="category"
+      >
+        <div
+          v-if="category.label != 'none'"
+          v-text="category.label"
+          class="category-label row"
+        ></div>
 
-        {{ widget.label }}
+        <div
+          v-for="(widget, name) in category.widgets"
+          v-on:click="add(name, widget)"
+          class="widget col-3"
+        >
+          <div class="widget-label">
+            {{ widget.label }}
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -38,12 +86,13 @@ export default {
   },
   data() {
     return {
-      showPicker: false
+      showPicker: false,
     }
   },
   methods: {
     add(name, widget) {
       this.container.push({
+        id: this.makeId(),
         widget: name,
         settings: {},
         children: [],
@@ -52,13 +101,44 @@ export default {
       this.$emit('updateContainer', this.container)
       this.togglePicker()
     },
+    makeId() {
+      let result = ''
+      const characters = 'abcdefghijklmnopqrstuvwxyz0123456789'
+      const charactersLength = characters.length
+
+      for (let i = 0; i < 7; i++) {
+        result += characters.charAt(Math.floor(Math.random() * charactersLength))
+      }
+
+      return `block-${result}`
+    },
     togglePicker() {
       this.showPicker = !this.showPicker
+    },
+    categories() {
+      let items = {}
+
+      for (let widgetName in this.widgets) {
+        let value = this.widgets[widgetName]
+
+        if (!value.category) {
+          value.category = 'none'
+        }
+
+        if (typeof items[value.category] === 'undefined') {
+          items[value.category] = {
+            label: value.category,
+            widgets: {},
+          }
+        }
+
+        if (!this.allowedWidgets.length || this.allowedWidgets.includes(widgetName)) {
+          items[value.category].widgets[widgetName] = value
+        }
+      }
+
+      return items
     }
   },
-  components: {
-  },
-  mounted() {
-  }
 }
 </script>
diff --git a/src/core/Resources/assets/js/components/builder-block/BuilderBlockForm.vue b/src/core/Resources/assets/js/components/builder-block/BuilderBlockForm.vue
deleted file mode 100644
index 4aa215c..0000000
--- a/src/core/Resources/assets/js/components/builder-block/BuilderBlockForm.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-  <div>
-    <div v-if="value !== null && typeof value === 'object'">
-      <BuilderBlockForm v-for="(item, key) in value" :name="name + '[' + key + ']'" :value="item" />
-    </div>
-    <div v-else>
-      <input type="text" :name="name" :value="value">
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'BuilderBlockForm',
-  props: {
-    name: {
-      type: name,
-      required: true
-    },
-    value: {
-      required: true
-    }
-  },
-  data() {
-    return {
-    }
-  },
-}
-</script>
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 e885b87..fc8d884 100644
--- a/src/core/Resources/assets/js/components/builder-block/BuilderBlockItem.vue
+++ b/src/core/Resources/assets/js/components/builder-block/BuilderBlockItem.vue
@@ -2,39 +2,51 @@
   <div class="block" v-if="widget" :key="blockKey">
     <div class="block-header">
       <div class="float-right">
+        <span class="block-id">
+          {{ item.id }}
+        </span>
         <div class="block-header-item text-white bg-danger" v-on:click="removeMe(item)">
           <span class="fa fa-trash"></span>
         </div>
       </div>
-      <div class="block-header-item block-label" data-toggle="tooltip" data-placement="top" :title="item.widget">
+      <div
+        class="block-header-item block-label"
+        :title="item.widget"
+      >
         {{ widget.label }}
       </div>
-      <div class="block-header-item block-settings-toggler" v-on:click="toggleSettings" v-if="Object.keys(widget.settings).length">
+      <div
+        class="block-header-item block-settings-inverse"
+        v-on:click="toggleSettings"
+        v-if="Object.keys(widget.settings).length"
+      >
         <span class="fa fa-cog"></span>
       </div>
+
+      <div
+        v-if="!isFirst"
+        v-on:click="moveMeUp"
+        class="block-header-item block-settings-inverse"
+      >
+          <span class="fas fa-arrow-up"></span>
+        </div>
+      <div
+        v-if="!isLast"
+        v-on:click="moveMeDown"
+        class="block-header-item block-settings-inverse"
+      >
+          <span class="fas fa-arrow-down"></span>
+        </div>
     </div>
 
     <div class="block-settings" v-if="Object.keys(widget.settings).length" :class="{'d-none': !showSettings}">
       <div class="row">
-        <div
+        <BuilderBlockSetting
           v-for="(params, setting) in widget.settings"
-          class="col-12 form-group"
-        >
-          <label v-text="params.label"></label>
-
-          <input
-            v-if="params.type == 'input'"
-            v-model="item.settings[setting]"
-            v-bind="params.attr"
-            class="form-control"
-          />
-          <textarea
-            v-if="params.type == 'textarea'"
-            v-model="item.settings[setting]"
-            v-bind="params.attr"
-            class="form-control"
-          ></textarea>
-        </div>
+          :item="item"
+          :params="params"
+          :setting="setting"
+        />
       </div>
     </div>
 
@@ -42,7 +54,11 @@
       <BuilderBlockItem
         :item="child"
         :widgets="widgets"
+        :isFirst="key === 0"
+        :isLast="key == Object.keys(item.children)[Object.keys(item.children).length -1]"
         @remove-item="removeBlock(key)"
+        @move-item-up="moveBlockUp(key)"
+        @move-item-down="moveBlockDown(key)"
       />
     </div>
 
@@ -58,6 +74,7 @@
 
 <script>
 import BuilderBlockCreate from './BuilderBlockCreate'
+import BuilderBlockSetting from './BuilderBlockSetting'
 
 export default {
   name: 'BuilderBlockItem',
@@ -69,6 +86,14 @@ export default {
     item: {
       type: Object,
       required: true
+    },
+    isFirst: {
+      type: Boolean,
+      required: true
+    },
+    isLast: {
+      type: Boolean,
+      required: true
     }
   },
   data() {
@@ -85,6 +110,28 @@ export default {
     removeMe() {
       this.$emit('remove-item')
     },
+    moveMeUp() {
+      this.$emit('move-item-up')
+    },
+    moveMeDown() {
+      this.$emit('move-item-down')
+    },
+    moveBlockUp(key) {
+      const prev = this.item.children[key-1]
+      const current = this.item.children[key]
+
+      this.item.children[key-1] = current
+      this.item.children[key] = prev
+      ++this.blockKey
+    },
+    moveBlockDown(key) {
+      const next = this.item.children[key+1]
+      const current = this.item.children[key]
+
+      this.item.children[key+1] = current
+      this.item.children[key] = next
+      ++this.blockKey
+    },
     removeBlock(key) {
       let children = []
 
@@ -100,6 +147,7 @@ export default {
   },
   components: {
     BuilderBlockCreate,
+    BuilderBlockSetting,
   },
   mounted() {
     this.widget = this.widgets[this.item.widget]
diff --git a/src/core/Resources/assets/js/components/builder-block/BuilderBlockSetting.vue b/src/core/Resources/assets/js/components/builder-block/BuilderBlockSetting.vue
new file mode 100644
index 0000000..c3adcbd
--- /dev/null
+++ b/src/core/Resources/assets/js/components/builder-block/BuilderBlockSetting.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="col-12 form-group">
+    <label
+      v-if="params.label"
+      v-text="params.label">
+    </label>
+
+    <input
+      v-if="params.type == 'input'"
+      v-model="item.settings[setting]"
+      v-bind="params.attr"
+      class="form-control"
+    />
+
+    <textarea
+      v-if="params.type == 'textarea'"
+      v-model="item.settings[setting]"
+      v-bind="params.attr"
+      class="form-control"
+    ></textarea>
+
+    <select
+      v-if="params.type == 'select'"
+      v-model="item.settings[setting]"
+      v-bind="params.attr"
+      class="form-control"
+    >
+      <option :value="v.value" v-for="(v, k) in params.options" :key="k">
+        {{ v.text }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BuilderBlockSetting',
+  props: {
+    item: {
+      type: Object,
+      required: true,
+    },
+    params: {
+      type: Object,
+      required: true,
+    },
+    setting: {
+      type: String,
+      required: true,
+    }
+  },
+  data() {
+    return {
+    }
+  },
+}
+</script>

From ca23a22807dd9356afbc84df693b40c26210f7df Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Sun, 12 May 2024 22:24:10 +0200
Subject: [PATCH 3/6] rollback indentation

---
 .../DependencyInjection/Configuration.php     | 186 +++++++++---------
 1 file changed, 93 insertions(+), 93 deletions(-)

diff --git a/src/core/DependencyInjection/Configuration.php b/src/core/DependencyInjection/Configuration.php
index 14a721b..cb6b6d1 100644
--- a/src/core/DependencyInjection/Configuration.php
+++ b/src/core/DependencyInjection/Configuration.php
@@ -46,99 +46,99 @@ class Configuration implements ConfigurationInterface
 
         $treeBuilder->getRootNode()
             ->children()
-            ->arrayNode('site')
-            ->children()
-            ->scalarNode('name')
-            ->defaultValue('Murph')
-            ->isRequired()
-            ->end()
-            ->scalarNode('logo')
-            ->defaultValue('build/images/core/logo.svg')
-            ->isRequired()
-            ->end()
-            ->arrayNode('controllers')
-            ->prototype('array')
-            ->children()
-            ->scalarNode('name')
-            ->cannotBeEmpty()
-            ->end()
-            ->scalarNode('action')
-            ->cannotBeEmpty()
-            ->end()
-            ->end()
-            ->end()
-            ->end()
-            ->arrayNode('security')
-            ->children()
-            ->arrayNode('roles')
-            ->prototype('array')
-            ->children()
-            ->scalarNode('name')
-            ->cannotBeEmpty()
-            ->end()
-            ->scalarNode('role')
-            ->cannotBeEmpty()
-            ->end()
-            ->end()
-            ->end()
-            ->end()
-            ->end()
-            ->end()
-            ->arrayNode('pages')
-            ->prototype('array')
-            ->children()
-            ->scalarNode('name')
-            ->isRequired()
-            ->cannotBeEmpty()
-            ->end()
-            ->arrayNode('templates')
-            ->prototype('array')
-            ->children()
-            ->scalarNode('name')
-            ->cannotBeEmpty()
-            ->end()
-            ->scalarNode('file')
-            ->cannotBeEmpty()
-            ->end()
-            ->end()
-            ->end()
-            ->end()
-            ->end()
-            ->end()
-            ->end()
-            ->end()
-            ->end()
-            ->arrayNode('editor_js')
-            ->children()
-            ->arrayNode('blocks')
-            ->scalarPrototype()
-            ->end()
-            ->end()
-            ->end()
-            ->end()
-            ->arrayNode('file_manager')
-            ->children()
-            ->arrayNode('mimes')
-            ->scalarPrototype()
-            ->end()
-            ->defaultValue($defaultMimetypes)
-            ->end()
-            ->scalarNode('path')
-            ->defaultValue('%kernel.project_dir%/public/uploads')
-            ->cannotBeEmpty()
-            ->end()
-            ->scalarNode('path_uri')
-            ->defaultValue('/uploads')
-            ->cannotBeEmpty()
-            ->end()
-            ->arrayNode('path_locked')
-            ->scalarPrototype()
-            ->end()
-            ->defaultValue($defaultLocked)
-            ->end()
-            ->end()
-            ->end()
-            ->end()
+                ->arrayNode('site')
+                    ->children()
+                        ->scalarNode('name')
+                            ->defaultValue('Murph')
+                            ->isRequired()
+                        ->end()
+                        ->scalarNode('logo')
+                            ->defaultValue('build/images/core/logo.svg')
+                            ->isRequired()
+                        ->end()
+                        ->arrayNode('controllers')
+                            ->prototype('array')
+                                ->children()
+                                    ->scalarNode('name')
+                                        ->cannotBeEmpty()
+                                    ->end()
+                                    ->scalarNode('action')
+                                        ->cannotBeEmpty()
+                                    ->end()
+                                ->end()
+                            ->end()
+                        ->end()
+                        ->arrayNode('security')
+                            ->children()
+                                ->arrayNode('roles')
+                                    ->prototype('array')
+                                        ->children()
+                                            ->scalarNode('name')
+                                                ->cannotBeEmpty()
+                                            ->end()
+                                            ->scalarNode('role')
+                                                ->cannotBeEmpty()
+                                            ->end()
+                                        ->end()
+                                    ->end()
+                                ->end()
+                            ->end()
+                        ->end()
+                        ->arrayNode('pages')
+                            ->prototype('array')
+                                ->children()
+                                    ->scalarNode('name')
+                                        ->isRequired()
+                                        ->cannotBeEmpty()
+                                    ->end()
+                                    ->arrayNode('templates')
+                                        ->prototype('array')
+                                            ->children()
+                                                ->scalarNode('name')
+                                                    ->cannotBeEmpty()
+                                                ->end()
+                                                ->scalarNode('file')
+                                                    ->cannotBeEmpty()
+                                                ->end()
+                                            ->end()
+                                        ->end()
+                                    ->end()
+                                ->end()
+                            ->end()
+                        ->end()
+                    ->end()
+                ->end()
+                ->arrayNode('editor_js')
+                    ->children()
+                        ->arrayNode('blocks')
+                            ->scalarPrototype()
+                            ->end()
+                        ->end()
+                    ->end()
+                ->end()
+                ->arrayNode('file_manager')
+                    ->children()
+                        ->arrayNode('mimes')
+                            ->scalarPrototype()
+                            ->end()
+                            ->defaultValue($defaultMimetypes)
+                        ->end()
+                        ->scalarNode('path')
+                            ->defaultValue('%kernel.project_dir%/public/uploads')
+                            ->cannotBeEmpty()
+                        ->end()
+                        ->scalarNode('path_uri')
+                            ->defaultValue('/uploads')
+                            ->cannotBeEmpty()
+                        ->end()
+                        ->arrayNode('path_locked')
+                            ->scalarPrototype()
+                            ->end()
+                            ->defaultValue($defaultLocked)
+                        ->end()
+                    ->end()
+                ->end()
+            ->end();
         ;
 
         return $treeBuilder;

From 232b92267e9876f2704b586a40fb80c3cd8d90b3 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Sun, 12 May 2024 22:24:51 +0200
Subject: [PATCH 4/6] add build block loader

add builder block rendering

fix issues with components
---
 .../Block/Bootstrap/BootstrapBlock.php        |  14 ++
 .../Block/Bootstrap/ColumnBuilderBlock.php    |  29 +++
 .../Block/Bootstrap/ContainerBuilderBlock.php |  24 +++
 .../Block/Bootstrap/RowBuilderBlock.php       |  24 +++
 .../BuilderBlock/Block/Editor/EditorBlock.php |  14 ++
 .../Block/Editor/TinymceBlock.php             |  24 +++
 src/core/BuilderBlock/BuilderBlock.php        | 172 ++++++++++++++++++
 .../BuilderBlock/BuilderBlockContainer.php    |  25 +++
 .../Editor/BuilderBlockController.php         |  40 ++++
 .../Compiler/BuilderBlockPass.php             |  25 +++
 .../DependencyInjection/CoreExtension.php     |   1 +
 src/core/Entity/Site/Page/BuilderBlock.php    |   2 +-
 .../components/builder-block/BuilderBlock.vue | 119 +++---------
 .../builder-block/BuilderBlockCreate.vue      |  27 ++-
 .../builder-block/BuilderBlockItem.vue        |  50 +++--
 .../builder-block/BuilderBlockSetting.vue     |  22 ++-
 .../js/components/file-manager/Files.vue      |   1 -
 .../Resources/translations/messages.fr.yaml   |   5 +
 .../builder_block/bootstrap/column.html.twig  |  13 ++
 .../bootstrap/container.html.twig             |   5 +
 .../builder_block/bootstrap/row.html.twig     |   5 +
 .../builder_block/editor/tinymce.html.twig    |   1 +
 .../Twig/Extension/BuilderBlockExtension.php  |  47 +++++
 23 files changed, 561 insertions(+), 128 deletions(-)
 create mode 100644 src/core/BuilderBlock/Block/Bootstrap/BootstrapBlock.php
 create mode 100644 src/core/BuilderBlock/Block/Bootstrap/ColumnBuilderBlock.php
 create mode 100644 src/core/BuilderBlock/Block/Bootstrap/ContainerBuilderBlock.php
 create mode 100644 src/core/BuilderBlock/Block/Bootstrap/RowBuilderBlock.php
 create mode 100644 src/core/BuilderBlock/Block/Editor/EditorBlock.php
 create mode 100644 src/core/BuilderBlock/Block/Editor/TinymceBlock.php
 create mode 100644 src/core/BuilderBlock/BuilderBlock.php
 create mode 100644 src/core/BuilderBlock/BuilderBlockContainer.php
 create mode 100644 src/core/Controller/Editor/BuilderBlockController.php
 create mode 100644 src/core/DependencyInjection/Compiler/BuilderBlockPass.php
 create mode 100644 src/core/Resources/views/builder_block/bootstrap/column.html.twig
 create mode 100644 src/core/Resources/views/builder_block/bootstrap/container.html.twig
 create mode 100644 src/core/Resources/views/builder_block/bootstrap/row.html.twig
 create mode 100644 src/core/Resources/views/builder_block/editor/tinymce.html.twig
 create mode 100644 src/core/Twig/Extension/BuilderBlockExtension.php

diff --git a/src/core/BuilderBlock/Block/Bootstrap/BootstrapBlock.php b/src/core/BuilderBlock/Block/Bootstrap/BootstrapBlock.php
new file mode 100644
index 0000000..12fc12e
--- /dev/null
+++ b/src/core/BuilderBlock/Block/Bootstrap/BootstrapBlock.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Core\BuilderBlock\Block\Bootstrap;
+
+use App\Core\BuilderBlock\BuilderBlock;
+use Symfony\Component\DependencyInjection\Attribute\AutoconfigureTag;
+
+class BootstrapBlock extends BuilderBlock
+{
+    public function configure()
+    {
+        $this->setCategory('Bootstrap');
+    }
+}
diff --git a/src/core/BuilderBlock/Block/Bootstrap/ColumnBuilderBlock.php b/src/core/BuilderBlock/Block/Bootstrap/ColumnBuilderBlock.php
new file mode 100644
index 0000000..5e2d961
--- /dev/null
+++ b/src/core/BuilderBlock/Block/Bootstrap/ColumnBuilderBlock.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Core\BuilderBlock\Block\Bootstrap;
+
+use App\Core\BuilderBlock\BuilderBlock;
+use Symfony\Component\DependencyInjection\Attribute\AutoconfigureTag;
+
+#[AutoconfigureTag('builder_block.widget')]
+class ColumnBuilderBlock extends BootstrapBlock
+{
+    public function configure()
+    {
+        parent::configure();
+
+        $this
+            ->setName('bsColumn')
+            ->setLabel('Column')
+            ->setIsContainer(true)
+            ->setClass('col-12 col-md-2 pr-md-1')
+            ->setTemplate('@Core/builder_block/bootstrap/column.html.twig')
+            ->setIcon('<i class="fas fa-columns"></i>')
+            ->addSetting(name: 'size', label: 'Extra small', type: 'number', attributes: ['min' => 0, 'max' => 12])
+            ->addSetting(name: 'sizeSm', label: 'Small', type: 'number', attributes: ['min' => 0, 'max' => 12])
+            ->addSetting(name: 'sizeMd', label: 'Medium', type: 'number', attributes: ['min' => 0, 'max' => 12])
+            ->addSetting(name: 'sizeLg', label: 'Large', type: 'number', attributes: ['min' => 0, 'max' => 12])
+            ->addSetting(name: 'sizeXl', label: 'Extra large', type: 'number', attributes: ['min' => 0, 'max' => 12])
+        ;
+    }
+}
diff --git a/src/core/BuilderBlock/Block/Bootstrap/ContainerBuilderBlock.php b/src/core/BuilderBlock/Block/Bootstrap/ContainerBuilderBlock.php
new file mode 100644
index 0000000..d8aed25
--- /dev/null
+++ b/src/core/BuilderBlock/Block/Bootstrap/ContainerBuilderBlock.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Core\BuilderBlock\Block\Bootstrap;
+
+use App\Core\BuilderBlock\BuilderBlock;
+use Symfony\Component\DependencyInjection\Attribute\AutoconfigureTag;
+
+#[AutoconfigureTag('builder_block.widget')]
+class ContainerBuilderBlock extends BootstrapBlock
+{
+    public function configure()
+    {
+        parent::configure();
+
+        $this
+            ->setName('bsContainer')
+            ->setLabel('Container')
+            ->setIsContainer(true)
+            ->setTemplate('@Core/builder_block/bootstrap/container.html.twig')
+            ->setIcon('<i class="fas fa-th"></i>')
+            ->addSetting(name: 'isFluid', label: 'Fluid', type: 'checkbox')
+        ;
+    }
+}
diff --git a/src/core/BuilderBlock/Block/Bootstrap/RowBuilderBlock.php b/src/core/BuilderBlock/Block/Bootstrap/RowBuilderBlock.php
new file mode 100644
index 0000000..0391db5
--- /dev/null
+++ b/src/core/BuilderBlock/Block/Bootstrap/RowBuilderBlock.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Core\BuilderBlock\Block\Bootstrap;
+
+use App\Core\BuilderBlock\BuilderBlock;
+use Symfony\Component\DependencyInjection\Attribute\AutoconfigureTag;
+
+#[AutoconfigureTag('builder_block.widget')]
+class RowBuilderBlock extends BootstrapBlock
+{
+    public function configure()
+    {
+        parent::configure();
+
+        $this
+            ->setName('bsRow')
+            ->setLabel('Row')
+            ->setIsContainer(true)
+            ->setIcon('<i class="fas fa-align-justify"></i>')
+            ->setTemplate('@Core/builder_block/bootstrap/row.html.twig')
+            ->addWidget('bsColumn')
+        ;
+    }
+}
diff --git a/src/core/BuilderBlock/Block/Editor/EditorBlock.php b/src/core/BuilderBlock/Block/Editor/EditorBlock.php
new file mode 100644
index 0000000..e8e377b
--- /dev/null
+++ b/src/core/BuilderBlock/Block/Editor/EditorBlock.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Core\BuilderBlock\Block\Editor;
+
+use App\Core\BuilderBlock\BuilderBlock;
+use Symfony\Component\DependencyInjection\Attribute\AutoconfigureTag;
+
+class EditorBlock extends BuilderBlock
+{
+    public function configure()
+    {
+        $this->setCategory('Editor');
+    }
+}
diff --git a/src/core/BuilderBlock/Block/Editor/TinymceBlock.php b/src/core/BuilderBlock/Block/Editor/TinymceBlock.php
new file mode 100644
index 0000000..05f140a
--- /dev/null
+++ b/src/core/BuilderBlock/Block/Editor/TinymceBlock.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Core\BuilderBlock\Block\Editor;
+
+use App\Core\BuilderBlock\BuilderBlock;
+use Symfony\Component\DependencyInjection\Attribute\AutoconfigureTag;
+
+#[AutoconfigureTag('builder_block.widget')]
+class TinymceBlock extends EditorBlock
+{
+    public function configure()
+    {
+        parent::configure();
+
+        $this
+            ->setName('tinymce')
+            ->setLabel('TinyMCE')
+            ->setIsContainer(false)
+            ->setIcon('<i class="fas fa-pencil-alt"></i>')
+            ->setTemplate('@Core/builder_block/editor/tinymce.html.twig')
+            ->addSetting(name: 'value', type: 'textarea', attributes: ['data-tinymce' => ''])
+        ;
+    }
+}
diff --git a/src/core/BuilderBlock/BuilderBlock.php b/src/core/BuilderBlock/BuilderBlock.php
new file mode 100644
index 0000000..a684989
--- /dev/null
+++ b/src/core/BuilderBlock/BuilderBlock.php
@@ -0,0 +1,172 @@
+<?php
+
+namespace App\Core\BuilderBlock;
+
+abstract class BuilderBlock
+{
+    protected string $name;
+    protected string $label;
+    protected ?string $class = null;
+    protected ?string $category = null;
+    protected array $settings = [];
+    protected array $widgets = [];
+    protected string $template = '';
+    protected bool $isContainer = false;
+    protected ?string $icon = null;
+
+    abstract public function configure();
+
+    public function setLabel(string $label): self
+    {
+        $this->label = $label;
+
+        return $this;
+    }
+
+    public function getLabel(): string
+    {
+        return $this->label;
+    }
+
+    public function setName(string $name): self
+    {
+        $this->name = $name;
+
+        return $this;
+    }
+
+    public function getName(): string
+    {
+        return $this->name;
+    }
+
+    public function setCategory(?string $category): self
+    {
+        $this->category = $category;
+
+        return $this;
+    }
+
+    public function getCategory(): ?string
+    {
+        return $this->category;
+    }
+
+    public function setIsContainer(bool $isContainer): self
+    {
+        $this->isContainer = $isContainer;
+
+        return $this;
+    }
+
+    public function getIsContainer(): bool
+    {
+        return $this->isContainer;
+    }
+
+    public function setWidgets(array $widgets): self
+    {
+        $this->widgets = $widgets;
+
+        return $this;
+    }
+
+    public function addWidget(string $widget): self
+    {
+        if (!in_array($widget, $this->widgets)) {
+            $this->widgets[] = $widget;
+        }
+
+        return $this;
+    }
+
+    public function getWidgets(): array
+    {
+        return $this->widgets;
+    }
+
+    public function setSettings(array $settings): self
+    {
+        $this->settings = $settings;
+
+        return $this;
+    }
+
+    public function addSetting(
+        string $name,
+        string $type = 'input',
+        ?string $label = null,
+        array $attributes = [],
+        array $extraOptions = [],
+        $default = null
+    ) {
+        $this->settings[$name] = [
+            'label' => $label,
+            'type' => $type,
+            'attr' => $attributes,
+            'default' => $default,
+        ];
+
+        foreach ($extraOptions as $key => $value) {
+            if (in_array($key, array_keys($this->settings[$name]))) {
+                $this->settings[$name][$key] = $value;
+            }
+        }
+
+        return $this;
+    }
+
+    public function getSettings(): array
+    {
+        return $this->settings;
+    }
+
+    public function setTemplate(string $template): self
+    {
+        $this->template = $template;
+
+        return $this;
+    }
+
+    public function getTemplate(): string
+    {
+        return $this->template;
+    }
+
+    public function toArray(): array
+    {
+        return [
+            'label' => $this->getLabel(),
+            'category' => $this->getCategory(),
+            'isContainer' => $this->getIsContainer(),
+            'widgets' => $this->getWidgets(),
+            'settings' => $this->getSettings(),
+            'class' => $this->getClass(),
+            'icon' => $this->getIcon(),
+        ];
+    }
+
+    public function setClass(?string $class): self
+    {
+        $this->class = $class;
+
+        return $this;
+    }
+
+    public function getClass(): ?string
+    {
+        return $this->class;
+    }
+
+    public function setIcon(?string $icon): self
+    {
+        $this->icon = $icon;
+
+        return $this;
+    }
+
+    public function getIcon(): ?string
+    {
+        return $this->icon;
+    }
+}
diff --git a/src/core/BuilderBlock/BuilderBlockContainer.php b/src/core/BuilderBlock/BuilderBlockContainer.php
new file mode 100644
index 0000000..980c8f3
--- /dev/null
+++ b/src/core/BuilderBlock/BuilderBlockContainer.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Core\BuilderBlock;
+
+class BuilderBlockContainer
+{
+    protected array $widgets = [];
+
+    public function addWidget(BuilderBlock $widget): void
+    {
+        $widget->configure();
+
+        $this->widgets[$widget->getName()] = $widget;
+    }
+
+    public function getWidgets(): array
+    {
+        return $this->widgets;
+    }
+
+    public function getWidget(string $name): BuilderBlock
+    {
+        return $this->widgets[$name];
+    }
+}
diff --git a/src/core/Controller/Editor/BuilderBlockController.php b/src/core/Controller/Editor/BuilderBlockController.php
new file mode 100644
index 0000000..9aeb0b4
--- /dev/null
+++ b/src/core/Controller/Editor/BuilderBlockController.php
@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Core\Controller\Editor;
+
+use App\Core\BuilderBlock\BuilderBlockContainer;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\Routing\Annotation\Route;
+use Symfony\Contracts\Translation\TranslatorInterface;
+
+#[Route(path: '/admin/editor/builder_block')]
+class BuilderBlockController extends AbstractController
+{
+    public function __construct(protected TranslatorInterface $translator)
+    {
+    }
+
+    #[Route(path: '/widgets', name: 'admin_editor_builder_block_widgets', options: ['expose' => true])]
+    public function widgets(BuilderBlockContainer $container): JsonResponse
+    {
+        $data = [];
+
+        foreach ($container->getWidgets() as $widget) {
+            $data[$widget->getName()] = $this->translate($widget->toArray());
+        }
+
+        return $this->json($data);
+    }
+
+    protected function translate(array $data)
+    {
+        $data['label'] = $this->translator->trans($data['label']);
+
+        foreach ($data['settings'] as $key => $value) {
+            $data['settings'][$key]['label'] = $this->translator->trans($data['settings'][$key]['label']);
+        }
+
+        return $data;
+    }
+}
diff --git a/src/core/DependencyInjection/Compiler/BuilderBlockPass.php b/src/core/DependencyInjection/Compiler/BuilderBlockPass.php
new file mode 100644
index 0000000..cdf019f
--- /dev/null
+++ b/src/core/DependencyInjection/Compiler/BuilderBlockPass.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Core\DependencyInjection\Compiler;
+
+use Symfony\Component\DependencyInjection\Compiler\CompilerPassInterface;
+use Symfony\Component\DependencyInjection\ContainerBuilder;
+use Symfony\Component\DependencyInjection\Reference;
+use App\Core\BuilderBlock\BuilderBlockContainer;
+
+class BuilderBlockPass implements CompilerPassInterface
+{
+    public function process(ContainerBuilder $container): void
+    {
+        if (!$container->has(BuilderBlockContainer::class)) {
+            return;
+        }
+
+        $definition = $container->findDefinition(BuilderBlockContainer::class);
+        $taggedServices = $container->findTaggedServiceIds('builder_block.widget');
+
+        foreach ($taggedServices as $id => $tags) {
+            $definition->addMethodCall('addWidget', [new Reference($id)]);
+        }
+    }
+}
diff --git a/src/core/DependencyInjection/CoreExtension.php b/src/core/DependencyInjection/CoreExtension.php
index 4708e21..4cac902 100644
--- a/src/core/DependencyInjection/CoreExtension.php
+++ b/src/core/DependencyInjection/CoreExtension.php
@@ -2,6 +2,7 @@
 
 namespace App\Core\DependencyInjection;
 
+use App\Core\DependencyInjection\Compiler\BuilderBlockPass;
 use Symfony\Component\DependencyInjection\ContainerBuilder;
 use Symfony\Component\DependencyInjection\Extension\Extension;
 
diff --git a/src/core/Entity/Site/Page/BuilderBlock.php b/src/core/Entity/Site/Page/BuilderBlock.php
index 7f63bb8..878c96f 100644
--- a/src/core/Entity/Site/Page/BuilderBlock.php
+++ b/src/core/Entity/Site/Page/BuilderBlock.php
@@ -12,7 +12,7 @@ class BuilderBlock extends JsonBlock
         $value = parent::getValue();
 
         if (is_string($value)) {
-            return json_decode($value);
+            return json_decode($value, true);
         }
 
         return [];
diff --git a/src/core/Resources/assets/js/components/builder-block/BuilderBlock.vue b/src/core/Resources/assets/js/components/builder-block/BuilderBlock.vue
index 9bacbdd..6a33b05 100644
--- a/src/core/Resources/assets/js/components/builder-block/BuilderBlock.vue
+++ b/src/core/Resources/assets/js/components/builder-block/BuilderBlock.vue
@@ -1,7 +1,8 @@
 <template>
-  <div class="block" :key="blockKey">
+  <div class="block" :key="blockKey" v-if="Object.keys(widgets).length">
     <BuilderBlockItem
       v-for="(block, key) in value"
+      :key="block.id + '-' + key"
       :item="block"
       :widgets="widgets"
       :isFirst="key === 0"
@@ -24,54 +25,11 @@
 <script>
 import BuilderBlockItem from './BuilderBlockItem'
 import BuilderBlockCreate from './BuilderBlockCreate'
+import Routing from '../../../../../../../../../friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js'
 
-const widgets = {
-  bsContainer: {
-    category: 'Boostrap',
-    label: 'Container',
-    settings: {
-    },
-    isContainer: true,
-    widgets: [],
-  },
-  bsRow: {
-    category: 'Boostrap',
-    label: 'Row',
-    settings: {
-    },
-    isContainer: true,
-    widgets: ['bsColumn'],
-  },
-  bsColumn: {
-    category: 'Boostrap',
-    label: 'Column',
-    settings: {
-      size: {label: 'Size', type: 'input', attr: {type: 'number'}},
-      sizeMd: {label: 'Size MD', type: 'input', attr: {type: 'number'}},
-    },
-    isContainer: true,
-    widgets: [],
-  },
-  tinymce: {
-    category: 'Editor',
-    label: 'TinyMCE',
-    settings: {
-      value: {label: 'Value', type: 'textarea', attr: {'data-tinymce': ''}},
-    },
-    isContainer: false,
-    widgets: [],
-  },
-  select: {
-    category: null,
-    label: 'Item with Select',
-    settings: {
-      value: {label: 'Value', type: 'select', attr: {}, options: [
-        {value: 'a', text: 'A'},
-        {value: 'b', text: 'B'},
-      ]}
-    },
-  }
-}
+const axios = require('axios').default
+const routes = require('../../../../../../../../../../public/js/fos_js_routes.json')
+Routing.setRoutingData(routes)
 
 export default {
   name: 'BuilderBlock',
@@ -92,7 +50,7 @@ export default {
   data() {
     return {
       value: this.initialValue,
-      widgets,
+      widgets: {},
       blockKey: 0
     }
   },
@@ -104,19 +62,23 @@ export default {
       document.querySelector('body').dispatchEvent(new Event('builder_block.update'))
     },
     moveBlockUp(key) {
-      const prev = this.value[key-1]
-      const current = this.value[key]
+      let newValue = this.value.map((x) => x)
+
+      newValue[key-1] = this.value[key]
+      newValue[key] = this.value[key-1]
+
+      this.value = newValue
 
-      this.value[key-1] = current
-      this.value[key] = prev
       ++this.blockKey
     },
     moveBlockDown(key) {
-      const next = this.value[key+1]
-      const current = this.value[key]
+      let newValue = this.value.map((x) => x)
+
+      newValue[key+1] = this.value[key]
+      newValue[key] = this.value[key+1]
+
+      this.value = newValue
 
-      this.value[key+1] = current
-      this.value[key] = next
       ++this.blockKey
     },
     removeBlock(key) {
@@ -129,6 +91,7 @@ export default {
       })
 
       this.value = newValue
+
       ++this.blockKey
     },
   },
@@ -138,6 +101,12 @@ export default {
   },
   mounted() {
     this.triggerBuilderBlockEvent()
+    const that = this
+
+    axios.get(Routing.generate('admin_editor_builder_block_widgets'))
+      .then((response) => {
+        that.widgets = response.data
+      })
   },
   created() {
     this.triggerBuilderBlockEvent()
@@ -146,40 +115,4 @@ export default {
     this.triggerBuilderBlockEvent()
   }
 }
-
-/*
-
-const blocks = [
-  {
-    widget: 'row',
-    settings: {},
-    children: [
-      {
-        widget: 'column',
-        settings: {
-          size: 12,
-          sizeMd: 6,
-        },
-        children: [
-          {
-            widget: 'tinymce',
-            settings: {
-              value: '<p>Hello, world!</p>',
-            },
-            children: null
-          },
-        ],
-      },
-      {
-        widget: 'column',
-        settings: {
-          size: 12,
-          sizeMd: 6,
-        },
-        children: [],
-      },
-    ]
-  }
-]
-*/
 </script>
diff --git a/src/core/Resources/assets/js/components/builder-block/BuilderBlockCreate.vue b/src/core/Resources/assets/js/components/builder-block/BuilderBlockCreate.vue
index 11588af..5714ad9 100644
--- a/src/core/Resources/assets/js/components/builder-block/BuilderBlockCreate.vue
+++ b/src/core/Resources/assets/js/components/builder-block/BuilderBlockCreate.vue
@@ -15,22 +15,30 @@
 
 .widget {
   display: inline-block;
+}
+
+.widget-content {
   background: #fff;
   padding: 10px;
   text-align: center;
   border-radius: 4px;
   cursor: pointer;
   margin-right: 5px;
+  margin-bottom: 5px;
   border: 1px solid #1e2430;
 }
 
+.widget-icon {
+  margin-top: 5px;
+  font-size: 25px;
+}
+
 .widget:hover {
   background: #eee;
 }
 
 .widget-label {
   font-weight: bold;
-  padding: 0 0 10px 0;
 }
 </style>
 
@@ -57,8 +65,13 @@
           v-on:click="add(name, widget)"
           class="widget col-3"
         >
-          <div class="widget-label">
-            {{ widget.label }}
+          <div class="widget-content">
+            <div class="widget-label">
+              {{ widget.label }}
+            </div>
+
+            <div class="widget-icon" v-if="widget.icon" v-html="widget.icon">
+            </div>
           </div>
         </div>
       </div>
@@ -91,10 +104,16 @@ export default {
   },
   methods: {
     add(name, widget) {
+      let settings = {}
+
+      for (let i in widget.settings) {
+        settings[i] = widget.settings[i].default
+      }
+
       this.container.push({
         id: this.makeId(),
         widget: name,
-        settings: {},
+        settings,
         children: [],
       })
 
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 fc8d884..0947210 100644
--- a/src/core/Resources/assets/js/components/builder-block/BuilderBlockItem.vue
+++ b/src/core/Resources/assets/js/components/builder-block/BuilderBlockItem.vue
@@ -43,6 +43,8 @@
       <div class="row">
         <BuilderBlockSetting
           v-for="(params, setting) in widget.settings"
+          :key="item.id + '-' + setting"
+          :class="widget.class"
           :item="item"
           :params="params"
           :setting="setting"
@@ -50,17 +52,18 @@
       </div>
     </div>
 
-    <div v-if="item.children !== null && item.children.length > 0" v-for="(child, key) in item.children">
-      <BuilderBlockItem
-        :item="child"
-        :widgets="widgets"
-        :isFirst="key === 0"
-        :isLast="key == Object.keys(item.children)[Object.keys(item.children).length -1]"
-        @remove-item="removeBlock(key)"
-        @move-item-up="moveBlockUp(key)"
-        @move-item-down="moveBlockDown(key)"
-      />
-    </div>
+    <BuilderBlockItem
+      v-if="item.children !== null && item.children.length > 0"
+      v-for="(child, key) in item.children"
+      :key="child.id"
+      :item="child"
+      :widgets="widgets"
+      :isFirst="key === 0"
+      :isLast="key == Object.keys(item.children)[Object.keys(item.children).length -1]"
+      @remove-item="removeBlock(key)"
+      @move-item-up="moveBlockUp(key)"
+      @move-item-down="moveBlockDown(key)"
+    />
 
     <div v-if="widget.isContainer" class="container">
       <BuilderBlockCreate
@@ -117,19 +120,23 @@ export default {
       this.$emit('move-item-down')
     },
     moveBlockUp(key) {
-      const prev = this.item.children[key-1]
-      const current = this.item.children[key]
+      let newValue = this.item.children.map((x) => x)
+
+      newValue[key-1] = this.item.children[key]
+      newValue[key] = this.item.children[key-1]
+
+      this.item.children = newValue
 
-      this.item.children[key-1] = current
-      this.item.children[key] = prev
       ++this.blockKey
     },
     moveBlockDown(key) {
-      const next = this.item.children[key+1]
-      const current = this.item.children[key]
+      let newValue = this.item.children.map((x) => x)
+
+      newValue[key+1] = this.item.children[key]
+      newValue[key] = this.item.children[key+1]
+
+      this.item.children = newValue
 
-      this.item.children[key+1] = current
-      this.item.children[key] = next
       ++this.blockKey
     },
     removeBlock(key) {
@@ -143,7 +150,7 @@ export default {
 
       this.item.children = children
       ++this.blockKey
-    }
+    },
   },
   components: {
     BuilderBlockCreate,
@@ -151,6 +158,9 @@ export default {
   },
   mounted() {
     this.widget = this.widgets[this.item.widget]
+  },
+  updated() {
+    document.querySelector('body').dispatchEvent(new Event('builder_block.update'))
   }
 }
 </script>
diff --git a/src/core/Resources/assets/js/components/builder-block/BuilderBlockSetting.vue b/src/core/Resources/assets/js/components/builder-block/BuilderBlockSetting.vue
index c3adcbd..89d12df 100644
--- a/src/core/Resources/assets/js/components/builder-block/BuilderBlockSetting.vue
+++ b/src/core/Resources/assets/js/components/builder-block/BuilderBlockSetting.vue
@@ -1,17 +1,25 @@
 <template>
-  <div class="col-12 form-group">
+  <div class="form-group">
     <label
-      v-if="params.label"
-      v-text="params.label">
+      v-if="params.label && params.type !== 'checkbox'"
+      v-text="params.label"
+    >
     </label>
 
     <input
-      v-if="params.type == 'input'"
+      v-if="['number', 'checkbox', 'text'].includes(params.type)"
       v-model="item.settings[setting]"
       v-bind="params.attr"
-      class="form-control"
+      :type="params.type"
+      :class="{'form-control': params.type !== 'checkbox'}"
     />
 
+    <label
+      v-if="params.label && params.type == 'checkbox'"
+      v-text="params.label"
+    >
+    </label>
+
     <textarea
       v-if="params.type == 'textarea'"
       v-model="item.settings[setting]"
@@ -49,9 +57,5 @@ export default {
       required: true,
     }
   },
-  data() {
-    return {
-    }
-  },
 }
 </script>
diff --git a/src/core/Resources/assets/js/components/file-manager/Files.vue b/src/core/Resources/assets/js/components/file-manager/Files.vue
index 4690a75..581170c 100644
--- a/src/core/Resources/assets/js/components/file-manager/Files.vue
+++ b/src/core/Resources/assets/js/components/file-manager/Files.vue
@@ -201,7 +201,6 @@ import Routing from '../../../../../../../../../friendsofsymfony/jsrouting-bundl
 import FileIcon from './FileIcon'
 
 const axios = require('axios').default
-const $ = require('jquery')
 const routes = require('../../../../../../../../../../public/js/fos_js_routes.json')
 
 Routing.setRoutingData(routes)
diff --git a/src/core/Resources/translations/messages.fr.yaml b/src/core/Resources/translations/messages.fr.yaml
index d7c2b7d..0021fb2 100644
--- a/src/core/Resources/translations/messages.fr.yaml
+++ b/src/core/Resources/translations/messages.fr.yaml
@@ -224,3 +224,8 @@
 "All roles": "Tous les rôles"
 "Enable A/B Testing": "Activer le test A/B"
 "Color": "Couleur"
+"Extra small": "Très petit"
+"Small": "Petit"
+"Medium": "Moyen"
+"Large": "Large"
+"Extra large": "Très large"
diff --git a/src/core/Resources/views/builder_block/bootstrap/column.html.twig b/src/core/Resources/views/builder_block/bootstrap/column.html.twig
new file mode 100644
index 0000000..b9967f1
--- /dev/null
+++ b/src/core/Resources/views/builder_block/bootstrap/column.html.twig
@@ -0,0 +1,13 @@
+{% set sizes = {
+    'col-': settings.size|default(null),
+    'col-xs-': settings.sizeXs|default(null),
+    'col-md-': settings.sizeMd|default(null),
+    'col-lg-': settings.sizeLg|default(null),
+    'col-xl-': settings.sizeXl|default(null),
+} %}
+
+<div class="col {% for i, v in sizes%}{% if v|length %}{{ i }}{{ v }} {% endif %}{% endfor -%}" id="{{ id }}">
+    {% for item in children %}
+        {{ item|block_to_html }}
+    {% endfor %}
+</div>
diff --git a/src/core/Resources/views/builder_block/bootstrap/container.html.twig b/src/core/Resources/views/builder_block/bootstrap/container.html.twig
new file mode 100644
index 0000000..9c9fcb5
--- /dev/null
+++ b/src/core/Resources/views/builder_block/bootstrap/container.html.twig
@@ -0,0 +1,5 @@
+<div class="container{% if settings.isFluid|default(false) %}-fluid{% endif %}" id="{{ id }}">
+    {% for item in children %}
+        {{ item|block_to_html }}
+    {% endfor %}
+</div>
diff --git a/src/core/Resources/views/builder_block/bootstrap/row.html.twig b/src/core/Resources/views/builder_block/bootstrap/row.html.twig
new file mode 100644
index 0000000..6f8bdb0
--- /dev/null
+++ b/src/core/Resources/views/builder_block/bootstrap/row.html.twig
@@ -0,0 +1,5 @@
+<div class="row" id="{{ id }}">
+    {% for item in children %}
+        {{ item|block_to_html }}
+    {% endfor %}
+</div>
diff --git a/src/core/Resources/views/builder_block/editor/tinymce.html.twig b/src/core/Resources/views/builder_block/editor/tinymce.html.twig
new file mode 100644
index 0000000..23fa2e1
--- /dev/null
+++ b/src/core/Resources/views/builder_block/editor/tinymce.html.twig
@@ -0,0 +1 @@
+{{ settings.value|default(null)|file_attributes|murph_url|raw }}
diff --git a/src/core/Twig/Extension/BuilderBlockExtension.php b/src/core/Twig/Extension/BuilderBlockExtension.php
new file mode 100644
index 0000000..a8ab5f3
--- /dev/null
+++ b/src/core/Twig/Extension/BuilderBlockExtension.php
@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Core\Twig\Extension;
+
+use App\Core\BuilderBlock\BuilderBlockContainer;
+use Twig\Environment;
+use Twig\Extension\AbstractExtension;
+use Twig\TwigFilter;
+
+class BuilderBlockExtension extends AbstractExtension
+{
+    public function __construct(protected Environment $twig, protected BuilderBlockContainer $container)
+    {
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function getFilters()
+    {
+        return [
+            new TwigFilter('block_to_html', [$this, 'buildHtml'], ['is_safe' => ['html']]),
+        ];
+    }
+
+    public function buildHtml($data): string
+    {
+        if (null === $data) {
+            return null;
+        }
+
+        if (isset($data['widget'])) {
+            return $this->twig->render($this->container->getWidget($data['widget'])->getTemplate(), [
+                'id' => $data['id'],
+                'settings' => $data['settings'],
+                'children' => $data['children'],
+            ]);
+        }
+
+        $render = '';
+        foreach ($data as $item) {
+            $render .= $this->buildHtml($item);
+        }
+
+        return $render;
+    }
+}

From 2d49b8ddee1af60306c11fca46e8ac364fc61e25 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Sun, 12 May 2024 22:40:52 +0200
Subject: [PATCH 5/6] move build add button

---
 src/core/Resources/assets/css/admin.scss                  | 8 --------
 .../assets/js/components/builder-block/BuilderBlock.vue   | 2 +-
 2 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/core/Resources/assets/css/admin.scss b/src/core/Resources/assets/css/admin.scss
index 099dfe7..854b818 100644
--- a/src/core/Resources/assets/css/admin.scss
+++ b/src/core/Resources/assets/css/admin.scss
@@ -801,12 +801,4 @@ label.required::after {
     font-size: 12px;
     margin-right: 5px;
   }
-
-  .builder-add {
-    text-align: center;
-
-    .picker {
-      text-align: left;
-    }
-  }
 }
diff --git a/src/core/Resources/assets/js/components/builder-block/BuilderBlock.vue b/src/core/Resources/assets/js/components/builder-block/BuilderBlock.vue
index 6a33b05..fd0229f 100644
--- a/src/core/Resources/assets/js/components/builder-block/BuilderBlock.vue
+++ b/src/core/Resources/assets/js/components/builder-block/BuilderBlock.vue
@@ -92,7 +92,7 @@ export default {
 
       this.value = newValue
 
-      ++this.blockKey
+      // ++this.blockKey
     },
   },
   components: {

From 9324837bd97d45f96fa8d0fa7e86e7bd0d235b07 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Sun, 12 May 2024 22:48:30 +0200
Subject: [PATCH 6/6] update changelog

---
 CHANGELOG.md       | 2 ++
 src/core/Murph.php | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ee0b94a..3e54b10 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,8 @@
 ## [Unreleased]
 
+# [v1.25.0] - 2024-05-12
 ### Added
+* add block builder widget
 * allow to use `window.tinymceModes` to add or override tinymce modes
 * add border color on tinymce editor
 ### Fixed
diff --git a/src/core/Murph.php b/src/core/Murph.php
index aa86fda..07a1b39 100644
--- a/src/core/Murph.php
+++ b/src/core/Murph.php
@@ -3,7 +3,7 @@
 namespace App\Core;
 
 if (!defined('MURPH_VERSION')) {
-    define('MURPH_VERSION', 'v1.24.1');
+    define('MURPH_VERSION', 'v1.25.0');
 }
 
 /**