This repository has been archived by the owner on Jun 26, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feature: The first implementation of the balloon toolbar editor. Clos…
…es #1.
- Loading branch information
Showing
11 changed files
with
767 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,92 @@ | ||
/** | ||
* @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. | ||
* For licensing, see LICENSE.md. | ||
*/ | ||
|
||
/** | ||
* @module editor-balloon-toolbar/contextual | ||
*/ | ||
|
||
import StandardEditor from '@ckeditor/ckeditor5-core/src/editor/standardeditor'; | ||
import HtmlDataProcessor from '@ckeditor/ckeditor5-engine/src/dataprocessor/htmldataprocessor'; | ||
import ContextualToolbar from '@ckeditor/ckeditor5-ui/src/toolbar/contextual/contextualtoolbar'; | ||
import BalloonToolbarEditorUI from './balloontoolbareditorui'; | ||
import BalloonToolbarEditorUIView from './balloontoolbareditoruiview'; | ||
|
||
import '../theme/theme.scss'; | ||
|
||
/** | ||
* The balloon toolbar editor. Uses an inline editable and a toolbar based | ||
* on the {@link ui/toolbar/contextual/contextualtoolbar~ContextualToolbar}. | ||
* | ||
* @extends module:core/editor/standardeditor~StandardEditor | ||
*/ | ||
export default class BalloonToolbarEditor extends StandardEditor { | ||
/** | ||
* Creates an instance of the balloon toolbar editor. | ||
* | ||
* @param {HTMLElement} element The DOM element that will be the source for the created editor. | ||
* @param {Object} config The editor configuration. | ||
*/ | ||
constructor( element, config ) { | ||
super( element, config ); | ||
|
||
this.config.get( 'plugins' ).push( ContextualToolbar ); | ||
this.config.define( 'contextualToolbar', this.config.get( 'toolbar' ) ); | ||
|
||
this.document.createRoot(); | ||
this.data.processor = new HtmlDataProcessor(); | ||
this.ui = new BalloonToolbarEditorUI( this, new BalloonToolbarEditorUIView( this.locale, element ) ); | ||
} | ||
|
||
/** | ||
* Destroys the editor instance, releasing all resources used by it. | ||
* | ||
* Updates the original editor element with the data. | ||
* | ||
* @returns {Promise} | ||
*/ | ||
destroy() { | ||
this.updateEditorElement(); | ||
|
||
return this.ui.destroy() | ||
.then( () => super.destroy() ); | ||
} | ||
|
||
/** | ||
* Creates an balloon toolbar editor instance. | ||
* | ||
* BalloonToolbarEditor.create( document.querySelector( '#editor' ), { | ||
* plugins: [ Delete, Enter, Typing, Paragraph, Undo, Bold, Italic ], | ||
* toolbar: [ 'bold', 'italic' ] | ||
* } ) | ||
* .then( editor => { | ||
* console.log( 'Editor was initialized', editor ); | ||
* } ) | ||
* .catch( err => { | ||
* console.error( err.stack ); | ||
* } ); | ||
* | ||
* @param {HTMLElement} element See {@link module:editor-balloon-toolbar/contextual~BalloonToolbarEditor#constructor}'s parameters. | ||
* @param {Object} config See {@link module:editor-balloon-toolbar/contextual~BalloonToolbarEditor#constructor}'s parameters. | ||
* @returns {Promise} A promise resolved once the editor is ready. | ||
* @returns {module:core/editor/standardeditor~StandardEditor} return.editor The editor instance. | ||
*/ | ||
static create( element, config ) { | ||
return new Promise( resolve => { | ||
const editor = new this( element, config ); | ||
|
||
resolve( | ||
editor.initPlugins() | ||
.then( () => editor.ui.init() ) | ||
.then( () => editor.fire( 'uiReady' ) ) | ||
.then( () => editor.loadDataFromEditorElement() ) | ||
.then( () => { | ||
editor.fire( 'dataReady' ); | ||
editor.fire( 'ready' ); | ||
} ) | ||
.then( () => editor ) | ||
); | ||
} ); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,86 @@ | ||
/** | ||
* @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. | ||
* For licensing, see LICENSE.md. | ||
*/ | ||
|
||
/** | ||
* @module editor-balloon-toolbar/balloontoolbareditorui | ||
*/ | ||
|
||
import ComponentFactory from '@ckeditor/ckeditor5-ui/src/componentfactory'; | ||
import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker'; | ||
import enableToolbarKeyboardFocus from '@ckeditor/ckeditor5-ui/src/toolbar/enabletoolbarkeyboardfocus'; | ||
|
||
/** | ||
* The balloon toolbar editor UI class. | ||
* | ||
* @implements module:core/editor/editorui~EditorUI | ||
*/ | ||
export default class BalloonToolbarEditorUI { | ||
/** | ||
* Creates an instance of the balloon toolbar editor UI class. | ||
* | ||
* @param {module:core/editor/editor~Editor} editor The editor instance. | ||
* @param {module:ui/editorui/editoruiview~EditorUIView} view View of the ui. | ||
*/ | ||
constructor( editor, view ) { | ||
/** | ||
* @inheritDoc | ||
*/ | ||
this.editor = editor; | ||
|
||
/** | ||
* @inheritDoc | ||
*/ | ||
this.view = view; | ||
|
||
/** | ||
* @inheritDoc | ||
*/ | ||
this.componentFactory = new ComponentFactory( editor ); | ||
|
||
/** | ||
* @inheritDoc | ||
*/ | ||
this.focusTracker = new FocusTracker(); | ||
|
||
// Setup the editable. | ||
const editingRoot = editor.editing.createRoot( view.editableElement ); | ||
view.editable.bind( 'isReadOnly' ).to( editingRoot ); | ||
|
||
// Bind to focusTracker instead of editor.editing.view because otherwise | ||
// focused editable styles disappear when view#toolbar is focused. | ||
view.editable.bind( 'isFocused' ).to( this.focusTracker ); | ||
view.editable.name = editingRoot.rootName; | ||
|
||
this.focusTracker.add( view.editableElement ); | ||
} | ||
|
||
/** | ||
* Initializes the UI. | ||
* | ||
* @returns {Promise} A Promise resolved when the initialization process is finished. | ||
*/ | ||
init() { | ||
const editor = this.editor; | ||
const contextualToolbar = editor.plugins.get( 'ui/contextualtoolbar' ); | ||
|
||
return this.view.init().then( () => { | ||
enableToolbarKeyboardFocus( { | ||
origin: editor.editing.view, | ||
originFocusTracker: this.focusTracker, | ||
originKeystrokeHandler: editor.keystrokes, | ||
toolbar: contextualToolbar.toolbarView | ||
} ); | ||
} ); | ||
} | ||
|
||
/** | ||
* Destroys the UI. | ||
* | ||
* @returns {Promise} A Promise resolved when the destruction process is finished. | ||
*/ | ||
destroy() { | ||
return this.view.destroy(); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
/** | ||
* @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. | ||
* For licensing, see LICENSE.md. | ||
*/ | ||
|
||
/** | ||
* @module editor-balloon-toolbar/balloontoolbareditoruiview | ||
*/ | ||
|
||
import EditorUIView from '@ckeditor/ckeditor5-ui/src/editorui/editoruiview'; | ||
import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/inlineeditableuiview'; | ||
|
||
/** | ||
* Contextual editor UI view. Uses the {@link module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView}. | ||
* | ||
* @extends module:ui/editorui/editoruiview~EditorUIView | ||
*/ | ||
export default class BalloonToolbarEditorUIView extends EditorUIView { | ||
/** | ||
* Creates an instance of the balloon toolbar editor UI view. | ||
* | ||
* @param {module:utils/locale~Locale} locale The {@link module:core/editor/editor~Editor#locale} instance. | ||
*/ | ||
constructor( locale, editableElement ) { | ||
super( locale ); | ||
|
||
/** | ||
* The editable UI view. | ||
* | ||
* @readonly | ||
* @member {module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView} | ||
*/ | ||
this.editable = new InlineEditableUIView( locale, editableElement ); | ||
|
||
this.addChildren( this.editable ); | ||
} | ||
|
||
/** | ||
* @inheritDoc | ||
*/ | ||
get editableElement() { | ||
return this.editable.element; | ||
} | ||
} |
Oops, something went wrong.