Ticket #4667 - Intergrate Grapesjs for all "HTML" blocks in page builder, Massmailer and Email Templates. Point 1.

install/sql/system.sql

@@ -5773,7 +5773,7 @@ CREATE TABLE IF NOT EXISTS `sys_pages_blocks` (
   `async` int(11) NOT NULL DEFAULT '0',
   `visible_for_levels` int(11) NOT NULL DEFAULT '2147483647',
   `hidden_on` varchar(255) NOT NULL DEFAULT '',
-  `type` enum('raw','html','lang','image','rss','menu','custom','service','wiki') NOT NULL DEFAULT 'raw',
+  `type` enum('raw','html','layout','lang','image','rss','menu','custom','service','wiki') NOT NULL DEFAULT 'raw',
   `content` text NOT NULL,
   `content_empty` varchar(255) NOT NULL DEFAULT '',
   `text` mediumtext NOT NULL,
@@ -5794,6 +5794,7 @@ CREATE TABLE IF NOT EXISTS `sys_pages_blocks` (
 INSERT INTO `sys_pages_blocks` (`object`, `cell_id`, `module`, `title`, `designbox_id`, `visible_for_levels`, `type`, `content`, `deletable`, `copyable`, `active`, `order`) VALUES
 ('', 0, 'skeletons', '_sys_block_type_raw', 11, 2147483647, 'raw', '', 0, 1, 1, 0),
 ('', 0, 'skeletons', '_sys_block_type_html', 11, 2147483647, 'html', '', 0, 1, 1, 0),
+('', 0, 'skeletons', '_sys_block_type_layout', 11, 2147483647, 'layout', '', 0, 1, 1, 0),
 ('', 0, 'skeletons', '_sys_block_type_rss', 11, 2147483647, 'rss', '', 0, 1, 1, 0),
 ('', 0, 'skeletons', '_sys_block_type_image', 11, 2147483647, 'image', '', 0, 1, 1, 0),
 ('', 0, 'skeletons', '_sys_block_type_lang', 11, 2147483647, 'lang', '', 0, 1, 1, 0),

modules/boonex/english/data/langs/system/en.xml

@@ -2217,6 +2217,7 @@ If it is not enabled then please consider implement this optimization, since it
 	<string name="_sys_block_type_html"><![CDATA[html]]></string>
 	<string name="_sys_block_type_image"><![CDATA[image]]></string>
 	<string name="_sys_block_type_lang"><![CDATA[lang]]></string>
+        <string name="_sys_block_type_layout"><![CDATA[layout]]></string>
 	<string name="_sys_block_type_menu"><![CDATA[menu]]></string>
 	<string name="_sys_block_type_raw"><![CDATA[raw]]></string>
 	<string name="_sys_block_type_rss"><![CDATA[rss]]></string>

modules/boonex/russian/data/langs/system/ru.xml

@@ -2192,6 +2192,7 @@
 	<string name="_sys_block_type_html"><![CDATA[html]]></string>
 	<string name="_sys_block_type_image"><![CDATA[изображение]]></string>
 	<string name="_sys_block_type_lang"><![CDATA[язык]]></string>
+        <string name="_sys_block_type_layout"><![CDATA[дизайн]]></string>
 	<string name="_sys_block_type_menu"><![CDATA[меню]]></string>
 	<string name="_sys_block_type_raw"><![CDATA[без обработки]]></string>
 	<string name="_sys_block_type_rss"><![CDATA[rss]]></string>

studio/classes/BxDolStudioBuilderPage.php

@@ -14,6 +14,7 @@ define('BX_DOL_STUDIO_BP_TYPE_DEFAULT', BX_DOL_STUDIO_MODULE_SYSTEM);
 
 define('BX_DOL_STUDIO_BP_BLOCK_RAW', 'raw');
 define('BX_DOL_STUDIO_BP_BLOCK_HTML', 'html');
+define('BX_DOL_STUDIO_BP_BLOCK_LAYOUT', 'layout');
 define('BX_DOL_STUDIO_BP_BLOCK_RSS', 'rss');
 define('BX_DOL_STUDIO_BP_BLOCK_IMAGE', 'image');
 define('BX_DOL_STUDIO_BP_BLOCK_LANG', 'lang');

studio/template/bp_block_skeleton_layout.html

@@ -0,0 +1,40 @@
+<div class="bx-form-input-wrapper bx-form-input-wrapper-textarea">
+    <textarea id="__html_id__-html" class="hidden" name="content">__content_html__</textarea>
+    <textarea id="__html_id__-data" class="hidden">__content_data__</textarea>
+    <div id="__html_id__" class="bx-form-input-textarea"></div>
+</div>
+<script type="text/javascript">
+    var inlineStorage = null;
+    if(inlineStorage == undefined) {
+        inlineStorage = (editor) => {
+            const oStorageData = document.getElementById('__html_id__-data');
+            const oStorageHtml = document.getElementById('__html_id__-html');
+
+            editor.Storage.add('inline', {
+                load() {
+                  return JSON.parse(oStorageData.value || '{}');
+                },
+                store(data) {
+                  const component = editor.Pages.getSelected().getMainComponent();
+
+                  oStorageData.value = JSON.stringify(data);
+                  oStorageHtml.value = `<style>${editor.getCss({ component })}</style>${editor.getHtml({ component })}`;
+                }
+            });
+        };
+    }
+
+    var oBuilder = grapesjs.init({
+        container : '#__html_id__',
+        plugins: [inlineStorage, 'gjs-blocks-basic', 'grapesjs-style-bg', 'grapesjs-preset-webpage'],
+        pluginsOpts: {
+            'gjs-blocks-basic': { flexGrid: true },
+            'grapesjs-preset-webpage': {}
+        },
+        storageManager: { 
+            type: 'inline',
+            autosave: true,
+            autoload: true
+        }
+    });
+</script>

studio/template/scripts/BxBaseStudioBuilderPage.php

@@ -40,6 +40,7 @@ class BxBaseStudioBuilderPage extends BxDolStudioBuilderPage
         'create_block_popup_id' => 'adm-bp-create-block-popup',
         'edit_block_popup_id' => 'adm-bp-edit-block-popup',
     	'edit_block_editor_id' => 'adm-bp-edit-block-editor',
+        'edit_block_builder_id' => 'adm-bp-edit-block-builder',
         'block_id' => 'adm-bpb-',
         'block_list_id' => 'adm-bpl-',
         'block_lists_id' => 'adm-bp-block-lists',
@@ -84,6 +85,7 @@ class BxBaseStudioBuilderPage extends BxDolStudioBuilderPage
 
         return array_merge(parent::getPageCss(), array(
             BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'codemirror/|codemirror.css',
+            BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'grapesjs/|grapes.min.css',
             'page_layouts.css', 
             'builder_page.css'
         ));
@@ -93,6 +95,10 @@ class BxBaseStudioBuilderPage extends BxDolStudioBuilderPage
     {
         return array_merge(parent::getPageJs(), array(
             'codemirror/codemirror.min.js',
+            'grapesjs/grapes.min.js',
+            'grapesjs/grapesjs-blocks-basic.js',
+            'grapesjs/grapesjs-style-bg.js',
+            'grapesjs/grapesjs-preset-webpage.min.js',
             'jquery-ui/jquery-ui.min.js',
             'jquery.ui.touch-punch.min.js',
             'jquery.easing.js',
@@ -1508,6 +1514,10 @@ class BxBaseStudioBuilderPage extends BxDolStudioBuilderPage
             case BX_DOL_STUDIO_BP_BLOCK_HTML:
             	$sResult = 'code';
             	break;
+            
+            case BX_DOL_STUDIO_BP_BLOCK_LAYOUT:
+            	$sResult = 'object-group';
+            	break;
 
             case BX_DOL_STUDIO_BP_BLOCK_RSS:
             	$sResult = 'rss';
@@ -1611,6 +1621,33 @@ class BxBaseStudioBuilderPage extends BxDolStudioBuilderPage
                     ]
                 ];
                 break;
+            
+            case BX_DOL_STUDIO_BP_BLOCK_LAYOUT:
+                $oTemplate = BxDolStudioTemplate::getInstance();
+
+                $sContent = $oTemplate->parseHtmlByName('bp_block_skeleton_layout.html', [
+                    'html_id' => $this->aHtmlIds['edit_block_builder_id'],
+                    'content_html' => $aBlock['content'],
+                    'content_data' => json_encode([
+                        'pages' => [
+                            ['component' => $aBlock['content']]
+                        ]
+                    ])
+                ]);
+
+                $aFields = [
+                    'content' => [
+                        'type' => 'custom',
+                        'name' => 'content',
+                        'caption' => _t('_adm_bp_txt_block_content_raw'),
+                        'content' => $sContent,
+                        'required' => '0',
+                        'db' => [
+                            'pass' => 'XssHtml',
+                        ],
+                    ],
+                ];
+                break;
 
             case BX_DOL_STUDIO_BP_BLOCK_LANG:
                 $aFields = [

template/scripts/BxBasePage.php

@@ -937,6 +937,22 @@ class BxBasePage extends BxDolPage
         $s = bx_process_macros($s);
         return $s;
     }
+    
+    /**
+     * Get content for 'layout' block type.
+     * @return string
+     */
+    protected function _getBlockLayout ($aBlock)
+    {
+        if (bx_is_api()){
+            return [bx_api_get_block('layout', ['title' => _t($aBlock['title']), 'content' => $aBlock['content']])];
+        }
+        
+        $s = '<div class="bx-page-layout-container bx-def-vanilla-html max-w-none">' . $aBlock['content'] . '</div>';
+        $s = $this->_replaceMarkers($s, array('block_id' => $aBlock['id']));
+        $s = bx_process_macros($s);
+        return $s;
+    }
 
     /**
      * Get content for 'wiki' block type.