Show visual selection on a text when the contextual balloon is displa…

…yed.

As asked for link in ckeditor/ckeditor5#4721.

src/insertimage.js

@@ -9,6 +9,8 @@ import ImageInsertCommand from '@ckeditor/ckeditor5-image/src/image/imageinsertc
 
 import InsertImageForm from './insertimageform';
 
+import { createFakeVisualSelection, renderFakeVisualSelection } from './utils';
+
 export default class InsertImage extends Plugin {
     // Call before SubPlugin init
     constructor( editor ) {
@@ -57,7 +59,10 @@ export default class InsertImage extends Plugin {
 
             // Show the panel on button click.
             // this listen to 'excute" on button (backbone)
-            this.listenTo( button, 'execute', () => this._form.swapUI() );
+            this.listenTo( button, 'execute', () => {
+                createFakeVisualSelection(this.editor.model);
+                this._form.swapUI()
+            });
 
             // Active the button when images are allowed
             button.bind( 'isEnabled' ).to( this._command, 'isEnabled' );
@@ -69,6 +74,8 @@ export default class InsertImage extends Plugin {
                 });
             });
 
+            renderFakeVisualSelection(editor)
+
             return button;
         } );
     }
@@ -99,4 +106,4 @@ export default class InsertImage extends Plugin {
             callback: () => this._form.hideUI()
         } );
     }
-}
+}

src/insertimageform.js

@@ -5,6 +5,7 @@ import ContextualBalloon from '@ckeditor/ckeditor5-ui/src/panel/balloon/contextu
 import InsertImageFormView from './ui/insertimageformview';
 
 import { getSelectedImageWidget } from '@ckeditor/ckeditor5-image/src/image/utils';
+import { hideFakeVisualSelection } from './utils';
 
 /**
  * Use the "main" stack of the ContextualBalloon with only one view (added and removed by this
@@ -120,6 +121,8 @@ export default class InsertImageForm extends Plugin {
             // Because the form has an input which has focus, the focus must be brought back
             // to the editor. Otherwise, it would be lost.
             this.editor.editing.view.focus();
+
+			hideFakeVisualSelection(this.editor.model);
         }
     }
 

src/utils.js

@@ -0,0 +1,57 @@
+export const VISUAL_SELECTION_MARKER_NAME = 'aeness-insert-image';
+
+/**
+ * Create a fake visual selection when the contextual balloon is displayed.
+ *
+ * This adds a 'aeness-insert-image' marker into the document that is rendered as a highlight on selected text fragment.
+ */
+export function  createFakeVisualSelection(model) {
+    model.change( writer => {
+        const range = model.document.selection.getFirstRange();
+
+        if ( model.markers.has( VISUAL_SELECTION_MARKER_NAME ) ) {
+            writer.updateMarker( VISUAL_SELECTION_MARKER_NAME, { range } );
+        } else {
+            writer.addMarker( VISUAL_SELECTION_MARKER_NAME, {
+                usingOperation: false,
+                affectsData: false,
+                range
+            } );
+        }
+    } );
+}
+
+/**
+ * Render the fake visual selection created in {@link #createFakeVisualSelection}.
+ */
+export function renderFakeVisualSelection(editor) {
+    // Renders a fake visual selection marker on an expanded selection.
+    editor.conversion.for( 'editingDowncast' ).markerToHighlight( {
+        model: VISUAL_SELECTION_MARKER_NAME,
+        view: {
+            classes: [ 'ck-fake-insert-image-aeness-selection' ]
+        }
+    } );
+
+    // Renders a fake visual selection marker on a collapsed selection.
+    editor.conversion.for( 'editingDowncast' ).markerToElement( {
+        model: VISUAL_SELECTION_MARKER_NAME,
+        view: {
+            name: 'span',
+            classes: [ 'ck-fake-insert-image-aeness-selection', 'ck-fake-insert-image-aeness-selection_collapsed' ]
+        }
+    } );
+}
+
+
+/**
+ * Hides the fake visual selection created in {@link #createFakeVisualSelection}.
+ */
+export function hideFakeVisualSelection(model) {
+
+    if ( model.markers.has( VISUAL_SELECTION_MARKER_NAME ) ) {
+        model.change( writer => {
+            writer.removeMarker( VISUAL_SELECTION_MARKER_NAME );
+        } );
+    }
+}

theme/insertimageform.css

@@ -9,4 +9,20 @@
 
 [dir=ltr] .ck.ck-insert-image-form>:not(:first-child), [dir=rtl] .ck.ck-insert-image-form>:not(:last-child) {
     margin-left: var(--ck-spacing-standard);
+}
+
+
+/*
+ * Classes used by the "fake visual selection" displayed in the content when the balloon is focused.
+ */
+.ck .ck-fake-insert-image-aeness-selection {
+	background: var(--ck-color-link-fake-selection);
+}
+
+/* A collapsed fake visual selection. */
+.ck .ck-fake-insert-image-aeness-selection_collapsed {
+	height: 100%;
+	border-right: 1px solid var(--ck-color-base-text);
+	margin-right: -1px;
+	outline: solid 1px hsla(0, 0%, 100%, .5);
 }