trestle-tinymce 0.4.0.pre → 0.4.0.pre2

data/frontend/js/controllers/tinymce_controller.js

@@ -1,6 +1,13 @@
 /* global Trestle, tinymce */
 
 export default class extends Trestle.ApplicationController {
+  static values = {
+    configuration: {
+      type: String,
+      default: 'default'
+    }
+  }
+
   connect () {
     tinymce.init({
       target: this.element,
@@ -17,6 +24,6 @@ export default class extends Trestle.ApplicationController {
   }
 
   get configuration () {
-    return Trestle.TinyMCE.default
+    return Trestle.TinyMCE[this.configurationValue]
   }
 }

data/frontend/js/index.js

@@ -6,3 +6,10 @@ import TinyMCEController from './controllers/tinymce_controller'
 Trestle.TinyMCE = {}
 
 Stimulus.register('tinymce', TinyMCEController)
+
+// Prevent Bootstrap dialog from blocking focusin
+document.addEventListener('focusin', (e) => {
+  if (e.target.closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root") !== null) {
+    e.stopImmediatePropagation()
+  }
+})

data/lib/trestle/tinymce/configuration.rb

@@ -3,6 +3,13 @@ module Trestle
     class Configuration
       include Configurable
       include Configurable::Open
+
+      def to_javascript
+        options.map { |name, configuration|
+          config = ::TinyMCE::Rails::Configuration.new(configuration.as_json.with_indifferent_access)
+          "Trestle.TinyMCE.#{name} = #{config.to_javascript};"
+        }.join("\n")
+      end
     end
   end
 end

data/lib/trestle/tinymce/engine.rb

@@ -3,8 +3,10 @@ require "tinymce/rails"
 module Trestle
   module TinyMCE
     class Engine < Rails::Engine
-      config.assets.precompile << "trestle/tinymce.manifest.js" # Sprockets 4 manifest
-      config.assets.precompile << "trestle/tinymce.js"          # Sprockets 3
+      if config.respond_to?(:assets)
+        config.assets.precompile << "trestle/tinymce.manifest.js" # Sprockets 4 manifest
+        config.assets.precompile << "trestle/tinymce.js"          # Sprockets 3
+      end
     end
   end
 end

data/lib/trestle/tinymce/version.rb

@@ -1,5 +1,5 @@
 module Trestle
   module TinyMCE
-    VERSION = "0.4.0.pre"
+    VERSION = "0.4.0.pre2"
   end
 end

data/lib/trestle/tinymce.rb

@@ -5,6 +5,10 @@ module Trestle
     require_relative "tinymce/version"
     require_relative "tinymce/configuration"
     require_relative "tinymce/field"
+
+    def self.tinymce_major_version
+      ::TinyMCE::Rails::VERSION.split(".")[0].to_i
+    end
   end
 
   Configuration.option :tinymce, TinyMCE::Configuration.new

data/package.json

@@ -1,11 +1,11 @@
 {
   "name": "trestle-tinymce",
-  "version": "0.3.1",
+  "version": "0.4.0-pre2",
   "description": "TinyMCE plugin for the Trestle admin framework",
   "main": "frontend/js/index.js",
   "repository": "https://github.com/TrestleAdmin/trestle-tinymce.git",
   "author": "Sam Pohlenz <sam@sampohlenz.com>",
-  "license": "LGPL-3.0",
+  "license": "LGPL-3.0-only",
   "private": false,
   "scripts": {
     "dev": "webpack --mode development",

data/src/{trestle → tinymce-5}/skin.less

@@ -3,6 +3,7 @@
 // Root variables
 
 @background-color: #f5f5f5;
+
 @color-tint: #4d6bb2;
 @color-error: #e17572;
 @color-success: #7dc67d;
@@ -22,13 +23,16 @@
 // Button
 
 @button-border-radius: .3rem;
+
 @button-background-color: @color-success;
+@button-text-color: white;
+
 @button-font-size: 1.35rem;
 @button-font-weight: 400;
 @button-line-height: 1.5;
+
 @button-padding-x: 1.25rem;
 @button-padding-y: .5rem;
-@button-text-color: white;
 
 @button-focus-box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .15), 0 1px 1px rgba(0, 0, 0, .075), 0 0 0 .2rem rgba(145, 207, 145, .5);
 
@@ -82,6 +86,7 @@
 @dialog-footer-padding: 1.5rem;
 @dialog-footer-separator-border: 1px solid rgba(0, 0, 0, .1);
 
+@dialog-body-font-size: 1rem;
 @dialog-body-padding: 1.5rem;
 
 @dialog-title-font-size: 1.3rem;
@@ -157,14 +162,10 @@
 
   // Dialog
 
-  .tox-dialog__body {
-    font-size: 1rem;
-  }
-
   .tox-dialog__header {
     background-color: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) * .8));
-    background-image: linear-gradient(rgba(white, .05), rgba(black, .05));
-    background-repeat: no-repeat;
+    background-image: var(--theme-texture, none), var(--theme-gradient, linear-gradient(rgba(white, .05), rgba(black, .05)));
+    background-repeat: repeat, no-repeat;
 
     .tox-button {
       margin: -10px .25rem -10px 0;
@@ -230,6 +231,12 @@
     align-items: flex-start;
   }
 
+  // Collection
+
+  .tox-collection--grid .tox-collection__group {
+    max-height: 264px;
+  }
+
   // Form
 
   .tox-textfield {
@@ -262,3 +269,19 @@
     }
   }
 }
+
+// Testing
+
+// :root {
+//   // --primary: #338ab7;
+//   // --primary-rgb: 51, 138, 183;
+//   // --primary-h: 200;
+//   // --primary-s: 56%;
+//   // --primary-l: 46%;
+
+//   --primary: #e50914;
+//   --primary-rgb: 229, 9, 20;
+//   --primary-h: 357;
+//   --primary-s: 92%;
+//   --primary-l: 47%;
+// }

data/src/tinymce-6/content.inline.less

@@ -0,0 +1 @@
+@import 'src/less/theme/content-ui';

data/src/tinymce-6/content.less

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+
+@import 'src/less/theme/content-ui';
+
+body {
+  font-family: sans-serif;
+}
+
+table {
+  border-collapse: collapse;
+}

data/src/tinymce-6/skin.less

@@ -0,0 +1,297 @@
+@import '../../../theme/theme';
+
+// Root variables
+
+@background-color: #f5f5f5;
+
+@color-tint: #4d6bb2;
+@color-error: #e17572;
+@color-success: #7dc67d;
+
+@control-border-radius: .375rem;
+
+@tinymce-border-width: 1px;
+@tinymce-border-radius: @control-border-radius;
+@tinymce-border-color: #ccc;
+
+@pad-xs: 2px;
+
+// Font
+
+@line-height-base: 1.5;
+
+// Button
+
+@button-border-radius: .375rem;
+
+@button-background-color: @color-success;
+@button-text-color: white;
+
+@button-font-size: 1.35rem;
+@button-font-weight: 400;
+@button-line-height: 1.5;
+
+@button-padding-x: 1.25rem;
+@button-padding-y: .5rem;
+
+@button-focus-box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .15), 0 1px 1px rgba(0, 0, 0, .075), 0 0 0 .2rem rgba(145, 207, 145, .5);
+
+@button-hover-background-color: #6aa86a;
+@button-hover-border-color: #649e64;
+
+@button-active-background-color: #649e64;
+@button-active-border-color: #5e955e;
+@button-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+
+// Toolbar
+
+@toolbar-group-padding-x: 6px;
+
+@toolbar-button-hover-background-color: rgba(var(--primary-rgb), .15);
+@toolbar-button-enabled-background-color: rgba(var(--primary-rgb), .3);
+
+@collection-list-item-label-active-text-color: @color-black;
+@collection-toolbar-item-label-active-text-color: @color-black;
+@collection-grid-item-label-active-text-color: @color-black;
+
+// Checkbox
+
+@checkbox-selected-color: #4d6bb2;
+
+@checkbox-focus-box-shadow: 0 0 0 .2rem rgba(@color-tint, .25);
+
+// Secondary button
+
+@button-secondary-background-color: #bbb;
+@button-secondary-border-radius: .2rem;
+@button-secondary-text-color: white;
+
+@button-secondary-focus-box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .15), 0 1px 1px rgba(0, 0, 0, .075), 0 0 0 .2rem hsla(0, 0%, 77.3%, .5);
+
+@button-secondary-hover-background-color: #a8a8a8;
+@button-secondary-hover-border-color: #a2a2a2;
+
+@button-secondary-active-background-color: #a8a8a8;
+@button-secondary-active-border-color: #a2a2a2;
+@button-secondary-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+
+// Menu
+
+@menu-background-color: #fff;
+
+// Dialog
+
+@dialog-backdrop-background-color: fade(#000, 50);
+@dialog-backdrop-background-color-opaque: #000;
+
+@dialog-background-color: #fff;
+
+@dialog-border-radius: 0;
+@dialog-border-width: 0;
+@dialog-box-shadow: 0 .0625rem .09375em -.25rem rgba(0, 0, 0, .25), 0 .125rem .1875em -.25rem rgba(0, 0, 0, .25), 0 .25rem .375em -.25rem rgba(0, 0, 0, .25), 0 .5rem .75em -.25rem rgba(0, 0, 0, .25), 0 1rem 1.5em -.25rem rgba(0, 0, 0, .25);
+
+@dialog-header-background-color: darken(@color-tint, 15%);
+@dialog-header-padding: 1.05rem .5rem 1.05rem 1.5rem;
+
+@dialog-footer-background-color: #f9f9f9;
+@dialog-footer-padding: 1.5rem;
+@dialog-footer-separator-border: 1px solid rgba(0, 0, 0, .1);
+
+@dialog-body-font-size: 1rem;
+@dialog-body-padding: 1.5rem;
+
+@dialog-title-font-size: 1.3rem;
+@dialog-title-font-weight: 500;
+@dialog-title-text-color: white;
+
+@dialog-nav-focus-background-color: none;
+
+// Label
+
+@input-label-font-weight: bold;
+@input-label-line-height: 2;
+@input-label-text-color: #333;
+
+// Form
+
+@textfield-background-color: #fff;
+@textfield-border-radius: @control-border-radius;
+@textfield-font-size: 1rem;
+@textfield-line-height: 1.5;
+@textfield-pad-x: .75rem;
+@textfield-pad-y: .375rem;
+
+@textfield-focus-border-color: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) * 1.5));
+@textfield-focus-box-shadow: 0 0 0 .25rem rgba(var(--primary-rgb), .25);
+
+// Form layout
+
+@form-group-vertical-spacing: .75rem;
+@form-group-horizontal-spacing: 1rem;
+@form-grid-horizontal-gap: 20px;
+
+// Additional customization
+
+.tox {
+  // Buttons
+
+  .tox-button {
+    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+
+    @media @breakpoint-sm {
+      font-size: 1.25rem;
+      padding: .35rem .75rem;
+    }
+  }
+
+  .tox-button--secondary {
+    font-size: .875rem;
+    padding: .25rem .65rem;
+
+    @media @breakpoint-sm {
+      font-size: .75rem;
+      padding: .2rem .5rem;
+    }
+  }
+
+  // Checkbox
+
+  .tox-checkbox__icons {
+    height: 1.15em;
+    overflow: hidden;
+    padding: 0 !important;
+    width: 1.15em;
+
+    .tox-checkbox-icon__checked svg {
+      fill: var(--primary);
+    }
+  }
+
+  input.tox-checkbox__input:focus + .tox-checkbox__icons {
+    box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .25);
+  }
+
+  // Dialog
+
+  .tox-dialog__header {
+    background-color: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) * .8));
+    background-image: var(--theme-texture, none), var(--theme-gradient, linear-gradient(rgba(white, .05), rgba(black, .05)));
+    background-repeat: repeat, no-repeat;
+
+    .tox-button {
+      margin: -10px .25rem -10px 0;
+      opacity: .75;
+      padding: .25rem;
+
+      path {
+        fill: white;
+      }
+
+      &:hover:not(:disabled) {
+        background-color: transparent;
+        border-color: transparent;
+        opacity: 1;
+      }
+    }
+  }
+
+  .tox-dialog__title {
+    text-shadow: rgba(0, 0, 0, .5) 0 1px 1px;
+  }
+
+  .tox-dialog__body-nav {
+    align-items: stretch;
+    background: #f3f3f3;
+    padding: 15px 0 15px 10px;
+
+    @media @breakpoint-sm {
+      padding: 10px 15px;
+    }
+  }
+
+  .tox-dialog__body-nav-item {
+    background-color: #eee;
+    border-bottom: 0;
+    color: #555;
+    font-weight: 500;
+    margin-bottom: 0;
+    margin-top: 4px;
+    padding: 10px 20px;
+
+    @media @breakpoint-sm {
+      font-size: .95rem;
+      margin-top: 0;
+      padding: 10px;
+
+      body:not(.tox-force-desktop) & {
+        &:not(:first-child) {
+          margin-right: 2px;
+        }
+      }
+    }
+  }
+
+  .tox-dialog__body-nav-item--active {
+    background-color: white;
+    border-bottom: 0;
+    color: #333;
+  }
+
+  .tox-dialog__footer-end,
+  .tox-dialog__footer-start {
+    align-items: flex-start;
+  }
+
+  // Collection
+
+  .tox-collection--grid .tox-collection__group {
+    max-height: 264px;
+  }
+
+  // Form
+
+  .tox-textfield {
+    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+
+    &:focus {
+      border-color: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) * 1.5));
+      box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .25);
+    }
+  }
+
+  &:not([dir=rtl]) {
+    // Checkbox
+
+    .tox-checkbox__label {
+      margin-left: .6rem;
+    }
+
+    // Dialog
+
+    @media @breakpoint-sm {
+      .tox-dialog__body-nav-item {
+        body:not(.tox-force-desktop) & {
+          &:not(:first-child) {
+            margin-left: 2px;
+          }
+        }
+      }
+    }
+  }
+}
+
+// Testing
+
+// :root {
+//   // --primary: #338ab7;
+//   // --primary-rgb: 51, 138, 183;
+//   // --primary-h: 200;
+//   // --primary-s: 56%;
+//   // --primary-l: 46%;
+
+//   --primary: #e50914;
+//   --primary-rgb: 229, 9, 20;
+//   --primary-h: 357;
+//   --primary-s: 92%;
+//   --primary-l: 47%;
+// }

data/src/tinymce-6/skin.shadowdom.less

@@ -0,0 +1 @@
+@import 'src/less/theme/shadowdom';

data/trestle-tinymce.gemspec

@@ -10,11 +10,13 @@ Gem::Specification.new do |spec|
   spec.summary       = "TinyMCE integration plugin for the Trestle admin framework"
   spec.description   = "TinyMCE integration plugin for the Trestle admin framework."
   spec.homepage      = "https://www.trestle.io"
-  spec.license       = "LGPL-3.0"
+  spec.license       = "LGPL-3.0-only"
 
   spec.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
   spec.require_paths = ["lib"]
 
   spec.add_dependency "trestle",       "~> 0.10.0.pre"
-  spec.add_dependency "tinymce-rails", "~> 5.1"
+  spec.add_dependency "tinymce-rails", ">= 5.1", "< 7"
+
+  spec.add_development_dependency "rspec-rails"
 end