merge: code

Author: peterpeterparker

docs/docs/components/app-components-highlight-code/app-components-highlight-code.md

@@ -18,6 +18,7 @@ To highlight your code, this component is using [Prism.js](https://prismjs.com)
     - [Find the next anchor](#app-components-highlight-code-find-the-next-anchor)
     - [Zoom into code](#app-components-highlight-code-zoom-into-code)
     - [Load or reload the component](#app-components-highlight-code-load-or-reload-the-component)
+  - [Events](#app-components-highlight-code-events)
   - [Examples](#app-components-highlight-code-examples)
 
 ## Showcase
@@ -70,7 +71,8 @@ The `<deckgo-highlight-code/>` expose the following properties:
 | `anchorZoom` | `anchor-zoom` | The anchor identifier which will be use to find the next anchor to zoom inside your code using `findNextAnchor()`            | `string`  | `'// DeckDeckGoZoom'` |
 | `hideAnchor` | `hide-anchor` | Set this attribute to `false` in case you would like to actually display the anchor value too            | `boolean` | `true`                |
 | `language`   | `language`    |  Define the language to be used for the syntax highlighting. The list of [supported languages](https://prismjs.com/#languages-list) is defined by [Prism.js](https://prismjs.com/#languages-list)            | `string`  | `'javascript'`        |
-| `highlightLines` | `highlight-lines` | If you wish to highlight some lines of your code. The lines number should be provided as number separated with coma and group separated with space. For example: "3,5 8,9 13,13 14,17" | `string`  |            |  
+| `highlightLines` | `highlight-lines` | If you wish to highlight some lines of your code. The lines number should be provided as number separated with coma and group separated with space. For example: "3,5 8,9 13,13 14,17" | `string`  |            |
+| `editable` | `editable` | In case you would like to set the code component as being editable. | `boolean` | `false`                | 
 
 ### Styling
 
@@ -100,6 +102,8 @@ The `<deckgo-highlight-code/>` could be styled using the following CSS4 variable
 | --deckgo-highlight-code-token-atrule |  | Highlighted code tokens atrule, attr-value, keyword |
 | --deckgo-highlight-code-token-function |  | Highlighted code function, class-name |
 | --deckgo-highlight-code-token-regex |  | Highlighted code tokens regex, important, variable |
+| --deckgo-highlight-code-empty-text | "Click to add your code" | Place holder in case the `editable` is set to `true` |
+| --deckgo-highlight-code-scroll | scroll | In case you would like to change the scroll property of the shadowed code block | 
 
 ### Methods
 
@@ -123,6 +127,18 @@ zoomCode(zoom: boolean) => Promise<void>
 load() => Promise<void>
 ```
 
+### Events
+
+The `<deckgo-highlight-code/>` will bubble the following events:
+
+#### Code did change
+
+Emitted when the code was edited (see attribute `editable`). Propagate the root component itself.
+
+```
+codeDidChange(HTMLElement);
+```
+
 ### Examples
 
 You could find the examples in the [src/index.html](https://github.com/deckgo/deckdeckgo-qrcode/blob/master/src/index.html) of the project.

docs/docs/components/app-components-inline-editor/app-components-inline-editor.md

@@ -65,7 +65,7 @@ The `<deckgo-inline-editor/>` expose the following properties:
 | `stickyDesktop`       | `sticky-desktop`        | Use a sticky footer toolbar on desktop            | `boolean` | `false`     |
 | `stickyMobile`        | `sticky-mobile`         | Use a sticky footer toolbar on mobile. Note: except iOS, feel free to send a PR if you know how to handle this with the software keyboard            | `boolean` | `false`     |
 | `attachTo`            | `attach-to`             | Could be use to attach the inline editor event listeners (mousedown, touchstart and keydown) to a specific element instead of the document | `HTMLElement` |     |
-| `containerAttribute`            | `container-attribute`             | The container where the inline editor should be use need to be identified with an attribute in order to allow the component to detect some information like the current style or color | `string` |   `slot`  |
+| `containers`            | `containers`             | A comma separated list of containers where the inline editor should/could be use. Used in order to allow the component to detect some information like the current style or color | `string` |   `h1,h2,h3,h4,h5,h6,div`  |
 
 ### Styling
 

docs/src/app/pages/docs/components/app-components-highlight-code/app-components-highlight-code.tsx

@@ -49,6 +49,7 @@ export class AppComponentsHighlightCode {
 <li><a href="#app-components-highlight-code-load-or-reload-the-component">Load or reload the component</a></li>
 </ul>
 </li>
+<li><a href="#app-components-highlight-code-events">Events</a></li>
 <li><a href="#app-components-highlight-code-examples">Examples</a></li>
 </ul>
 </li>
@@ -126,6 +127,13 @@ export class AppComponentsHighlightCode {
 <td><code>string</code></td>
 <td></td>
 </tr>
+<tr>
+<td><code>editable</code></td>
+<td><code>editable</code></td>
+<td>In case you would like to set the code component as being editable.</td>
+<td><code>boolean</code></td>
+<td><code>false</code></td>
+</tr>
 </tbody></table>
 <h3 id="app-components-highlight-code-styling">Styling</h3>
 <p>The <code>&lt;deckgo-highlight-code/&gt;</code> could be styled using the following CSS4 variables:</p>
@@ -247,6 +255,16 @@ export class AppComponentsHighlightCode {
 <td></td>
 <td>Highlighted code tokens regex, important, variable</td>
 </tr>
+<tr>
+<td>--deckgo-highlight-code-empty-text</td>
+<td>&quot;Click to add your code&quot;</td>
+<td>Place holder in case the <code>editable</code> is set to <code>true</code></td>
+</tr>
+<tr>
+<td>--deckgo-highlight-code-scroll</td>
+<td>scroll</td>
+<td>In case you would like to change the scroll property of the shadowed code block</td>
+</tr>
 </tbody></table>
 <h3 id="app-components-highlight-code-methods">Methods</h3>
 <p>The <code>&lt;deckgo-highlight-code/&gt;</code> expose the following methods:</p>
@@ -259,6 +277,12 @@ export class AppComponentsHighlightCode {
     </deckgo-highlight-code><h4 id="app-components-highlight-code-load-or-reload-the-component">Load or reload the component</h4>
 <deckgo-highlight-code language="javascript">
       <code slot="code">load() =&gt; Promise&lt;void&gt;</code>
+    </deckgo-highlight-code><h3 id="app-components-highlight-code-events">Events</h3>
+<p>The <code>&lt;deckgo-highlight-code/&gt;</code> will bubble the following events:</p>
+<h4 id="app-components-highlight-code-code-did-change">Code did change</h4>
+<p>Emitted when the code was edited (see attribute <code>editable</code>). Propagate the root component itself.</p>
+<deckgo-highlight-code language="javascript">
+      <code slot="code">codeDidChange(HTMLElement);</code>
     </deckgo-highlight-code><h3 id="app-components-highlight-code-examples">Examples</h3>
 <p>You could find the examples in the <a href="https://github.com/deckgo/deckdeckgo-qrcode/blob/master/src/index.html">src/index.html</a> of the project.</p>
 <deckgo-highlight-code language="javascript">

docs/src/app/pages/docs/components/app-components-inline-editor/app-components-inline-editor.tsx

@@ -112,11 +112,11 @@ export class AppComponentsInlineEditor {
 <td></td>
 </tr>
 <tr>
-<td><code>containerAttribute</code></td>
-<td><code>container-attribute</code></td>
-<td>The container where the inline editor should be use need to be identified with an attribute in order to allow the component to detect some information like the current style or color</td>
+<td><code>containers</code></td>
+<td><code>containers</code></td>
+<td>A comma separated list of containers where the inline editor should/could be use. Used in order to allow the component to detect some information like the current style or color</td>
 <td><code>string</code></td>
-<td><code>slot</code></td>
+<td><code>h1,h2,h3,h4,h5,h6,div</code></td>
 </tr>
 </tbody></table>
 <h3 id="app-components-inline-editor-styling">Styling</h3>