qms-angular 1.0.30 → 1.0.31

package/src/assets/qms-ckeditor-plugin/package.json

@@ -7,13 +7,34 @@
   "private": true,
   "main": "./build/ckeditor.js",
   "devDependencies": {
+    "css-loader": "^5.2.4",
+    "postcss": "^8.2.10",
+    "postcss-loader": "^4.2.0",
+    "raw-loader": "^4.0.2",
+    "style-loader": "^2.0.0",
+    "terser-webpack-plugin": "^4.2.3",
+    "webpack": "^4.46.0",
+    "webpack-cli": "^4.7.2"
+  },
+  "scripts": {
+    "build-prod": "webpack --mode production",
+    "build": "webpack --mode development",
+    "dev": "webpack --watch --mode development"
+  },
+  "dependencies": {
+    "@ckeditor/ckeditor5-core": "^27.1.0",
+    "@ckeditor/ckeditor5-utils": "^27.1.0",
+    "@ckeditor/ckeditor5-typing": "^27.1.0",
+    "@ckeditor/ckeditor5-dev-utils": "^24.4.2",
+    "@ckeditor/ckeditor5-ui": "^27.1.0",
+    "@ckeditor/ckeditor5-alignment": "^27.1.0",
+    "@ckeditor/ckeditor5-font": "^27.1.0",
     "@ckeditor/ckeditor5-adapter-ckfinder": "^27.1.0",
     "@ckeditor/ckeditor5-autoformat": "^27.1.0",
     "@ckeditor/ckeditor5-basic-styles": "^27.1.0",
     "@ckeditor/ckeditor5-special-characters": "^29.2.0",
     "@ckeditor/ckeditor5-block-quote": "^27.1.0",
     "@ckeditor/ckeditor5-ckfinder": "^27.1.0",
-    "@ckeditor/ckeditor5-dev-utils": "^24.4.2",
     "@ckeditor/ckeditor5-dev-webpack-plugin": "^24.4.2",
     "@ckeditor/ckeditor5-editor-classic": "^27.1.0",
     "@ckeditor/ckeditor5-essentials": "^27.1.0",
@@ -28,25 +49,10 @@
     "@ckeditor/ckeditor5-paste-from-office": "^27.1.0",
     "@ckeditor/ckeditor5-table": "^27.1.0",
     "@ckeditor/ckeditor5-theme-lark": "^27.1.0",
-    "@ckeditor/ckeditor5-typing": "^27.1.0",
     "@ckeditor/ckeditor5-word-count": "^27.1.0",
-    "css-loader": "^5.2.4",
-    "postcss": "^8.2.10",
-    "postcss-loader": "^4.2.0",
-    "raw-loader": "^4.0.2",
-    "style-loader": "^2.0.0",
-    "terser-webpack-plugin": "^4.2.3",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^4.7.2"
-  },
-  "scripts": {
-    "build-prod": "webpack --mode production",
-    "build": "webpack --mode development",
-    "dev": "webpack --watch --mode development"
-  },
-  "dependencies": {
-    "@ckeditor/ckeditor5-alignment": "^27.1.0",
-    "@ckeditor/ckeditor5-font": "^27.1.0",
+    "@ckeditor/ckeditor5-find-and-replace": "^28.0.1",
+    "@ckeditor/ckeditor5-clipboard": "27.1.0",
+    "@wiris/mathtype-ckeditor5": "^7.27.0",
     "qms-angular": "^1.0.2"
   }
 }

package/src/assets/qms-ckeditor-plugin/src/ckeditor.js

@@ -49,6 +49,7 @@ import VideoUpload from './plugins/video/videoupload.js';
 import RemoveFormat from '@ckeditor/ckeditor5-remove-format/src/removeformat.js';
 import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript.js';
 import Subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript.js';
+import MathType from '@wiris/mathtype-ckeditor5';
 import Timestamp from './plugins/timestamp/timestamp.js';
 import SpecialCharacters from './plugins/ckeditor5-special-characters/src/specialcharacters.js';
 import SpecialCharactersArrows from './plugins/ckeditor5-special-characters/src/specialcharactersarrows.js';
@@ -56,6 +57,9 @@ import specialcharacterscurrency from './plugins/ckeditor5-special-characters/sr
 import SpecialCharactersLatin from './plugins/ckeditor5-special-characters/src/specialcharacterslatin.js';
 import SpecialCharactersText from './plugins/ckeditor5-special-characters/src/specialcharacterstext.js';
 import SpecialCharactersMathematical from './plugins/ckeditor5-special-characters/src/specialcharactersmathematical.js';
+import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
+import FindAndReplace from './plugins/ckeditor5-find-and-replace/src/findandreplace.js';
+import Tooltip from './plugins/tooltip/tooltip.js';
 
 class Editor extends ClassicEditor {}
 
@@ -88,7 +92,6 @@ Editor.builtinPlugins = [
 	MediaResize,
 	MediaStyle,
 	Paragraph,
-	PasteFromOffice,
 	Table,
 	TableToolbar,
 	TextTransformation,
@@ -105,13 +108,18 @@ Editor.builtinPlugins = [
   RemoveFormat,
 	Superscript,
 	Subscript,
+	MathType,
 	Timestamp,
 	SpecialCharacters,
 	SpecialCharactersArrows,
 	specialcharacterscurrency,
 	SpecialCharactersLatin,
 	SpecialCharactersText,
-	SpecialCharactersMathematical
+	SpecialCharactersMathematical,
+	Clipboard,
+	PasteFromOffice,
+  Tooltip,
+	FindAndReplace
 ];
 
 export default Editor;

package/src/assets/qms-ckeditor-plugin/src/plugins/ckeditor5-find-and-replace/src/findandreplace.js

@@ -0,0 +1,132 @@
+/**
+ * @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 find-and-replace/findandreplace
+ */
+
+import { Plugin } from '@ckeditor/ckeditor5-core';
+import FindAndReplaceUI from './findandreplaceui';
+import FindAndReplaceEditing from './findandreplaceediting';
+
+/**
+ * The find and replace plugin.
+ *
+ * For a detailed overview, check the {@glink features/find-and-replace Find and replace feature documentation}.
+ *
+ * This is a "glue" plugin which loads the following plugins:
+ *
+ * * The {@link module:find-and-replace/findandreplaceediting~FindAndReplaceEditing find and replace editing feature},
+ * * The {@link module:find-and-replace/findandreplaceui~FindAndReplaceUI find and replace UI feature}
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class FindAndReplace extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ FindAndReplaceEditing, FindAndReplaceUI ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'FindAndReplace';
+	}
+
+	init() {
+		const ui = this.editor.plugins.get( 'FindAndReplaceUI' );
+		const findAndReplaceEditing = this.editor.plugins.get( 'FindAndReplaceEditing' );
+
+		/**
+		 * Delegate find next request.
+		 */
+		ui.on( 'findNext', ( event, data ) => {
+			// Data is contained only for the "find" button.
+			if ( data ) {
+				findAndReplaceEditing.state.searchText = data.searchText;
+				this.editor.execute( 'find', data.searchText, data );
+			} else {
+				// Arrow button press.
+				this.editor.execute( 'findNext' );
+			}
+		} );
+
+		/**
+		 * Delegate find previous request
+		 */
+		ui.on( 'findPrevious', ( event, data ) => {
+			if ( data && findAndReplaceEditing.state.searchText !== data.searchText ) {
+				this.editor.execute( 'find', data.searchText );
+			} else {
+				// Subsequent calls.
+				this.editor.execute( 'findPrevious' );
+			}
+		} );
+
+		/**
+		 * Delegate replace action.
+		 */
+		ui.on( 'replace', ( event, data ) => {
+			if ( findAndReplaceEditing.state.searchText !== data.searchText ) {
+				this.editor.execute( 'find', data.searchText );
+			}
+
+			const highlightedResult = findAndReplaceEditing.state.highlightedResult;
+
+			if ( highlightedResult ) {
+				this.editor.execute( 'replace', data.replaceText, highlightedResult );
+			}
+		} );
+
+		/**
+		 * Delegate replace all action.
+		 */
+		ui.on( 'replaceAll', ( event, data ) => {
+			// The state hadn't been yet built for this search text.
+			if ( findAndReplaceEditing.state.searchText !== data.searchText ) {
+				this.editor.execute( 'find', data.searchText );
+			}
+
+			this.editor.execute( 'replaceAll', data.replaceText, findAndReplaceEditing.state.results );
+		} );
+
+		ui.on( 'dropdown:closed', () => {
+			findAndReplaceEditing.state.clear( this.editor.model );
+			findAndReplaceEditing.stop();
+		} );
+
+		if ( this.editor.ui ) {
+			// We need to wait for the UI to be ready to have the toolbar dropdown available.
+			// Otherwise the findAndReplace component is registered but not yet constructed.
+			this.listenTo( this.editor.ui, 'ready', () => {
+				const formView = ui.formView;
+				// If the editor doesn't contain the findAndReplace button then there's no ui#formView property.
+				if ( formView ) {
+					const commands = this.editor.commands;
+
+					formView.findNextButtonView.bind( 'isEnabled' ).to( commands.get( 'findNext' ), 'isEnabled' );
+					formView.findPrevButtonView.bind( 'isEnabled' ).to( commands.get( 'findPrevious' ), 'isEnabled' );
+
+					formView.replaceButtonView.unbind( 'isEnabled' );
+					formView.replaceButtonView.bind( 'isEnabled' ).to(
+						commands.get( 'replace' ), 'isEnabled', formView, 'isSearching', ( commandEnabled, isSearching ) => {
+							return commandEnabled && isSearching;
+						} );
+
+					formView.replaceAllButtonView.unbind( 'isEnabled' );
+					formView.replaceAllButtonView.bind( 'isEnabled' ).to(
+						commands.get( 'replaceAll' ), 'isEnabled', formView, 'isSearching', ( commandEnabled, isSearching ) => {
+							return commandEnabled && isSearching;
+						} );
+				}
+			} );
+		}
+
+		ui._setState( findAndReplaceEditing.state );
+	}
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/ckeditor5-find-and-replace/src/findandreplaceediting.js

@@ -0,0 +1,315 @@
+/**
+ * @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 find-and-replace/findandreplaceediting
+ */
+
+import { Plugin } from '@ckeditor/ckeditor5-core';
+import { updateFindResultFromRange } from './utils';
+import FindCommand from './findcommand';
+import ReplaceCommand from './replacecommand';
+import ReplaceAllCommand from './replaceallcommand';
+import FindNextCommand from './findnextcommand';
+import FindPreviousCommand from './findpreviouscommand';
+
+import { ObservableMixin, mix, Collection } from '@ckeditor/ckeditor5-utils';
+// eslint-disable-next-line ckeditor5-rules/ckeditor-imports
+import { scrollViewportToShowTarget } from '@ckeditor/ckeditor5-utils/src/dom/scroll';
+
+import { debounce } from 'lodash-es';
+
+import '../theme/findandreplace.css';
+
+/**
+ * The object storing find & replace plugin state in a given editor instance.
+ *
+ */
+class FindAndReplaceState {
+	constructor( model ) {
+		this.set( 'results', new Collection() );
+
+		this.set( 'highlightedResult', null );
+
+		this.set( 'searchText', '' );
+
+		this.set( 'replaceText', '' );
+
+		this.set( 'matchCase', false );
+		this.set( 'matchWholeWords', false );
+
+		this.results.on( 'change', ( eventInfo, { removed, index } ) => {
+			removed = Array.from( removed );
+
+			if ( removed.length ) {
+				let highlightedResultRemoved = false;
+
+				model.change( writer => {
+					for ( const removedResult of removed ) {
+						if ( this.highlightedResult === removedResult ) {
+							highlightedResultRemoved = true;
+						}
+
+						if ( model.markers.has( removedResult.marker.name ) ) {
+							writer.removeMarker( removedResult.marker );
+						}
+					}
+				} );
+
+				if ( highlightedResultRemoved ) {
+					const nextHighlightedIndex = index >= this.results.length ? 0 : index;
+					this.highlightedResult = this.results.get( nextHighlightedIndex );
+				}
+			}
+		} );
+	}
+
+	clear( model ) {
+		// @todo: actually this handling might be moved to editing part.
+		// This could be a results#change listener that would ensure that related markers are ALWAYS removed without
+		// having to call state.clear() explicitly.
+
+		this.searchText = '';
+		// this.replaceText = '';
+
+		model.change( writer => {
+			if ( this.highlightedResult ) {
+				const oldMatchId = this.highlightedResult.marker.name.split( ':' )[ 1 ];
+				const oldMarker = model.markers.get( `findResultHighlighted:${ oldMatchId }` );
+
+				if ( oldMarker ) {
+					writer.removeMarker( oldMarker );
+				}
+			}
+
+			[ ...this.results ].forEach( ( { marker } ) => {
+				writer.removeMarker( marker );
+			} );
+		} );
+
+		this.results.clear();
+	}
+}
+
+mix( FindAndReplaceState, ObservableMixin );
+
+const HIGHLIGHT_CLASS = 'ck-find-result_selected';
+
+// Reacts to document changes in order to update search list.
+function onDocumentChange( results, model, searchCallback ) {
+	const changedNodes = new Set();
+	const removedMarkers = new Set();
+
+	const changes = model.document.differ.getChanges();
+
+	// Get nodes in which changes happened to re-run a search callback on them.
+	changes.forEach( change => {
+		if ( change.name === '$text' || model.schema.isInline( change.position.nodeAfter ) ) {
+			changedNodes.add( change.position.parent );
+
+			[ ...model.markers.getMarkersAtPosition( change.position ) ].forEach( markerAtChange => {
+				removedMarkers.add( markerAtChange.name );
+			} );
+		} else if ( change.type === 'insert' ) {
+			changedNodes.add( change.position.nodeAfter );
+		}
+	} );
+
+	// Get markers from removed nodes also.
+	model.document.differ.getChangedMarkers().forEach( ( { name, data: { newRange } } ) => {
+		if ( newRange && newRange.start.root.rootName === '$graveyard' ) {
+			removedMarkers.add( name );
+		}
+	} );
+
+	// Get markers from the updated nodes and remove all (search will be re-run on these nodes).
+	changedNodes.forEach( node => {
+		const markersInNode = [ ...model.markers.getMarkersIntersectingRange( model.createRangeIn( node ) ) ];
+
+		markersInNode.forEach( marker => removedMarkers.add( marker.name ) );
+	} );
+
+	// Remove results & markers from the changed part of content.
+	model.change( writer => {
+		removedMarkers.forEach( markerName => {
+			// Remove the result first - in order to prevent rendering a removed marker.
+			if ( results.has( markerName ) ) {
+				results.remove( markerName );
+			}
+
+			writer.removeMarker( markerName );
+		} );
+	} );
+
+	// Run search callback again on updated nodes.
+	changedNodes.forEach( nodeToCheck => {
+		updateFindResultFromRange( model.createRangeOn( nodeToCheck ), model, searchCallback, results );
+	} );
+}
+
+/**
+ * Implements the editing part for find and replace plugin. For example conversion, commands etc.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class FindAndReplaceEditing extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'FindAndReplaceEditing';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		this.activeResults = null;
+
+		/**
+		 * An object storing the find and replace state within a given editor instance.
+		 *
+		 * @member {module:find-and-replace/findandreplaceediting~FindAndReplaceState} #state
+		 */
+		this.state = new FindAndReplaceState( this.editor.model );
+
+		this._defineConverters();
+		this._defineCommands();
+
+		this.listenTo( this.state, 'change:highlightedResult', ( eventInfo, name, newValue, oldValue ) => {
+			const { model } = this.editor;
+
+			model.change( writer => {
+				if ( oldValue ) {
+					const oldMatchId = oldValue.marker.name.split( ':' )[ 1 ];
+					const oldMarker = model.markers.get( `findResultHighlighted:${ oldMatchId }` );
+
+					if ( oldMarker ) {
+						writer.removeMarker( oldMarker );
+					}
+				}
+
+				if ( newValue ) {
+					const newMatchId = newValue.marker.name.split( ':' )[ 1 ];
+					writer.addMarker( `findResultHighlighted:${ newMatchId }`, {
+						usingOperation: false,
+						affectsData: false,
+						range: newValue.marker.getRange()
+					} );
+				}
+			} );
+		} );
+
+		const debouncedScrollListener = debounce( scrollToHighlightedResult.bind( this ), 32 );
+		// Debounce scroll as highlight might be changed very frequently, e.g. when there's a replace all command.
+		this.listenTo( this.state, 'change:highlightedResult', debouncedScrollListener, { priority: 'low' } );
+
+		// It's possible that the editor will get destroyed before debounced call kicks in.
+		// This would result with accessing a view three that is no longer in DOM.
+		this.listenTo( this.editor, 'destroy', debouncedScrollListener.cancel );
+
+		function scrollToHighlightedResult( eventInfo, name, newValue ) {
+			if ( newValue ) {
+				const domConverter = this.editor.editing.view.domConverter;
+				const viewRange = this.editor.editing.mapper.toViewRange( newValue.marker.getRange() );
+
+				scrollViewportToShowTarget( {
+					target: domConverter.viewRangeToDom( viewRange ),
+					viewportOffset: 40
+				} );
+			}
+		}
+	}
+
+	/**
+	 * Initiate a search.
+	 *
+	 * @param {Function|String} callbackOrText
+	 * @returns {module:utils/collection~Collection}
+	 */
+	find( callbackOrText ) {
+		const { editor } = this;
+		const { model } = editor;
+
+		const { findCallback, results } = editor.execute( 'find', callbackOrText );
+
+		this.activeResults = results;
+
+		// @todo: handle this listener, another copy is in findcommand.js file.
+		this.listenTo( model.document, 'change:data', () => onDocumentChange( this.activeResults, model, findCallback ) );
+
+		return this.activeResults;
+	}
+
+	/**
+	 * Stops active results from updating, and clears out the results.
+	 */
+	stop() {
+		if ( !this.activeResults ) {
+			return;
+		}
+
+		this.stopListening( this.editor.model.document );
+
+		this.state.clear( this.editor.model );
+
+		this.activeResults = null;
+	}
+
+	/**
+	 * @private
+	 */
+	_defineCommands() {
+		this.editor.commands.add( 'find', new FindCommand( this.editor, this.state ) );
+		this.editor.commands.add( 'findNext', new FindNextCommand( this.editor, this.state ) );
+		this.editor.commands.add( 'findPrevious', new FindPreviousCommand( this.editor, this.state ) );
+		this.editor.commands.add( 'replace', new ReplaceCommand( this.editor, this.state ) );
+		this.editor.commands.add( 'replaceAll', new ReplaceAllCommand( this.editor, this.state ) );
+	}
+
+	/**
+	 * @private
+	 */
+	_defineConverters() {
+		const { editor } = this;
+
+		// Setup the marker highlighting conversion.
+		editor.conversion.for( 'editingDowncast' ).markerToHighlight( {
+			model: 'findResult',
+			view: ( { markerName } ) => {
+				const [ , id ] = markerName.split( ':' );
+
+				// Marker removal from the view has a bug: https://github.com/ckeditor/ckeditor5/issues/7499
+				// A minimal option is to return a new object for each converted marker...
+				return {
+					name: 'span',
+					classes: [ 'ck-find-result' ],
+					attributes: {
+						// ...however, adding a unique attribute should be future-proof..
+						'data-find-result': id
+					}
+				};
+			}
+		} );
+
+		editor.conversion.for( 'editingDowncast' ).markerToHighlight( {
+			model: 'findResultHighlighted',
+			view: ( { markerName } ) => {
+				const [ , id ] = markerName.split( ':' );
+
+				// Marker removal from the view has a bug: https://github.com/ckeditor/ckeditor5/issues/7499
+				// A minimal option is to return a new object for each converted marker...
+				return {
+					name: 'span',
+					classes: [ HIGHLIGHT_CLASS ],
+					attributes: {
+						// ...however, adding a unique attribute should be future-proof..
+						'data-find-result': id
+					}
+				};
+			}
+		} );
+	}
+}