EZP-31231: Fixed storing align and anchor attributes for custom styles

[barw4]

Question	Answer
JIRA issue	EZP-31231
Bug	yes
New feature	no
Target version	1.1
BC breaks	no
Tests pass	yes
Doc needed	no

Align and anchor attributes were not storing and displaying properly when working with custom style, also additional option to render id attribute has been added in form of:

<h2 id="{{ id }}" style="text-align:{{ align }}; color:red">
    {{ content }}
</h2>

where the code above is some custom style.

QA

// maintainer update:

• Custom Tags and Styles share markup and codebase, so regressions should be checked for both of them.

TODO:

• Fix a bug.
• Implement tests.
• Fix new code according to Coding Standards ($ composer fix-cs).
• Ask for Code Review.

[konradoboza]

LGTM 👍

[alongosz]

Not sure why you needed to change edit mode output, we only needed to expose that for view output custom template.
The change to edit output is a BC break.

[alongosz]

To sum up #166 (comment):
Custom Tag alignment with the current changes stopped working.
Custom Style (eztemplate of "style" type) can have text-align instead of data-ezalign.
Custom Tag still needs to have data-ezalign.

[barw4]

@alongosz resolved in 9e86ab3

[katarzynazawada]

@barw4, storing align and anchor works fine but user cannot link to saved anchor
Steps:

1. Create or edit a content with a rich text field.
2. In the rich text field, insert a new custom style element.
3. Add anchor on the custom style element.
4. In another paragraph add link to saved anchor.
5. Publish content.

Result: Clicking on the link does not lead to the place of adding the anchor.

I am not sure, is it in scope of this PR and customer request or it should be reported separately?

[barw4]

@katarzynazawada

In order for anchor to work properly one must include it in the custom style template like this:

<div><span id="{{id}}">{{content}}</span></div>.

It's the same behavior as in custom tags as there could be plenty of HTML tags in custom style template - we cannot impose where it should be placed and we just don't know it - the end-user should do it himself.

In the example above we have two tags: div and span - we are unsure where the anchor should go, that's why we expose the {{id}} parameter to the template.

The same problem occurs with the {{align}} parameter. We cannot apply it to all the HTML tags in the template for the same reason as above - the end-user should directly place it himself.

[lserwatka]

You can merge it up.

[barw4]

Merged into 2.1: 365e07b
Merged into master: 4e1c61f