qms-angular 1.0.50 → 1.0.54

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

@@ -1,6 +1,7 @@
 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, 
@@ -71,28 +72,32 @@ 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(model.document, 'change:data', (event) => {
-        //     if(this.allowDeleteMap == true){
-        //         this.allowDeleteMap == false;
-        //         OnImageDeleted(model, event);
-        //     }
-        // });
-   
+        this.listenTo(editingView.document, 'delete', ( evt, data ) => {
+            this.allowDeleteMap = true;
+		}, { context: [isWidget] });
+ 
         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, event){
-    const differ = event.source.differ;
+function OnImageDeleted(model, batch){
+    if( batch.type == 'transparent'){
+        return;
+    }
+    const differ = model.document.differ;
     // if no difference
     if (differ.isEmpty) { return; }
     const changes = differ.getChanges({ includeChangesInGraveyard: true });
@@ -103,7 +108,7 @@ function OnImageDeleted(model, event){
     for (let i = 0; i < changes.length; i++){
         const change = changes[i]
         // if image remove exists
-        if (change && change.type === 'remove' && change.name === 'image') {
+        if (change && change.type === 'remove' && change.name === ImageMapElements.IMAGE) {
             hasNoImageRemoved = false
             break
         }
@@ -112,7 +117,7 @@ function OnImageDeleted(model, event){
     // if not image remove stop execution
     if (hasNoImageRemoved) { return; }
     // get removed nodes
-    const removedNodes = changes.filter(change => (change.type === 'insert' && change.name === 'image'))
+    const removedNodes = changes.filter(change => (change.type === 'insert' && change.name === ImageMapElements.IMAGE))
  
     // removed image nodes
     const removedMapNames = []
@@ -129,8 +134,7 @@ function OnImageDeleted(model, event){
         const existingMapElements = findMapNodes(removedMapNames, range);
 
         if(existingMapElements && existingMapElements.length > 0){
-            const redoingBatch = model.createBatch( 'transparent' );
-            model.enqueueChange(redoingBatch, writer => {
+            model.enqueueChange(batch, writer => {
                 existingMapElements.forEach(element => {
                     writer.remove(element);
                 });
@@ -150,34 +154,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);
+        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(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.INSERT, {});
+                editor.execute(ImageMapCommands.OPEN, {});
              });
  
              return view;

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

@@ -1,128 +1,92 @@
 
 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 { ImageMapAttributes, ImageMapElements, trimStart, parsePixelToFloat, findFirstMapNode, findMapNodes, drawMap } from './utils';
-import  { getSelectedImageWidget } from '@ckeditor/ckeditor5-image/src/image/utils';
- 
+import { ImageMapAttributes, ImageMapElements, trimStart, findMapNodes, drawMap, createInsertedEvent, createRemovedEvent } from './utils';
+
 export default class InsertImageMapCommand extends Command {
-	 
-	refresh() {
-		const element = this.editor.model.document.selection.getSelectedElement();
-		this.isEnabled = isImage(element);
-	}
- 
-	execute() {
+	// refresh() {
+	// 	const element = this.editor.model.document.selection.getSelectedElement();
+	// 	this.isEnabled = isImage(element);
+	// }
+
+	execute( options = {} ) {
 		const editor = this.editor;
 		const model = editor.model;
-		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);
-		}
-
-		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 );
+		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;
 
-		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) || []);
+			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);
+					});
+				}
 			}
-		}
- 
-		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);
 
-				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);
-						});
-					}
+			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);
+
+				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(!!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);
+				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);
 
-					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);
-						} );
+				writer.insert(mapElement, writer.createPositionAt(imageElement, "after"));
+
+				drawMap(originalImageSrc, width, height, areas, (oldsrc, newsrc) =>{
+					model.enqueueChange(writer.batch, writer => {
+						writer.setAttribute(ImageMapAttributes.IMAGE_SRC, newsrc, imageElement);
+						this.fire(createInsertedEvent(newName));
 					});
-	 
-					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);	 
+				});
+			}
+			else {
+				if(imageElement.hasAttribute(ImageMapAttributes.IMAGE_USE_MAP)){
+					writer.removeAttribute(ImageMapAttributes.IMAGE_USE_MAP, 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);
-					}
+				if(imageElement.hasAttribute(ImageMapAttributes.IMAGE_SAVED_SRC)){
 
-					if(imageElement.hasAttribute(ImageMapAttributes.IMAGE_WIDTH)){
-						writer.removeAttribute(ImageMapAttributes.IMAGE_WIDTH, imageElement);
+					let src = imageElement.getAttribute(ImageMapAttributes.IMAGE_SAVED_SRC);
+					if(!!src){
+						writer.setAttribute(ImageMapAttributes.IMAGE_SRC, src, imageElement);
 					}
+					writer.removeAttribute(ImageMapAttributes.IMAGE_SAVED_SRC, imageElement);
 				}
-            });
-        },
-		{ once: true });
+
+				if(imageElement.hasAttribute(ImageMapAttributes.IMAGE_HEIGHT)){
+					writer.removeAttribute(ImageMapAttributes.IMAGE_HEIGHT, imageElement);
+				}
+
+				if(imageElement.hasAttribute(ImageMapAttributes.IMAGE_WIDTH)){
+					writer.removeAttribute(ImageMapAttributes.IMAGE_WIDTH, imageElement);
+				}
+				this.fire(createRemovedEvent(newName));
+			}
+		},{ once: true });
 	}
 }
 

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

@@ -0,0 +1,58 @@
+
+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 { ImageMapAttributes, ImageMapCommands, trimStart, parsePixelToFloat, findFirstMapNode } from './utils';
+import  { getSelectedImageWidget } from '@ckeditor/ckeditor5-image/src/image/utils';
+ 
+export default class OpenImageMapCommand 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(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);
+		}
+
+		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(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;    
+            editor.commands.get(ImageMapCommands.INSERT).execute(evt.detail);
+        });
+	}
+}
+

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 } from './utils';
+import { ImageMapAttributes, trimStart, parsePixelToFloat, findFirstMapNode, drawMap, resizeAreaWidth, resizeAreaHeight, createResizedEvent } 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() {
+	execute( options = {}) {
         const editor = this.editor;
         const model = editor.model;
         const view = this.editor.editing.view;
@@ -68,8 +68,9 @@ export default class ResizeImageMapCommand extends Command {
                             writer.setAttribute(ImageMapAttributes.IMAGE_HEIGHT, newHeight, imageElement);
 
                             drawMap(originalImageSrc, newWidth, newHeight, areas, (oldsrc, newsrc) =>{
-                                model.enqueueChange(writer => {
+                                model.enqueueChange(writer.batch, writer => {
                                     writer.setAttribute(ImageMapAttributes.IMAGE_SRC, newsrc, imageElement);
+                                    this.fire(createResizedEvent(mapName));
                                 });
                             });
                         });

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

@@ -34,6 +34,7 @@ export const ImageMapAttributes = {
 }
 
 export const ImageMapCommands = {
+	OPEN: 'openImageMap',
 	INSERT: 'insertImageMap',
 	RESIZE: 'resizeImageMap'
 }
@@ -43,6 +44,18 @@ 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){

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

@@ -10,19 +10,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 {
@@ -37,7 +37,7 @@ export default class Timestamp extends Plugin {
             buttonView.set( {
                 label: t('Timestamp'),
                 icon: timestampIcon,
-                withText: true,
+                withText: false,
                 tooltip: true
             } );
 

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

@@ -1,6 +1,6 @@
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import informationIcon from '../../themes/icons/information.svg';
+import tooltipIcon from '../../themes/icons/tooltip.svg';
 import * as QMSCKEditorConstant from '../common/qmsCKEditorConstant';
 import * as QMSCKEditorService from '../common/qmsCKEditorService';
 import ActionsView from './ui/actionsview';
@@ -12,7 +12,7 @@ export default class TooltipUI extends Plugin {
 	static get requires() {
 		return [ContextualBalloon];
 	}
- 
+
 	static get pluginName() {
 		return 'TooltipUI';
 	}
@@ -24,25 +24,25 @@ export default class TooltipUI extends Plugin {
 	get _isInBalloon() {
 		return this._balloon.hasView(this._actionView);
 	}
- 
+
     init() {
         const editor = this.editor;
         const t = editor.t;
         const view = editor.editing.view;
- 
+
         view.addObserver(ClickObserver);
         this._createActionsView();
- 
+
         editor.ui.componentFactory.add('tooltip', locale => {
             const buttonView = new ButtonView(locale);
 
             buttonView.set({
                 label: t('Tooltip'),
-                icon: informationIcon,
-                withText: true,
+                icon: tooltipIcon,
+                withText: false,
                 tooltip: true
             });
- 
+
 			// Bind button to the command.
             const insertTooltipCommand = editor.commands.get(INSERT_TOOLTIP_COMMAND);
 			buttonView.bind('isEnabled').to(insertTooltipCommand, 'isEnabled' );
@@ -55,26 +55,26 @@ export default class TooltipUI extends Plugin {
             return buttonView;
         });
     }
- 
+
 	destroy() {
 		super.destroy();
 		this._actionView.destroy();
 	}
- 
+
 	_createActionsView() {
 		const editor = this.editor;
 		const view = editor.editing.view;
 		const viewDocument = view.document;
 		this._balloon = this.editor.plugins.get('ContextualBalloon');
-		this._actionView = new ActionsView(editor.locale); 
+		this._actionView = new ActionsView(editor.locale);
 
 		const insertTooltipCommand = editor.commands.get(INSERT_TOOLTIP_COMMAND);
 		const removeTooltipCommand = editor.commands.get(REMOVE_TOOLTIP_COMMAND);
- 
+
 		this._actionView.bind(TOOLTIP_ATTRIBUTE).to( insertTooltipCommand, 'value');
 		this._actionView.editButtonView.bind('isEnabled').to(insertTooltipCommand);
 		this._actionView.removeButtonView.bind('isEnabled').to(removeTooltipCommand);
-	 
+
 		this.listenTo(this._actionView, 'edit', () => {
             const tooltip = { text: '', content: '' };
             const selectedElement = this._getSelectedTooltipElement();
@@ -93,7 +93,7 @@ export default class TooltipUI extends Plugin {
             editor.execute(REMOVE_TOOLTIP_COMMAND);
 			this._hideActionsView(true);
 		});
- 
+
 		this._actionView.keystrokes.set('Esc', (data, cancel) => {
 			this._hideActionsView(true);
 			cancel();
@@ -106,7 +106,7 @@ export default class TooltipUI extends Plugin {
 				this._showActionsView();
 			}
 		});
- 
+
 		// Close on click outside of balloon panel element.
 		clickOutsideHandler({
 			emitter: this._actionView,
@@ -124,18 +124,18 @@ export default class TooltipUI extends Plugin {
 		const viewDocument = editor.editing.view.document;
 		//const command = editor.commands.get('imageTextAlternative');
 		//const labeledInput = this._actionView.labeledInput;
- 
+
 		if (!this._isInBalloon) {
 			this._balloon.add({
 				view: this._actionView,
 				position: this._getBalloonPositionData()
 			});
 		}
- 
+
 		// Reposition the balloon or hide the form if an tooltip is no longer selected.
 		const prevSelectedElement = this._getSelectedTooltipElement();
 		const prevSelectionParent = getSelectionParent(viewDocument);
-		 
+
 		this.listenTo(editor.ui, 'update', () => {
 			const selectedElement = this._getSelectedTooltipElement();
 			const selectionParent = getSelectionParent(viewDocument);
@@ -143,9 +143,9 @@ export default class TooltipUI extends Plugin {
 			if ((prevSelectedElement && !selectedElement) || (!prevSelectedElement && selectionParent !== prevSelectionParent)) {
 				this._hideActionsView(true);
 			}
-			else if (this._isVisible) 
+			else if (this._isVisible)
 			{
-				this._balloon.updatePosition(this._getBalloonPositionData());              
+				this._balloon.updatePosition(this._getBalloonPositionData());
 			}
 		});
 	}
@@ -162,7 +162,7 @@ export default class TooltipUI extends Plugin {
 		if (!this._isInBalloon) {
 			return;
 		}
- 
+
 		if (this._actionView.focusTracker.isFocused) {
 			this._actionView.removeButtonView.focus();
 		}
@@ -179,7 +179,7 @@ export default class TooltipUI extends Plugin {
 		const selection = view.document.selection;
 		if (selection.isCollapsed) {
 			return findTooltipElementAncestor(selection.getFirstPosition());
-		} 
+		}
         else {
 			// The range for fully selected link is usually anchored in adjacent text nodes.
 			// Trim it to get closer to the actual link element.
@@ -193,11 +193,10 @@ export default class TooltipUI extends Plugin {
 			// Check if the link element is fully selected.
 			if (view.createRangeIn(startTooltip).getTrimmed().isEqual(range)) {
 				return startTooltip;
-			} 
+			}
 			else {
 				return null;
 			}
 		}
 	}
 }
-