[ADF-2526] Fixed interpolation marker issue in doc files (#3098)

* [ADF-2526] Test commit of a file with escape tags

* [ADF-2526] Fixed interpolation marker issue in doc code samples

docs/content-services/search.component.md

@@ -39,6 +39,8 @@ Searches items for supplied search terms.
 
 You have to add a template that will be shown when the results are loaded.
 
+<!-- {% raw %} -->
+
 ```html
 <adf-search [searchTerm]="searchTerm">
     <ng-template let-result>
@@ -51,12 +53,16 @@ You have to add a template that will be shown when the results are loaded.
 </adf-search>
 ```
 
+<!-- {% endraw %} -->
+
 The results are provided via the [$implicit variable of angular2](https://angular.io/api/common/NgTemplateOutlet) and can be accessed via the sugar sintax 'let-yourChosenName'. As per example above the result will be something like : 
 
 ![adf-search-control](../docassets/images/search-component-simple-template.png)
 
 But you can define even a more complex template : 
 
+<!-- {% raw %} -->
+
 ```html
 <adf-search class="adf-search-result-autocomplete"
             [rootNodeId]="liveSearchRoot"
@@ -97,6 +103,8 @@ But you can define even a more complex template :
 </adf-search>
 ```
 
+<!-- {% endraw %} -->
+
 Which will look like :
 
 ![adf-search-control](../docassets/images/search-component-complex-template.png)
@@ -106,6 +114,8 @@ Which will look like :
 You can also attach your input field to the adf-search component via the trigger [searchAutocomplete]
 Yuo can do this by exporting the adf-search panel instance into a local template variable (here we called it "search"), and binding that variable to the input's searchAutocomplete property.
 
+<!-- {% raw %} -->
+
 ```html
 <input type="text" [searchAutocomplete]="search">
 
@@ -118,6 +128,8 @@ Yuo can do this by exporting the adf-search panel instance into a local template
 </adf-search>        
 ```
 
+<!-- {% endraw %} -->
+
 In this way it is possible to fetch the results from the word typed into the input text straight into the adf-search component via the custom template variable.
 
 ### Custom search configuration

docs/core/data-column.component.md

@@ -135,6 +135,8 @@ context.row.getValue('createdByUser.displayName')
 
 You may want using **row** api to get raw value access.
 
+<!-- {% raw %} -->
+
 ```html
 <data-column title="Name" key="name" sortable="true" class="full-width ellipsis-cell">
     <ng-template let-context="$implicit">
@@ -144,10 +146,14 @@ You may want using **row** api to get raw value access.
 </data-column>
 ```
 
+<!-- {% endraw %} -->
+
 Use **data** api to get values with post-processing, like datetime/icon conversion.\_
 
 In the Example below we will prepend `Hi!` to each file and folder name in the list: 
 
+<!-- {% raw %} -->
+
 ```html
 <data-column title="Name" key="name" sortable="true" class="full-width ellipsis-cell">
     <ng-template let-entry="$implicit">
@@ -156,9 +162,13 @@ In the Example below we will prepend `Hi!` to each file and folder name in the l
 </data-column>
 ```
 
+<!-- {% endraw %} -->
+
 In the Example below we will integrate the [adf-tag-node-list](../content-services/tag-node-list.component.md) component
 with the document list.
 
+<!-- {% raw %} -->
+
 ```html
 <data-column
     title="{{'DOCUMENT_LIST.COLUMNS.TAG' | translate}}"
@@ -171,6 +181,8 @@ with the document list.
 </data-column>
 ```
 
+<!-- {% endraw %} -->
+
 ![Tag component in document List](../docassets/images/document-list-tag-template.png)
 
 ### Styling Techniques

docs/core/file-size.pipe.md

@@ -8,12 +8,16 @@ Converts a number of bytes to the equivalent in KB, MB, etc.
 
 ## Basic Usage
 
+<!-- {% raw %} -->
+
 ```HTML
 <div>
     File Size: {{ sizeInBytes | adfFileSize:"2" }}
 </div>
 ```
 
+<!-- {% endraw %} -->
+
 ## Details
 
 The pipe chooses the largest unit that is less than the total number of bytes and

docs/core/mime-type-icon.pipe.md

@@ -8,12 +8,16 @@ Retrieves an icon to represent a MIME type.
 
 ## Basic Usage
 
+<!-- {% raw %} -->
+
 ```HTML
 <div>
     <img src='{{ "image/jpeg" | adfMimeTypeIcon }}' />
 </div>
 ```
 
+<!-- {% endraw %} -->
+
 ## Details
 
 The pipe takes a MIME type as input and returns the URL of an SVG file that

docs/core/node-favorite.directive.md

@@ -51,6 +51,8 @@ export class MyComponent {
 The `NodeFavoriteDirective` instance can be bound to a template variable through **adfFavorite** reference,
 which provides a method to help further style the element.
 
+<!-- {% raw %} -->
+
 ```html
 <button
     mat-menu-item
@@ -63,6 +65,8 @@ which provides a method to help further style the element.
 </button>
 ```
 
+<!-- {% endraw %} -->
+
 The directive performs as follows:
 
 -   if there are no favorite nodes in the selection, then all are marked as favorites

docs/core/node-name-tooltip.pipe.md

@@ -8,6 +8,8 @@ Formats the tooltip for a Node.
 
 ## Basic Usage
 
+<!-- {% raw %} -->
+
 ```html
 <data-column
     key="name"
@@ -18,6 +20,8 @@ Formats the tooltip for a Node.
 </data-column>
 ```
 
+<!-- {% endraw %} -->
+
 ## Details
 
 The tooltip is formatted according to the following rules:

docs/core/text-highlight.pipe.md

@@ -8,12 +8,16 @@ Adds highlighting to words or sections of text that match a search string.
 
 ## Basic Usage
 
+<!-- {% raw %} -->
+
 ```HTML
 <div>
     Some rude words have been detected in your summary: {{ summary | highlight:rudeWordList }}
 </div>
 ```
 
+<!-- {% endraw %} -->
+
 ## Details
 
 The pipe's parameter is a string to search for in the text. Any occurrences of the string will

docs/core/time-ago.pipe.md

@@ -8,12 +8,16 @@ Converts a recent past date into a number of days ago.
 
 ## Basic Usage
 
+<!-- {% raw %} -->
+
 ```HTML
 <div>
     Last modified: {{ date | adfTimeAgo }}
 </div>
 ```
 
+<!-- {% endraw %} -->
+
 ## Details
 
 The pipe finds the difference between the input date and the current date. If it

docs/core/translation.service.md

@@ -30,8 +30,12 @@ In the `get` and `instant` methods, the `interpolateParams` parameter supplies
 interpolation strings for keys that include them. For example, in the standard
 `en.json`, the `CORE.PAGINATION.ITEMS_RANGE` key is defined as:
 
+<!-- {% raw %} -->
+
     "Showing {{ range }} of {{ total }}"
 
+<!-- {% endraw %} -->
+
 The `range` and `total` interpolations are supplied to the `get` method using
 an object with fields of the same name:
 

docs/core/user-initial.pipe.md

@@ -8,12 +8,16 @@ Takes the name fields of a UserProcessModel object and extracts and formats the
 
 ## Basic Usage
 
+<!-- {% raw %} -->
+
 ```HTML
 <div>
     Project Leader: {{ user | usernameInitials:"initialsClass" }}
 </div>
 ```
 
+<!-- {% endraw %} -->
+
 ## Details
 
 The pipe gets the initial characters of the user's first and last names and

docs/process-services/people-list.component.md

@@ -43,6 +43,8 @@ export class SomeComponent implements OnInit {
 
 In the component template use the people list component:
 
+<!-- {% raw %} -->
+
 ```html
 <adf-people-list
   [users]="people"
@@ -64,6 +66,8 @@ In the component template use the people list component:
 </adf-people-list>
 ```
 
+<!-- {% endraw %} -->
+
 Note that the people list component is based on the
 [Datatable component](../core/datatable.component.md).
 

docs/process-services/people-search.component.md

@@ -28,6 +28,8 @@ Searches users/people.
 
 ## Details
 
+<!-- {% raw %} -->
+
 ```html
 <adf-people-search
        (searchPeople)="searchUser($event)"
@@ -38,3 +40,5 @@ Searches users/people.
            <action-button-label>{{ 'PEOPLE.ADD_USER' | translate }}</action-button-label>
        </adf-people-search>
 ```
+
+<!-- {% endraw %} -->

docs/process-services/process-attachment-list.component.md

@@ -59,6 +59,8 @@ export class MyCustomProcessAttachmentComponent {
 
 If we want user to be able to upload attachments for empty lists, We can wrap our component with upload drag area component. In that case, We should also pass a custom _no content template_ as shown below with our component urging the user to drag files to upload whenever the list is empty.
 
+<!-- {% raw %} -->
+
 ```html
 <adf-upload-drag-area
     [parentId]="YOUR_PROCESS_ID"
@@ -78,6 +80,8 @@ If we want user to be able to upload attachments for empty lists, We can wrap ou
 </adf-upload-drag-area>
 ```
 
+<!-- {% endraw %} -->
+
 If the List is empty, the custom no-content template we passed is displayed.
 
 ![custom-no-content-drag-drop-template-sample](../docassets/images/custom-no-content-drag-drop-template.png)

docs/process-services/process-list.component.md

@@ -73,6 +73,8 @@ You can also use both HTML-based and app.config.json custom schema declaration a
 }
 ```
 
+<!-- {% raw %} -->
+
 ```html
 <adf-process-instance-list
     [appId]="'1'" 
@@ -87,6 +89,8 @@ You can also use both HTML-based and app.config.json custom schema declaration a
 </adf-process-instance-list>
 ```
 
+<!-- {% endraw %} -->
+
 ### Pagination strategy
 
 adf-process-instance-list also supports pagination and the same can be used as shown below.

docs/process-services/task-attachment-list.component.md

@@ -46,6 +46,8 @@ to enable the user to upload attachments for empty lists. When you do this, you
 a custom _no content template_ as shown below. The component invites the user to drag files to
 upload whenever the list is empty.
 
+<!-- {% raw %} -->
+
 ```html
 <adf-upload-drag-area
     [parentId]="YOUR_TASK_ID"
@@ -63,6 +65,8 @@ upload whenever the list is empty.
 </adf-upload-drag-area>
 ```
 
+<!-- {% endraw %} -->
+
 ```ts
 import { UploadService } from '@alfresco/adf-core';
 import { TaskUploadService } from '@alfresco/adf-process-services';

docs/process-services/task-list.component.md

@@ -151,6 +151,8 @@ You can use an HTML-based schema and an `app.config.json` custom schema declarat
 }
 ```
 
+<!-- {% raw %} -->
+
 ```html
 <adf-tasklist
     [appId]="'1'" 
@@ -165,6 +167,8 @@ You can use an HTML-based schema and an `app.config.json` custom schema declarat
 </adf-tasklist>
 ```
 
+<!-- {% endraw %} -->
+
 ### Pagination strategy
 
 The Tasklist also supports pagination as shown in the example below:

docs/user-guide/internationalization.md

@@ -101,10 +101,14 @@ export class HomeComponent implements OnInit {
 
 ...with very simple corresponding HTML:
 
+<!-- {% raw %} -->
+
 ```html
 {{translatedText}}
 ```
 
+<!-- {% endraw %} -->
+
 In the browser, this is displayed as:
 
 ![English translation text](../docassets/images/TransExEn.png)
@@ -139,8 +143,12 @@ corresponding text. For example, the following will display the
 "Start Form" text as above but without any code or variables in the
 component's `.ts` file:
 
+<!-- {% raw %} -->
+
     {{ "FORM.START_FORM.TITLE" | translate }}
 
+<!-- {% endraw %} -->
+
 ## Adding your own messages
 
 The built-in translations certainly won't cover everything you will need for
@@ -156,6 +164,8 @@ string at a specified position within a message). This is very useful for
 messages whose content can change at runtime. For example, in the built-in
 `en.json` there is the `CORE.PAGINATION.ITEMS_RANGE` key:
 
+<!-- {% raw %} -->
+
 ```json
   ...
 "CORE": {
@@ -168,6 +178,8 @@ messages whose content can change at runtime. For example, in the built-in
     ...
 ```
 
+<!-- {% endraw %} -->
+
 The sections in curly braces are _interpolation variables_ that you supply
 at runtime. You can specify them by passing an extra parameter to
 `TranslationService.get`; this is an object whose properties have the same
@@ -187,8 +199,12 @@ this.trans.get(
 
 You can use interpolations with the `translate` pipe in a similar way:
 
+<!-- {% raw %} -->
+
     {{ "CORE.PAGINATION.ITEMS_RANGE" | translate: { range: "1..10", total: "122"} }}
 
+<!-- {% endraw %} -->
+
 ## Selecting the display language
 
 ADF provides a [Language Menu component](../core/language-menu.component.md) that

docs/user-guide/metadata-indicators.md

@@ -72,6 +72,8 @@ So once rendered our component will automatically have access to entire set of n
 
 For demonstration purposes we are going to display several icons if underlying node has version `2.0`, and just a plain text version value for all other versions.
 
+<!-- {% raw %} -->
+
 ```html
 <div *ngIf="metadata">
     <ng-container *ngIf="metadata['cm:versionLabel'] === '2.0'">
@@ -85,6 +87,8 @@ For demonstration purposes we are going to display several icons if underlying n
 </div>
 ```
 
+<!-- {% endraw %} -->
+
 Note: For a list of the icons that can be used with `<mat-icon>` component please refer to this resource: [material.io/icons](https://material.io/icons/)
 
 ## Testing component
@@ -106,6 +110,8 @@ You can see on the screenshot above that only files with version `2.0` got extra
 
 The full source code of the component can be found below:
 
+<!-- {% raw %} -->
+
 ```ts
 import { Component, Input } from '@angular/core';
 
@@ -132,4 +138,6 @@ export class MetadataIconsComponent {
 }
 ```
 
+<!-- {% endraw %} -->
+
 You can use this idea to build more complex indication experience based on the actual metadata state. 

docs/user-guide/stencils.md

@@ -40,6 +40,8 @@ This value will be used as field type when form gets rendered.
 
 This should be a valid Angular component template that you want to render in `<activiti-form>` component:
 
+<!-- {% raw %} -->
+
 ```html
 <div>
     <div>Angular Component</div>
@@ -47,6 +49,8 @@ This should be a valid Angular component template that you want to render in `<a
 </div>
 ```
 
+<!-- {% endraw %} -->
+
 ## Form editor template
 
 This can be any html layout to be rendered as a component placeholder in Activiti Form Designer.