Add extra buttons from liferay-portal

package.json

@@ -47,10 +47,10 @@
     "sinon": "1.15.4",
     "uglifyjs-webpack-plugin": "^1.2.4",
     "walk": "^2.3.9",
-    "webpack": "^4.6.0",
-    "webpack-cli": "^2.0.12",
-    "webpack-dev-server": "^3.1.1",
-    "webpack-merge": "^4.1.2",
+    "webpack": "^4.28.1",
+    "webpack-cli": "^3.2.1",
+    "webpack-dev-server": "^3.1.14",
+    "webpack-merge": "^4.2.1",
     "yargs": "6.6.0"
   },
   "main": "dist/alloy-editor/alloy-editor-no-react.js",
@@ -77,6 +77,7 @@
   },
   "homepage": "http://alloyeditor.com",
   "dependencies": {
+    "clay-css": "2.5.1",
     "create-react-class": "^15.6.3",
     "prop-types": "^15.6.2",
     "react": "^16.6.3",

scripts/build/gulp/_hash

@@ -1 +1 @@
-c53f3ac54b9661a152f35743c3075261527c3b82
+cc3dcb64e9a96a8c6ea572d15efbb68a3b70ca02

scripts/build/gulp/tasks/build.js

@@ -20,7 +20,8 @@ gulp.task('build', function(callback) {
         [
             'build-css',
             'copy-ckeditor',
-            'copy-languages'
+            'copy-languages',
+            'copy-svgs'
         ],
         task,
         callback

scripts/build/gulp/tasks/icons.js

@@ -0,0 +1,10 @@
+const Constants = require('../constants');
+const gulp = require('gulp');
+const path = require('path');
+
+gulp.task('copy-svgs', function() {
+    var iconsPath = path.join(Constants.rootDir, 'node_modules', 'clay-css', 'lib', 'images', 'icons', 'icons.svg');
+
+    return gulp.src(iconsPath)
+        .pipe(gulp.dest(path.join(Constants.editorDistFolder, 'assets', 'icons')));
+});

src/adapter/core.js

@@ -12,6 +12,9 @@ import UI from '../components/main.jsx';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
+const EMBED_VIDEO_WIDTH = 560;
+const EMBED_VIDEO_HEIGHT = 315;
+
 /**
  * AlloyEditor main class. Creates instance of the editor and provides the user configuration
  * to the UI.
@@ -51,13 +54,17 @@ extend(Core, Base, {
 
         editor.config.extraPlugins = this.get('extraPlugins');
 
+        editor.config.embedProviders = this.get('embedProviders');
+
         editor.config.placeholderClass = this.get('placeholderClass');
 
         editor.config.pasteFromWordRemoveStyles = false;
         editor.config.pasteFromWordRemoveFontStyles = false;
 
         editor.config.selectionKeystrokes = this.get('selectionKeystrokes');
 
+        editor.config.spritemap = this.get('spritemap');
+
         Lang.mix(editor.config, config);
 
         if (CKEDITOR.env.ie && !CKEDITOR.env.edge) {
@@ -315,6 +322,65 @@ extend(Core, Base, {
             writeOnce: true
         },
 
+
+        /**
+         * List of embed providers for videos
+         *
+         * @memberof Core
+         * @instance
+         * @property embedProviders
+         * @default []
+         * @type Array}
+         */
+        embedProviders: {
+            validator: Lang.isArray,
+            value: [
+                {
+                    id: 'facebook',
+                    tpl: `<iframe allowFullScreen="true" allowTransparency="true"
+                         frameborder="0" height="${EMBED_VIDEO_HEIGHT}"
+                         src="https://www.facebook.com/plugins/video.php?href={embedId}'
+                         &show_text=0&width=${EMBED_VIDEO_WIDTH}&height=${EMBED_VIDEO_HEIGHT}" scrolling="no"
+                         style="border:none;overflow:hidden" width="${EMBED_VIDEO_WIDTH}}"></iframe>`,
+                    urlSchemes: [
+                        '(https?:\\/\\/(?:www\\.)?facebook.com\\/\\S*\\/videos\\/\\S*)'
+                    ]
+                },
+                {
+                    id: 'twitch',
+                    tpl: `<iframe allowfullscreen="true" frameborder="0"
+                         height="${EMBED_VIDEO_HEIGHT}"
+                         src="https://player.twitch.tv/?autoplay=false&video={embedId}"
+                         scrolling="no" width="${EMBED_VIDEO_WIDTH}"></iframe>`,
+                    urlSchemes: [
+                        'https?:\\/\\/(?:www\\.)?twitch.tv\\/videos\\/(\\S*)$'
+                    ]
+                },
+                {
+                    id: 'vimeo',
+                    tpl: `<iframe allowfullscreen frameborder="0" height="${EMBED_VIDEO_HEIGHT}"
+                         mozallowfullscreen src="https://player.vimeo.com/video/{embedId}"
+                         webkitallowfullscreen width="${EMBED_VIDEO_WIDTH}"></iframe>`,
+                    urlSchemes: [
+                        'https?:\\/\\/(?:www\\.)?vimeo\\.com\\/album\\/.*\\/video\\/(\\S*)',
+                        'https?:\\/\\/(?:www\\.)?vimeo\\.com\\/channels\\/.*\\/(\\S*)',
+                        'https?:\\/\\/(?:www\\.)?vimeo\\.com\\/groups\\/.*\\/videos\\/(\\S*)',
+                        'https?:\\/\\/(?:www\\.)?vimeo\\.com\\/(\\S*)$'
+                    ]
+                },
+                {
+                    id: 'youtube',
+                    tpl: `<iframe allow="autoplay; encrypted-media" allowfullscreen
+                         height="${EMBED_VIDEO_HEIGHT}" frameborder="0"
+                         src="https://www.youtube.com/embed/{embedId}?rel=0"
+                         width="${EMBED_VIDEO_WIDTH}"></iframe>`,
+                    urlSchemes: [
+                        'https?:\\/\\/(?:www\\.)?youtube.com\\/watch\\?v=(\\S*)$'
+                    ]
+                }
+            ]
+        },
+
         /**
          * Specifies whether AlloyEditor set the contenteditable attribute
          * to "true" on its srcNode.
@@ -456,6 +522,21 @@ extend(Core, Base, {
             }]
         },
 
+        /**
+         * The path to the spritemap SVG used for icons
+         *
+         * @memberof Core
+         * @instance
+         * @property spritemap
+         * @type String
+         * @writeOnce
+         */
+        spritemap: {
+            validator: Lang.isString,
+            value: 'alloy-editor/assets/icons/icons.svg',
+            writeOnce: true
+        },
+
         /**
          * The Node ID or HTMl node, which AlloyEditor should use as an editable area.
          *

src/assets/lang/en.json

@@ -1,25 +1,37 @@
 {
  	"add": "Add",
+	"ariaUpdateManyToolbars": "{toolbars} toolbars are available. Press ALT+F10 to focus.",
 	"ariaUpdateNoToolbar": "No toolbars are available",
 	"ariaUpdateOneToolbar": "{toolbars} toolbar is available. Press ALT+F10 to focus.",
-	"ariaUpdateManyToolbars": "{toolbars} toolbars are available. Press ALT+F10 to focus.",
 	"camera": "Insert Image from Camera",
 	"cameraDisabled": "The browser does not support this action, or it is available on https only (Chrome).",
 	"cite": "Cite",
 	"clearInput": "Clear Input Field",
+	"clear": "Clear",
 	"code": "Code",
 	"columns": "Cols",
 	"confirm": "Confirm",
+	"danger": "Danger",
 	"deleteEmbed": "Delete embed",
+	"disabled": "Disabled",
 	"editLink": "Type or paste link here",
+	"enterValidUrl": "Please enter a valid url",
 	"image": "Insert Image",
+	"info": "Info",
 	"link": "Link",
 	"linkTargetBlank": "_blank (new tab)",
 	"linkTargetDefault": "default",
 	"linkTargetParent": "_parent",
 	"linkTargetSelf": "_self (same tab)",
 	"linkTargetTop": "_top",
+	"normal": "Normal",
+	"pasteVideoLink": "Paste Video Link",
+	"platformNotSupported": "Sorry, this platform is not supported",
+	"primary": "Primary",
 	"removeLink": "Remove link",
 	"rows": "Rows",
-	"table": "Insert Table"
+	"success": "Success",
+	"table": "Insert Table",
+	"videoPlaybackDisabled": "Video playback is disabled during edit mode",
+	"warning": "Warning"
 }

src/assets/sass/components/ae-icon/skin.scss

@@ -0,0 +1,3 @@
+.ae-svg-icon {
+	fill: $svg-icon;
+}

src/assets/sass/components/ae-icon/structure.scss

@@ -0,0 +1,8 @@
+.ae-svg-icon {
+	display: inline-block;
+	height: $svg-icon-size;
+	margin-top: $svg-icon-margin-top;
+	pointer-events: none;
+	vertical-align: middle;
+	width: $svg-icon-size;
+}

src/assets/sass/components/ae-icon/variables/skin.scss

@@ -0,0 +1 @@
+$svg-icon: currentColor;

src/assets/sass/components/ae-icon/variables/structure.scss

@@ -0,0 +1,2 @@
+$svg-icon-size: 1em;
+$svg-icon-margin-top: -3px;

src/assets/sass/components/ae-separator/skin.scss

@@ -0,0 +1,3 @@
+.ae-separator::after {
+	border-right-color: $separator-color;
+}

src/assets/sass/components/ae-separator/structure.scss

@@ -1,14 +1,15 @@
 .ae-separator {
-	height: 24px;
-	margin-right: 10px;
+	height: $separator-height;
+	margin-right: $separator-margin-right;
 	position: relative;
 
 	&::after {
-		border-right: 1px solid white;
+		border-right-style: solid;
+		border-right-width: $separator-line-border-width;
 		content: '';
-		height: 12px;
+		height: $separator-line-height;
 		position: absolute;
-		top: 50%;
-		transform: translateY(-50%);
+		top: $separator-line-top;
+		transform: $separator-line-translateY;
 	}
 }

src/assets/sass/components/ae-separator/variables/skin.scss

@@ -0,0 +1 @@
+$separator-color: white;

src/assets/sass/components/ae-separator/variables/structure.scss

@@ -0,0 +1,6 @@
+$separator-height: 24px;
+$separator-margin-right: 10px;
+$separator-line-border-width: 1px;
+$separator-line-height: 12px;
+$separator-line-top: 50%;
+$separator-line-translateY: translateY(-50%);

src/assets/sass/skin/atlas/variables/structure.scss

@@ -55,4 +55,7 @@ $dropdown-listbox-item-padding: 8px 12px;
 /** TOOLBAR **/
 $toolbar-add-border-width: 2px;
 $toolbar-add-height: 44px;
-$toolbar-add-width: 44px;
+$toolbar-add-width: 44px;
+
+/** SEPARATOR **/
+$separator-height: 40px;

src/assets/sass/skin/default/skin.scss

@@ -1,15 +1,17 @@
 @import "components/ae-editable/skin";
+@import "components/ae-icon/skin";
 @import "components/ae-placeholder/skin";
+@import "components/ae-separator/skin";
 @import "components/ae-sr-only/skin";
 @import "components/ae-twitter-link/skin";
 
 .ae-ui {
 	@import "components/ae-arrow-box/skin";
+	@import "components/ae-button-bridge/skin";
 	@import "components/ae-camera/skin";
-	@import "components/ae-container/skin";
 	@import "components/ae-container-dropdown/skin";
 	@import "components/ae-container-input/skin";
-	@import "components/ae-button-bridge/skin";
+	@import "components/ae-container/skin";
 	@import "components/ae-dropdown/skin";
 	@import "components/ae-toolbar/skin";
 }

src/assets/sass/skin/default/structure.scss

@@ -11,6 +11,8 @@
 @import "components/ae-placeholder/structure";
 @import "components/ae-twitter-link/structure";
 @import "components/ae-sr-only/structure";
+@import "components/ae-icon/structure";
+@import "components/ae-separator/structure";
 
 .ae-ui {
 	@import "components/ae-toolbar/structure";

src/assets/sass/skin/default/variables/skin.scss

@@ -9,4 +9,6 @@
 @import "components/ae-button-bridge/variables/skin";
 @import "components/ae-dropdown/variables/skin";
 @import "components/ae-toolbar/variables/skin";
-@import "components/ae-twitter-link/variables/skin";
+@import "components/ae-twitter-link/variables/skin";
+@import "components/ae-icon/variables/skin";
+@import "components/ae-separator/variables/skin";

src/assets/sass/skin/default/variables/structure.scss

@@ -9,4 +9,6 @@
 @import "components/ae-button-bridge/variables/structure";
 @import "components/ae-dropdown/variables/structure";
 @import "components/ae-toolbar/variables/structure";
-@import "components/ae-twitter-link/variables/structure";
+@import "components/ae-twitter-link/variables/structure";
+@import "components/ae-icon/variables/structure";
+@import "components/ae-separator/variables/structure";

src/assets/sass/skin/moono/variables/skin.scss

@@ -43,4 +43,7 @@ $toolbar-font-color: $CKEDITOR_font_base_color;
 $toolbar-add-bg-color: $CKEDITOR_base_color;
 $toolbar-add-border-radius: 0;
 $toolbar-add-font-color: $CKEDITOR_font_base_color;
-$toolbar-add-icon-size: 22px;
+$toolbar-add-icon-size: 22px;
+
+/** SEPARATOR **/
+$separator-color: #393939;

src/assets/sass/skin/moono/variables/structure.scss

@@ -38,4 +38,7 @@ $toolbar-add-height: $base-height;
 $toolbar-add-width: $base-width;
 
 /** TOOLBAR-ADD **/
-$toolbar-add-border-width: 0;
+$toolbar-add-border-width: 0;
+
+/** SEPARATOR **/
+$separator-height: 28px;

src/components/base/button-action-style.js

@@ -19,7 +19,7 @@ export default WrappedComponent => class extends WrappedComponent {
      * @memberof ButtonActionStyle
      * @method applyStyle
      */
-    applyStyle() {
+    applyStyle = () => {
         if (Lang.isFunction(this.isActive) && Lang.isFunction(this.getStyle)) {
             var editor = this.props.editor.get('nativeEditor');
 

src/components/base/button-command.js

@@ -12,8 +12,8 @@ export default WrappedComponent => class extends WrappedComponent {
      * @param {Object=} data Optional data to be passed to CKEDITOR's `execCommand` method.
      * @method execCommand
      */
-    execCommand(data) {
-        var editor = this.props.editor.get('nativeEditor');
+    execCommand = data => {
+        const editor = this.props.editor.get('nativeEditor');
 
         editor.execCommand(this.props.command, data);
 

src/components/base/widget-dropdown.js

@@ -1,5 +1,5 @@
-import ReactDOM from 'react-dom';
 import Lang from '../../oop/lang.js';
+import ReactDOM from 'react-dom';
 
 /**
  * Provides functionality for managing different dropdowns inside a widget.

src/components/base/widget-exclusive.js

@@ -99,7 +99,7 @@ export default WrappedComponent => class extends WrappedComponent {
      * @method requestExclusive
      * @param {Object} itemExclusive The widget which requests exclusive state.
      */
-    requestExclusive(itemExclusive) {
+    requestExclusive = itemExclusive => {
         this.setState({
             itemExclusive: itemExclusive
         });