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

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

@@ -12,6 +12,35 @@ 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;
@@ -30,4 +59,4 @@ export const statesStyles = css`
   }
 `;
 
-export const richTextEditorStyles = [contentStyles, toolbarStyles, statesStyles];
+export const richTextEditorStyles = [baseStyles, contentStyles, toolbarStyles, statesStyles];

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

@@ -10,34 +10,8 @@
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-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;
-}
+import { type RichTextEditorCustomEventMap, RichTextEditorMixin } from './vaadin-rich-text-editor-mixin.js';
+export * from './vaadin-rich-text-editor-mixin.js';
 
 /**
  * Fired when the user commits a value change.
@@ -46,22 +20,6 @@ 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;
 }
@@ -106,6 +64,7 @@ export interface RichTextEditorEventMap extends HTMLElementEventMap, RichTextEdi
  * `toolbar-group-block`                | The group for preformatted block controls
  * `toolbar-group-format`               | The group for format controls
  * `toolbar-button`                     | The toolbar button (applies to all buttons)
+ * `toolbar-button-pressed`             | The toolbar button in pressed state (applies to all buttons)
  * `toolbar-button-undo`                | The "undo" button
  * `toolbar-button-redo`                | The "redo" button
  * `toolbar-button-bold`                | The "bold" button
@@ -134,55 +93,7 @@ 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 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;
-
+declare class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(HTMLElement))) {
   addEventListener<K extends keyof RichTextEditorEventMap>(
     type: K,
     listener: (this: RichTextEditor, ev: RichTextEditorEventMap[K]) => void,