Changes to be committed:

	modified:   include/Module/Article/Assets/dist/editor.js
	modified:   include/Module/Article/Assets/src/editor.js
	modified:   include/Module/Editor/Assets/dist/main.js
	modified:   include/Module/Editor/Assets/src/parts/App.tsx
	modified:   include/Module/Editor/Blocks.php
	new file:   include/Module/Editor/Blocks/button/render.php
	new file:   include/Module/Editor/Blocks/carousel-control-next/render.php
	new file:   include/Module/Editor/Blocks/carousel-control-prev/render.php
	new file:   include/Module/Editor/Blocks/carousel-indicators/render.php
	new file:   include/Module/Editor/Blocks/carousel-inner/render.php
	new file:   include/Module/Editor/Blocks/carousel-item/render.php
	new file:   include/Module/Editor/Blocks/carousel/render.php
	modified:   include/Module/Editor/Blocks/image/render.php
	new file:   include/Module/Editor/Blocks/nav-item/render.php
	new file:   include/Module/Editor/Blocks/nav-link/render.php
	new file:   include/Module/Editor/Blocks/navbar-brand/render.php
	new file:   include/Module/Editor/Blocks/navbar-collapse/render.php
	new file:   include/Module/Editor/Blocks/navbar-nav/render.php
	new file:   include/Module/Editor/Blocks/navbar-toggler/render.php
	new file:   include/Module/Editor/Blocks/navbar/render.php
	modified:   include/Module/Editor/Blocks/text/render.php

include/Module/Article/Assets/dist/editor.js

@@ -11126,7 +11126,7 @@ editor.callback = function (data) {
   var modal = editor.Modal;
   var isComplete = false;
   if (!saveEndpoint) {
-    _il4mb_merapipanel_toast__WEBPACK_IMPORTED_MODULE_0__("Please set save endpoint", 5, "text-danger");
+    (0,_il4mb_merapipanel_toast__WEBPACK_IMPORTED_MODULE_0__.toast)("Please set save endpoint", 5, "text-danger");
     return;
   }
   modal.open({
@@ -11146,7 +11146,7 @@ editor.callback = function (data) {
     e.preventDefault();
     console.clear();
     if (!form[0].checkValidity()) {
-      _il4mb_merapipanel_toast__WEBPACK_IMPORTED_MODULE_0__("Please enter valid data", 5, "text-danger");
+      (0,_il4mb_merapipanel_toast__WEBPACK_IMPORTED_MODULE_0__.toast)("Please enter valid data", 5, "text-danger");
       return;
     }
     isComplete = true;
@@ -11174,7 +11174,7 @@ editor.callback = function (data) {
       } else {
         window.article = response.data;
       }
-      _il4mb_merapipanel_toast__WEBPACK_IMPORTED_MODULE_0__((_response$message = response.message) !== null && _response$message !== void 0 ? _response$message : "Saved", 5, 'text-success');
+      (0,_il4mb_merapipanel_toast__WEBPACK_IMPORTED_MODULE_0__.toast)((_response$message = response.message) !== null && _response$message !== void 0 ? _response$message : "Saved", 5, 'text-success');
       if (window.history.replaceState && (_window$article10 = window.article) !== null && _window$article10 !== void 0 && (_window$article10 = _window$article10.settings) !== null && _window$article10 !== void 0 && _window$article10.prefix && (_window$article11 = window.article) !== null && _window$article11 !== void 0 && (_window$article11 = _window$article11.settings) !== null && _window$article11 !== void 0 && _window$article11.path_edit) {
         var target = window.article.settings.prefix + window.article.settings.path_edit.replace("{id}", response.data.id);
         window.history.replaceState(null, null, target);

include/Module/Article/Assets/src/editor.js

@@ -1,4 +1,4 @@
-import * as toast from "@il4mb/merapipanel/toast";
+import {toast} from "@il4mb/merapipanel/toast";
 import * as http from "@il4mb/merapipanel/http";
 
 const form = $(`<form class="needs-validation">`)

include/Module/Editor/Assets/src/parts/App.tsx

@@ -94,7 +94,7 @@ const ___InitRegisterBlocks = async (editor: Editor, blocks: any[], setLoadingWi
         setLoadingWidth(__current => __current + persentage);
     }
 
-    editor.load();
+    editor.refresh();
     setTimeout(() => setLoadingWidth(100), 1000);
 
 }

include/Module/Editor/Blocks.php

@@ -48,7 +48,7 @@ function render($components = [])
             ];
 
             $rendered = [];
-            foreach ($components as $component) {
+            foreach ($components as $key => $component) {
 
                 $type = $component['type'] ?? null;
 
@@ -90,11 +90,13 @@ function render($components = [])
                     $blockName = $type;
                 }
 
+
                 $fragment = Path::join(Box::module($module)->path, "Blocks", $blockName, "render.php");
                 if (!file_exists($fragment)) {
                     $rendered[] = "<div class='text-center border border-warning bg-dark bg-opacity-10 py-3'>Block $module:$blockName</div>";
                 }
-                $rendered[] = blockContext($component, $fragment);
+                $rendered[] = blockContext($component, $fragment, $key);
+
 
             }
             return implode("", $rendered);
@@ -115,13 +117,33 @@ function renderComponents($components = [])
         return Box::module("Editor")->Blocks->render($components);
     }
 
-    function blockContext($component, $fragment)
+    function blockContext($component, $__fragment, $__index = 0)
     {
 
         extract($component);
+        if (!isset($attributes)) {
+            $attributes = [];
+        } else {
+            $attributes = array_map(function ($item) {
+                if (is_object($item)) {
+                    $item = implode(";", json_decode(json_encode($item), true));
+                } else if (is_array($item)) {
+                    $item = implode(";", $item);
+                }
+                return $item;
+            }, $attributes);
+        }
+        if (!isset($classes)) {
+            $classes = [];
+        }
+        $className = null;
+        if (count($classes)) {
+            $className = implode(" ", $classes);
+        }
+
 
         ob_start();
-        include $fragment;
+        include $__fragment;
         return ob_get_clean();
     }
 }

include/Module/Editor/Blocks/button/render.php

@@ -0,0 +1,4 @@
+<button <?= !empty($className) ? 'class="' . $className . '"' : '' ?> type="button" <?= implode(" ", array_map(function($key, $value) { return $key . '="' . $value . '"'; }, array_keys($attributes), array_values($attributes))) ?>>
+   <?= renderComponents($components) ?>
+</button>
+

include/Module/Editor/Blocks/carousel-control-next/render.php

@@ -0,0 +1,4 @@
+<button class="carousel-control-prev" type="button" <?= isset($attributes['data-bs-target']) ? " data-bs-target=\"" . $attributes['data-bs-target'] . "\"" : "" ?> data-bs-slide="prev">
+    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+    <span class="visually-hidden">Previous</span>
+</button>

include/Module/Editor/Blocks/carousel-control-prev/render.php

@@ -0,0 +1,5 @@
+<button class="carousel-control-next" type="button" <?= isset($attributes['data-bs-target']) ? " data-bs-target=\"" . $attributes['data-bs-target'] . "\"" : "" ?> data-bs-slide="next">
+    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+    <span class="visually-hidden">Next</span>
+</button>
+

include/Module/Editor/Blocks/carousel-indicators/render.php

@@ -0,0 +1,7 @@
+<?php
+$class = " class=\"" . implode(" ", $classes ?? []) . "\"";
+?>
+
+<div class="carousel-indicators">
+    <?= renderComponents($components) ?>
+</div>

include/Module/Editor/Blocks/carousel-inner/render.php

@@ -0,0 +1,5 @@
+<?php
+$class = " class=\"" . implode(" ", $classes ?? []) . "\"";
+?>
+
+<div class="carousel-inner"><?= renderComponents($components) ?></div>

include/Module/Editor/Blocks/carousel-item/render.php

@@ -0,0 +1,6 @@
+
+
+<div class="carousel-item<?= $__index == 0 ? " active" : "" ?>" <?= implode(" ", array_map(function($attr) use ($attributes) { return $attr . "=\"" . $attributes[$attr] . "\""; }, array_keys($attributes))) ?>>
+<?= renderComponents($components) ?>
+</div>
+

include/Module/Editor/Blocks/carousel/render.php

@@ -0,0 +1,8 @@
+<?php
+$class = " class=\"" . implode(" ", $classes ?? []) . "\"";
+?>
+
+<div class="carousel slide" <?= isset($attributes['id']) ? 'id="' . $attributes['id'] . '"' : '' ?>>
+<?= renderComponents($components) ?>
+</div>
+

include/Module/Editor/Blocks/image/render.php

@@ -1,5 +1,5 @@
 <?php
-$class = " class=\"" . implode(" ", $classes ?? []) . "\"";
+
 ?>
 
-<img<?= $class ?> <?= implode(" ", array_map(function($attr) use ($attributes) { return $attr . "=\"" . $attributes[$attr] . "\""; }, array_keys($attributes))) ?> />
+<img<?= !empty($className) ? ' class="' . $className . '"' : '' ?> <?= implode(" ", array_map(function($attr) use ($attributes) { return $attr . "=\"" . $attributes[$attr] . "\""; }, array_keys($attributes))) ?> />

include/Module/Editor/Blocks/nav-item/render.php

@@ -0,0 +1,4 @@
+<li class="nav-item" <?= implode(" ", array_map(function ($key, $value) {
+    return $key . '="' . $value . '"'; }, array_keys($attributes), array_values($attributes))) ?>>
+    <?= renderComponents($components) ?>
+</li>

include/Module/Editor/Blocks/nav-link/render.php

@@ -0,0 +1,3 @@
+<a <?= !empty($className) ? ' class="' . $className . '"' : '' ?> <?= implode(" ", array_map(fn($k, $v) => "$k=\"$v\"", array_keys($attributes), array_values($attributes))) ?>>
+<?= renderComponents($components) ?>
+</a>

include/Module/Editor/Blocks/navbar-brand/render.php

@@ -0,0 +1,8 @@
+<?php
+
+?>
+
+<a class="navbar-brand" <?= implode(" ", array_map(function ($key, $value) {
+    return $key . '="' . $value . '"'; }, array_keys($attributes), array_values($attributes))) ?>>
+    <?= renderComponents($components) ?>
+</a>

include/Module/Editor/Blocks/navbar-collapse/render.php

@@ -0,0 +1,9 @@
+<?php
+
+?>
+
+<div class="collapse navbar-collapse"  <?= implode(" ", array_map(function ($key, $value) {
+    return $key . '="' . $value . '"'; }, array_keys($attributes), array_values($attributes))) ?>>
+    <?= renderComponents($components) ?>
+</div>
+

include/Module/Editor/Blocks/navbar-nav/render.php

@@ -0,0 +1,9 @@
+<?php
+
+?>
+
+<ul class="navbar-nav me-auto mb-2 mb-lg-0" <?= implode(" ", array_map(function ($key, $value) {
+    return $key . '="' . $value . '"'; }, array_keys($attributes), array_values($attributes))) ?>>
+    <?= renderComponents($components) ?>
+</ul>
+

include/Module/Editor/Blocks/navbar-toggler/render.php

@@ -0,0 +1,9 @@
+<?php
+
+?>
+
+<button class="navbar-toggler" <?= implode(" ", array_map(function ($key, $value) {
+    return $key . '="' . $value . '"'; }, array_keys($attributes), array_values($attributes))) ?>>
+    <span class="navbar-toggler-icon"></span>
+</button>
+

include/Module/Editor/Blocks/navbar/render.php

@@ -0,0 +1,4 @@
+<nav
+   <?= !empty($className) ? "class='" . $className . "'" : "" ?> role="navigation"><?= renderComponents($components) ?>
+</nav>
+

include/Module/Editor/Blocks/text/render.php

@@ -1,5 +1,8 @@
 <?php
 
-?>
 
-<p><?= renderComponents($components) ?></p>
+if (isset($tagName)) {
+   echo "<$tagName>" . renderComponents($components) . "</$tagName>";
+} else {
+   echo renderComponents($components);
+}