merge: studio support for ordered and unordered lists

Author: peterpeterparker

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

@@ -17,11 +17,11 @@ The "WYSIWYG inline editor" component is an extra component which will be use in
 ## Showcase
 
 <div>
-  <h1 style={{color: '#3880ff'}} contenteditable>DeckDeckGo (editable title)</h1>
+  <h1 style={{color: '#3880ff'}} contenteditable slot="title">DeckDeckGo (editable title)</h1>
 
-  <h2 style={{color: '#3880ff'}} contenteditable>The Progressive Web App alternative for simple presentations 🚀 (editable subtitle)</h2>
+  <h2 style={{color: '#3880ff'}} contenteditable slot="title">The Progressive Web App alternative for simple presentations 🚀 (editable subtitle)</h2>
 
-  <p style={{color: '#3880ff'}} contenteditable>Edit anywhere, display everywhere (editable paragraph)</p>
+  <p style={{color: '#3880ff'}} contenteditable slot="content">Edit anywhere, display everywhere (editable paragraph)</p>
 </div>
 
 <deckgo-inline-editor sticky-desktop="true" sticky-mobile="true"></deckgo-inline-editor>
@@ -65,6 +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`  |
 
 ### Styling
 
@@ -87,7 +88,8 @@ The `<deckgo-inline-editor/>` could be styled using the following CSS4 variables
 | --deckgo-inline-editor-button-color-active | black | The color of the buttons when active |
 | --deckgo-inline-editor-button-color-disabled | #f4f5f8 | The color of the buttons when disabled  |
 | --deckgo-inline-editor-link-color | #3880ff | The color of the input field for the url |
-| --deckgo-inline-editor-link-placeholder-color | #3880ff | Ther color of the placeholder of the input field for the url |
+| --deckgo-inline-editor-link-placeholder-color | #3880ff | The color of the placeholder of the input field for the url |
+| --deckgo-inline-editor-width | 300px | The width of the toolbar |
 
 Furthermore, the following variables are also available but only have an effects on mobile devices:
 
@@ -106,22 +108,12 @@ Furthermore, the following variables are also available but only have an effects
 
 ** like above but for mobile
 
-### Slot
-
-The icon for the link action should be provided using a dedicated slot name `link`
-
-```
-<deckgo-inline-editor>
-  <span slot="link">L</span>
-</deckgo-inline-editor>
-```
-
 ### Examples
 
 ```
-<p contenteditable>This text will be editable</p>
+<p contenteditable slot="content">This text will be editable</p>
 
-<h1 contenteditable>This title too</h1>
+<h1 contenteditable slot="title">This title too</h1>
 
 <deckgo-inline-editor></deckgo-inline-editor>
 ```

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

@@ -48,11 +48,11 @@ export class AppComponentsInlineEditor {
 </ul>
 <h2 id="app-components-inline-editor-showcase">Showcase</h2>
 <div>
-  <h1 style={{color: '#3880ff'}} contenteditable>DeckDeckGo (editable title)</h1>
+  <h1 style={{color: '#3880ff'}} contenteditable slot="title">DeckDeckGo (editable title)</h1>
 
-  <h2 style={{color: '#3880ff'}} contenteditable>The Progressive Web App alternative for simple presentations 🚀 (editable subtitle)</h2>
+  <h2 style={{color: '#3880ff'}} contenteditable slot="title">The Progressive Web App alternative for simple presentations 🚀 (editable subtitle)</h2>
 
-  <p style={{color: '#3880ff'}} contenteditable>Edit anywhere, display everywhere (editable paragraph)</p>
+  <p style={{color: '#3880ff'}} contenteditable slot="content">Edit anywhere, display everywhere (editable paragraph)</p>
 </div>
 
 <p><deckgo-inline-editor sticky-desktop="true" sticky-mobile="true"></deckgo-inline-editor></p>
@@ -111,6 +111,13 @@ export class AppComponentsInlineEditor {
 <td><code>HTMLElement</code></td>
 <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>string</code></td>
+<td><code>slot</code></td>
+</tr>
 </tbody></table>
 <h3 id="app-components-inline-editor-styling">Styling</h3>
 <p>The <code>&lt;deckgo-inline-editor/&gt;</code> could be styled using the following CSS4 variables which would only applies on the type <code>&lt;svg/&gt;</code>:</p>
@@ -200,7 +207,12 @@ export class AppComponentsInlineEditor {
 <tr>
 <td>--deckgo-inline-editor-link-placeholder-color</td>
 <td>#3880ff</td>
-<td>Ther color of the placeholder of the input field for the url</td>
+<td>The color of the placeholder of the input field for the url</td>
+</tr>
+<tr>
+<td>--deckgo-inline-editor-width</td>
+<td>300px</td>
+<td>The width of the toolbar</td>
 </tr>
 </tbody></table>
 <p>Furthermore, the following variables are also available but only have an effects on mobile devices:</p>
@@ -264,13 +276,9 @@ export class AppComponentsInlineEditor {
 </tr>
 </tbody></table>
 <p>** like above but for mobile</p>
-<h3 id="app-components-inline-editor-slot">Slot</h3>
-<p>The icon for the link action should be provided using a dedicated slot name <code>link</code></p>
-<deckgo-highlight-code language="javascript">
-      <code slot="code">&lt;deckgo-inline-editor&gt;{'\n'}  &lt;span slot=&quot;link&quot;&gt;L&lt;&#47;span&gt;{'\n'}&lt;&#47;deckgo-inline-editor&gt;</code>
-    </deckgo-highlight-code><h3 id="app-components-inline-editor-examples">Examples</h3>
+<h3 id="app-components-inline-editor-examples">Examples</h3>
 <deckgo-highlight-code language="javascript">
-      <code slot="code">&lt;p contenteditable&gt;This text will be editable&lt;&#47;p&gt;{'\n'}{'\n'}&lt;h1 contenteditable&gt;This title too&lt;&#47;h1&gt;{'\n'}{'\n'}&lt;deckgo-inline-editor&gt;&lt;&#47;deckgo-inline-editor&gt;</code>
+      <code slot="code">&lt;p contenteditable slot=&quot;content&quot;&gt;This text will be editable&lt;&#47;p&gt;{'\n'}{'\n'}&lt;h1 contenteditable slot=&quot;title&quot;&gt;This title too&lt;&#47;h1&gt;{'\n'}{'\n'}&lt;deckgo-inline-editor&gt;&lt;&#47;deckgo-inline-editor&gt;</code>
     </deckgo-highlight-code></main>
 
         <app-footer></app-footer>

studio/src/app/components/core/app-footer/app-footer.scss

@@ -15,8 +15,6 @@ app-footer {
   }
 }
 
-
-
 ion-split-pane {
 
   &:not(.split-pane-visible) {
@@ -33,3 +31,20 @@ ion-split-pane {
     }
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  ion-split-pane {
+    app-footer {
+      div {
+        ion-anchor {
+          color: white;
+
+          &:hover, &.active {
+            color: var(--ion-color-secondary);
+            border-bottom-color: var(--ion-color-secondary);
+          }
+        }
+      }
+    }
+  }
+}

studio/src/app/components/core/app-logo/app-logo.scss

@@ -1,18 +1,18 @@
 div {
   color: transparent;
 
-  vertical-align: var(--deckgo-logo-vertical-align);
   margin-right: var(--deckgo-logo-margin-end);
 
-  background-color: transparent;
-  background-image: var(--deckgo-logo-url, url('/assets/img/deckdeckgo-logo-round.svg'));
-  background-repeat: no-repeat;
-
-  width: var(--deckgo-logo-size, 2rem);
-  height: var(--deckgo-logo-size, 2rem);
-
   border-radius: 50%;
   border: 1px solid white;
 
-  display: inline-block;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background: var(--ion-color-primary);
+
+  ion-icon {
+    font-size: var(--deckgo-logo-size, 2rem);
+  }
 }

studio/src/app/components/core/app-logo/app-logo.tsx

@@ -8,6 +8,8 @@ import {Component} from '@stencil/core';
 export class AppLogo {
 
   render() {
-    return <div></div>;
+    return <div>
+      <ion-icon src="/assets/img/deckdeckgo-logo-round.svg"></ion-icon>
+    </div>;
   }
 }

studio/src/app/components/core/app-navigation/app-navigation.scss

@@ -25,3 +25,13 @@ app-navigation {
   }
 
 }
+
+@media (prefers-color-scheme: dark) {
+  app-navigation {
+    ion-anchor {
+      &:hover, &:active {
+        border-bottom: 1px solid transparent;
+      }
+    }
+  }
+}

studio/src/app/components/editor/app-editor-toolbar/app-editor-toolbar.tsx

@@ -162,6 +162,8 @@ export class AppEditorToolbar {
                     this.selectedElement.classList.add('deckgo-untouched');
                 }
 
+                this.selectedElement.removeEventListener('paste', this.cleanOnPaste, true);
+
                 await this.hideToolbar();
             }
 
@@ -196,6 +198,76 @@ export class AppEditorToolbar {
         return element && element.nodeName && (element.nodeName.toLowerCase().indexOf('deckgo-deck') > -1 || element.nodeName.toLowerCase().indexOf('deckgo-slide') > -1)
     }
 
+    private cleanOnPaste = async ($event) => {
+        return new Promise<void>(async (resolve) => {
+            if (!$event || !document) {
+                resolve();
+                return;
+            }
+
+            const parseText: string = $event.clipboardData.getData('text/plain');
+
+            if (!parseText || parseText.length <= 0) {
+                resolve();
+                return;
+            }
+
+            // In the future, Safari isn't yet ready / without preventDefault
+            // // @ts-ignore
+            // navigator.permissions.query({name: 'clipboard-write'}).then(async result => {
+            //     if (result.state === 'granted' || result.state === 'prompt') {
+            //         // @ts-ignore
+            //         await navigator.clipboard.writeText(parseText);
+            //     }
+            // });
+
+            $event.preventDefault();
+
+            const parseTexts: string[] = parseText.replace(/(?:\r\n|\r|\n)/g, '<br/>').split('<br/>');
+
+            if (!parseTexts || parseTexts.length <= 0) {
+                resolve();
+                return;
+            }
+
+            const selected: Selection = await this.getSelection();
+            if (selected && selected.rangeCount) {
+                const range = selected.getRangeAt(0);
+                range.deleteContents();
+
+                parseTexts.forEach((text: string, index: number) => {
+                    const newTextNode: Text = document.createTextNode(text);
+                    range.insertNode(newTextNode);
+
+                    if (index < parseTexts.length - 1) {
+                        const br: HTMLBRElement = document.createElement('br');
+                        range.insertNode(br);
+                    }
+                });
+
+                selected.empty();
+            }
+
+            resolve();
+        });
+    };
+
+    private getSelection(): Promise<Selection> {
+        return new Promise<Selection>((resolve) => {
+            let selectedSelection: Selection = null;
+
+            if (window && window.getSelection) {
+                selectedSelection = window.getSelection();
+            } else if (document && document.getSelection) {
+                selectedSelection = document.getSelection();
+            } else if (document && (document as any).selection) {
+                selectedSelection = (document as any).selection.createRange().text;
+            }
+
+            resolve(selectedSelection);
+        });
+    }
+
     private displayToolbar(element: HTMLElement): Promise<void> {
         return new Promise<void>(async (resolve) => {
             if (!element) {
@@ -497,13 +569,17 @@ export class AppEditorToolbar {
             this.selectedElement = element;
             this.deckOrSlide = this.isElementSlideOrDeck(element);
 
+            if (element) {
+                element.addEventListener('paste', this.cleanOnPaste, false);
+            }
+
             resolve();
         });
     }
 
     private async openForDeckOrSlide($event: UIEvent, myFunction: Function) {
         if (!this.deckOrSlide) {
-            myFunction();
+            await myFunction();
             return;
         }
 
@@ -516,7 +592,7 @@ export class AppEditorToolbar {
         popover.onDidDismiss().then(async (detail: OverlayEventDetail) => {
             if (detail.data) {
                 this.applyToAllDeck = detail.data.deck;
-                myFunction();
+                await myFunction();
             }
         });
 

studio/src/app/components/feed/app-popular/app-popular.scss

@@ -3,3 +3,11 @@ app-popular {
     --background: white;
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  app-popular {
+    h1 {
+      color: black;
+    }
+  }
+}

studio/src/app/components/feed/app-popular/app-popular.tsx

@@ -18,9 +18,9 @@ export class AppPopular {
 
                     <p padding-top>What does that mean 🤔?</p>
 
-                    <p padding-top>It means that every presentations you write, present and publish with DeckDeckGo are themselves also <strong>apps</strong> for desktop and mobile 🤪</p>
+                    <p padding-top>It means that every presentations you write and publish with DeckDeckGo are also <strong>apps</strong> for desktop and mobile 🤪</p>
 
-                    <p padding-top>DeckDeckGo aims to be an online community for sharing presentations, slides and talks about your interests and ideas too.</p>
+                    <p padding-top>Furthermore, DeckDeckGo aims to be an online community for sharing presentations, slides and talks about your interests and ideas too.</p>
 
                     <p padding-top><strong>Edit anywhere, display everywhere</strong></p>
                 </ion-card-content>

studio/src/app/helpers/editor/editor.helper.tsx

@@ -155,8 +155,10 @@ export class EditorHelper {
 
                     this.deck = await this.deckService.put(this.deck);
                 } else {
+                    // TODO: Deck name to be solve with the UX
                     this.deck = {
-                        deck_slides: [slide.slide_id]
+                        deck_slides: [slide.slide_id],
+                        deck_name: 'Presentation A'
                     };
 
                     this.deck = await this.deckService.post(this.deck);