qms-angular 1.0.57 → 1.0.58

package/src/assets/qms-ckeditor-plugin/build/translations/zh.js

@@ -1 +1 @@
-!function(e){const t=e.zh=e.zh||{};t.dictionary=Object.assign(t.dictionary||{},{"%0 of %1":"%0/%1","Align cell text to the bottom":"向下對齊","Align cell text to the center":"置中對齊","Align cell text to the left":"靠左對齊","Align cell text to the middle":"置中對齊","Align cell text to the right":"靠右對齊","Align cell text to the top":"向上對齊","Align center":"置中對齊","Align left":"靠左對齊","Align right":"靠右對齊","Align table to the left":"靠左對齊","Align table to the right":"靠右對齊",Alignment:"對齊",Aquamarine:"淺綠色",Background:"背景顏色",Big:"大",Black:"黑色","Block quote":"段落引用",Blue:"藍色",Bold:"粗體",Border:"邊框","Bulleted List":"符號清單",Cancel:"取消","Cannot upload file:":"無法上傳檔案：","Cell properties":"儲存格屬性","Center table":"置中對齊","Centered image":"置中圖片","Change image text alternative":"修改圖片的替代文字","Characters: %0":"字元數: %0","Choose heading":"選取標題",Color:"文字顏色","Color picker":"顏色選擇",Column:"欄","Could not insert image at the current position.":"無法在這位置插入圖片","Could not obtain resized image URL.":"無法取得重設大小的圖片URL",Dashed:"虛線","Decrease indent":"減少縮排",Default:"預設","Delete column":"刪除欄","Delete row":"刪除列","Dim grey":"淡灰色",Dimensions:"尺寸","Document colors":"文件顏色",Dotted:"點線",Double:"雙線","Dropdown toolbar":"下拉選單","Edit block":"編輯區塊","Editor toolbar":"編輯器工具","Enter image caption":"輸入圖片說明","Font Background Color":"前景顏色","Font Color":"字體顏色","Font Family":"字型","Font Size":"字體大小","Full size image":"完整尺寸圖片",Green:"綠色",Grey:"灰色",Groove:"內凹線","Header column":"標題欄","Header row":"標題列",Heading:"標題","Heading 1":"標題 1","Heading 2":"標題 2","Heading 3":"標題 3","Heading 4":"標題 4","Heading 5":"標題 5","Heading 6":"標題 6",Height:"高度","Horizontal line":"水平線","Horizontal text alignment toolbar":"水平對齊",Huge:"特大","Image resize list":"圖片縮放清單","Image toolbar":"圖片工具","image widget":"圖片小工具","Increase indent":"增加縮排","Insert column left":"插入左方欄","Insert column right":"插入右方欄","Insert image":"插入圖片","Insert image or file":"插入圖片或檔案","Insert paragraph after block":"在這個區塊後面插入一個段落","Insert paragraph before block":"在這個區塊前面插入一個段落","Insert row above":"插入上方列","Insert row below":"插入下方列","Insert table":"插入表格","Inserting image failed":"插入圖片失敗",Inset:"內邊線",Italic:"斜體",Justify:"左右對齊","Justify cell text":"分散對齊","Left aligned image":"向左對齊圖片","Light blue":"亮藍色","Light green":"亮綠色","Light grey":"亮灰色","Merge cell down":"合併下方儲存格","Merge cell left":"合併左方儲存格","Merge cell right":"合併右方儲存格","Merge cell up":"合併上方儲存格","Merge cells":"合併儲存格",Next:"下一",None:"無","Numbered List":"有序清單",Orange:"橘色",Original:"原始圖片",Outset:"外框線",Padding:"儲存格留白","Page break":"換頁",Paragraph:"段落",Previous:"上一",Purple:"紫色",Red:"紅色",Redo:"重做","Remove color":"移除顏色","Remove Format":"移除格式","Resize image":"縮放圖片","Resize image to %0":"縮放圖片到 %0","Resize image to the original size":"縮放圖片到原始尺寸","Rich Text Editor":"豐富文字編輯器","Rich Text Editor, %0":"豐富文字編輯器，%0",Ridge:"凸起線","Right aligned image":"向右對齊圖片",Row:"列",Save:"儲存","Select all":"選取全部","Select column":"選擇欄","Select row":"選擇列","Selecting resized image failed":"選擇重設大小的圖片失敗","Show more items":"顯示更多","Side image":"側邊圖片",Small:"小",Solid:"實線","Split cell horizontally":"水平分割儲存格","Split cell vertically":"垂直分割儲存格",Strikethrough:"刪除線",Style:"樣式",Subscript:"下標",Superscript:"上標","Table alignment toolbar":"表格對齊","Table cell text alignment":"儲存格文字對齊","Table properties":"表格屬性","Table toolbar":"表格工具","Text alignment":"文字對齊","Text alignment toolbar":"文字對齊","Text alternative":"替代文字",'The color is invalid. Try "#FF0000" or "rgb(255,0,0)" or "red".':'顏色代碼錯誤。試試看 "#FF0000" 或 "rgb(255, 0, 0)" 或 "red"。','The value is invalid. Try "10px" or "2em" or simply "2".':'尺寸代碼錯誤。試試看 "10px" 或 "2em" 或簡單寫 "2"。',Tiny:"特小",Turquoise:"藍綠色",Underline:"底線",Undo:"取消","Upload failed":"上傳失敗","Upload in progress":"正在上傳","Vertical text alignment toolbar":"垂直對齊",White:"白色","Widget toolbar":"小工具",Width:"寬度","Words: %0":"字數: %0",Yellow:"黃色"}),t.getPluralForm=function(e){return 0}}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));
+!function(e){const i=e.zh=e.zh||{};i.dictionary=Object.assign(i.dictionary||{},{"%0 of %1":"%0/%1","Align center":"置中對齊","Align left":"靠左對齊","Align right":"靠右對齊",Aquamarine:"淺綠色",Big:"大",Black:"黑色","Block quote":"段落引用",Blue:"藍色",Bold:"粗體","Bulleted List":"符號清單",Cancel:"取消","Cannot upload file:":"無法上傳檔案：","Centered image":"置中圖片","Change image text alternative":"修改圖片的替代文字","Characters: %0":"字元數: %0","Choose heading":"選取標題",Column:"欄","Could not insert image at the current position.":"無法在這位置插入圖片","Could not obtain resized image URL.":"無法取得重設大小的圖片URL","Decrease indent":"減少縮排",Default:"預設","Delete column":"刪除欄","Delete row":"刪除列","Dim grey":"淡灰色","Document colors":"文件顏色","Dropdown toolbar":"下拉選單","Edit block":"編輯區塊","Editor toolbar":"編輯器工具","Enter image caption":"輸入圖片說明","Font Background Color":"前景顏色","Font Color":"字體顏色","Font Family":"字型","Font Size":"字體大小","Full size image":"完整尺寸圖片",Green:"綠色",Grey:"灰色","Header column":"標題欄","Header row":"標題列",Heading:"標題","Heading 1":"標題 1","Heading 2":"標題 2","Heading 3":"標題 3","Heading 4":"標題 4","Heading 5":"標題 5","Heading 6":"標題 6",Huge:"特大","Image resize list":"圖片縮放清單","Image toolbar":"圖片工具","image widget":"圖片小工具","Increase indent":"增加縮排","Insert column left":"插入左方欄","Insert column right":"插入右方欄","Insert image":"插入圖片","Insert image or file":"插入圖片或檔案","Insert paragraph after block":"在這個區塊後面插入一個段落","Insert paragraph before block":"在這個區塊前面插入一個段落","Insert row above":"插入上方列","Insert row below":"插入下方列","Insert table":"插入表格","Inserting image failed":"插入圖片失敗",Italic:"斜體",Justify:"左右對齊","Left aligned image":"向左對齊圖片","Light blue":"亮藍色","Light green":"亮綠色","Light grey":"亮灰色","Merge cell down":"合併下方儲存格","Merge cell left":"合併左方儲存格","Merge cell right":"合併右方儲存格","Merge cell up":"合併上方儲存格","Merge cells":"合併儲存格",Next:"下一","Numbered List":"有序清單",Orange:"橘色",Original:"原始圖片","Page break":"換頁",Paragraph:"段落",Previous:"上一",Purple:"紫色",Red:"紅色",Redo:"重做","Remove color":"移除顏色","Remove Format":"移除格式","Resize image":"縮放圖片","Resize image to %0":"縮放圖片到 %0","Resize image to the original size":"縮放圖片到原始尺寸","Rich Text Editor":"豐富文字編輯器","Rich Text Editor, %0":"豐富文字編輯器，%0","Right aligned image":"向右對齊圖片",Row:"列",Save:"儲存","Select all":"選取全部","Select column":"選擇欄","Select row":"選擇列","Selecting resized image failed":"選擇重設大小的圖片失敗","Show more items":"顯示更多","Side image":"側邊圖片",Small:"小","Split cell horizontally":"水平分割儲存格","Split cell vertically":"垂直分割儲存格",Strikethrough:"刪除線",Subscript:"下標",Superscript:"上標","Table toolbar":"表格工具","Text alignment":"文字對齊","Text alignment toolbar":"文字對齊","Text alternative":"替代文字",Tiny:"特小",Turquoise:"藍綠色",Underline:"底線",Undo:"取消","Upload failed":"上傳失敗","Upload in progress":"正在上傳",White:"白色","Widget toolbar":"小工具","Words: %0":"字數: %0",Yellow:"黃色"}),i.getPluralForm=function(e){return 0}}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));

package/src/assets/qms-ckeditor-plugin/package-lock.json

@@ -599,14 +599,6 @@
         "ckeditor5": "^27.1.0"
       }
     },
-    "@ckeditor/ckeditor5-horizontal-line": {
-      "version": "27.1.0",
-      "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-horizontal-line/-/ckeditor5-horizontal-line-27.1.0.tgz",
-      "integrity": "sha512-BF0Ck98eG0ut81NP+dj4493EVlf/fp9C2SN4a4L7gXOxAJlJNs953g+B6AqVsMHhpwS5ujnsEExm1ukGkaYpmA==",
-      "requires": {
-        "ckeditor5": "^27.1.0"
-      }
-    },
     "@ckeditor/ckeditor5-html-embed": {
       "version": "27.1.0",
       "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-html-embed/-/ckeditor5-html-embed-27.1.0.tgz",

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

@@ -54,7 +54,6 @@
     "@ckeditor/ckeditor5-clipboard": "27.1.0",
     "@wiris/mathtype-ckeditor5": "^7.27.0",
     "@ckeditor/ckeditor5-page-break": "^27.1.0",
-    "@ckeditor/ckeditor5-horizontal-line": "^27.1.0",
     "qms-angular": "^1.0.2"
   }
 }

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

@@ -25,9 +25,6 @@ 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';
@@ -59,15 +56,12 @@ import SpecialCharactersMathematical from './plugins/ckeditor5-special-character
 import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
 import FindAndReplace from './plugins/ckeditor5-find-and-replace/src/findandreplace.js';
 import Tooltip from './plugins/tooltip/tooltip.js';
+import QMSCKEditorBpmnPlugin from './plugins/bpmn/qmsCKEditorBpmnPlugin.js';
 import PageBreak from '@ckeditor/ckeditor5-page-break/src/pagebreak';
 import ImageMap from './plugins/imagemap/imagemap.js';
 import Indent from '@ckeditor/ckeditor5-indent/src/indent';
 import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock';
-import AboutCKEditor from './plugins/aboutckeditor/aboutckeditor.js';
-import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline';
 import ToggleToolbar from './plugins/toggletoolbar/toggletoolbar.js';
-import QMSCKEditorBpmnPlugin from './plugins/bpmn/qmsCKEditorBpmnPlugin.js';
-import QMSCKEditorFlowchartPlugin from './plugins/flowchart/qmsCKEditorFlowchartPlugin.js';
 
 class Editor extends ClassicEditor {}
 
@@ -101,9 +95,6 @@ Editor.builtinPlugins = [
 	Paragraph,
 	Table,
 	TableToolbar,
-  TableProperties,
-  TableCellProperties,
-  TableSelection,
 	TextTransformation,
 	QMSCKEditorFullscreenPlugin,
 	QMSCKEditorTemplatePlugin,
@@ -127,21 +118,11 @@ Editor.builtinPlugins = [
 	SpecialCharactersMathematical,
 	Clipboard,
 	PasteFromOffice,
-	Tooltip,
+  	Tooltip,
 	FindAndReplace,
 	PageBreak,
 	ImageMap,
-	QMSCKEditorBpmnPlugin,
-	PageBreak,
-	Indent,
-	IndentBlock,
-	AboutCKEditor,
-	PageBreak,
-	Indent,
-	IndentBlock,
-	HorizontalLine,
-  QMSCKEditorBpmnPlugin,
-  QMSCKEditorFlowchartPlugin,
+  	QMSCKEditorBpmnPlugin,
 	PageBreak,
 	Indent,
 	IndentBlock,

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

@@ -3,7 +3,7 @@ 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 { ImageMapCommands, createInsertedEvent, debounced } from '../imagemap/utils';
+
 export default class QMSCKEditorBpmnPlugin extends Plugin {
     init() {
         const editor = this.editor;
@@ -29,40 +29,21 @@ 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 imagemap = 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 );
-                    const insertImageMapCommand = editor.commands.get(ImageMapCommands.INSERT);
-                    const resizeImageMapCommand = editor.commands.get(ImageMapCommands.RESIZE);
-                    if(!!imagemap.areas && imagemap.areas.length > 0 && !!insertImageMapCommand){
-                        editor.model.createSelection(imageElement, "in");//Set the current selection in the inserted image
-                        imagemap.oldName = imagemap.name;//Delete old image map if any
-                        insertImageMapCommand.execute(imagemap);
-                        //resize image map when image width is greater than 600px
-                        if(imagemap.imageWidth > 600 && !!resizeImageMapCommand){
-                          insertImageMapCommand.once(createInsertedEvent(imagemap.name), debounced(() => {
-                              resizeImageMapCommand.execute();
-                          }, 500));
-                        }
-                    }
-                });
-
+                } );
               },
               { once: true });
             });
+
             return view;
-        });
+        })
     }
 
     isBpmnImage( element, image ) {

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

@@ -21,12 +21,6 @@ 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/qmsCKEditorService.js

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

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

@@ -1,7 +1,6 @@
 import { Plugin } from '@ckeditor/ckeditor5-core';
 import InsertImageMapCommand from './insertimagemapcommand'; 
 import ResizeImageMapCommand from './resizeimagemapcommand'; 
-import OpenImageMapCommand from './openimagemapcommand'; 
 import { ImageMapAttributes, ImageMapElements, debounced, trimStart, drawMap, ImageMapCommands, HtmlAttributes, HtmlElements, findMapNodes } from './utils';
 import ImageLoadObserver from '@ckeditor/ckeditor5-image/src/image/imageloadobserver';
 import { downcastImageWidthAttribute, downcastImageHeightAttribute, downcastImageSavedSrcAttribute, downcastImageMapAttribute, 
@@ -72,32 +71,28 @@ import { isWidget } from  '@ckeditor/ckeditor5-widget/src/utils';
             editor.execute(ImageMapCommands.RESIZE);
         }, 100));
 
-        this.listenTo(editingView.document, 'delete', ( evt, data ) => {
-            this.allowDeleteMap = true;
-		}, { context: [isWidget] });
- 
+        // this.listenTo(editingView.document, 'delete', ( evt, data ) => {
+        //     this.allowDeleteMap = true;
+		// }, {  context: [isWidget]  });
+
+        // this.listenTo(model.document, 'change:data', (event) => {
+        //     if(this.allowDeleteMap == true){
+        //         this.allowDeleteMap == false;
+        //         OnImageDeleted(model, event);
+        //     }
+        // });
+   
         this.listenTo(editingView.document, 'imageLoaded', (evt, domEvent) => {
             onImageLoaded(domEvent);
         });
  
-        model.document.on('change:data', (evt, batch) => {
-            if(this.allowDeleteMap == true){
-                this.allowDeleteMap = false;
-                OnImageDeleted(model, batch);
-            }
-        } );
-
-        editor.commands.add(ImageMapCommands.OPEN, new OpenImageMapCommand(editor));
         editor.commands.add(ImageMapCommands.INSERT, new InsertImageMapCommand(editor));
         editor.commands.add(ImageMapCommands.RESIZE, new ResizeImageMapCommand(editor));
     } 
 } 
  
-function OnImageDeleted(model, batch){
-    if( batch.type == 'transparent'){
-        return;
-    }
-    const differ = model.document.differ;
+function OnImageDeleted(model, event){
+    const differ = event.source.differ;
     // if no difference
     if (differ.isEmpty) { return; }
     const changes = differ.getChanges({ includeChangesInGraveyard: true });
@@ -108,7 +103,7 @@ function OnImageDeleted(model, batch){
     for (let i = 0; i < changes.length; i++){
         const change = changes[i]
         // if image remove exists
-        if (change && change.type === 'remove' && change.name === ImageMapElements.IMAGE) {
+        if (change && change.type === 'remove' && change.name === 'image') {
             hasNoImageRemoved = false
             break
         }
@@ -117,7 +112,7 @@ function OnImageDeleted(model, batch){
     // if not image remove stop execution
     if (hasNoImageRemoved) { return; }
     // get removed nodes
-    const removedNodes = changes.filter(change => (change.type === 'insert' && change.name === ImageMapElements.IMAGE))
+    const removedNodes = changes.filter(change => (change.type === 'insert' && change.name === 'image'))
  
     // removed image nodes
     const removedMapNames = []
@@ -134,7 +129,8 @@ function OnImageDeleted(model, batch){
         const existingMapElements = findMapNodes(removedMapNames, range);
 
         if(existingMapElements && existingMapElements.length > 0){
-            model.enqueueChange(batch, writer => {
+            const redoingBatch = model.createBatch( 'transparent' );
+            model.enqueueChange(redoingBatch, writer => {
                 existingMapElements.forEach(element => {
                     writer.remove(element);
                 });
@@ -154,34 +150,34 @@ function onImageLoaded(domEvent){
  
         const originalSrc =  domEvent.target.getAttribute(HtmlAttributes.SRC);
         const mapName =  trimStart(domEvent.target.getAttribute(HtmlAttributes.USE_MAP), '#');
-        const selector = `${HtmlElements.MAP}[${HtmlAttributes.NAME}='${mapName}']`;
-        const map = document.querySelector(selector);
-        if(map && map.childNodes){
-            const areas = [];
-            map.childNodes.forEach((child) =>{
-                if(child.nodeName && child.nodeName.toLowerCase() === HtmlElements.AREA){
-                    let area = {};
-                    area[HtmlAttributes.COORDS] = child.getAttribute(HtmlAttributes.COORDS);
-                    area[HtmlAttributes.SHAPE] = child.getAttribute(HtmlAttributes.SHAPE) || '';
-                    areas.push(area);
-                }
-            });
-            if(areas.length > 0){
-                const width =  map.getAttribute(HtmlAttributes.WIDTH) || domEvent.target.width;
-                const height =  map.getAttribute(HtmlAttributes.HEIGHT) || domEvent.target.height;
-                const target = domEvent.target;
-                drawMap(originalSrc, width, height, areas, (oldsrc, newsrc) => {
-                    if(target){
-                        target.setAttribute(HtmlAttributes.SRC, newsrc);
-                        target.setAttribute(HtmlAttributes.SAVED_SRC, oldsrc);
+            const selector = `${HtmlElements.MAP}[${HtmlAttributes.NAME}='${mapName}']`;
+            const map = document.querySelector(selector);
+            if(map && map.childNodes){
+                const areas = [];
+                map.childNodes.forEach((child) =>{
+                    if(child.nodeName && child.nodeName.toLowerCase() === HtmlElements.AREA){
+                        let area = {};
+                        area[HtmlAttributes.COORDS] = child.getAttribute(HtmlAttributes.COORDS);
+                        area[HtmlAttributes.SHAPE] = child.getAttribute(HtmlAttributes.SHAPE) || '';
+                        areas.push(area);
                     }
+                });
+                if(areas.length > 0){
+                    const width =  map.getAttribute(HtmlAttributes.WIDTH) || domEvent.target.width;
+                    const height =  map.getAttribute(HtmlAttributes.HEIGHT) || domEvent.target.height;
+                    const target = domEvent.target;
+                    drawMap(originalSrc, width, height, areas, (oldsrc, newsrc) => {
+                        if(target){
+                            target.setAttribute(HtmlAttributes.SRC, newsrc);
+                            target.setAttribute(HtmlAttributes.SAVED_SRC, oldsrc);
+                        }
 
-                    if(map){
-                        map.setAttribute(HtmlAttributes.WIDTH, width);
-                        map.setAttribute(HtmlAttributes.HEIGHT, height);
-                    } 
-                })
+                        if(map){
+                            map.setAttribute(HtmlAttributes.WIDTH, width);
+                            map.setAttribute(HtmlAttributes.HEIGHT, height);
+                        } 
+                    })
+                }
             }
-        }
     }
 }

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

@@ -39,7 +39,7 @@ import { ImageMapCommands } from './utils';
              view.bind('isEnabled').to(command, 'isEnabled');
  
              this.listenTo(view, 'execute', () => {
-                editor.execute(ImageMapCommands.OPEN, {});
+                editor.execute(ImageMapCommands.INSERT, {});
              });
  
              return view;

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

@@ -1,92 +1,128 @@
 
 import { Command } from '@ckeditor/ckeditor5-core';
 import { isImage } from '@ckeditor/ckeditor5-image/src/image/utils';
-import { ImageMapAttributes, ImageMapElements, trimStart, findMapNodes, drawMap, createInsertedEvent, createRemovedEvent } from './utils';
-
+import * as QMSCKEditorConstant from '../common/qmsCKEditorConstant';
+import * as QMSCKEditorService from '../common/qmsCKEditorService';
+import { ImageMapAttributes, ImageMapElements, trimStart, parsePixelToFloat, findFirstMapNode, findMapNodes, drawMap } from './utils';
+import  { getSelectedImageWidget } from '@ckeditor/ckeditor5-image/src/image/utils';
+ 
 export default class InsertImageMapCommand extends Command {
-	// refresh() {
-	// 	const element = this.editor.model.document.selection.getSelectedElement();
-	// 	this.isEnabled = isImage(element);
-	// }
-
-	execute( options = {} ) {
+	 
+	refresh() {
+		const element = this.editor.model.document.selection.getSelectedElement();
+		this.isEnabled = isImage(element);
+	}
+ 
+	execute() {
 		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(ImageMapAttributes.IMAGE_USE_MAP) || options.oldName;
+		const view = editor.editing.view;
+		const selectedElement = model.document.selection.getSelectedElement();
+ 
+		const mapName = selectedElement.getAttribute(ImageMapAttributes.IMAGE_USE_MAP);
+		let originalImageSrc = selectedElement.getAttribute(ImageMapAttributes.IMAGE_SRC);
+		if(selectedElement.hasAttribute(ImageMapAttributes.IMAGE_SAVED_SRC) && selectedElement.getAttribute(ImageMapAttributes.IMAGE_SAVED_SRC)){
+			originalImageSrc = selectedElement.getAttribute(ImageMapAttributes.IMAGE_SAVED_SRC);
+		}
 
-			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);
-					});
-				}
-			}
+		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(!!areas && areas.length > 0)
-			{
-				writer.setAttribute(ImageMapAttributes.IMAGE_USE_MAP, '#' + newName, imageElement);
-				writer.setAttribute(ImageMapAttributes.IMAGE_WIDTH, width, imageElement);
-				writer.setAttribute(ImageMapAttributes.IMAGE_HEIGHT, height, imageElement);
+		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(ImageMapAttributes.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;    
+            model.change(writer => {
+				var newMapName =  trimStart(evt.detail.name, '#');
+				const areas = evt.detail.areas;
+				const width = evt.detail.imageWidth;
+				const height = evt.detail.imageHeight;
+				const imageElement = model.document.selection.getSelectedElement();
+				const oldMapName = imageElement.getAttribute(ImageMapAttributes.IMAGE_USE_MAP);
 
-				let originalImageSrc = imageElement.getAttribute(ImageMapAttributes.IMAGE_SRC);
-				if(!imageElement.hasAttribute(ImageMapAttributes.IMAGE_SAVED_SRC) || !imageElement.getAttribute(ImageMapAttributes.IMAGE_SAVED_SRC)){
-					writer.setAttribute(ImageMapAttributes.IMAGE_SAVED_SRC, originalImageSrc, imageElement);
-				}
-				else{
-					originalImageSrc = imageElement.getAttribute(ImageMapAttributes.IMAGE_SAVED_SRC);
+				if(!!oldMapName){
+					const range = model.createRangeIn(model.document.getRoot());
+					const existingMapElements = findMapNodes([trimStart(oldMapName, '#')], range);
+					if(existingMapElements && existingMapElements.length > 0){
+						existingMapElements.forEach(element => {
+							writer.remove(element);
+						});
+					}
 				}
 
-				let attrs = {};
-				attrs[ImageMapAttributes.MAP_NAME] = newName;
-				attrs[ImageMapAttributes.MAP_AREAS] = JSON.stringify(areas);
-				attrs[ImageMapAttributes.MAP_WIDTH] = width;
-				attrs[ImageMapAttributes.MAP_HEIGHT] = height;
-				const mapElement = writer.createElement(ImageMapElements.MAP, attrs);
-
-				writer.insert(mapElement, writer.createPositionAt(imageElement, "after"));
+				if(!!areas && areas.length > 0) 
+				{
+					writer.setAttribute(ImageMapAttributes.IMAGE_USE_MAP, '#' + newMapName, imageElement);
+					writer.setAttribute(ImageMapAttributes.IMAGE_WIDTH, width, imageElement);
+					writer.setAttribute(ImageMapAttributes.IMAGE_HEIGHT, height, imageElement);
 
-				drawMap(originalImageSrc, width, height, areas, (oldsrc, newsrc) =>{
-					model.enqueueChange(writer.batch, writer => {
-						writer.setAttribute(ImageMapAttributes.IMAGE_SRC, newsrc, imageElement);
-						this.fire(createInsertedEvent(newName));
+					let originalImageSrc = imageElement.getAttribute(ImageMapAttributes.IMAGE_SRC);
+					if(!imageElement.hasAttribute(ImageMapAttributes.IMAGE_SAVED_SRC) || !imageElement.getAttribute(ImageMapAttributes.IMAGE_SAVED_SRC)){
+						writer.setAttribute(ImageMapAttributes.IMAGE_SAVED_SRC, originalImageSrc, imageElement);
+					}
+					else{
+						originalImageSrc = imageElement.getAttribute(ImageMapAttributes.IMAGE_SAVED_SRC);
+					}
+  
+					drawMap(originalImageSrc, width, height, areas, (oldsrc, newsrc) =>{
+						model.enqueueChange(writer => {
+							writer.setAttribute(ImageMapAttributes.IMAGE_SRC, newsrc, imageElement);
+						} );
 					});
-				});
-			}
-			else {
-				if(imageElement.hasAttribute(ImageMapAttributes.IMAGE_USE_MAP)){
-					writer.removeAttribute(ImageMapAttributes.IMAGE_USE_MAP, imageElement);
-				}
+	 
+					let attrs = {};
+					attrs[ImageMapAttributes.MAP_NAME] = newMapName;
+					attrs[ImageMapAttributes.MAP_AREAS] = JSON.stringify(areas);
+					attrs[ImageMapAttributes.MAP_WIDTH] = width;
+					attrs[ImageMapAttributes.MAP_HEIGHT] = height;
+					const mapElement = writer.createElement(ImageMapElements.MAP, attrs);	 
 
-				if(imageElement.hasAttribute(ImageMapAttributes.IMAGE_SAVED_SRC)){
-
-					let src = imageElement.getAttribute(ImageMapAttributes.IMAGE_SAVED_SRC);
-					if(!!src){
-						writer.setAttribute(ImageMapAttributes.IMAGE_SRC, src, imageElement);
+					writer.insert(mapElement, writer.createPositionAt(imageElement, "after"));
+				} 
+				else {
+					if(imageElement.hasAttribute(ImageMapAttributes.IMAGE_USE_MAP)){
+						writer.removeAttribute(ImageMapAttributes.IMAGE_USE_MAP, imageElement);
+					}
+ 
+					if(imageElement.hasAttribute(ImageMapAttributes.IMAGE_SAVED_SRC)){
+						 
+						let src = imageElement.getAttribute(ImageMapAttributes.IMAGE_SAVED_SRC);
+						if(!!src){
+							writer.setAttribute(ImageMapAttributes.IMAGE_SRC, src, imageElement);
+						}
+						writer.removeAttribute(ImageMapAttributes.IMAGE_SAVED_SRC, imageElement);
+					}
+ 
+					if(imageElement.hasAttribute(ImageMapAttributes.IMAGE_HEIGHT)){
+						writer.removeAttribute(ImageMapAttributes.IMAGE_HEIGHT, imageElement);
 					}
-					writer.removeAttribute(ImageMapAttributes.IMAGE_SAVED_SRC, imageElement);
-				}
-
-				if(imageElement.hasAttribute(ImageMapAttributes.IMAGE_HEIGHT)){
-					writer.removeAttribute(ImageMapAttributes.IMAGE_HEIGHT, imageElement);
-				}
 
-				if(imageElement.hasAttribute(ImageMapAttributes.IMAGE_WIDTH)){
-					writer.removeAttribute(ImageMapAttributes.IMAGE_WIDTH, imageElement);
+					if(imageElement.hasAttribute(ImageMapAttributes.IMAGE_WIDTH)){
+						writer.removeAttribute(ImageMapAttributes.IMAGE_WIDTH, imageElement);
+					}
 				}
-				this.fire(createRemovedEvent(newName));
-			}
-		},{ once: true });
+            });
+        },
+		{ once: true });
 	}
 }
 

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

@@ -1,7 +1,7 @@
 
 import { Command } from '@ckeditor/ckeditor5-core';
 import { isImage } from '@ckeditor/ckeditor5-image/src/image/utils';
-import { ImageMapAttributes, trimStart, parsePixelToFloat, findFirstMapNode, drawMap, resizeAreaWidth, resizeAreaHeight, createResizedEvent } from './utils';
+import { ImageMapAttributes, trimStart, parsePixelToFloat, findFirstMapNode, drawMap, resizeAreaWidth, resizeAreaHeight } from './utils';
 import  { getSelectedImageWidget} from '@ckeditor/ckeditor5-image/src/image/utils';
 
 export default class ResizeImageMapCommand extends Command {
@@ -11,7 +11,7 @@ export default class ResizeImageMapCommand extends Command {
 		this.isEnabled = isImage(element) && element.hasAttribute(ImageMapAttributes.IMAGE_USE_MAP);
 	}
  
-	execute( options = {}) {
+	execute() {
         const editor = this.editor;
         const model = editor.model;
         const view = this.editor.editing.view;
@@ -68,9 +68,8 @@ export default class ResizeImageMapCommand extends Command {
                             writer.setAttribute(ImageMapAttributes.IMAGE_HEIGHT, newHeight, imageElement);
 
                             drawMap(originalImageSrc, newWidth, newHeight, areas, (oldsrc, newsrc) =>{
-                                model.enqueueChange(writer.batch, writer => {
+                                model.enqueueChange(writer => {
                                     writer.setAttribute(ImageMapAttributes.IMAGE_SRC, newsrc, imageElement);
-                                    this.fire(createResizedEvent(mapName));
                                 });
                             });
                         });

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

@@ -34,7 +34,6 @@ export const ImageMapAttributes = {
 }
 
 export const ImageMapCommands = {
-	OPEN: 'openImageMap',
 	INSERT: 'insertImageMap',
 	RESIZE: 'resizeImageMap'
 }
@@ -44,18 +43,6 @@ export const ImageMapElements = {
 	IMAGE: 'image'//It is already defined by the image plugin
 }
 
-export function createInsertedEvent(mapname){
-	return trimStart(mapname, '#') + '_inserted';
-}
-
-export function createRemovedEvent(mapname){
-	return trimStart(mapname, '#') + '_removed';
-}
-
-export function createResizedEvent(mapname){
-	return trimStart(mapname, '#') + '_resized';
-}
-
 export function trimStart(text, charToRemove){
 	if(text && text.length > 0){
 		if(text.charAt(0) == charToRemove){