refactor: editable utils

CHANGELOG.md

@@ -5,12 +5,13 @@
 ### Web Components
 
 - drag-resize-rotate: v2.2.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/main/webcomponents/drag-resize-rotate/CHANGELOG.md))
+- highlight-code: v3.4.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/main/webcomponents/highlight-code/CHANGELOG.md))
 - inline-editor: v4.1.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/main/webcomponents/inline-editor/CHANGELOG.md)
 
 ### Others
 
 - deck-utils: v4.1.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/main/utils/deck/CHANGELOG.md))
-- utils: v2.2.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/main/utils/utils/CHANGELOG.md))
+- utils: v2.3.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/main/utils/utils/CHANGELOG.md))
 
 <a name="5.0.0"></a>
 

studio/package.json

@@ -27,9 +27,9 @@
     "@deckdeckgo/core": "^8.4.0",
     "@deckdeckgo/deck-utils": "^4.1.1",
     "@deckdeckgo/demo": "^2.1.0",
-    "@deckdeckgo/drag-resize-rotate": "^2.2.0",
-    "@deckdeckgo/highlight-code": "^3.4.0",
-    "@deckdeckgo/inline-editor": "^4.1.0",
+    "@deckdeckgo/drag-resize-rotate": "^2.2.1",
+    "@deckdeckgo/highlight-code": "^3.4.1",
+    "@deckdeckgo/inline-editor": "^4.1.1",
     "@deckdeckgo/laser-pointer": "^1.1.0",
     "@deckdeckgo/lazy-img": "^3.2.0",
     "@deckdeckgo/markdown": "^2.1.0",
@@ -50,7 +50,7 @@
     "@deckdeckgo/slide-utils": "^4.0.3",
     "@deckdeckgo/slide-youtube": "^2.4.0",
     "@deckdeckgo/social": "^4.1.0",
-    "@deckdeckgo/utils": "^2.1.0",
+    "@deckdeckgo/utils": "^2.3.0",
     "@deckdeckgo/word-cloud": "^1.2.0",
     "@deckdeckgo/youtube": "^2.1.0",
     "@ionic/core": "^5.8.4",

utils/utils/CHANGELOG.md

@@ -1,3 +1,9 @@
+# 2.3.0 (2021-10-29)
+
+### Features
+
+- content editable function to catch and insert tabs
+
 # 2.2.0 (2021-10-27)
 
 ### Features

utils/utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/utils",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "author": "David Dal Busco",
   "description": "A collection of utils methods and functions developed for DeckDeckGo",
   "license": "MIT",

utils/utils/src/index.ts

@@ -1,5 +1,6 @@
 export * from './utils/utils';
-export * from './utils/image-utils';
-export * from './utils/inject-utils';
-export * from './utils/color-utils';
+export * from './utils/image.utils';
+export * from './utils/inject.utils';
+export * from './utils/color.utils';
 export * from './utils/selection.utils';
+export * from './utils/editable.utils';

utils/utils/src/utils/editable.utils.ts

@@ -0,0 +1,7 @@
+export const catchTab = ($event: KeyboardEvent) => {
+  if ($event?.key === 'Tab') {
+    $event.preventDefault();
+
+    document.execCommand('insertHTML', false, '&#009');
+  }
+};

webcomponents/highlight-code/CHANGELOG.md

@@ -1,3 +1,9 @@
+# 3.4.1 (2021-10-29)
+
+### Refactor
+
+- move `catchTab` function to utils
+
 # 3.4.0 (2021-10-15)
 
 ### Features

webcomponents/highlight-code/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/highlight-code",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "description": "A Web Component to highlight your code",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -24,7 +24,7 @@
     "test.watch": "npm run config && stencil test --spec --e2e --watchAll"
   },
   "dependencies": {
-    "@deckdeckgo/utils": "2.0.1",
+    "@deckdeckgo/utils": "^2.3.0",
     "prismjs": "^1.24.1"
   },
   "devDependencies": {

webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.tsx

@@ -1,6 +1,6 @@
 import {Component, Prop, Watch, Element, Method, EventEmitter, Event, Listen, State, h, Host} from '@stencil/core';
 
-import {debounce} from '@deckdeckgo/utils';
+import {catchTab, debounce} from '@deckdeckgo/utils';
 import {DeckDeckGoRevealComponent} from '@deckdeckgo/slide-utils';
 
 import {loadTheme} from '../../utils/themes-loader.utils';
@@ -385,14 +385,6 @@ export class DeckdeckgoHighlightCode implements DeckDeckGoRevealComponent {
     this.refCode?.focus();
   }
 
-  private catchTab = async ($event: KeyboardEvent) => {
-    if ($event && $event.key === 'Tab') {
-      $event.preventDefault();
-
-      document.execCommand('insertHTML', false, '&#009');
-    }
-  };
-
   /**
    * @internal Used when integrated in DeckDeckGo presentations. Call `nextHighlight()`.
    */
@@ -507,7 +499,7 @@ export class DeckdeckgoHighlightCode implements DeckDeckGoRevealComponent {
             contentEditable={this.editable}
             onBlur={async () => await this.applyCode()}
             onInput={() => this.inputCode()}
-            onKeyDown={($event: KeyboardEvent) => this.catchTab($event)}
+            onKeyDown={($event: KeyboardEvent) => catchTab($event)}
             ref={(el: HTMLElement | null) => (this.refCode = el as HTMLElement)}></code>
           <slot name="code"></slot>
         </div>