@vaadin/rich-text-editor 24.3.0-alpha5 → 24.3.0-alpha7
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.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/rich-text-editor",
|
|
3
|
-
"version": "24.3.0-
|
|
3
|
+
"version": "24.3.0-alpha7",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -43,18 +43,18 @@
|
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
45
45
|
"@polymer/polymer": "^3.0.0",
|
|
46
|
-
"@vaadin/button": "24.3.0-
|
|
47
|
-
"@vaadin/component-base": "24.3.0-
|
|
48
|
-
"@vaadin/confirm-dialog": "24.3.0-
|
|
49
|
-
"@vaadin/text-field": "24.3.0-
|
|
50
|
-
"@vaadin/tooltip": "24.3.0-
|
|
51
|
-
"@vaadin/vaadin-lumo-styles": "24.3.0-
|
|
52
|
-
"@vaadin/vaadin-material-styles": "24.3.0-
|
|
53
|
-
"@vaadin/vaadin-themable-mixin": "24.3.0-
|
|
46
|
+
"@vaadin/button": "24.3.0-alpha7",
|
|
47
|
+
"@vaadin/component-base": "24.3.0-alpha7",
|
|
48
|
+
"@vaadin/confirm-dialog": "24.3.0-alpha7",
|
|
49
|
+
"@vaadin/text-field": "24.3.0-alpha7",
|
|
50
|
+
"@vaadin/tooltip": "24.3.0-alpha7",
|
|
51
|
+
"@vaadin/vaadin-lumo-styles": "24.3.0-alpha7",
|
|
52
|
+
"@vaadin/vaadin-material-styles": "24.3.0-alpha7",
|
|
53
|
+
"@vaadin/vaadin-themable-mixin": "24.3.0-alpha7"
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
56
56
|
"@esm-bundle/chai": "^4.3.4",
|
|
57
|
-
"@vaadin/a11y-base": "24.3.0-
|
|
57
|
+
"@vaadin/a11y-base": "24.3.0-alpha7",
|
|
58
58
|
"@vaadin/testing-helpers": "^0.6.0",
|
|
59
59
|
"gulp": "^4.0.2",
|
|
60
60
|
"gulp-cli": "^2.3.0",
|
|
@@ -66,5 +66,5 @@
|
|
|
66
66
|
"web-types.json",
|
|
67
67
|
"web-types.lit.json"
|
|
68
68
|
],
|
|
69
|
-
"gitHead": "
|
|
69
|
+
"gitHead": "cf40acccb9e061debdf4d38b4149d6f2c50f8e10"
|
|
70
70
|
}
|
|
@@ -520,11 +520,9 @@ export const RichTextEditorMixin = (superClass) =>
|
|
|
520
520
|
|
|
521
521
|
toolbar.controls.forEach((pair) => {
|
|
522
522
|
const input = pair[1];
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
input.removeAttribute('on');
|
|
527
|
-
}
|
|
523
|
+
const isActive = input.classList.contains('ql-active');
|
|
524
|
+
input.toggleAttribute('on', isActive);
|
|
525
|
+
input.part.toggle('toolbar-button-pressed', isActive);
|
|
528
526
|
});
|
|
529
527
|
};
|
|
530
528
|
}
|
|
@@ -693,7 +691,26 @@ export const RichTextEditorMixin = (superClass) =>
|
|
|
693
691
|
* @param {string} htmlValue
|
|
694
692
|
*/
|
|
695
693
|
dangerouslySetHtmlValue(htmlValue) {
|
|
694
|
+
const whitespaceCharacters = {
|
|
695
|
+
'\t': '__VAADIN_RICH_TEXT_EDITOR_TAB',
|
|
696
|
+
' ': '__VAADIN_RICH_TEXT_EDITOR_DOUBLE_SPACE',
|
|
697
|
+
};
|
|
698
|
+
// Replace whitespace characters with placeholders before the Delta conversion to prevent Quill from trimming them
|
|
699
|
+
Object.entries(whitespaceCharacters).forEach(([character, replacement]) => {
|
|
700
|
+
htmlValue = htmlValue.replaceAll(/>[^<]*</gu, (match) => match.replaceAll(character, replacement)); // NOSONAR
|
|
701
|
+
});
|
|
702
|
+
|
|
696
703
|
const deltaFromHtml = this._editor.clipboard.convert(htmlValue);
|
|
704
|
+
|
|
705
|
+
// Restore whitespace characters after the conversion
|
|
706
|
+
Object.entries(whitespaceCharacters).forEach(([character, replacement]) => {
|
|
707
|
+
deltaFromHtml.ops.forEach((op) => {
|
|
708
|
+
if (typeof op.insert === 'string') {
|
|
709
|
+
op.insert = op.insert.replaceAll(replacement, character);
|
|
710
|
+
}
|
|
711
|
+
});
|
|
712
|
+
});
|
|
713
|
+
|
|
697
714
|
this._editor.setContents(deltaFromHtml, SOURCE.API);
|
|
698
715
|
}
|
|
699
716
|
|
|
@@ -9,6 +9,8 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
|
|
|
9
9
|
const richTextEditor = css`
|
|
10
10
|
:host {
|
|
11
11
|
min-height: calc(var(--lumo-size-m) * 8);
|
|
12
|
+
--_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
|
|
13
|
+
--_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
|
|
12
14
|
}
|
|
13
15
|
|
|
14
16
|
[part='toolbar'] {
|
|
@@ -32,7 +34,7 @@ const richTextEditor = css`
|
|
|
32
34
|
|
|
33
35
|
[part~='toolbar-button']:focus {
|
|
34
36
|
outline: none;
|
|
35
|
-
box-shadow: 0 0 0
|
|
37
|
+
box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
|
|
36
38
|
}
|
|
37
39
|
|
|
38
40
|
[part~='toolbar-button']:hover {
|
|
@@ -48,7 +50,7 @@ const richTextEditor = css`
|
|
|
48
50
|
}
|
|
49
51
|
|
|
50
52
|
[part~='toolbar-button'][on] {
|
|
51
|
-
background-color: var(--lumo-primary-color);
|
|
53
|
+
background-color: var(--vaadin-selection-color, var(--lumo-primary-color));
|
|
52
54
|
color: var(--lumo-primary-contrast-color);
|
|
53
55
|
}
|
|
54
56
|
|
package/web-types.json
CHANGED
package/web-types.lit.json
CHANGED