Merge pull request ezsystems#305 from ezsystems/ezp-24731_embed

EZP-24731: As an editor, I want to be able to add embed elements in the RichText editor

.gitignore

@@ -2,6 +2,8 @@
 Tests/report/
 *-coverage.js
 Tests/instrument/
+Tests/js/alloyeditor/toolbars/assets/*.js
+Tests/js/alloyeditor/buttons/assets/*.js
 node_modules/
 Resources/public/vendors/
 /vendor/

ApplicationConfig/Providers/RootInfo.php

@@ -16,10 +16,11 @@ class RootInfo implements Provider
     /** @var \Symfony\Component\Templating\Asset\PackageInterface */
     private $assetsHelper;
 
-    public function __construct(RequestStack $requestStack, AssetsHelper $assetsHelper)
+    public function __construct(RequestStack $requestStack, AssetsHelper $assetsHelper, $externalAssetsDirectory)
     {
         $this->requestStack = $requestStack;
         $this->assetsHelper = $assetsHelper;
+        $this->externalAssetsDirectory = $externalAssetsDirectory;
     }
 
     /**
@@ -30,6 +31,7 @@ public function getConfig()
         return [
             'root' => $this->requestStack->getMasterRequest()->attributes->get('semanticPathInfo'),
             'assetRoot' => $this->assetsHelper->getUrl('/'),
+            'ckeditorPluginPath' => $this->assetsHelper->getUrl($this->externalAssetsDirectory) . '/vendors/',
         ];
     }
 }

Resources/config/css.yml

@@ -82,6 +82,7 @@ system:
                 - 'bundles/ezplatformui/css/modules/table-data.css'
                 - 'bundles/ezplatformui/css/modules/breadcrumbs.css'
                 - 'bundles/ezplatformui/css/modules/yui-calendar.css'
+                - 'bundles/ezplatformui/css/alloyeditor/content.css'
                 - 'bundles/ezplatformui/css/alloyeditor/toolbars/appendcontent.css'
             # theme stylesheets
                 - 'bundles/ezplatformui/css/theme/app.css'
@@ -146,4 +147,5 @@ system:
                 - 'bundles/ezplatformui/css/theme/modules/breadcrumbs.css'
                 - 'bundles/ezplatformui/css/theme/modules/yui-calendar.css'
                 - 'bundles/ezplatformui/css/theme/alloyeditor/general.css'
+                - 'bundles/ezplatformui/css/theme/alloyeditor/content.css'
                 - 'bundles/ezplatformui/css/theme/alloyeditor/toolbars/appendcontent.css'

Resources/config/services.yml

@@ -67,6 +67,7 @@ services:
         arguments:
             - @request_stack
             - @templating.helper.assets
+            - %ez_platformui.external_assets_public_dir%
         tags:
             - {name: ezsystems.platformui.application_config_provider, key: 'rootInfo'}
 

Resources/config/yui.yml

@@ -16,12 +16,18 @@ system:
                 ez-alloyeditor-plugin-appendcontent:
                     requires: ['ez-alloyeditor']
                     path: %ez_platformui.public_dir%/js/alloyeditor/plugins/appendcontent.js
+                ez-alloyeditor-plugin-embed:
+                    requires: ['ez-alloyeditor']
+                    path: %ez_platformui.public_dir%/js/alloyeditor/plugins/embed.js
                 ez-alloyeditor-toolbar-appendcontent:
                     requires: ['ez-alloyeditor']
                     path: %ez_platformui.public_dir%/js/alloyeditor/toolbars/appendcontent.js
                 ez-alloyeditor-button-heading:
                     requires: ['ez-alloyeditor']
                     path: %ez_platformui.public_dir%/js/alloyeditor/buttons/heading.js
+                ez-alloyeditor-button-embed:
+                    requires: ['ez-alloyeditor']
+                    path: %ez_platformui.public_dir%/js/alloyeditor/buttons/embed.js
                 ez-platformuiapp:
                     requires:
                         - 'app'
@@ -421,9 +427,11 @@ system:
                         - 'ez-fieldeditview'
                         - 'ez-alloyeditor'
                         - 'ez-richtextfocusmodebarview'
+                        - 'ez-alloyeditor-plugin-embed'
                         - 'ez-alloyeditor-plugin-appendcontent'
                         - 'ez-alloyeditor-toolbar-appendcontent'
                         - 'ez-alloyeditor-button-heading'
+                        - 'ez-alloyeditor-button-embed'
                         - 'richtexteditview-ez-template'
                     path: %ez_platformui.public_dir%/js/views/fields/ez-richtext-editview.js
                 richtexteditview-ez-template:

Resources/public/css/alloyeditor/content.css

@@ -0,0 +1,22 @@
+/**
+ * Copyright (C) eZ Systems AS. All rights reserved.
+ * For full copyright and license information view LICENSE file distributed with this source code.
+ */
+
+.ez-richtext-editable ezembed {
+    display: block;
+    margin: 1em 0.1em;
+    line-height: 2em;
+    height: 2em;
+}
+
+.ez-richtext-editable ezembed:before {
+    padding: 0 0.2em 0 0.5em;
+}
+
+.ez-richtext-editable ezembed:before,
+.ez-richtext-editable ezembed:after {
+    line-height: 100%;
+    height: 100%;
+    display: inline-block;
+}

Resources/public/css/alloyeditor/toolbars/appendcontent.css

@@ -6,8 +6,13 @@
 .ae-ui .ez-ae-appendcontent .ez-ae-labeled-button {
     width: auto;
     height: auto;
+    margin: 0.3em 0.8em;
 }
 
 .ae-ui .ez-ae-appendcontent .ez-ae-label {
-    margin: 0;
+    margin: 0.3em 0 0 0;
+}
+
+.ae-ui .ez-ae-icon:before {
+    display: block;
 }

Resources/public/css/theme/alloyeditor/content.css

@@ -0,0 +1,26 @@
+/**
+ * Copyright (C) eZ Systems AS. All rights reserved.
+ * For full copyright and license information view LICENSE file distributed with this source code.
+ */
+
+.ez-richtext-editable ezembed {
+    background: #eee;
+    border: 1px solid #aaa;
+    font-size: 1.1em;
+}
+
+.ez-richtext-editable ezembed:before {
+    font-family: 'ez-platformui-icomoon';
+    speak: none;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+
+    content: "\E62e";
+}
+
+.ez-richtext-editable ezembed:after {
+    content: attr(href);
+}

Resources/public/css/theme/alloyeditor/toolbars/appendcontent.css

@@ -10,3 +10,11 @@
 .ae-ui .ez-ae-appendcontent .ez-ae-label {
     font-size: 80%;
 }
+
+.ae-ui .ez-ae-icon:before {
+    font-size: 28px;
+}
+
+.ae-ui .ez-ae-icon-embed:before {
+    content: "\E62e";
+}