Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix setting data on the editor component when the component is initializing #263

Merged
merged 4 commits into from
Jun 25, 2021
Merged

Fix setting data on the editor component when the component is initializing #263

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9d0fbba
Updated CKEditor 5 internal deps.
ma2ciek Jun 21, 2021
ab9f754
Fixed setting data on the editor component when the component is init…
ma2ciek Jun 21, 2021
9eee7cd
Updated angular.json file.
ma2ciek Jun 25, 2021
ed18ec8
Added RxJs to the peer deps.
ma2ciek Jun 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions ckeditor/src/ckeditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import Table from '@ckeditor/ckeditor5-table/src/table';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
import CloudServices from '@ckeditor/ckeditor5-cloud-services/src/cloudservices';

import Context from '@ckeditor/ckeditor5-core/src/context';
import ContextWatchdog from '@ckeditor/ckeditor5-watchdog/src/contextwatchdog';
Expand All @@ -36,28 +37,29 @@ class ClassicEditor extends ClassicEditorBase {}

// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
Essentials,
UploadAdapter,
Autoformat,
Bold,
Italic,
BlockQuote,
Bold,
CKFinder,
CloudServices,
EasyImage,
Essentials,
Heading,
Image,
ImageCaption,
ImageStyle,
ImageToolbar,
ImageUpload,
Indent,
Italic,
Link,
List,
MediaEmbed,
Paragraph,
PasteFromOffice,
Table,
TableToolbar
TableToolbar,
UploadAdapter
];

// Editor configuration.
Expand Down
47 changes: 24 additions & 23 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,29 +36,30 @@
"@angular/cli": "^11.0.4",
"@angular/compiler-cli": "^11.0.4",
"@angular/language-service": "^11.0.4",
"@ckeditor/ckeditor5-adapter-ckfinder": "^23.0.0",
"@ckeditor/ckeditor5-autoformat": "^23.0.0",
"@ckeditor/ckeditor5-basic-styles": "^23.0.0",
"@ckeditor/ckeditor5-block-quote": "^23.0.0",
"@ckeditor/ckeditor5-ckfinder": "^23.0.0",
"@ckeditor/ckeditor5-core": "^23.0.0",
"@ckeditor/ckeditor5-dev-env": "^23.5.1",
"@ckeditor/ckeditor5-dev-utils": "^23.5.1",
"@ckeditor/ckeditor5-dev-webpack-plugin": "^23.5.1",
"@ckeditor/ckeditor5-easy-image": "^23.0.0",
"@ckeditor/ckeditor5-editor-classic": "^23.0.0",
"@ckeditor/ckeditor5-essentials": "^23.0.0",
"@ckeditor/ckeditor5-heading": "^23.0.0",
"@ckeditor/ckeditor5-image": "^23.0.0",
"@ckeditor/ckeditor5-indent": "^23.0.0",
"@ckeditor/ckeditor5-link": "^23.0.0",
"@ckeditor/ckeditor5-list": "^23.0.0",
"@ckeditor/ckeditor5-media-embed": "^23.0.0",
"@ckeditor/ckeditor5-paragraph": "^23.0.0",
"@ckeditor/ckeditor5-paste-from-office": "^23.0.0",
"@ckeditor/ckeditor5-table": "^23.0.0",
"@ckeditor/ckeditor5-theme-lark": "^23.0.0",
"@ckeditor/ckeditor5-watchdog": "^23.0.0",
"@ckeditor/ckeditor5-adapter-ckfinder": "^28.0.0",
"@ckeditor/ckeditor5-autoformat": "^28.0.0",
"@ckeditor/ckeditor5-basic-styles": "^28.0.0",
"@ckeditor/ckeditor5-block-quote": "^28.0.0",
"@ckeditor/ckeditor5-ckfinder": "^28.0.0",
"@ckeditor/ckeditor5-cloud-services": "^28.0.0",
"@ckeditor/ckeditor5-core": "^28.0.0",
"@ckeditor/ckeditor5-dev-env": "^25.2.3",
"@ckeditor/ckeditor5-dev-utils": "^25.2.3",
"@ckeditor/ckeditor5-dev-webpack-plugin": "^25.2.3",
"@ckeditor/ckeditor5-easy-image": "^28.0.0",
"@ckeditor/ckeditor5-editor-classic": "^28.0.0",
"@ckeditor/ckeditor5-essentials": "^28.0.0",
"@ckeditor/ckeditor5-heading": "^28.0.0",
"@ckeditor/ckeditor5-image": "^28.0.0",
"@ckeditor/ckeditor5-indent": "^28.0.0",
"@ckeditor/ckeditor5-link": "^28.0.0",
"@ckeditor/ckeditor5-list": "^28.0.0",
"@ckeditor/ckeditor5-media-embed": "^28.0.0",
"@ckeditor/ckeditor5-paragraph": "^28.0.0",
"@ckeditor/ckeditor5-paste-from-office": "^28.0.0",
"@ckeditor/ckeditor5-table": "^28.0.0",
"@ckeditor/ckeditor5-theme-lark": "^28.0.0",
"@ckeditor/ckeditor5-watchdog": "^28.0.0",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "^2.0.6",
"@types/node": "^14.11.8",
Expand Down
76 changes: 13 additions & 63 deletions src/ckeditor/ckeditor.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,15 +93,15 @@ describe( 'CKEditorComponent', () => {
expect( component.editorInstance!.getData() ).toEqual( '<p>foo</p>' );
} );

it( 'should be configurable at the start of the component using the `config.initialData` property', () => {
it( 'should be configurable at the start of the component using the `config.initialData` property', async () => {
component.config = { initialData: 'foo' };

fixture.detectChanges();

return waitCycle().then( () => {
expect( component.config.initialData ).toEqual( 'foo' );
expect( component.editorInstance!.getData() ).toEqual( '<p>foo</p>' );
} );
await waitCycle();

expect( component.config.initialData ).toEqual( 'foo' );
expect( component.editorInstance!.getData() ).toEqual( '<p>foo</p>' );
} );

it( 'should not be provided using both `config.initialData` or `data` properties', async () => {
Expand All @@ -114,78 +114,28 @@ describe( 'CKEditorComponent', () => {
} );

it( 'should be writeable by ControlValueAccessor', async () => {
component.writeValue( 'foo' );
component.writeValue( '<p>foo</p>' );
fixture.detectChanges();

await waitCycle();

expect( component.editorInstance!.getData() ).toEqual( '<p>foo</p>' );

component.writeValue( 'bar' );
component.writeValue( '<p>bar</p>' );

expect( component.editorInstance!.getData() ).toEqual( '<p>bar</p>' );
} );

it( 'should not be set using `editor.setData()` during the initialization step', () => {
Copy link
Contributor Author

@ma2ciek ma2ciek Jun 21, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TBH I'm not sure about the original test. I don't see anything wrong with using editor.setData() on a data property change from outside of the editor component. This can't work with RTE anyway.

class EventEmitter {
/* eslint-disable-next-line */
public on() { }
}

class ModelDocument extends EventEmitter {
public getRootNames = () => [];
public version = 0;
}

class EditorMock {
public model = {
document: new ModelDocument()
};

public editing = {
view: {
document: new EventEmitter()
}
};

public setData = createSpy();

public static create() {
return Promise.resolve( new this() );
}

/* eslint-disable-next-line */
public destroy() { }
}

interface Spy {
(): void;
called: boolean;
}

function createSpy() {
const spy: Spy = function() {
spy.called = true;
};

spy.called = false;

return spy;
}

component.editor = ( EditorMock as any );

component.writeValue( 'foo' );
it( 'should be set during the initialization step if the editor was not initialized yet', async () => {
fixture.detectChanges();

return waitCycle().then( () => {
const fakeEditorInstance = component.editorInstance as any as EditorMock;
expect( component.editorInstance ).toBeFalsy();

expect( fakeEditorInstance.setData.called ).toBe( false );
component.writeValue( '<p>foo</p>' );

component.writeValue( 'bar' );
expect( fakeEditorInstance.setData.called ).toBe( true );
} );
await waitCycle();

expect( component.editorInstance!.getData() ).toEqual( '<p>foo</p>' );
} );
} );

Expand Down
28 changes: 19 additions & 9 deletions src/ckeditor/ckeditor.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
} from '@angular/core';

import EditorWatchdog from '@ckeditor/ckeditor5-watchdog/src/editorwatchdog';
import { first } from 'rxjs/operators';

import uid from './uid';

Expand Down Expand Up @@ -246,13 +247,16 @@ export class CKEditorComponent implements AfterViewInit, OnDestroy, ControlValue
}
// If not, wait for it to be ready; store the data.
else {
// If the editor element is already available, then update its content.
this.data = value;

// If the editor element is already available, then update its content.
// If the ngModel is used then the editor element should be updated directly here.
if ( this.editorElement ) {
this.editorElement.innerHTML = this.data;
}
// If not, then wait until it is ready
// and change data only for the first `ready` event.
this.ready
.pipe( first() )
.subscribe( ( editor: CKEditor5.Editor ) => {
editor.setData( this.data );
} );
}
}

Expand Down Expand Up @@ -356,11 +360,17 @@ export class CKEditorComponent implements AfterViewInit, OnDestroy, ControlValue
throw new Error( 'Editor data should be provided either using `config.initialData` or `data` properties.' );
}

const config = { ...this.config };

// Merge two possible ways of providing data into the `config.initialData` field.
return {
...this.config,
initialData: this.config.initialData || this.data || ''
};
const initialData = this.config.initialData || this.data;

if ( initialData ) {
// Define the `config.initialData` only when the initial content is specified.
config.initialData = initialData;
}

return config;
}

/**
Expand Down