Skip to content

EZP-30732: As an Editor I want be able to add embed/images inside table cells #1034

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: 1.5
Choose a base branch
from
Open

EZP-30732: As an Editor I want be able to add embed/images inside table cells #1034

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
7a97f04
EZP-30732: As an Editor I want be able to add embed/images inside tab…
SerheyDolgushev Jul 8, 2019
c40b66c
EZP-30732: Deprecation warning for editor.ezembed.canBeAdded
SerheyDolgushev Jul 9, 2019
8b3687b
EZP-30732: EzBtnImage.isDisabled and EzBtnEmbed.isDisabled are deprec…
SerheyDolgushev Jul 9, 2019
9e8739d
EZP-30732: Dont use empty width space for inline embeds, as in some c…
SerheyDolgushev Aug 13, 2019
2a38bb2
EZP-30732: allow to inser embeds inside table cell paragraph
SerheyDolgushev Aug 15, 2019
0a812c4
EZP-30732: disable child elements in the lists
SerheyDolgushev Aug 23, 2019
e95e1d9
EZP-30732: CS fixes suggested by Dariusz
SerheyDolgushev Aug 28, 2019
82a77c2
Merge remote-tracking branch 'upstream/1.5' into fix_allow_embed_in_t…
SerheyDolgushev Mar 10, 2020
419b3fd
EZP-30732: embed and image buttons are added to table-cell toolbar
SerheyDolgushev Mar 10, 2020
6936bb5
EZP-30732: embed and image buttons are added to table-cell toolbar, f…
SerheyDolgushev Mar 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/bundle/Resources/public/js/alloyeditor/src/buttons/ez-btn-embed.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ export default class EzBtnEmbed extends EzEmbedDiscoverContentButton {
* @return {Boolean} True if the command is disabled, false otherwise.
*/
isDisabled() {
console.warn('[DEPRECATED] EzBtnEmbed.isDisabled method is deprecated');
console.warn('[DEPRECATED] it will be removed from ezplatform-admin-ui 2.0');
return !this.props.editor.get('nativeEditor').ezembed.canBeAdded();
}

Expand Down Expand Up @@ -55,13 +57,11 @@ export default class EzBtnEmbed extends EzEmbedDiscoverContentButton {
*/
render() {
const css = 'ae-button ez-btn-ae ez-btn-ae--embed ' + this.getStateClasses();
const disabled = this.isDisabled();
const label = Translator.trans(/*@Desc("Embed")*/ 'embed_btn.label', {}, 'alloy_editor');

return (
<button
className={css}
disabled={disabled}
onClick={this.chooseContent.bind(this)}
tabIndex={this.props.tabIndex}
title={label}>
Expand Down
6 changes: 3 additions & 3 deletions src/bundle/Resources/public/js/alloyeditor/src/buttons/ez-btn-image.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ export default class EzBtnImage extends EzEmbedImageButton {
* @return {Boolean} True if the command is disabled, false otherwise.
*/
isDisabled() {
console.warn('[DEPRECATED] EzBtnImage.isDisabled method is deprecated');
console.warn('[DEPRECATED] it will be removed from ezplatform-admin-ui 2.0');
return !this.props.editor.get('nativeEditor').ezembed.canBeAdded();
}

Expand Down Expand Up @@ -56,14 +58,12 @@ export default class EzBtnImage extends EzEmbedImageButton {
* @return {Object} The content which should be rendered.
*/
render() {
const css = 'ae-button ez-btn-ae ez-btn-ae--image ' + this.getStateClasses(),
disabled = this.isDisabled();
const css = 'ae-button ez-btn-ae ez-btn-ae--image ' + this.getStateClasses();
const label = Translator.trans(/*@Desc("Image")*/ 'image_btn.label', {}, 'alloy_editor');

return (
<button
className={css}
disabled={disabled}
onClick={this.chooseContent.bind(this)}
tabIndex={this.props.tabIndex}
title={label}>
Expand Down
9 changes: 8 additions & 1 deletion src/bundle/Resources/public/js/alloyeditor/src/plugins/ez-add-content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,14 @@

if (elementPath && elementPath.block) {
const elements = elementPath.elements;
const insertIndex = !elementPath.contains(isCustomTag, true) ? elements.length - 2 : 0;
const insideTableCell = elementPath.blockLimit && elementPath.blockLimit.getName() === 'td';
const insideCustomTag = elementPath.contains(isCustomTag, true);
const insideListItem = elementPath.lastElement.getName() == 'li';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const insideListItem = elementPath.lastElement.getName() == 'li';
const insideListItem = elementPath.lastElement.getName() === 'li';

let insertIndex = insideTableCell || insideCustomTag || insideListItem ? 0 : elements.length - 2;

if (elementPath.lastElement.getName() == 'li') {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And here I have a question why you have to check if this is a list item and increase the index

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dew326 Answering your question:
If you are trying to insert any content (embed/image/etc) into the list item, it will be added after the list element, but not the list item element. And it fixes list item related issues previously submitted by @barbaragr
I guess this behavior will be changed in the future when it will be allowed to insert embed/images/etc inside list items.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
if (elementPath.lastElement.getName() == 'li') {
if (elementPath.lastElement.getName() === 'li') {

insertIndex++;
}

element.insertAfter(elements[insertIndex]);
} else if (editor.widgets && editor.widgets.focused) {
Expand Down
6 changes: 3 additions & 3 deletions src/bundle/Resources/public/js/alloyeditor/src/plugins/ez-embed.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@ import embedBaseDefinition from '../widgets/ez-embed-base';
init: function(editor) {
editor.ezembed = {
canBeAdded: () => {
const path = editor.elementPath();

return !path || path.contains('table', true) === null;
console.warn('[DEPRECATED] canBeAdded method is deprecated');
console.warn('[DEPRECATED] it will be removed from ezplatform-admin-ui 2.0');
return true;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This method is not needed anymore so we can remove it in 3.0 for BC we need to keep it in 2.5.x.
Please add the deprecation information:

console.warn('[DEPRECATED] canBeAdded method is deprecated');
console.warn('[DEPRECATED] it will be removed from ezplatform-admin-ui 2.0');

The usage of this method can be safely removed from our buttons:
https://github.com/ezsystems/ezplatform-admin-ui/blob/master/src/bundle/Resources/public/js/alloyeditor/src/buttons/ez-btn-image.js#L60 and https://github.com/ezsystems/ezplatform-admin-ui/blob/master/src/bundle/Resources/public/js/alloyeditor/src/buttons/ez-btn-embed.js#L58
Please remove the disable state and the method isDisabled

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All requested changes are done. Also a deprecation warning for EzBtnImage.isDisabled and EzBtnEmbed.isDisabled was added: 8b3687b

},
};

Expand Down
2 changes: 2 additions & 0 deletions src/bundle/Resources/public/js/alloyeditor/src/toolbars/config/ez-table-cell.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ export default class EzTableCellConfig extends EzConfigTableBase {
editAttributesButton,
'tableHeading',
'ezembedinline',
'ezembed',
'ezimage',
'ezanchor',
'eztablerow',
'eztablecolumn',
Expand Down