Skip to content
Permalink
Browse files

Merge pull request #436 from ezsystems/ezp-25108_editor_image

EZP-25108: As an editor, I want to able to embed images in the RichText editor
  • Loading branch information...
dpobel committed Nov 25, 2015
2 parents c44bdc8 + 2e52b8b commit 5afceb43a129e9d314be65ebd1628190fa01b66c
Showing with 2,587 additions and 66 deletions.
  1. +16 −1 Resources/config/yui.yml
  2. +17 −4 Resources/public/css/alloyeditor/content.css
  3. +4 −0 Resources/public/css/theme/alloyeditor/buttons/labeled-button.css
  4. +10 −2 Resources/public/css/theme/alloyeditor/content.css
  5. +0 −4 Resources/public/css/theme/views/fields/edit/richtext.css
  6. +4 −0 Resources/public/css/views/fields/view/richtext.css
  7. +4 −1 Resources/public/js/alloyeditor/buttons/embed.js
  8. +4 −1 Resources/public/js/alloyeditor/buttons/embed.jsx
  9. +4 −1 Resources/public/js/alloyeditor/buttons/embedhref.js
  10. +4 −1 Resources/public/js/alloyeditor/buttons/embedhref.jsx
  11. +82 −0 Resources/public/js/alloyeditor/buttons/image.js
  12. +77 −0 Resources/public/js/alloyeditor/buttons/image.jsx
  13. +79 −0 Resources/public/js/alloyeditor/buttons/imagehref.js
  14. +74 −0 Resources/public/js/alloyeditor/buttons/imagehref.jsx
  15. +36 −11 Resources/public/js/alloyeditor/buttons/mixins/embeddiscovercontent.js
  16. +102 −0 Resources/public/js/alloyeditor/buttons/mixins/embedimage.js
  17. +101 −0 Resources/public/js/alloyeditor/plugins/embed.js
  18. +56 −0 Resources/public/js/alloyeditor/toolbars/config/image.js
  19. +18 −0 Resources/public/js/models/ez-contenttypemodel.js
  20. +17 −2 Resources/public/js/views/ez-universaldiscoveryview.js
  21. +30 −6 Resources/public/js/views/fields/ez-richtext-editview.js
  22. +46 −1 Resources/public/js/views/services/plugins/ez-contenttreeplugin.js
  23. +26 −10 Resources/public/js/views/services/plugins/ez-imagevariationloadplugin.js
  24. +4 −1 Resources/public/js/views/services/plugins/ez-universaldiscoverycontenttreeplugin.js
  25. +12 −0 Resources/public/js/views/universaldiscovery/ez-universaldiscoverymethodbaseview.js
  26. +359 −0 Tests/js/alloyeditor/buttons/assets/ez-alloyeditor-button-image-tests.jsx
  27. +366 −0 Tests/js/alloyeditor/buttons/assets/ez-alloyeditor-button-imagehref-tests.jsx
  28. +55 −0 Tests/js/alloyeditor/buttons/ez-alloyeditor-button-image.html
  29. +59 −0 Tests/js/alloyeditor/buttons/ez-alloyeditor-button-imagehref.html
  30. +263 −0 Tests/js/alloyeditor/plugins/assets/ez-alloyeditor-plugin-embed-tests.js
  31. +10 −0 Tests/js/alloyeditor/plugins/ez-alloyeditor-plugin-embed.html
  32. +123 −0 Tests/js/alloyeditor/toolbars/config/assets/ez-alloyeditor-toolbar-config-image-tests.js
  33. +49 −0 Tests/js/alloyeditor/toolbars/config/ez-alloyeditor-toolbar-config-image.html
  34. +46 −1 Tests/js/models/assets/ez-contenttypemodel-tests.js
  35. +43 −7 Tests/js/views/fields/assets/ez-richtext-editview-tests.js
  36. +254 −5 Tests/js/views/services/plugins/assets/ez-contenttreeplugin-tests.js
  37. +111 −4 Tests/js/views/services/plugins/assets/ez-imagevariationloadplugin-tests.js
  38. +13 −2 Tests/js/views/services/plugins/assets/ez-universaldiscoverycontenttreeplugin-tests.js
  39. +9 −1 Tests/js/views/services/plugins/ez-contenttreeplugin.html
@@ -35,6 +35,9 @@ system:
ez-alloyeditor-toolbar-config-embed:
requires: ['ez-alloyeditor', 'ez-alloyeditor-toolbar-config-block-base']
path: %ez_platformui.public_dir%/js/alloyeditor/toolbars/config/embed.js
ez-alloyeditor-toolbar-config-image:
requires: ['ez-alloyeditor', 'ez-alloyeditor-toolbar-config-block-base']
path: %ez_platformui.public_dir%/js/alloyeditor/toolbars/config/image.js
ez-alloyeditor-plugin-addcontent:
requires: ['ez-alloyeditor']
path: %ez_platformui.public_dir%/js/alloyeditor/plugins/addcontent.js
@@ -53,6 +56,9 @@ system:
ez-alloyeditor-button-paragraph:
requires: ['ez-alloyeditor']
path: %ez_platformui.public_dir%/js/alloyeditor/buttons/paragraph.js
ez-alloyeditor-button-image:
requires: ['ez-alloyeditor', 'ez-alloyeditor-button-mixin-embeddiscovercontent', 'ez-alloyeditor-button-mixin-embedimage']
path: %ez_platformui.public_dir%/js/alloyeditor/buttons/image.js
ez-alloyeditor-button-embed:
requires: ['ez-alloyeditor', 'ez-alloyeditor-button-mixin-embeddiscovercontent']
path: %ez_platformui.public_dir%/js/alloyeditor/buttons/embed.js
@@ -74,12 +80,18 @@ system:
ez-alloyeditor-button-embedhref:
requires: ['ez-alloyeditor', 'ez-alloyeditor-button-mixin-embeddiscovercontent']
path: %ez_platformui.public_dir%/js/alloyeditor/buttons/embedhref.js
ez-alloyeditor-button-imagehref:
requires: ['ez-alloyeditor', 'ez-alloyeditor-button-mixin-embeddiscovercontent', 'ez-alloyeditor-button-mixin-embedimage']
path: %ez_platformui.public_dir%/js/alloyeditor/buttons/imagehref.js
ez-alloyeditor-button-mixin-blocktextalign:
requires: ['ez-alloyeditor']
path: %ez_platformui.public_dir%/js/alloyeditor/buttons/mixins/blocktextalign.js
ez-alloyeditor-button-mixin-embeddiscovercontent:
requires: ['ez-alloyeditor']
path: %ez_platformui.public_dir%/js/alloyeditor/buttons/mixins/embeddiscovercontent.js
ez-alloyeditor-button-mixin-embedimage:
requires: ['ez-alloyeditor']
path: %ez_platformui.public_dir%/js/alloyeditor/buttons/mixins/embedimage.js
ez-platformuiapp:
requires:
- 'app'
@@ -545,15 +557,18 @@ system:
- 'ez-alloyeditor-toolbar-config-heading'
- 'ez-alloyeditor-toolbar-config-paragraph'
- 'ez-alloyeditor-toolbar-config-embed'
- 'ez-alloyeditor-toolbar-config-image'
- 'ez-alloyeditor-button-heading'
- 'ez-alloyeditor-button-paragraph'
- 'ez-alloyeditor-button-embed'
- 'ez-alloyeditor-button-image'
- 'ez-alloyeditor-button-blocktextalignleft'
- 'ez-alloyeditor-button-blocktextaligncenter'
- 'ez-alloyeditor-button-blocktextalignright'
- 'ez-alloyeditor-button-blocktextalignjustify'
- 'ez-alloyeditor-button-blockremove'
- 'ez-alloyeditor-button-embedhref'
- 'ez-alloyeditor-button-imagehref'
- 'richtexteditview-ez-template'
path: %ez_platformui.public_dir%/js/views/fields/ez-richtext-editview.js
richtexteditview-ez-template:
@@ -933,7 +948,7 @@ system:
requires: ['ez-contenttreeplugin', 'ez-pluginregistry']
path: %ez_platformui.public_dir%/js/views/services/plugins/ez-discoverybarcontenttreeplugin.js
ez-contenttreeplugin:
requires: ['ez-viewservicebaseplugin', 'ez-contenttypemodel', 'ez-locationmodel', 'ez-contenttree', 'parallel']
requires: ['ez-viewservicebaseplugin', 'ez-contenttypemodel', 'ez-locationmodel', 'ez-contenttree', 'ez-contentmodel', 'parallel']
path: %ez_platformui.public_dir%/js/views/services/plugins/ez-contenttreeplugin.js
ez-locationsearchplugin:
requires: ['parallel', 'ez-viewservicebaseplugin', 'ez-pluginregistry', 'ez-locationmodel']
@@ -5,17 +5,30 @@

.ez-richtext-editable [data-ezelement="ezembed"] {
display: block;
margin: 1em 0.1em;
margin: 0.5em 0.1em;
line-height: 2em;
height: 2em;
min-height: 2em;
padding: 0.3em;
box-sizing: border-box;
}

.ez-richtext-editable [data-ezelement="ezembed"]:before {
padding: 0 0.2em 0 0.5em;
.ez-richtext-editable .ez-embed-type-image[data-ezelement="ezembed"] {
display: inline-block;
line-height: 1;
min-height: auto;
}

.ez-richtext-editable [data-ezelement="ezembed"]:before {
padding: 0 0.2em 0 0.5em;
line-height: 100%;
height: 100%;
display: inline-block;
}

.ez-richtext-editable .ez-embed-type-image[data-ezelement="ezembed"]:before {
padding: 0;
}

.ez-richtext-editable [data-ezelement="ezconfig"] {
display: none;
}
@@ -15,6 +15,10 @@
content: "\E62e";
}

.ae-ui .ez-ae-icon-image:before {
content: "\E625";
}

.ae-ui .ez-ae-icon-paragraph:before {
content: "";
}
@@ -9,6 +9,11 @@
font-size: 1.1em;
}

.ez-richtext-editable .ez-embed-type-image[data-ezelement="ezembed"] {
background: transparent;
border: 0;
}

.ez-richtext-editable [data-ezelement="ezembed"]:before {
font-family: 'ez-platformui-icomoon';
speak: none;
@@ -21,9 +26,12 @@
content: "\E62e";
}

.ez-richtext-editable .ez-embed-type-image[data-ezelement="ezembed"]:before {
content: "";
}

.ez-richtext-editable .is-block-focused,
.ez-richtext-editable .cke_widget_wrapper.cke_widget_focused>.cke_widget_element
{
.ez-richtext-editable .cke_widget_wrapper.cke_widget_focused>.cke_widget_element {
outline: 2px dashed #aaa;
outline-offset: 3px;
}
@@ -27,10 +27,6 @@
background: #fff;
}

.ez-view-richtexteditview .ez-richtext-editable:focus {
outline: 0;
}

.ez-view-richtexteditview.is-focused .ez-editfield-row,
.ez-view-richtexteditview.is-focused .ez-editfield-input-area {
background: #f3f3f3;
@@ -6,3 +6,7 @@
.ez-fieldview-ezrichtext .ez-richtext-content > section *:first-child {
margin-top: 0;
}

.ez-fieldview-ezrichtext .ez-richtext-content [data-ezelement="ezconfig"] {
display: none;
}
@@ -52,8 +52,11 @@ YUI.add('ez-alloyeditor-button-embed', function (Y) {
* @protected
*/
_addEmbed: function (e) {
var contentInfo = e.selection.contentInfo;

this.execCommand();
this._setContentInfo(e.selection.contentInfo);
this._setContentInfo(contentInfo);
this._getWidget().setWidgetContent(contentInfo.get('name'));
},

render: function () {
@@ -47,8 +47,11 @@ YUI.add('ez-alloyeditor-button-embed', function (Y) {
* @protected
*/
_addEmbed: function (e) {
var contentInfo = e.selection.contentInfo;

this.execCommand();
this._setContentInfo(e.selection.contentInfo);
this._setContentInfo(contentInfo);
this._getWidget().setWidgetContent(contentInfo.get('name'));
},

render: function () {
@@ -53,7 +53,10 @@ YUI.add('ez-alloyeditor-button-embedhref', function (Y) {
* @protected
*/
_updateEmbed: function (e) {
this._setContentInfo(e.selection.contentInfo);
var contentInfo = e.selection.contentInfo;

this._setContentInfo(contentInfo);
this._getWidget().setWidgetContent(contentInfo.get('name'));
},

render: function () {
@@ -48,7 +48,10 @@ YUI.add('ez-alloyeditor-button-embedhref', function (Y) {
* @protected
*/
_updateEmbed: function (e) {
this._setContentInfo(e.selection.contentInfo);
var contentInfo = e.selection.contentInfo;

this._setContentInfo(contentInfo);
this._getWidget().setWidgetContent(contentInfo.get('name'));
},

render: function () {
@@ -0,0 +1,82 @@
/*
* Copyright (C) eZ Systems AS. All rights reserved.
* For full copyright and license information view LICENSE file distributed with this source code.
*/
// **NOTICE:**
// THIS IS AN AUTO-GENERATED FILE
// DO YOUR MODIFICATIONS IN THE CORRESPONDING .jsx FILE
// AND REGENERATE IT WITH: grunt jsx
// END OF NOTICE
YUI.add('ez-alloyeditor-button-image', function (Y) {
"use strict";

var AlloyEditor = Y.eZ.AlloyEditor,
React = Y.eZ.React,
ButtonImage;

/**
* The ButtonImage component represents a button to add an image in the
* editor.
*
* @uses AlloyEditor.ButtonCommand
* @uses AlloyEditor.ButtonStateClasses
* @uses eZ.AlloyEditorToolbarConfig.ButtonImageDiscoverContent
*
* @class eZ.AlloyEditor.ButtonImage
*/
ButtonImage = React.createClass({displayName: "ButtonImage",
mixins: [
AlloyEditor.ButtonCommand,
AlloyEditor.ButtonStateClasses,
Y.eZ.AlloyEditorButton.ButtonEmbedDiscoverContent,
Y.eZ.AlloyEditorButton.ButtonEmbedImage,
],

statics: {
key: 'ezimage'
},

getDefaultProps: function () {
return {
command: 'ezembed',
modifiesSelection: true,
udwTitle: "Select an image to embed",
udwContentDiscoveredMethod: '_addImage',
udwIsSelectableMethod: '_isImage',
udwLoadContent: true,
};
},

/**
* Executes the command generated by the ezembed plugin and set the
* correct value based on the choosen image.
*
* @method _addImage
* @param {EventFacade} e the result of the choice in the UDW
* @protected
*/
_addImage: function (e) {
this.execCommand();
this._setContentInfo(e.selection.contentInfo);

this._getWidget()
.setWidgetContent('Loading the image...')
.setImageType();
this._loadEmbedImage(e.selection);
this.props.editor.get('nativeEditor').fire('actionPerformed', this);
},

render: function () {
var css = "ae-button ez-ae-labeled-button" + this.getStateClasses();

return (
React.createElement("button", {className: css, onClick: this._chooseContent, tabIndex: this.props.tabIndex},
React.createElement("span", {className: "ez-ae-icon ez-ae-icon-image ez-font-icon"}),
React.createElement("p", {className: "ez-ae-label"}, "Image")
)
);
},
});

AlloyEditor.Buttons[ButtonImage.key] = AlloyEditor.ButtonImage = ButtonImage;
});
@@ -0,0 +1,77 @@
/*
* Copyright (C) eZ Systems AS. All rights reserved.
* For full copyright and license information view LICENSE file distributed with this source code.
*/
YUI.add('ez-alloyeditor-button-image', function (Y) {
"use strict";

var AlloyEditor = Y.eZ.AlloyEditor,
React = Y.eZ.React,
ButtonImage;

/**
* The ButtonImage component represents a button to add an image in the
* editor.
*
* @uses AlloyEditor.ButtonCommand
* @uses AlloyEditor.ButtonStateClasses
* @uses eZ.AlloyEditorToolbarConfig.ButtonImageDiscoverContent
*
* @class eZ.AlloyEditor.ButtonImage
*/
ButtonImage = React.createClass({
mixins: [
AlloyEditor.ButtonCommand,
AlloyEditor.ButtonStateClasses,
Y.eZ.AlloyEditorButton.ButtonEmbedDiscoverContent,
Y.eZ.AlloyEditorButton.ButtonEmbedImage,
],

statics: {
key: 'ezimage'
},

getDefaultProps: function () {
return {
command: 'ezembed',
modifiesSelection: true,
udwTitle: "Select an image to embed",
udwContentDiscoveredMethod: '_addImage',
udwIsSelectableMethod: '_isImage',
udwLoadContent: true,
};
},

/**
* Executes the command generated by the ezembed plugin and set the
* correct value based on the choosen image.
*
* @method _addImage
* @param {EventFacade} e the result of the choice in the UDW
* @protected
*/
_addImage: function (e) {
this.execCommand();
this._setContentInfo(e.selection.contentInfo);

this._getWidget()
.setWidgetContent('Loading the image...')
.setImageType();
this._loadEmbedImage(e.selection);
this.props.editor.get('nativeEditor').fire('actionPerformed', this);
},

render: function () {
var css = "ae-button ez-ae-labeled-button" + this.getStateClasses();

return (
<button className={css} onClick={this._chooseContent} tabIndex={this.props.tabIndex}>
<span className="ez-ae-icon ez-ae-icon-image ez-font-icon"></span>
<p className="ez-ae-label">Image</p>
</button>
);
},
});

AlloyEditor.Buttons[ButtonImage.key] = AlloyEditor.ButtonImage = ButtonImage;
});
Oops, something went wrong.

0 comments on commit 5afceb4

Please sign in to comment.
You can’t perform that action at this time.