Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@ckeditor/ckeditor5-editor-decoupled
Advanced tools
@ckeditor/ckeditor5-editor-decoupled - npm Package Compare versions
Comparing version 1.0.0-beta.1 to 1.0.0-beta.2
| Changelog | ||
| ========= | ||
| ## [1.0.0-beta.2](https://github.com/ckeditor/ckeditor5-editor-decoupled/compare/v1.0.0-beta.1...v1.0.0-beta.2) (2018-04-10) | ||
| ### Other changes | ||
| * Allowed the editable element to be passed into `DecoupledEditor.create()`. Removed `config.toolbarContainer` and `config.editableContainer`. Closes [#10](https://github.com/ckeditor/ckeditor5-editor-decoupled/issues/10). Closes [ckeditor/ckeditor5#912](https://github.com/ckeditor/ckeditor5/issues/912). ([327b2ed](https://github.com/ckeditor/ckeditor5-editor-decoupled/commit/327b2ed)) | ||
| ### BREAKING CHANGES | ||
| * The config options `config.toolbarContainer` and `config.editableContainer` have been removed. Please refer to the `DecoupledEditor` class API documentation to learn about possible methods of bootstrapping the UI. | ||
| ## 1.0.0-beta.1 (2018-03-15) | ||
@@ -5,0 +16,0 @@ |
| { | ||
| "name": "@ckeditor/ckeditor5-editor-decoupled", | ||
| "version": "1.0.0-beta.1", | ||
| "version": "1.0.0-beta.2", | ||
| "description": "Decoupled editor implementation for CKEditor 5.", | ||
@@ -10,19 +10,19 @@ "keywords": [ | ||
| "dependencies": { | ||
| "@ckeditor/ckeditor5-core": "^1.0.0-beta.1", | ||
| "@ckeditor/ckeditor5-engine": "^1.0.0-beta.1", | ||
| "@ckeditor/ckeditor5-theme-lark": "^1.0.0-beta.1", | ||
| "@ckeditor/ckeditor5-ui": "^1.0.0-beta.1", | ||
| "@ckeditor/ckeditor5-utils": "^1.0.0-beta.1" | ||
| "@ckeditor/ckeditor5-core": "^1.0.0-beta.2", | ||
| "@ckeditor/ckeditor5-engine": "^1.0.0-beta.2", | ||
| "@ckeditor/ckeditor5-theme-lark": "^1.0.0-beta.2", | ||
| "@ckeditor/ckeditor5-ui": "^1.0.0-beta.2", | ||
| "@ckeditor/ckeditor5-utils": "^1.0.0-beta.2" | ||
| }, | ||
| "devDependencies": { | ||
| "@ckeditor/ckeditor5-basic-styles": "^1.0.0-beta.1", | ||
| "@ckeditor/ckeditor5-enter": "^1.0.0-beta.1", | ||
| "@ckeditor/ckeditor5-heading": "^1.0.0-beta.1", | ||
| "@ckeditor/ckeditor5-paragraph": "^1.0.0-beta.1", | ||
| "@ckeditor/ckeditor5-typing": "^1.0.0-beta.1", | ||
| "@ckeditor/ckeditor5-undo": "^1.0.0-beta.1", | ||
| "@ckeditor/ckeditor5-basic-styles": "^1.0.0-beta.2", | ||
| "@ckeditor/ckeditor5-enter": "^1.0.0-beta.2", | ||
| "@ckeditor/ckeditor5-heading": "^1.0.0-beta.2", | ||
| "@ckeditor/ckeditor5-paragraph": "^1.0.0-beta.2", | ||
| "@ckeditor/ckeditor5-typing": "^1.0.0-beta.2", | ||
| "@ckeditor/ckeditor5-undo": "^1.0.0-beta.2", | ||
| "eslint": "^4.15.0", | ||
| "eslint-config-ckeditor5": "^1.0.7", | ||
| "husky": "^0.14.3", | ||
| "lint-staged": "^6.0.0" | ||
| "lint-staged": "^7.0.0" | ||
| }, | ||
@@ -35,3 +35,3 @@ "engines": { | ||
| "license": "(GPL-2.0 OR LGPL-2.1 OR MPL-1.1)", | ||
| "homepage": "https://ckeditor5.github.io", | ||
| "homepage": "https://ckeditor.com", | ||
| "bugs": "https://github.com/ckeditor/ckeditor5-editor-decoupled/issues", | ||
@@ -38,0 +38,0 @@ "repository": { |
@@ -15,9 +15,9 @@ CKEditor 5 decoupled editor implementation | ||
| This package contains the [`DecoupledEditor`](https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/api/module_editor-decoupled_decouplededitor-DecoupledEditor.html) class. Follow there to learn more about this type of editor and how to initialize it. | ||
| This package contains the [`DecoupledEditor`](https://docs.ckeditor.com/ckeditor5/latest/api/module_editor-decoupled_decouplededitor-DecoupledEditor.html) class. Follow there to learn more about this type of editor and how to initialize it. | ||
| This package contains the source version of the decoupled editor. This editor implementation is also available in the [document build](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-decoupled-document). Read more about [CKEditor 5 Builds](https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/builds/index.html). | ||
| This package contains the source version of the decoupled editor. This editor implementation is also available in the [document build](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-decoupled-document). Read more about [CKEditor 5 Builds](https://docs.ckeditor.com/ckeditor5/latest/builds/index.html). | ||
| ## Documentation | ||
| See the [`@ckeditor/ckeditor5-editor-decoupled` package](https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/api/editor-decoupled.html) page in [CKEditor 5 documentation](https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/). | ||
| See the [`@ckeditor/ckeditor5-editor-decoupled` package](https://docs.ckeditor.com/ckeditor5/latest/api/editor-decoupled.html) page in [CKEditor 5 documentation](https://docs.ckeditor.com/ckeditor5/latest/). | ||
@@ -24,0 +24,0 @@ ## License |
@@ -15,3 +15,6 @@ /** | ||
| import DecoupledEditorUIView from './decouplededitoruiview'; | ||
| import getDataFromElement from '@ckeditor/ckeditor5-utils/src/dom/getdatafromelement'; | ||
| import setDataInElement from '@ckeditor/ckeditor5-utils/src/dom/setdatainelement'; | ||
| import mix from '@ckeditor/ckeditor5-utils/src/mix'; | ||
| import isElement from '@ckeditor/ckeditor5-utils/src/lib/lodash/isElement'; | ||
@@ -21,5 +24,5 @@ /** | ||
| * It provides an inline editable and a toolbar. However, unlike other editors, | ||
| * it does not render these components anywhere in DOM unless configured. | ||
| * it does not render these components anywhere in the DOM unless configured. | ||
| * | ||
| * This type of an editor is dedicated for integrations which require a customized UI with an open | ||
| * This type of an editor is dedicated to integrations which require a customized UI with an open | ||
| * structure, allowing developers to specify the exact location of the interface. | ||
@@ -33,7 +36,7 @@ * | ||
| * | ||
| * # Decoupled editor and document build | ||
| * # Decoupled editor and document editor build | ||
| * | ||
| * The decoupled editor can be used directly from source (if you installed the | ||
| * [`@ckeditor/ckeditor5-editor-decoupled`](https://www.npmjs.com/package/@ckeditor/ckeditor5-editor-decoupled) package) | ||
| * but it is also available in the {@glink builds/guides/overview#document-editor document build}. | ||
| * but it is also available in the {@glink builds/guides/overview#document-editor document editor build}. | ||
| * | ||
@@ -43,3 +46,3 @@ * {@glink builds/guides/overview Builds} are ready-to-use editors with plugins bundled in. When using the editor from | ||
| * (through the {@link module:core/editor/editorconfig~EditorConfig#plugins `config.plugins`} option). | ||
| * Using the editor from source gives much better flexibility and allows easier customization. | ||
| * Using the editor from source gives much better flexibility and allows for easier customization. | ||
| * | ||
@@ -57,12 +60,28 @@ * Read more about initializing the editor from source or as a build in | ||
| * | ||
| * **Note:** do not use the constructor to create editor instances. Use the static | ||
| * **Note:** Do not use the constructor to create editor instances. Use the static | ||
| * {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`} method instead. | ||
| * | ||
| * @protected | ||
| * @param {String} data The data to be loaded into the editor. | ||
| * @param {HTMLElement|String} elementOrData The DOM element that serves as an editable. | ||
| * The data will be loaded from it and loaded back to it once the editor is destroyed. | ||
| * Alternatively, a data string to be loaded into the editor. | ||
| * @param {module:core/editor/editorconfig~EditorConfig} config The editor configuration. | ||
| */ | ||
| constructor( config ) { | ||
| constructor( elementOrData, config ) { | ||
| super( config ); | ||
| if ( isElement( elementOrData ) ) { | ||
| /** | ||
| * The element used as an editable. The data will be loaded from it and loaded back to | ||
| * it once the editor is destroyed. | ||
| * | ||
| * **Note:** The property is available only when such element has been passed | ||
| * to the {@link #constructor}. | ||
| * | ||
| * @readonly | ||
| * @member {HTMLElement} | ||
| */ | ||
| this.element = elementOrData; | ||
| } | ||
| this.data.processor = new HtmlDataProcessor(); | ||
@@ -72,3 +91,3 @@ | ||
| this.ui = new DecoupledEditorUI( this, new DecoupledEditorUIView( this.locale ) ); | ||
| this.ui = new DecoupledEditorUI( this, new DecoupledEditorUIView( this.locale, this.element ) ); | ||
| } | ||
@@ -79,8 +98,31 @@ | ||
| * | ||
| * **Note**: The decoupled editor does not remove the toolbar and editable when destroyed. You can | ||
| * do that yourself in the destruction chain: | ||
| * | ||
| * editor.destroy() | ||
| * .then( () => { | ||
| * // Remove the toolbar from DOM. | ||
| * editor.ui.view.toolbar.element.remove(); | ||
| * | ||
| * // Remove the editable from DOM. | ||
| * editor.ui.view.editable.element.remove(); | ||
| * | ||
| * console.log( 'Editor was destroyed' ); | ||
| * } ); | ||
| * | ||
| * @returns {Promise} | ||
| */ | ||
| destroy() { | ||
| // Cache the data, then destroy. | ||
| // It's safe to assume that the model->view conversion will not work after super.destroy(). | ||
| const data = this.getData(); | ||
| this.ui.destroy(); | ||
| return super.destroy(); | ||
| return super.destroy() | ||
| .then( () => { | ||
| if ( this.element ) { | ||
| setDataInElement( this.element, data ); | ||
| } | ||
| } ); | ||
| } | ||
@@ -91,13 +133,10 @@ | ||
| * | ||
| * Creating instance when using the {@glink builds/index CKEditor build}: | ||
| * Creating an instance when using the {@glink builds/index CKEditor 5 build}: | ||
| * | ||
| * DecoupledEditor | ||
| * .create( '<p>Editor data</p>', { | ||
| * // The location of the toolbar in DOM. | ||
| * toolbarContainer: document.querySelector( 'body div.toolbar-container' ), | ||
| * .create( document.querySelector( '#editor' ) ) | ||
| * .then( editor => { | ||
| * // Append the toolbar to the <body> element. | ||
| * document.body.appendChild( editor.ui.view.toolbar.element ); | ||
| * | ||
| * // The location of the editable in DOM. | ||
| * editableContainer: document.querySelector( 'body div.editable-container' ) | ||
| * } ) | ||
| * .then( editor => { | ||
| * console.log( 'Editor was initialized', editor ); | ||
@@ -109,3 +148,3 @@ * } ) | ||
| * | ||
| * Creating instance when using CKEditor from source (make sure to specify the list of plugins to load and the toolbar): | ||
| * Creating an instance when using CKEditor from source (make sure to specify the list of plugins to load and the toolbar): | ||
| * | ||
@@ -119,13 +158,10 @@ * import DecoupledEditor from '@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor'; | ||
| * DecoupledEditor | ||
| * .create( '<p>Editor data</p>', { | ||
| * .create( document.querySelector( '#editor' ), { | ||
| * plugins: [ Essentials, Bold, Italic, ... ], | ||
| * toolbar: [ 'bold', 'italic', ... ], | ||
| * | ||
| * // The location of the toolbar in DOM. | ||
| * toolbarContainer: document.querySelector( 'div.toolbar-container' ), | ||
| * | ||
| * // The location of the editable in DOM. | ||
| * editableContainer: document.querySelector( 'div.editable-container' ) | ||
| * toolbar: [ 'bold', 'italic', ... ] | ||
| * } ) | ||
| * .then( editor => { | ||
| * // Append the toolbar to the <body> element. | ||
| * document.body.appendChild( editor.ui.view.toolbar.element ); | ||
| * | ||
| * console.log( 'Editor was initialized', editor ); | ||
@@ -137,5 +173,4 @@ * } ) | ||
| * | ||
| * **Note**: {@link module:core/editor/editorconfig~EditorConfig#toolbarContainer `config.toolbarContainer`} and | ||
| * {@link module:core/editor/editorconfig~EditorConfig#editableContainer `config.editableContainer`} are optional. It is | ||
| * possible to define the location of the UI elements manually once the editor is up and running: | ||
| * **Note**: It is possible to create the editor out of a pure data string. The editor will then render | ||
| * an editable element that must be inserted into the DOM for the editor to work properly: | ||
| * | ||
@@ -145,7 +180,9 @@ * DecoupledEditor | ||
| * .then( editor => { | ||
| * console.log( 'Editor was initialized', editor ); | ||
| * // Append the toolbar to the <body> element. | ||
| * document.body.appendChild( editor.ui.view.toolbar.element ); | ||
| * | ||
| * // Append the toolbar and editable straight into the <body> element. | ||
| * document.body.appendChild( editor.ui.view.toolbar.element ); | ||
| * // Append the editable to the <body> element. | ||
| * document.body.appendChild( editor.ui.view.editable.element ); | ||
| * | ||
| * console.log( 'Editor was initialized', editor ); | ||
| * } ) | ||
@@ -156,3 +193,5 @@ * .catch( err => { | ||
| * | ||
| * @param {String} data The data to be loaded into the editor. | ||
| * @param {HTMLElement|String} elementOrData The DOM element that serves as an editable. | ||
| * The data will be loaded from it and loaded back to it once the editor is destroyed. | ||
| * Alternatively, a data string to be loaded into the editor. | ||
| * @param {module:core/editor/editorconfig~EditorConfig} config The editor configuration. | ||
@@ -162,5 +201,5 @@ * @returns {Promise} A promise resolved once the editor is ready. | ||
| */ | ||
| static create( data, config ) { | ||
| static create( elementOrData, config ) { | ||
| return new Promise( resolve => { | ||
| const editor = new this( config ); | ||
| const editor = new this( elementOrData, config ); | ||
@@ -173,5 +212,6 @@ resolve( | ||
| } ) | ||
| .then( () => editor.editing.view.attachDomRoot( editor.ui.view.editableElement ) ) | ||
| .then( () => editor.data.init( data ) ) | ||
| .then( () => { | ||
| editor.data.init( editor.element ? getDataFromElement( editor.element ) : elementOrData ); | ||
| } ) | ||
| .then( () => { | ||
| editor.fire( 'dataReady' ); | ||
@@ -187,49 +227,1 @@ editor.fire( 'ready' ); | ||
| mix( DecoupledEditor, DataApiMixin ); | ||
| /** | ||
| * A configuration of the {@link module:editor-decoupled/decouplededitor~DecoupledEditor}. | ||
| * | ||
| * When specified, it controls the location of the {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#toolbar}: | ||
| * | ||
| * DecoupledEditor | ||
| * .create( '<p>Hello world!</p>', { | ||
| * // Append the toolbar to the <body> element. | ||
| * toolbarContainer: document.body | ||
| * } ) | ||
| * .then( editor => { | ||
| * console.log( editor ); | ||
| * } ) | ||
| * .catch( error => { | ||
| * console.error( error ); | ||
| * } ); | ||
| * | ||
| * **Note**: If not specified, the toolbar must be manually injected into DOM. See | ||
| * {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`} | ||
| * to learn more. | ||
| * | ||
| * @member {HTMLElement} module:core/editor/editorconfig~EditorConfig#toolbarContainer | ||
| */ | ||
| /** | ||
| * A configuration of the {@link module:editor-decoupled/decouplededitor~DecoupledEditor}. | ||
| * | ||
| * When specified, it controls the location of the {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#editable}: | ||
| * | ||
| * DecoupledEditor | ||
| * .create( '<p>Hello world!</p>', { | ||
| * // Append the editable to the <body> element. | ||
| * editableContainer: document.body | ||
| * } ) | ||
| * .then( editor => { | ||
| * console.log( editor ); | ||
| * } ) | ||
| * .catch( error => { | ||
| * console.error( error ); | ||
| * } ); | ||
| * | ||
| * **Note**: If not specified, the editable must be manually injected into DOM. See | ||
| * {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`} | ||
| * to learn more. | ||
| * | ||
| * @member {HTMLElement} module:core/editor/editorconfig~EditorConfig#editableContainer | ||
| */ |
@@ -55,18 +55,2 @@ /** | ||
| this._toolbarConfig = normalizeToolbarConfig( editor.config.get( 'toolbar' ) ); | ||
| /** | ||
| * A container of the {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#toolbar}. | ||
| * | ||
| * @type {HTMLElement|String} | ||
| * @private | ||
| */ | ||
| this._toolbarContainer = editor.config.get( 'toolbarContainer' ); | ||
| /** | ||
| * A container of the {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#editable}. | ||
| * | ||
| * @type {HTMLElement|String} | ||
| * @private | ||
| */ | ||
| this._editableContainer = editor.config.get( 'editableContainer' ); | ||
| } | ||
@@ -83,6 +67,7 @@ | ||
| // Setup the editable. | ||
| // Set up the editable. | ||
| const editingRoot = editor.editing.view.document.getRoot(); | ||
| view.editable.bind( 'isReadOnly' ).to( editingRoot ); | ||
| view.editable.bind( 'isFocused' ).to( editor.editing.view.document ); | ||
| editor.editing.view.attachDomRoot( view.editableElement ); | ||
| view.editable.name = editingRoot.rootName; | ||
@@ -93,10 +78,2 @@ | ||
| if ( this._toolbarContainer ) { | ||
| this._toolbarContainer.appendChild( view.toolbar.element ); | ||
| } | ||
| if ( this._editableContainer ) { | ||
| this._editableContainer.appendChild( view.editable.element ); | ||
| } | ||
| enableToolbarKeyboardFocus( { | ||
@@ -114,4 +91,4 @@ origin: editor.editing.view, | ||
| destroy() { | ||
| this.view.destroy( !!this._toolbarContainer, !!this._editableContainer ); | ||
| this.view.destroy(); | ||
| } | ||
| } |
@@ -16,10 +16,9 @@ /** | ||
| /** | ||
| * The decoupled editor UI view. It's a virtual view providing an inline | ||
| * The decoupled editor UI view. It is a virtual view providing an inline | ||
| * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#editable} and a | ||
| * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#toolbar}, but without any | ||
| * specific arrangement of the components in DOM. | ||
| * specific arrangement of the components in the DOM. | ||
| * | ||
| * See {@link module:core/editor/editorconfig~EditorConfig#toolbarContainer `config.toolbarContainer`} and | ||
| * {@link module:core/editor/editorconfig~EditorConfig#editableContainer `config.editableContainer`} to | ||
| * learn more about the UI of a decoupled editor. | ||
| * See {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`} | ||
| * to learn more about this view. | ||
| * | ||
@@ -33,4 +32,5 @@ * @extends module:ui/editorui/editoruiview~EditorUIView | ||
| * @param {module:utils/locale~Locale} locale The {@link module:core/editor/editor~Editor#locale} instance. | ||
| * @param {HTMLElement} [editableElement] The DOM element to be used as editable. | ||
| */ | ||
| constructor( locale ) { | ||
| constructor( locale, editableElement ) { | ||
| super( locale ); | ||
@@ -52,34 +52,19 @@ | ||
| */ | ||
| this.editable = new InlineEditableUIView( locale ); | ||
| this.editable = new InlineEditableUIView( locale, editableElement ); | ||
| // This toolbar may be placed anywhere in the page so things like font-size needs to be reset in it. | ||
| // This toolbar may be placed anywhere in the page so things like font size need to be reset in it. | ||
| // Also because of the above, make sure the toolbar supports rounded corners. | ||
| Template.extend( this.toolbar.template, { | ||
| attributes: { | ||
| class: 'ck-reset_all' | ||
| class: [ | ||
| 'ck-reset_all', | ||
| 'ck-rounded-corners' | ||
| ] | ||
| } | ||
| } ); | ||
| this.registerChildren( [ this.toolbar, this.editable ] ); | ||
| this.registerChild( [ this.toolbar, this.editable ] ); | ||
| } | ||
| /** | ||
| * Destroys the view and removes {@link #toolbar} and {@link #editable} | ||
| * {@link module:ui/view~View#element `element`} from DOM, if required. | ||
| * | ||
| * @param {Boolean} [removeToolbar] When `true`, remove the {@link #toolbar} element from DOM. | ||
| * @param {Boolean} [removeEditable] When `true`, remove the {@link #editable} element from DOM. | ||
| */ | ||
| destroy( removeToolbar, removeEditable ) { | ||
| super.destroy(); | ||
| if ( removeToolbar ) { | ||
| this.toolbar.element.remove(); | ||
| } | ||
| if ( removeEditable ) { | ||
| this.editable.element.remove(); | ||
| } | ||
| } | ||
| /** | ||
| * @inheritDoc | ||
@@ -86,0 +71,0 @@ */ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of downloads
- increased by11.23%
248923
Worsened metrics
- Total package byte prevSize
- decreased by-3.17%
19541
- Lines of code
- decreased by-10.32%
339