@vaadin/rich-text-editor 22.0.2 → 23.0.0-alpha4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/rich-text-editor",
-  "version": "22.0.2",
+  "version": "23.0.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -18,6 +18,7 @@
   },
   "main": "vaadin-rich-text-editor.js",
   "module": "vaadin-rich-text-editor.js",
+  "type": "module",
   "scripts": {
     "icons": "gulp icons"
   },
@@ -37,14 +38,14 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "^22.0.2",
-    "@vaadin/component-base": "^22.0.2",
-    "@vaadin/confirm-dialog": "^22.0.2",
-    "@vaadin/text-field": "^22.0.2",
+    "@vaadin/button": "23.0.0-alpha4",
+    "@vaadin/component-base": "23.0.0-alpha4",
+    "@vaadin/confirm-dialog": "23.0.0-alpha4",
+    "@vaadin/text-field": "23.0.0-alpha4",
     "@vaadin/vaadin-license-checker": "^2.1.0",
-    "@vaadin/vaadin-lumo-styles": "^22.0.2",
-    "@vaadin/vaadin-material-styles": "^22.0.2",
-    "@vaadin/vaadin-themable-mixin": "^22.0.2"
+    "@vaadin/vaadin-lumo-styles": "23.0.0-alpha4",
+    "@vaadin/vaadin-material-styles": "23.0.0-alpha4",
+    "@vaadin/vaadin-themable-mixin": "23.0.0-alpha4"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -54,5 +55,5 @@
     "gulp-iconfont": "^11.0.0",
     "sinon": "^9.2.1"
   },
-  "gitHead": "df21370c4a655a38eac11f79686021ab3b0887ad"
+  "gitHead": "81e2deee5147bb7c1f4884760f4598613306f1fb"
 }

package/src/vaadin-rich-text-editor-content-styles.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2020 Vaadin Ltd
+ * Copyright (c) 2018 - 2022 Vaadin Ltd.
  * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
  */
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';

package/src/vaadin-rich-text-editor-icons.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd
+ * Copyright (c) 2018 - 2022 Vaadin Ltd.
  * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
  */
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';

package/src/vaadin-rich-text-editor-styles.js

@@ -1,17 +1,14 @@
 /**
  * @license
- * Copyright (c) 2020 Vaadin Ltd
+ * Copyright (c) 2018 - 2022 Vaadin Ltd.
  * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
  */
 import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { contentStyles } from './vaadin-rich-text-editor-content-styles.js';
 import { toolbarStyles } from './vaadin-rich-text-editor-toolbar-styles.js';
 
-const richTextEditorStyles = css`
-  ${contentStyles}
-  ${toolbarStyles}
-
-:host([readonly]) [part='toolbar'] {
+export const statesStyles = css`
+  :host([readonly]) [part='toolbar'] {
     display: none;
   }
 
@@ -28,4 +25,4 @@ const richTextEditorStyles = css`
   }
 `;
 
-export { richTextEditorStyles };
+export const richTextEditorStyles = [contentStyles, toolbarStyles, statesStyles];

package/src/vaadin-rich-text-editor-toolbar-styles.js

@@ -1,14 +1,12 @@
 /**
  * @license
- * Copyright (c) 2020 Vaadin Ltd
+ * Copyright (c) 2018 - 2022 Vaadin Ltd.
  * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
  */
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { iconsStyles } from './vaadin-rich-text-editor-icons.js';
 
-export const toolbarStyles = css`
-  ${iconsStyles}
-
+export const buttonsStyles = css`
   [part='toolbar'] {
     display: flex;
     flex-wrap: wrap;
@@ -132,5 +130,7 @@ export const toolbarStyles = css`
   }
 `;
 
+export const toolbarStyles = [iconsStyles, buttonsStyles];
+
 // Register a module with ID for backwards compatibility.
 registerStyles('', toolbarStyles, { moduleId: 'vaadin-rich-text-editor-toolbar-styles' });

package/src/vaadin-rich-text-editor.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2020 Vaadin Ltd
+ * Copyright (c) 2018 - 2022 Vaadin Ltd.
  * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
@@ -34,6 +34,13 @@ export interface RichTextEditorI18n {
   remove: string;
 }
 
+/**
+ * Fired when the user commits a value change.
+ */
+export type RichTextEditorChangeEvent = Event & {
+  target: RichTextEditor;
+};
+
 /**
  * Fired when the `htmlValue` property changes.
  */
@@ -50,7 +57,9 @@ export interface RichTextEditorCustomEventMap {
   'value-changed': RichTextEditorValueChangedEvent;
 }
 
-export interface RichTextEditorEventMap extends HTMLElementEventMap, RichTextEditorCustomEventMap {}
+export interface RichTextEditorEventMap extends HTMLElementEventMap, RichTextEditorCustomEventMap {
+  change: RichTextEditorChangeEvent;
+}
 
 /**
  * `<vaadin-rich-text-editor>` is a Web Component for rich text editing.

package/src/vaadin-rich-text-editor.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2020 Vaadin Ltd
+ * Copyright (c) 2018 - 2022 Vaadin Ltd.
  * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
  */
 import '@vaadin/button/src/vaadin-button.js';
@@ -9,7 +9,6 @@ import '@vaadin/text-field/src/vaadin-text-field.js';
 import '@vaadin/vaadin-license-checker/vaadin-license-checker.js';
 import '../vendor/vaadin-quill.js';
 import './vaadin-rich-text-editor-toolbar-styles.js';
-import { resetMouseCanceller } from '@polymer/polymer/lib/utils/gestures.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { isFirefox } from '@vaadin/component-base/src/browser-utils.js';
@@ -645,11 +644,14 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
         e.preventDefault();
         let index = buttons.indexOf(e.target);
         buttons[index].setAttribute('tabindex', '-1');
-        if (e.keyCode === 39 && ++index === buttons.length) {
-          index = 0;
-        } else if (e.keyCode === 37 && --index === -1) {
-          index = buttons.length - 1;
+
+        let step;
+        if (e.keyCode === 39) {
+          step = 1;
+        } else if (e.keyCode === 37) {
+          step = -1;
         }
+        index = (buttons.length + index + step) % buttons.length;
         buttons[index].removeAttribute('tabindex');
         buttons[index].focus();
       }
@@ -714,7 +716,9 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
       document.body.appendChild(this.__fakeTarget);
       // let the focus step out of shadow root!
       this.__fakeTarget.focus();
-      return new Promise((resolve) => setTimeout(resolve));
+      return new Promise((resolve) => {
+        setTimeout(resolve);
+      });
     };
 
     const focusBack = (offsetNode, offset) => {
@@ -992,18 +996,9 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
   _onImageTouchEnd(e) {
     // Cancel the event to avoid the following click event
     e.preventDefault();
-    // FIXME(platosha): workaround for Polymer Gestures mouseCanceller
-    // cancelling the following synthetic click. See also:
-    // https://github.com/Polymer/polymer/issues/5289
-    this.__resetMouseCanceller();
     this._onImageClick();
   }
 
-  /** @private */
-  __resetMouseCanceller() {
-    resetMouseCanceller();
-  }
-
   /** @private */
   _onImageClick() {
     this.$.fileInput.value = '';