qms-angular 1.0.68 → 1.0.72

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

@@ -25,6 +25,9 @@ import List from '@ckeditor/ckeditor5-list/src/list.js';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph.js';
 import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
 import Table from '@ckeditor/ckeditor5-table/src/table.js';
+import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties';
+import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties.js';
+import TableSelection from '@ckeditor/ckeditor5-table/src/tableselection.js';
 import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar.js';
 import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation.js';
 import WordCount from '@ckeditor/ckeditor5-word-count/src/wordcount';
@@ -95,6 +98,9 @@ Editor.builtinPlugins = [
 	Paragraph,
 	Table,
 	TableToolbar,
+	TableProperties,
+	TableCellProperties,
+	TableSelection,
 	TextTransformation,
 	QMSCKEditorFullscreenPlugin,
 	QMSCKEditorTemplatePlugin,

package/src/assets/qms-ckeditor-plugin/src/plugins/bpmn/qmsCKEditorBpmnPlugin.js

@@ -3,6 +3,8 @@ import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import BpmnIcon from '../../themes/icons/bpmn.svg';
 import * as QMSCKEditorConstant from '../common/qmsCKEditorConstant';
 import * as QMSCKEditorService from '../common/qmsCKEditorService';
+import { IMAGEMAP_COMMANDS, createInsertedEvent } from '../imagemap/utils';
+import { debounced } from '../common/qmsCKEditorUtil';
 
 export default class QMSCKEditorBpmnPlugin extends Plugin {
     init() {
@@ -29,21 +31,44 @@ export default class QMSCKEditorBpmnPlugin extends Plugin {
               else {
                 QMSCKEditorService.bpmnNotify('');
               }
+              window[QMSCKEditorConstant.QMSCK_BPMN_IS_PROCESSING] = false;
               window.addEventListener(QMSCKEditorConstant.QMSCK_BPMN_PLUGIN_RESP, function (evt) {
+                if (window[QMSCKEditorConstant.QMSCK_BPMN_IS_PROCESSING]) {
+                    return;
+                }
+                window[QMSCKEditorConstant.QMSCK_BPMN_IS_PROCESSING] = true;
                 editor.model.change( writer => {
+                  const options = evt.detail.imagemap || {};
                     const imageElement = writer.createElement( 'image', {
                         src: evt.detail.values,
                         alt: evt.detail.key
-                    } );
+                    });
                     // Insert the image in the current selection location.
                     editor.model.insertContent( imageElement, editor.model.document.selection );
-                } );
-              },
-              { once: true });
+                    if(!!options.areas && options.areas.length > 0){
+                        editor.model.createSelection(imageElement, "in");//Set the current selection in the inserted image
+                        const imageMapCommand = editor.commands.get(IMAGEMAP_COMMANDS.IMAGEMAP);
+                        if(!!imageMapCommand){
+                          imageMapCommand.set('isEnabled', true);//force to run the command
+                          options.oldName = options.name;//Delete old image map if any
+                          imageMapCommand.execute(options);
+                          //resize image map when image width is greater than the widget width (600px)
+                          if(options.imageWidth > 600){
+                            const resizeImageMapCommand = editor.commands.get(IMAGEMAP_COMMANDS.RESIZE_IMAGEMAP);
+                            if(!!resizeImageMapCommand){
+                              imageMapCommand.once(createInsertedEvent(options.name), debounced(() => {
+                                  resizeImageMapCommand.set('isEnabled', true);//force to run the command
+                                  resizeImageMapCommand.execute();
+                              }, 500));
+                            }
+                          }
+                        }
+                    }
+                });
+              }, { once: true });
             });
-
             return view;
-        })
+        });
     }
 
     isBpmnImage( element, image ) {

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

@@ -21,6 +21,12 @@ 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';
- 

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,7 +1,9 @@
 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() {
@@ -14,25 +16,34 @@ export default class QMSCKEditorFullscreenPlugin extends Plugin {
             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;

package/src/assets/qms-ckeditor-plugin/src/plugins/imagemap/converters.js

@@ -1,10 +1,11 @@
 import { getViewImgFromWidget } from '@ckeditor/ckeditor5-image/src/image/utils';
-import { ImageMapAttributes, ImageMapElements, trimStart, HtmlAttributes, HtmlElements} from './utils';
+import { IMAGEMAP_ATTRIBUTES, IMAGEMAP_ELEMENTS, HTML_ATTRIBUTES, HTML_ELEMENTS} from './utils';
 import { first } from '@ckeditor/ckeditor5-utils';
+import { trimStart } from '../common/qmsCKEditorUtil';
 
 export function dowcastMapAreaAttribute() {
 	return dispatcher => {
-		dispatcher.on(`attribute:${ImageMapAttributes.MAP_AREAS}:${ImageMapElements.MAP}`, (evt, data, conversionApi) => {
+		dispatcher.on(`attribute:${IMAGEMAP_ATTRIBUTES.MAP_AREAS}:${IMAGEMAP_ELEMENTS.MAP}`, (evt, data, conversionApi) => {
             if (!conversionApi.consumable.consume(data.item, evt.name)) {
                 return;
             }
@@ -23,9 +24,9 @@ export function dowcastMapAreaAttribute() {
                 if(!!areas && areas.length > 0){
                     areas.forEach(area => {
                         if(area.coords && area.shape){
-                            let areaElement = viewWriter.createEmptyElement(HtmlElements.AREA, {
+                            let areaElement = viewWriter.createEmptyElement(HTML_ELEMENTS.AREA, {
                                 coords: area.coords,
-                                alt: area.alt || '', 
+                                alt: area.alt || '',
                                 shape: area.shape || '',
                                 href: area.href,
                                 target: area.target
@@ -41,7 +42,7 @@ export function dowcastMapAreaAttribute() {
 
 export function dowcastMapNameAttribute() {
 	return dispatcher => {
-		dispatcher.on(`attribute:${ImageMapAttributes.MAP_NAME}:${ImageMapElements.MAP}`, (evt, data, conversionApi) => {
+		dispatcher.on(`attribute:${IMAGEMAP_ATTRIBUTES.MAP_NAME}:${IMAGEMAP_ELEMENTS.MAP}`, (evt, data, conversionApi) => {
             if (!conversionApi.consumable.consume(data.item, evt.name)) {
                 return;
             }
@@ -50,15 +51,15 @@ export function dowcastMapNameAttribute() {
             if(!mapElement){
                 return;
             }
-            viewWriter.setAttribute(HtmlAttributes.NAME, data.attributeNewValue, mapElement);
-            viewWriter.setAttribute(HtmlAttributes.ID, data.attributeNewValue, mapElement);
+            viewWriter.setAttribute(HTML_ATTRIBUTES.NAME, data.attributeNewValue, mapElement);
+            viewWriter.setAttribute(HTML_ATTRIBUTES.ID, data.attributeNewValue, mapElement);
         });
 	};
 }
 
 export function dowcastMapWidthAttribute() {
 	return dispatcher => {
-		dispatcher.on(`attribute:${ImageMapAttributes.MAP_WIDTH}:${ImageMapElements.MAP}`, (evt, data, conversionApi) => {
+		dispatcher.on(`attribute:${IMAGEMAP_ATTRIBUTES.MAP_WIDTH}:${IMAGEMAP_ELEMENTS.MAP}`, (evt, data, conversionApi) => {
             if (!conversionApi.consumable.consume(data.item, evt.name)) {
                 return;
             }
@@ -67,14 +68,14 @@ export function dowcastMapWidthAttribute() {
             if(!mapElement){
                 return;
             }
-            viewWriter.setAttribute(HtmlAttributes.WIDTH, data.attributeNewValue || '', mapElement);
+            viewWriter.setAttribute(HTML_ATTRIBUTES.WIDTH, data.attributeNewValue || '', mapElement);
         });
 	};
 }
 
 export function dowcastMapHeightAttribute() {
 	return dispatcher => {
-		dispatcher.on(`attribute:${ImageMapAttributes.MAP_HEIGHT}:${ImageMapElements.MAP}`, (evt, data, conversionApi) => {
+		dispatcher.on(`attribute:${IMAGEMAP_ATTRIBUTES.MAP_HEIGHT}:${IMAGEMAP_ELEMENTS.MAP}`, (evt, data, conversionApi) => {
             if (!conversionApi.consumable.consume(data.item, evt.name)) {
                 return;
             }
@@ -83,20 +84,20 @@ export function dowcastMapHeightAttribute() {
             if(!mapElement){
                 return;
             }
-            viewWriter.setAttribute(HtmlAttributes.HEIGHT, data.attributeNewValue || '', mapElement);
+            viewWriter.setAttribute(HTML_ATTRIBUTES.HEIGHT, data.attributeNewValue || '', mapElement);
         });
 	};
 }
 
 export function downcastMapElement() {
 	return dispatcher => {
-		dispatcher.on(`insert:${ImageMapElements.MAP}`, (evt, data, conversionApi)=> {
+		dispatcher.on(`insert:${IMAGEMAP_ELEMENTS.MAP}`, (evt, data, conversionApi)=> {
             const { consumable, writer, mapper} = conversionApi;
             if (!consumable.consume(data.item, 'insert')) {
                 return;
             }
             const viewPosition = mapper.toViewPosition(data.range.start);
-            const viewElement = writer.createContainerElement(HtmlElements.MAP);
+            const viewElement = writer.createContainerElement(HTML_ELEMENTS.MAP);
             mapper.bindElements(data.item, viewElement);
             writer.insert(viewPosition, viewElement );
         });
@@ -105,132 +106,132 @@ export function downcastMapElement() {
 
 export function downcastImageWidthAttribute() {
 	return dispatcher => {
-		dispatcher.on(`attribute:${ImageMapAttributes.IMAGE_WIDTH}:${ImageMapElements.IMAGE}`, (evt, data, conversionApi) => {
+		dispatcher.on(`attribute:${IMAGEMAP_ATTRIBUTES.IMAGE_WIDTH}:${IMAGEMAP_ELEMENTS.IMAGE}`, (evt, data, conversionApi) => {
             if (!conversionApi.consumable.consume(data.item, evt.name)) {
                 return;
             }
             const viewWriter = conversionApi.writer;
             const figure = conversionApi.mapper.toViewElement(data.item);
             const img = getViewImgFromWidget(figure);
-            viewWriter.setAttribute(HtmlAttributes.WIDTH,  data.attributeNewValue, img);
+            viewWriter.setAttribute(HTML_ATTRIBUTES.WIDTH,  data.attributeNewValue, img);
         });
 	};
 }
- 
+
 
 export function downcastImageHeightAttribute() {
 	return dispatcher => {
-		dispatcher.on(`attribute:${ImageMapAttributes.IMAGE_HEIGHT}:${ImageMapElements.IMAGE}`, (evt, data, conversionApi) => {
+		dispatcher.on(`attribute:${IMAGEMAP_ATTRIBUTES.IMAGE_HEIGHT}:${IMAGEMAP_ELEMENTS.IMAGE}`, (evt, data, conversionApi) => {
             if (!conversionApi.consumable.consume(data.item, evt.name)) {
                 return;
             }
             const viewWriter = conversionApi.writer;
             const figure = conversionApi.mapper.toViewElement(data.item);
             const img = getViewImgFromWidget(figure);
-            viewWriter.setAttribute(HtmlAttributes.HEIGHT,  data.attributeNewValue, img);
+            viewWriter.setAttribute(HTML_ATTRIBUTES.HEIGHT,  data.attributeNewValue, img);
         });
 	};
 }
 
-  
+
 export function downcastImageSavedSrcAttribute(isDataDowncast) {
     const priority = isDataDowncast ? 'highest' : 'normal';
 	return dispatcher => {
-		dispatcher.on(`attribute:${ImageMapAttributes.IMAGE_SAVED_SRC}:${ImageMapElements.IMAGE}`, (evt, data, conversionApi) => {
+		dispatcher.on(`attribute:${IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC}:${IMAGEMAP_ELEMENTS.IMAGE}`, (evt, data, conversionApi) => {
             if (!conversionApi.consumable.consume(data.item, evt.name)) {
                 return;
             }
-    
+
             const viewWriter = conversionApi.writer;
             const figure = conversionApi.mapper.toViewElement(data.item);
             const img = getViewImgFromWidget(figure);
-      
+
             if(isDataDowncast == true){
                 if(data.item.hasAttribute(data.attributeKey)){
                     const originalSrc = data.item.getAttribute(data.attributeKey);
-                    viewWriter.setAttribute(HtmlAttributes.SRC, originalSrc, img);
+                    viewWriter.setAttribute(HTML_ATTRIBUTES.SRC, originalSrc, img);
                 }
             }
             else {
-                viewWriter.setAttribute(HtmlAttributes.SAVED_SRC, data.attributeNewValue || '', img);
-            }       
-        }, 
+                viewWriter.setAttribute(HTML_ATTRIBUTES.SAVED_SRC, data.attributeNewValue || '', img);
+            }
+        },
         {
-             priority: priority 
+             priority: priority
         });
 	};
 }
- 
+
 export function downcastImageMapAttribute() {
 	return dispatcher => {
-		dispatcher.on(`attribute:${ImageMapAttributes.IMAGE_USE_MAP}:${ImageMapElements.IMAGE}`, (evt, data, conversionApi)=> {
+		dispatcher.on(`attribute:${IMAGEMAP_ATTRIBUTES.IMAGE_USE_MAP}:${IMAGEMAP_ELEMENTS.IMAGE}`, (evt, data, conversionApi)=> {
             if (!conversionApi.consumable.consume(data.item, evt.name)) {
                 return;
             }
-    
+
             const viewWriter = conversionApi.writer;
             const figure = conversionApi.mapper.toViewElement(data.item);
             const img = getViewImgFromWidget(figure);
-    
+
             const newValue = data.attributeNewValue || '';
             const oldValue = data.attributeOldValue || '';
-    
+
             if(!!newValue){
-                viewWriter.setAttribute(HtmlAttributes.USE_MAP, data.attributeNewValue, img);
+                viewWriter.setAttribute(HTML_ATTRIBUTES.USE_MAP, data.attributeNewValue, img);
            } else if(!!oldValue){
-                viewWriter.removeAttribute(HtmlAttributes.USE_MAP, img);
+                viewWriter.removeAttribute(HTML_ATTRIBUTES.USE_MAP, img);
            }
         });
 	};
 }
-  
+
 export function upcastMapElement() {
 	return dispatcher => {
-		dispatcher.on(`element:${HtmlElements.MAP}`, (evt, data, conversionApi) => {
+		dispatcher.on(`element:${HTML_ELEMENTS.MAP}`, (evt, data, conversionApi) => {
 			const viewMap = data.viewItem;
             const currentPosition = data.modelCursor;
             const modelWriter = conversionApi.writer;
-           
+
             // Do not convert if this is not an map.
             if (!conversionApi.consumable.test(data.viewItem, {name: true})) {
                 return;
            }
-  
-			const name = viewMap.getAttribute(HtmlAttributes.NAME);
+
+			const name = viewMap.getAttribute(HTML_ATTRIBUTES.NAME);
 			 // Do not convert if image element is missing 'name' attribute.
 			if (!name) {
-                return; 
+                return;
            }
 
             const areas = [];
             if(viewMap.childCount > 0){
                 for (const child of Array.from(viewMap.getChildren())) {
                     let area = {};
-                    area[HtmlAttributes.COORDS] = child.getAttribute(HtmlAttributes.COORDS);
-                    area[HtmlAttributes.HREF] = child.getAttribute(HtmlAttributes.HREF);
-                    area[HtmlAttributes.ALT] = child.getAttribute(HtmlAttributes.ALT) || '';
-                    area[HtmlAttributes.SHAPE] = child.getAttribute(HtmlAttributes.SHAPE) || '';
-                    area[HtmlAttributes.TARGET] = child.getAttribute(HtmlAttributes.TARGET);
+                    area[HTML_ATTRIBUTES.COORDS] = child.getAttribute(HTML_ATTRIBUTES.COORDS);
+                    area[HTML_ATTRIBUTES.HREF] = child.getAttribute(HTML_ATTRIBUTES.HREF);
+                    area[HTML_ATTRIBUTES.ALT] = child.getAttribute(HTML_ATTRIBUTES.ALT) || '';
+                    area[HTML_ATTRIBUTES.SHAPE] = child.getAttribute(HTML_ATTRIBUTES.SHAPE) || '';
+                    area[HTML_ATTRIBUTES.TARGET] = child.getAttribute(HTML_ATTRIBUTES.TARGET);
                     areas.push(area);
                }
            }
-  
-            const width = viewMap.getAttribute(HtmlAttributes.WIDTH);
-            const height = viewMap.getAttribute(HtmlAttributes.HEIGHT);
+
+            const width = viewMap.getAttribute(HTML_ATTRIBUTES.WIDTH);
+            const height = viewMap.getAttribute(HTML_ATTRIBUTES.HEIGHT);
             let attrs = {};
-            attrs[ImageMapAttributes.MAP_NAME] = name;
-            attrs[ImageMapAttributes.MAP_AREAS] = JSON.stringify(areas);
-            attrs[ImageMapAttributes.MAP_WIDTH] = width;
-            attrs[ImageMapAttributes.MAP_HEIGHT] = height;
-            const modelMap = modelWriter.createElement(ImageMapElements.MAP, attrs);
-            
+            attrs[IMAGEMAP_ATTRIBUTES.MAP_NAME] = name;
+            attrs[IMAGEMAP_ATTRIBUTES.MAP_AREAS] = JSON.stringify(areas);
+            attrs[IMAGEMAP_ATTRIBUTES.MAP_WIDTH] = width;
+            attrs[IMAGEMAP_ATTRIBUTES.MAP_HEIGHT] = height;
+            const modelMap = modelWriter.createElement(IMAGEMAP_ELEMENTS.MAP, attrs);
+
             //TODO: Insert map element as a direct child of root
             modelWriter.insert(modelMap, currentPosition);
             conversionApi.convertChildren(viewMap, modelMap);
             conversionApi.updateConversionResult(modelMap, data);
-		}, 
+		},
         {
-            priority: 'high' 
+            priority: 'high'
        });
 	};
 }
@@ -238,16 +239,16 @@ export function upcastMapElement() {
 
 export function upcastImageMapAttribute() {
 	return dispatcher => {
-		dispatcher.on(`element:${HtmlElements.IMAGE}`, (evt, data, conversionApi) => {
+		dispatcher.on(`element:${HTML_ELEMENTS.IMAGE}`, (evt, data, conversionApi) => {
             const {consumable, writer} = conversionApi;
             const viewImage = data.viewItem;
-        
+
             // Do not convert if the `usemap` attribute  was already converted.
-			if (!consumable.consume(viewImage, {attributes: [HtmlAttributes.USE_MAP]})) {
+			if (!consumable.consume(viewImage, {attributes: [HTML_ATTRIBUTES.USE_MAP]})) {
 				return;
 			}
 
-			const usemap = viewImage.getAttribute(HtmlAttributes.USE_MAP);
+			const usemap = viewImage.getAttribute(HTML_ATTRIBUTES.USE_MAP);
 			 // Do not convert if image element is missing `usemap` attribute
 			if (!usemap) {
 				return;
@@ -259,31 +260,31 @@ export function upcastImageMapAttribute() {
                 return;
            }
 
-            if (modelImage.is('element', ImageMapElements.IMAGE)) {
+            if (modelImage.is('element', IMAGEMAP_ELEMENTS.IMAGE)) {
                 const mapName =  trimStart(usemap, '#');
-				writer.setAttribute(ImageMapAttributes.IMAGE_USE_MAP, '#' + mapName, modelImage);
+				writer.setAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_USE_MAP, '#' + mapName, modelImage);
 			}
-		}, 
+		},
         {
             priority: 'low'
         });
 	};
 }
- 
+
 
 export function upcastImageSavedSrcAttribute() {
 	return dispatcher => {
-		dispatcher.on(`element:${HtmlElements.IMAGE}`, (evt, data, conversionApi) => {
+		dispatcher.on(`element:${HTML_ELEMENTS.IMAGE}`, (evt, data, conversionApi) => {
             const {consumable, writer} = conversionApi;
             const viewImage = data.viewItem;
-         
+
             // Do not convert if the `usemap` attribute  was already converted.
-			if (!consumable.consume(viewImage, {attributes: [HtmlAttributes.SAVED_SRC]})) {
+			if (!consumable.consume(viewImage, {attributes: [HTML_ATTRIBUTES.SAVED_SRC]})) {
 				return;
 			}
 
-			const originalSrc = viewImage.getAttribute(HtmlAttributes.SAVED_SRC);
- 
+			const originalSrc = viewImage.getAttribute(HTML_ATTRIBUTES.SAVED_SRC);
+
 			 // Do not convert if image element is missing `usemap` attribute
 			if (!originalSrc) {
 				return;
@@ -295,13 +296,13 @@ export function upcastImageSavedSrcAttribute() {
                 return;
            }
 
-            if (modelImage.is('element', ImageMapElements.IMAGE)) {
-				writer.setAttribute(ImageMapAttributes.IMAGE_SAVED_SRC, originalSrc || '', modelImage);
+            if (modelImage.is('element', IMAGEMAP_ELEMENTS.IMAGE)) {
+				writer.setAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC, originalSrc || '', modelImage);
 			}
- 
-		}, 
-        { 
-            priority: 'low' 
+
+		},
+        {
+            priority: 'low'
         });
 	};
 }
@@ -309,17 +310,17 @@ export function upcastImageSavedSrcAttribute() {
 
 export function upcastImageWidthAttribute() {
 	return dispatcher => {
-		dispatcher.on(`element:${HtmlElements.IMAGE}`, (evt, data, conversionApi) => {
+		dispatcher.on(`element:${HTML_ELEMENTS.IMAGE}`, (evt, data, conversionApi) => {
             const {consumable, writer} = conversionApi;
             const viewImage = data.viewItem;
-         
+
             // Do not convert if the `usemap` attribute  was already converted.
-			if (!consumable.consume(viewImage, {attributes: [HtmlAttributes.WIDTH]})) {
+			if (!consumable.consume(viewImage, {attributes: [HTML_ATTRIBUTES.WIDTH]})) {
 				return;
 			}
 
-			const width = viewImage.getAttribute(HtmlAttributes.WIDTH);
- 
+			const width = viewImage.getAttribute(HTML_ATTRIBUTES.WIDTH);
+
 			 // Do not convert if image element is missing `usemap` attribute
 			if (!width) {
 				return;
@@ -331,31 +332,31 @@ export function upcastImageWidthAttribute() {
                 return;
             }
 
-            if (modelImage.is('element', ImageMapElements.IMAGE)) {
-				writer.setAttribute(ImageMapAttributes.IMAGE_WIDTH, width, modelImage);
+            if (modelImage.is('element', IMAGEMAP_ELEMENTS.IMAGE)) {
+				writer.setAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_WIDTH, width, modelImage);
 			}
-		}, 
+		},
         {
             priority: 'low'
         });
 	};
 }
- 
+
 
 
 export function upcastImageHeightAttribute() {
 	return dispatcher => {
-		dispatcher.on(`element:${HtmlElements.IMAGE}`, (evt, data, conversionApi) => {
+		dispatcher.on(`element:${HTML_ELEMENTS.IMAGE}`, (evt, data, conversionApi) => {
             const {consumable, writer} = conversionApi;
             const viewImage = data.viewItem;
-          
+
             // Do not convert if the `usemap` attribute  was already converted.
-			if (!consumable.consume(viewImage, {attributes: [HtmlAttributes.HEIGHT]})) {
+			if (!consumable.consume(viewImage, {attributes: [HTML_ATTRIBUTES.HEIGHT]})) {
 				return;
 			}
 
-			const height = viewImage.getAttribute(HtmlAttributes.HEIGHT);
- 
+			const height = viewImage.getAttribute(HTML_ATTRIBUTES.HEIGHT);
+
 			 // Do not convert if image element is missing `usemap` attribute
 			if (!height) {
 				return;
@@ -367,10 +368,10 @@ export function upcastImageHeightAttribute() {
                 return;
             }
 
-            if (modelImage.is('element', ImageMapElements.IMAGE)) {
-				writer.setAttribute(ImageMapAttributes.IMAGE_HEIGHT, height, modelImage);
+            if (modelImage.is('element', IMAGEMAP_ELEMENTS.IMAGE)) {
+				writer.setAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_HEIGHT, height, modelImage);
 			}
-		}, 
+		},
         {
             priority: 'low'
         });

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

@@ -1,14 +1,14 @@
 import { Plugin } from '@ckeditor/ckeditor5-core';
 import ImageMapEditing from './imagemapediting';
 import ImageMapUI from './imagemapui';
- 
+
 export default class ImageMap extends Plugin {
- 
+
 	static get requires() {
 		return [ ImageMapEditing, ImageMapUI ];
 	}
- 
+
 	static pluginName() {
 		return 'ImageMap';
 	}
-}
+}