qms-angular 1.0.70 → 1.0.74

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/common/qmsCKEditorConstant.js

@@ -21,6 +21,16 @@ export const QMSCK_IMAGEMAP_IS_PROCESSING = 'QMSCK_IMAGEMAP_IS_PROCESSING';
 export const QMSCK_BPMN_PLUGIN_MSG = 'QMSCK_BPMN_PLUGIN_MSG';
 export const QMSCK_BPMN_PLUGIN_RESP = 'QMSCK_BPMN_PLUGIN_RESP';
 export const QMSCK_BPMN = 'bpmn';
+/* About CKEditor */
+export const QMSCK_ABOUT_CKEDITOR_PLUGIN_MSG = 'QMSCK_ABOUT_CKEDITOR_PLUGIN_MSG';
+export const QMSCK_BPMN_IS_PROCESSING = 'QMSCK_BPMN_IS_PROCESSING';
+/* Flowchart */
+export const QMSCK_FLOWCHART_PLUGIN_MSG = 'QMSCK_FLOWCHART_PLUGIN_MSG';
+export const QMSCK_FLOWCHART_PLUGIN_RESP = 'QMSCK_FLOWCHART_PLUGIN_RESP';
+export const QMSCK_FLOWCHART = 'flowchart';
 /* Toolbar Toggle */
 export const QMSCK_TOGGLE_TOOLBAR_MSG = 'QMSCK_TOGGLE_TOOLBAR_MSG';
- 
+/* Browse Video */
+export const QMSCK_BROWSE_VIDEO_MSG = 'QMSCK_BROWSE_VIDEO_MSG';
+export const QMSCK_BROWSE_VIDEO_RESP = 'QMSCK_BROWSE_VIDEO_RESP';
+export const QMSCK_BROWSE_VIDEO_IS_PROCESSING = 'QMSCK_BROWSE_VIDEO_IS_PROCESSING';

package/src/assets/qms-ckeditor-plugin/src/plugins/common/qmsCKEditorService.js

@@ -79,3 +79,24 @@ export function bpmnNotify(value) {
       '*'
   );
 }
+
+
+export function uploadVideoNotify(value) {
+    window.postMessage(
+        {
+            eventName: constant.QMSCK_BROWSE_VIDEO_MSG,
+            value
+        },
+        '*'
+    );
+}
+
+export function aboutCKEditorNotify(value) {
+  window.postMessage(
+      {
+          eventName: constant.QMSCK_ABOUT_CKEDITOR_PLUGIN_MSG,
+          value
+      },
+      '*'
+  );
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/common/qmsCKEditorUtil.js

@@ -37,19 +37,19 @@ function twoDigitPad(num) {
  * The default DateTime pattern is dd/MM/yyyy hh:mm:ss aaa
  *
  * DateTime Patterns:
- * 
+ *
  * yy = 2-digit year; yyyy = full year
- * 
+ *
  * M = digit month; MM = 2-digit month
- * 
+ *
  * d = digit day; dd = 2-digit day
- * 
+ *
  * h = hours am/pm; hh = 2-digit hours am/pm; H = hours; HH = 2-digit hours
- * 
+ *
  * m = minutes; mm = 2-digit minutes; aaa = AM/PM
- * 
+ *
  * s = seconds; ss = 2-digit seconds
- * 
+ *
  * S = miliseconds
  */
 export function formatDate(date, datetimeFormat){
@@ -89,3 +89,25 @@ export function formatDate(date, datetimeFormat){
       .replace('M', M)
       .replace('aaa', aaa);
 }
+
+export function trimStart(text, charToRemove){
+	if(text && text.length > 0){
+		if(text.charAt(0) == charToRemove){
+			return text.substring(1);
+		}
+	}
+	return text;
+}
+
+export function debounced(fn, delay) {
+	let timerId;
+	return function (...args) {
+	  if (timerId) {
+		clearTimeout(timerId);
+	  }
+	  timerId = setTimeout(() => {
+		fn(...args);
+		timerId = null;
+	  }, delay);
+	}
+  }

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

@@ -1,38 +1,45 @@
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import fullscreenIcon from '../../themes/icons/fullscreen.svg';
+import fullscreenExitIcon from '../../themes/icons/fullscreen_exit.svg'
 import * as QMSCKEditorService from '../common/qmsCKEditorService';
+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);
 
             view.set({
-                label: 'Maximine/Minimine',
+                label: 'Maximine',
                 icon: fullscreenIcon,
                 tooltip: true
             });
+            const fullscreenClass = this.editor.config.get('fullScreenConfig.class') || 'qmsckeditor__fullscreen';
 
             view.on('execute', () => {
-                const fullscreen = window.parent.document.getElementsByClassName('qmsckeditor__fullscreen');
-                if (fullscreen && fullscreen.length > 0) {
-                    editor.editing.view.change( writer => {
-                        writer.setStyle( 'height', 'calc(100vh - 180px)', editor.editing.view.document.getRoot() );
-                    } );
+                const ck = window.document.getElementById('qmsckeditor');
+                const isFullscreen = ck && ck.classList.contains(fullscreenClass);
+                if (!isFullscreen) {
+                    view.set({
+                        label: 'Minimine',
+                        icon: fullscreenExitIcon,
+                        tooltip: true
+                    });
+                    ck.classList.add(fullscreenClass);
                 }
                 else {
-                    editor.editing.view.change( writer => {
-                        writer.setStyle( 'height', 'calc(100vh - 150px)', editor.editing.view.document.getRoot() );
-                    } );
+                    view.set({
+                        label: 'Maximine',
+                        icon: fullscreenIcon,
+                        tooltip: true
+                    });
+                    if (ck.classList.contains(fullscreenClass)) {
+                        ck.classList.remove(fullscreenClass);
+                    }
                 }
-
-                QMSCKEditorService.fullscreenNotify(null);
+                QMSCKEditorService.fullscreenNotify(isFullscreen);
             })
 
             return view;