Merge branch 'feat/editorjs-layout-plugin' into 'main'

add layout

See merge request jjimenez/safekat!586

ci4/app/Views/themes/vuexy/wiki/pages/render.php

@@ -72,7 +72,7 @@ use CodeIgniter\I18n\Time;
                         <input type="hidden" name="wiki_page_id" id="wiki-content-id">
                     </form>
                     <div class="col-md-12">
-                        <div id="editorjs"></div>
+                        <div id="editorjs" ></div>
                     </div>
                 </div>
             </div><!--//.card-body -->
@@ -88,6 +88,7 @@ use CodeIgniter\I18n\Time;
 
 <?= $this->section('css') ?>
 <link rel="stylesheet" href="<?= site_url('themes/vuexy/vendor/libs/sweetalert2/sweetalert2.css') ?>" />
+<link rel="stylesheet" href="<?= site_url('themes/vuexy/css/editorjs.css') ?>" />
 <?= $this->endSection() ?>
 
 <?= $this->section("additionalExternalJs") ?>

httpdocs/assets/js/safekat/components/editorjs/WikiEditor.js

@@ -5,6 +5,7 @@ import '../../../../../themes/vuexy/js/editorjs/toc.js';
 import '../../../../../themes/vuexy/js/editorjs/list.js';
 import '../../../../../themes/vuexy/js/editorjs/tune.js';
 import '../../../../../themes/vuexy/js/editorjs/table.js';
+import '../../../../../themes/vuexy/js/editorjs/columns.js';
 import '../../../../../../themes/vuexy/js/editorjs/image.js';
 import '../../../../../../themes/vuexy/js/editorjs/alert.js';
 import '../../../../../../themes/vuexy/js/editorjs/header.js';
@@ -27,7 +28,24 @@ class WikiEditor extends TranslationHelper {
     }
     async initEditor() {
         this.wikiFormSection.init()
-
+        const editorJSConfig = {
+            tools: {
+                image: {
+                    class: ImageTool,
+                    config: {
+                        features: {
+                            border: true,
+                            caption: 'optional',
+                            stretch: false
+                        },
+                        endpoints: {
+                            byFile: `/wiki/file/upload/${this.sectionId}`, // Your backend file uploader endpoint
+                            byUrl: 'fetchUrl', // Your endpoint that provides uploading by Url
+                        }
+                    }
+                },
+            }
+        };
         await this.get_translations("Wiki")
         this.editor = new EditorJS({
             holder: 'editorjs',
@@ -40,6 +58,67 @@ class WikiEditor extends TranslationHelper {
                 },
             },
             tools: {
+
+                twoColumns: {
+                    class: EditorJSLayout.LayoutBlockTool,
+                    shortcut: "CMD+2",
+                    toolbox: {
+                        icon: `
+                            <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="24"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            >
+                            <path d="M3 3m0 1a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v16a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1zm9 -1v18" />
+                            </svg>
+                        `,
+                        title: "2 Columns",
+                    },
+                    config: {
+                        EditorJS,
+                        editorJSConfig,
+                        enableLayoutEditing: true,
+                        enableLayoutSaving: true,
+                        initialData: {
+                            itemContent: {
+                                1: {
+                                    blocks: [],
+                                },
+                                2: {
+                                    blocks: [],
+                                },
+                            },
+                            layout: {
+                                type: "div",
+                                id: "",
+                                className: "col-md-12 layout-block",
+                                style: "display: flex; justify-content: space-around; padding: 16px;width:100%;",
+                                children: [
+                                    {
+                                        type: "item",
+                                        id: "",
+                                        style: "display: inline-block; ",
+                                        className: "col-md-6 layout-block",
+                                        itemContentId: "1",
+                                    },
+                                    {
+                                        type: "item",
+                                        id: "",
+                                        className: "col-md-6 layout-block",
+                                        style: "display: inline-block; ",
+                                        itemContentId: "2",
+                                    },
+                                ],
+                            },
+                        },
+                    }
+                },
                 toc: TOC,
                 header: {
                     class: Header,

httpdocs/themes/vuexy/css/editorjs.css

@@ -0,0 +1,11 @@
+.ce-block__content,
+.ce-toolbar__content {
+  max-width: 90%;
+}
+.layout-block {
+  z-index: 0 !important;
+}
+
+.cdx-block:hover{
+    background-color : #F8FAFC
+}