qms-angular 1.0.70 → 1.0.74

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

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

@@ -0,0 +1,93 @@
+
+import { Command } from '@ckeditor/ckeditor5-core';
+import { isImage } from '@ckeditor/ckeditor5-image/src/image/utils';
+import { IMAGEMAP_ATTRIBUTES, IMAGEMAP_ELEMENTS, findMapNodes, drawMap, createInsertedEvent, createRemovedEvent } from './utils';
+import { trimStart } from '../common/qmsCKEditorUtil';
+
+export default class ImageMapCommand extends Command {
+	// refresh() {
+	// 	const element = this.editor.model.document.selection.getSelectedElement();
+	// 	this.isEnabled = isImage(element);
+	// }
+
+	execute(options) {
+		const editor = this.editor;
+		const model = editor.model;
+		model.change(writer => {
+			var newName =  trimStart(options.name, '#');
+			const areas = options.areas;
+			const width = options.imageWidth;
+			const height = options.imageHeight;
+			const imageElement = model.document.selection.getSelectedElement();
+			if(!imageElement | !isImage(imageElement)){
+				return;
+			}
+			const oldName = imageElement.getAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_USE_MAP) || options.oldName;
+
+			if(!!oldName){
+				const range = model.createRangeIn(model.document.getRoot());
+				const existingMapElements = findMapNodes([trimStart(oldName, '#')], range);
+				if(existingMapElements && existingMapElements.length > 0){
+					existingMapElements.forEach(element => {
+						writer.remove(element);
+					});
+				}
+			}
+
+			if(!!areas && areas.length > 0)
+			{
+				writer.setAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_USE_MAP, '#' + newName, imageElement);
+				writer.setAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_WIDTH, width, imageElement);
+				writer.setAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_HEIGHT, height, imageElement);
+
+				let originalImageSrc = imageElement.getAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SRC);
+				if(!imageElement.hasAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC) || !imageElement.getAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC)){
+					writer.setAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC, originalImageSrc, imageElement);
+				}
+				else{
+					originalImageSrc = imageElement.getAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC);
+				}
+
+				let attrs = {};
+				attrs[IMAGEMAP_ATTRIBUTES.MAP_NAME] = newName;
+				attrs[IMAGEMAP_ATTRIBUTES.MAP_AREAS] = JSON.stringify(areas);
+				attrs[IMAGEMAP_ATTRIBUTES.MAP_WIDTH] = width;
+				attrs[IMAGEMAP_ATTRIBUTES.MAP_HEIGHT] = height;
+				const mapElement = writer.createElement(IMAGEMAP_ELEMENTS.MAP, attrs);
+
+				writer.insert(mapElement, writer.createPositionAt(imageElement, "after"));
+
+				drawMap(originalImageSrc, width, height, areas, (oldsrc, newsrc) =>{
+					model.enqueueChange(writer.batch, writer => {
+						writer.setAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SRC, newsrc, imageElement);
+						this.fire(createInsertedEvent(newName));
+					});
+				});
+			}
+			else {
+				if(imageElement.hasAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_USE_MAP)){
+					writer.removeAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_USE_MAP, imageElement);
+				}
+
+				if(imageElement.hasAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC)){
+
+					let src = imageElement.getAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC);
+					if(!!src){
+						writer.setAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SRC, src, imageElement);
+					}
+					writer.removeAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC, imageElement);
+				}
+
+				if(imageElement.hasAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_HEIGHT)){
+					writer.removeAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_HEIGHT, imageElement);
+				}
+
+				if(imageElement.hasAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_WIDTH)){
+					writer.removeAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_WIDTH, imageElement);
+				}
+				this.fire(createRemovedEvent(newName));
+			}
+		},{ once: true });
+	}
+}
+

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

@@ -0,0 +1,59 @@
+
+import { Command } from '@ckeditor/ckeditor5-core';
+import { isImage } from '@ckeditor/ckeditor5-image/src/image/utils';
+import * as QMSCKEditorConstant from '../common/qmsCKEditorConstant';
+import * as QMSCKEditorService from '../common/qmsCKEditorService';
+import { IMAGEMAP_ATTRIBUTES, IMAGEMAP_COMMANDS, parsePixelToFloat, findFirstMapNode } from './utils';
+import  { getSelectedImageWidget } from '@ckeditor/ckeditor5-image/src/image/utils';
+import { trimStart } from '../common/qmsCKEditorUtil';
+
+export default class ImageMapDialogCommand extends Command {
+
+	refresh() {
+		const element = this.editor.model.document.selection.getSelectedElement();
+		this.isEnabled = isImage(element);
+	}
+
+	execute() {
+		const editor = this.editor;
+		const model = editor.model;
+		const view = editor.editing.view;
+		const selectedElement = model.document.selection.getSelectedElement();
+
+		const mapName = selectedElement.getAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_USE_MAP);
+		let originalImageSrc = selectedElement.getAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SRC);
+		if(selectedElement.hasAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC) && selectedElement.getAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC)){
+			originalImageSrc = selectedElement.getAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC);
+		}
+
+		const data = {'imageUrl': originalImageSrc, 'areas': [], imageWidth: null, imageHeight: null};
+		const imageWidget = getSelectedImageWidget( view.document.selection);
+		const widgetResizePlugin = editor.plugins.get('WidgetResize');
+        const resizer = widgetResizePlugin.getResizerByViewElement( imageWidget );
+
+		if(resizer){
+			const resizerWrapper = resizer._viewResizerWrapper;
+			data.imageWidth = parsePixelToFloat(resizerWrapper.getStyle('width', 0));
+			data.imageHeight = parsePixelToFloat(resizerWrapper.getStyle('height', 0));
+		}
+
+		if(!!mapName){
+			const range = model.createRangeIn(model.document.getRoot());
+			const existingMapElement = findFirstMapNode(trimStart(mapName, '#'), range);
+			if(existingMapElement){
+				data.areas = JSON.parse(existingMapElement.getAttribute(IMAGEMAP_ATTRIBUTES.MAP_AREAS) || []);
+			}
+		}
+
+		QMSCKEditorService.imageMapNotify(data);
+        window[QMSCKEditorConstant.QMSCK_IMAGEMAP_IS_PROCESSING] = false;
+        window.addEventListener(QMSCKEditorConstant.QMSCK_IMAGEMAP_PLUGIN_RESP, (evt) => {
+            if (window[QMSCKEditorConstant.QMSCK_IMAGEMAP_IS_PROCESSING]) {
+                return;
+            }
+            window[QMSCKEditorConstant.QMSCK_IMAGEMAP_IS_PROCESSING] = true;
+			const options = evt.detail;
+            editor.commands.get(IMAGEMAP_COMMANDS.IMAGEMAP).execute(options);
+        }, { once: true});
+	}
+}