Replaced TinyMCE with Hugerte to address license violation (#2008)

.changeset/chilled-zoos-punch.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Replaced TinyMCE with HugeRTE to address license violation

core/scss/tabler-vendors.scss

@@ -8,7 +8,7 @@
 @import "vendor/dropzone";
 @import "vendor/fslightbox";
 @import "vendor/plyr";
-@import "vendor/tinymce";
+@import "vendor/wysiwyg";
 @import "vendor/stars-rating";
 @import "vendor/coloris";
 @import "vendor/typed";

core/scss/vendor/_tinymce.scss

@@ -1,4 +1,4 @@
-.tox-tinymce {
+.tox-hugerte {
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
   border-radius: $border-radius !important;
   font-family: var(--#{$prefix}font-sans-serif) !important;
@@ -12,7 +12,7 @@
   background: transparent !important;
 }
 
-.tox:not(.tox-tinymce-inline) {
+.tox:not(.tox-hugerte-inline) {
   .tox-editor-header {
     border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
     box-shadow: none !important;
@@ -29,6 +29,6 @@
 }
 
 .tox .tox-toolbar-overlord,
-.tox:not(.tox-tinymce-inline) .tox-editor-header {
+.tox:not(.tox-hugerte-inline) .tox-editor-header {
   background: transparent !important;
 }

core/scss/vendor/_wysiwyg.scss

@@ -0,0 +1,34 @@
+.tox-hugerte {
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
+  border-radius: $border-radius !important;
+  font-family: var(--#{$prefix}font-sans-serif) !important;
+}
+
+.tox-toolbar__group {
+  padding: 0 .5rem 0;
+}
+
+.tox .tox-toolbar__primary {
+  background: transparent !important;
+}
+
+.tox:not(.tox-hugerte-inline) {
+  .tox-editor-header {
+    border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+  }
+}
+
+.tox-tbtn {
+  margin: 0 !important; 
+}
+
+.tox-statusbar {
+  border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
+}
+
+.tox .tox-toolbar-overlord,
+.tox:not(.tox-hugerte-inline) .tox-editor-header {
+  background: transparent !important;
+}

pnpm-lock.yaml

@@ -131,6 +131,9 @@ importers:
       fslightbox:
         specifier: ^3.5.1
         version: 3.5.1
+      hugerte:
+        specifier: ^1.0.9
+        version: 1.0.9
       imask:
         specifier: ^7.6.1
         version: 7.6.1
@@ -155,9 +158,6 @@ importers:
       star-rating.js:
         specifier: ^4.3.1
         version: 4.3.1
-      tinymce:
-        specifier: ^7.7.1
-        version: 7.7.1
       tom-select:
         specifier: ^2.4.3
         version: 2.4.3
@@ -1468,6 +1468,9 @@ packages:
     resolution: {integrity: sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==}
     engines: {node: '>=0.8', npm: '>=1.3.7'}
 
+  [email protected]:
+    resolution: {integrity: sha512-HNWGaUyyfmYkk07fEJ6Y9v8hnCwgg9OyS9Kqxbmi1EZbOJlOd4Z5Fn/gkMuV4vvp25vPLK92BX6Q/7gCywIaOw==}
+
   [email protected]:
     resolution: {integrity: sha512-3gKm/gCSUipeLsRYZbbdA1BD83lBoWUkZ7G9VFrhWPAU76KwYo5KR8V28bpoPm/ygy0x5/GCbpRQdY7VLYCoIg==}
     hasBin: true
@@ -2386,9 +2389,6 @@ packages:
     resolution: {integrity: sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==}
     engines: {node: '>=12.0.0'}
 
-  [email protected]:
-    resolution: {integrity: sha512-rMetqSgZtYbj4YPOX+gYgmlhy/sIjVlI/qlrSOul/Mpn9e0aIIG/fR0qvQSVYvxFv6OzRTge++NQyTbzLJK1NA==}
-
   [email protected]:
     resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
     engines: {node: '>=0.6.0'}
@@ -4019,6 +4019,8 @@ snapshots:
       jsprim: 1.4.2
       sshpk: 1.18.0
 
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]:
@@ -4887,8 +4889,6 @@ snapshots:
       fdir: 6.4.3([email protected])
       picomatch: 4.0.2
 
-  [email protected]: {}
-
   [email protected]:
     dependencies:
       os-tmpdir: 1.0.2

preview/package.json

@@ -41,17 +41,17 @@
     "dropzone": "^6.0.0-beta.2",
     "flatpickr": "^4.6.13",
     "fslightbox": "^3.5.1",
+    "hugerte": "^1.0.9",
     "imask": "^7.6.1",
     "jsvectormap": "^1.6.0",
     "list.js": "^2.3.1",
     "litepicker": "^2.0.12",
     "nouislider": "^15.8.1",
     "plyr": "^3.7.8",
+    "signature_pad": "^5.0.6",
     "star-rating.js": "^4.3.1",
-    "tinymce": "^7.7.1",
     "tom-select": "^2.4.3",
-    "typed.js": "^2.1.0",
-    "signature_pad": "^5.0.6"
+    "typed.js": "^2.1.0"
   },
   "devDependencies": {
     "@11ty/eleventy": "^3.0.0",

preview/pages/_data/libs.json

@@ -21,7 +21,7 @@
     "jsvectormap-world": "jsvectormap/dist/maps/world.js",
     "jsvectormap-world-merc": "jsvectormap/dist/maps/world-merc.js",
     "fslightbox": "fslightbox/index.js",
-    "tinymce": "tinymce/tinymce.min.js",
+    "hugerte": "hugerte/hugerte.min.js",
     "plyr": "plyr/dist/plyr.min.js",
     "dropzone": "dropzone/dist/dropzone-min.js",
     "star-rating.js": "star-rating.js/dist/star-rating.min.js",
@@ -39,6 +39,6 @@
     "nouislider": "nouislider/dist/nouislider.min.css"
   },
   "js-copy": {
-    "tinymce" :"tinymce/*"
+    "hugerte" :"hugerte/*"
   }
 }

preview/pages/_data/menu.json

@@ -411,9 +411,9 @@
         "url": "maps-vector.html",
         "title": "Map vector"
       },
-      "tinymce": {
-        "title": "TinyMCE",
-        "url": "tinymce.html"
+      "wysiwyg": {
+        "url": "wysiwyg.html",
+        "title": "WYSIWYG editor"
       }
     }
   },

preview/pages/_includes/ui/tinymce.html

@@ -1,14 +1,14 @@
 {% assign id = include.id | default: 'mytextarea' %}
 
 <form method="post">
-	<textarea id="tinymce-{{ id }}">Hello, <b>Tabler</b>!</textarea>
+	<textarea id="hugerte-{{ id }}">Hello, <b>Tabler</b>!</textarea>
 </form>
 
 {% capture_script %}
 <script>
   document.addEventListener("DOMContentLoaded", function () {
     let options = {
-      selector: '#tinymce-{{ id }}',
+      selector: '#hugerte-{{ id }}',
       height: 300,
       menubar: false,
       statusbar: false,
@@ -30,7 +30,7 @@
       options.content_css = 'dark';
     }
 
-    tinyMCE.init(options);
+    hugeRTE.init(options);
   })
 </script>
 {% endcapture_script %}

preview/pages/_includes/ui/wysiwyg.html

@@ -0,0 +1,36 @@
+{% assign id = include.id | default: 'mytextarea' %}
+
+<form method="post">
+	<textarea id="hugerte-{{ id }}">Hello, <b>Tabler</b>!</textarea>
+</form>
+
+{% capture_script %}
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    let options = {
+      selector: '#hugerte-{{ id }}',
+      height: 300,
+      menubar: false,
+      statusbar: false,
+		license_key: 'gpl',
+      plugins: [
+        'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview', 'anchor',
+        'searchreplace', 'visualblocks', 'code', 'fullscreen',
+        'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
+      ],
+      toolbar: 'undo redo | formatselect | ' +
+        'bold italic backcolor | alignleft aligncenter ' +
+        'alignright alignjustify | bullist numlist outdent indent | ' +
+        'removeformat',
+      content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }'
+    }
+
+    if (localStorage.getItem("tablerTheme") === 'dark') {
+      options.skin = 'oxide-dark';
+      options.content_css = 'dark';
+    }
+
+    hugeRTE.init(options);
+  })
+</script>
+{% endcapture_script %}

preview/pages/tinymce.html → preview/pages/wysiwyg.html

@@ -1,10 +1,10 @@
 ---
-title: TinyMCE
-page-header: TinyMCE
-page-menu: plugins.tinymce
-page-libs: [tinymce]
-layout: default
-permalink: tinymce.html
+title: HugeRTE
+page-header: HugeRTE
+menu: base.wysiwyg
+page-libs: [hugerte]
+permalink: /wysiwyg.html
+layout: single
 ---
 
 <div class="card">
@@ -17,7 +17,7 @@ permalink: tinymce.html
 
 		<div class="mb-3">
 			<label class="form-label">Description</label>
-			{% include "ui/tinymce.html" %}
+			{% include "ui/wysiwyg.html" %}
 		</div>
 	</div>
 </div>