qms-angular 1.0.69 → 1.0.73

package/src/assets/qms-ckeditor-plugin/src/plugins/tableofcontents/tableofcontentsediting.js

@@ -0,0 +1,59 @@
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import { TOC_ATTRIBUTES, TOC_COMMAND, normalizeHeadingOptions } from './utils';
+import TableOfContentsCommand from './tableofcontentscommand';
+import '../../themes/styles/heading.css';
+
+export default class TableOfContentsEditing extends Plugin {
+    static get pluginName() {
+		return 'TableOfContentsEditing';
+	} 
+
+    init() {
+        const editor = this.editor;
+        const model =  editor.model;
+        const supportedHeadings = normalizeHeadingOptions(editor.config.get('tableOfContents.supportedHeadings'));
+        model.schema.extend('$block', { allowAttributes: TOC_ATTRIBUTES.HEADING_CLASS } );
+        model.schema.setAttributeProperties(TOC_ATTRIBUTES.HEADING_CLASS, { isFormatting: true } );
+        editor.conversion.attributeToAttribute(buildClassDefinition(supportedHeadings));
+        editor.commands.add(TOC_COMMAND, new TableOfContentsCommand(editor));
+    }
+}
+
+function buildClassDefinition( supportedHeadings ) {
+    const options = [];
+    supportedHeadings.forEach((name) =>{
+		try{
+			/* Reference to the default config of the heading plugin
+			editor.config.define( 'heading', {
+				options: [
+					{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
+					{ model: 'heading1', view: 'h2', title: 'Heading 1', class: 'ck-heading_heading1' },
+					{ model: 'heading2', view: 'h3', title: 'Heading 2', class: 'ck-heading_heading2' },
+					{ model: 'heading3', view: 'h4', title: 'Heading 3', class: 'ck-heading_heading3' }
+				]
+			}); */
+			const level = parseInt(name.replace('heading', '')) + 1;
+			const className = 'h' + level;
+			options.push({ name, className });
+		}
+		catch{
+
+		}
+    });
+
+	const definition = {
+		model: {
+			key: TOC_ATTRIBUTES.HEADING_CLASS,
+			values: options.map(option => option.name)
+		},
+		view: {}
+	};
+
+	for (const option of options) {
+		definition.view[option.name] = {
+			key: 'class',
+			value: option.className
+		};
+	}
+	return definition;
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/tableofcontents/tableofcontentsui.js

@@ -0,0 +1,35 @@
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import tableIcon from '../../themes/icons/table-excel.svg';
+import { TOC_COMMAND, normalizeHeadingOptions } from './utils';
+
+export default class TableOfContentsUI extends Plugin {
+    static get pluginName() {
+		return 'TableOfContentsUI';
+	} 
+
+    init() {
+        const editor = this.editor;
+        const t = editor.t;
+        const supportedHeadings = normalizeHeadingOptions(editor.config.get('tableOfContents.supportedHeadings'));
+        editor.ui.componentFactory.add('tableOfContents', locale => {
+            const buttonView = new ButtonView( locale );
+            buttonView.set( {
+                label: t('Create Table of Contents'),
+                icon: tableIcon,
+                withText: false,
+                tooltip: true
+            } );
+            
+            // Bind button to the command.
+            const tocCommand = editor.commands.get(TOC_COMMAND);
+            buttonView.bind('isEnabled').to(tocCommand, 'isEnabled' );
+            buttonView.bind('isOn').to(tocCommand, 'value', value => !!value );
+
+            buttonView.on('execute', () => {
+                editor.execute(TOC_COMMAND, { headings: supportedHeadings });
+            });
+            return buttonView;
+        });
+    }
+} 

package/src/assets/qms-ckeditor-plugin/src/plugins/tableofcontents/utils.js

@@ -0,0 +1,62 @@
+
+export const DEFAULT_SUPPORTED_HEADINGS = ['heading1', 'heading2', 'heading3'];//It is already defined by the heading plugin
+export const TOC_CUSTOM_PROPERTY = 'toc';
+export const TOC_COMMAND = 'inserttoc';
+export const TOC_ATTRIBUTES = {
+	HEADING_CLASS: 'headingClass',
+	ANCHOR_ID: 'anchorId', //It is already defined by the anchor plugin,
+	LINK_HREF: 'linkHref'//It is already defined by the link plugin
+}
+ 
+export const TOC_ELEMENTS = {
+	TOC: 'toc',
+	PARAGRAPH: 'paragraph' //It is already defined by the paragraph plugin
+}
+
+export function normalizeHeadingOptions(headingOptions) {
+	let headings = headingOptions || [];
+	headings = headings.map(value => value.toLowerCase()).filter(value => value.startsWith('heading'));
+	if(headings.length == 0){
+		headings = DEFAULT_SUPPORTED_HEADINGS;
+	}
+	return headings;
+}
+
+export function rangeToText(range) {
+	return Array.from(range.getItems()).reduce((rangeText, node) => {
+		if (!(node.is('text') || node.is('textProxy'))) {
+			return rangeText;
+		}
+		return rangeText + node.data;
+	}, '');
+}
+
+export function getAttributeValueOn(range, attributeName) {
+	for (const item of range.getItems()) {
+		for (const [ key, value ] of item.getAttributes()) {
+			if (key.toLowerCase() == attributeName.toLowerCase()) {
+				return value;
+			}
+		}
+	}
+    return null;
+}
+
+export function setAttributeOn(range, schema, writer, attribute) {
+	for (const node of Array.from(range.getItems())) {
+		if (schema.checkAttribute(node, attribute.key)) {
+			writer.setAttribute(attribute.key, attribute.value, node);
+			return true;
+		}
+	}
+    return false;
+}
+
+export function getTextNodeOn(range) {
+	for (const node of Array.from(range.getItems())) {
+		if (node.is('text') || node.is('textProxy')) {
+			return node;
+		}
+	}
+    return null;
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/template/loadtemplatedialogcommand.js

@@ -0,0 +1,14 @@
+import { Command } from '@ckeditor/ckeditor5-core';
+import * as QMSCKEditorConstant from '../common/qmsCKEditorConstant';
+import * as QMSCKEditorService from '../common/qmsCKEditorService';
+
+export default class LoadTemplateDialogCommand extends Command {
+
+	execute() {
+    QMSCKEditorService.loadTemplateNotify(null);
+    window.addEventListener(QMSCKEditorConstant.QMSCK_LOAD_TEMPLATE_PLUGIN_RESP, function (evt) {
+        editor.setData(evt.detail);
+    }, { once: true });
+	}
+}
+

package/src/assets/qms-ckeditor-plugin/src/plugins/template/qmsCKEditorLoadTemplatePlugin.js

@@ -1,32 +1,30 @@
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import TemplateIcon from '../../themes/icons/load_template.svg';
-import * as QMSCKEditorConstant from '../common/qmsCKEditorConstant';
-import * as QMSCKEditorService from '../common/qmsCKEditorService';
-
+import LoadTemplateDialogCommand from './loadtemplatedialogcommand';
 export default class QMSCKEditorLoadTemplatePlugin extends Plugin {
     init() {
         const editor = this.editor;
+        const t = editor.t;
 
         editor.ui.componentFactory.add('qmsLoadTemplate', locale => {
             const view = new ButtonView(locale);
-
+            const command = editor.commands.get('loadtemplateDialog');
             view.set({
-                label: 'Templates',
+                label: t('Templates'),
                 icon: TemplateIcon,
                 tooltip: true
             });
 
-            view.on('execute', () => {
-               QMSCKEditorService.loadTemplateNotify(null);
+            view.bind('isEnabled').to(command);
 
-                window.addEventListener(QMSCKEditorConstant.QMSCK_LOAD_TEMPLATE_PLUGIN_RESP, function (evt) {
-                    editor.setData(evt.detail);
-                },
-                { once: true });
+            view.on('execute', () => {
+              command.execute();
             });
 
             return view;
-        })
+        });
+
+        editor.commands.add('loadtemplateDialog', new LoadTemplateDialogCommand(editor));
     }
 }

package/src/assets/qms-ckeditor-plugin/src/plugins/template/qmsCKEdtiorTemplatePlugin.js

@@ -1,26 +1,29 @@
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import TemplateIcon from '../../themes/icons/template.svg';
-import * as QMSCKEditorService from '../common/qmsCKEditorService';
-
+import TemplateDialogCommand from './templatedialogcommand';
 export default class QMSCKEditorTemplatePlugin extends Plugin {
     init() {
         const editor = this.editor;
-
+        const t = editor.t;
         editor.ui.componentFactory.add('qmsTemplate', locale => {
             const view = new ButtonView(locale);
-
+            const command = editor.commands.get('templateDialog');
             view.set({
-                label: 'Add Template',
+                label: t('Add Template'),
                 icon: TemplateIcon,
                 tooltip: true
             });
 
+            view.bind('isEnabled').to(command);
+
             view.on('execute', () => {
-                QMSCKEditorService.templateNotify(null);
+              command.execute();
             });
 
             return view;
-        })
+        });
+
+        editor.commands.add('templateDialog', new TemplateDialogCommand(editor));
     }
 }

package/src/assets/qms-ckeditor-plugin/src/plugins/template/templatedialogcommand.js

@@ -0,0 +1,9 @@
+import { Command } from '@ckeditor/ckeditor5-core';
+import * as QMSCKEditorService from '../common/qmsCKEditorService';
+
+export default class TemplateDialogCommand extends Command {
+	execute() {
+    QMSCKEditorService.templateNotify(null);
+	}
+}
+

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

@@ -1,8 +1,7 @@
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import timestampIcon from '../../themes/icons/timestamp.svg';
-import { formatDate } from '../common/qmsCKEditorUtil';
-import { toMap } from '@ckeditor/ckeditor5-utils';
+ import TimestampCommand from './timestampcommand';
 
 /**
  * Users can format the DateTime output based on a DateTime pattern
@@ -10,19 +9,19 @@ import { toMap } from '@ckeditor/ckeditor5-utils';
  * 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 default class Timestamp extends Plugin {
@@ -33,23 +32,21 @@ export default class Timestamp extends Plugin {
 
         editor.ui.componentFactory.add('timestamp', locale => {
             const buttonView = new ButtonView( locale );
-
+            const command = editor.commands.get('timestamp');
             buttonView.set( {
                 label: t('Timestamp'),
                 icon: timestampIcon,
-                withText: true,
+                withText: false,
                 tooltip: true
-            } );
+            });
+            buttonView.bind('isEnabled').to( command);
 
             buttonView.on('execute', () => {
-                editor.model.change( writer => {
-                    const attributes = toMap( editor.model.document.selection.getAttributes() );
-                    const timestamp = writer.createText(formatDate(new Date(), datetimeformat), attributes);
-                    editor.model.insertContent(timestamp, editor.model.document.selection );
-                } );
+              command.execute({ datetimeformat: datetimeformat })
             } );
-
             return buttonView;
         } );
+
+        editor.commands.add('timestamp', new TimestampCommand(editor));
     }
 }

package/src/assets/qms-ckeditor-plugin/src/plugins/timestamp/timestampcommand.js

@@ -0,0 +1,17 @@
+import { Command } from '@ckeditor/ckeditor5-core';
+import { formatDate } from '../common/qmsCKEditorUtil';
+import { toMap } from '@ckeditor/ckeditor5-utils';
+
+export default class TimestampCommand extends Command {
+
+	execute(options) {
+		const editor = this.editor;
+		const model = editor.model;
+    model.change( writer => {
+      const attributes = toMap(editor.model.document.selection.getAttributes());
+      const timestamp = writer.createText(formatDate(new Date(), options.datetimeformat), attributes);
+      model.insertContent(timestamp, editor.model.document.selection );
+    });
+	}
+}
+

package/src/assets/qms-ckeditor-plugin/src/plugins/tooltip/removetooltipcommand.js

@@ -1,31 +1,47 @@
-import { Command } from 'ckeditor5/src/core';
-import { findAttributeRange } from 'ckeditor5/src/typing';
-import { TOOLTIP_ATTRIBUTE } from './utils';
+ 
 
-export default class RemoveTooltipCommand extends Command {
-    refresh() {
-        const model = this.editor.model;
-        this.isEnabled = model.schema.checkAttributeInSelection(model.document.selection, TOOLTIP_ATTRIBUTE);
-    }
+import { Command } from '@ckeditor/ckeditor5-core';
+import { findAttributeRange } from '@ckeditor/ckeditor5-typing';
+import { first } from '@ckeditor/ckeditor5-utils';
+import { isImageAllowed } from './utils';
+import { TOOLTIP_COMMANDS, HTML_ATTRIBUTE, HTML_CLASS, TOOLTIP_ATTRIBUTE, TOOLTIP_CUSTOM_PROPERTY } from './utils';
 
-    execute() {
-        const editor = this.editor;
-        const model = editor.model;
-        const selection = model.document.selection;
+export default class RemoveTooltipCommand extends Command {
+ 
+	refresh() {
+		const model = this.editor.model;
+		const doc = model.document;
+		const selectedElement = first(doc.selection.getSelectedBlocks());
 
-        model.change(writer => {
-            const selectedRanges = selection.isCollapsed ?
-                [findAttributeRange(
-                    selection.getFirstPosition(),
-                    TOOLTIP_ATTRIBUTE,
-                    selection.getAttribute(TOOLTIP_ATTRIBUTE),
-                    model
-                )] :
-                model.schema.getValidRanges(selection.getRanges(), TOOLTIP_ATTRIBUTE);
+		// A check for the `LinkImage` plugin. If the selection contains an image element, get values from the element.
+		// Currently the selection reads attributes from text nodes only. See #7429 and #7465.
+		if (isImageAllowed(selectedElement, model.schema)) {
+			this.isEnabled = model.schema.checkAttribute(selectedElement, TOOLTIP_ATTRIBUTE);
+		} else {
+			this.isEnabled = model.schema.checkAttributeInSelection(doc.selection, TOOLTIP_ATTRIBUTE);
+		}
+	}
+ 
+	execute() {
+		const editor = this.editor;
+		const model = editor.model;
+		const selection = model.document.selection;
+ 
+		model.change(writer => {
+			// Get ranges to unlink.
+			const rangesToUnlink = selection.isCollapsed ?
+				[findAttributeRange(
+					selection.getFirstPosition(),
+					TOOLTIP_ATTRIBUTE,
+					selection.getAttribute(TOOLTIP_ATTRIBUTE),
+					model
+				)] :
+				model.schema.getValidRanges(selection.getRanges(), TOOLTIP_ATTRIBUTE);
 
-            for (const range of selectedRanges) {
-                writer.removeAttribute(TOOLTIP_ATTRIBUTE, range);
-            }
-        });
-    }
+			// Remove `qmsTooltip` attribute from specified ranges.
+			for (const range of rangesToUnlink) {
+				writer.removeAttribute(TOOLTIP_ATTRIBUTE, range);
+			}
+		});
+	}
 }

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

@@ -1,14 +1,14 @@
-
 import { Plugin } from '@ckeditor/ckeditor5-core';
 import TooltipEditing from './tooltipediting';
 import TooltipUI from './tooltipui';
  
 export default class Tooltip extends Plugin {
+ 
 	static get requires() {
-		return [TooltipEditing, TooltipUI];
+		return [ TooltipEditing, TooltipUI ];
 	}
  
 	static get pluginName() {
 		return 'Tooltip';
 	}
-}
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/tooltip/tooltipcommand.js

@@ -0,0 +1,75 @@
+import { Command } from '@ckeditor/ckeditor5-core';
+import { findAttributeRange } from '@ckeditor/ckeditor5-typing';
+import { toMap, first } from '@ckeditor/ckeditor5-utils';
+import { isImageAllowed, TOOLTIP_ATTRIBUTE } from './utils';
+
+export default class TooltipCommand extends Command {
+  
+	refresh() {
+		const model = this.editor.model;
+		const doc = model.document;
+		const selectedElement = first(doc.selection.getSelectedBlocks());
+ 
+		// A check for the `LinkImage` plugin. If the selection contains an element, get values from the element.
+		// Currently the selection reads attributes from text nodes only. See #7429 and #7465.
+		if (isImageAllowed(selectedElement, model.schema)) {
+			this.isEnabled = model.schema.checkAttribute(selectedElement, TOOLTIP_ATTRIBUTE);
+		} else {
+			this.isEnabled = model.schema.checkAttributeInSelection(doc.selection, TOOLTIP_ATTRIBUTE);
+		}
+	}
+ 
+	execute(options) {
+		const model = this.editor.model;
+		const selection = model.document.selection;
+        model.change(writer => {
+			// If selection is collapsed then update selected link or insert new one at the place of caret.
+			if (selection.isCollapsed) {
+				const position = selection.getFirstPosition();
+
+				// When selection is inside text with `qmsTooltip` attribute.
+				if (selection.hasAttribute(TOOLTIP_ATTRIBUTE)) {
+					// Then update `qmsTooltip` value.
+					const linkRange = findAttributeRange(position, TOOLTIP_ATTRIBUTE, selection.getAttribute(TOOLTIP_ATTRIBUTE), model);
+ 
+					const attributes = toMap(selection.getAttributes());
+
+					attributes.set(TOOLTIP_ATTRIBUTE, options.content);
+
+					const { end: positionAfter } = model.insertContent(writer.createText(options.text, attributes), linkRange);
+
+					// Put the selection at the end of the inserted link.
+					// Using end of range returned from insertContent in case nodes with the same attributes got merged.
+					writer.setSelection(positionAfter);
+				}
+				else if (options.text !== '') {
+					const attributes = toMap(selection.getAttributes());
+
+					attributes.set(TOOLTIP_ATTRIBUTE, options.content);
+
+					const { end: positionAfter } = model.insertContent(writer.createText(options.text, attributes), position);
+
+					// Put the selection at the end of the inserted link.
+					// Using end of range returned from insertContent in case nodes with the same attributes got merged.
+					writer.setSelection(positionAfter);
+				}
+			} else {
+				const attributes = toMap(selection.getAttributes());
+
+				attributes.set(TOOLTIP_ATTRIBUTE, options.content);
+
+				const { end: positionAfter } = model.insertContent(writer.createText(options.text, attributes), selection);
+
+				writer.setSelection(positionAfter);
+			}
+			// Remove the `qmsTooltip` attribute and all link decorators from the selection.
+			// It stops adding a new content into the link element.
+			[TOOLTIP_ATTRIBUTE].forEach(item => {
+				writer.removeSelectionAttribute(item);
+			});
+			console.log('this.editor.getData()' + new Date().toISOString());
+			console.log(this.editor.getData());
+		});
+	}
+}
+

package/src/assets/qms-ckeditor-plugin/src/plugins/tooltip/tooltipdialogcommand.js

@@ -0,0 +1,68 @@
+import { Command } from '@ckeditor/ckeditor5-core';
+import { findAttributeRange } from '@ckeditor/ckeditor5-typing';
+import { first } from '@ckeditor/ckeditor5-utils';
+import * as QMSCKEditorConstant from '../common/qmsCKEditorConstant';
+import * as QMSCKEditorService from '../common/qmsCKEditorService';
+import { isImageAllowed, TOOLTIP_COMMANDS, TOOLTIP_ATTRIBUTE } from './utils';
+
+export default class TooltipDialogCommand extends Command {
+  
+	refresh() {
+		const model = this.editor.model;
+		const doc = model.document;
+		const selectedElement = first(doc.selection.getSelectedBlocks());
+		// A check for the `LinkImage` plugin. If the selection contains an element, get values from the element.
+		// Currently the selection reads attributes from text nodes only. See #7429 and #7465.
+		if (isImageAllowed(selectedElement, model.schema)) {
+            this.value = selectedElement.getAttribute(TOOLTIP_ATTRIBUTE);
+			this.isEnabled = model.schema.checkAttribute(selectedElement, TOOLTIP_ATTRIBUTE);
+		} else {
+            this.value = doc.selection.getAttribute(TOOLTIP_ATTRIBUTE);
+			this.isEnabled = model.schema.checkAttributeInSelection(doc.selection, TOOLTIP_ATTRIBUTE);
+		}
+	}
+ 
+	execute() {
+        const editor = this.editor;
+		const model = editor.model;
+		const selection = model.document.selection;
+        const tooltip = { text: '', content: '' };
+        if(selection.isCollapsed){
+            if(selection.hasAttribute(TOOLTIP_ATTRIBUTE)){
+				const linkRange = findAttributeRange(selection.getFirstPosition(), TOOLTIP_ATTRIBUTE, selection.getAttribute(TOOLTIP_ATTRIBUTE), model);
+				for (const node of linkRange.getItems()) {
+					if ((node.is('text') || node.is('textProxy')) && node.hasAttribute(TOOLTIP_ATTRIBUTE)) {
+						tooltip.text = node.data;
+                    	tooltip.content = node.getAttribute(TOOLTIP_ATTRIBUTE);
+						break;
+					}
+				}
+			}
+        }
+        else
+        {
+            const ranges = selection.getFirstRange();
+            if(ranges)
+            {
+                for (const item of ranges.getItems()) {
+                    if (item.data) {
+                        tooltip.text = tooltip.text + item.data;
+                    }
+                }
+            }
+        }
+
+        QMSCKEditorService.tooltipNotify(tooltip);
+        window[QMSCKEditorConstant.QMSCK_TOOLTIP_IS_PROCESSING] = false;
+ 
+		window.addEventListener(QMSCKEditorConstant.QMSCK_TOOLTIP_PLUGIN_RESP, function (evt) {
+            if (window[QMSCKEditorConstant.QMSCK_TOOLTIP_IS_PROCESSING]) { 
+                return; 
+            }
+            const options = evt.detail;
+            editor.commands.get(TOOLTIP_COMMANDS.TOOLTIP).execute(options);
+            window[QMSCKEditorConstant.QMSCK_TOOLTIP_IS_PROCESSING] = true;            
+		}, { once: true }); 
+	}
+}
+