qms-angular 1.0.71 → 1.0.75

package/src/assets/qms-ckeditor-plugin/src/plugins/link/linkdialogcommand.js

@@ -0,0 +1,88 @@
+
+import { Command } from '@ckeditor/ckeditor5-core';
+import { Collection, first } from '@ckeditor/ckeditor5-utils';
+import * as QMSCKEditorConstant from '../common/qmsCKEditorConstant';
+import * as QMSCKEditorEnum from '../common/qmsCKEditorEnum';
+import * as QMSCKEditorService from '../common/qmsCKEditorService';
+import { isImageAllowed } from './utils';
+import AutomaticDecorators from './utils/automaticdecorators';
+  
+ export default class LinkDialogCommand extends Command {
+    constructor( editor ) {
+		super( editor );
+		this.manualDecorators = new Collection();
+		this.automaticDecorators = new AutomaticDecorators();
+	}
+ 
+	restoreManualDecoratorStates() {
+		for ( const manualDecorator of this.manualDecorators ) {
+			manualDecorator.value = this._getDecoratorStateFromModel( manualDecorator.id );
+		}
+	}
+ 
+	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( 'linkHref' );
+			this.isEnabled = model.schema.checkAttribute( selectedElement, 'linkHref' );
+		} else {
+			this.value = doc.selection.getAttribute( 'linkHref' );
+			this.isEnabled = model.schema.checkAttributeInSelection( doc.selection, 'linkHref' );
+		}
+
+		for ( const manualDecorator of this.manualDecorators ) {
+			manualDecorator.value = this._getDecoratorStateFromModel( manualDecorator.id );
+		}
+	}
+  
+     execute() {
+        const editor = this.editor;
+        const model = editor.model;
+        const selection = model.document.selection;
+        const ranges = selection.getFirstRange();
+
+        let link = QMSCKEditorEnum.hyperLink;
+        link.typeId = 0;
+        link.targetId = 0;
+        link.protocolId = 0;
+        link.url = '';
+        link.title = '';
+        link.editorContent = '';
+        for (const item of ranges.getItems()) {
+            if (item.data) {
+                link.title = item.data;
+            }
+        }
+        QMSCKEditorService.linkNotify(link);
+        window[QMSCKEditorConstant.QMSCK_LINKED] = false;
+        window.addEventListener(QMSCKEditorConstant.QMSCK_LINK_PLUGIN_RESP, function(evt) {
+            if (window[QMSCKEditorConstant.QMSCK_LINKED]){
+                return;
+            }
+			window[QMSCKEditorConstant.QMSCK_LINKED] = true;
+            const options = evt.detail;
+			editor.commands.get('link').execute(options);
+        }, { once: true });
+     }
+
+     _getDecoratorStateFromModel( decoratorName ) {
+		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 ) ) {
+			return selectedElement.getAttribute( decoratorName );
+		}
+
+		return doc.selection.getAttribute( decoratorName );
+	}
+ }
+ 

package/src/assets/qms-ckeditor-plugin/src/plugins/link/linkediting.js

@@ -20,6 +20,7 @@ import { createLinkElement, ensureSafeUrl, getLocalizedDecorators, normalizeDeco
 import * as QMSCKEditorConstant from '../common/qmsCKEditorConstant';
 import '../../themes/styles/link.css';
 import { isLinkElement } from './utils';
+import LinkDialogCommand  from './linkdialogcommand';
 
 const HIGHLIGHT_CLASS = 'ck-link_selected';
 const DECORATOR_AUTOMATIC = 'automatic';
@@ -94,6 +95,7 @@ export default class LinkEditing extends Plugin {
 
 		// Create linking commands.
 		editor.commands.add( 'link', new LinkCommand( editor ) );
+		editor.commands.add( 'linkdialog', new LinkDialogCommand( editor ) );
 		editor.commands.add( 'unlink', new UnlinkCommand( editor ) );
 
 		const linkDecorators = getLocalizedDecorators( editor.t, normalizeDecorators( editor.config.get( 'link.decorators' ) ) );

package/src/assets/qms-ckeditor-plugin/src/plugins/link/linkui.js

@@ -130,31 +130,40 @@ export default class LinkUI extends Plugin {
 		// Execute unlink command after clicking on the "Edit" button.
 		this.listenTo( actionsView, 'edit', () => {
 				//this._addFormView();
-        let link = QMSCKEditorEnum.hyperLink;
-        const href = this.actionsView.href;
-        const hasLink = this.isImageLinked( editor.editing.view.document.selection.getSelectedElement(), editor.plugins.get('Image') );
-        let parentLink;
-        if (hasLink) {
-          parentLink = editor.editing.view.document.selection.getSelectedElement().getChild(0);
-        }
-        else {
-          parentLink = this._getSelectedLinkElement();
-        }
-        const linkOption = parentLink.getAttribute('url');
-        link.typeId = QMSCKEditorUtil.getLinkType(linkOption);
-        link.targetId = parentLink.getAttribute('target') ? QMSCKEditorEnum.targetEnum[parentLink.getAttribute('target')] : 0;
-        if (parentLink._children.length > 0) {
-          link.title = parentLink._children[0]._textData ? parentLink._children[0]._textData.trim() : '';
-        }
-        else {
-          link.title = '';
-        }
-        link.protocolId = QMSCKEditorUtil.getProtocolId(linkOption);
-        link.url = href;
-        link.edit = true;
-        window[QMSCKEditorConstant.QMSCK_LINKED] = false;
-        QMSCKEditorService.linkNotify(link);
-        this._hideUI();
+			let link = QMSCKEditorEnum.hyperLink;
+			const href = this.actionsView.href;
+			const hasLink = this.isImageLinked( editor.editing.view.document.selection.getSelectedElement(), editor.plugins.get('Image') );
+			let parentLink;
+			if (hasLink) {
+				parentLink = editor.editing.view.document.selection.getSelectedElement().getChild(0);
+			}
+			else {
+				parentLink = this._getSelectedLinkElement();
+			}
+
+			const linkOption = parentLink.getAttribute('url');
+			link.typeId = QMSCKEditorUtil.getLinkType(linkOption);
+			link.targetId = parentLink.getAttribute('target') ? QMSCKEditorEnum.targetEnum[parentLink.getAttribute('target')] : 0;
+			if (parentLink._children.length > 0) {
+				link.title = parentLink._children[0]._textData ? parentLink._children[0]._textData.trim() : '';
+			}
+			else {
+				link.title = '';
+			}
+			link.protocolId = QMSCKEditorUtil.getProtocolId(linkOption);
+			link.url = href;
+			link.edit = true;
+			QMSCKEditorService.linkNotify(link);
+			window[QMSCKEditorConstant.QMSCK_LINKED] = false;
+			window.addEventListener(QMSCKEditorConstant.QMSCK_LINK_PLUGIN_RESP, function(evt) {
+				if (window[QMSCKEditorConstant.QMSCK_LINKED]){
+					return;
+				}
+				window[QMSCKEditorConstant.QMSCK_LINKED] = true;
+				const options = evt.detail;
+				editor.commands.get('link').execute(options);
+			}, { once: true });
+			this._hideUI();
 		} );
 
 		// Execute unlink command after clicking on the "Unlink" button.
@@ -240,7 +249,7 @@ export default class LinkUI extends Plugin {
 	 */
 	_createToolbarLinkButton() {
 		const editor = this.editor;
-		const linkCommand = editor.commands.get( 'link' );
+		const linkDialogCommand = editor.commands.get( 'linkdialog' );
 		const t = editor.t;
 
 		// Handle the `Ctrl+K` keystroke and show the panel.
@@ -248,9 +257,9 @@ export default class LinkUI extends Plugin {
 			// Prevent focusing the search bar in FF, Chrome and Edge. See https://github.com/ckeditor/ckeditor5/issues/4811.
 			cancel();
 
-			if ( linkCommand.isEnabled ) {
+			if ( linkDialogCommand.isEnabled ) {
 				// this._showUI( true );
-        this.editor.execute('link');
+        		this.editor.execute('linkdialog');
 			}
 		} );
 
@@ -265,14 +274,14 @@ export default class LinkUI extends Plugin {
 			button.isToggleable = true;
 
 			// Bind button to the command.
-            const linkCommand = editor.commands.get('link');
-			button.bind( 'isEnabled' ).to( linkCommand, 'isEnabled' );
-			button.bind( 'isOn' ).to( linkCommand, 'value', value => !!value );
+            const linkDialogCommand = editor.commands.get( 'linkdialog' );
+			button.bind( 'isEnabled' ).to( linkDialogCommand, 'isEnabled' );
+			button.bind( 'isOn' ).to( linkDialogCommand, 'value', value => !!value );
 
 			// Show the panel on button click.
 			//this.listenTo( button, 'execute', () => this._showUI( true ) );
             this.listenTo(button, 'execute', () => {
-                this.editor.execute('link');
+                this.editor.execute('linkdialog');
             });
 
 			return button;

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

@@ -0,0 +1,14 @@
+import { Plugin } from '@ckeditor/ckeditor5-core';
+import TableOfContentsEditing from './tableofcontentsediting';
+import TableOfContentsUI from './tableofcontentsui';
+ 
+export default class TableOfContents extends Plugin {
+	static get requires() {
+		return [TableOfContentsEditing, TableOfContentsUI];
+	}
+ 
+	static get pluginName() {
+		return 'TableOfContents';
+	}
+}
+ 

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

@@ -0,0 +1,87 @@
+import { Command } from '@ckeditor/ckeditor5-core';
+import { rangeToText, getAttributeValueOn, setAttributeOn, TOC_ELEMENTS, TOC_ATTRIBUTES} from './utils';
+import { findOptimalInsertionPosition } from '@ckeditor/ckeditor5-widget/src/utils';
+import { trimStart } from '../common/qmsCKEditorUtil';
+
+export default class TableOfContentsCommand extends Command {
+
+    execute( options = {} ) {
+        const editor = this.editor;
+        const model = editor.model;
+        model.change(writer => {
+            const headingObject = this._findHeadingElements(options.headings);
+            if(Object.keys(headingObject).length > 0){
+                const tocObject = this._buildTOCElements(headingObject);
+                this._setAnchorIdAttribute(headingObject, tocObject, writer);
+                this._insertTOCElements(tocObject, writer);
+            }
+        });
+    }
+    
+    _insertTOCElements(tocObject, writer){
+        let position;
+        Object.keys(tocObject).forEach((key) => {
+            const section = tocObject[key];
+            const paragraphElement = writer.createElement(TOC_ELEMENTS.PARAGRAPH, { ...section.attributes });
+            const textElement = writer.createText(section.text, { [TOC_ATTRIBUTES.LINK_HREF]: '#' + section.id });
+            writer.insert(textElement, writer.createPositionAt(paragraphElement, 0));
+            if(!position){
+                position = findOptimalInsertionPosition(this.editor.model.document.selection, this.editor.model);
+            }
+            const { end: positionAfter } = this.editor.model.insertContent(paragraphElement, position);
+            position = positionAfter;
+        });
+    }
+ 
+    _setAnchorIdAttribute(headingObject, tocObject, writer){
+        Object.keys(tocObject).forEach((key) =>{
+            const node = headingObject[key];
+            const sectionOject = tocObject[key];
+            if(!sectionOject.hasAnchorId){
+                const range = this.editor.model.createRangeIn(node);
+                const attribute = { key: TOC_ATTRIBUTES.ANCHOR_ID, value: sectionOject.id }
+                const hasAnchorId = setAttributeOn(range, this.editor.model.schema, writer, attribute);
+                if(!hasAnchorId){
+                    let childNode = writer.createText('\u00A0', { [TOC_ATTRIBUTES.ANCHOR_ID]: sectionOject.id });//insert non-breaking space
+                    writer.insert(childNode, writer.createPositionAt(node, 0));
+                }
+            }
+        });
+    }
+
+    _buildTOCElements(headingObject){
+        const tocObject = {};
+        let index = 1;
+        Object.keys(headingObject).forEach(key =>{
+            const node = headingObject[key];
+            const range = this.editor.model.createRangeIn(node);
+            const attributes = Object.fromEntries(node.getAttributes());
+            const name = node.name.toLowerCase();
+            attributes[TOC_ATTRIBUTES.HEADING_CLASS] = name;  
+            const text = rangeToText(range) || '';
+            let id = trimStart(text, '#').replace(/[^a-z0-9\+]/gi, '').toLowerCase() + index;
+            let hasAnchorId = false;
+            const anchorId = getAttributeValueOn(range, TOC_ATTRIBUTES.ANCHOR_ID);
+            if(!!anchorId){
+                id = trimStart(anchorId, '#');
+                hasAnchorId = true;
+            }
+            tocObject[key] = { id, name, text, hasAnchorId, attributes };
+            index++;
+        });
+        return tocObject;
+    }
+
+    _findHeadingElements(supportedHeadings){
+        const headingObject = {};
+        const range = this.editor.model.createRangeIn(this.editor.model.document.getRoot());
+        for (const value of range.getWalker()) {
+            const node = value.item;
+            if (node.is('element') && supportedHeadings.indexOf(node.name) > -1) {
+                let path = node.getPath();
+                headingObject[path] = node;
+            }
+        }
+        return headingObject;
+    }
+}

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 );
+    });
+	}
+}
+