Merge pull request #954 from julien/feature/extra_buttons

Add extra buttons from liferay-portal

Author: julien

package-lock.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",

package.json

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

scripts/build/gulp/_hash

@@ -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/build.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')));
+});

scripts/build/gulp/tasks/icons.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/adapter/core.js

@@ -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/lang/en.json

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

src/assets/sass/components/ae-icon/skin.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/structure.scss

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