Skip to content

Commit

Permalink
fix: cache pending html value for unattached rte (#6871) (#6875)
Browse files Browse the repository at this point in the history
  • Loading branch information
tomivirkki authored Nov 29, 2023
1 parent c2ec4cb commit dd46a07
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 0 deletions.
23 changes: 23 additions & 0 deletions packages/rich-text-editor/src/vaadin-rich-text-editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -641,6 +641,9 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
});

this._editor.on('selection-change', this.__announceFormatting.bind(this));

// Flush pending htmlValue only once the editor is fully initialized
this.__flushPendingHtmlValue();
}

/** @protected */
Expand Down Expand Up @@ -987,10 +990,25 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
* @param {string} htmlValue
*/
dangerouslySetHtmlValue(htmlValue) {
if (!this._editor) {
// The editor isn't ready yet, store the value for later
this.__pendingHtmlValue = htmlValue;
// Clear a possible value to prevent it from clearing the pending htmlValue once the editor property is set
this.value = '';
return;
}

const deltaFromHtml = this._editor.clipboard.convert(htmlValue);
this._editor.setContents(deltaFromHtml, SOURCE.API);
}

/** @private */
__flushPendingHtmlValue() {
if (this.__pendingHtmlValue) {
this.dangerouslySetHtmlValue(this.__pendingHtmlValue);
}
}

/** @private */
__announceFormatting() {
const timeout = 200;
Expand Down Expand Up @@ -1110,6 +1128,11 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {

/** @private */
_valueChanged(value, editor) {
if (value && this.__pendingHtmlValue) {
// A non-empty value is set explicitly. Clear pending htmlValue to prevent it from overriding the value.
this.__pendingHtmlValue = undefined;
}

if (editor === undefined) {
return;
}
Expand Down
44 changes: 44 additions & 0 deletions packages/rich-text-editor/test/basic.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -968,3 +968,47 @@ describe('rich text editor', () => {
});
});
});

describe('unattached rich text editor', () => {
let rte;

beforeEach(() => {
rte = document.createElement('vaadin-rich-text-editor');
});

const flushValueDebouncer = () => rte.__debounceSetValue && rte.__debounceSetValue.flush();

async function attach() {
const parent = fixtureSync('<div></div>');
parent.appendChild(rte);
await nextRender();
flushValueDebouncer();
}

it('should not throw when setting html value', () => {
expect(() => rte.dangerouslySetHtmlValue('<h1>Foo</h1>')).to.not.throw(Error);
});

it('should have the html value once attached', async () => {
rte.dangerouslySetHtmlValue('<h1>Foo</h1>');
await attach();

expect(rte.htmlValue).to.equal('<h1>Foo</h1>');
});

it('should override the htmlValue', async () => {
rte.dangerouslySetHtmlValue('<h1>Foo</h1>');
rte.value = JSON.stringify([{ insert: 'Vaadin' }]);
await attach();

expect(rte.htmlValue).to.equal('<p>Vaadin</p>');
});

it('should override the value', async () => {
rte.value = JSON.stringify([{ insert: 'Vaadin' }]);
rte.dangerouslySetHtmlValue('<h1>Foo</h1>');
await attach();

expect(rte.htmlValue).to.equal('<h1>Foo</h1>');
});
});

0 comments on commit dd46a07

Please sign in to comment.