From 0591646391836bc086cac999809a8a201f4d11a8 Mon Sep 17 00:00:00 2001
From: Alex Hoyau <a.hoyau@silexlabs.org>
Date: Tue, 26 Dec 2023 09:48:03 +0300
Subject: [PATCH] example of use with es5 and es6

---
 es5.html | 119 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 es6.html | 107 +++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 226 insertions(+)
 create mode 100644 es5.html
 create mode 100644 es6.html
diff --git a/es5.html b/es5.html
new file mode 100644
index 0000000..1d02f27
--- /dev/null
+++ b/es5.html
@@ -0,0 +1,119 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Symbols for GrapesJS</title>
+    <link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
+    <script src="https://unpkg.com/grapesjs"></script>
+    <link rel="stylesheet" href="https://grapesjs.com/stylesheets/grapesjs-preset-webpage.min.css">
+    <script src="https://unpkg.com/grapesjs-preset-webpage"></script>
+    <script xxdata-main="dist/es5/index.js" src="node_modules/requirejs/require.js"></script>
+    <script>
+      require.config({
+        baseUrl: "dist/es5/",
+        paths: {
+          "backbone": "/node_modules/backbone/backbone",
+          "underscore": "/node_modules/underscore/underscore",
+          "jquery": "/node_modules/jquery/dist/jquery",
+        },
+      });
+
+      require(['dist/es5/index.js'], function () {});
+    </script>
+    <style>
+      body,
+      html {
+        height: 100%;
+        margin: 0;
+      }
+      .gjs-editor-cont { height: 100% !important; }
+    </style>
+  </head>
+  <body>
+
+    <div id='basic-actions' class="panel__basic-actions" style="z-index: 9; left: 120px;"></div>
+    <div id="gjs">
+    </div>
+
+    <script type="text/javascript">
+      window.onload = () => {
+      window.editor = grapesjs.init({
+        container: '#gjs',
+        //storageManager: false,
+        autosave: false,
+        noticeOnUnload: false,
+        plugins: [
+          'grapesjs-preset-webpage',
+          '@silexlabs/grapesjs-symbols',
+        ],
+        pluginsOpts: {
+          'grapesjs-preset-webpage': {},
+          '@silexlabs/grapesjs-symbols': {
+            appendTo: '.gjs-pn-views-container',
+          },
+        },
+        pageManager: {
+          pages: [{
+              id: 'page-1',
+              name: 'Page 1',
+            },
+            {
+              id: 'page-2',
+              name: 'Page 2',
+            },
+          ],
+        }
+      })
+
+      var idx = 0
+      editor.on('load', () => {
+        const colors = ['red', 'blue', 'grey', 'yello', 'black', 'orange', 'chocolate', 'cadetblue', 'blueviolet']
+        const color = colors[Math.floor(Math.random() * colors.length)]
+        editor.addComponents(`<div style="min-height: 100px; background: ${color};"></div>`);
+
+        editor.Panels.addPanel({
+          id: 'basic-actions',
+          el: '.panel__basic-actions',
+          buttons: [
+            {
+              id: 'create-button',
+              label: 'Create symbol',
+              command(editor) {
+                var label = prompt('Label', 'Symbol ' + ++idx)
+                var icon = prompt('Icon', 'fa-list')
+                editor.runCommand('symbols:add', { label, icon })
+              },
+            },
+            {
+              id: 'separator',
+              label: '|',
+            },
+          ].concat(editor.Pages.getAll().flatMap(p => ([{
+            id: 'button' + p.cid,
+            label: p.getName() || 'no name?',
+            command(editor) {
+              editor.Pages.select(p)
+            },
+          },
+            {
+              id: 'separator' + p.cid,
+              label: '|',
+            },
+          ])))
+        })
+        //setTimeout(() => {
+        //  const data = JSON.parse(localStorage.getItem('init'))
+        //  if(data) editor.loadData(data)
+        //})
+      })
+      editor.addComponents([`
+        <div class="main" style="padding: 20px; background: lightblue;">
+          <h1 class="title">Test title</h1>
+          <p class="content">Test content text lorem ipsum</p>
+        </div>
+      `])
+      }
+    </script>
+  </body>
+</html>
+
diff --git a/es6.html b/es6.html
new file mode 100644
index 0000000..6929cf3
--- /dev/null
+++ b/es6.html
@@ -0,0 +1,107 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Symbols for GrapesJS</title>
+    <link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
+    <script src="https://unpkg.com/grapesjs"></script>
+    <link rel="stylesheet" href="https://grapesjs.com/stylesheets/grapesjs-preset-webpage.min.css">
+    <script src="https://unpkg.com/grapesjs-preset-webpage"></script>
+    <script src="./dist/index.js"></script>
+    <style>
+      body,
+      html {
+        height: 100%;
+        margin: 0;
+      }
+      .gjs-editor-cont { height: 100% !important; }
+    </style>
+  </head>
+  <body>
+
+    <div id='basic-actions' class="panel__basic-actions" style="z-index: 9; left: 120px;"></div>
+    <div id="gjs">
+    </div>
+
+    <script type="text/javascript">
+      window.onload = () => {
+      window.editor = grapesjs.init({
+        container: '#gjs',
+        //storageManager: false,
+        autosave: false,
+        noticeOnUnload: false,
+        plugins: [
+          'grapesjs-preset-webpage',
+          '@silexlabs/grapesjs-symbols',
+        ],
+        pluginsOpts: {
+          'grapesjs-preset-webpage': {},
+          '@silexlabs/grapesjs-symbols': {
+            appendTo: '.gjs-pn-views-container',
+          },
+        },
+        pageManager: {
+          pages: [{
+              id: 'page-1',
+              name: 'Page 1',
+            },
+            {
+              id: 'page-2',
+              name: 'Page 2',
+            },
+          ],
+        }
+      })
+
+      var idx = 0
+      editor.on('load', () => {
+        const colors = ['red', 'blue', 'grey', 'yello', 'black', 'orange', 'chocolate', 'cadetblue', 'blueviolet']
+        const color = colors[Math.floor(Math.random() * colors.length)]
+        editor.addComponents(`<div style="min-height: 100px; background: ${color};"></div>`);
+
+        editor.Panels.addPanel({
+          id: 'basic-actions',
+          el: '.panel__basic-actions',
+          buttons: [
+            {
+              id: 'create-button',
+              label: 'Create symbol',
+              command(editor) {
+                var label = prompt('Label', 'Symbol ' + ++idx)
+                var icon = prompt('Icon', 'fa-list')
+                editor.runCommand('symbols:add', { label, icon })
+              },
+            },
+            {
+              id: 'separator',
+              label: '|',
+            },
+          ].concat(editor.Pages.getAll().flatMap(p => ([{
+            id: 'button' + p.cid,
+            label: p.getName() || 'no name?',
+            command(editor) {
+              editor.Pages.select(p)
+            },
+          },
+            {
+              id: 'separator' + p.cid,
+              label: '|',
+            },
+          ])))
+        })
+        //setTimeout(() => {
+        //  const data = JSON.parse(localStorage.getItem('init'))
+        //  if(data) editor.loadData(data)
+        //})
+      })
+      editor.addComponents([`
+        <div class="main" style="padding: 20px; background: lightblue;">
+          <h1 class="title">Test title</h1>
+          <p class="content">Test content text lorem ipsum</p>
+        </div>
+      `])
+      }
+    </script>
+  </body>
+</html>
+
