@vaadin/rich-text-editor 24.3.0-alpha1 → 24.3.0-alpha11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/rich-text-editor",
-  "version": "24.3.0-alpha1",
+  "version": "24.3.0-alpha11",
   "publishConfig": {
     "access": "public"
   },
@@ -39,20 +39,21 @@
     "polymer"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "24.3.0-alpha1",
-    "@vaadin/component-base": "24.3.0-alpha1",
-    "@vaadin/confirm-dialog": "24.3.0-alpha1",
-    "@vaadin/text-field": "24.3.0-alpha1",
-    "@vaadin/tooltip": "24.3.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.3.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.3.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.3.0-alpha1"
+    "@vaadin/button": "24.3.0-alpha11",
+    "@vaadin/component-base": "24.3.0-alpha11",
+    "@vaadin/confirm-dialog": "24.3.0-alpha11",
+    "@vaadin/text-field": "24.3.0-alpha11",
+    "@vaadin/tooltip": "24.3.0-alpha11",
+    "@vaadin/vaadin-lumo-styles": "24.3.0-alpha11",
+    "@vaadin/vaadin-material-styles": "24.3.0-alpha11",
+    "@vaadin/vaadin-themable-mixin": "24.3.0-alpha11"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/a11y-base": "24.3.0-alpha1",
-    "@vaadin/testing-helpers": "^0.5.0",
+    "@vaadin/a11y-base": "24.3.0-alpha11",
+    "@vaadin/testing-helpers": "^0.6.0",
     "gulp": "^4.0.2",
     "gulp-cli": "^2.3.0",
     "gulp-iconfont": "^11.0.0",
@@ -63,5 +64,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "9ca6f3ca220a777e8eea181a1f5717e39a732240"
+  "gitHead": "123cf569a1b6ef6f4ef5fe8e60cb8d988699b98c"
 }

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

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+export * from './vaadin-rich-text-editor.js';

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

@@ -0,0 +1,284 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import '@vaadin/button/src/vaadin-lit-button.js';
+import '@vaadin/confirm-dialog/src/vaadin-lit-confirm-dialog.js';
+import '@vaadin/text-field/src/vaadin-lit-text-field.js';
+import '@vaadin/tooltip/src/vaadin-lit-tooltip.js';
+import { html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { RichTextEditorMixin } from './vaadin-rich-text-editor-mixin.js';
+import { richTextEditorStyles } from './vaadin-rich-text-editor-styles.js';
+
+/**
+ * LitElement based version of `<vaadin-rich-text-editor>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment not intended for publishing to npm.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ */
+class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-rich-text-editor';
+  }
+
+  static get cvdlName() {
+    return 'vaadin-rich-text-editor';
+  }
+
+  static get styles() {
+    return richTextEditorStyles;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div class="vaadin-rich-text-editor-container">
+        <!-- Create toolbar container -->
+        <div part="toolbar" role="toolbar">
+          <span part="toolbar-group toolbar-group-history">
+            <!-- Undo and Redo -->
+            <button
+              id="btn-undo"
+              type="button"
+              part="toolbar-button toolbar-button-undo"
+              @click="${this._undo}"
+            ></button>
+            <vaadin-tooltip for="btn-undo" .text="${this.i18n.undo}"></vaadin-tooltip>
+
+            <button
+              id="btn-redo"
+              type="button"
+              part="toolbar-button toolbar-button-redo"
+              @click="${this._redo}"
+            ></button>
+            <vaadin-tooltip for="btn-redo" .text="${this.i18n.redo}"></vaadin-tooltip>
+          </span>
+
+          <span part="toolbar-group toolbar-group-emphasis">
+            <!-- Bold -->
+            <button id="btn-bold" class="ql-bold" part="toolbar-button toolbar-button-bold"></button>
+            <vaadin-tooltip for="btn-bold" .text="${this.i18n.bold}"></vaadin-tooltip>
+
+            <!-- Italic -->
+            <button id="btn-italic" class="ql-italic" part="toolbar-button toolbar-button-italic"></button>
+            <vaadin-tooltip for="btn-italic" .text="${this.i18n.italic}"></vaadin-tooltip>
+
+            <!-- Underline -->
+            <button id="btn-underline" class="ql-underline" part="toolbar-button toolbar-button-underline"></button>
+            <vaadin-tooltip for="btn-underline" .text="${this.i18n.underline}"></vaadin-tooltip>
+
+            <!-- Strike -->
+            <button id="btn-strike" class="ql-strike" part="toolbar-button toolbar-button-strike"></button>
+            <vaadin-tooltip for="btn-strike" .text="${this.i18n.strike}"></vaadin-tooltip>
+          </span>
+
+          <span part="toolbar-group toolbar-group-heading">
+            <!-- Header buttons -->
+            <button
+              id="btn-h1"
+              type="button"
+              class="ql-header"
+              value="1"
+              part="toolbar-button toolbar-button-h1"
+            ></button>
+            <vaadin-tooltip for="btn-h1" .text="${this.i18n.h1}"></vaadin-tooltip>
+            <button
+              id="btn-h2"
+              type="button"
+              class="ql-header"
+              value="2"
+              part="toolbar-button toolbar-button-h2"
+            ></button>
+            <vaadin-tooltip for="btn-h2" .text="${this.i18n.h2}"></vaadin-tooltip>
+            <button
+              id="btn-h3"
+              type="button"
+              class="ql-header"
+              value="3"
+              part="toolbar-button toolbar-button-h3"
+            ></button>
+            <vaadin-tooltip for="btn-h3" .text="${this.i18n.h3}"></vaadin-tooltip>
+          </span>
+
+          <span part="toolbar-group toolbar-group-glyph-transformation">
+            <!-- Subscript and superscript -->
+            <button
+              id="btn-subscript"
+              class="ql-script"
+              value="sub"
+              part="toolbar-button toolbar-button-subscript"
+            ></button>
+            <vaadin-tooltip for="btn-subscript" .text="${this.i18n.subscript}"></vaadin-tooltip>
+            <button
+              id="btn-superscript"
+              class="ql-script"
+              value="super"
+              part="toolbar-button toolbar-button-superscript"
+            ></button>
+            <vaadin-tooltip for="btn-superscript" text="${this.i18n.superscript}"></vaadin-tooltip>
+          </span>
+
+          <span part="toolbar-group toolbar-group-list">
+            <!-- List buttons -->
+            <button
+              id="btn-ol"
+              type="button"
+              class="ql-list"
+              value="ordered"
+              part="toolbar-button toolbar-button-list-ordered"
+            ></button>
+            <vaadin-tooltip for="btn-ol" text="${this.i18n.listOrdered}"></vaadin-tooltip>
+            <button
+              id="btn-ul"
+              type="button"
+              class="ql-list"
+              value="bullet"
+              part="toolbar-button toolbar-button-list-bullet"
+            ></button>
+            <vaadin-tooltip for="btn-ul" text="${this.i18n.listBullet}"></vaadin-tooltip>
+          </span>
+
+          <span part="toolbar-group toolbar-group-alignment">
+            <!-- Align buttons -->
+            <button
+              id="btn-left"
+              type="button"
+              class="ql-align"
+              value=""
+              part="toolbar-button toolbar-button-align-left"
+            ></button>
+            <vaadin-tooltip for="btn-left" .text="${this.i18n.alignLeft}"></vaadin-tooltip>
+            <button
+              id="btn-center"
+              type="button"
+              class="ql-align"
+              value="center"
+              part="toolbar-button toolbar-button-align-center"
+            ></button>
+            <vaadin-tooltip for="btn-center" .text="${this.i18n.alignCenter}"></vaadin-tooltip>
+            <button
+              id="btn-right"
+              type="button"
+              class="ql-align"
+              value="right"
+              part="toolbar-button toolbar-button-align-right"
+            ></button>
+            <vaadin-tooltip for="btn-right" .text="${this.i18n.alignRight}"></vaadin-tooltip>
+          </span>
+
+          <span part="toolbar-group toolbar-group-rich-text">
+            <!-- Image -->
+            <button
+              id="btn-image"
+              type="button"
+              part="toolbar-button toolbar-button-image"
+              @touchend="${this._onImageTouchEnd}"
+              @click="${this._onImageClick}"
+            ></button>
+            <vaadin-tooltip for="btn-image" .text="${this.i18n.image}"></vaadin-tooltip>
+            <!-- Link -->
+            <button
+              id="btn-link"
+              type="button"
+              part="toolbar-button toolbar-button-link"
+              @click="${this._onLinkClick}"
+            ></button>
+            <vaadin-tooltip for="btn-link" .text="${this.i18n.link}"></vaadin-tooltip>
+          </span>
+
+          <span part="toolbar-group toolbar-group-block">
+            <!-- Blockquote -->
+            <button
+              id="btn-blockquote"
+              type="button"
+              class="ql-blockquote"
+              part="toolbar-button toolbar-button-blockquote"
+            ></button>
+            <vaadin-tooltip for="btn-blockquote" .text="${this.i18n.blockquote}"></vaadin-tooltip>
+            <!-- Code block -->
+            <button
+              id="btn-code"
+              type="button"
+              class="ql-code-block"
+              part="toolbar-button toolbar-button-code-block"
+            ></button>
+            <vaadin-tooltip for="btn-code" .text="${this.i18n.codeBlock}"></vaadin-tooltip>
+          </span>
+
+          <span part="toolbar-group toolbar-group-format">
+            <!-- Clean -->
+            <button id="btn-clean" type="button" class="ql-clean" part="toolbar-button toolbar-button-clean"></button>
+            <vaadin-tooltip for="btn-clean" .text="${this.i18n.clean}"></vaadin-tooltip>
+          </span>
+
+          <input
+            id="fileInput"
+            type="file"
+            accept="image/png, image/gif, image/jpeg, image/bmp, image/x-icon"
+            @change="${this._uploadImage}"
+          />
+        </div>
+
+        <div part="content"></div>
+
+        <div class="announcer" aria-live="polite"></div>
+      </div>
+
+      <vaadin-confirm-dialog
+        id="linkDialog"
+        .opened="${this._linkEditing}"
+        .header="${this.i18n.linkDialogTitle}"
+        @opened-changed="${this._onLinkEditingChanged}"
+      >
+        <vaadin-text-field
+          id="linkUrl"
+          .value="${this._linkUrl}"
+          style="width: 100%;"
+          @keydown="${this._onLinkKeydown}"
+          @value-changed="${this._onLinkUrlChanged}"
+        ></vaadin-text-field>
+        <vaadin-button id="confirmLink" slot="confirm-button" theme="primary" @click="${this._onLinkEditConfirm}">
+          ${this.i18n.ok}
+        </vaadin-button>
+        <vaadin-button
+          id="removeLink"
+          slot="reject-button"
+          theme="error"
+          @click="${this._onLinkEditRemove}"
+          ?hidden="${!this._linkRange}"
+        >
+          ${this.i18n.remove}
+        </vaadin-button>
+        <vaadin-button id="cancelLink" slot="cancel-button" @click="${this._onLinkEditCancel}">
+          ${this.i18n.cancel}
+        </vaadin-button>
+      </vaadin-confirm-dialog>
+    `;
+  }
+
+  /** @private */
+  _onLinkEditingChanged(event) {
+    this._linkEditing = event.detail.value;
+  }
+
+  /** @private */
+  _onLinkUrlChanged(event) {
+    this._linkUrl = event.detail.value;
+  }
+}
+
+defineCustomElement(RichTextEditor);
+
+export { RichTextEditor };

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

@@ -0,0 +1,109 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+
+export interface RichTextEditorI18n {
+  undo: string;
+  redo: string;
+  bold: string;
+  italic: string;
+  underline: string;
+  strike: string;
+  h1: string;
+  h2: string;
+  h3: string;
+  subscript: string;
+  superscript: string;
+  listOrdered: string;
+  listBullet: string;
+  alignLeft: string;
+  alignCenter: string;
+  alignRight: string;
+  image: string;
+  link: string;
+  blockquote: string;
+  codeBlock: string;
+  clean: string;
+  linkDialogTitle: string;
+  ok: string;
+  cancel: string;
+  remove: string;
+}
+
+/**
+ * Fired when the `htmlValue` property changes.
+ */
+export type RichTextEditorHtmlValueChangedEvent = CustomEvent<{ value: string }>;
+
+/**
+ * Fired when the `value` property changes.
+ */
+export type RichTextEditorValueChangedEvent = CustomEvent<{ value: string }>;
+
+export interface RichTextEditorCustomEventMap {
+  'html-value-changed': RichTextEditorHtmlValueChangedEvent;
+
+  'value-changed': RichTextEditorValueChangedEvent;
+}
+
+export declare function RichTextEditorMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<RichTextEditorMixinClass> & T;
+
+export declare class RichTextEditorMixinClass {
+  /**
+   * Value is a list of the operations which describe change to the document.
+   * Each of those operations describe the change at the current index.
+   * They can be an `insert`, `delete` or `retain`. The format is as follows:
+   *
+   * ```js
+   *  [
+   *    { insert: 'Hello World' },
+   *    { insert: '!', attributes: { bold: true }}
+   *  ]
+   * ```
+   *
+   * See also https://github.com/quilljs/delta for detailed documentation.
+   */
+  value: string;
+
+  /**
+   * HTML representation of the rich text editor content.
+   */
+  readonly htmlValue: string | null | undefined;
+
+  /**
+   * When true, the user can not modify, nor copy the editor content.
+   */
+  disabled: boolean;
+
+  /**
+   * When true, the user can not modify the editor content, but can copy it.
+   */
+  readonly: boolean;
+
+  /**
+   * An object used to localize this component. The properties are used
+   * e.g. as the tooltips for the editor toolbar buttons.
+   */
+  i18n: RichTextEditorI18n;
+
+  /**
+   * Sets content represented by HTML snippet into the editor.
+   * The snippet is interpreted by [Quill's Clipboard matchers](https://quilljs.com/docs/modules/clipboard/#matchers),
+   * which may not produce the exactly input HTML.
+   *
+   * **NOTE:** Improper handling of HTML can lead to cross site scripting (XSS) and failure to sanitize
+   * properly is both notoriously error-prone and a leading cause of web vulnerabilities.
+   * This method is aptly named to ensure the developer has taken the necessary precautions.
+   */
+  dangerouslySetHtmlValue(htmlValue: string): void;
+}