@vaadin/rich-text-editor 23.3.21 → 23.3.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +10 -10
  2. package/src/vaadin-rich-text-editor.js +27 -12
  3. package/web-types.json +2 -2
  4. package/web-types.lit.json +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/rich-text-editor",
3
- "version": "23.3.21",
3
+ "version": "23.3.23",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -40,14 +40,14 @@
40
40
  ],
41
41
  "dependencies": {
42
42
  "@polymer/polymer": "^3.0.0",
43
- "@vaadin/button": "~23.3.21",
44
- "@vaadin/component-base": "~23.3.21",
45
- "@vaadin/confirm-dialog": "~23.3.21",
46
- "@vaadin/text-field": "~23.3.21",
47
- "@vaadin/tooltip": "~23.3.21",
48
- "@vaadin/vaadin-lumo-styles": "~23.3.21",
49
- "@vaadin/vaadin-material-styles": "~23.3.21",
50
- "@vaadin/vaadin-themable-mixin": "~23.3.21"
43
+ "@vaadin/button": "~23.3.23",
44
+ "@vaadin/component-base": "~23.3.23",
45
+ "@vaadin/confirm-dialog": "~23.3.23",
46
+ "@vaadin/text-field": "~23.3.23",
47
+ "@vaadin/tooltip": "~23.3.23",
48
+ "@vaadin/vaadin-lumo-styles": "~23.3.23",
49
+ "@vaadin/vaadin-material-styles": "~23.3.23",
50
+ "@vaadin/vaadin-themable-mixin": "~23.3.23"
51
51
  },
52
52
  "devDependencies": {
53
53
  "@esm-bundle/chai": "^4.3.4",
@@ -62,5 +62,5 @@
62
62
  "web-types.json",
63
63
  "web-types.lit.json"
64
64
  ],
65
- "gitHead": "5caee824b60295eb1e03b736880ed73f62a8988c"
65
+ "gitHead": "0027e59e0405f668a089c10e75bb488da9a665b8"
66
66
  }
package/src/vaadin-rich-text-editor.js CHANGED
@@ -159,7 +159,7 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
159
159
 
160
160
  <div class="vaadin-rich-text-editor-container">
161
161
  <!-- Create toolbar container -->
162
- <div part="toolbar">
162
+ <div part="toolbar" role="toolbar">
163
163
  <span part="toolbar-group toolbar-group-history">
164
164
  <!-- Undo and Redo -->
165
165
  <button id="btn-undo" type="button" part="toolbar-button toolbar-button-undo" on-click="_undo"></button>
@@ -526,6 +526,13 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
526
526
  }
527
527
  }
528
528
 
529
+ /** @protected */
530
+ disconnectedCallback() {
531
+ super.disconnectedCallback();
532
+ this._editor.emitter.removeAllListeners();
533
+ this._editor.emitter.listeners = {};
534
+ }
535
+
529
536
  /** @private */
530
537
  __setDirection(dir) {
531
538
  // Needed for proper `ql-align` class to be set and activate the toolbar align button
@@ -547,18 +554,14 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
547
554
  }
548
555
 
549
556
  /** @protected */
550
- ready() {
551
- super.ready();
557
+ connectedCallback() {
558
+ super.connectedCallback();
552
559
 
553
560
  const editor = this.shadowRoot.querySelector('[part="content"]');
554
- const toolbarConfig = this._prepareToolbar();
555
- this._toolbar = toolbarConfig.container;
556
-
557
- this._addToolbarListeners();
558
561
 
559
562
  this._editor = new Quill(editor, {
560
563
  modules: {
561
- toolbar: toolbarConfig,
564
+ toolbar: this._toolbarConfig,
562
565
  },
563
566
  });
564
567
 
@@ -570,10 +573,6 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
570
573
  this.__patchFirefoxFocus();
571
574
  }
572
575
 
573
- this.$.linkDialog.$.dialog.$.overlay.addEventListener('vaadin-overlay-open', () => {
574
- this.$.linkUrl.focus();
575
- });
576
-
577
576
  const editorContent = editor.querySelector('.ql-editor');
578
577
 
579
578
  editorContent.setAttribute('role', 'textbox');
@@ -604,6 +603,20 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
604
603
  this._editor.on('selection-change', this.__announceFormatting.bind(this));
605
604
  }
606
605
 
606
+ /** @protected */
607
+ ready() {
608
+ super.ready();
609
+
610
+ this._toolbarConfig = this._prepareToolbar();
611
+ this._toolbar = this._toolbarConfig.container;
612
+
613
+ this._addToolbarListeners();
614
+
615
+ this.$.linkDialog.$.dialog.$.overlay.addEventListener('vaadin-overlay-open', () => {
616
+ this.$.linkUrl.focus();
617
+ });
618
+ }
619
+
607
620
  /** @private */
608
621
  _prepareToolbar() {
609
622
  const clean = Quill.imports['modules/toolbar'].DEFAULTS.handlers.clean;
@@ -907,6 +920,8 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
907
920
 
908
921
  // Remove Quill classes, e.g. ql-syntax, except for align
909
922
  content = content.replace(/\s*ql-(?!align)[\w-]*\s*/g, '');
923
+ // Remove meta spans, e.g. cursor which are empty after Quill classes removed
924
+ content = content.replace(/<\/?span[^>]*>/gu, '');
910
925
 
911
926
  // Replace Quill align classes with inline styles
912
927
  [this.__dir === 'rtl' ? 'left' : 'right', 'center', 'justify'].forEach((align) => {
package/web-types.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/rich-text-editor",
4
- "version": "24.2.0-alpha1",
4
+ "version": "23.3.23",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
9
  {
10
10
  "name": "vaadin-rich-text-editor",
11
- "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-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-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-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.",
11
+ "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-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-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-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/custom-theme/styling-components) documentation.",
12
12
  "attributes": [
13
13
  {
14
14
  "name": "value",
package/web-types.lit.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/rich-text-editor",
4
- "version": "24.2.0-alpha1",
4
+ "version": "23.3.23",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -16,7 +16,7 @@
16
16
  "elements": [
17
17
  {
18
18
  "name": "vaadin-rich-text-editor",
19
- "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-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-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-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.",
19
+ "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-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-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-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/custom-theme/styling-components) documentation.",
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {