Merge pull request #2671 from AlchemyCMS/tinymce-6

Update Tinymce to v6

app/assets/javascripts/tinymce/icons/remixicons/icons.js

@@ -74,8 +74,6 @@ tinymce.IconManager.add("remixicons", {
       '<svg viewBox="0 0 24 24" width="16" height="16"><path d="m5.6 4 4.9 6 4.9-6H18l-6.2 7.5L18 19h-2.6l-4.9-6-5 6H3l6.2-7.5L3 4h2.6Zm16.2 12a.8.8 0 1 0-1.6.2l-1.1.3a2 2 0 1 1 3.3 1L20.7 19H23v1h-4v-1l2.6-2.4.2-.6Z"/></svg>',
     superscript:
       '<svg viewBox="0 0 24 24" width="16" height="16"><path d="m5.6 5 4.9 6 4.9-6H18l-6.2 7.5L18 20h-2.6l-4.9-6-5 6H3l6.2-7.5L3 5h2.6Zm16 1.6a.8.8 0 0 0-.6-1.4.8.8 0 0 0-.8 1l-1.1.3a2 2 0 1 1 3.3 1L20.7 9H23v1h-4V9l2.6-2.4Z"/></svg>',
-    table:
-      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M13 10v4h6v-4h-6Zm-2 0H5v4h6v-4Zm2 9h6v-3h-6v3Zm-2 0v-3H5v3h6Zm2-14v3h6V5h-6Zm-2 0H5v3h6V5ZM4 3h16c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1H4a1 1 0 0 1-1-1V4c0-.6.4-1 1-1Z"/></svg>',
     "text-color":
       '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M15.2 14H8.8l-1.6 4H5l6-15h2l6 15h-2.2l-1.6-4Zm-.8-2L12 5.9 9.6 12h4.8ZM3 20h18v2H3v-2Z"/></svg>',
     underline:

app/assets/javascripts/tinymce/plugins/alchemy_link/plugin.min.js

@@ -23,6 +23,7 @@ tinymce.PluginManager.add("alchemy_link", function (editor) {
       const onNodeChange = () => {
         buttonApi.setActive(getAnchor(editor.selection.getNode()) !== null)
       }
+      onNodeChange()
       editor.on("NodeChange", onNodeChange)
       return () => {
         editor.off("NodeChange", onNodeChange)

app/assets/stylesheets/tinymce/skins/ui/alchemy/skin.min.scss

@@ -1556,6 +1556,8 @@ button::-moz-focus-inner {
 .tox .tox-dialog__header .tox-button {
   z-index: 1;
   color: $white;
+  background-image: none; // If used in Solidus we need to override the background image
+  border: none; // If used in Solidus we need to override the border
 }
 
 .tox .tox-dialog__draghandle {
@@ -1590,6 +1592,7 @@ button::-moz-focus-inner {
   color: #000;
   display: flex;
   flex: 1;
+  flex-direction: column;
   -ms-flex-preferred-size: auto;
   font-size: 13px;
   font-style: normal;
@@ -1600,47 +1603,35 @@ button::-moz-focus-inner {
   text-transform: none;
 }
 
-@media only screen and (max-width: 767px) {
-  body:not(.tox-force-desktop) .tox .tox-dialog__body {
-    flex-direction: column;
-  }
-}
-
 .tox .tox-dialog__body-nav {
   align-items: flex-start;
   display: flex;
-  flex-direction: column;
-  padding: 13px 13px;
-}
-
-@media only screen and (max-width: 767px) {
-  body:not(.tox-force-desktop) .tox .tox-dialog__body-nav {
-    flex-direction: row;
-    -webkit-overflow-scrolling: touch;
-    overflow-x: auto;
-    padding-bottom: 0;
-  }
+  flex-direction: row;
+  padding: 0;
+  -webkit-overflow-scrolling: touch;
+  overflow-x: auto;
+  box-shadow: inset 0 -2px 0 var(--tabs_track-color);
 }
 
 .tox .tox-dialog__body-nav-item {
   border-bottom: 2px solid transparent;
-  color: rgba(0, 0, 0, 0.7);
+  color: var(--sl-color-neutral-600);
   display: inline-block;
   font-size: $base-font-size;
   line-height: 1.3;
-  margin-bottom: 2 * $default-margin;
-  padding: $default-padding;
+  padding: 16px 15px;
   text-decoration: none;
   white-space: nowrap;
+  border-bottom: 2px solid var(--tabs_track-color);
 }
 
-.tox .tox-dialog__body-nav-item:focus {
-  background-color: rgba(45, 90, 141, 0.1);
+.tox .tox-dialog__body-nav-item:hover {
+  color: var(--sl-color-primary-600);
 }
 
 .tox .tox-dialog__body-nav-item--active {
-  border-bottom: 2px solid #2d5a8d;
-  color: #2d5a8d;
+  border-bottom-color: var(--tabs_indicator-color);
+  color: var(--sl-color-primary-600);
 }
 
 .tox .tox-dialog__body-content {
@@ -2094,9 +2085,9 @@ body.tox-dialog__disable-scroll {
   border-width: 1px;
   box-shadow: none;
   box-sizing: border-box;
-  height: 24px;
+  height: 23px;
   position: absolute;
-  top: 6px;
+  top: 4px;
   width: 24px;
 }
 
@@ -2116,11 +2107,11 @@ body.tox-dialog__disable-scroll {
     linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.25) 75%),
     linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.25) 75%);
   background-position:
-    0 0,
-    0 6px,
-    6px -6px,
-    -6px 0;
-  background-size: 12px 12px;
+    -1px -1px,
+    -1px 3px,
+    3px -5px,
+    -5px -1px;
+  background-size: 8px 8px;
   border: 1px solid #fff;
   border-radius: $default-border-radius;
   box-sizing: border-box;
@@ -2142,15 +2133,15 @@ body.tox-dialog__disable-scroll {
 }
 
 .tox:not([dir="rtl"]) .tox-color-input span {
-  left: 6px;
+  left: 4px;
 }
 
 .tox[dir="rtl"] .tox-color-input .tox-textfield {
   padding-right: 36px;
 }
 
 .tox[dir="rtl"] .tox-color-input span {
-  right: 6px;
+  right: 4px;
 }
 
 .tox .tox-label,
@@ -2276,6 +2267,7 @@ body.tox-dialog__disable-scroll {
   -moz-appearance: none;
   appearance: none;
   background-color: $form-field-background-color;
+  background-image: none; // If nested in Solidus we need to override the background image
   border-color: $form-field-border-color;
   border-radius: $default-border-radius;
   border-style: $form-field-border-style;
@@ -2292,6 +2284,11 @@ body.tox-dialog__disable-scroll {
   padding: $form-field-padding;
   resize: none;
   width: 100%;
+
+  // If nested in Solidus we need to override the background image
+  &:hover {
+    background-image: none;
+  }
 }
 
 .tox .tox-textarea[disabled],
@@ -2306,7 +2303,7 @@ body.tox-dialog__disable-scroll {
 .tox .tox-textfield:focus {
   border-color: transparent;
   box-shadow: none;
-  outline: 1px solid $focus-color;
+  outline: 1px solid $focus-color !important; // Need to force the outline if used in Solidus
 }
 
 .tox .tox-toolbar-textfield {
@@ -3525,7 +3522,7 @@ body.tox-dialog__disable-scroll {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  width: 7em;
+  width: 6em;
 }
 
 .tox .tox-split-button {

app/javascript/alchemy_admin/components/tinymce.js

@@ -2,6 +2,8 @@ import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_elemen
 import { currentLocale } from "alchemy_admin/i18n"
 
 class Tinymce extends AlchemyHTMLElement {
+  #min_height = null
+
   /**
    * the observer will initialize Tinymce if the textarea becomes visible
    */
@@ -120,7 +122,11 @@ class Tinymce extends AlchemyHTMLElement {
   }
 
   get minHeight() {
-    return this.configuration.min_height
+    return this.#min_height || this.configuration.min_height
+  }
+
+  set minHeight(value) {
+    this.#min_height = value
   }
 }
 

lib/alchemy/tinymce.rb

@@ -4,7 +4,15 @@ module Alchemy
   module Tinymce
     mattr_accessor :languages, :plugins
 
-    DEFAULT_PLUGINS = %w[anchor charmap code directionality fullscreen hr link lists paste tabfocus]
+    DEFAULT_PLUGINS = %w[
+      anchor
+      charmap
+      code
+      directionality
+      fullscreen
+      link
+      lists
+    ]
 
     @@plugins = DEFAULT_PLUGINS + %w[alchemy_link]
     @@init = {
@@ -14,6 +22,7 @@ module Tinymce
       width: "auto",
       resize: true,
       min_height: 250,
+      height: 250,
       menubar: false,
       statusbar: true,
       toolbar: [

spec/javascript/alchemy_admin/components/tinymce.spec.js

@@ -68,11 +68,8 @@ describe("alchemy-tinymce", () => {
       expect(component.configuration.foo_bar).toEqual("bar | foo")
     })
 
-    it("should use these configuration for the tinymce", () => {
-      intersectionObserver.enterNode(component)
-      const tinymceSettings = tinymce.get(textareaId).settings
-      expect(tinymceSettings.id).toEqual(textareaId)
-      expect(tinymceSettings.toolbar).toEqual("bold italic")
+    it("should set the selector to textarea id", () => {
+      expect(component.configuration.selector).toEqual("#tinymce-textarea")
     })
   })
 

spec/libraries/tinymce_spec.rb

@@ -35,11 +35,8 @@ module Alchemy
           code
           directionality
           fullscreen
-          hr
           link
           lists
-          paste
-          tabfocus
           alchemy_link
           foo
         ]