@vaadin/rich-text-editor 24.2.0-beta3 → 24.2.0-beta4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/rich-text-editor",
-  "version": "24.2.0-beta3",
+  "version": "24.2.0-beta4",
   "publishConfig": {
     "access": "public"
   },
@@ -24,8 +24,6 @@
   },
   "files": [
     "src",
-    "!src/vaadin-lit-rich-text-editor.d.ts",
-    "!src/vaadin-lit-rich-text-editor.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -41,20 +39,19 @@
     "polymer"
   ],
   "dependencies": {
-    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "24.2.0-beta3",
-    "@vaadin/component-base": "24.2.0-beta3",
-    "@vaadin/confirm-dialog": "24.2.0-beta3",
-    "@vaadin/text-field": "24.2.0-beta3",
-    "@vaadin/tooltip": "24.2.0-beta3",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-beta3",
-    "@vaadin/vaadin-material-styles": "24.2.0-beta3",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-beta3"
+    "@vaadin/button": "24.2.0-beta4",
+    "@vaadin/component-base": "24.2.0-beta4",
+    "@vaadin/confirm-dialog": "24.2.0-beta4",
+    "@vaadin/text-field": "24.2.0-beta4",
+    "@vaadin/tooltip": "24.2.0-beta4",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-beta4",
+    "@vaadin/vaadin-material-styles": "24.2.0-beta4",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-beta4"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/a11y-base": "24.2.0-beta3",
+    "@vaadin/a11y-base": "24.2.0-beta4",
     "@vaadin/testing-helpers": "^0.5.0",
     "gulp": "^4.0.2",
     "gulp-cli": "^2.3.0",
@@ -66,5 +63,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "91ea11e7ad706065340acdb93b92316919ce5e69"
+  "gitHead": "04da1e1e5c5713ea45e4b7d659dc6ac6b4604f4c"
 }

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

@@ -12,35 +12,6 @@ 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';
 
-export const baseStyles = css`
-  :host {
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-  }
-
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  .announcer {
-    position: fixed;
-    clip: rect(0, 0, 0, 0);
-  }
-
-  input[type='file'] {
-    display: none;
-  }
-
-  .vaadin-rich-text-editor-container {
-    display: flex;
-    flex-direction: column;
-    min-height: inherit;
-    max-height: inherit;
-    flex: auto;
-  }
-`;
-
 export const statesStyles = css`
   :host([readonly]) [part='toolbar'] {
     display: none;
@@ -59,4 +30,4 @@ export const statesStyles = css`
   }
 `;
 
-export const richTextEditorStyles = [baseStyles, contentStyles, toolbarStyles, statesStyles];
+export const richTextEditorStyles = [contentStyles, toolbarStyles, statesStyles];

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

@@ -10,8 +10,34 @@
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { type RichTextEditorCustomEventMap, RichTextEditorMixin } from './vaadin-rich-text-editor-mixin.js';
-export * from './vaadin-rich-text-editor-mixin.js';
+
+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 user commits a value change.
@@ -20,6 +46,22 @@ export type RichTextEditorChangeEvent = Event & {
   target: RichTextEditor;
 };
 
+/**
+ * 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 interface RichTextEditorEventMap extends HTMLElementEventMap, RichTextEditorCustomEventMap {
   change: RichTextEditorChangeEvent;
 }
@@ -92,7 +134,55 @@ export interface RichTextEditorEventMap extends HTMLElementEventMap, RichTextEdi
  * @fires {CustomEvent} html-value-changed - Fired when the `htmlValue` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  */
-declare class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(HTMLElement))) {
+declare class RichTextEditor extends ElementMixin(ThemableMixin(HTMLElement)) {
+  /**
+   * 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;
+
   addEventListener<K extends keyof RichTextEditorEventMap>(
     type: K,
     listener: (this: RichTextEditor, ev: RichTextEditorEventMap[K]) => void,