DOC - Improve editable documentation and make twig syntax more consistent

doc/03_Documents/01_Editables/02_Areablock/02_Bricks.md

@@ -172,10 +172,10 @@ brick metadata.
 ```twig
 /* templates/areas/iframe/view.html.twig */
 
-{% set urlField = pimcore_input('iframe_url') %}
-{% set widthField = pimcore_numeric('iframe_width') %}
-{% set heightField = pimcore_numeric('iframe_height') %}
-{% set transparentField = pimcore_checkbox('iframe_transparent') %}
+{% set urlField = pimcore_input("iframe_url") %}
+{% set widthField = pimcore_numeric("iframe_width") %}
+{% set heightField = pimcore_numeric("iframe_height") %}
+{% set transparentField = pimcore_checkbox("iframe_transparent") %}
 
 {% if editmode %}
     <div>
@@ -198,9 +198,9 @@ brick metadata.
 {% else %}
     {% if not urlField.isEmpty() %}
 
-        {% set transparent = 'false' %}
-        {% set width = '100%' %}
-        {% set height = '400' %}
+        {% set transparent = "false" %}
+        {% set width = "100%" %}
+        {% set height = "400" %}
 
         {% if not widthField.isEmpty() %}
             {% set width = widthField.data %}    
@@ -211,7 +211,7 @@ brick metadata.
         {% endif %}
 
         {% if transparentField.isChecked() %}
-            {% set transparent = 'true' %}    
+            {% set transparent = "true" %}    
         {% endif %}
 
         <iframe src="{{ urlField }}" width="{{ width }}" height="{{ height }}" allowtransparency="{{ transparent }}" frameborder="0"></iframe>

doc/03_Documents/01_Editables/04_Area.md

@@ -22,19 +22,19 @@ into a block element, and the editor cannot choose which area is used, this has
 
 ```twig
 <div>
-{{ pimcore_area('myArea', { 'type' : 'gallery-single-images' }) }}
+{{ pimcore_area("myArea", {"type": "gallery-single-images"}) }}
 </div>
 ```
 
 ## Example with Parameters
 
 ```twig
 <div>
-    {{ pimcore_area('myArea', {
-        type: 'gallery-single-images',
+    {{ pimcore_area("myArea", {
+        type: "gallery-single-images",
         params: {
-            'gallery-single-images': {
-                'param1': 123,
+            "gallery-single-images": {
+                "param1": 123,
             }
         }
     }) }}

doc/03_Documents/01_Editables/06_Block.md

@@ -37,9 +37,9 @@ The items in the loop as well as their order can be defined by the editor with t
 ## Basic Usage
 
 ```twig
-{% for i in pimcore_block('contentblock').iterator %}
-    <h2>{{ pimcore_input('subline') }}</h2>
-    {{ pimcore_wysiwyg('content') }}
+{% for i in pimcore_block("contentblock").iterator %}
+    <h2>{{ pimcore_input("subline") }}</h2>
+    {{ pimcore_wysiwyg("content") }}
 {% endfor %}
 ```
 
@@ -54,13 +54,14 @@ And in the frontend of the application:
 ### Example for `getCurrent()`
 
 ```twig
-{% set myBlock = pimcore_block('contentblock', {'reload': true}) %}
+{% set myBlock = pimcore_block("contentblock", {"reload": true}) %}
 {% for i in myBlock.iterator %}
     {% if myBlock.current > 0 %}
         Insert this line only after the first iteration<br />
         <br />
     {% endif %}
-    <h2>{{ pimcore_input('subline') }}</h2>
+
+    <h2>{{ pimcore_input("subline") }}</h2>
 {% endfor %}
 ```
 
@@ -72,7 +73,7 @@ And in the frontend of the application:
 The manual mode offers you the possibility to deal with block the way you like, this is for example useful with tables: 
 
 ```twig
-{% set block = pimcore_block('gridblock', {'manual' : true, 'limit' : 6}).start() %}
+{% set block = pimcore_block("gridblock", {"manual": true, "limit": 6}).start() %}
 <table>
     <tr>
         {% for b in block.iterator %}
@@ -125,7 +126,7 @@ If you want to wrap buttons in a div or change the Position.
 <div>
     {% for b in block.iterator %}
         {% do block.blockConstruct() %}
-            {% do block.blockStart(true, false, 'my-additional-class') %}
+            {% do block.blockStart(true, false, "my-additional-class") %}
                 Add additional class 'my-addional-class' to editmode-div
             {% do block.blockEnd() %}
         {% do block.blockDestruct() %}
@@ -140,7 +141,6 @@ If you want to wrap buttons in a div or change the Position.
 Bricks and structure refer to the CMS demo (content/default template).
 
 ```twig
-
 {# load document #}
 {% set document = pimcore_document_by_path('/en/More-Stuff/Developers-Corner/Galleries') %}
 

doc/03_Documents/01_Editables/08_Checkbox.md

@@ -18,18 +18,18 @@
 ## Simple Example
 
 ```twig
-{{ pimcore_checkbox('myCheckbox') }}
+{{ pimcore_checkbox("myCheckbox") }}
 ```
 
 
 ## Advanced Example
 
 ```twig
-Setting XYZ: {{ pimcore_checkbox('myCheckbox') }}
+Setting XYZ: {{ pimcore_checkbox("myCheckbox") }}
 
-{% if pimcore_checkbox('myCheckbox').isChecked() %}
+{% if pimcore_checkbox("myCheckbox").isChecked() %}
     <div>
-        {{ dump('do something') }}
+        {{ dump("do something") }}
     </div>
 {% endif %}
 ```

doc/03_Documents/01_Editables/10_Date.md

@@ -25,8 +25,8 @@ Localization (output-format, ...) is automatically used from the globally regist
 Please read the topic [Localization](../../06_Multi_Language_i18n/README.md).
 
 ```twig
-{{ pimcore_date('myDate', {
-    'format': 'd.m.Y',
-    'outputIsoFormat': 'DD.MM.YYYY'
+{{ pimcore_date("myDate", {
+    "format": "d.m.Y",
+    "outputIsoFormat": "DD.MM.YYYY"
 }) }}
 ```

doc/03_Documents/01_Editables/12_Relation_Many-To-One.md

@@ -47,7 +47,7 @@ options in the editable configuration.
 ##### Example
 
 ```twig
-{{ pimcore_relation("myRelation",{
+{{ pimcore_relation("myRelation", {
     "types": ["asset","object"],
     "subtypes": {
         "asset": ["video", "image"],

doc/03_Documents/01_Editables/14_Image.md

@@ -122,7 +122,7 @@ And this is how the rendered html looks: `<img custom-attr="value" data-role="im
 
 {# Custom image tag (thumbnail objects) #}
 {% if editmode %}
-    {{ pimcore_image("myImage",{"thumbnail": "myThumbnail"}) }}
+    {{ pimcore_image("myImage", {"thumbnail": "myThumbnail"}) }}
 {% else %}
     {% set thumbnail = pimcore_image("myImage").getThumbnail("myThumbnail") %}
     <img src="{{ thumbnail }}" width="{{ thumbnail.width }}" height="{{ thumbnail.height }}" />
@@ -133,7 +133,7 @@ And this is how the rendered html looks: `<img custom-attr="value" data-role="im
 
 {# Custom drop targets #}
 <div class="myCustomImageDropTarget anotherClass">My first alternative drop target</div>
-{{ pimcore_image("image",{
+{{ pimcore_image("image", {
     "thumbnail": "contentfullimage",
     "dropClass": "myCustomImageDropTarget"
 }) }}
@@ -171,7 +171,7 @@ All dimensions are in percent and therefore independent from the image size, you
 ```twig
 <div>
     <p>
-        {{ pimcore_image("myImage",{
+        {{ pimcore_image("myImage", {
             "title": "Drag your image here",
             "width": 400,
             "height": 400,

doc/03_Documents/01_Editables/16_Input.md

@@ -7,14 +7,15 @@ For a multi-line alternative have a look at the [textarea editable](./36_Textare
 
 ## Configuration
 
-| Name               | Type    | Configuration                                                                         |
-|--------------------|---------|---------------------------------------------------------------------------------------|
-| `width`            | integer | Width of the input in editmode (in pixels)                                            |
-| `htmlspecialchars` | boolean | Set to false to get the raw value without HTML special chars like & (default to true) |
-| `nowrap`           | boolean | set to false to disable the automatic line break                                      |
-| `class`            | string  | A CSS class that is added to the surrounding container of this element in editmode    |
-| `placeholder`      | string  | A placeholder that is displayed when the field is empty                               |
-| `required`         | boolean | set to true to make field value required for publish                                  |
+| Name               | Type    | Configuration                                                                                  |
+|--------------------|---------|------------------------------------------------------------------------------------------------|
+| `width`            | integer | Width of the input in editmode (in pixels)                                                     |
+| `htmlspecialchars` | boolean | Set to false to get the raw value without HTML special chars like & (default to true)          |
+| `nowrap`           | boolean | set to false to disable the automatic line break                                               |
+| `class`            | string  | A CSS class that is added to the surrounding container of this element in editmode             |
+| `placeholder`      | string  | A text shown in the field when it is empty to guide the user about the expected type of input. |
+| `defaultValue`     | string  | A default value for the available options.                                                     |
+| `required`         | boolean | set to true to make field value required for publish                                           |
 
 ## Methods
 
@@ -42,6 +43,6 @@ You could also specify other parameters, like the size:
 
 ```twig
 <h2>
-    {{ pimcore_input("headerLine", {'width': 540}) }}
+    {{ pimcore_input("headerLine", {"width": 540}) }}
 </h2>
 ```

doc/03_Documents/01_Editables/18_Link.md

@@ -43,7 +43,7 @@ such as: `class`, `target`, `id`, `style`, `accesskey`, `name`, `title`, `data-*
 ```twig
 <p>
     {{ "Visit our" | trans }}
-    {{ pimcore_link('blogLink') }}
+    {{ pimcore_link("blogLink") }}
 </p>
 ```
 
@@ -64,8 +64,8 @@ Let's see how to make a list of links with [Block](./06_Block.md).
 ```twig
 <h3>{{ "Useful links" | trans }}</h3>
 <ul>
-    {% for i in pimcore_block('linkblock').iterator %}
-        <li>{{ pimcore_link('myLink', {'class': "special-link-class"}) }}</li>
+    {% for i in pimcore_block("linkblock").iterator %}
+        <li>{{ pimcore_link("myLink", {"class": "special-link-class"}) }}</li>
     {% endfor %}
 </ul>
 ```

doc/03_Documents/01_Editables/22_Multiselect.md

@@ -27,18 +27,18 @@ Also, it shows the list of chosen elements in the frontend.
 
 ```twig
 {% if editmode %}
-    {{ pimcore_multiselect('categories', {
-        'width': 200,
-        'height': 100,
-        'store': [
-            ['cars', 'Cars'],
-            ['motorcycles', 'Motorcycles'],
-            ['accessories', 'Accessories'],
+    {{ pimcore_multiselect("categories", {
+        "width": 200,
+        "height": 100,
+        "store": [
+            ["cars", "Cars"],
+            ["motorcycles", "Motorcycles"],
+            ["accessories", "Accessories"],
         ]
     }) }}
 {% else %}
-    <p>{{ 'This page is linked to' | trans }}
-        {% for categoryKey in pimcore_multiselect('categories').getData %}
+    <p>{{ "This page is linked to" | trans }}
+        {% for categoryKey in pimcore_multiselect("categories").getData %}
             <span>
             {{ categoryKey | trans }}
         </span>

doc/03_Documents/01_Editables/24_Numeric.md

@@ -5,13 +5,14 @@ The numeric editable is very similar to the [input editable](./16_Input.md), but
 
 ## Configuration
 
-| Name       | Type    | Description                                                                        |
-|------------|---------|------------------------------------------------------------------------------------|
-| `maxValue` | float   | Define a maximum value                                                             |
-| `minValue` | float   | Define a minimum value                                                             |
-| `width`    | integer | Width of the field in pixel                                                        |
-| `class`    | string  | A CSS class that is added to the surrounding container of this element in editmode |
-| `required` | boolean | set to true to make field value required for publish                       |
+| Name           | Type    | Description                                                                        |
+|----------------|---------|------------------------------------------------------------------------------------|
+| `maxValue`     | float   | Define a maximum value                                                             |
+| `minValue`     | float   | Define a minimum value                                                             |
+| `width`        | integer | Width of the field in pixel                                                        |
+| `class`        | string  | A CSS class that is added to the surrounding container of this element in editmode |
+| `defaultValue` | string  | A default value for the available options **as string**                            |
+| `required`     | boolean | set to true to make field value required for publish                               |
 
 ## Methods
 
@@ -25,7 +26,7 @@ The numeric editable is very similar to the [input editable](./16_Input.md), but
 ### Basic Usage
 
 ```twig
-{{ pimcore_numeric('myNumber') }}
+{{ pimcore_numeric("myNumber") }}
 ```
 
 Now you can see the **numeric** value in the editmode view 
@@ -36,11 +37,11 @@ Now you can see the **numeric** value in the editmode view
 In the following example we're going to use a minimal and maximum value as well as a decimal precision. 
 
 ```twig
-{{ pimcore_numeric('myNumber',{
-		"width" : 300,
-		"minValue" : 0,
-		"maxValue" : 100,
-		"decimalPrecision" : 0
+{{ pimcore_numeric("myNumber", {
+		"width": 300,
+		"minValue": 0,
+		"maxValue": 100,
+		"decimalPrecision": 0
 	}) 
 }}
 ```
@@ -49,6 +50,6 @@ To display the number also in editmode, you can use the method `getData()`
 
 ```twig
 <p>
-    {{ pimcore_numeric('myNumber').getData() }}
+    {{ pimcore_numeric("myNumber").getData() }}
 </p>
 ```

doc/03_Documents/01_Editables/25_Embed.md

@@ -24,5 +24,5 @@ Additionally you can use any configuration option of [Embera](https://github.com
 {{ pimcore_embed("socialWidgets") }}
 
 {# Advanced usage #}
-{{ pimcore_embed("socialWidgets", { "width": 540 }) }}
+{{ pimcore_embed("socialWidgets", {"width": 540}) }}
 ```

doc/03_Documents/01_Editables/28_Renderlet.md

@@ -51,10 +51,10 @@ The code below shows how to use renderlet to create gallery based on it.
 ```twig
 <section id="renderlet-gallery">
     {{
-        pimcore_renderlet('myGallery', {
-            "controller" : "App\\Controller\\ContentController::myGalleryAction",
-            "title" : "Drag an asset folder here to get a gallery",
-            "height" : 400
+        pimcore_renderlet("myGallery", {
+            "controller": "App\\Controller\\ContentController::myGalleryAction",
+            "title": "Drag an asset folder here to get a gallery",
+            "height": 400
         })
     }}
 </section>
@@ -96,7 +96,7 @@ Now you have to create the template file at: `templates/content/my_gallery.html.
 		{% for asset in assets %}
 			{% if asset is instanceof('\\Pimcore\\Model\\Asset\\Image') %}
 				<div class="gallery-row">
-                    {{ asset.getThumbnail('myThumbnailName').getHTML()|raw }}
+                    {{ asset.getThumbnail("myThumbnailName").getHTML()|raw }}
 				</div>
 			{% endif %}
 		{% endfor %}
@@ -114,9 +114,9 @@ And the final view is like, below:
 
 ```twig
 {{
-	pimcore_renderlet('myRenderlet', {
+	pimcore_renderlet("myRenderlet", {
 		....
-		"editmode" : editmode
+		"editmode": editmode
 	})
 }}
 ```