protected source in attributes modified in custom html elements

[Hubert Garrido]

With angular, it is a common practice to define new HTML elements, and it is also needed to protect angular code, but CKEditor change attributes if they are in a custom tag and protected with protectedSource

This bug is related to a previous one that changed attributes in regular HTML tags: ​https://dev.ckeditor.com/ticket/4475

Steps to reproduce

1. protect angular code with the following in config:

protectedSource: [ /{{[\s\S]*?}}/g ]

2. put the following in source:

<custom-directive data="{{ item }}">test</custom-directive> <div data="{{ item }}">test</div>

Expected result

<custom-directive data="{{ item }}">test</custom-directive> <div data="{{ item }}">test</div>

Actual result

<custom-directive data="&lt;!--{cke_protected}%7B%7B%20item%20%7D%7D--&gt;">test</custom-directive> <div data="{{ item }}">test</div>

[Jakub Ś]

Problem can be reproduced from CKEditor 4.4.1 in all browsers.

NOTES:
Custom block tags are not supported at the moment. For custom inline tags, dtd should be extended like so:

CKEDITOR.dtd['custom-directive'] = { '#' : 1, 'span' : 1 }; //only text and span
CKEDITOR.dtd.$inline['custom-directive'] = 1;// Custom tag is inline
CKEDITOR.dtd.body['custom-directive'] = 1; 

[Jakub Ś]

Related issues: #11562, #14717, #10340.