From ddd3753cdebe0d8824a0b1ada942d732d01b379c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kuna?=
 <1282324+codecalm@users.noreply.github.com>
Date: Mon, 12 May 2025 20:30:33 +0200
Subject: [PATCH] Fix WYSIWYG documentation (#2359)

---
 core/scss/ui/_markdown.scss           |  1 -
 core/scss/vendor/_tinymce.scss        | 34 -------------------
 core/scss/vendor/_wysiwyg.scss        | 14 +++++++-
 docs/content/ui/components/tinymce.md | 47 ---------------------------
 docs/content/ui/components/wysiwyg.md | 18 ++++++++++
 preview/pages/wysiwyg.html            |  2 +-
 shared/data/docs.json                 |  6 ++--
 shared/includes/ui/tinymce.html       | 36 --------------------
 shared/includes/ui/wysiwyg.html       | 13 ++++++--
 9 files changed, 45 insertions(+), 126 deletions(-)
 delete mode 100644 core/scss/vendor/_tinymce.scss
 delete mode 100644 docs/content/ui/components/tinymce.md
 create mode 100644 docs/content/ui/components/wysiwyg.md
 delete mode 100644 shared/includes/ui/tinymce.html

diff --git a/core/scss/ui/_markdown.scss b/core/scss/ui/_markdown.scss
index 78cc0f1d6..dccca8fdd 100644
--- a/core/scss/ui/_markdown.scss
+++ b/core/scss/ui/_markdown.scss
@@ -2,7 +2,6 @@
 Markdown
  */
 .markdown {
-  font-size: $font-size-200;
   line-height: $line-height-xl;
 
   > :first-child {
diff --git a/core/scss/vendor/_tinymce.scss b/core/scss/vendor/_tinymce.scss
deleted file mode 100644
index 3d6e4823c..000000000
--- a/core/scss/vendor/_tinymce.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.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;
-}
\ No newline at end of file
diff --git a/core/scss/vendor/_wysiwyg.scss b/core/scss/vendor/_wysiwyg.scss
index 3d6e4823c..c01dc9eea 100644
--- a/core/scss/vendor/_wysiwyg.scss
+++ b/core/scss/vendor/_wysiwyg.scss
@@ -21,7 +21,19 @@
 }
 
 .tox-tbtn {
-  margin: 0 !important; 
+  margin: 0 !important;
+  background: var(--#{$prefix}bg-surface) !important;
+
+  &:hover,
+  &.tox-tbtn--enabled {
+    background: var(--#{$prefix}bg-surface-secondary) !important;
+  }
+}
+
+.tox-edit-area {
+  &::before {
+    border: none !important
+  }
 }
 
 .tox-statusbar {
diff --git a/docs/content/ui/components/tinymce.md b/docs/content/ui/components/tinymce.md
deleted file mode 100644
index da161fbca..000000000
--- a/docs/content/ui/components/tinymce.md
+++ /dev/null
@@ -1,47 +0,0 @@
----
-title: TinyMCE
-docs-libs: tinymce
-summary: The WYSIWYG editor that is flexible, customizable, and designed with the user in mind. TinyMCE can handle any challenge, from the most simple implementation through to the most complex use case.
-description: Flexible WYSIWYG editor for content.
----
-
-[TinyMCE](https://www.tiny.cloud/docs/) documentation.
-
-## Default text editor
-
-Initialize TinyMCE 6 on any element (or elements) on the web page by passing an object containing a selector value to `tinymce.init()`. The selector value can be any valid CSS selector.
-
-{% capture html -%}
-<form method="post">
-  <textarea id="tinymce-default">Hello, <b>Tabler</b>!</textarea>
-</form>
-<script src="{{ cdnUrl }}/dist/libs/tinymce/tinymce.min.js" defer></script>
-<script>
-  document.addEventListener("DOMContentLoaded", function () {
-    let options = {
-      selector: "#tinymce-default",
-      height: 300,
-      menubar: false,
-      statusbar: false,
-      plugins: [
-        "advlist autolink lists link image charmap print preview anchor",
-        "searchreplace visualblocks code fullscreen",
-        "insertdatetime media table paste 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";
-    }
-    tinyMCE.init(options);
-  });
-</script>
-{%- endcapture %}
-{% include "docs/example.html" html=html %}
diff --git a/docs/content/ui/components/wysiwyg.md b/docs/content/ui/components/wysiwyg.md
new file mode 100644
index 000000000..514670afc
--- /dev/null
+++ b/docs/content/ui/components/wysiwyg.md
@@ -0,0 +1,18 @@
+---
+title: Wysiwyg editor
+docs-libs: [hugerte]
+summary: The WYSIWYG editor that is flexible, customizable, and designed with the user in mind. HugeRTE can handle any challenge, from the most simple implementation through to the most complex use case.
+description: Flexible WYSIWYG editor for content.
+---
+
+[HugeRTE](https://hugerte.org/) documentation.
+
+## Default text editor
+
+Initialize HugeRTE on any element (or elements) on the web page by passing an object containing a selector value to `hugerte.init()`. The selector value can be any valid CSS selector.
+
+{% capture html -%}
+{% include "ui/wysiwyg.html" %}
+{{ script }}
+{%- endcapture %}
+{% include "docs/example.html" html=html %}
diff --git a/preview/pages/wysiwyg.html b/preview/pages/wysiwyg.html
index f30f6ac77..7896cb157 100644
--- a/preview/pages/wysiwyg.html
+++ b/preview/pages/wysiwyg.html
@@ -4,7 +4,7 @@ page-header: HugeRTE
 menu: base.wysiwyg
 page-libs: [hugerte]
 permalink: /wysiwyg.html
-layout: single
+layout: default
 ---
 
 <div class="card">
diff --git a/shared/data/docs.json b/shared/data/docs.json
index 00b808d07..a14d446ba 100644
--- a/shared/data/docs.json
+++ b/shared/data/docs.json
@@ -250,9 +250,9 @@
         "title": "Inline player",
         "url": "docs/inline-player.html"
       },
-      "tinymce": {
-        "title": "TinyMCE",
-        "url": "docs/tinymce.html"
+      "wysiwyg": {
+        "title": "WYSIWYG Editor",
+        "url": "docs/wysiwyg.html"
       }
     }
   },
diff --git a/shared/includes/ui/tinymce.html b/shared/includes/ui/tinymce.html
deleted file mode 100644
index 835e93d78..000000000
--- a/shared/includes/ui/tinymce.html
+++ /dev/null
@@ -1,36 +0,0 @@
-{% 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 %}
\ No newline at end of file
diff --git a/shared/includes/ui/wysiwyg.html b/shared/includes/ui/wysiwyg.html
index 835e93d78..5d6452378 100644
--- a/shared/includes/ui/wysiwyg.html
+++ b/shared/includes/ui/wysiwyg.html
@@ -1,10 +1,11 @@
+{% removeemptylines %}
 {% assign id = include.id | default: 'mytextarea' %}
-
 <form method="post">
 	<textarea id="hugerte-{{ id }}">Hello, <b>Tabler</b>!</textarea>
 </form>
 
-{% capture_script %}
+{% capture script %}
+{% removeemptylines %}
 <script>
   document.addEventListener("DOMContentLoaded", function () {
     let options = {
@@ -33,4 +34,10 @@
     hugeRTE.init(options);
   })
 </script>
-{% endcapture_script %}
\ No newline at end of file
+{% endremoveemptylines %}
+{% endcapture -%}
+
+{%- capture_script %}
+{{ script }}
+{% endcapture_script %}
+{% endremoveemptylines %}
\ No newline at end of file