qms-angular 1.0.73 → 1.0.74

package/src/assets/qms-ckeditor-plugin/src/plugins/ckeditor5-source-editing/src/sourceediting.js

@@ -0,0 +1,386 @@
+/**
+ * @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 source-editing/sourceediting
+ */
+
+/* global console */
+
+import { Plugin, PendingActions } from 'ckeditor5/src/core';
+import { ButtonView } from 'ckeditor5/src/ui';
+import { createElement, ElementReplacer } from 'ckeditor5/src/utils';
+import { formatHtml } from './utils/formathtml';
+
+import '../theme/sourceediting.css';
+
+import sourceEditingIcon from '../theme/icons/source-editing.svg';
+
+const COMMAND_FORCE_DISABLE_ID = 'SourceEditingMode';
+
+/**
+ * The source editing feature.
+ *
+ * It provides the possibility to view and edit the source of the document.
+ *
+ * For a detailed overview, check the {@glink features/source-editing source editing feature documentation} and the
+ * {@glink api/source-editing package page}.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class SourceEditing extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'SourceEditing';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ PendingActions ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	constructor( editor ) {
+		super( editor );
+
+		/**
+		 * Flag indicating whether the document source mode is active.
+		 *
+		 * @observable
+		 * @member {Boolean}
+		 */
+		this.set( 'isSourceEditingMode', false );
+
+		/**
+		 * The element replacer instance used to replace the editing roots with the wrapper elements containing the document source.
+		 *
+		 * @private
+		 * @member {module:utils/elementreplacer~ElementReplacer}
+		 */
+		this._elementReplacer = new ElementReplacer();
+
+		/**
+		 * Maps all root names to wrapper elements containing the document source.
+		 *
+		 * @private
+		 * @member {Map.<String,HTMLElement>}
+		 */
+		this._replacedRoots = new Map();
+
+		/**
+		 * Maps all root names to their document data.
+		 *
+		 * @private
+		 * @member {Map.<String,String>}
+		 */
+		this._dataFromRoots = new Map();
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+		const t = editor.t;
+
+		editor.ui.componentFactory.add( 'sourceEditing', locale => {
+			const buttonView = new ButtonView( locale );
+
+			buttonView.set( {
+				label: t( 'Source' ),
+				icon: sourceEditingIcon,
+				tooltip: true,
+				withText: true,
+				class: 'ck-source-editing-button'
+			} );
+
+			buttonView.bind( 'isOn' ).to( this, 'isSourceEditingMode' );
+
+			// The button should be disabled if one of the following conditions is met:
+			buttonView.bind( 'isEnabled' ).to(
+				this, 'isEnabled',
+				editor, 'isReadOnly',
+				editor.plugins.get( PendingActions ), 'hasAny',
+				( isEnabled, isEditorReadOnly, hasAnyPendingActions ) => {
+					// (1) The plugin itself is disabled.
+					if ( !isEnabled ) {
+						return false;
+					}
+
+					// (2) The editor is in read-only mode.
+					if ( isEditorReadOnly ) {
+						return false;
+					}
+
+					// (3) Any pending action is scheduled. It may change the model, so modifying the document source should be prevented
+					// until the model is finally set.
+					if ( hasAnyPendingActions ) {
+						return false;
+					}
+
+					return true;
+				}
+			);
+
+			this.listenTo( buttonView, 'execute', () => {
+				this.isSourceEditingMode = !this.isSourceEditingMode;
+			} );
+
+			return buttonView;
+		} );
+
+		// Currently, the plugin handles the source editing mode by itself only for the classic editor. To use this plugin with other
+		// integrations, listen to the `change:isSourceEditingMode` event and act accordingly.
+		if ( this._isAllowedToHandleSourceEditingMode() ) {
+			this.on( 'change:isSourceEditingMode', ( evt, name, isSourceEditingMode ) => {
+				if ( isSourceEditingMode ) {
+					this._showSourceEditing();
+					this._disableCommands();
+				} else {
+					this._hideSourceEditing();
+					this._enableCommands();
+				}
+			} );
+
+			this.on( 'change:isEnabled', ( evt, name, isEnabled ) => this._handleReadOnlyMode( !isEnabled ) );
+
+			this.listenTo( editor, 'change:isReadOnly', ( evt, name, isReadOnly ) => this._handleReadOnlyMode( isReadOnly ) );
+		}
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	afterInit() {
+		const editor = this.editor;
+
+		const collaborationPluginNamesToWarn = [
+			'RealTimeCollaborativeEditing',
+			'CommentsEditing',
+			'TrackChangesEditing',
+			'RevisionHistory'
+		];
+
+		// Currently, the basic integration with Collaboration Features is to display a warning in the console.
+		if ( collaborationPluginNamesToWarn.some( pluginName => editor.plugins.has( pluginName ) ) ) {
+			console.warn(
+				'You initialized the editor with the source editing feature and at least one of the collaboration features. ' +
+				'Please be advised that the source editing feature may not work, and be careful when editing document source ' +
+				'that contains markers created by the collaboration features.'
+			);
+		}
+
+		// Restricted Editing integration can also lead to problems. Warn the user accordingly.
+		if ( editor.plugins.has( 'RestrictedEditingModeEditing' ) ) {
+			console.warn(
+				'You initialized the editor with the source editing feature and restricted editing feature. ' +
+				'Please be advised that the source editing feature may not work, and be careful when editing document source ' +
+				'that contains markers created by the restricted editing feature.'
+			);
+		}
+	}
+
+	/**
+	 * Creates source editing wrappers that replace each editing root. Each wrapper contains the document source from the corresponding
+	 * root.
+	 *
+	 * The wrapper element contains a textarea and it solves the problem, that the textarea element cannot auto expand its height based on
+	 * the content it contains. The solution is to make the textarea more like a plain div element, which expands in height as much as it
+	 * needs to, in order to display the whole document source without scrolling. The wrapper element is a parent for the textarea and for
+	 * the pseudo-element `::after`, that replicates the look, content, and position of the textarea. The pseudo-element replica is hidden,
+	 * but it is styled to be an identical visual copy of the textarea with the same content. Then, the wrapper is a grid container and both
+	 * of its children (the textarea and the `::after` pseudo-element) are positioned within a CSS grid to occupy the same grid cell. The
+	 * content in the pseudo-element `::after` is set in CSS and it stretches the grid to the appropriate size based on the textarea value.
+	 * Since both children occupy the same grid cell, both have always the same height.
+	 *
+	 * @private
+	 */
+	_showSourceEditing() {
+		const editor = this.editor;
+		const editingView = editor.editing.view;
+		const model = editor.model;
+
+		model.change( writer => {
+			writer.setSelection( null );
+			writer.removeSelectionAttribute( model.document.selection.getAttributeKeys() );
+		} );
+
+		// It is not needed to iterate through all editing roots, as currently the plugin supports only the Classic Editor with a single
+		// main root, but this code may help understand and use this feature in external integrations.
+		for ( const [ rootName, domRootElement ] of editingView.domRoots ) {
+			const data = formatSource( editor.data.get( { rootName } ) );
+
+			const domSourceEditingElementTextarea = createElement( domRootElement.ownerDocument, 'textarea', { rows: '1' } );
+
+			const domSourceEditingElementWrapper = createElement( domRootElement.ownerDocument, 'div', {
+				class: 'ck-source-editing-area',
+				'data-value': data
+			}, [ domSourceEditingElementTextarea ] );
+
+			domSourceEditingElementTextarea.value = data;
+
+			// Setting a value to textarea moves the input cursor to the end. We want the selection at the beginning.
+			domSourceEditingElementTextarea.setSelectionRange( 0, 0 );
+
+			// Bind the textarea's value to the wrapper's `data-value` property. Each change of the textarea's value updates the
+			// wrapper's `data-value` property.
+			domSourceEditingElementTextarea.addEventListener( 'input', () => {
+				domSourceEditingElementWrapper.dataset.value = domSourceEditingElementTextarea.value;
+			} );
+
+			editingView.change( writer => {
+				const viewRoot = editingView.document.getRoot( rootName );
+
+				writer.addClass( 'ck-hidden', viewRoot );
+			} );
+
+			this._replacedRoots.set( rootName, domSourceEditingElementWrapper );
+
+			this._elementReplacer.replace( domRootElement, domSourceEditingElementWrapper );
+
+			this._dataFromRoots.set( rootName, data );
+		}
+
+		this._focusSourceEditing();
+	}
+
+	/**
+	 * Restores all hidden editing roots and sets the source data in them.
+	 *
+	 * @private
+	 */
+	_hideSourceEditing() {
+		const editor = this.editor;
+		const editingView = editor.editing.view;
+
+		const data = {};
+
+		for ( const [ rootName, domSourceEditingElementWrapper ] of this._replacedRoots ) {
+			const oldData = this._dataFromRoots.get( rootName );
+			const newData = domSourceEditingElementWrapper.dataset.value;
+
+			// Do not set the data unless some changes have been made in the meantime.
+			// This prevents empty undo steps after switching to the normal editor.
+			if ( oldData !== newData ) {
+				data[ rootName ] = newData;
+			}
+
+			editingView.change( writer => {
+				const viewRoot = editingView.document.getRoot( rootName );
+
+				writer.removeClass( 'ck-hidden', viewRoot );
+			} );
+		}
+
+		this._elementReplacer.restore();
+
+		this._replacedRoots.clear();
+
+		this._dataFromRoots.clear();
+
+		if ( Object.keys( data ).length ) {
+			editor.data.set( data, { batchType: 'default' } );
+		}
+
+		editor.editing.view.focus();
+	}
+
+	/**
+	 * Focuses the textarea containing document source from the first editing root.
+	 *
+	 * @private
+	 */
+	_focusSourceEditing() {
+		const [ domSourceEditingElementWrapper ] = this._replacedRoots.values();
+
+		const textarea = domSourceEditingElementWrapper.querySelector( 'textarea' );
+
+		textarea.focus();
+	}
+
+	/**
+	 * Disables all commands.
+	 *
+	 * @private
+	 */
+	_disableCommands() {
+		const editor = this.editor;
+
+		for ( const command of editor.commands.commands() ) {
+			command.forceDisabled( COMMAND_FORCE_DISABLE_ID );
+		}
+	}
+
+	/**
+	 * Clears forced disable for all commands, that was previously set through {@link #_disableCommands}.
+	 *
+	 * @private
+	 */
+	_enableCommands() {
+		const editor = this.editor;
+
+		for ( const command of editor.commands.commands() ) {
+			command.clearForceDisabled( COMMAND_FORCE_DISABLE_ID );
+		}
+	}
+
+	/**
+	 * Adds or removes the `readonly` attribute from the textarea from all roots, if document source mode is active.
+	 *
+	 * @param {Boolean} isReadOnly Indicates whether all textarea elements should be read-only.
+	 */
+	_handleReadOnlyMode( isReadOnly ) {
+		if ( !this.isSourceEditingMode ) {
+			return;
+		}
+
+		for ( const [ , domSourceEditingElementWrapper ] of this._replacedRoots ) {
+			domSourceEditingElementWrapper.querySelector( 'textarea' ).readOnly = isReadOnly;
+		}
+	}
+
+	/**
+	 * Checks, if the plugin is allowed to handle the source editing mode by itself. Currently, the source editing mode is supported only
+	 * for the {@link module:editor-classic/classiceditor~ClassicEditor classic editor}.
+	 *
+	 * @private
+	 * @returns {Boolean}
+	 */
+	_isAllowedToHandleSourceEditingMode() {
+		const editor = this.editor;
+		const editable = editor.ui.view.editable;
+
+		// Checks, if the editor's editable belongs to the editor's DOM tree.
+		return editable && !editable._hasExternalElement;
+	}
+}
+
+// Formats the content for a better readability.
+//
+// For a non-HTML source the unchanged input string is returned.
+//
+// @param {String} input Input string to check.
+// @returns {Boolean}
+function formatSource( input ) {
+	if ( !isHtml( input ) ) {
+		return input;
+	}
+
+	return formatHtml( input );
+}
+
+// Checks, if the document source is HTML. It is sufficient to just check the first character from the document data.
+//
+// @param {String} input Input string to check.
+// @returns {Boolean}
+function isHtml( input ) {
+	return input.startsWith( '<' );
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/ckeditor5-source-editing/src/utils/formathtml.js

@@ -0,0 +1,142 @@
+/**
+ * @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 source-editing/utils/formathtml
+ */
+
+/**
+ * A simple (and naive) HTML code formatter that returns a formatted HTML markup that can be easily
+ * parsed by human eyes. It beautifies the HTML code by adding new lines between elements that behave like block elements
+ * (https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
+ * and a few more like `tr`, `td`, and similar ones) and inserting indents for nested content.
+ *
+ * WARNING: This function works only on a text that does not contain any indentations or new lines.
+ * Calling this function on the already formatted text will damage the formatting.
+ *
+ * @param {String} input An HTML string to format.
+ * @returns {String}
+ */
+export function formatHtml( input ) {
+	// A list of block-like elements around which the new lines should be inserted, and within which
+	// the indentation of their children should be increased.
+	// The list is partially based on https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements that contains
+	// a full list of HTML block-level elements.
+	// A void element is an element that cannot have any child - https://html.spec.whatwg.org/multipage/syntax.html#void-elements.
+	const elementsToFormat = [
+		{ name: 'address', isVoid: false },
+		{ name: 'article', isVoid: false },
+		{ name: 'aside', isVoid: false },
+		{ name: 'blockquote', isVoid: false },
+		{ name: 'br', isVoid: true },
+		{ name: 'details', isVoid: false },
+		{ name: 'dialog', isVoid: false },
+		{ name: 'dd', isVoid: false },
+		{ name: 'div', isVoid: false },
+		{ name: 'dl', isVoid: false },
+		{ name: 'dt', isVoid: false },
+		{ name: 'fieldset', isVoid: false },
+		{ name: 'figcaption', isVoid: false },
+		{ name: 'figure', isVoid: false },
+		{ name: 'footer', isVoid: false },
+		{ name: 'form', isVoid: false },
+		{ name: 'h1', isVoid: false },
+		{ name: 'h2', isVoid: false },
+		{ name: 'h3', isVoid: false },
+		{ name: 'h4', isVoid: false },
+		{ name: 'h5', isVoid: false },
+		{ name: 'h6', isVoid: false },
+		{ name: 'header', isVoid: false },
+		{ name: 'hgroup', isVoid: false },
+		{ name: 'hr', isVoid: true },
+		{ name: 'input', isVoid: true },
+		{ name: 'li', isVoid: false },
+		{ name: 'main', isVoid: false },
+		{ name: 'nav', isVoid: false },
+		{ name: 'ol', isVoid: false },
+		{ name: 'p', isVoid: false },
+		{ name: 'pre', isVoid: false },
+		{ name: 'section', isVoid: false },
+		{ name: 'table', isVoid: false },
+		{ name: 'tbody', isVoid: false },
+		{ name: 'td', isVoid: false },
+		{ name: 'textarea', isVoid: false },
+		{ name: 'th', isVoid: false },
+		{ name: 'thead', isVoid: false },
+		{ name: 'tr', isVoid: false },
+		{ name: 'ul', isVoid: false }
+	];
+
+	const elementNamesToFormat = elementsToFormat.map( element => element.name ).join( '|' );
+
+	// It is not the fastest way to format the HTML markup but the performance should be good enough.
+	const lines = input
+		// Add new line before and after `<tag>` and `</tag>`.
+		// It may separate individual elements with two new lines, but this will be fixed below.
+		.replace( new RegExp( `</?(${ elementNamesToFormat })( .*?)?>`, 'g' ), '\n$&\n' )
+		// Divide input string into lines, which start with either an opening tag, a closing tag, or just a text.
+		.split( '\n' );
+
+	let indentCount = 0;
+
+	return lines
+		.filter( line => line.length )
+		.map( line => {
+			if ( isNonVoidOpeningTag( line, elementsToFormat ) ) {
+				return indentLine( line, indentCount++ );
+			}
+
+			if ( isClosingTag( line, elementsToFormat ) ) {
+				return indentLine( line, --indentCount );
+			}
+
+			return indentLine( line, indentCount );
+		} )
+		.join( '\n' );
+}
+
+// Checks, if an argument is an opening tag of a non-void element to be formatted.
+//
+// @param {String} line String to check.
+// @param {Array} elementsToFormat Elements to be formatted.
+// @param {String} elementsToFormat.name Element name.
+// @param {Boolean} elementsToFormat.isVoid Flag indicating whether element is a void one.
+// @returns {Boolean}
+function isNonVoidOpeningTag( line, elementsToFormat ) {
+	return elementsToFormat.some( element => {
+		if ( element.isVoid ) {
+			return false;
+		}
+
+		if ( !new RegExp( `<${ element.name }( .*?)?>` ).test( line ) ) {
+			return false;
+		}
+
+		return true;
+	} );
+}
+
+// Checks, if an argument is a closing tag.
+//
+// @param {String} line String to check.
+// @param {Array} elementsToFormat Elements to be formatted.
+// @param {String} elementsToFormat.name Element name.
+// @param {Boolean} elementsToFormat.isVoid Flag indicating whether element is a void one.
+// @returns {Boolean}
+function isClosingTag( line, elementsToFormat ) {
+	return elementsToFormat.some( element => {
+		return new RegExp( `</${ element.name }>` ).test( line );
+	} );
+}
+
+// Indents a line by a specified number of characters.
+//
+// @param {String} line Line to indent.
+// @param {Number} indentCount Number of characters to use for indentation.
+// @param {String} [indentChar] Indentation character(s). 4 spaces by default.
+// @returns {String}
+function indentLine( line, indentCount, indentChar = '    ' ) {
+	return `${ indentChar.repeat( indentCount ) }${ line }`;
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/ckeditor5-source-editing/theme/icons/source-editing.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m12.5 0 5 4.5v15.003h-16V0h11zM3 1.5v3.25l-1.497 1-.003 8 1.5 1v3.254L7.685 18l-.001 1.504H17.5V8.002L16 9.428l-.004-4.22-4.222-3.692L3 1.5z"/><path d="M4.06 6.64a.75.75 0 0 1 .958 1.15l-.085.07L2.29 9.75l2.646 1.89c.302.216.4.62.232.951l-.058.095a.75.75 0 0 1-.951.232l-.095-.058-3.5-2.5V9.14l3.496-2.5zm4.194 6.22a.75.75 0 0 1-.958-1.149l.085-.07 2.643-1.89-2.646-1.89a.75.75 0 0 1-.232-.952l.058-.095a.75.75 0 0 1 .95-.232l.096.058 3.5 2.5v1.22l-3.496 2.5zm7.644-.836 2.122 2.122-5.825 5.809-2.125-.005.003-2.116zm2.539-1.847 1.414 1.414a.5.5 0 0 1 0 .707l-1.06 1.06-2.122-2.12 1.061-1.061a.5.5 0 0 1 .707 0z"/></svg>

package/src/assets/qms-ckeditor-plugin/src/plugins/ckeditor5-source-editing/theme/sourceediting.css

@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+@import "@ckeditor/ckeditor5-theme-lark/theme/mixins/_rounded.css";
+@import "@ckeditor/ckeditor5-theme-lark/theme/mixins/_focus.css";
+@import "@ckeditor/ckeditor5-theme-lark/theme/mixins/_shadow.css";
+
+.ck-source-editing-area {
+	display: inline-grid;
+	width: 100%;
+	font-family: monospace;
+}
+
+.ck-source-editing-area::after,
+.ck-source-editing-area textarea {
+	grid-area: 1/1;
+	padding: var(--ck-spacing-large);
+	margin: 0;
+	border: 1px solid transparent;
+	line-height: var(--ck-line-height-base);
+	font-size: var(--ck-font-size-normal);
+	white-space: pre-wrap;
+}
+
+.ck-source-editing-area::after {
+	content: attr(data-value) " ";
+	visibility: hidden;
+}
+
+.ck-source-editing-area textarea {
+	resize: none;
+	outline: none;
+	overflow: hidden;
+
+	border-color: var(--ck-color-base-border);
+
+	@mixin ck-rounded-corners {
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+	}
+
+	&:not([readonly]):focus {
+		@mixin ck-focus-ring;
+		@mixin ck-box-shadow var(--ck-inner-shadow);
+	}
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/fullscreen/qmsCKEditorFullscreenPlugin.js

@@ -8,10 +8,6 @@ import * as constant from '../common/qmsCKEditorConstant';
 export default class QMSCKEditorFullscreenPlugin extends Plugin {
     init() {
         const editor = this.editor;
-        editor.editing.view.change( writer => {
-            // writer.setStyle( 'height', 'calc(100vh - 180px)', editor.editing.view.document.getRoot() );
-        } );
-
         editor.ui.componentFactory.add('qmsFullscreen', locale => {
             const view = new ButtonView(locale);
 
@@ -21,7 +17,7 @@ export default class QMSCKEditorFullscreenPlugin extends Plugin {
                 tooltip: true
             });
             const fullscreenClass = this.editor.config.get('fullScreenConfig.class') || 'qmsckeditor__fullscreen';
-             
+
             view.on('execute', () => {
                 const ck = window.document.getElementById('qmsckeditor');
                 const isFullscreen = ck && ck.classList.contains(fullscreenClass);