feat: inline editor compatible with Safari too for the lists and link

peterpeterparker · peterpeterparker · commit 9c6504c18b90 · 2019-04-02T15:10:25.000+02:00
diff --git a/docs/docs/components/app-components-inline-editor/app-components-inline-editor.md b/docs/docs/components/app-components-inline-editor/app-components-inline-editor.md
@@ -108,16 +108,6 @@ Furthermore, the following variables are also available but only have an effects
 
 ** like above but for mobile
 
-### Slot
-
-The icon for the actions link and lists should be provided using a dedicated slots' names `link`, `orderedList` or `unorderedList`:
-
-```
-<deckgo-inline-editor>
-  <span slot="link">L</span>
-</deckgo-inline-editor>
-```
-
 ### Examples
 
 ```
diff --git a/docs/src/app/pages/docs/components/app-components-inline-editor/app-components-inline-editor.tsx b/docs/src/app/pages/docs/components/app-components-inline-editor/app-components-inline-editor.tsx
@@ -276,11 +276,7 @@ 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 actions link and lists should be provided using a dedicated slots&#39; names <code>link</code>, <code>orderedList</code> or <code>unorderedList</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 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>
diff --git a/studio/src/app/pages/editor/app-editor/app-editor.tsx b/studio/src/app/pages/editor/app-editor/app-editor.tsx
@@ -517,11 +517,7 @@ export class AppEditor {
                     </ion-buttons>
                 </ion-toolbar>
             </ion-footer>,
-            <deckgo-inline-editor>
-                <ion-icon ios="ios-link" md="ios-link" slot="link"></ion-icon>
-                <ion-icon src="assets/icons/ordered-list.svg" slot="orderedList"></ion-icon>
-                <ion-icon ios="ios-list" md="ios-list" slot="unorderedList"></ion-icon>
-            </deckgo-inline-editor>
+            <deckgo-inline-editor></deckgo-inline-editor>
         ];
     }
 }
diff --git a/studio/src/assets/icons/ordered-list.svg b/studio/src/assets/icons/ordered-list.svg
diff --git a/studio/src/global/theme/editor/editor-deck.scss b/studio/src/global/theme/editor/editor-deck.scss
@@ -37,14 +37,12 @@ deckgo-deck {
     }
   }
 
-  deckgo-slide-title {
-    ol, ul {
-      list-style-position: inside;
-    }
+  ol, ul {
+    list-style-position: inside;
+  }
 
-    ul {
-      list-style-type: disc;
-    }
+  ul {
+    list-style-type: disc;
   }
 
   a {
diff --git a/studio/src/global/theme/fullscreen.scss b/studio/src/global/theme/fullscreen.scss
@@ -45,7 +45,7 @@
 
     &.idle {
       deckgo-deck {
-        h1, h2, h3, p {
+        h1, h2, h3, div[slot] {
           border: 1px solid transparent;
         }
       }
diff --git a/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.scss b/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.scss
@@ -186,4 +186,81 @@ div.deckgo-tools {
       }
     }
   }
+
+  button {
+    > div {
+      background-repeat: no-repeat;
+      width: 22px;
+      height: 22px;
+      background-color: var(--deckgo-inline-editor-button-color, #3880ff);
+    }
+
+    &.link {
+      > div {
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    &.active {
+      > div {
+        background-color: var(--deckgo-inline-editor-button-color-active, black);
+      }
+    }
+
+    &[disabled] {
+      > div {
+        background-color: var(--deckgo-inline-editor-button-color-disabled, #f4f5f8);
+      }
+    }
+
+    &.ordered-list, &.unordered-list, &.link {
+      margin: 0;
+
+      > div {
+        margin-top: 2px;
+      }
+    }
+
+    &.ordered-list {
+      > div {
+        -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='100%25' height='100%25' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'%3E%3Cpath d='M432,240l-240.5,0c-8.8,0 -16,7.2 -16,16c0,8.8 7.2,16 16,16l240.5,0c8.8,0 16,-7.2 16,-16c0,-8.8 -7.2,-16 -16,-16Zm0,124l-240.5,0c-8.8,0 -16,7.2 -16,16c0,8.8 7.2,16 16,16l240.5,0c8.8,0 16,-7.2 16,-16c0,-8.8 -7.2,-16 -16,-16Zm-240.5,-216l240.5,0c8.8,0 16,-7.2 16,-16c0,-8.8 -7.2,-16 -16,-16l-240.5,0c-8.8,0 -16,7.2 -16,16c0,8.8 7.2,16 16,16Z' style='fill-rule:nonzero;'/%3E%3Cpath d='M80.784,159.32l14.784,0l0,-46.896c0,-1.408 0.048,-2.832 0.144,-4.272l-12.288,10.512c-0.32,0.256 -0.64,0.44 -0.96,0.552c-0.32,0.112 -0.624,0.168 -0.912,0.168c-0.48,0 -0.912,-0.104 -1.296,-0.312c-0.384,-0.208 -0.672,-0.456 -0.864,-0.744l-2.688,-3.696l20.448,-17.712l6.96,0l0,62.4l13.536,0l0,6.528l-36.864,0l0,-6.528Z' style='fill-rule:nonzero;'/%3E%3Cpath d='M95.856,221.296c2.912,0 5.632,0.432 8.16,1.296c2.528,0.864 4.712,2.12 6.552,3.768c1.84,1.648 3.288,3.656 4.344,6.024c1.056,2.368 1.584,5.056 1.584,8.064c0,2.56 -0.384,4.928 -1.152,7.104c-0.768,2.176 -1.808,4.264 -3.12,6.264c-1.312,2 -2.824,3.936 -4.536,5.808c-1.712,1.872 -3.528,3.784 -5.448,5.736l-18.096,18.528c1.28,-0.352 2.576,-0.632 3.888,-0.84c1.312,-0.208 2.576,-0.312 3.792,-0.312l23.04,0c0.928,0 1.664,0.272 2.208,0.816c0.544,0.544 0.816,1.248 0.816,2.112l0,5.184l-45.888,0l0,-2.928c0,-0.608 0.12,-1.232 0.36,-1.872c0.24,-0.64 0.632,-1.232 1.176,-1.776l22.032,-22.128c1.824,-1.856 3.488,-3.64 4.992,-5.352c1.504,-1.712 2.792,-3.432 3.864,-5.16c1.072,-1.728 1.896,-3.48 2.472,-5.256c0.576,-1.776 0.864,-3.672 0.864,-5.688c0,-2.016 -0.32,-3.784 -0.96,-5.304c-0.64,-1.52 -1.52,-2.776 -2.64,-3.768c-1.12,-0.992 -2.432,-1.736 -3.936,-2.232c-1.504,-0.496 -3.12,-0.744 -4.848,-0.744c-1.728,0 -3.328,0.256 -4.8,0.768c-1.472,0.512 -2.776,1.224 -3.912,2.136c-1.136,0.912 -2.096,1.992 -2.88,3.24c-0.784,1.248 -1.336,2.624 -1.656,4.128c-0.256,0.928 -0.64,1.6 -1.152,2.016c-0.512,0.416 -1.184,0.624 -2.016,0.624c-0.16,0 -0.328,-0.008 -0.504,-0.024c-0.176,-0.016 -0.376,-0.04 -0.6,-0.072l-4.464,-0.768c0.448,-3.136 1.312,-5.912 2.592,-8.328c1.28,-2.416 2.904,-4.44 4.872,-6.072c1.968,-1.632 4.224,-2.872 6.768,-3.72c2.544,-0.848 5.288,-1.272 8.232,-1.272Z' style='fill-rule:nonzero;'/%3E%3Cpath d='M96.768,345.296c2.912,0 5.6,0.416 8.064,1.248c2.464,0.832 4.584,2.016 6.36,3.552c1.776,1.536 3.16,3.392 4.152,5.568c0.992,2.176 1.488,4.592 1.488,7.248c0,2.176 -0.28,4.12 -0.84,5.832c-0.56,1.712 -1.36,3.216 -2.4,4.512c-1.04,1.296 -2.296,2.392 -3.768,3.288c-1.472,0.896 -3.12,1.616 -4.944,2.16c4.48,1.184 7.848,3.168 10.104,5.952c2.256,2.784 3.384,6.272 3.384,10.464c0,3.168 -0.6,6.016 -1.8,8.544c-1.2,2.528 -2.84,4.68 -4.92,6.456c-2.08,1.776 -4.504,3.136 -7.272,4.08c-2.768,0.944 -5.736,1.416 -8.904,1.416c-3.648,0 -6.768,-0.456 -9.36,-1.368c-2.592,-0.912 -4.784,-2.168 -6.576,-3.768c-1.792,-1.6 -3.264,-3.496 -4.416,-5.688c-1.152,-2.192 -2.128,-4.568 -2.928,-7.128l3.648,-1.536c0.672,-0.288 1.344,-0.432 2.016,-0.432c0.64,0 1.208,0.136 1.704,0.408c0.496,0.272 0.872,0.696 1.128,1.272c0.064,0.128 0.128,0.264 0.192,0.408c0.064,0.144 0.128,0.296 0.192,0.456c0.448,0.928 0.992,1.976 1.632,3.144c0.64,1.168 1.504,2.264 2.592,3.288c1.088,1.024 2.44,1.888 4.056,2.592c1.616,0.704 3.624,1.056 6.024,1.056c2.4,0 4.504,-0.392 6.312,-1.176c1.808,-0.784 3.312,-1.8 4.512,-3.048c1.2,-1.248 2.104,-2.64 2.712,-4.176c0.608,-1.536 0.912,-3.056 0.912,-4.56c0,-1.856 -0.248,-3.552 -0.744,-5.088c-0.496,-1.536 -1.392,-2.864 -2.688,-3.984c-1.296,-1.12 -3.088,-2 -5.376,-2.64c-2.288,-0.64 -5.224,-0.96 -8.808,-0.96l0,-6.192c2.912,-0.032 5.4,-0.352 7.464,-0.96c2.064,-0.608 3.752,-1.44 5.064,-2.496c1.312,-1.056 2.264,-2.32 2.856,-3.792c0.592,-1.472 0.888,-3.104 0.888,-4.896c0,-1.984 -0.312,-3.712 -0.936,-5.184c-0.624,-1.472 -1.48,-2.688 -2.568,-3.648c-1.088,-0.96 -2.376,-1.68 -3.864,-2.16c-1.488,-0.48 -3.096,-0.72 -4.824,-0.72c-1.728,0 -3.328,0.256 -4.8,0.768c-1.472,0.512 -2.776,1.224 -3.912,2.136c-1.136,0.912 -2.088,2 -2.856,3.264c-0.768,1.264 -1.344,2.632 -1.728,4.104c-0.256,0.928 -0.64,1.6 -1.152,2.016c-0.512,0.416 -1.168,0.624 -1.968,0.624c-0.16,0 -0.328,-0.008 -0.504,-0.024c-0.176,-0.016 -0.376,-0.04 -0.6,-0.072l-4.464,-0.768c0.448,-3.136 1.312,-5.912 2.592,-8.328c1.28,-2.416 2.904,-4.44 4.872,-6.072c1.968,-1.632 4.224,-2.872 6.768,-3.72c2.544,-0.848 5.288,-1.272 8.232,-1.272Z' style='fill-rule:nonzero;'/%3E%3C/svg%3E");
+        mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='100%25' height='100%25' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'%3E%3Cpath d='M432,240l-240.5,0c-8.8,0 -16,7.2 -16,16c0,8.8 7.2,16 16,16l240.5,0c8.8,0 16,-7.2 16,-16c0,-8.8 -7.2,-16 -16,-16Zm0,124l-240.5,0c-8.8,0 -16,7.2 -16,16c0,8.8 7.2,16 16,16l240.5,0c8.8,0 16,-7.2 16,-16c0,-8.8 -7.2,-16 -16,-16Zm-240.5,-216l240.5,0c8.8,0 16,-7.2 16,-16c0,-8.8 -7.2,-16 -16,-16l-240.5,0c-8.8,0 -16,7.2 -16,16c0,8.8 7.2,16 16,16Z' style='fill-rule:nonzero;'/%3E%3Cpath d='M80.784,159.32l14.784,0l0,-46.896c0,-1.408 0.048,-2.832 0.144,-4.272l-12.288,10.512c-0.32,0.256 -0.64,0.44 -0.96,0.552c-0.32,0.112 -0.624,0.168 -0.912,0.168c-0.48,0 -0.912,-0.104 -1.296,-0.312c-0.384,-0.208 -0.672,-0.456 -0.864,-0.744l-2.688,-3.696l20.448,-17.712l6.96,0l0,62.4l13.536,0l0,6.528l-36.864,0l0,-6.528Z' style='fill-rule:nonzero;'/%3E%3Cpath d='M95.856,221.296c2.912,0 5.632,0.432 8.16,1.296c2.528,0.864 4.712,2.12 6.552,3.768c1.84,1.648 3.288,3.656 4.344,6.024c1.056,2.368 1.584,5.056 1.584,8.064c0,2.56 -0.384,4.928 -1.152,7.104c-0.768,2.176 -1.808,4.264 -3.12,6.264c-1.312,2 -2.824,3.936 -4.536,5.808c-1.712,1.872 -3.528,3.784 -5.448,5.736l-18.096,18.528c1.28,-0.352 2.576,-0.632 3.888,-0.84c1.312,-0.208 2.576,-0.312 3.792,-0.312l23.04,0c0.928,0 1.664,0.272 2.208,0.816c0.544,0.544 0.816,1.248 0.816,2.112l0,5.184l-45.888,0l0,-2.928c0,-0.608 0.12,-1.232 0.36,-1.872c0.24,-0.64 0.632,-1.232 1.176,-1.776l22.032,-22.128c1.824,-1.856 3.488,-3.64 4.992,-5.352c1.504,-1.712 2.792,-3.432 3.864,-5.16c1.072,-1.728 1.896,-3.48 2.472,-5.256c0.576,-1.776 0.864,-3.672 0.864,-5.688c0,-2.016 -0.32,-3.784 -0.96,-5.304c-0.64,-1.52 -1.52,-2.776 -2.64,-3.768c-1.12,-0.992 -2.432,-1.736 -3.936,-2.232c-1.504,-0.496 -3.12,-0.744 -4.848,-0.744c-1.728,0 -3.328,0.256 -4.8,0.768c-1.472,0.512 -2.776,1.224 -3.912,2.136c-1.136,0.912 -2.096,1.992 -2.88,3.24c-0.784,1.248 -1.336,2.624 -1.656,4.128c-0.256,0.928 -0.64,1.6 -1.152,2.016c-0.512,0.416 -1.184,0.624 -2.016,0.624c-0.16,0 -0.328,-0.008 -0.504,-0.024c-0.176,-0.016 -0.376,-0.04 -0.6,-0.072l-4.464,-0.768c0.448,-3.136 1.312,-5.912 2.592,-8.328c1.28,-2.416 2.904,-4.44 4.872,-6.072c1.968,-1.632 4.224,-2.872 6.768,-3.72c2.544,-0.848 5.288,-1.272 8.232,-1.272Z' style='fill-rule:nonzero;'/%3E%3Cpath d='M96.768,345.296c2.912,0 5.6,0.416 8.064,1.248c2.464,0.832 4.584,2.016 6.36,3.552c1.776,1.536 3.16,3.392 4.152,5.568c0.992,2.176 1.488,4.592 1.488,7.248c0,2.176 -0.28,4.12 -0.84,5.832c-0.56,1.712 -1.36,3.216 -2.4,4.512c-1.04,1.296 -2.296,2.392 -3.768,3.288c-1.472,0.896 -3.12,1.616 -4.944,2.16c4.48,1.184 7.848,3.168 10.104,5.952c2.256,2.784 3.384,6.272 3.384,10.464c0,3.168 -0.6,6.016 -1.8,8.544c-1.2,2.528 -2.84,4.68 -4.92,6.456c-2.08,1.776 -4.504,3.136 -7.272,4.08c-2.768,0.944 -5.736,1.416 -8.904,1.416c-3.648,0 -6.768,-0.456 -9.36,-1.368c-2.592,-0.912 -4.784,-2.168 -6.576,-3.768c-1.792,-1.6 -3.264,-3.496 -4.416,-5.688c-1.152,-2.192 -2.128,-4.568 -2.928,-7.128l3.648,-1.536c0.672,-0.288 1.344,-0.432 2.016,-0.432c0.64,0 1.208,0.136 1.704,0.408c0.496,0.272 0.872,0.696 1.128,1.272c0.064,0.128 0.128,0.264 0.192,0.408c0.064,0.144 0.128,0.296 0.192,0.456c0.448,0.928 0.992,1.976 1.632,3.144c0.64,1.168 1.504,2.264 2.592,3.288c1.088,1.024 2.44,1.888 4.056,2.592c1.616,0.704 3.624,1.056 6.024,1.056c2.4,0 4.504,-0.392 6.312,-1.176c1.808,-0.784 3.312,-1.8 4.512,-3.048c1.2,-1.248 2.104,-2.64 2.712,-4.176c0.608,-1.536 0.912,-3.056 0.912,-4.56c0,-1.856 -0.248,-3.552 -0.744,-5.088c-0.496,-1.536 -1.392,-2.864 -2.688,-3.984c-1.296,-1.12 -3.088,-2 -5.376,-2.64c-2.288,-0.64 -5.224,-0.96 -8.808,-0.96l0,-6.192c2.912,-0.032 5.4,-0.352 7.464,-0.96c2.064,-0.608 3.752,-1.44 5.064,-2.496c1.312,-1.056 2.264,-2.32 2.856,-3.792c0.592,-1.472 0.888,-3.104 0.888,-4.896c0,-1.984 -0.312,-3.712 -0.936,-5.184c-0.624,-1.472 -1.48,-2.688 -2.568,-3.648c-1.088,-0.96 -2.376,-1.68 -3.864,-2.16c-1.488,-0.48 -3.096,-0.72 -4.824,-0.72c-1.728,0 -3.328,0.256 -4.8,0.768c-1.472,0.512 -2.776,1.224 -3.912,2.136c-1.136,0.912 -2.088,2 -2.856,3.264c-0.768,1.264 -1.344,2.632 -1.728,4.104c-0.256,0.928 -0.64,1.6 -1.152,2.016c-0.512,0.416 -1.168,0.624 -1.968,0.624c-0.16,0 -0.328,-0.008 -0.504,-0.024c-0.176,-0.016 -0.376,-0.04 -0.6,-0.072l-4.464,-0.768c0.448,-3.136 1.312,-5.912 2.592,-8.328c1.28,-2.416 2.904,-4.44 4.872,-6.072c1.968,-1.632 4.224,-2.872 6.768,-3.72c2.544,-0.848 5.288,-1.272 8.232,-1.272Z' style='fill-rule:nonzero;'/%3E%3C/svg%3E");
+      }
+    }
+
+    &.unordered-list {
+      > div {
+        -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Ccircle cx="92" cy="256" r="28"/%3E%3Ccircle cx="92" cy="132" r="28"/%3E%3Ccircle cx="92" cy="380" r="28"/%3E%3Cpath d="M432 240H191.5c-8.8 0-16 7.2-16 16s7.2 16 16 16H432c8.8 0 16-7.2 16-16s-7.2-16-16-16zM432 364H191.5c-8.8 0-16 7.2-16 16s7.2 16 16 16H432c8.8 0 16-7.2 16-16s-7.2-16-16-16zM191.5 148H432c8.8 0 16-7.2 16-16s-7.2-16-16-16H191.5c-8.8 0-16 7.2-16 16s7.2 16 16 16z"/%3E%3C/svg%3E');
+        mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Ccircle cx="92" cy="256" r="28"/%3E%3Ccircle cx="92" cy="132" r="28"/%3E%3Ccircle cx="92" cy="380" r="28"/%3E%3Cpath d="M432 240H191.5c-8.8 0-16 7.2-16 16s7.2 16 16 16H432c8.8 0 16-7.2 16-16s-7.2-16-16-16zM432 364H191.5c-8.8 0-16 7.2-16 16s7.2 16 16 16H432c8.8 0 16-7.2 16-16s-7.2-16-16-16zM191.5 148H432c8.8 0 16-7.2 16-16s-7.2-16-16-16H191.5c-8.8 0-16 7.2-16 16s7.2 16 16 16z"/%3E%3C/svg%3E');
+      }
+    }
+
+    &.link {
+      > div {
+        -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath d="M280 341.1l-1.2.1c-3.6.4-7 2-9.6 4.5l-64.6 64.6c-13.7 13.7-32 21.2-51.5 21.2s-37.8-7.5-51.5-21.2c-13.7-13.7-21.2-32-21.2-51.5s7.5-37.8 21.2-51.5l68.6-68.6c3.5-3.5 7.3-6.6 11.4-9.3 4.6-3 9.6-5.6 14.8-7.5 4.8-1.8 9.9-3 15-3.7 3.4-.5 6.9-.7 10.2-.7 1.4 0 2.8.1 4.6.2 17.7 1.1 34.4 8.6 46.8 21 7.7 7.7 13.6 17.1 17.1 27.3 2.8 8 11.2 12.5 19.3 10.1.1 0 .2-.1.3-.1.1 0 .2 0 .2-.1 8.1-2.5 12.8-11 10.5-19.1-4.4-15.6-12.2-28.7-24.6-41-15.6-15.6-35.9-25.8-57.6-29.3-1.9-.3-3.8-.6-5.7-.8-3.7-.4-7.4-.6-11.1-.6-2.6 0-5.2.1-7.7.3-5.4.4-10.8 1.2-16.2 2.5-1.1.2-2.1.5-3.2.8-6.7 1.8-13.3 4.2-19.5 7.3-10.3 5.1-19.6 11.7-27.7 19.9l-68.6 68.6C58.9 304.4 48 330.8 48 359c0 28.2 10.9 54.6 30.7 74.4C98.5 453.1 124.9 464 153 464c28.2 0 54.6-10.9 74.4-30.7l65.3-65.3c10.4-10.5 2-28.3-12.7-26.9z"/%3E%3Cpath d="M433.3 78.7C413.5 58.9 387.1 48 359 48s-54.6 10.9-74.4 30.7l-63.7 63.7c-9.7 9.7-3.6 26.3 10.1 27.4 4.7.4 9.3-1.3 12.7-4.6l63.8-63.6c13.7-13.7 32-21.2 51.5-21.2s37.8 7.5 51.5 21.2c13.7 13.7 21.2 32 21.2 51.5s-7.5 37.8-21.2 51.5l-68.6 68.6c-3.5 3.5-7.3 6.6-11.4 9.3-4.6 3-9.6 5.6-14.8 7.5-4.8 1.8-9.9 3-15 3.7-3.4.5-6.9.7-10.2.7-1.4 0-2.9-.1-4.6-.2-17.7-1.1-34.4-8.6-46.8-21-7.3-7.3-12.8-16-16.4-25.5-2.9-7.7-11.1-11.9-19.1-9.8-8.9 2.3-14.1 11.7-11.3 20.5 4.5 14 12.1 25.9 23.7 37.5l.2.2c16.9 16.9 39.4 27.6 63.3 30.1 3.7.4 7.4.6 11.1.6 2.6 0 5.2-.1 7.8-.3 6.5-.5 13-1.6 19.3-3.2 6.7-1.8 13.3-4.2 19.5-7.3 10.3-5.1 19.6-11.7 27.7-19.9l68.6-68.6c19.8-19.8 30.7-46.2 30.7-74.4s-11.1-54.6-30.9-74.4z"/%3E%3C/svg%3E');
+        mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath d="M280 341.1l-1.2.1c-3.6.4-7 2-9.6 4.5l-64.6 64.6c-13.7 13.7-32 21.2-51.5 21.2s-37.8-7.5-51.5-21.2c-13.7-13.7-21.2-32-21.2-51.5s7.5-37.8 21.2-51.5l68.6-68.6c3.5-3.5 7.3-6.6 11.4-9.3 4.6-3 9.6-5.6 14.8-7.5 4.8-1.8 9.9-3 15-3.7 3.4-.5 6.9-.7 10.2-.7 1.4 0 2.8.1 4.6.2 17.7 1.1 34.4 8.6 46.8 21 7.7 7.7 13.6 17.1 17.1 27.3 2.8 8 11.2 12.5 19.3 10.1.1 0 .2-.1.3-.1.1 0 .2 0 .2-.1 8.1-2.5 12.8-11 10.5-19.1-4.4-15.6-12.2-28.7-24.6-41-15.6-15.6-35.9-25.8-57.6-29.3-1.9-.3-3.8-.6-5.7-.8-3.7-.4-7.4-.6-11.1-.6-2.6 0-5.2.1-7.7.3-5.4.4-10.8 1.2-16.2 2.5-1.1.2-2.1.5-3.2.8-6.7 1.8-13.3 4.2-19.5 7.3-10.3 5.1-19.6 11.7-27.7 19.9l-68.6 68.6C58.9 304.4 48 330.8 48 359c0 28.2 10.9 54.6 30.7 74.4C98.5 453.1 124.9 464 153 464c28.2 0 54.6-10.9 74.4-30.7l65.3-65.3c10.4-10.5 2-28.3-12.7-26.9z"/%3E%3Cpath d="M433.3 78.7C413.5 58.9 387.1 48 359 48s-54.6 10.9-74.4 30.7l-63.7 63.7c-9.7 9.7-3.6 26.3 10.1 27.4 4.7.4 9.3-1.3 12.7-4.6l63.8-63.6c13.7-13.7 32-21.2 51.5-21.2s37.8 7.5 51.5 21.2c13.7 13.7 21.2 32 21.2 51.5s-7.5 37.8-21.2 51.5l-68.6 68.6c-3.5 3.5-7.3 6.6-11.4 9.3-4.6 3-9.6 5.6-14.8 7.5-4.8 1.8-9.9 3-15 3.7-3.4.5-6.9.7-10.2.7-1.4 0-2.9-.1-4.6-.2-17.7-1.1-34.4-8.6-46.8-21-7.3-7.3-12.8-16-16.4-25.5-2.9-7.7-11.1-11.9-19.1-9.8-8.9 2.3-14.1 11.7-11.3 20.5 4.5 14 12.1 25.9 23.7 37.5l.2.2c16.9 16.9 39.4 27.6 63.3 30.1 3.7.4 7.4.6 11.1.6 2.6 0 5.2-.1 7.8-.3 6.5-.5 13-1.6 19.3-3.2 6.7-1.8 13.3-4.2 19.5-7.3 10.3-5.1 19.6-11.7 27.7-19.9l68.6-68.6c19.8-19.8 30.7-46.2 30.7-74.4s-11.1-54.6-30.9-74.4z"/%3E%3C/svg%3E');
+      }
+    }
+  }
+
+  &.deckgo-tools-mobile {
+    button {
+      > div {
+        background-color: var(--deckgo-inline-editor-button-mobile-color, black);
+      }
+
+      &.active {
+        > div {
+          background-color: var(--deckgo-inline-editor-button-mobile-color-active, #3880ff);
+        }
+      }
+
+      &[disabled] {
+        > div {
+          background-color: var(--deckgo-inline-editor-button-mobile-color-disabled, #f4f5f8);
+        }
+      }
+    }
+  }
 }
diff --git a/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.tsx b/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.tsx
@@ -470,7 +470,7 @@ export class DeckdeckgoInlineEditor {
 
       await this.execCommand(cmd);
 
-      await this.initStyle(this.selection);
+      await this.reset(true);
 
       resolve();
     });
@@ -743,22 +743,22 @@ export class DeckdeckgoInlineEditor {
           disabled={this.disabledTitle}
           onClick={(e: UIEvent) => this.toggleList(e, 'insertOrderedList')}
           class={this.orderedList ? "ordered-list active" : "ordered-list"}>
-          <slot name="orderedList"></slot>
+          <div></div>
         </button>,
 
         <button
           disabled={this.disabledTitle}
           onClick={(e: UIEvent) => this.toggleList(e,'insertUnorderedList')}
           class={this.unorderedList ? "unordered-list active" : "unordered-list"}>
-          <slot name="unorderedList"></slot>
+          <div></div>
         </button>,
 
         <div class="separator"></div>,
 
         <button
           disabled={this.disabledTitle}
           onClick={() => {this.toggleLink()}} class={this.link ? "link active" : "link"}>
-          <slot name="link"></slot>
+          <div></div>
         </button>
       ];
     }
diff --git a/webcomponents/inline-editor/src/index.html b/webcomponents/inline-editor/src/index.html

Original file line number	Diff line number	Diff line change
`@@ -517,11 +517,7 @@ export class AppEditor {`
`517`	`517`	`</ion-buttons>`
`518`	`518`	`</ion-toolbar>`
`519`	`519`	`</ion-footer>,`
`520`		`- <deckgo-inline-editor>`
`521`		`- <ion-icon ios="ios-link" md="ios-link" slot="link"></ion-icon>`
`522`		`- <ion-icon src="assets/icons/ordered-list.svg" slot="orderedList"></ion-icon>`
`523`		`- <ion-icon ios="ios-list" md="ios-list" slot="unorderedList"></ion-icon>`
`524`		`- </deckgo-inline-editor>`
	`520`	`+ <deckgo-inline-editor></deckgo-inline-editor>`
`525`	`521`	`];`
`526`	`522`	`}`
`527`	`523`	`}`
Original file line number	Diff line number	Diff line change
`@@ -37,14 +37,12 @@ deckgo-deck {`
`37`	`37`	`}`
`38`	`38`	`}`
`39`	`39`
`40`		`- deckgo-slide-title {`
`41`		`- ol, ul {`
`42`		`- list-style-position: inside;`
`43`		`- }`
	`40`	`+ ol, ul {`
	`41`	`+ list-style-position: inside;`
	`42`	`+ }`
`44`	`43`
`45`		`- ul {`
`46`		`- list-style-type: disc;`
`47`		`- }`
	`44`	`+ ul {`
	`45`	`+ list-style-type: disc;`
`48`	`46`	`}`
`49`	`47`
`50`	`48`	`a {`
Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,7 @@`
`45`	`45`
`46`	`46`	`&.idle {`
`47`	`47`	`deckgo-deck {`
`48`		`- h1, h2, h3, p {`
	`48`	`+ h1, h2, h3, div[slot] {`
`49`	`49`	`border: 1px solid transparent;`
`50`	`50`	`}`
`51`	`51`	`}`