qms-angular 1.0.87 → 1.0.90

package/src/assets/qms-ckeditor-plugin/src/plugins/table/tablemouse.js

@@ -0,0 +1,218 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module table/tablemouse
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+
+import TableSelection from './tableselection';
+import MouseEventsObserver from './tablemouse/mouseeventsobserver';
+
+import { getTableCellsContainingSelection } from './utils/selection';
+
+/**
+ * This plugin enables a table cells' selection with the mouse.
+ * It is loaded automatically by the {@link module:table/table~Table} plugin.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class TableMouse extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'TableMouse';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ TableSelection ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+
+		// Currently the MouseObserver only handles `mousedown` and `mouseup` events.
+		// TODO move to the engine?
+		editor.editing.view.addObserver( MouseEventsObserver );
+
+		this._enableShiftClickSelection();
+		this._enableMouseDragSelection();
+	}
+
+	/**
+	 * Enables making cells selection by <kbd>Shift</kbd>+click. Creates a selection from the cell which previously held
+	 * the selection to the cell which was clicked. It can be the same cell, in which case it selects a single cell.
+	 *
+	 * @private
+	 */
+	_enableShiftClickSelection() {
+		const editor = this.editor;
+		let blockSelectionChange = false;
+
+		const tableSelection = editor.plugins.get( TableSelection );
+
+		this.listenTo( editor.editing.view.document, 'mousedown', ( evt, domEventData ) => {
+			if ( !this.isEnabled || !tableSelection.isEnabled ) {
+				return;
+			}
+
+			if ( !domEventData.domEvent.shiftKey ) {
+				return;
+			}
+
+			const anchorCell = tableSelection.getAnchorCell() || getTableCellsContainingSelection( editor.model.document.selection )[ 0 ];
+
+			if ( !anchorCell ) {
+				return;
+			}
+
+			const targetCell = this._getModelTableCellFromDomEvent( domEventData );
+
+			if ( targetCell && haveSameTableParent( anchorCell, targetCell ) ) {
+				blockSelectionChange = true;
+				tableSelection.setCellSelection( anchorCell, targetCell );
+
+				domEventData.preventDefault();
+			}
+		} );
+
+		this.listenTo( editor.editing.view.document, 'mouseup', () => {
+			blockSelectionChange = false;
+		} );
+
+		// We need to ignore a `selectionChange` event that is fired after we render our new table cells selection.
+		// When downcasting table cells selection to the view, we put the view selection in the last selected cell
+		// in a place that may not be natively a "correct" location. This is – we put it directly in the `<td>` element.
+		// All browsers fire the native `selectionchange` event.
+		// However, all browsers except Safari return the selection in the exact place where we put it
+		// (even though it's visually normalized). Safari returns `<td><p>^foo` that makes our selection observer
+		// fire our `selectionChange` event (because the view selection that we set in the first step differs from the DOM selection).
+		// Since `selectionChange` is fired, we automatically update the model selection that moves it that paragraph.
+		// This breaks our dear cells selection.
+		//
+		// Theoretically this issue concerns only Safari that is the only browser that do normalize the selection.
+		// However, to avoid code branching and to have a good coverage for this event blocker, I enabled it for all browsers.
+		//
+		// Note: I'm keeping the `blockSelectionChange` state separately for shift+click and mouse drag (exact same logic)
+		// so I don't have to try to analyze whether they don't overlap in some weird cases. Probably they don't.
+		// But I have other things to do, like writing this comment.
+		this.listenTo( editor.editing.view.document, 'selectionChange', evt => {
+			if ( blockSelectionChange ) {
+				// @if CK_DEBUG // console.log( 'Blocked selectionChange to avoid breaking table cells selection.' );
+
+				evt.stop();
+			}
+		}, { priority: 'highest' } );
+	}
+
+	/**
+	 * Enables making cells selection by dragging.
+	 *
+	 * The selection is made only on mousemove. Mouse tracking is started on mousedown.
+	 * However, the cells selection is enabled only after the mouse cursor left the anchor cell.
+	 * Thanks to that normal text selection within one cell works just fine. However, you can still select
+	 * just one cell by leaving the anchor cell and moving back to it.
+	 *
+	 * @private
+	 */
+	_enableMouseDragSelection() {
+		const editor = this.editor;
+		let anchorCell, targetCell;
+		let beganCellSelection = false;
+		let blockSelectionChange = false;
+
+		const tableSelection = editor.plugins.get( TableSelection );
+
+		this.listenTo( editor.editing.view.document, 'mousedown', ( evt, domEventData ) => {
+			if ( !this.isEnabled || !tableSelection.isEnabled ) {
+				return;
+			}
+
+			// Make sure to not conflict with the shift+click listener and any other possible handler.
+			if ( domEventData.domEvent.shiftKey || domEventData.domEvent.ctrlKey || domEventData.domEvent.altKey ) {
+				return;
+			}
+
+			anchorCell = this._getModelTableCellFromDomEvent( domEventData );
+		} );
+
+		this.listenTo( editor.editing.view.document, 'mousemove', ( evt, domEventData ) => {
+			if ( !domEventData.domEvent.buttons ) {
+				return;
+			}
+
+			if ( !anchorCell ) {
+				return;
+			}
+
+			const newTargetCell = this._getModelTableCellFromDomEvent( domEventData );
+
+			if ( newTargetCell && haveSameTableParent( anchorCell, newTargetCell ) ) {
+				targetCell = newTargetCell;
+
+				// Switch to the cell selection mode after the mouse cursor left the anchor cell.
+				// Switch off only on mouseup (makes selecting a single cell possible).
+				if ( !beganCellSelection && targetCell != anchorCell ) {
+					beganCellSelection = true;
+				}
+			}
+
+			// Yep, not making a cell selection yet. See method docs.
+			if ( !beganCellSelection ) {
+				return;
+			}
+
+			blockSelectionChange = true;
+			tableSelection.setCellSelection( anchorCell, targetCell );
+
+			domEventData.preventDefault();
+		} );
+
+		this.listenTo( editor.editing.view.document, 'mouseup', () => {
+			beganCellSelection = false;
+			blockSelectionChange = false;
+			anchorCell = null;
+			targetCell = null;
+		} );
+
+		// See the explanation in `_enableShiftClickSelection()`.
+		this.listenTo( editor.editing.view.document, 'selectionChange', evt => {
+			if ( blockSelectionChange ) {
+				// @if CK_DEBUG // console.log( 'Blocked selectionChange to avoid breaking table cells selection.' );
+
+				evt.stop();
+			}
+		}, { priority: 'highest' } );
+	}
+
+	/**
+	 * Returns the model table cell element based on the target element of the passed DOM event.
+	 *
+	 * @private
+	 * @param {module:engine/view/observer/domeventdata~DomEventData} domEventData
+	 * @returns {module:engine/model/element~Element|undefined} Returns the table cell or `undefined`.
+	 */
+	_getModelTableCellFromDomEvent( domEventData ) {
+		// Note: Work with positions (not element mapping) because the target element can be an attribute or other non-mapped element.
+		const viewTargetElement = domEventData.target;
+		const viewPosition = this.editor.editing.view.createPositionAt( viewTargetElement, 0 );
+		const modelPosition = this.editor.editing.mapper.toModelPosition( viewPosition );
+		const modelElement = modelPosition.parent;
+
+		return modelElement.findAncestor( 'tableCell', { includeSelf: true } );
+	}
+}
+
+function haveSameTableParent( cellA, cellB ) {
+	return cellA.parent.parent == cellB.parent.parent;
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/table/tableproperties/commands/tablealignmentcommand.js

@@ -0,0 +1,35 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module table/tableproperties/commands/tablealignmentcommand
+ */
+
+import TablePropertyCommand from './tablepropertycommand';
+
+/**
+ * The table alignment command.
+ *
+ * The command is registered by the {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
+ * the `'tableAlignment'` editor command.
+ *
+ * To change the alignment of the selected table, execute the command:
+ *
+ *		editor.execute( 'tableAlignment', {
+ *			value: 'right'
+ *		} );
+ *
+ * @extends module:table/tableproperties/commands/tablepropertycommand~TablePropertyCommand
+ */
+export default class TableAlignmentCommand extends TablePropertyCommand {
+	/**
+	 * Creates a new `TableAlignmentCommand` instance.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
+	 */
+	constructor( editor ) {
+		super( editor, 'alignment' );
+	}
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/table/tableproperties/commands/tablebackgroundcolorcommand.js

@@ -0,0 +1,35 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module table/tableproperties/commands/tablebackgroundcolorcommand
+ */
+
+import TablePropertyCommand from './tablepropertycommand';
+
+/**
+ * The table background color command.
+ *
+ * The command is registered by the {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
+ * the `'tableBackgroundColor'` editor command.
+ *
+ * To change the background color of the selected table, execute the command:
+ *
+ *		editor.execute( 'tableBackgroundColor', {
+ *			value: '#f00'
+ *		} );
+ *
+ * @extends module:table/tableproperties/commands/tablepropertycommand~TablePropertyCommand
+ */
+export default class TableBackgroundColorCommand extends TablePropertyCommand {
+	/**
+	 * Creates a new `TableBackgroundColorCommand` instance.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
+	 */
+	constructor( editor ) {
+		super( editor, 'backgroundColor' );
+	}
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/table/tableproperties/commands/tablebordercolorcommand.js

@@ -0,0 +1,47 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module table/tableproperties/commands/tablebordercolorcommand
+ */
+
+import TablePropertyCommand from './tablepropertycommand';
+import { getSingleValue } from '../../utils/table-properties';
+
+/**
+ * The table border color command.
+ *
+ * The command is registered by the {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
+ * the `'tableBorderColor'` editor command.
+ *
+ * To change the border color of the selected table, execute the command:
+ *
+ *		editor.execute( 'tableBorderColor', {
+ *			value: '#f00'
+ *		} );
+ *
+ * @extends module:table/tableproperties/commands/tablepropertycommand~TablePropertyCommand
+ */
+export default class TableBorderColorCommand extends TablePropertyCommand {
+	/**
+	 * Creates a new `TableBorderColorCommand` instance.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
+	 */
+	constructor( editor ) {
+		super( editor, 'borderColor' );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	_getValue( table ) {
+		if ( !table ) {
+			return;
+		}
+
+		return getSingleValue( table.getAttribute( this.attributeName ) );
+	}
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/table/tableproperties/commands/tableborderstylecommand.js

@@ -0,0 +1,47 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module table/tableproperties/commands/tableborderstylecommand
+ */
+
+import TablePropertyCommand from './tablepropertycommand';
+import { getSingleValue } from '../../utils/table-properties';
+
+/**
+ * The table style border command.
+ *
+ * The command is registered by the {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
+ * the `'tableBorderStyle'` editor command.
+ *
+ * To change the border style of the selected table, execute the command:
+ *
+ *		editor.execute( 'tableBorderStyle', {
+ *			value: 'dashed'
+ *		} );
+ *
+ * @extends module:table/tableproperties/commands/tablepropertycommand~TablePropertyCommand
+ */
+export default class TableBorderStyleCommand extends TablePropertyCommand {
+	/**
+	 * Creates a new `TableBorderStyleCommand` instance.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
+	 */
+	constructor( editor ) {
+		super( editor, 'borderStyle' );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	_getValue( table ) {
+		if ( !table ) {
+			return;
+		}
+
+		return getSingleValue( table.getAttribute( this.attributeName ) );
+	}
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/table/tableproperties/commands/tableborderwidthcommand.js

@@ -0,0 +1,62 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module table/tableproperties/commands/tableborderwidthcommand
+ */
+
+import TablePropertyCommand from './tablepropertycommand';
+import { addDefaultUnitToNumericValue, getSingleValue } from '../../utils/table-properties';
+
+/**
+ * The table width border command.
+ *
+ * The command is registered by the {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
+ * the `'tableBorderWidth'` editor command.
+ *
+ * To change the border width of the selected table, execute the command:
+ *
+ *		editor.execute( 'tableBorderWidth', {
+ *			value: '5px'
+ *		} );
+ *
+ * **Note**: This command adds the default `'px'` unit to numeric values. Executing:
+ *
+ *		editor.execute( 'tableBorderWidth', {
+ *			value: '5'
+ *		} );
+ *
+ * will set the `borderWidth` attribute to `'5px'` in the model.
+ *
+ * @extends module:table/tableproperties/commands/tablepropertycommand~TablePropertyCommand
+ */
+export default class TableBorderWidthCommand extends TablePropertyCommand {
+	/**
+	 * Creates a new `TableBorderWidthCommand` instance.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
+	 */
+	constructor( editor ) {
+		super( editor, 'borderWidth' );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	_getValue( table ) {
+		if ( !table ) {
+			return;
+		}
+
+		return getSingleValue( table.getAttribute( this.attributeName ) );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	_getValueToSet( value ) {
+		return addDefaultUnitToNumericValue( value, 'px' );
+	}
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/table/tableproperties/commands/tableheightcommand.js

@@ -0,0 +1,51 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module table/tableproperties/commands/tableheightcommand
+ */
+
+import TablePropertyCommand from './tablepropertycommand';
+import { addDefaultUnitToNumericValue } from '../../utils/table-properties';
+
+/**
+ * The table height command.
+ *
+ * The command is registered by the {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
+ * the `'tableHeight'` editor command.
+ *
+ * To change the height of the selected table, execute the command:
+ *
+ *		editor.execute( 'tableHeight', {
+ *			value: '500px'
+ *		} );
+ *
+ * **Note**: This command adds the default `'px'` unit to numeric values. Executing:
+ *
+ *		editor.execute( 'tableHeight', {
+ *			value: '50'
+ *		} );
+ *
+ * will set the `height` attribute to `'50px'` in the model.
+ *
+ * @extends module:table/tableproperties/commands/tablepropertycommand~TablePropertyCommand
+ */
+export default class TableHeightCommand extends TablePropertyCommand {
+	/**
+	 * Creates a new `TableHeightCommand` instance.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
+	 */
+	constructor( editor ) {
+		super( editor, 'height' );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	_getValueToSet( value ) {
+		return addDefaultUnitToNumericValue( value, 'px' );
+	}
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/table/tableproperties/commands/tablepropertycommand.js

@@ -0,0 +1,98 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module table/tableproperties/commands/tablepropertycommand
+ */
+
+import { Command } from 'ckeditor5/src/core';
+
+/**
+ * The table cell attribute command.
+ *
+ * This command is a base command for other table property commands.
+ *
+ * @extends module:core/command~Command
+ */
+export default class TablePropertyCommand extends Command {
+	/**
+	 * Creates a new `TablePropertyCommand` instance.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
+	 * @param {String} attributeName Table cell attribute name.
+	 */
+	constructor( editor, attributeName ) {
+		super( editor );
+
+		this.attributeName = attributeName;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	refresh() {
+		const editor = this.editor;
+		const selection = editor.model.document.selection;
+
+		const table = selection.getFirstPosition().findAncestor( 'table' );
+
+		this.isEnabled = !!table;
+		this.value = this._getValue( table );
+	}
+
+	/**
+	 * Executes the command.
+	 *
+	 * @fires execute
+	 * @param {Object} [options]
+	 * @param {*} [options.value] If set, the command will set the attribute on the selected table.
+	 * If not set, the command will remove the attribute from the selected table.
+	 * @param {module:engine/model/batch~Batch} [options.batch] Pass the model batch instance to the command to aggregate changes,
+	 * for example, to allow a single undo step for multiple executions.
+	 */
+	execute( options = {} ) {
+		const model = this.editor.model;
+		const selection = model.document.selection;
+
+		const { value, batch } = options;
+
+		const table = selection.getFirstPosition().findAncestor( 'table' );
+		const valueToSet = this._getValueToSet( value );
+
+		model.enqueueChange( batch || 'default', writer => {
+			if ( valueToSet ) {
+				writer.setAttribute( this.attributeName, valueToSet, table );
+			} else {
+				writer.removeAttribute( this.attributeName, table );
+			}
+		} );
+	}
+
+	/**
+	 * Returns the attribute value for a table.
+	 *
+	 * @param {module:engine/model/element~Element} table
+	 * @returns {String|undefined}
+	 * @private
+	 */
+	_getValue( table ) {
+		if ( !table ) {
+			return;
+		}
+
+		return table.getAttribute( this.attributeName );
+	}
+
+	/**
+	 * Returns the proper model value. It can be used to add a default unit to numeric values.
+	 *
+	 * @private
+	 * @param {*} value
+	 * @returns {*}
+	 */
+	_getValueToSet( value ) {
+		return value;
+	}
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/table/tableproperties/commands/tablewidthcommand.js

@@ -0,0 +1,51 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module table/tableproperties/commands/tablewidthcommand
+ */
+
+import TablePropertyCommand from './tablepropertycommand';
+import { addDefaultUnitToNumericValue } from '../../utils/table-properties';
+
+/**
+ * The table width command.
+ *
+ * The command is registered by the {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
+ * the `'tableWidth'` editor command.
+ *
+ * To change the width of the selected table, execute the command:
+ *
+ *		editor.execute( 'tableWidth', {
+ *			value: '400px'
+ *		} );
+ *
+ * **Note**: This command adds the default `'px'` unit to numeric values. Executing:
+ *
+ *		editor.execute( 'tableWidth', {
+ *			value: '50'
+ *		} );
+ *
+ * will set the `width` attribute to `'50px'` in the model.
+ *
+ * @extends module:table/tableproperties/commands/tablepropertycommand~TablePropertyCommand
+ */
+export default class TableWidthCommand extends TablePropertyCommand {
+	/**
+	 * Creates a new `TableWidthCommand` instance.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
+	 */
+	constructor( editor ) {
+		super( editor, 'width' );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	_getValueToSet( value ) {
+		return addDefaultUnitToNumericValue( value, 'px' );
+	}
+}