X-Git-Url: https://git.immae.eu/?p=perso%2FImmae%2FProjets%2Fpackagist%2Fpiedsjaloux-ckeditor-component.git;a=blobdiff_plain;f=sources%2Fplugins%2Fwidget%2Fplugin.js;fp=sources%2Fplugins%2Fwidget%2Fplugin.js;h=2708e090856c97b5254039385330a0112b67603d;hp=0000000000000000000000000000000000000000;hb=317f8f8f0651488f226b5280a8f036c7c135c639;hpb=1096cdefb1c9a3f3c4ca6807e272da6c92e5ed9c diff --git a/sources/plugins/widget/plugin.js b/sources/plugins/widget/plugin.js new file mode 100644 index 0000000..2708e09 --- /dev/null +++ b/sources/plugins/widget/plugin.js @@ -0,0 +1,4147 @@ +/** + * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md or http://ckeditor.com/license + */ + +/** + * @fileOverview [Widget](http://ckeditor.com/addon/widget) plugin. + */ + +'use strict'; + +( function() { + var DRAG_HANDLER_SIZE = 15; + + CKEDITOR.plugins.add( 'widget', { + // jscs:disable maximumLineLength + lang: 'af,ar,az,bg,ca,cs,cy,da,de,de-ch,el,en,en-gb,eo,es,es-mx,eu,fa,fi,fr,gl,he,hr,hu,id,it,ja,km,ko,ku,lv,nb,nl,no,oc,pl,pt,pt-br,ru,sk,sl,sq,sv,tr,tt,ug,uk,vi,zh,zh-cn', // %REMOVE_LINE_CORE% + // jscs:enable maximumLineLength + requires: 'lineutils,clipboard,widgetselection', + onLoad: function() { + CKEDITOR.addCss( + '.cke_widget_wrapper{' + + 'position:relative;' + + 'outline:none' + + '}' + + '.cke_widget_inline{' + + 'display:inline-block' + + '}' + + '.cke_widget_wrapper:hover>.cke_widget_element{' + + 'outline:2px solid yellow;' + + 'cursor:default' + + '}' + + '.cke_widget_wrapper:hover .cke_widget_editable{' + + 'outline:2px solid yellow' + + '}' + + '.cke_widget_wrapper.cke_widget_focused>.cke_widget_element,' + + // We need higher specificity than hover style. + '.cke_widget_wrapper .cke_widget_editable.cke_widget_editable_focused{' + + 'outline:2px solid #ace' + + '}' + + '.cke_widget_editable{' + + 'cursor:text' + + '}' + + '.cke_widget_drag_handler_container{' + + 'position:absolute;' + + 'width:' + DRAG_HANDLER_SIZE + 'px;' + + 'height:0;' + + // Initially drag handler should not be visible, until its position will be + // calculated (http://dev.ckeditor.com/ticket/11177). + // We need to hide unpositined handlers, so they don't extend + // widget's outline far to the left (http://dev.ckeditor.com/ticket/12024). + 'display:none;' + + 'opacity:0.75;' + + 'transition:height 0s 0.2s;' + // Delay hiding drag handler. + // Prevent drag handler from being misplaced (http://dev.ckeditor.com/ticket/11198). + 'line-height:0' + + '}' + + '.cke_widget_wrapper:hover>.cke_widget_drag_handler_container{' + + 'height:' + DRAG_HANDLER_SIZE + 'px;' + + 'transition:none' + + '}' + + '.cke_widget_drag_handler_container:hover{' + + 'opacity:1' + + '}' + + 'img.cke_widget_drag_handler{' + + 'cursor:move;' + + 'width:' + DRAG_HANDLER_SIZE + 'px;' + + 'height:' + DRAG_HANDLER_SIZE + 'px;' + + 'display:inline-block' + + '}' + + '.cke_widget_mask{' + + 'position:absolute;' + + 'top:0;' + + 'left:0;' + + 'width:100%;' + + 'height:100%;' + + 'display:block' + + '}' + + '.cke_editable.cke_widget_dragging, .cke_editable.cke_widget_dragging *{' + + 'cursor:move !important' + + '}' + ); + }, + + beforeInit: function( editor ) { + /** + * An instance of widget repository. It contains all + * {@link CKEDITOR.plugins.widget.repository#registered registered widget definitions} and + * {@link CKEDITOR.plugins.widget.repository#instances initialized instances}. + * + * editor.widgets.add( 'someName', { + * // Widget definition... + * } ); + * + * editor.widgets.registered.someName; // -> Widget definition + * + * @since 4.3 + * @readonly + * @property {CKEDITOR.plugins.widget.repository} widgets + * @member CKEDITOR.editor + */ + editor.widgets = new Repository( editor ); + }, + + afterInit: function( editor ) { + addWidgetButtons( editor ); + setupContextMenu( editor ); + } + } ); + + /** + * Widget repository. It keeps track of all {@link #registered registered widget definitions} and + * {@link #instances initialized instances}. An instance of the repository is available under + * the {@link CKEDITOR.editor#widgets} property. + * + * @class CKEDITOR.plugins.widget.repository + * @mixins CKEDITOR.event + * @constructor Creates a widget repository instance. Note that the widget plugin automatically + * creates a repository instance which is available under the {@link CKEDITOR.editor#widgets} property. + * @param {CKEDITOR.editor} editor The editor instance for which the repository will be created. + */ + function Repository( editor ) { + /** + * The editor instance for which this repository was created. + * + * @readonly + * @property {CKEDITOR.editor} editor + */ + this.editor = editor; + + /** + * A hash of registered widget definitions (definition name => {@link CKEDITOR.plugins.widget.definition}). + * + * To register a definition use the {@link #add} method. + * + * @readonly + */ + this.registered = {}; + + /** + * An object containing initialized widget instances (widget id => {@link CKEDITOR.plugins.widget}). + * + * @readonly + */ + this.instances = {}; + + /** + * An array of selected widget instances. + * + * @readonly + * @property {CKEDITOR.plugins.widget[]} selected + */ + this.selected = []; + + /** + * The focused widget instance. See also {@link CKEDITOR.plugins.widget#event-focus} + * and {@link CKEDITOR.plugins.widget#event-blur} events. + * + * editor.on( 'selectionChange', function() { + * if ( editor.widgets.focused ) { + * // Do something when a widget is focused... + * } + * } ); + * + * @readonly + * @property {CKEDITOR.plugins.widget} focused + */ + this.focused = null; + + /** + * The widget instance that contains the nested editable which is currently focused. + * + * @readonly + * @property {CKEDITOR.plugins.widget} widgetHoldingFocusedEditable + */ + this.widgetHoldingFocusedEditable = null; + + this._ = { + nextId: 0, + upcasts: [], + upcastCallbacks: [], + filters: {} + }; + + setupWidgetsLifecycle( this ); + setupSelectionObserver( this ); + setupMouseObserver( this ); + setupKeyboardObserver( this ); + setupDragAndDrop( this ); + setupNativeCutAndCopy( this ); + } + + Repository.prototype = { + /** + * Minimum interval between selection checks. + * + * @private + */ + MIN_SELECTION_CHECK_INTERVAL: 500, + + /** + * Adds a widget definition to the repository. Fires the {@link CKEDITOR.editor#widgetDefinition} event + * which allows to modify the widget definition which is going to be registered. + * + * @param {String} name The name of the widget definition. + * @param {CKEDITOR.plugins.widget.definition} widgetDef Widget definition. + * @returns {CKEDITOR.plugins.widget.definition} + */ + add: function( name, widgetDef ) { + // Create prototyped copy of original widget definition, so we won't modify it. + widgetDef = CKEDITOR.tools.prototypedCopy( widgetDef ); + widgetDef.name = name; + + widgetDef._ = widgetDef._ || {}; + + this.editor.fire( 'widgetDefinition', widgetDef ); + + if ( widgetDef.template ) + widgetDef.template = new CKEDITOR.template( widgetDef.template ); + + addWidgetCommand( this.editor, widgetDef ); + addWidgetProcessors( this, widgetDef ); + + this.registered[ name ] = widgetDef; + + return widgetDef; + }, + + /** + * Adds a callback for element upcasting. Each callback will be executed + * for every element which is later tested by upcast methods. If a callback + * returns `false`, the element will not be upcasted. + * + * // Images with the "banner" class will not be upcasted (e.g. to the image widget). + * editor.widgets.addUpcastCallback( function( element ) { + * if ( element.name == 'img' && element.hasClass( 'banner' ) ) + * return false; + * } ); + * + * @param {Function} callback + * @param {CKEDITOR.htmlParser.element} callback.element + */ + addUpcastCallback: function( callback ) { + this._.upcastCallbacks.push( callback ); + }, + + /** + * Checks the selection to update widget states (selection and focus). + * + * This method is triggered by the {@link #event-checkSelection} event. + */ + checkSelection: function() { + var sel = this.editor.getSelection(), + selectedElement = sel.getSelectedElement(), + updater = stateUpdater( this ), + widget; + + // Widget is focused so commit and finish checking. + if ( selectedElement && ( widget = this.getByElement( selectedElement, true ) ) ) + return updater.focus( widget ).select( widget ).commit(); + + var range = sel.getRanges()[ 0 ]; + + // No ranges or collapsed range mean that nothing is selected, so commit and finish checking. + if ( !range || range.collapsed ) + return updater.commit(); + + // Range is not empty, so create walker checking for wrappers. + var walker = new CKEDITOR.dom.walker( range ), + wrapper; + + walker.evaluator = Widget.isDomWidgetWrapper; + + while ( ( wrapper = walker.next() ) ) + updater.select( this.getByElement( wrapper ) ); + + updater.commit(); + }, + + /** + * Checks if all widget instances are still present in the DOM. + * Destroys those instances that are not present. + * Reinitializes widgets on widget wrappers for which widget instances + * cannot be found. Takes nested widgets into account, too. + * + * This method triggers the {@link #event-checkWidgets} event whose listeners + * can cancel the method's execution or modify its options. + * + * @param [options] The options object. + * @param {Boolean} [options.initOnlyNew] Initializes widgets only on newly wrapped + * widget elements (those which still have the `cke_widget_new` class). When this option is + * set to `true`, widgets which were invalidated (e.g. by replacing with a cloned DOM structure) + * will not be reinitialized. This makes the check faster. + * @param {Boolean} [options.focusInited] If only one widget is initialized by + * the method, it will be focused. + */ + checkWidgets: function( options ) { + this.fire( 'checkWidgets', CKEDITOR.tools.copy( options || {} ) ); + }, + + /** + * Removes the widget from the editor and moves the selection to the closest + * editable position if the widget was focused before. + * + * @param {CKEDITOR.plugins.widget} widget The widget instance to be deleted. + */ + del: function( widget ) { + if ( this.focused === widget ) { + var editor = widget.editor, + range = editor.createRange(), + found; + + // If haven't found place for caret on the default side, + // try to find it on the other side. + if ( !( found = range.moveToClosestEditablePosition( widget.wrapper, true ) ) ) + found = range.moveToClosestEditablePosition( widget.wrapper, false ); + + if ( found ) + editor.getSelection().selectRanges( [ range ] ); + } + + widget.wrapper.remove(); + this.destroy( widget, true ); + }, + + /** + * Destroys the widget instance and all its nested widgets (widgets inside its nested editables). + * + * @param {CKEDITOR.plugins.widget} widget The widget instance to be destroyed. + * @param {Boolean} [offline] Whether the widget is offline (detached from the DOM tree) — + * in this case the DOM (attributes, classes, etc.) will not be cleaned up. + */ + destroy: function( widget, offline ) { + if ( this.widgetHoldingFocusedEditable === widget ) + setFocusedEditable( this, widget, null, offline ); + + widget.destroy( offline ); + delete this.instances[ widget.id ]; + this.fire( 'instanceDestroyed', widget ); + }, + + /** + * Destroys all widget instances. + * + * @param {Boolean} [offline] Whether the widgets are offline (detached from the DOM tree) — + * in this case the DOM (attributes, classes, etc.) will not be cleaned up. + * @param {CKEDITOR.dom.element} [container] The container within widgets will be destroyed. + * This option will be ignored if the `offline` flag was set to `true`, because in such case + * it is not possible to find widgets within the passed block. + */ + destroyAll: function( offline, container ) { + var widget, + id, + instances = this.instances; + + if ( container && !offline ) { + var wrappers = container.find( '.cke_widget_wrapper' ), + l = wrappers.count(), + i = 0; + + // Length is constant, because this is not a live node list. + // Note: since querySelectorAll returns nodes in document order, + // outer widgets are always placed before their nested widgets and therefore + // are destroyed before them. + for ( ; i < l; ++i ) { + widget = this.getByElement( wrappers.getItem( i ), true ); + // Widget might not be found, because it could be a nested widget, + // which would be destroyed when destroying its parent. + if ( widget ) + this.destroy( widget ); + } + + return; + } + + for ( id in instances ) { + widget = instances[ id ]; + this.destroy( widget, offline ); + } + }, + + /** + * Finalizes a process of widget creation. This includes: + * + * * inserting widget element into editor, + * * marking widget instance as ready (see {@link CKEDITOR.plugins.widget#event-ready}), + * * focusing widget instance. + * + * This method is used by the default widget's command and is called + * after widget's dialog (if set) is closed. It may also be used in a + * customized process of widget creation and insertion. + * + * widget.once( 'edit', function() { + * // Finalize creation only of not ready widgets. + * if ( widget.isReady() ) + * return; + * + * // Cancel edit event to prevent automatic widget insertion. + * evt.cancel(); + * + * CustomDialog.open( widget.data, function saveCallback( savedData ) { + * // Cache the container, because widget may be destroyed while saving data, + * // if this process will require some deep transformations. + * var container = widget.wrapper.getParent(); + * + * widget.setData( savedData ); + * + * // Widget will be retrieved from container and inserted into editor. + * editor.widgets.finalizeCreation( container ); + * } ); + * } ); + * + * @param {CKEDITOR.dom.element/CKEDITOR.dom.documentFragment} container The element + * or document fragment which contains widget wrapper. The container is used, so before + * finalizing creation the widget can be freely transformed (even destroyed and reinitialized). + */ + finalizeCreation: function( container ) { + var wrapper = container.getFirst(); + if ( wrapper && Widget.isDomWidgetWrapper( wrapper ) ) { + this.editor.insertElement( wrapper ); + + var widget = this.getByElement( wrapper ); + // Fire postponed #ready event. + widget.ready = true; + widget.fire( 'ready' ); + widget.focus(); + } + }, + + /** + * Finds a widget instance which contains a given element. The element will be the {@link CKEDITOR.plugins.widget#wrapper wrapper} + * of the returned widget or a descendant of this {@link CKEDITOR.plugins.widget#wrapper wrapper}. + * + * editor.widgets.getByElement( someWidget.wrapper ); // -> someWidget + * editor.widgets.getByElement( someWidget.parts.caption ); // -> someWidget + * + * // Check wrapper only: + * editor.widgets.getByElement( someWidget.wrapper, true ); // -> someWidget + * editor.widgets.getByElement( someWidget.parts.caption, true ); // -> null + * + * @param {CKEDITOR.dom.element} element The element to be checked. + * @param {Boolean} [checkWrapperOnly] If set to `true`, the method will not check wrappers' descendants. + * @returns {CKEDITOR.plugins.widget} The widget instance or `null`. + */ + getByElement: ( function() { + var validWrapperElements = { div: 1, span: 1 }; + function getWidgetId( element ) { + return element.is( validWrapperElements ) && element.data( 'cke-widget-id' ); + } + + return function( element, checkWrapperOnly ) { + if ( !element ) + return null; + + var id = getWidgetId( element ); + + // There's no need to check element parents if element is a wrapper. + if ( !checkWrapperOnly && !id ) { + var limit = this.editor.editable(); + + // Try to find a closest ascendant which is a widget wrapper. + do { + element = element.getParent(); + } while ( element && !element.equals( limit ) && !( id = getWidgetId( element ) ) ); + } + + return this.instances[ id ] || null; + }; + } )(), + + /** + * Initializes a widget on a given element if the widget has not been initialized on it yet. + * + * @param {CKEDITOR.dom.element} element The future widget element. + * @param {String/CKEDITOR.plugins.widget.definition} [widgetDef] Name of a widget or a widget definition. + * The widget definition should be previously registered by using the + * {@link CKEDITOR.plugins.widget.repository#add} method. + * @param [startupData] Widget startup data (has precedence over default one). + * @returns {CKEDITOR.plugins.widget} The widget instance or `null` if a widget could not be initialized on + * a given element. + */ + initOn: function( element, widgetDef, startupData ) { + if ( !widgetDef ) + widgetDef = this.registered[ element.data( 'widget' ) ]; + else if ( typeof widgetDef == 'string' ) + widgetDef = this.registered[ widgetDef ]; + + if ( !widgetDef ) + return null; + + // Wrap element if still wasn't wrapped (was added during runtime by method that skips dataProcessor). + var wrapper = this.wrapElement( element, widgetDef.name ); + + if ( wrapper ) { + // Check if widget wrapper is new (widget hasn't been initialized on it yet). + // This class will be removed by widget constructor to avoid locking snapshot twice. + if ( wrapper.hasClass( 'cke_widget_new' ) ) { + var widget = new Widget( this, this._.nextId++, element, widgetDef, startupData ); + + // Widget could be destroyed when initializing it. + if ( widget.isInited() ) { + this.instances[ widget.id ] = widget; + + return widget; + } else { + return null; + } + } + + // Widget already has been initialized, so try to get widget by element. + // Note - it may happen that other instance will returned than the one created above, + // if for example widget was destroyed and reinitialized. + return this.getByElement( element ); + } + + // No wrapper means that there's no widget for this element. + return null; + }, + + /** + * Initializes widgets on all elements which were wrapped by {@link #wrapElement} and + * have not been initialized yet. + * + * @param {CKEDITOR.dom.element} [container=editor.editable()] The container which will be checked for not + * initialized widgets. Defaults to editor's {@link CKEDITOR.editor#editable editable} element. + * @returns {CKEDITOR.plugins.widget[]} Array of widget instances which have been initialized. + * Note: Only first-level widgets are returned — without nested widgets. + */ + initOnAll: function( container ) { + var newWidgets = ( container || this.editor.editable() ).find( '.cke_widget_new' ), + newInstances = [], + instance; + + for ( var i = newWidgets.count(); i--; ) { + instance = this.initOn( newWidgets.getItem( i ).getFirst( Widget.isDomWidgetElement ) ); + if ( instance ) + newInstances.push( instance ); + } + + return newInstances; + }, + + /** + * Allows to listen to events on specific types of widgets, even if they are not created yet. + * + * Please note that this method inherits parameters from the {@link CKEDITOR.event#method-on} method with one + * extra parameter at the beginning which is the widget name. + * + * editor.widgets.onWidget( 'image', 'action', function( evt ) { + * // Event `action` occurs on `image` widget. + * } ); + * + * @since 4.5 + * @param {String} widgetName + * @param {String} eventName + * @param {Function} listenerFunction + * @param {Object} [scopeObj] + * @param {Object} [listenerData] + * @param {Number} [priority=10] + */ + onWidget: function( widgetName ) { + var args = Array.prototype.slice.call( arguments ); + + args.shift(); + + for ( var i in this.instances ) { + var instance = this.instances[ i ]; + + if ( instance.name == widgetName ) { + instance.on.apply( instance, args ); + } + } + + this.on( 'instanceCreated', function( evt ) { + var widget = evt.data; + + if ( widget.name == widgetName ) { + widget.on.apply( widget, args ); + } + } ); + }, + + /** + * Parses element classes string and returns an object + * whose keys contain class names. Skips all `cke_*` classes. + * + * This method is used by the {@link CKEDITOR.plugins.widget#getClasses} method and + * may be used when overriding that method. + * + * @since 4.4 + * @param {String} classes String (value of `class` attribute). + * @returns {Object} Object containing classes or `null` if no classes found. + */ + parseElementClasses: function( classes ) { + if ( !classes ) + return null; + + classes = CKEDITOR.tools.trim( classes ).split( /\s+/ ); + + var cl, + obj = {}, + hasClasses = 0; + + while ( ( cl = classes.pop() ) ) { + if ( cl.indexOf( 'cke_' ) == -1 ) + obj[ cl ] = hasClasses = 1; + } + + return hasClasses ? obj : null; + }, + + /** + * Wraps an element with a widget's non-editable container. + * + * If this method is called on an {@link CKEDITOR.htmlParser.element}, then it will + * also take care of fixing the DOM after wrapping (the wrapper may not be allowed in element's parent). + * + * @param {CKEDITOR.dom.element/CKEDITOR.htmlParser.element} element The widget element to be wrapped. + * @param {String} [widgetName] The name of the widget definition. Defaults to element's `data-widget` + * attribute value. + * @returns {CKEDITOR.dom.element/CKEDITOR.htmlParser.element} The wrapper element or `null` if + * the widget definition of this name is not registered. + */ + wrapElement: function( element, widgetName ) { + var wrapper = null, + widgetDef, + isInline; + + if ( element instanceof CKEDITOR.dom.element ) { + widgetName = widgetName || element.data( 'widget' ); + widgetDef = this.registered[ widgetName ]; + + if ( !widgetDef ) + return null; + + // Do not wrap already wrapped element. + wrapper = element.getParent(); + if ( wrapper && wrapper.type == CKEDITOR.NODE_ELEMENT && wrapper.data( 'cke-widget-wrapper' ) ) + return wrapper; + + // If attribute isn't already set (e.g. for pasted widget), set it. + if ( !element.hasAttribute( 'data-cke-widget-keep-attr' ) ) + element.data( 'cke-widget-keep-attr', element.data( 'widget' ) ? 1 : 0 ); + + element.data( 'widget', widgetName ); + + isInline = isWidgetInline( widgetDef, element.getName() ); + + wrapper = new CKEDITOR.dom.element( isInline ? 'span' : 'div' ); + wrapper.setAttributes( getWrapperAttributes( isInline, widgetName ) ); + + wrapper.data( 'cke-display-name', widgetDef.pathName ? widgetDef.pathName : element.getName() ); + + // Replace element unless it is a detached one. + if ( element.getParent( true ) ) + wrapper.replace( element ); + element.appendTo( wrapper ); + } + else if ( element instanceof CKEDITOR.htmlParser.element ) { + widgetName = widgetName || element.attributes[ 'data-widget' ]; + widgetDef = this.registered[ widgetName ]; + + if ( !widgetDef ) + return null; + + wrapper = element.parent; + if ( wrapper && wrapper.type == CKEDITOR.NODE_ELEMENT && wrapper.attributes[ 'data-cke-widget-wrapper' ] ) + return wrapper; + + // If attribute isn't already set (e.g. for pasted widget), set it. + if ( !( 'data-cke-widget-keep-attr' in element.attributes ) ) + element.attributes[ 'data-cke-widget-keep-attr' ] = element.attributes[ 'data-widget' ] ? 1 : 0; + if ( widgetName ) + element.attributes[ 'data-widget' ] = widgetName; + + isInline = isWidgetInline( widgetDef, element.name ); + + wrapper = new CKEDITOR.htmlParser.element( isInline ? 'span' : 'div', getWrapperAttributes( isInline, widgetName ) ); + wrapper.attributes[ 'data-cke-display-name' ] = widgetDef.pathName ? widgetDef.pathName : element.name; + + var parent = element.parent, + index; + + // Don't detach already detached element. + if ( parent ) { + index = element.getIndex(); + element.remove(); + } + + wrapper.add( element ); + + // Insert wrapper fixing DOM (splitting parents if wrapper is not allowed inside them). + parent && insertElement( parent, index, wrapper ); + } + + return wrapper; + }, + + // Expose for tests. + _tests_createEditableFilter: createEditableFilter + }; + + CKEDITOR.event.implementOn( Repository.prototype ); + + /** + * An event fired when a widget instance is created, but before it is fully initialized. + * + * @event instanceCreated + * @param {CKEDITOR.plugins.widget} data The widget instance. + */ + + /** + * An event fired when a widget instance was destroyed. + * + * See also {@link CKEDITOR.plugins.widget#event-destroy}. + * + * @event instanceDestroyed + * @param {CKEDITOR.plugins.widget} data The widget instance. + */ + + /** + * An event fired to trigger the selection check. + * + * See the {@link #method-checkSelection} method. + * + * @event checkSelection + */ + + /** + * An event fired by the the {@link #method-checkWidgets} method. + * + * It can be canceled in order to stop the {@link #method-checkWidgets} + * method execution or the event listener can modify the method's options. + * + * @event checkWidgets + * @param [data] + * @param {Boolean} [data.initOnlyNew] Initialize widgets only on newly wrapped + * widget elements (those which still have the `cke_widget_new` class). When this option is + * set to `true`, widgets which were invalidated (e.g. by replacing with a cloned DOM structure) + * will not be reinitialized. This makes the check faster. + * @param {Boolean} [data.focusInited] If only one widget is initialized by + * the method, it will be focused. + */ + + + /** + * An instance of a widget. Together with {@link CKEDITOR.plugins.widget.repository} these + * two classes constitute the core of the Widget System. + * + * Note that neither the repository nor the widget instances can be created by using their constructors. + * A repository instance is automatically set up by the Widget plugin and is accessible under + * {@link CKEDITOR.editor#widgets}, while widget instances are created and destroyed by the repository. + * + * To create a widget, first you need to {@link CKEDITOR.plugins.widget.repository#add register} its + * {@link CKEDITOR.plugins.widget.definition definition}: + * + * editor.widgets.add( 'simplebox', { + * upcast: function( element ) { + * // Defines which elements will become widgets. + * if ( element.hasClass( 'simplebox' ) ) + * return true; + * }, + * init: function() { + * // ... + * } + * } ); + * + * Once the widget definition is registered, widgets will be automatically + * created when loading data: + * + * editor.setData( '
foo
', function() { + * console.log( editor.widgets.instances ); // -> An object containing one instance. + * } ); + * + * It is also possible to create instances during runtime by using a command + * (if a {@link CKEDITOR.plugins.widget.definition#template} property was defined): + * + * // You can execute an automatically defined command to + * // insert a new simplebox widget or edit the one currently focused. + * editor.execCommand( 'simplebox' ); + * + * Note: Since CKEditor 4.5 widget's `startupData` can be passed as the command argument: + * + * editor.execCommand( 'simplebox', { + * startupData: { + * align: 'left' + * } + * } ); + * + * A widget can also be created in a completely custom way: + * + * var element = editor.document.createElement( 'div' ); + * editor.insertElement( element ); + * var widget = editor.widgets.initOn( element, 'simplebox' ); + * + * @since 4.3 + * @class CKEDITOR.plugins.widget + * @mixins CKEDITOR.event + * @extends CKEDITOR.plugins.widget.definition + * @constructor Creates an instance of the widget class. Do not use it directly, but instead initialize widgets + * by using the {@link CKEDITOR.plugins.widget.repository#initOn} method or by the upcasting system. + * @param {CKEDITOR.plugins.widget.repository} widgetsRepo + * @param {Number} id Unique ID of this widget instance. + * @param {CKEDITOR.dom.element} element The widget element. + * @param {CKEDITOR.plugins.widget.definition} widgetDef Widget's registered definition. + * @param [startupData] Initial widget data. This data object will overwrite the default data and + * the data loaded from the DOM. + */ + function Widget( widgetsRepo, id, element, widgetDef, startupData ) { + var editor = widgetsRepo.editor; + + // Extend this widget with widgetDef-specific methods and properties. + CKEDITOR.tools.extend( this, widgetDef, { + /** + * The editor instance. + * + * @readonly + * @property {CKEDITOR.editor} + */ + editor: editor, + + /** + * This widget's unique (per editor instance) ID. + * + * @readonly + * @property {Number} + */ + id: id, + + /** + * Whether this widget is an inline widget (based on an inline element unless + * forced otherwise by {@link CKEDITOR.plugins.widget.definition#inline}). + * + * **Note:** This option does not allow to turn a block element into an inline widget. + * However, it makes it possible to turn an inline element into a block widget or to + * force a correct type in case when automatic recognition fails. + * + * @readonly + * @property {Boolean} + */ + inline: element.getParent().getName() == 'span', + + /** + * The widget element — the element on which the widget was initialized. + * + * @readonly + * @property {CKEDITOR.dom.element} element + */ + element: element, + + /** + * Widget's data object. + * + * The data can only be set by using the {@link #setData} method. + * Changes made to the data fire the {@link #event-data} event. + * + * @readonly + */ + data: CKEDITOR.tools.extend( {}, typeof widgetDef.defaults == 'function' ? widgetDef.defaults() : widgetDef.defaults ), + + /** + * Indicates if a widget is data-ready. Set to `true` when data from all sources + * ({@link CKEDITOR.plugins.widget.definition#defaults}, set in the + * {@link #init} method, loaded from the widget's element and startup data coming from the constructor) + * are finally loaded. This is immediately followed by the first {@link #event-data}. + * + * @readonly + */ + dataReady: false, + + /** + * Whether a widget instance was initialized. This means that: + * + * * An instance was created, + * * Its properties were set, + * * The `init` method was executed. + * + * **Note**: The first {@link #event-data} event could not be fired yet which + * means that the widget's DOM has not been set up yet. Wait for the {@link #event-ready} + * event to be notified when a widget is fully initialized and ready. + * + * **Note**: Use the {@link #isInited} method to check whether a widget is initialized and + * has not been destroyed. + * + * @readonly + */ + inited: false, + + /** + * Whether a widget instance is ready. This means that the widget is {@link #inited} and + * that its DOM was finally set up. + * + * **Note:** Use the {@link #isReady} method to check whether a widget is ready and + * has not been destroyed. + * + * @readonly + */ + ready: false, + + // Revert what widgetDef could override (automatic #edit listener). + edit: Widget.prototype.edit, + + /** + * The nested editable element which is currently focused. + * + * @readonly + * @property {CKEDITOR.plugins.widget.nestedEditable} + */ + focusedEditable: null, + + /** + * The widget definition from which this instance was created. + * + * @readonly + * @property {CKEDITOR.plugins.widget.definition} definition + */ + definition: widgetDef, + + /** + * Link to the widget repository which created this instance. + * + * @readonly + * @property {CKEDITOR.plugins.widget.repository} repository + */ + repository: widgetsRepo, + + draggable: widgetDef.draggable !== false, + + // WAAARNING: Overwrite widgetDef's priv object, because otherwise violent unicorn's gonna visit you. + _: { + downcastFn: ( widgetDef.downcast && typeof widgetDef.downcast == 'string' ) ? + widgetDef.downcasts[ widgetDef.downcast ] : widgetDef.downcast + } + }, true ); + + /** + * An object of widget component elements. + * + * For every `partName => selector` pair in {@link CKEDITOR.plugins.widget.definition#parts}, + * one `partName => element` pair is added to this object during the widget initialization. + * + * @readonly + * @property {Object} parts + */ + + /** + * The template which will be used to create a new widget element (when the widget's command is executed). + * It will be populated with {@link #defaults default values}. + * + * @readonly + * @property {CKEDITOR.template} template + */ + + /** + * The widget wrapper — a non-editable `div` or `span` element (depending on {@link #inline}) + * which is a parent of the {@link #element} and widget compontents like the drag handler and the {@link #mask}. + * It is the outermost widget element. + * + * @readonly + * @property {CKEDITOR.dom.element} wrapper + */ + + widgetsRepo.fire( 'instanceCreated', this ); + + setupWidget( this, widgetDef ); + + this.init && this.init(); + + // Finally mark widget as inited. + this.inited = true; + + setupWidgetData( this, startupData ); + + // If at some point (e.g. in #data listener) widget hasn't been destroyed + // and widget is already attached to document then fire #ready. + if ( this.isInited() && editor.editable().contains( this.wrapper ) ) { + this.ready = true; + this.fire( 'ready' ); + } + } + + Widget.prototype = { + /** + * Adds a class to the widget element. This method is used by + * the {@link #applyStyle} method and should be overridden by widgets + * which should handle classes differently (e.g. add them to other elements). + * + * Since 4.6.0 this method also adds a corresponding class prefixed with {@link #WRAPPER_CLASS_PREFIX} + * to the widget wrapper element. + * + * **Note**: This method should not be used directly. Use the {@link #setData} method to + * set the `classes` property. Read more in the {@link #setData} documentation. + * + * See also: {@link #removeClass}, {@link #hasClass}, {@link #getClasses}. + * + * @since 4.4 + * @param {String} className The class name to be added. + */ + addClass: function( className ) { + this.element.addClass( className ); + this.wrapper.addClass( Widget.WRAPPER_CLASS_PREFIX + className ); + }, + + /** + * Applies the specified style to the widget. It is highly recommended to use the + * {@link CKEDITOR.editor#applyStyle} or {@link CKEDITOR.style#apply} methods instead of + * using this method directly, because unlike editor's and style's methods, this one + * does not perform any checks. + * + * By default this method handles only classes defined in the style. It clones existing + * classes which are stored in the {@link #property-data widget data}'s `classes` property, + * adds new classes, and calls the {@link #setData} method if at least one new class was added. + * Then, using the {@link #event-data} event listener widget applies modifications passing + * new classes to the {@link #addClass} method. + * + * If you need to handle classes differently than in the default way, you can override the + * {@link #addClass} and related methods. You can also handle other style properties than `classes` + * by overriding this method. + * + * See also: {@link #checkStyleActive}, {@link #removeStyle}. + * + * @since 4.4 + * @param {CKEDITOR.style} style The custom widget style to be applied. + */ + applyStyle: function( style ) { + applyRemoveStyle( this, style, 1 ); + }, + + /** + * Checks if the specified style is applied to this widget. It is highly recommended to use the + * {@link CKEDITOR.style#checkActive} method instead of using this method directly, + * because unlike style's method, this one does not perform any checks. + * + * By default this method handles only classes defined in the style and passes + * them to the {@link #hasClass} method. You can override these methods to handle classes + * differently or to handle more of the style properties. + * + * See also: {@link #applyStyle}, {@link #removeStyle}. + * + * @since 4.4 + * @param {CKEDITOR.style} style The custom widget style to be checked. + * @returns {Boolean} Whether the style is applied to this widget. + */ + checkStyleActive: function( style ) { + var classes = getStyleClasses( style ), + cl; + + if ( !classes ) + return false; + + while ( ( cl = classes.pop() ) ) { + if ( !this.hasClass( cl ) ) + return false; + } + return true; + }, + + /** + * Destroys this widget instance. + * + * Use {@link CKEDITOR.plugins.widget.repository#destroy} when possible instead of this method. + * + * This method fires the {#event-destroy} event. + * + * @param {Boolean} [offline] Whether a widget is offline (detached from the DOM tree) — + * in this case the DOM (attributes, classes, etc.) will not be cleaned up. + */ + destroy: function( offline ) { + this.fire( 'destroy' ); + + if ( this.editables ) { + for ( var name in this.editables ) + this.destroyEditable( name, offline ); + } + + if ( !offline ) { + if ( this.element.data( 'cke-widget-keep-attr' ) == '0' ) + this.element.removeAttribute( 'data-widget' ); + this.element.removeAttributes( [ 'data-cke-widget-data', 'data-cke-widget-keep-attr' ] ); + this.element.removeClass( 'cke_widget_element' ); + this.element.replace( this.wrapper ); + } + + this.wrapper = null; + }, + + /** + * Destroys a nested editable and all nested widgets. + * + * @param {String} editableName Nested editable name. + * @param {Boolean} [offline] See {@link #method-destroy} method. + */ + destroyEditable: function( editableName, offline ) { + var editable = this.editables[ editableName ]; + + editable.removeListener( 'focus', onEditableFocus ); + editable.removeListener( 'blur', onEditableBlur ); + this.editor.focusManager.remove( editable ); + + if ( !offline ) { + this.repository.destroyAll( false, editable ); + editable.removeClass( 'cke_widget_editable' ); + editable.removeClass( 'cke_widget_editable_focused' ); + editable.removeAttributes( [ 'contenteditable', 'data-cke-widget-editable', 'data-cke-enter-mode' ] ); + } + + delete this.editables[ editableName ]; + }, + + /** + * Starts widget editing. + * + * This method fires the {@link CKEDITOR.plugins.widget#event-edit} event + * which may be canceled in order to prevent it from opening a dialog window. + * + * The dialog window name is obtained from the event's data `dialog` property or + * from {@link CKEDITOR.plugins.widget.definition#dialog}. + * + * @returns {Boolean} Returns `true` if a dialog window was opened. + */ + edit: function() { + var evtData = { dialog: this.dialog }, + that = this; + + // Edit event was blocked or there's no dialog to be automatically opened. + if ( this.fire( 'edit', evtData ) === false || !evtData.dialog ) + return false; + + this.editor.openDialog( evtData.dialog, function( dialog ) { + var showListener, + okListener; + + // Allow to add a custom dialog handler. + if ( that.fire( 'dialog', dialog ) === false ) + return; + + showListener = dialog.on( 'show', function() { + dialog.setupContent( that ); + } ); + + okListener = dialog.on( 'ok', function() { + // Commit dialog's fields, but prevent from + // firing data event for every field. Fire only one, + // bulk event at the end. + var dataChanged, + dataListener = that.on( 'data', function( evt ) { + dataChanged = 1; + evt.cancel(); + }, null, null, 0 ); + + // Create snapshot preceeding snapshot with changed widget... + // TODO it should not be required, but it is and I found similar + // code in dialog#ok listener in dialog/plugin.js. + that.editor.fire( 'saveSnapshot' ); + dialog.commitContent( that ); + + dataListener.removeListener(); + if ( dataChanged ) { + that.fire( 'data', that.data ); + that.editor.fire( 'saveSnapshot' ); + } + } ); + + dialog.once( 'hide', function() { + showListener.removeListener(); + okListener.removeListener(); + } ); + } ); + + return true; + }, + + /** + * Returns widget element classes parsed to an object. This method + * is used to populate the `classes` property of widget's {@link #property-data}. + * + * This method reuses {@link CKEDITOR.plugins.widget.repository#parseElementClasses}. + * It should be overriden if a widget should handle classes differently (e.g. on other elements). + * + * See also: {@link #removeClass}, {@link #addClass}, {@link #hasClass}. + * + * @since 4.4 + * @returns {Object} + */ + getClasses: function() { + return this.repository.parseElementClasses( this.element.getAttribute( 'class' ) ); + }, + + /** + * Checks if the widget element has specified class. This method is used by + * the {@link #checkStyleActive} method and should be overriden by widgets + * which should handle classes differently (e.g. on other elements). + * + * See also: {@link #removeClass}, {@link #addClass}, {@link #getClasses}. + * + * @since 4.4 + * @param {String} className The class to be checked. + * @param {Boolean} Whether a widget has specified class. + */ + hasClass: function( className ) { + return this.element.hasClass( className ); + }, + + /** + * Initializes a nested editable. + * + * **Note**: Only elements from {@link CKEDITOR.dtd#$editable} may become editables. + * + * @param {String} editableName The nested editable name. + * @param {CKEDITOR.plugins.widget.nestedEditable.definition} definition The definition of the nested editable. + * @returns {Boolean} Whether an editable was successfully initialized. + */ + initEditable: function( editableName, definition ) { + // Don't fetch just first element which matched selector but look for a correct one. (http://dev.ckeditor.com/ticket/13334) + var editable = this._findOneNotNested( definition.selector ); + + if ( editable && editable.is( CKEDITOR.dtd.$editable ) ) { + editable = new NestedEditable( this.editor, editable, { + filter: createEditableFilter.call( this.repository, this.name, editableName, definition ) + } ); + this.editables[ editableName ] = editable; + + editable.setAttributes( { + contenteditable: 'true', + 'data-cke-widget-editable': editableName, + 'data-cke-enter-mode': editable.enterMode + } ); + + if ( editable.filter ) + editable.data( 'cke-filter', editable.filter.id ); + + editable.addClass( 'cke_widget_editable' ); + // This class may be left when d&ding widget which + // had focused editable. Clean this class here, not in + // cleanUpWidgetElement for performance and code size reasons. + editable.removeClass( 'cke_widget_editable_focused' ); + + if ( definition.pathName ) + editable.data( 'cke-display-name', definition.pathName ); + + this.editor.focusManager.add( editable ); + editable.on( 'focus', onEditableFocus, this ); + CKEDITOR.env.ie && editable.on( 'blur', onEditableBlur, this ); + + // Finally, process editable's data. This data wasn't processed when loading + // editor's data, becuase they need to be processed separately, with its own filters and settings. + editable._.initialSetData = true; + editable.setData( editable.getHtml() ); + + return true; + } + + return false; + }, + + /** + * Looks inside wrapper element to find a node that + * matches given selector and is not nested in other widget. (http://dev.ckeditor.com/ticket/13334) + * + * @since 4.5 + * @private + * @param {String} selector Selector to match. + * @returns {CKEDITOR.dom.element} Matched element or `null` if a node has not been found. + */ + _findOneNotNested: function( selector ) { + var matchedElements = this.wrapper.find( selector ), + match, + closestWrapper; + + for ( var i = 0; i < matchedElements.count(); i++ ) { + match = matchedElements.getItem( i ); + closestWrapper = match.getAscendant( Widget.isDomWidgetWrapper ); + + // The closest ascendant-wrapper of this match defines to which widget + // this match belongs. If the ascendant is this widget's wrapper + // it means that the match is not nested in other widget. + if ( this.wrapper.equals( closestWrapper ) ) { + return match; + } + } + + return null; + }, + + /** + * Checks if a widget has already been initialized and has not been destroyed yet. + * + * See {@link #inited} for more details. + * + * @returns {Boolean} + */ + isInited: function() { + return !!( this.wrapper && this.inited ); + }, + + /** + * Checks if a widget is ready and has not been destroyed yet. + * + * See {@link #property-ready} for more details. + * + * @returns {Boolean} + */ + isReady: function() { + return this.isInited() && this.ready; + }, + + /** + * Focuses a widget by selecting it. + */ + focus: function() { + var sel = this.editor.getSelection(); + + // Fake the selection before focusing editor, to avoid unpreventable viewports scrolling + // on Webkit/Blink/IE which is done because there's no selection or selection was somewhere else than widget. + if ( sel ) { + var isDirty = this.editor.checkDirty(); + + sel.fake( this.wrapper ); + + !isDirty && this.editor.resetDirty(); + } + + // Always focus editor (not only when focusManger.hasFocus is false) (because of http://dev.ckeditor.com/ticket/10483). + this.editor.focus(); + }, + + /** + * Removes a class from the widget element. This method is used by + * the {@link #removeStyle} method and should be overriden by widgets + * which should handle classes differently (e.g. on other elements). + * + * **Note**: This method should not be used directly. Use the {@link #setData} method to + * set the `classes` property. Read more in the {@link #setData} documentation. + * + * See also: {@link #hasClass}, {@link #addClass}. + * + * @since 4.4 + * @param {String} className The class to be removed. + */ + removeClass: function( className ) { + this.element.removeClass( className ); + this.wrapper.removeClass( Widget.WRAPPER_CLASS_PREFIX + className ); + }, + + /** + * Removes the specified style from the widget. It is highly recommended to use the + * {@link CKEDITOR.editor#removeStyle} or {@link CKEDITOR.style#remove} methods instead of + * using this method directly, because unlike editor's and style's methods, this one + * does not perform any checks. + * + * Read more about how applying/removing styles works in the {@link #applyStyle} method documentation. + * + * See also {@link #checkStyleActive}, {@link #applyStyle}, {@link #getClasses}. + * + * @since 4.4 + * @param {CKEDITOR.style} style The custom widget style to be removed. + */ + removeStyle: function( style ) { + applyRemoveStyle( this, style, 0 ); + }, + + /** + * Sets widget value(s) in the {@link #property-data} object. + * If the given value(s) modifies current ones, the {@link #event-data} event is fired. + * + * this.setData( 'align', 'left' ); + * this.data.align; // -> 'left' + * + * this.setData( { align: 'right', opened: false } ); + * this.data.align; // -> 'right' + * this.data.opened; // -> false + * + * Set values are stored in {@link #element}'s attribute (`data-cke-widget-data`), + * in a JSON string, therefore {@link #property-data} should contain + * only serializable data. + * + * **Note:** A special data property, `classes`, exists. It contains an object with + * classes which were returned by the {@link #getClasses} method during the widget initialization. + * This property is then used by the {@link #applyStyle} and {@link #removeStyle} methods. + * When it is changed (the reference to object must be changed!), the widget updates its classes by + * using the {@link #addClass} and {@link #removeClass} methods. + * + * // Adding a new class. + * var classes = CKEDITOR.tools.clone( widget.data.classes ); + * classes.newClass = 1; + * widget.setData( 'classes', classes ); + * + * // Removing a class. + * var classes = CKEDITOR.tools.clone( widget.data.classes ); + * delete classes.newClass; + * widget.setData( 'classes', classes ); + * + * @param {String/Object} keyOrData + * @param {Object} value + * @chainable + */ + setData: function( key, value ) { + var data = this.data, + modified = 0; + + if ( typeof key == 'string' ) { + if ( data[ key ] !== value ) { + data[ key ] = value; + modified = 1; + } + } + else { + var newData = key; + + for ( key in newData ) { + if ( data[ key ] !== newData[ key ] ) { + modified = 1; + data[ key ] = newData[ key ]; + } + } + } + + // Block firing data event and overwriting data element before setupWidgetData is executed. + if ( modified && this.dataReady ) { + writeDataToElement( this ); + this.fire( 'data', data ); + } + + return this; + }, + + /** + * Changes the widget's focus state. This method is executed automatically after + * a widget was focused by the {@link #method-focus} method or the selection was moved + * out of the widget. + * + * This is a low-level method which is not integrated with e.g. the undo manager. + * Use the {@link #method-focus} method instead. + * + * @param {Boolean} selected Whether to select or deselect this widget. + * @chainable + */ + setFocused: function( focused ) { + this.wrapper[ focused ? 'addClass' : 'removeClass' ]( 'cke_widget_focused' ); + this.fire( focused ? 'focus' : 'blur' ); + return this; + }, + + /** + * Changes the widget's select state. This method is executed automatically after + * a widget was selected by the {@link #method-focus} method or the selection + * was moved out of the widget. + * + * This is a low-level method which is not integrated with e.g. the undo manager. + * Use the {@link #method-focus} method instead or simply change the selection. + * + * @param {Boolean} selected Whether to select or deselect this widget. + * @chainable + */ + setSelected: function( selected ) { + this.wrapper[ selected ? 'addClass' : 'removeClass' ]( 'cke_widget_selected' ); + this.fire( selected ? 'select' : 'deselect' ); + return this; + }, + + /** + * Repositions drag handler according to the widget's element position. Should be called from events, like mouseover. + */ + updateDragHandlerPosition: function() { + var editor = this.editor, + domElement = this.element.$, + oldPos = this._.dragHandlerOffset, + newPos = { + x: domElement.offsetLeft, + y: domElement.offsetTop - DRAG_HANDLER_SIZE + }; + + if ( oldPos && newPos.x == oldPos.x && newPos.y == oldPos.y ) + return; + + // We need to make sure that dirty state is not changed (http://dev.ckeditor.com/ticket/11487). + var initialDirty = editor.checkDirty(); + + editor.fire( 'lockSnapshot' ); + this.dragHandlerContainer.setStyles( { + top: newPos.y + 'px', + left: newPos.x + 'px', + display: 'block' + } ); + editor.fire( 'unlockSnapshot' ); + !initialDirty && editor.resetDirty(); + + this._.dragHandlerOffset = newPos; + } + }; + + CKEDITOR.event.implementOn( Widget.prototype ); + + /** + * Gets the {@link #isDomNestedEditable nested editable} + * (returned as a {@link CKEDITOR.dom.element}, not as a {@link CKEDITOR.plugins.widget.nestedEditable}) + * closest to the `node` or the `node` if it is a nested editable itself. + * + * @since 4.5 + * @static + * @param {CKEDITOR.dom.element} guard Stop ancestor search on this node (usually editor's editable). + * @param {CKEDITOR.dom.node} node Start the search from this node. + * @returns {CKEDITOR.dom.element/null} Element or `null` if not found. + */ + Widget.getNestedEditable = function( guard, node ) { + if ( !node || node.equals( guard ) ) + return null; + + if ( Widget.isDomNestedEditable( node ) ) + return node; + + return Widget.getNestedEditable( guard, node.getParent() ); + }; + + /** + * Checks whether the `node` is a widget's drag handle element. + * + * @since 4.5 + * @static + * @param {CKEDITOR.dom.node} node + * @returns {Boolean} + */ + Widget.isDomDragHandler = function( node ) { + return node.type == CKEDITOR.NODE_ELEMENT && node.hasAttribute( 'data-cke-widget-drag-handler' ); + }; + + /** + * Checks whether the `node` is a container of the widget's drag handle element. + * + * @since 4.5 + * @static + * @param {CKEDITOR.dom.node} node + * @returns {Boolean} + */ + Widget.isDomDragHandlerContainer = function( node ) { + return node.type == CKEDITOR.NODE_ELEMENT && node.hasClass( 'cke_widget_drag_handler_container' ); + }; + + /** + * Checks whether the `node` is a {@link CKEDITOR.plugins.widget#editables nested editable}. + * Note that this function only checks whether it is the right element, not whether + * the passed `node` is an instance of {@link CKEDITOR.plugins.widget.nestedEditable}. + * + * @since 4.5 + * @static + * @param {CKEDITOR.dom.node} node + * @returns {Boolean} + */ + Widget.isDomNestedEditable = function( node ) { + return node.type == CKEDITOR.NODE_ELEMENT && node.hasAttribute( 'data-cke-widget-editable' ); + }; + + /** + * Checks whether the `node` is a {@link CKEDITOR.plugins.widget#element widget element}. + * + * @since 4.5 + * @static + * @param {CKEDITOR.dom.node} node + * @returns {Boolean} + */ + Widget.isDomWidgetElement = function( node ) { + return node.type == CKEDITOR.NODE_ELEMENT && node.hasAttribute( 'data-widget' ); + }; + + /** + * Checks whether the `node` is a {@link CKEDITOR.plugins.widget#wrapper widget wrapper}. + * + * @since 4.5 + * @static + * @param {CKEDITOR.dom.element} node + * @returns {Boolean} + */ + Widget.isDomWidgetWrapper = function( node ) { + return node.type == CKEDITOR.NODE_ELEMENT && node.hasAttribute( 'data-cke-widget-wrapper' ); + }; + + /** + * Checks whether the `node` is a {@link CKEDITOR.plugins.widget#element widget element}. + * + * @since 4.5 + * @static + * @param {CKEDITOR.htmlParser.node} node + * @returns {Boolean} + */ + Widget.isParserWidgetElement = function( node ) { + return node.type == CKEDITOR.NODE_ELEMENT && !!node.attributes[ 'data-widget' ]; + }; + + /** + * Checks whether the `node` is a {@link CKEDITOR.plugins.widget#wrapper widget wrapper}. + * + * @since 4.5 + * @static + * @param {CKEDITOR.htmlParser.element} node + * @returns {Boolean} + */ + Widget.isParserWidgetWrapper = function( node ) { + return node.type == CKEDITOR.NODE_ELEMENT && !!node.attributes[ 'data-cke-widget-wrapper' ]; + }; + + /** + * Prefix added to wrapper classes. Each class added to the widget element by the {@link #addClass} + * method will also be added to the wrapper prefixed with it. + * + * @since 4.6.0 + * @static + * @readonly + * @property {String} [='cke_widget_wrapper_'] + */ + Widget.WRAPPER_CLASS_PREFIX = 'cke_widget_wrapper_'; + + /** + * An event fired when a widget is ready (fully initialized). This event is fired after: + * + * * {@link #init} is called, + * * The first {@link #event-data} event is fired, + * * A widget is attached to the document. + * + * Therefore, in case of widget creation with a command which opens a dialog window, this event + * will be delayed after the dialog window is closed and the widget is finally inserted into the document. + * + * **Note**: If your widget does not use automatic dialog window binding (i.e. you open the dialog window manually) + * or another situation in which the widget wrapper is not attached to document at the time when it is + * initialized occurs, you need to take care of firing {@link #event-ready} yourself. + * + * See also {@link #property-ready} and {@link #property-inited} properties, and + * {@link #isReady} and {@link #isInited} methods. + * + * @event ready + */ + + /** + * An event fired when a widget is about to be destroyed, but before it is + * fully torn down. + * + * @event destroy + */ + + /** + * An event fired when a widget is focused. + * + * Widget can be focused by executing {@link #method-focus}. + * + * @event focus + */ + + /** + * An event fired when a widget is blurred. + * + * @event blur + */ + + /** + * An event fired when a widget is selected. + * + * @event select + */ + + /** + * An event fired when a widget is deselected. + * + * @event deselect + */ + + /** + * An event fired by the {@link #method-edit} method. It can be canceled + * in order to stop the default action (opening a dialog window and/or + * {@link CKEDITOR.plugins.widget.repository#finalizeCreation finalizing widget creation}). + * + * @event edit + * @param data + * @param {String} data.dialog Defaults to {@link CKEDITOR.plugins.widget.definition#dialog} + * and can be changed or set by the listener. + */ + + /** + * An event fired when a dialog window for widget editing is opened. + * This event can be canceled in order to handle the editing dialog in a custom manner. + * + * @event dialog + * @param {CKEDITOR.dialog} data The opened dialog window instance. + */ + + /** + * An event fired when a key is pressed on a focused widget. + * This event is forwarded from the {@link CKEDITOR.editor#key} event and + * has the ability to block editor keystrokes if it is canceled. + * + * @event key + * @param data + * @param {Number} data.keyCode A number representing the key code (or combination). + */ + + /** + * An event fired when a widget is double clicked. + * + * **Note:** If a default editing action is executed on double click (i.e. a widget has a + * {@link CKEDITOR.plugins.widget.definition#dialog dialog} defined and the {@link #event-doubleclick} event was not + * canceled), this event will be automatically canceled, so a listener added with the default priority (10) + * will not be executed. Use a listener with low priority (e.g. 5) to be sure that it will be executed. + * + * widget.on( 'doubleclick', function( evt ) { + * console.log( 'widget#doubleclick' ); + * }, null, null, 5 ); + * + * If your widget handles double click in a special way (so the default editing action is not executed), + * make sure you cancel this event, because otherwise it will be propagated to {@link CKEDITOR.editor#doubleclick} + * and another feature may step in (e.g. a Link dialog window may be opened if your widget was inside a link). + * + * @event doubleclick + * @param data + * @param {CKEDITOR.dom.element} data.element The double-clicked element. + */ + + /** + * An event fired when the context menu is opened for a widget. + * + * @event contextMenu + * @param data The object containing context menu options to be added + * for this widget. See {@link CKEDITOR.plugins.contextMenu#addListener}. + */ + + /** + * An event fired when the widget data changed. See the {@link #setData} method and the {@link #property-data} property. + * + * @event data + */ + + + + /** + * The wrapper class for editable elements inside widgets. + * + * Do not use directly. Use {@link CKEDITOR.plugins.widget.definition#editables} or + * {@link CKEDITOR.plugins.widget#initEditable}. + * + * @class CKEDITOR.plugins.widget.nestedEditable + * @extends CKEDITOR.dom.element + * @constructor + * @param {CKEDITOR.editor} editor + * @param {CKEDITOR.dom.element} element + * @param config + * @param {CKEDITOR.filter} [config.filter] + */ + function NestedEditable( editor, element, config ) { + // Call the base constructor. + CKEDITOR.dom.element.call( this, element.$ ); + this.editor = editor; + this._ = {}; + var filter = this.filter = config.filter; + + // If blockless editable - always use BR mode. + if ( !CKEDITOR.dtd[ this.getName() ].p ) + this.enterMode = this.shiftEnterMode = CKEDITOR.ENTER_BR; + else { + this.enterMode = filter ? filter.getAllowedEnterMode( editor.enterMode ) : editor.enterMode; + this.shiftEnterMode = filter ? filter.getAllowedEnterMode( editor.shiftEnterMode, true ) : editor.shiftEnterMode; + } + } + + NestedEditable.prototype = CKEDITOR.tools.extend( CKEDITOR.tools.prototypedCopy( CKEDITOR.dom.element.prototype ), { + /** + * Sets the editable data. The data will be passed through the {@link CKEDITOR.editor#dataProcessor} + * and the {@link CKEDITOR.editor#filter}. This ensures that the data was filtered and prepared to be + * edited like the {@link CKEDITOR.editor#method-setData editor data}. + * + * Before content is changed, all nested widgets are destroyed. Afterwards, after new content is loaded, + * all nested widgets are initialized. + * + * @param {String} data + */ + setData: function( data ) { + // For performance reasons don't call destroyAll when initializing a nested editable, + // because there are no widgets inside. + if ( !this._.initialSetData ) { + // Destroy all nested widgets before setting data. + this.editor.widgets.destroyAll( false, this ); + } + this._.initialSetData = false; + + data = this.editor.dataProcessor.toHtml( data, { + context: this.getName(), + filter: this.filter, + enterMode: this.enterMode + } ); + this.setHtml( data ); + + this.editor.widgets.initOnAll( this ); + }, + + /** + * Gets the editable data. Like {@link #setData}, this method will process and filter the data. + * + * @returns {String} + */ + getData: function() { + return this.editor.dataProcessor.toDataFormat( this.getHtml(), { + context: this.getName(), + filter: this.filter, + enterMode: this.enterMode + } ); + } + } ); + + /** + * The editor instance. + * + * @readonly + * @property {CKEDITOR.editor} editor + */ + + /** + * The filter instance if allowed content rules were defined. + * + * @readonly + * @property {CKEDITOR.filter} filter + */ + + /** + * The enter mode active in this editable. + * It is determined from editable's name (whether it is a blockless editable), + * its allowed content rules (if defined) and the default editor's mode. + * + * @readonly + * @property {Number} enterMode + */ + + /** + * The shift enter move active in this editable. + * + * @readonly + * @property {Number} shiftEnterMode + */ + + + // + // REPOSITORY helpers ----------------------------------------------------- + // + + function addWidgetButtons( editor ) { + var widgets = editor.widgets.registered, + widget, + widgetName, + widgetButton; + + for ( widgetName in widgets ) { + widget = widgets[ widgetName ]; + + // Create button if defined. + widgetButton = widget.button; + if ( widgetButton && editor.ui.addButton ) { + editor.ui.addButton( CKEDITOR.tools.capitalize( widget.name, true ), { + label: widgetButton, + command: widget.name, + toolbar: 'insert,10' + } ); + } + } + } + + // Create a command creating and editing widget. + // + // @param editor + // @param {CKEDITOR.plugins.widget.definition} widgetDef + function addWidgetCommand( editor, widgetDef ) { + editor.addCommand( widgetDef.name, { + exec: function( editor, commandData ) { + var focused = editor.widgets.focused; + // If a widget of the same type is focused, start editing. + if ( focused && focused.name == widgetDef.name ) + focused.edit(); + // Otherwise... + // ... use insert method is was defined. + else if ( widgetDef.insert ) + widgetDef.insert(); + // ... or create a brand-new widget from template. + else if ( widgetDef.template ) { + var defaults = typeof widgetDef.defaults == 'function' ? widgetDef.defaults() : widgetDef.defaults, + element = CKEDITOR.dom.element.createFromHtml( widgetDef.template.output( defaults ) ), + instance, + wrapper = editor.widgets.wrapElement( element, widgetDef.name ), + temp = new CKEDITOR.dom.documentFragment( wrapper.getDocument() ); + + // Append wrapper to a temporary document. This will unify the environment + // in which #data listeners work when creating and editing widget. + temp.append( wrapper ); + instance = editor.widgets.initOn( element, widgetDef, commandData && commandData.startupData ); + + // Instance could be destroyed during initialization. + // In this case finalize creation if some new widget + // was left in temporary document fragment. + if ( !instance ) { + finalizeCreation(); + return; + } + + // Listen on edit to finalize widget insertion. + // + // * If dialog was set, then insert widget after dialog was successfully saved or destroy this + // temporary instance. + // * If dialog wasn't set and edit wasn't canceled, insert widget. + var editListener = instance.once( 'edit', function( evt ) { + if ( evt.data.dialog ) { + instance.once( 'dialog', function( evt ) { + var dialog = evt.data, + okListener, + cancelListener; + + // Finalize creation AFTER (20) new data was set. + okListener = dialog.once( 'ok', finalizeCreation, null, null, 20 ); + + cancelListener = dialog.once( 'cancel', function( evt ) { + if ( !( evt.data && evt.data.hide === false ) ) { + editor.widgets.destroy( instance, true ); + } + } ); + + dialog.once( 'hide', function() { + okListener.removeListener(); + cancelListener.removeListener(); + } ); + } ); + } else { + // Dialog hasn't been set, so insert widget now. + finalizeCreation(); + } + }, null, null, 999 ); + + instance.edit(); + + // Remove listener in case someone canceled it before this + // listener was executed. + editListener.removeListener(); + } + + function finalizeCreation() { + editor.widgets.finalizeCreation( temp ); + } + }, + + allowedContent: widgetDef.allowedContent, + requiredContent: widgetDef.requiredContent, + contentForms: widgetDef.contentForms, + contentTransformations: widgetDef.contentTransformations + } ); + } + + function addWidgetProcessors( widgetsRepo, widgetDef ) { + var upcast = widgetDef.upcast, + upcasts, + priority = widgetDef.upcastPriority || 10; + + if ( !upcast ) + return; + + // Multiple upcasts defined in string. + if ( typeof upcast == 'string' ) { + upcasts = upcast.split( ',' ); + while ( upcasts.length ) { + addUpcast( widgetDef.upcasts[ upcasts.pop() ], widgetDef.name, priority ); + } + } + // Single rule which is automatically activated. + else { + addUpcast( upcast, widgetDef.name, priority ); + } + + function addUpcast( upcast, name, priority ) { + // Find index of the first higher (in terms of value) priority upcast. + var index = CKEDITOR.tools.getIndex( widgetsRepo._.upcasts, function( element ) { + return element[ 2 ] > priority; + } ); + // Add at the end if it is the highest priority so far. + if ( index < 0 ) { + index = widgetsRepo._.upcasts.length; + } + + widgetsRepo._.upcasts.splice( index, 0, [ upcast, name, priority ] ); + } + } + + function blurWidget( widgetsRepo, widget ) { + widgetsRepo.focused = null; + + if ( widget.isInited() ) { + var isDirty = widget.editor.checkDirty(); + + // Widget could be destroyed in the meantime - e.g. data could be set. + widgetsRepo.fire( 'widgetBlurred', { widget: widget } ); + widget.setFocused( false ); + + !isDirty && widget.editor.resetDirty(); + } + } + + function checkWidgets( evt ) { + var options = evt.data; + + if ( this.editor.mode != 'wysiwyg' ) + return; + + var editable = this.editor.editable(), + instances = this.instances, + newInstances, i, count, wrapper, notYetInitialized; + + if ( !editable ) + return; + + // Remove widgets which have no corresponding elements in DOM. + for ( i in instances ) { + // http://dev.ckeditor.com/ticket/13410 Remove widgets that are ready. This prevents from destroying widgets that are during loading process. + if ( instances[ i ].isReady() && !editable.contains( instances[ i ].wrapper ) ) + this.destroy( instances[ i ], true ); + } + + // Init on all (new) if initOnlyNew option was passed. + if ( options && options.initOnlyNew ) + newInstances = this.initOnAll(); + else { + var wrappers = editable.find( '.cke_widget_wrapper' ); + newInstances = []; + + // Create widgets on existing wrappers if they do not exists. + for ( i = 0, count = wrappers.count(); i < count; i++ ) { + wrapper = wrappers.getItem( i ); + notYetInitialized = !this.getByElement( wrapper, true ); + + // Check if: + // * there's no instance for this widget + // * wrapper is not inside some temporary element like copybin (http://dev.ckeditor.com/ticket/11088) + // * it was a nested widget's wrapper which has been detached from DOM, + // when nested editable has been initialized (it overwrites its innerHTML + // and initializes nested widgets). + if ( notYetInitialized && !findParent( wrapper, isDomTemp ) && editable.contains( wrapper ) ) { + // Add cke_widget_new class because otherwise + // widget will not be created on such wrapper. + wrapper.addClass( 'cke_widget_new' ); + newInstances.push( this.initOn( wrapper.getFirst( Widget.isDomWidgetElement ) ) ); + } + } + } + + // If only single widget was initialized and focusInited was passed, focus it. + if ( options && options.focusInited && newInstances.length == 1 ) + newInstances[ 0 ].focus(); + } + + // Unwraps widget element and clean up element. + // + // This function is used to clean up pasted widgets. + // It should have similar result to widget#destroy plus + // some additional adjustments, specific for pasting. + // + // @param {CKEDITOR.htmlParser.element} el + function cleanUpWidgetElement( el ) { + var parent = el.parent; + if ( parent.type == CKEDITOR.NODE_ELEMENT && parent.attributes[ 'data-cke-widget-wrapper' ] ) + parent.replaceWith( el ); + } + + // Similar to cleanUpWidgetElement, but works on DOM and finds + // widget elements by its own. + // + // Unlike cleanUpWidgetElement it will wrap element back. + // + // @param {CKEDITOR.dom.element} container + function cleanUpAllWidgetElements( widgetsRepo, container ) { + var wrappers = container.find( '.cke_widget_wrapper' ), + wrapper, element, + i = 0, + l = wrappers.count(); + + for ( ; i < l; ++i ) { + wrapper = wrappers.getItem( i ); + element = wrapper.getFirst( Widget.isDomWidgetElement ); + // If wrapper contains widget element - unwrap it and wrap again. + if ( element.type == CKEDITOR.NODE_ELEMENT && element.data( 'widget' ) ) { + element.replace( wrapper ); + widgetsRepo.wrapElement( element ); + } else { + // Otherwise - something is wrong... clean this up. + wrapper.remove(); + } + } + } + + // Creates {@link CKEDITOR.filter} instance for given widget, editable and rules. + // + // Once filter for widget-editable pair is created it is cached, so the same instance + // will be returned when method is executed again. + // + // @param {String} widgetName + // @param {String} editableName + // @param {CKEDITOR.plugins.widget.nestedEditableDefinition} editableDefinition The nested editable definition. + // @returns {CKEDITOR.filter} Filter instance or `null` if rules are not defined. + // @context CKEDITOR.plugins.widget.repository + function createEditableFilter( widgetName, editableName, editableDefinition ) { + if ( !editableDefinition.allowedContent && !editableDefinition.disallowedContent ) + return null; + + var editables = this._.filters[ widgetName ]; + + if ( !editables ) + this._.filters[ widgetName ] = editables = {}; + + var filter = editables[ editableName ]; + + if ( !filter ) { + filter = editableDefinition.allowedContent ? new CKEDITOR.filter( editableDefinition.allowedContent ) : this.editor.filter.clone(); + + editables[ editableName ] = filter; + + if ( editableDefinition.disallowedContent ) { + filter.disallow( editableDefinition.disallowedContent ); + } + } + + return filter; + } + + // Creates an iterator function which when executed on all + // elements in DOM tree will gather elements that should be wrapped + // and initialized as widgets. + function createUpcastIterator( widgetsRepo ) { + var toBeWrapped = [], + upcasts = widgetsRepo._.upcasts, + upcastCallbacks = widgetsRepo._.upcastCallbacks; + + return { + toBeWrapped: toBeWrapped, + + iterator: function( element ) { + var upcast, upcasted, + data, + i, + upcastsLength, + upcastCallbacksLength; + + // Wrapper found - find widget element, add it to be + // cleaned up (unwrapped) and wrapped and stop iterating in this branch. + if ( 'data-cke-widget-wrapper' in element.attributes ) { + element = element.getFirst( Widget.isParserWidgetElement ); + + if ( element ) + toBeWrapped.push( [ element ] ); + + // Do not iterate over descendants. + return false; + } + // Widget element found - add it to be cleaned up (just in case) + // and wrapped and stop iterating in this branch. + else if ( 'data-widget' in element.attributes ) { + toBeWrapped.push( [ element ] ); + + // Do not iterate over descendants. + return false; + } + else if ( ( upcastsLength = upcasts.length ) ) { + // Ignore elements with data-cke-widget-upcasted to avoid multiple upcasts (http://dev.ckeditor.com/ticket/11533). + // Do not iterate over descendants. + if ( element.attributes[ 'data-cke-widget-upcasted' ] ) + return false; + + // Check element with upcast callbacks first. + // If any of them return false abort upcasting. + for ( i = 0, upcastCallbacksLength = upcastCallbacks.length; i < upcastCallbacksLength; ++i ) { + if ( upcastCallbacks[ i ]( element ) === false ) + return; + // Return nothing in order to continue iterating over ascendants. + // See http://dev.ckeditor.com/ticket/11186#comment:6 + } + + for ( i = 0; i < upcastsLength; ++i ) { + upcast = upcasts[ i ]; + data = {}; + + if ( ( upcasted = upcast[ 0 ]( element, data ) ) ) { + // If upcast function returned element, upcast this one. + // It can be e.g. a new element wrapping the original one. + if ( upcasted instanceof CKEDITOR.htmlParser.element ) + element = upcasted; + + // Set initial data attr with data from upcast method. + element.attributes[ 'data-cke-widget-data' ] = encodeURIComponent( JSON.stringify( data ) ); + element.attributes[ 'data-cke-widget-upcasted' ] = 1; + + toBeWrapped.push( [ element, upcast[ 1 ] ] ); + + // Do not iterate over descendants. + return false; + } + } + } + } + }; + } + + // Finds a first parent that matches query. + // + // @param {CKEDITOR.dom.element} element + // @param {Function} query + function findParent( element, query ) { + var parent = element; + + while ( ( parent = parent.getParent() ) ) { + if ( query( parent ) ) + return true; + } + return false; + } + + function getWrapperAttributes( inlineWidget, name ) { + return { + // tabindex="-1" means that it can receive focus by code. + tabindex: -1, + contenteditable: 'false', + 'data-cke-widget-wrapper': 1, + 'data-cke-filter': 'off', + // Class cke_widget_new marks widgets which haven't been initialized yet. + 'class': 'cke_widget_wrapper cke_widget_new cke_widget_' + + ( inlineWidget ? 'inline' : 'block' ) + + ( name ? ' cke_widget_' + name : '' ) + }; + } + + // Inserts element at given index. + // It will check DTD and split ancestor elements up to the first + // that can contain this element. + // + // @param {CKEDITOR.htmlParser.element} parent + // @param {Number} index + // @param {CKEDITOR.htmlParser.element} element + function insertElement( parent, index, element ) { + // Do not split doc fragment... + if ( parent.type == CKEDITOR.NODE_ELEMENT ) { + var parentAllows = CKEDITOR.dtd[ parent.name ]; + // Parent element is known (included in DTD) and cannot contain + // this element. + if ( parentAllows && !parentAllows[ element.name ] ) { + var parent2 = parent.split( index ), + parentParent = parent.parent; + + // Element will now be inserted at right parent's index. + index = parent2.getIndex(); + + // If left part of split is empty - remove it. + if ( !parent.children.length ) { + index -= 1; + parent.remove(); + } + + // If right part of split is empty - remove it. + if ( !parent2.children.length ) + parent2.remove(); + + // Try inserting as grandpas' children. + return insertElement( parentParent, index, element ); + } + } + + // Finally we can add this element. + parent.add( element, index ); + } + + // Checks whether for the given widget definition and element widget should be created in inline or block mode. + // + // See also: {@link CKEDITOR.plugins.widget.definition#inline} and {@link CKEDITOR.plugins.widget#element}. + // + // @param {CKEDITOR.plugins.widget.definition} widgetDef The widget definition. + // @param {String} elementName The name of the widget element. + // @returns {Boolean} + function isWidgetInline( widgetDef, elementName ) { + return typeof widgetDef.inline == 'boolean' ? widgetDef.inline : !!CKEDITOR.dtd.$inline[ elementName ]; + } + + // @param {CKEDITOR.dom.element} + // @returns {Boolean} + function isDomTemp( element ) { + return element.hasAttribute( 'data-cke-temp' ); + } + + function onEditableKey( widget, keyCode ) { + var focusedEditable = widget.focusedEditable, + range; + + // CTRL+A. + if ( keyCode == CKEDITOR.CTRL + 65 ) { + var bogus = focusedEditable.getBogus(); + + range = widget.editor.createRange(); + range.selectNodeContents( focusedEditable ); + // Exclude bogus if exists. + if ( bogus ) + range.setEndAt( bogus, CKEDITOR.POSITION_BEFORE_START ); + + range.select(); + // Cancel event - block default. + return false; + } + // DEL or BACKSPACE. + else if ( keyCode == 8 || keyCode == 46 ) { + var ranges = widget.editor.getSelection().getRanges(); + + range = ranges[ 0 ]; + + // Block del or backspace if at editable's boundary. + return !( ranges.length == 1 && range.collapsed && + range.checkBoundaryOfElement( focusedEditable, CKEDITOR[ keyCode == 8 ? 'START' : 'END' ] ) ); + } + } + + function setFocusedEditable( widgetsRepo, widget, editableElement, offline ) { + var editor = widgetsRepo.editor; + + editor.fire( 'lockSnapshot' ); + + if ( editableElement ) { + var editableName = editableElement.data( 'cke-widget-editable' ), + editableInstance = widget.editables[ editableName ]; + + widgetsRepo.widgetHoldingFocusedEditable = widget; + widget.focusedEditable = editableInstance; + editableElement.addClass( 'cke_widget_editable_focused' ); + + if ( editableInstance.filter ) + editor.setActiveFilter( editableInstance.filter ); + editor.setActiveEnterMode( editableInstance.enterMode, editableInstance.shiftEnterMode ); + } else { + if ( !offline ) + widget.focusedEditable.removeClass( 'cke_widget_editable_focused' ); + + widget.focusedEditable = null; + widgetsRepo.widgetHoldingFocusedEditable = null; + editor.setActiveFilter( null ); + editor.setActiveEnterMode( null, null ); + } + + editor.fire( 'unlockSnapshot' ); + } + + function setupContextMenu( editor ) { + if ( !editor.contextMenu ) + return; + + editor.contextMenu.addListener( function( element ) { + var widget = editor.widgets.getByElement( element, true ); + + if ( widget ) + return widget.fire( 'contextMenu', {} ); + } ); + } + + // And now we've got two problems - original problem and RegExp. + // Some softeners: + // * FF tends to copy all blocks up to the copybin container. + // * IE tends to copy only the copybin, without its container. + // * We use spans on IE and blockless editors, but divs in other cases. + var pasteReplaceRegex = new RegExp( + '^' + + '(?:<(?:div|span)(?: data-cke-temp="1")?(?: id="cke_copybin")?(?: data-cke-temp="1")?>)?' + + '(?:<(?:div|span)(?: style="[^"]+")?>)?' + + ']*data-cke-copybin-start="1"[^>]*>.?([\\s\\S]+)]*data-cke-copybin-end="1"[^>]*>.?' + + '(?:)?' + + '(?:)?' + + '$', + // IE8 prefers uppercase when browsers stick to lowercase HTML (http://dev.ckeditor.com/ticket/13460). + 'i' + ); + + function pasteReplaceFn( match, wrapperHtml ) { + // Avoid polluting pasted data with any whitspaces, + // what's going to break check whether only one widget was pasted. + return CKEDITOR.tools.trim( wrapperHtml ); + } + + function setupDragAndDrop( widgetsRepo ) { + var editor = widgetsRepo.editor, + lineutils = CKEDITOR.plugins.lineutils; + + // These listeners handle inline and block widgets drag and drop. + // The only thing we need to do to make block widgets custom drag and drop functionality + // is to fire those events with the right properties (like the target which must be the drag handle). + editor.on( 'dragstart', function( evt ) { + var target = evt.data.target; + + if ( Widget.isDomDragHandler( target ) ) { + var widget = widgetsRepo.getByElement( target ); + + evt.data.dataTransfer.setData( 'cke/widget-id', widget.id ); + + // IE needs focus. + editor.focus(); + + // and widget need to be focused on drag start (http://dev.ckeditor.com/ticket/12172#comment:10). + widget.focus(); + } + } ); + + editor.on( 'drop', function( evt ) { + var dataTransfer = evt.data.dataTransfer, + id = dataTransfer.getData( 'cke/widget-id' ), + transferType = dataTransfer.getTransferType( editor ), + dragRange = editor.createRange(), + sourceWidget; + + // Disable cross-editor drag & drop for widgets - http://dev.ckeditor.com/ticket/13599. + if ( id !== '' && transferType === CKEDITOR.DATA_TRANSFER_CROSS_EDITORS ) { + evt.cancel(); + return; + } + + if ( id === '' || transferType != CKEDITOR.DATA_TRANSFER_INTERNAL ) { + return; + } + + sourceWidget = widgetsRepo.instances[ id ]; + if ( !sourceWidget ) { + return; + } + + dragRange.setStartBefore( sourceWidget.wrapper ); + dragRange.setEndAfter( sourceWidget.wrapper ); + evt.data.dragRange = dragRange; + + // [IE8-9] Reset state of the clipboard#fixSplitNodesAfterDrop fix because by setting evt.data.dragRange + // (see above) after drop happened we do not need it. That fix is needed only if dragRange was created + // before drop (before text node was split). + delete CKEDITOR.plugins.clipboard.dragStartContainerChildCount; + delete CKEDITOR.plugins.clipboard.dragEndContainerChildCount; + + evt.data.dataTransfer.setData( 'text/html', editor.editable().getHtmlFromRange( dragRange ).getHtml() ); + editor.widgets.destroy( sourceWidget, true ); + } ); + + editor.on( 'contentDom', function() { + var editable = editor.editable(); + + // Register Lineutils's utilities as properties of repo. + CKEDITOR.tools.extend( widgetsRepo, { + finder: new lineutils.finder( editor, { + lookups: { + // Element is block but not list item and not in nested editable. + 'default': function( el ) { + if ( el.is( CKEDITOR.dtd.$listItem ) ) + return; + + if ( !el.is( CKEDITOR.dtd.$block ) ) + return; + + // Allow drop line inside, but never before or after nested editable (http://dev.ckeditor.com/ticket/12006). + if ( Widget.isDomNestedEditable( el ) ) + return; + + // Do not allow droping inside the widget being dragged (http://dev.ckeditor.com/ticket/13397). + if ( widgetsRepo._.draggedWidget.wrapper.contains( el ) ) { + return; + } + + // If element is nested editable, make sure widget can be dropped there (http://dev.ckeditor.com/ticket/12006). + var nestedEditable = Widget.getNestedEditable( editable, el ); + if ( nestedEditable ) { + var draggedWidget = widgetsRepo._.draggedWidget; + + // Don't let the widget to be dropped into its own nested editable. + if ( widgetsRepo.getByElement( nestedEditable ) == draggedWidget ) + return; + + var filter = CKEDITOR.filter.instances[ nestedEditable.data( 'cke-filter' ) ], + draggedRequiredContent = draggedWidget.requiredContent; + + // There will be no relation if the filter of nested editable does not allow + // requiredContent of dragged widget. + if ( filter && draggedRequiredContent && !filter.check( draggedRequiredContent ) ) + return; + } + + return CKEDITOR.LINEUTILS_BEFORE | CKEDITOR.LINEUTILS_AFTER; + } + } + } ), + locator: new lineutils.locator( editor ), + liner: new lineutils.liner( editor, { + lineStyle: { + cursor: 'move !important', + 'border-top-color': '#666' + }, + tipLeftStyle: { + 'border-left-color': '#666' + }, + tipRightStyle: { + 'border-right-color': '#666' + } + } ) + }, true ); + } ); + } + + // Setup mouse observer which will trigger: + // * widget focus on widget click, + // * widget#doubleclick forwarded from editor#doubleclick. + function setupMouseObserver( widgetsRepo ) { + var editor = widgetsRepo.editor; + + editor.on( 'contentDom', function() { + var editable = editor.editable(), + evtRoot = editable.isInline() ? editable : editor.document, + widget, + mouseDownOnDragHandler; + + editable.attachListener( evtRoot, 'mousedown', function( evt ) { + var target = evt.data.getTarget(); + + // Clicking scrollbar in Chrome will invoke event with target object of document type (#663). + // In IE8 the target object will be empty (http://dev.ckeditor.com/ticket/10887). + // We need to check if target is a proper element. + widget = ( target instanceof CKEDITOR.dom.element ) ? widgetsRepo.getByElement( target ) : null; + + mouseDownOnDragHandler = 0; // Reset. + + // Widget was clicked, but not editable nested in it. + if ( widget ) { + // Ignore mousedown on drag and drop handler if the widget is inline. + // Block widgets are handled by Lineutils. + if ( widget.inline && target.type == CKEDITOR.NODE_ELEMENT && target.hasAttribute( 'data-cke-widget-drag-handler' ) ) { + mouseDownOnDragHandler = 1; + + // When drag handler is pressed we have to clear current selection if it wasn't already on this widget. + // Otherwise, the selection may be in a fillingChar, which prevents dragging a widget. (http://dev.ckeditor.com/ticket/13284, see comment 8 and 9.) + if ( widgetsRepo.focused != widget ) + editor.getSelection().removeAllRanges(); + + return; + } + + if ( !Widget.getNestedEditable( widget.wrapper, target ) ) { + evt.data.preventDefault(); + if ( !CKEDITOR.env.ie ) + widget.focus(); + } else { + // Reset widget so mouseup listener is not confused. + widget = null; + } + } + } ); + + // Focus widget on mouseup if mousedown was fired on drag handler. + // Note: mouseup won't be fired at all if widget was dragged and dropped, so + // this code will be executed only when drag handler was clicked. + editable.attachListener( evtRoot, 'mouseup', function() { + // Check if widget is not destroyed (if widget is destroyed the wrapper will be null). + if ( mouseDownOnDragHandler && widget && widget.wrapper ) { + mouseDownOnDragHandler = 0; + widget.focus(); + } + } ); + + // On IE it is not enough to block mousedown. If widget wrapper (element with + // contenteditable=false attribute) is clicked directly (it is a target), + // then after mouseup/click IE will select that element. + // It is not possible to prevent that default action, + // so we force fake selection after everything happened. + if ( CKEDITOR.env.ie ) { + editable.attachListener( evtRoot, 'mouseup', function() { + setTimeout( function() { + // Check if widget is not destroyed (if widget is destroyed the wrapper will be null) and + // in editable contains widget (it could be dragged and removed). + if ( widget && widget.wrapper && editable.contains( widget.wrapper ) ) { + widget.focus(); + widget = null; + } + } ); + } ); + } + } ); + + editor.on( 'doubleclick', function( evt ) { + var widget = widgetsRepo.getByElement( evt.data.element ); + + // Not in widget or in nested editable. + if ( !widget || Widget.getNestedEditable( widget.wrapper, evt.data.element ) ) + return; + + return widget.fire( 'doubleclick', { element: evt.data.element } ); + }, null, null, 1 ); + } + + // Setup editor#key observer which will forward it + // to focused widget. + function setupKeyboardObserver( widgetsRepo ) { + var editor = widgetsRepo.editor; + + editor.on( 'key', function( evt ) { + var focused = widgetsRepo.focused, + widgetHoldingFocusedEditable = widgetsRepo.widgetHoldingFocusedEditable, + ret; + + if ( focused ) + ret = focused.fire( 'key', { keyCode: evt.data.keyCode } ); + else if ( widgetHoldingFocusedEditable ) + ret = onEditableKey( widgetHoldingFocusedEditable, evt.data.keyCode ); + + return ret; + }, null, null, 1 ); + } + + // Setup copybin on native copy and cut events in order to handle copy and cut commands + // if user accepted security alert on IEs. + // Note: when copying or cutting using keystroke, copySingleWidget will be first executed + // by the keydown listener. Conflict between two calls will be resolved by copy_bin existence check. + function setupNativeCutAndCopy( widgetsRepo ) { + var editor = widgetsRepo.editor; + + editor.on( 'contentDom', function() { + var editable = editor.editable(); + + editable.attachListener( editable, 'copy', eventListener ); + editable.attachListener( editable, 'cut', eventListener ); + } ); + + function eventListener( evt ) { + if ( widgetsRepo.focused ) + copySingleWidget( widgetsRepo.focused, evt.name == 'cut' ); + } + } + + // Setup selection observer which will trigger: + // * widget select & focus on selection change, + // * nested editable focus (related properites and classes) on selection change, + // * deselecting and blurring all widgets on data, + // * blurring widget on editor blur. + function setupSelectionObserver( widgetsRepo ) { + var editor = widgetsRepo.editor; + + editor.on( 'selectionCheck', function() { + widgetsRepo.fire( 'checkSelection' ); + } ); + + widgetsRepo.on( 'checkSelection', widgetsRepo.checkSelection, widgetsRepo ); + + editor.on( 'selectionChange', function( evt ) { + var nestedEditable = Widget.getNestedEditable( editor.editable(), evt.data.selection.getStartElement() ), + newWidget = nestedEditable && widgetsRepo.getByElement( nestedEditable ), + oldWidget = widgetsRepo.widgetHoldingFocusedEditable; + + if ( oldWidget ) { + if ( oldWidget !== newWidget || !oldWidget.focusedEditable.equals( nestedEditable ) ) { + setFocusedEditable( widgetsRepo, oldWidget, null ); + + if ( newWidget && nestedEditable ) + setFocusedEditable( widgetsRepo, newWidget, nestedEditable ); + } + } + // It may happen that there's no widget even if editable was found - + // e.g. if selection was automatically set in editable although widget wasn't initialized yet. + else if ( newWidget && nestedEditable ) { + setFocusedEditable( widgetsRepo, newWidget, nestedEditable ); + } + } ); + + // Invalidate old widgets early - immediately on dataReady. + editor.on( 'dataReady', function() { + // Deselect and blur all widgets. + stateUpdater( widgetsRepo ).commit(); + } ); + + editor.on( 'blur', function() { + var widget; + + if ( ( widget = widgetsRepo.focused ) ) + blurWidget( widgetsRepo, widget ); + + if ( ( widget = widgetsRepo.widgetHoldingFocusedEditable ) ) + setFocusedEditable( widgetsRepo, widget, null ); + } ); + } + + // Set up actions like: + // * processing in toHtml/toDataFormat, + // * pasting handling, + // * insertion handling, + // * editable reload handling (setData, mode switch, undo/redo), + // * DOM invalidation handling, + // * widgets checks. + function setupWidgetsLifecycle( widgetsRepo ) { + setupWidgetsLifecycleStart( widgetsRepo ); + setupWidgetsLifecycleEnd( widgetsRepo ); + + widgetsRepo.on( 'checkWidgets', checkWidgets ); + widgetsRepo.editor.on( 'contentDomInvalidated', widgetsRepo.checkWidgets, widgetsRepo ); + } + + function setupWidgetsLifecycleEnd( widgetsRepo ) { + var editor = widgetsRepo.editor, + downcastingSessions = {}; + + // Listen before htmlDP#htmlFilter is applied to cache all widgets, because we'll + // loose data-cke-* attributes. + editor.on( 'toDataFormat', function( evt ) { + // To avoid conflicts between htmlDP#toDF calls done at the same time + // (e.g. nestedEditable#getData called during downcasting some widget) + // mark every toDataFormat event chain with the downcasting session id. + var id = CKEDITOR.tools.getNextNumber(), + toBeDowncasted = []; + evt.data.downcastingSessionId = id; + downcastingSessions[ id ] = toBeDowncasted; + + evt.data.dataValue.forEach( function( element ) { + var attrs = element.attributes, + widget, widgetElement; + + // Wrapper. + // Perform first part of downcasting (cleanup) and cache widgets, + // because after applying DP's filter all data-cke-* attributes will be gone. + if ( 'data-cke-widget-id' in attrs ) { + widget = widgetsRepo.instances[ attrs[ 'data-cke-widget-id' ] ]; + if ( widget ) { + widgetElement = element.getFirst( Widget.isParserWidgetElement ); + toBeDowncasted.push( { + wrapper: element, + element: widgetElement, + widget: widget, + editables: {} + } ); + + // If widget did not have data-cke-widget attribute before upcasting remove it. + if ( widgetElement.attributes[ 'data-cke-widget-keep-attr' ] != '1' ) + delete widgetElement.attributes[ 'data-widget' ]; + } + } + // Nested editable. + else if ( 'data-cke-widget-editable' in attrs ) { + // Save the reference to this nested editable in the closest widget to be downcasted. + // Nested editables are downcasted in the successive toDataFormat to create an opportunity + // for dataFilter's "excludeNestedEditable" option to do its job (that option relies on + // contenteditable="true" attribute) (http://dev.ckeditor.com/ticket/11372). + toBeDowncasted[ toBeDowncasted.length - 1 ].editables[ attrs[ 'data-cke-widget-editable' ] ] = element; + + // Don't check children - there won't be next wrapper or nested editable which we + // should process in this session. + return false; + } + }, CKEDITOR.NODE_ELEMENT, true ); + }, null, null, 8 ); + + // Listen after dataProcessor.htmlFilter and ACF were applied + // so wrappers securing widgets' contents are removed after all filtering was done. + editor.on( 'toDataFormat', function( evt ) { + // Ignore some unmarked sessions. + if ( !evt.data.downcastingSessionId ) + return; + + var toBeDowncasted = downcastingSessions[ evt.data.downcastingSessionId ], + toBe, widget, widgetElement, retElement, editableElement, e; + + while ( ( toBe = toBeDowncasted.shift() ) ) { + widget = toBe.widget; + widgetElement = toBe.element; + retElement = widget._.downcastFn && widget._.downcastFn.call( widget, widgetElement ); + + // Replace nested editables' content with their output data. + for ( e in toBe.editables ) { + editableElement = toBe.editables[ e ]; + + delete editableElement.attributes.contenteditable; + editableElement.setHtml( widget.editables[ e ].getData() ); + } + + // Returned element always defaults to widgetElement. + if ( !retElement ) + retElement = widgetElement; + + toBe.wrapper.replaceWith( retElement ); + } + }, null, null, 13 ); + + + editor.on( 'contentDomUnload', function() { + widgetsRepo.destroyAll( true ); + } ); + } + + function setupWidgetsLifecycleStart( widgetsRepo ) { + var editor = widgetsRepo.editor, + processedWidgetOnly, + snapshotLoaded; + + // Listen after ACF (so data are filtered), + // but before dataProcessor.dataFilter was applied (so we can secure widgets' internals). + editor.on( 'toHtml', function( evt ) { + var upcastIterator = createUpcastIterator( widgetsRepo ), + toBeWrapped; + + evt.data.dataValue.forEach( upcastIterator.iterator, CKEDITOR.NODE_ELEMENT, true ); + + // Clean up and wrap all queued elements. + while ( ( toBeWrapped = upcastIterator.toBeWrapped.pop() ) ) { + cleanUpWidgetElement( toBeWrapped[ 0 ] ); + widgetsRepo.wrapElement( toBeWrapped[ 0 ], toBeWrapped[ 1 ] ); + } + + // Used to determine whether only widget was pasted. + if ( evt.data.protectedWhitespaces ) { + // Whitespaces are protected by wrapping content with spans. Take the middle node only. + processedWidgetOnly = evt.data.dataValue.children.length == 3 && + Widget.isParserWidgetWrapper( evt.data.dataValue.children[ 1 ] ); + } else { + processedWidgetOnly = evt.data.dataValue.children.length == 1 && + Widget.isParserWidgetWrapper( evt.data.dataValue.children[ 0 ] ); + } + }, null, null, 8 ); + + editor.on( 'dataReady', function() { + // Clean up all widgets loaded from snapshot. + if ( snapshotLoaded ) + cleanUpAllWidgetElements( widgetsRepo, editor.editable() ); + snapshotLoaded = 0; + + // Some widgets were destroyed on contentDomUnload, + // some on loadSnapshot, but that does not include + // e.g. setHtml on inline editor or widgets removed just + // before setting data. + widgetsRepo.destroyAll( true ); + widgetsRepo.initOnAll(); + } ); + + // Set flag so dataReady will know that additional + // cleanup is needed, because snapshot containing widgets was loaded. + editor.on( 'loadSnapshot', function( evt ) { + // Primitive but sufficient check which will prevent from executing + // heavier cleanUpAllWidgetElements if not needed. + if ( ( /data-cke-widget/ ).test( evt.data ) ) + snapshotLoaded = 1; + + widgetsRepo.destroyAll( true ); + }, null, null, 9 ); + + // Handle pasted single widget. + editor.on( 'paste', function( evt ) { + var data = evt.data; + + data.dataValue = data.dataValue.replace( pasteReplaceRegex, pasteReplaceFn ); + + // If drag'n'drop kind of paste into nested editable (data.range), selection is set AFTER + // data is pasted, which means editor has no chance to change activeFilter's context. + // As a result, pasted data is filtered with default editor's filter instead of NE's and + // funny things get inserted. Changing the filter by analysis of the paste range below (http://dev.ckeditor.com/ticket/13186). + if ( data.range ) { + // Check if pasting into nested editable. + var nestedEditable = Widget.getNestedEditable( editor.editable(), data.range.startContainer ); + + if ( nestedEditable ) { + // Retrieve the filter from NE's data and set it active before editor.insertHtml is done + // in clipboard plugin. + var filter = CKEDITOR.filter.instances[ nestedEditable.data( 'cke-filter' ) ]; + + if ( filter ) { + editor.setActiveFilter( filter ); + } + } + } + } ); + + // Listen with high priority to check widgets after data was inserted. + editor.on( 'afterInsertHtml', function( evt ) { + if ( evt.data.intoRange ) { + widgetsRepo.checkWidgets( { initOnlyNew: true } ); + } else { + editor.fire( 'lockSnapshot' ); + // Init only new for performance reason. + // Focus inited if only widget was processed. + widgetsRepo.checkWidgets( { initOnlyNew: true, focusInited: processedWidgetOnly } ); + + editor.fire( 'unlockSnapshot' ); + } + } ); + } + + // Helper for coordinating which widgets should be + // selected/deselected and which one should be focused/blurred. + function stateUpdater( widgetsRepo ) { + var currentlySelected = widgetsRepo.selected, + toBeSelected = [], + toBeDeselected = currentlySelected.slice( 0 ), + focused = null; + + return { + select: function( widget ) { + if ( CKEDITOR.tools.indexOf( currentlySelected, widget ) < 0 ) + toBeSelected.push( widget ); + + var index = CKEDITOR.tools.indexOf( toBeDeselected, widget ); + if ( index >= 0 ) + toBeDeselected.splice( index, 1 ); + + return this; + }, + + focus: function( widget ) { + focused = widget; + return this; + }, + + commit: function() { + var focusedChanged = widgetsRepo.focused !== focused, + widget, isDirty; + + widgetsRepo.editor.fire( 'lockSnapshot' ); + + if ( focusedChanged && ( widget = widgetsRepo.focused ) ) + blurWidget( widgetsRepo, widget ); + + while ( ( widget = toBeDeselected.pop() ) ) { + currentlySelected.splice( CKEDITOR.tools.indexOf( currentlySelected, widget ), 1 ); + // Widget could be destroyed in the meantime - e.g. data could be set. + if ( widget.isInited() ) { + isDirty = widget.editor.checkDirty(); + + widget.setSelected( false ); + + !isDirty && widget.editor.resetDirty(); + } + } + + if ( focusedChanged && focused ) { + isDirty = widgetsRepo.editor.checkDirty(); + + widgetsRepo.focused = focused; + widgetsRepo.fire( 'widgetFocused', { widget: focused } ); + focused.setFocused( true ); + + !isDirty && widgetsRepo.editor.resetDirty(); + } + + while ( ( widget = toBeSelected.pop() ) ) { + currentlySelected.push( widget ); + widget.setSelected( true ); + } + + widgetsRepo.editor.fire( 'unlockSnapshot' ); + } + }; + } + + + // + // WIDGET helpers --------------------------------------------------------- + // + + // LEFT, RIGHT, UP, DOWN, DEL, BACKSPACE - unblock default fake sel handlers. + var keystrokesNotBlockedByWidget = { 37: 1, 38: 1, 39: 1, 40: 1, 8: 1, 46: 1 }; + + // Applies or removes style's classes from widget. + // @param {CKEDITOR.style} style Custom widget style. + // @param {Boolean} apply Whether to apply or remove style. + function applyRemoveStyle( widget, style, apply ) { + var changed = 0, + classes = getStyleClasses( style ), + updatedClasses = widget.data.classes || {}, + cl; + + // Ee... Something is wrong with this style. + if ( !classes ) + return; + + // Clone, because we need to break reference. + updatedClasses = CKEDITOR.tools.clone( updatedClasses ); + + while ( ( cl = classes.pop() ) ) { + if ( apply ) { + if ( !updatedClasses[ cl ] ) + changed = updatedClasses[ cl ] = 1; + } else { + if ( updatedClasses[ cl ] ) { + delete updatedClasses[ cl ]; + changed = 1; + } + } + } + if ( changed ) + widget.setData( 'classes', updatedClasses ); + } + + function cancel( evt ) { + evt.cancel(); + } + + function copySingleWidget( widget, isCut ) { + var editor = widget.editor, + doc = editor.document; + + // We're still handling previous copy/cut. + // When keystroke is used to copy/cut this will also prevent + // conflict with copySingleWidget called again for native copy/cut event. + if ( doc.getById( 'cke_copybin' ) ) + return; + + // [IE] Use span for copybin and its container to avoid bug with expanding editable height by + // absolutely positioned element. + var copybinName = ( editor.blockless || CKEDITOR.env.ie ) ? 'span' : 'div', + copybin = doc.createElement( copybinName ), + copybinContainer = doc.createElement( copybinName ), + // IE8 always jumps to the end of document. + needsScrollHack = CKEDITOR.env.ie && CKEDITOR.env.version < 9; + + copybinContainer.setAttributes( { + id: 'cke_copybin', + 'data-cke-temp': '1' + } ); + + // Position copybin element outside current viewport. + copybin.setStyles( { + position: 'absolute', + width: '1px', + height: '1px', + overflow: 'hidden' + } ); + + copybin.setStyle( editor.config.contentsLangDirection == 'ltr' ? 'left' : 'right', '-5000px' ); + + var range = editor.createRange(); + range.setStartBefore( widget.wrapper ); + range.setEndAfter( widget.wrapper ); + + copybin.setHtml( + '\u200b' + + editor.editable().getHtmlFromRange( range ).getHtml() + + '\u200b' ); + + // Save snapshot with the current state. + editor.fire( 'saveSnapshot' ); + + // Ignore copybin. + editor.fire( 'lockSnapshot' ); + + copybinContainer.append( copybin ); + editor.editable().append( copybinContainer ); + + var listener1 = editor.on( 'selectionChange', cancel, null, null, 0 ), + listener2 = widget.repository.on( 'checkSelection', cancel, null, null, 0 ); + + if ( needsScrollHack ) { + var docElement = doc.getDocumentElement().$, + scrollTop = docElement.scrollTop; + } + + // Once the clone of the widget is inside of copybin, select + // the entire contents. This selection will be copied by the + // native browser's clipboard system. + range = editor.createRange(); + range.selectNodeContents( copybin ); + range.select(); + + if ( needsScrollHack ) + docElement.scrollTop = scrollTop; + + setTimeout( function() { + // [IE] Focus widget before removing copybin to avoid scroll jump. + if ( !isCut ) + widget.focus(); + + copybinContainer.remove(); + + listener1.removeListener(); + listener2.removeListener(); + + editor.fire( 'unlockSnapshot' ); + + if ( isCut ) { + widget.repository.del( widget ); + editor.fire( 'saveSnapshot' ); + } + }, 100 ); // Use 100ms, so Chrome (@Mac) will be able to grab the content. + } + + // Extracts classes array from style instance. + function getStyleClasses( style ) { + var attrs = style.getDefinition().attributes, + classes = attrs && attrs[ 'class' ]; + + return classes ? classes.split( /\s+/ ) : null; + } + + // [IE] Force keeping focus because IE sometimes forgets to fire focus on main editable + // when blurring nested editable. + // @context widget + function onEditableBlur() { + var active = CKEDITOR.document.getActive(), + editor = this.editor, + editable = editor.editable(); + + // If focus stays within editor override blur and set currentActive because it should be + // automatically changed to editable on editable#focus but it is not fired. + if ( ( editable.isInline() ? editable : editor.document.getWindow().getFrame() ).equals( active ) ) + editor.focusManager.focus( editable ); + } + + // Force selectionChange when editable was focused. + // Similar to hack in selection.js#~620. + // @context widget + function onEditableFocus() { + // Gecko does not support 'DOMFocusIn' event on which we unlock selection + // in selection.js to prevent selection locking when entering nested editables. + if ( CKEDITOR.env.gecko ) + this.editor.unlockSelection(); + + // We don't need to force selectionCheck on Webkit, because on Webkit + // we do that on DOMFocusIn in selection.js. + if ( !CKEDITOR.env.webkit ) { + this.editor.forceNextSelectionCheck(); + this.editor.selectionChange( 1 ); + } + } + + // Setup listener on widget#data which will update (remove/add) classes + // by comparing newly set classes with the old ones. + function setupDataClassesListener( widget ) { + // Note: previousClasses and newClasses may be null! + // Tip: for ( cl in null ) is correct. + var previousClasses = null; + + widget.on( 'data', function() { + var newClasses = this.data.classes, + cl; + + // When setting new classes one need to remember + // that he must break reference. + if ( previousClasses == newClasses ) + return; + + for ( cl in previousClasses ) { + // Avoid removing and adding classes again. + if ( !( newClasses && newClasses[ cl ] ) ) + this.removeClass( cl ); + } + for ( cl in newClasses ) + this.addClass( cl ); + + previousClasses = newClasses; + } ); + } + + // Add a listener to data event that will set/change widget's label (http://dev.ckeditor.com/ticket/14539). + function setupA11yListener( widget ) { + // Note, the function gets executed in a context of widget instance. + function getLabelDefault() { + return this.editor.lang.widget.label.replace( /%1/, this.pathName || this.element.getName() ); + } + + // Setting a listener on data is enough, there's no need to perform it on widget initialization, as + // setupWidgetData fires this event anyway. + widget.on( 'data', function() { + // In some cases widget might get destroyed in an earlier data listener. For instance, image2 plugin, does + // so when changing its internal state. + if ( !widget.wrapper ) { + return; + } + + var label = this.getLabel ? this.getLabel() : getLabelDefault.call( this ); + + widget.wrapper.setAttribute( 'role', 'region' ); + widget.wrapper.setAttribute( 'aria-label', label ); + }, null, null, 9999 ); + } + + function setupDragHandler( widget ) { + if ( !widget.draggable ) + return; + + var editor = widget.editor, + // Use getLast to find wrapper's direct descendant (http://dev.ckeditor.com/ticket/12022). + container = widget.wrapper.getLast( Widget.isDomDragHandlerContainer ), + img; + + // Reuse drag handler if already exists (http://dev.ckeditor.com/ticket/11281). + if ( container ) + img = container.findOne( 'img' ); + else { + container = new CKEDITOR.dom.element( 'span', editor.document ); + container.setAttributes( { + 'class': 'cke_reset cke_widget_drag_handler_container', + // Split background and background-image for IE8 which will break on rgba(). + style: 'background:rgba(220,220,220,0.5);background-image:url(' + editor.plugins.widget.path + 'images/handle.png)' + } ); + + img = new CKEDITOR.dom.element( 'img', editor.document ); + img.setAttributes( { + 'class': 'cke_reset cke_widget_drag_handler', + 'data-cke-widget-drag-handler': '1', + src: CKEDITOR.tools.transparentImageData, + width: DRAG_HANDLER_SIZE, + title: editor.lang.widget.move, + height: DRAG_HANDLER_SIZE, + role: 'presentation' + } ); + widget.inline && img.setAttribute( 'draggable', 'true' ); + + container.append( img ); + widget.wrapper.append( container ); + } + + // Preventing page reload when dropped content on widget wrapper (http://dev.ckeditor.com/ticket/13015). + // Widget is not editable so by default drop on it isn't allowed what means that + // browser handles it (there's no editable#drop event). If there's no drop event we cannot block + // the drop, so page is reloaded. This listener enables drop on widget wrappers. + widget.wrapper.on( 'dragover', function( evt ) { + evt.data.preventDefault(); + } ); + + widget.wrapper.on( 'mouseenter', widget.updateDragHandlerPosition, widget ); + setTimeout( function() { + widget.on( 'data', widget.updateDragHandlerPosition, widget ); + }, 50 ); + + if ( !widget.inline ) { + img.on( 'mousedown', onBlockWidgetDrag, widget ); + + // On IE8 'dragstart' is propagated to editable, so editor#dragstart is fired twice on block widgets. + if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 ) { + img.on( 'dragstart', function( evt ) { + evt.data.preventDefault( true ); + } ); + } + } + + widget.dragHandlerContainer = container; + } + + function onBlockWidgetDrag( evt ) { + var finder = this.repository.finder, + locator = this.repository.locator, + liner = this.repository.liner, + editor = this.editor, + editable = editor.editable(), + listeners = [], + sorted = [], + locations, + y; + + // Mark dragged widget for repository#finder. + this.repository._.draggedWidget = this; + + // Harvest all possible relations and display some closest. + var relations = finder.greedySearch(), + + buffer = CKEDITOR.tools.eventsBuffer( 50, function() { + locations = locator.locate( relations ); + + // There's only a single line displayed for D&D. + sorted = locator.sort( y, 1 ); + + if ( sorted.length ) { + liner.prepare( relations, locations ); + liner.placeLine( sorted[ 0 ] ); + liner.cleanup(); + } + } ); + + // Let's have the "dragging cursor" over entire editable. + editable.addClass( 'cke_widget_dragging' ); + + // Cache mouse position so it is re-used in events buffer. + listeners.push( editable.on( 'mousemove', function( evt ) { + y = evt.data.$.clientY; + buffer.input(); + } ) ); + + // Fire drag start as it happens during the native D&D. + editor.fire( 'dragstart', { target: evt.sender } ); + + function onMouseUp() { + var l; + + buffer.reset(); + + // Stop observing events. + while ( ( l = listeners.pop() ) ) + l.removeListener(); + + onBlockWidgetDrop.call( this, sorted, evt.sender ); + } + + // Mouseup means "drop". This is when the widget is being detached + // from DOM and placed at range determined by the line (location). + listeners.push( editor.document.once( 'mouseup', onMouseUp, this ) ); + + // Prevent calling 'onBlockWidgetDrop' twice in the inline editor. + // `removeListener` does not work if it is called at the same time event is fired. + if ( !editable.isInline() ) { + // Mouseup may occur when user hovers the line, which belongs to + // the outer document. This is, of course, a valid listener too. + listeners.push( CKEDITOR.document.once( 'mouseup', onMouseUp, this ) ); + } + } + + function onBlockWidgetDrop( sorted, dragTarget ) { + var finder = this.repository.finder, + liner = this.repository.liner, + editor = this.editor, + editable = this.editor.editable(); + + if ( !CKEDITOR.tools.isEmpty( liner.visible ) ) { + // Retrieve range for the closest location. + var dropRange = finder.getRange( sorted[ 0 ] ); + + // Focus widget (it could lost focus after mousedown+mouseup) + // and save this state as the one where we want to be taken back when undoing. + this.focus(); + + // Drag range will be set in the drop listener. + editor.fire( 'drop', { + dropRange: dropRange, + target: dropRange.startContainer + } ); + } + + // Clean-up custom cursor for editable. + editable.removeClass( 'cke_widget_dragging' ); + + // Clean-up all remaining lines. + liner.hideVisible(); + + // Clean-up drag & drop. + editor.fire( 'dragend', { target: dragTarget } ); + } + + function setupEditables( widget ) { + var editableName, + editableDef, + definedEditables = widget.editables; + + widget.editables = {}; + + if ( !widget.editables ) + return; + + for ( editableName in definedEditables ) { + editableDef = definedEditables[ editableName ]; + widget.initEditable( editableName, typeof editableDef == 'string' ? { selector: editableDef } : editableDef ); + } + } + + function setupMask( widget ) { + if ( !widget.mask ) + return; + + // Reuse mask if already exists (http://dev.ckeditor.com/ticket/11281). + var img = widget.wrapper.findOne( '.cke_widget_mask' ); + + if ( !img ) { + img = new CKEDITOR.dom.element( 'img', widget.editor.document ); + img.setAttributes( { + src: CKEDITOR.tools.transparentImageData, + 'class': 'cke_reset cke_widget_mask' + } ); + widget.wrapper.append( img ); + } + + widget.mask = img; + } + + // Replace parts object containing: + // partName => selector pairs + // with: + // partName => element pairs + function setupParts( widget ) { + if ( widget.parts ) { + var parts = {}, + el, partName; + + for ( partName in widget.parts ) { + el = widget.wrapper.findOne( widget.parts[ partName ] ); + parts[ partName ] = el; + } + widget.parts = parts; + } + } + + function setupWidget( widget, widgetDef ) { + setupWrapper( widget ); + setupParts( widget ); + setupEditables( widget ); + setupMask( widget ); + setupDragHandler( widget ); + setupDataClassesListener( widget ); + setupA11yListener( widget ); + + // http://dev.ckeditor.com/ticket/11145: [IE8] Non-editable content of widget is draggable. + if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 ) { + widget.wrapper.on( 'dragstart', function( evt ) { + var target = evt.data.getTarget(); + + // Allow text dragging inside nested editables or dragging inline widget's drag handler. + if ( !Widget.getNestedEditable( widget, target ) && !( widget.inline && Widget.isDomDragHandler( target ) ) ) + evt.data.preventDefault(); + } ); + } + + widget.wrapper.removeClass( 'cke_widget_new' ); + widget.element.addClass( 'cke_widget_element' ); + + widget.on( 'key', function( evt ) { + var keyCode = evt.data.keyCode; + + // ENTER. + if ( keyCode == 13 ) { + widget.edit(); + // CTRL+C or CTRL+X. + } else if ( keyCode == CKEDITOR.CTRL + 67 || keyCode == CKEDITOR.CTRL + 88 ) { + copySingleWidget( widget, keyCode == CKEDITOR.CTRL + 88 ); + return; // Do not preventDefault. + } else if ( keyCode in keystrokesNotBlockedByWidget || ( CKEDITOR.CTRL & keyCode ) || ( CKEDITOR.ALT & keyCode ) ) { + // Pass chosen keystrokes to other plugins or default fake sel handlers. + // Pass all CTRL/ALT keystrokes. + return; + } + + return false; + }, null, null, 999 ); + // Listen with high priority so it's possible + // to overwrite this callback. + + widget.on( 'doubleclick', function( evt ) { + if ( widget.edit() ) { + // We have to cancel event if edit method opens a dialog, otherwise + // link plugin may open extra dialog (http://dev.ckeditor.com/ticket/12140). + evt.cancel(); + } + } ); + + if ( widgetDef.data ) + widget.on( 'data', widgetDef.data ); + + if ( widgetDef.edit ) + widget.on( 'edit', widgetDef.edit ); + } + + function setupWidgetData( widget, startupData ) { + var widgetDataAttr = widget.element.data( 'cke-widget-data' ); + + if ( widgetDataAttr ) + widget.setData( JSON.parse( decodeURIComponent( widgetDataAttr ) ) ); + if ( startupData ) + widget.setData( startupData ); + + // Populate classes if they are not preset. + if ( !widget.data.classes ) + widget.setData( 'classes', widget.getClasses() ); + + // Unblock data and... + widget.dataReady = true; + + // Write data to element because this was blocked when data wasn't ready. + writeDataToElement( widget ); + + // Fire data event first time, because this was blocked when data wasn't ready. + widget.fire( 'data', widget.data ); + } + + function setupWrapper( widget ) { + // Retrieve widget wrapper. Assign an id to it. + var wrapper = widget.wrapper = widget.element.getParent(); + wrapper.setAttribute( 'data-cke-widget-id', widget.id ); + } + + function writeDataToElement( widget ) { + widget.element.data( 'cke-widget-data', encodeURIComponent( JSON.stringify( widget.data ) ) ); + } + + // + // WIDGET STYLE HANDLER --------------------------------------------------- + // + + ( function() { + // Styles categorized by group. It is used to prevent applying styles for the same group being used together. + var styleGroups = {}; + + /** + * The class representing a widget style. It is an {@link CKEDITOR#STYLE_OBJECT object} like + * the styles handler for widgets. + * + * **Note:** This custom style handler does not support all methods of the {@link CKEDITOR.style} class. + * Not supported methods: {@link #applyToRange}, {@link #removeFromRange}, {@link #applyToObject}. + * + * @since 4.4 + * @class CKEDITOR.style.customHandlers.widget + * @extends CKEDITOR.style + */ + CKEDITOR.style.addCustomHandler( { + type: 'widget', + + setup: function( styleDefinition ) { + /** + * The name of widget to which this style can be applied. + * It is extracted from style definition's `widget` property. + * + * @property {String} widget + */ + this.widget = styleDefinition.widget; + + /** + * An array of groups that this style belongs to. + * Styles assigned to the same group cannot be combined. + * + * @since 4.6.2 + * @property {Array} group + */ + this.group = typeof styleDefinition.group == 'string' ? [ styleDefinition.group ] : styleDefinition.group; + + // Store style categorized by its group. + // It is used to prevent enabling two styles from same group. + if ( this.group ) { + saveStyleGroup( this ); + } + }, + + apply: function( editor ) { + var widget; + + // Before CKEditor 4.4 wasn't a required argument, so we need to + // handle a case when it wasn't provided. + if ( !( editor instanceof CKEDITOR.editor ) ) + return; + + // Theoretically we could bypass checkApplicable, get widget from + // widgets.focused and check its name, what would be faster, but then + // this custom style would work differently than the default style + // which checks if it's applicable before applying or removing itself. + if ( this.checkApplicable( editor.elementPath(), editor ) ) { + widget = editor.widgets.focused; + + // Remove other styles from the same group. + if ( this.group ) { + this.removeStylesFromSameGroup( editor ); + } + + widget.applyStyle( this ); + } + }, + + remove: function( editor ) { + // Before CKEditor 4.4 wasn't a required argument, so we need to + // handle a case when it wasn't provided. + if ( !( editor instanceof CKEDITOR.editor ) ) + return; + + if ( this.checkApplicable( editor.elementPath(), editor ) ) + editor.widgets.focused.removeStyle( this ); + }, + + /** + * Removes all styles that belong to the same group as this style. This method will neither add nor remove + * the current style. + * Returns `true` if any style was removed, otherwise returns `false`. + * + * @since 4.6.2 + * @param {CKEDITOR.editor} editor + * @returns {Boolean} + */ + removeStylesFromSameGroup: function( editor ) { + var stylesFromSameGroup, + path, + removed = false; + + // Before CKEditor 4.4 wasn't a required argument, so we need to + // handle a case when it wasn't provided. + if ( !( editor instanceof CKEDITOR.editor ) ) + return false; + + path = editor.elementPath(); + if ( this.checkApplicable( path, editor ) ) { + // Iterate over each group. + for ( var i = 0, l = this.group.length; i < l; i++ ) { + stylesFromSameGroup = styleGroups[ this.widget ][ this.group[ i ] ]; + // Iterate over each style from group. + for ( var j = 0; j < stylesFromSameGroup.length; j++ ) { + if ( stylesFromSameGroup[ j ] !== this && stylesFromSameGroup[ j ].checkActive( path, editor ) ) { + editor.widgets.focused.removeStyle( stylesFromSameGroup[ j ] ); + removed = true; + } + } + } + } + + return removed; + }, + + checkActive: function( elementPath, editor ) { + return this.checkElementMatch( elementPath.lastElement, 0, editor ); + }, + + checkApplicable: function( elementPath, editor ) { + // Before CKEditor 4.4 wasn't a required argument, so we need to + // handle a case when it wasn't provided. + if ( !( editor instanceof CKEDITOR.editor ) ) + return false; + + return this.checkElement( elementPath.lastElement ); + }, + + checkElementMatch: checkElementMatch, + + checkElementRemovable: checkElementMatch, + + /** + * Checks if an element is a {@link CKEDITOR.plugins.widget#wrapper wrapper} of a + * widget whose name matches the {@link #widget widget name} specified in the style definition. + * + * @param {CKEDITOR.dom.element} element + * @returns {Boolean} + */ + checkElement: function( element ) { + if ( !Widget.isDomWidgetWrapper( element ) ) + return false; + + var widgetElement = element.getFirst( Widget.isDomWidgetElement ); + return widgetElement && widgetElement.data( 'widget' ) == this.widget; + }, + + buildPreview: function( label ) { + return label || this._.definition.name; + }, + + /** + * Returns allowed content rules which should be registered for this style. + * Uses widget's {@link CKEDITOR.plugins.widget.definition#styleableElements} to make a rule + * allowing classes on specified elements or use widget's + * {@link CKEDITOR.plugins.widget.definition#styleToAllowedContentRules} method to transform a style + * into allowed content rules. + * + * @param {CKEDITOR.editor} The editor instance. + * @returns {CKEDITOR.filter.allowedContentRules} + */ + toAllowedContentRules: function( editor ) { + if ( !editor ) + return null; + + var widgetDef = editor.widgets.registered[ this.widget ], + classes, + rule = {}; + + if ( !widgetDef ) + return null; + + if ( widgetDef.styleableElements ) { + classes = this.getClassesArray(); + if ( !classes ) + return null; + + rule[ widgetDef.styleableElements ] = { + classes: classes, + propertiesOnly: true + }; + return rule; + } + if ( widgetDef.styleToAllowedContentRules ) + return widgetDef.styleToAllowedContentRules( this ); + return null; + }, + + /** + * Returns classes defined in the style in form of an array. + * + * @returns {String[]} + */ + getClassesArray: function() { + var classes = this._.definition.attributes && this._.definition.attributes[ 'class' ]; + + return classes ? CKEDITOR.tools.trim( classes ).split( /\s+/ ) : null; + }, + + /** + * Not implemented. + * + * @method applyToRange + */ + applyToRange: notImplemented, + + /** + * Not implemented. + * + * @method removeFromRange + */ + removeFromRange: notImplemented, + + /** + * Not implemented. + * + * @method applyToObject + */ + applyToObject: notImplemented + } ); + + function notImplemented() {} + + // @context style + function checkElementMatch( element, fullMatch, editor ) { + // Before CKEditor 4.4 wasn't a required argument, so we need to + // handle a case when it wasn't provided. + if ( !editor ) + return false; + + if ( !this.checkElement( element ) ) + return false; + + var widget = editor.widgets.getByElement( element, true ); + return widget && widget.checkStyleActive( this ); + } + + // Save and categorize style by its group. + function saveStyleGroup( style ) { + var widgetName = style.widget, + group; + + if ( !styleGroups[ widgetName ] ) { + styleGroups[ widgetName ] = {}; + } + + for ( var i = 0, l = style.group.length; i < l; i++ ) { + group = style.group[ i ]; + if ( !styleGroups[ widgetName ][ group ] ) { + styleGroups[ widgetName ][ group ] = []; + } + + styleGroups[ widgetName ][ group ].push( style ); + } + } + + } )(); + + // + // EXPOSE PUBLIC API ------------------------------------------------------ + // + + CKEDITOR.plugins.widget = Widget; + Widget.repository = Repository; + Widget.nestedEditable = NestedEditable; +} )(); + +/** + * An event fired when a widget definition is registered by the {@link CKEDITOR.plugins.widget.repository#add} method. + * It is possible to modify the definition being registered. + * + * @event widgetDefinition + * @member CKEDITOR.editor + * @param {CKEDITOR.plugins.widget.definition} data Widget definition. + */ + +/** + * This is an abstract class that describes the definition of a widget. + * It is a type of {@link CKEDITOR.plugins.widget.repository#add} method's second argument. + * + * Widget instances inherit from registered widget definitions, although not in a prototypal way. + * They are simply extended with corresponding widget definitions. Note that not all properties of + * the widget definition become properties of a widget. Some, like {@link #data} or {@link #edit}, become + * widget's events listeners. + * + * @class CKEDITOR.plugins.widget.definition + * @abstract + * @mixins CKEDITOR.feature + */ + +/** + * Widget definition name. It is automatically set when the definition is + * {@link CKEDITOR.plugins.widget.repository#add registered}. + * + * @property {String} name + */ + +/** + * The method executed while initializing a widget, after a widget instance + * is created, but before it is ready. It is executed before the first + * {@link CKEDITOR.plugins.widget#event-data} is fired so it is common to + * use the `init` method to populate widget data with information loaded from + * the DOM, like for exmaple: + * + * init: function() { + * this.setData( 'width', this.element.getStyle( 'width' ) ); + * + * if ( this.parts.caption.getStyle( 'display' ) != 'none' ) + * this.setData( 'showCaption', true ); + * } + * + * @property {Function} init + */ + +/** + * The function to be used to upcast an element to this widget or a + * comma-separated list of upcast methods from the {@link #upcasts} object. + * + * The upcast function **is not** executed in the widget context (because the widget + * does not exist yet) and two arguments are passed: + * + * * `element` ({@link CKEDITOR.htmlParser.element}) – The element to be checked. + * * `data` (`Object`) – The object which can be extended with data which will then be passed to the widget. + * + * An element will be upcasted if a function returned `true` or an instance of + * a {@link CKEDITOR.htmlParser.element} if upcasting meant DOM structure changes + * (in this case the widget will be initialized on the returned element). + * + * @property {String/Function} upcast + */ + +/** + * The object containing functions which can be used to upcast this widget. + * Only those pointed by the {@link #upcast} property will be used. + * + * In most cases it is appropriate to use {@link #upcast} directly, + * because majority of widgets need just one method. + * However, in some cases the widget author may want to expose more than one variant + * and then this property may be used. + * + * upcasts: { + * // This function may upcast only figure elements. + * figure: function() { + * // ... + * }, + * // This function may upcast only image elements. + * image: function() { + * // ... + * }, + * // More variants... + * } + * + * // Then, widget user may choose which upcast methods will be enabled. + * editor.on( 'widgetDefinition', function( evt ) { + * if ( evt.data.name == 'image' ) + * evt.data.upcast = 'figure,image'; // Use both methods. + * } ); + * + * @property {Object} upcasts + */ + +/** + * The {@link #upcast} method(s) priority. The upcast with a lower priority number will be called before + * the one with a higher number. The default priority is `10`. + * + * @since 4.5 + * @property {Number} [upcastPriority=10] + */ + +/** + * The function to be used to downcast this widget or + * a name of the downcast option from the {@link #downcasts} object. + * + * The downcast funciton will be executed in the {@link CKEDITOR.plugins.widget} context + * and with `widgetElement` ({@link CKEDITOR.htmlParser.element}) argument which is + * the widget's main element. + * + * The function may return an instance of the {@link CKEDITOR.htmlParser.node} class if the widget + * needs to be downcasted to a different node than the widget's main element. + * + * @property {String/Function} downcast + */ + +/** + * The object containing functions which can be used to downcast this widget. + * Only the one pointed by the {@link #downcast} property will be used. + * + * In most cases it is appropriate to use {@link #downcast} directly, + * because majority of widgets have just one variant of downcasting (or none at all). + * However, in some cases the widget author may want to expose more than one variant + * and then this property may be used. + * + * downcasts: { + * // This downcast may transform the widget into the figure element. + * figure: function() { + * // ... + * }, + * // This downcast may transform the widget into the image element with data-* attributes. + * image: function() { + * // ... + * } + * } + * + * // Then, the widget user may choose one of the downcast options when setting up his editor. + * editor.on( 'widgetDefinition', function( evt ) { + * if ( evt.data.name == 'image' ) + * evt.data.downcast = 'figure'; + * } ); + * + * @property downcasts + */ + +/** + * If set, it will be added as the {@link CKEDITOR.plugins.widget#event-edit} event listener. + * This means that it will be executed when a widget is being edited. + * See the {@link CKEDITOR.plugins.widget#method-edit} method. + * + * @property {Function} edit + */ + +/** + * If set, it will be added as the {@link CKEDITOR.plugins.widget#event-data} event listener. + * This means that it will be executed every time the {@link CKEDITOR.plugins.widget#property-data widget data} changes. + * + * @property {Function} data + */ + +/** + * The method to be executed when the widget's command is executed in order to insert a new widget + * (widget of this type is not focused). If not defined, then the default action will be + * performed which means that: + * + * * An instance of the widget will be created in a detached {@link CKEDITOR.dom.documentFragment document fragment}, + * * The {@link CKEDITOR.plugins.widget#method-edit} method will be called to trigger widget editing, + * * The widget element will be inserted into DOM. + * + * @property {Function} insert + */ + +/** + * The name of a dialog window which will be opened on {@link CKEDITOR.plugins.widget#method-edit}. + * If not defined, then the {@link CKEDITOR.plugins.widget#method-edit} method will not perform any action and + * widget's command will insert a new widget without opening a dialog window first. + * + * @property {String} dialog + */ + +/** + * The template which will be used to create a new widget element (when the widget's command is executed). + * This string is populated with {@link #defaults default values} by using the {@link CKEDITOR.template} format. + * Therefore it has to be a valid {@link CKEDITOR.template} argument. + * + * @property {String} template + */ + +/** + * The data object which will be used to populate the data of a newly created widget. + * See {@link CKEDITOR.plugins.widget#property-data}. + * + * defaults: { + * showCaption: true, + * align: 'none' + * } + * + * @property defaults + */ + +/** + * An object containing definitions of widget components (part name => CSS selector). + * + * parts: { + * image: 'img', + * caption: 'div.caption' + * } + * + * @property parts + */ + +/** + * An object containing definitions of nested editables (editable name => {@link CKEDITOR.plugins.widget.nestedEditable.definition}). + * Note that editables *have to* be defined in the same order as they are in DOM / {@link CKEDITOR.plugins.widget.definition#template template}. + * Otherwise errors will occur when nesting widgets inside each other. + * + * editables: { + * header: 'h1', + * content: { + * selector: 'div.content', + * allowedContent: 'p strong em; a[!href]' + * } + * } + * + * @property editables + */ + +/** + * The function used to obtain an accessibility label for the widget. It might be used to make + * the widget labels as precise as possible, since it has access to the widget instance. + * + * If not specified, the default implementation will use the {@link #pathName} or the main + * {@link CKEDITOR.plugins.widget#element element} tag name. + * + * @property {Function} getLabel + */ + +/** + * The widget name displayed in the elements path. + * + * @property {String} pathName + */ + +/** + * If set to `true`, the widget's element will be covered with a transparent mask. + * This will prevent its content from being clickable, which matters in case + * of special elements like embedded Flash or iframes that generate a separate "context". + * + * @property {Boolean} mask + */ + +/** + * If set to `true/false`, it will force the widget to be either an inline or a block widget. + * If not set, the widget type will be determined from the widget element. + * + * Widget type influences whether a block (`div`) or an inline (`span`) element is used + * for the wrapper. + * + * @property {Boolean} inline + */ + +/** + * The label for the widget toolbar button. + * + * editor.widgets.add( 'simplebox', { + * button: 'Create a simple box' + * } ); + * + * editor.widgets.add( 'simplebox', { + * button: editor.lang.simplebox.title + * } ); + * + * @property {String} button + */ + +/** + * Whether widget should be draggable. Defaults to `true`. + * If set to `false` drag handler will not be displayed when hovering widget. + * + * @property {Boolean} draggable + */ + +/** + * Names of element(s) (separated by spaces) for which the {@link CKEDITOR.filter} should allow classes + * defined in the widget styles. For example if your widget is upcasted from a simple `
` + * element, then in order to make it styleable you can set: + * + * editor.widgets.add( 'customWidget', { + * upcast: function( element ) { + * return element.name == 'div'; + * }, + * + * // ... + * + * styleableElements: 'div' + * } ); + * + * Then, when the following style is defined: + * + * { + * name: 'Thick border', type: 'widget', widget: 'customWidget', + * attributes: { 'class': 'thickBorder' } + * } + * + * a rule allowing the `thickBorder` class for `div` elements will be registered in the {@link CKEDITOR.filter}. + * + * If you need to have more freedom when transforming widget style to allowed content rules, + * you can use the {@link #styleToAllowedContentRules} callback. + * + * @since 4.4 + * @property {String} styleableElements + */ + +/** + * Function transforming custom widget's {@link CKEDITOR.style} instance into + * {@link CKEDITOR.filter.allowedContentRules}. It may be used when a static + * {@link #styleableElements} property is not enough to inform the {@link CKEDITOR.filter} + * what HTML features should be enabled when allowing the given style. + * + * In most cases, when style's classes just have to be added to element name(s) used by + * the widget element, it is recommended to use simpler {@link #styleableElements} property. + * + * In order to get parsed classes from the style definition you can use + * {@link CKEDITOR.style.customHandlers.widget#getClassesArray}. + * + * For example, if you want to use the [object format of allowed content rules](#!/guide/dev_allowed_content_rules-section-object-format), + * to specify `match` validator, your implementation could look like this: + * + * editor.widgets.add( 'customWidget', { + * // ... + * + * styleToAllowedContentRules: funciton( style ) { + * // Retrieve classes defined in the style. + * var classes = style.getClassesArray(); + * + * // Do something crazy - for example return allowed content rules in object format, + * // with custom match property and propertiesOnly flag. + * return { + * h1: { + * match: isWidgetElement, + * propertiesOnly: true, + * classes: classes + * } + * }; + * } + * } ); + * + * @since 4.4 + * @property {Function} styleToAllowedContentRules + * @param {CKEDITOR.style.customHandlers.widget} style The style to be transformed. + * @returns {CKEDITOR.filter.allowedContentRules} + */ + +/** + * This is an abstract class that describes the definition of a widget's nested editable. + * It is a type of values in the {@link CKEDITOR.plugins.widget.definition#editables} object. + * + * In the simplest case the definition is a string which is a CSS selector used to + * find an element that will become a nested editable inside the widget. Note that + * the widget element can be a nested editable, too. + * + * In the more advanced case a definition is an object with a required `selector` property. + * + * editables: { + * header: 'h1', + * content: { + * selector: 'div.content', + * allowedContent: 'p strong em; a[!href]' + * } + * } + * + * @class CKEDITOR.plugins.widget.nestedEditable.definition + * @abstract + */ + +/** + * The CSS selector used to find an element which will become a nested editable. + * + * @property {String} selector + */ + +/** + * The [Advanced Content Filter](#!/guide/dev_advanced_content_filter) rules + * which will be used to limit the content allowed in this nested editable. + * This option is similar to {@link CKEDITOR.config#allowedContent} and one can + * use it to limit the editor features available in the nested editable. + * + * If no `allowedContent` is specified, the editable will use the editor default + * {@link CKEDITOR.editor#filter}. + * + * @property {CKEDITOR.filter.allowedContentRules} allowedContent + */ + +/** + * The [Advanced Content Filter](#!/guide/dev_advanced_content_filter) rules + * which will be used to blacklist elements within this nested editable. + * This option is similar to {@link CKEDITOR.config#disallowedContent}. + * + * Note that `disallowedContent` work on top of the definition's {@link #allowedContent}. + * + * @since 4.7.3 + * @property {CKEDITOR.filter.disallowedContentRules} disallowedContent + */ + +/** + * Nested editable name displayed in the elements path. + * + * @property {String} pathName + */