@vaadin/rich-text-editor 24.4.0-dev.b3e1d14600 → 24.5.0-alpha1

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ * Copyright (c) 2000 - 2024 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -57,6 +57,7 @@ export interface RichTextEditorEventMap extends HTMLElementEventMap, RichTextEdi
  * `toolbar-group-history`              | The group for histroy controls
  * `toolbar-group-emphasis`             | The group for emphasis controls
  * `toolbar-group-heading`              | The group for heading controls
+ * `toolbar-group-style`                | The group for style controls
  * `toolbar-group-glyph-transformation` | The group for glyph transformation controls
  * `toolbar-group-group-list`           | The group for group list controls
  * `toolbar-group-alignment`            | The group for alignment controls
@@ -71,6 +72,8 @@ export interface RichTextEditorEventMap extends HTMLElementEventMap, RichTextEdi
  * `toolbar-button-italic`              | The "italic" button
  * `toolbar-button-underline`           | The "underline" button
  * `toolbar-button-strike`              | The "strike-through" button
+ * `toolbar-button-color`               | The "color" button
+ * `toolbar-button-background`          | The "background" button
  * `toolbar-button-h1`                  | The "header 1" button
  * `toolbar-button-h2`                  | The "header 2" button
  * `toolbar-button-h3`                  | The "header 3" button

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ * Copyright (c) 2000 - 2024 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -12,6 +12,7 @@ import '@vaadin/button/src/vaadin-button.js';
 import '@vaadin/confirm-dialog/src/vaadin-confirm-dialog.js';
 import '@vaadin/text-field/src/vaadin-text-field.js';
 import '@vaadin/tooltip/src/vaadin-tooltip.js';
+import './vaadin-rich-text-editor-popup.js';
 import './vaadin-rich-text-editor-toolbar-styles.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
@@ -55,6 +56,7 @@ registerStyles('vaadin-rich-text-editor', richTextEditorStyles, { moduleId: 'vaa
  * `toolbar-group-history`              | The group for histroy controls
  * `toolbar-group-emphasis`             | The group for emphasis controls
  * `toolbar-group-heading`              | The group for heading controls
+ * `toolbar-group-style`                | The group for style controls
  * `toolbar-group-glyph-transformation` | The group for glyph transformation controls
  * `toolbar-group-group-list`           | The group for group list controls
  * `toolbar-group-alignment`            | The group for alignment controls
@@ -69,6 +71,8 @@ registerStyles('vaadin-rich-text-editor', richTextEditorStyles, { moduleId: 'vaa
  * `toolbar-button-italic`              | The "italic" button
  * `toolbar-button-underline`           | The "underline" button
  * `toolbar-button-strike`              | The "strike-through" button
+ * `toolbar-button-color`               | The "color" button
+ * `toolbar-button-background`          | The "background" button
  * `toolbar-button-h1`                  | The "header 1" button
  * `toolbar-button-h2`                  | The "header 2" button
  * `toolbar-button-h3`                  | The "header 3" button
@@ -130,6 +134,25 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
             <vaadin-tooltip for="btn-strike" text="[[i18n.strike]]"></vaadin-tooltip>
           </span>
 
+          <span part="toolbar-group toolbar-group-style">
+            <!-- Color -->
+            <button
+              id="btn-color"
+              type="button"
+              part="toolbar-button toolbar-button-color"
+              on-click="__onColorClick"
+            ></button>
+            <vaadin-tooltip for="btn-color" text="[[i18n.color]]"></vaadin-tooltip>
+            <!-- Background -->
+            <button
+              id="btn-background"
+              type="button"
+              part="toolbar-button toolbar-button-background"
+              on-click="__onBackgroundClick"
+            ></button>
+            <vaadin-tooltip for="btn-background" text="[[i18n.background]]"></vaadin-tooltip>
+          </span>
+
           <span part="toolbar-group toolbar-group-heading">
             <!-- Header buttons -->
             <button
@@ -305,6 +328,20 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
           [[i18n.cancel]]
         </vaadin-button>
       </vaadin-confirm-dialog>
+
+      <vaadin-rich-text-editor-popup
+        id="colorPopup"
+        colors="[[colorOptions]]"
+        opened="{{_colorEditing}}"
+        on-color-selected="__onColorSelected"
+      ></vaadin-rich-text-editor-popup>
+
+      <vaadin-rich-text-editor-popup
+        id="backgroundPopup"
+        colors="[[colorOptions]]"
+        opened="{{_backgroundEditing}}"
+        on-color-selected="__onBackgroundSelected"
+      ></vaadin-rich-text-editor-popup>
     `;
   }
 

package/theme/lumo/vaadin-lit-rich-text-editor.d.ts

@@ -0,0 +1,6 @@
+import '@vaadin/button/theme/lumo/vaadin-button-styles.js';
+import '@vaadin/confirm-dialog/theme/lumo/vaadin-confirm-dialog-styles.js';
+import '@vaadin/text-field/theme/lumo/vaadin-text-field-styles.js';
+import '@vaadin/tooltip/theme/lumo/vaadin-tooltip-styles.js';
+import './vaadin-rich-text-editor-styles.js';
+import '../../src/vaadin-lit-rich-text-editor.js';

package/theme/lumo/vaadin-rich-text-editor-styles.d.ts

@@ -0,0 +1,4 @@
+import '@vaadin/vaadin-lumo-styles/font-icons.js';
+import '@vaadin/vaadin-lumo-styles/sizing.js';
+import '@vaadin/vaadin-lumo-styles/spacing.js';
+import '@vaadin/vaadin-lumo-styles/style.js';

package/theme/lumo/vaadin-rich-text-editor-styles.js

@@ -3,9 +3,37 @@ import '@vaadin/vaadin-lumo-styles/sizing.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
 import { color } from '@vaadin/vaadin-lumo-styles/color.js';
+import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
 import { typography } from '@vaadin/vaadin-lumo-styles/typography.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+const popupOverlay = css`
+  [part='overlay'] {
+    margin: var(--lumo-space-xs) 0;
+  }
+
+  [part='content'] {
+    padding: var(--lumo-space-xs);
+    max-width: calc(7 * (var(--_button-size) + var(--_button-margin) * 2));
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    --_button-size: 1.25rem;
+    --_button-margin: 3px;
+  }
+
+  [part='content'] ::slotted(button) {
+    border: none;
+    width: var(--_button-size);
+    height: var(--_button-size);
+    margin: var(--_button-margin);
+  }
+`;
+
+registerStyles('vaadin-rich-text-editor-popup-overlay', [overlay, popupOverlay], {
+  moduleId: 'lumo-rich-text-editor-popup-overlay',
+});
+
 const richTextEditor = css`
   :host {
     min-height: calc(var(--lumo-size-m) * 8);
@@ -32,7 +60,8 @@ const richTextEditor = css`
     transition: background-color 100ms, color 100ms;
   }
 
-  [part~='toolbar-button']:focus {
+  [part~='toolbar-button']:focus,
+  [part~='toolbar-button'][aria-expanded='true'] {
     outline: none;
     box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
   }
@@ -40,7 +69,6 @@ const richTextEditor = css`
   [part~='toolbar-button']:hover {
     background-color: var(--lumo-contrast-5pct);
     color: var(--lumo-contrast-80pct);
-    box-shadow: none;
   }
 
   @media (hover: none) {
@@ -73,6 +101,8 @@ const richTextEditor = css`
   }
 
   [part~='toolbar-button-bold']::before,
+  [part~='toolbar-button-background']::before,
+  [part~='toolbar-button-color']::before,
   [part~='toolbar-button-italic']::before,
   [part~='toolbar-button-underline']::before,
   [part~='toolbar-button-strike']::before {
@@ -84,6 +114,21 @@ const richTextEditor = css`
     font-weight: 700;
   }
 
+  [part~='toolbar-button-background']::before {
+    background-color: var(--lumo-base-color);
+    background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
+  }
+
+  [part~='toolbar-button-background']:hover::before {
+    background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct)),
+      linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
+  }
+
+  [part~='toolbar-button-background']:active::before {
+    background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct)),
+      linear-gradient(var(--lumo-contrast-10pct), var(--lumo-contrast-10pct));
+  }
+
   [part~='toolbar-button-h1']::before,
   [part~='toolbar-button-h2']::before,
   [part~='toolbar-button-h3']::before {

package/theme/lumo/vaadin-rich-text-editor.d.ts

@@ -0,0 +1,6 @@
+import '@vaadin/button/theme/lumo/vaadin-button.js';
+import '@vaadin/confirm-dialog/theme/lumo/vaadin-confirm-dialog.js';
+import '@vaadin/text-field/theme/lumo/vaadin-text-field.js';
+import '@vaadin/tooltip/theme/lumo/vaadin-tooltip.js';
+import './vaadin-rich-text-editor-styles.js';
+import '../../src/vaadin-rich-text-editor.js';

package/theme/material/vaadin-lit-rich-text-editor.d.ts

@@ -0,0 +1,6 @@
+import '@vaadin/button/theme/material/vaadin-button-styles.js';
+import '@vaadin/confirm-dialog/theme/material/vaadin-confirm-dialog-styles.js';
+import '@vaadin/text-field/theme/material/vaadin-text-field-styles.js';
+import '@vaadin/tooltip/theme/material/vaadin-tooltip-styles.js';
+import './vaadin-rich-text-editor-styles.js';
+import '../../src/vaadin-lit-rich-text-editor.js';

package/theme/material/vaadin-rich-text-editor-styles.d.ts

@@ -0,0 +1 @@
+import '@vaadin/vaadin-material-styles/color.js';

package/theme/material/vaadin-rich-text-editor-styles.js

@@ -1,7 +1,35 @@
 import '@vaadin/vaadin-material-styles/color.js';
+import { overlay } from '@vaadin/vaadin-material-styles/mixins/overlay.js';
 import { typography } from '@vaadin/vaadin-material-styles/typography.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+const popupOverlay = css`
+  [part='overlay'] {
+    margin: 0.25rem 0;
+  }
+
+  [part='content'] {
+    padding: 0.25rem;
+    max-width: calc(7 * (var(--_button-size) + var(--_button-margin) * 2));
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    --_button-size: 1.25rem;
+    --_button-margin: 3px;
+  }
+
+  [part='content'] ::slotted(button) {
+    border: none;
+    width: var(--_button-size);
+    height: var(--_button-size);
+    margin: var(--_button-margin);
+  }
+`;
+
+registerStyles('vaadin-rich-text-editor-popup-overlay', [overlay, popupOverlay], {
+  moduleId: 'material-rich-text-editor-popup-overlay',
+});
+
 const richTextEditor = css`
   :host {
     background-color: var(--material-background-color);
@@ -37,6 +65,10 @@ const richTextEditor = css`
     color: inherit;
   }
 
+  [part~='toolbar-button'][aria-expanded='true'] {
+    outline: -webkit-focus-ring-color auto 1px;
+  }
+
   [part~='toolbar-button'][on] {
     background-color: rgba(0, 0, 0, 0.1);
     color: inherit;
@@ -71,6 +103,14 @@ const richTextEditor = css`
     font-size: 20px;
   }
 
+  [part~='toolbar-button-background']::before {
+    background-color: var(--material-secondary-background-color);
+  }
+
+  [part~='toolbar-button-background']::after {
+    inset: 0.25rem;
+  }
+
   /* TODO unsupported selector */
   [part='content'] > .ql-editor {
     padding: 0 16px;

package/theme/material/vaadin-rich-text-editor.d.ts

@@ -0,0 +1,6 @@
+import '@vaadin/button/theme/material/vaadin-button.js';
+import '@vaadin/confirm-dialog/theme/material/vaadin-confirm-dialog.js';
+import '@vaadin/text-field/theme/material/vaadin-text-field.js';
+import '@vaadin/tooltip/theme/material/vaadin-tooltip.js';
+import './vaadin-rich-text-editor-styles.js';
+import '../../src/vaadin-rich-text-editor.js';

package/web-types.json

@@ -0,0 +1,121 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "name": "@vaadin/rich-text-editor",
+  "version": "24.5.0-alpha1",
+  "description-markup": "markdown",
+  "contributions": {
+    "html": {
+      "elements": [
+        {
+          "name": "vaadin-rich-text-editor",
+          "description": "`<vaadin-rich-text-editor>` is a Web Component for rich text editing.\nIt provides a set of toolbar controls to apply formatting on the content,\nwhich is stored and can be accessed as HTML5 or JSON string.\n\n```\n<vaadin-rich-text-editor></vaadin-rich-text-editor>\n```\n\nVaadin Rich Text Editor focuses on the structure, not the styling of content.\nTherefore, the semantic HTML5 tags such as <h1>, <strong> and <ul> are used,\nand CSS usage is limited to most common cases, like horizontal text alignment.\n\n### Styling\n\nThe following state attributes are available for styling:\n\nAttribute    | Description | Part name\n-------------|-------------|------------\n`disabled`   | Set to a disabled text editor | :host\n`readonly`   | Set to a readonly text editor | :host\n`on`         | Set to a toolbar button applied to the selected text | toolbar-button\n\nThe following shadow DOM parts are available for styling:\n\nPart name                            | Description\n-------------------------------------|----------------\n`content`                            | The content wrapper\n`toolbar`                            | The toolbar wrapper\n`toolbar-group`                      | The group for toolbar controls\n`toolbar-group-history`              | The group for histroy controls\n`toolbar-group-emphasis`             | The group for emphasis controls\n`toolbar-group-heading`              | The group for heading controls\n`toolbar-group-style`                | The group for style controls\n`toolbar-group-glyph-transformation` | The group for glyph transformation controls\n`toolbar-group-group-list`           | The group for group list controls\n`toolbar-group-alignment`            | The group for alignment controls\n`toolbar-group-rich-text`            | The group for rich text controls\n`toolbar-group-block`                | The group for preformatted block controls\n`toolbar-group-format`               | The group for format controls\n`toolbar-button`                     | The toolbar button (applies to all buttons)\n`toolbar-button-pressed`             | The toolbar button in pressed state (applies to all buttons)\n`toolbar-button-undo`                | The \"undo\" button\n`toolbar-button-redo`                | The \"redo\" button\n`toolbar-button-bold`                | The \"bold\" button\n`toolbar-button-italic`              | The \"italic\" button\n`toolbar-button-underline`           | The \"underline\" button\n`toolbar-button-strike`              | The \"strike-through\" button\n`toolbar-button-color`               | The \"color\" button\n`toolbar-button-background`          | The \"background\" button\n`toolbar-button-h1`                  | The \"header 1\" button\n`toolbar-button-h2`                  | The \"header 2\" button\n`toolbar-button-h3`                  | The \"header 3\" button\n`toolbar-button-subscript`           | The \"subscript\" button\n`toolbar-button-superscript`         | The \"superscript\" button\n`toolbar-button-list-ordered`        | The \"ordered list\" button\n`toolbar-button-list-bullet`         | The \"bullet list\" button\n`toolbar-button-align-left`          | The \"left align\" button\n`toolbar-button-align-center`        | The \"center align\" button\n`toolbar-button-align-right`         | The \"right align\" button\n`toolbar-button-image`               | The \"image\" button\n`toolbar-button-link`                | The \"link\" button\n`toolbar-button-blockquote`          | The \"blockquote\" button\n`toolbar-button-code-block`          | The \"code block\" button\n`toolbar-button-clean`               | The \"clean formatting\" button\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "Value is a list of the operations which describe change to the document.\nEach of those operations describe the change at the current index.\nThey can be an `insert`, `delete` or `retain`. The format is as follows:\n\n```js\n [\n   { insert: 'Hello World' },\n   { insert: '!', attributes: { bold: true }}\n ]\n```\n\nSee also https://github.com/quilljs/delta for detailed documentation.",
+              "value": {
+                "type": [
+                  "string"
+                ]
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "When true, the user can not modify, nor copy the editor content.",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
+            {
+              "name": "readonly",
+              "description": "When true, the user can not modify the editor content, but can copy it.",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
+            {
+              "name": "theme",
+              "description": "The theme variants to apply to the component.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "Value is a list of the operations which describe change to the document.\nEach of those operations describe the change at the current index.\nThey can be an `insert`, `delete` or `retain`. The format is as follows:\n\n```js\n [\n   { insert: 'Hello World' },\n   { insert: '!', attributes: { bold: true }}\n ]\n```\n\nSee also https://github.com/quilljs/delta for detailed documentation.",
+                "value": {
+                  "type": [
+                    "string"
+                  ]
+                }
+              },
+              {
+                "name": "disabled",
+                "description": "When true, the user can not modify, nor copy the editor content.",
+                "value": {
+                  "type": [
+                    "boolean"
+                  ]
+                }
+              },
+              {
+                "name": "readonly",
+                "description": "When true, the user can not modify the editor content, but can copy it.",
+                "value": {
+                  "type": [
+                    "boolean"
+                  ]
+                }
+              },
+              {
+                "name": "i18n",
+                "description": "An object used to localize this component. The properties are used\ne.g. as the tooltips for the editor toolbar buttons.",
+                "value": {
+                  "type": [
+                    "RichTextEditorI18n"
+                  ]
+                }
+              },
+              {
+                "name": "colorOptions",
+                "description": "The list of colors used by the background and text color\nselection controls. Should contain an array of HEX strings.\n\nWhen user selects `#000000` (black) as a text color,\nor `#ffffff` (white) as a background color, it resets\nthe corresponding format for the selected text.",
+                "value": {
+                  "type": [
+                    "Array",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              }
+            ],
+            "events": [
+              {
+                "name": "change",
+                "description": "Fired when the user commits a value change."
+              },
+              {
+                "name": "value-changed",
+                "description": "Fired when the `value` property changes."
+              },
+              {
+                "name": "html-value-changed",
+                "description": "Fired when the `htmlValue` property changes."
+              }
+            ]
+          }
+        }
+      ]
+    }
+  }
+}

package/web-types.lit.json

@@ -0,0 +1,83 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "name": "@vaadin/rich-text-editor",
+  "version": "24.5.0-alpha1",
+  "description-markup": "markdown",
+  "framework": "lit",
+  "framework-config": {
+    "enable-when": {
+      "node-packages": [
+        "lit"
+      ]
+    }
+  },
+  "contributions": {
+    "html": {
+      "elements": [
+        {
+          "name": "vaadin-rich-text-editor",
+          "description": "`<vaadin-rich-text-editor>` is a Web Component for rich text editing.\nIt provides a set of toolbar controls to apply formatting on the content,\nwhich is stored and can be accessed as HTML5 or JSON string.\n\n```\n<vaadin-rich-text-editor></vaadin-rich-text-editor>\n```\n\nVaadin Rich Text Editor focuses on the structure, not the styling of content.\nTherefore, the semantic HTML5 tags such as <h1>, <strong> and <ul> are used,\nand CSS usage is limited to most common cases, like horizontal text alignment.\n\n### Styling\n\nThe following state attributes are available for styling:\n\nAttribute    | Description | Part name\n-------------|-------------|------------\n`disabled`   | Set to a disabled text editor | :host\n`readonly`   | Set to a readonly text editor | :host\n`on`         | Set to a toolbar button applied to the selected text | toolbar-button\n\nThe following shadow DOM parts are available for styling:\n\nPart name                            | Description\n-------------------------------------|----------------\n`content`                            | The content wrapper\n`toolbar`                            | The toolbar wrapper\n`toolbar-group`                      | The group for toolbar controls\n`toolbar-group-history`              | The group for histroy controls\n`toolbar-group-emphasis`             | The group for emphasis controls\n`toolbar-group-heading`              | The group for heading controls\n`toolbar-group-style`                | The group for style controls\n`toolbar-group-glyph-transformation` | The group for glyph transformation controls\n`toolbar-group-group-list`           | The group for group list controls\n`toolbar-group-alignment`            | The group for alignment controls\n`toolbar-group-rich-text`            | The group for rich text controls\n`toolbar-group-block`                | The group for preformatted block controls\n`toolbar-group-format`               | The group for format controls\n`toolbar-button`                     | The toolbar button (applies to all buttons)\n`toolbar-button-pressed`             | The toolbar button in pressed state (applies to all buttons)\n`toolbar-button-undo`                | The \"undo\" button\n`toolbar-button-redo`                | The \"redo\" button\n`toolbar-button-bold`                | The \"bold\" button\n`toolbar-button-italic`              | The \"italic\" button\n`toolbar-button-underline`           | The \"underline\" button\n`toolbar-button-strike`              | The \"strike-through\" button\n`toolbar-button-color`               | The \"color\" button\n`toolbar-button-background`          | The \"background\" button\n`toolbar-button-h1`                  | The \"header 1\" button\n`toolbar-button-h2`                  | The \"header 2\" button\n`toolbar-button-h3`                  | The \"header 3\" button\n`toolbar-button-subscript`           | The \"subscript\" button\n`toolbar-button-superscript`         | The \"superscript\" button\n`toolbar-button-list-ordered`        | The \"ordered list\" button\n`toolbar-button-list-bullet`         | The \"bullet list\" button\n`toolbar-button-align-left`          | The \"left align\" button\n`toolbar-button-align-center`        | The \"center align\" button\n`toolbar-button-align-right`         | The \"right align\" button\n`toolbar-button-image`               | The \"image\" button\n`toolbar-button-link`                | The \"link\" button\n`toolbar-button-blockquote`          | The \"blockquote\" button\n`toolbar-button-code-block`          | The \"code block\" button\n`toolbar-button-clean`               | The \"clean formatting\" button\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "extension": true,
+          "attributes": [
+            {
+              "name": "?disabled",
+              "description": "When true, the user can not modify, nor copy the editor content.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "?readonly",
+              "description": "When true, the user can not modify the editor content, but can copy it.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".value",
+              "description": "Value is a list of the operations which describe change to the document.\nEach of those operations describe the change at the current index.\nThey can be an `insert`, `delete` or `retain`. The format is as follows:\n\n```js\n [\n   { insert: 'Hello World' },\n   { insert: '!', attributes: { bold: true }}\n ]\n```\n\nSee also https://github.com/quilljs/delta for detailed documentation.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".i18n",
+              "description": "An object used to localize this component. The properties are used\ne.g. as the tooltips for the editor toolbar buttons.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".colorOptions",
+              "description": "The list of colors used by the background and text color\nselection controls. Should contain an array of HEX strings.\n\nWhen user selects `#000000` (black) as a text color,\nor `#ffffff` (white) as a background color, it resets\nthe corresponding format for the selected text.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "@change",
+              "description": "Fired when the user commits a value change.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "@value-changed",
+              "description": "Fired when the `value` property changes.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "@html-value-changed",
+              "description": "Fired when the `htmlValue` property changes.",
+              "value": {
+                "kind": "expression"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  }
+}