Przeglądaj źródła

Fake selection label is converted during widget conversion, not image.

Szymon Kupś 9 lat temu
rodzic
commit
851eb99a24

+ 0 - 30
packages/ckeditor5-image/src/converters.js

@@ -8,7 +8,6 @@
  */
 
 import ModelElement from '@ckeditor/ckeditor5-engine/src/model/element';
-import { isImageWidget } from './utils';
 
 /**
  * Returns function that converts image view representation:
@@ -61,35 +60,6 @@ export function viewToModelImage() {
 	};
 }
 
-/**
- * Returns model to view selection converter. This converter is applied after default selection conversion is made.
- * It creates fake view selection when {@link module:engine/view/selection~Selection#getSelectedElement} returns instance
- * of image widget.
- *
- * @param {Function} t {@link module:utils/locale~Locale#t Locale#t function} used to translate default fake selection's label.
- * @returns {Function}
- */
-export function modelToViewSelection( t ) {
-	return ( evt, data, consumable, conversionApi ) => {
-		const viewSelection = conversionApi.viewSelection;
-		const selectedElement = viewSelection.getSelectedElement();
-
-		if ( !selectedElement || !isImageWidget( selectedElement ) ) {
-			return;
-		}
-
-		let fakeSelectionLabel = t( 'image widget' );
-		const imgElement = selectedElement.getChild( 0 );
-		const altText = imgElement.getAttribute( 'alt' );
-
-		if ( altText ) {
-			fakeSelectionLabel = `${ altText } ${ fakeSelectionLabel }`;
-		}
-
-		viewSelection.setFake( true, { label: fakeSelectionLabel } );
-	};
-}
-
 /**
  * Creates image attribute converter for provided model conversion dispatchers.
  *

+ 2 - 5
packages/ckeditor5-image/src/imageengine.js

@@ -10,7 +10,7 @@
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import buildModelConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildmodelconverter';
 import WidgetEngine from './widget/widgetengine';
-import { viewToModelImage, modelToViewSelection, createImageAttributeConverter } from './converters';
+import { viewToModelImage, createImageAttributeConverter } from './converters';
 import { toImageWidget } from './utils';
 import ViewContainerElement from '@ckeditor/ckeditor5-engine/src/view/containerelement';
 import ViewEmptyElement from '@ckeditor/ckeditor5-engine/src/view/emptyelement';
@@ -54,16 +54,13 @@ export default class ImageEngine extends Plugin {
 		// Build converter from model to view for editing pipeline.
 		buildModelConverter().for( editing.modelToView )
 			.fromElement( 'image' )
-			.toElement( () => toImageWidget( createImageViewElement() ) );
+			.toElement( () => toImageWidget( createImageViewElement(), editor.t ) );
 
 		createImageAttributeConverter( [ editing.modelToView, data.modelToView ], 'src' );
 		createImageAttributeConverter( [ editing.modelToView, data.modelToView ], 'alt' );
 
 		// Converter for figure element from view to model.
 		data.viewToModel.on( 'element:figure', viewToModelImage() );
-
-		// Creates fake selection label if selection is placed around image widget.
-		editing.modelToView.on( 'selection', modelToViewSelection( editor.t ), { priority: 'lowest' } );
 	}
 }
 

+ 15 - 2
packages/ckeditor5-image/src/utils.js

@@ -7,7 +7,7 @@
  * @module image/utils
  */
 
-import { widgetize, isWidget } from './widget/utils';
+import { widgetize, isWidget, setFakeSelectionLabel } from './widget/utils';
 import ModelElement from '@ckeditor/ckeditor5-engine/src/model/element';
 
 const imageSymbol = Symbol( 'isImage' );
@@ -15,14 +15,27 @@ const imageSymbol = Symbol( 'isImage' );
 /**
  * Converts given {@link module:engine/view/element~Element} to image widget:
  * * adds {@link module:engine/view/element~Element#setCustomProperty custom property} allowing to recognize image widget element,
+ * * sets fake selection label function,
  * * calls {@link module:image/widget/utils~widgetize widgetize}.
  *
  * @param {module:engine/view/element~Element} viewElement
  * @returns {module:engine/view/element~Element}
  */
-export function toImageWidget( viewElement ) {
+export function toImageWidget( viewElement, t ) {
 	viewElement.setCustomProperty( imageSymbol, true );
 
+	setFakeSelectionLabel( viewElement, () => {
+		let fakeSelectionLabel = t( 'image widget' );
+		const imgElement = viewElement.getChild( 0 );
+		const altText = imgElement.getAttribute( 'alt' );
+
+		if ( altText ) {
+			fakeSelectionLabel = `${ altText } ${ fakeSelectionLabel }`;
+		}
+
+		return fakeSelectionLabel;
+	} );
+
 	return widgetize( viewElement );
 }
 

+ 29 - 0
packages/ckeditor5-image/src/widget/utils.js

@@ -8,6 +8,7 @@
  */
 
 const widgetSymbol = Symbol( 'isWidget' );
+const fakeSelectionLabelSymbol = Symbol( 'fakeSelectionLabel' );
 
 /**
  * CSS class added to each widget element.
@@ -52,6 +53,34 @@ export function widgetize( element ) {
 	return element;
 }
 
+/**
+ * Sets fake selection label for given element.
+ * It can be passed as a plain string or a function returning a string. Function will be called each time label is retrieved by
+ * {module:image/widget/utils~getFakeSelectionLabel}.
+ *
+ * @param {module:engine/view/element~Element} element
+ * @param {String|Function} labelOrCreator
+ */
+export function setFakeSelectionLabel( element, labelOrCreator ) {
+	element.setCustomProperty( fakeSelectionLabelSymbol, labelOrCreator );
+}
+
+/**
+ * Returns fake selection label for provided element.
+ *
+ * @param {module:engine/view/element~Element} element
+ * @return {String|undefined}
+ */
+export function getFakeSelectionLabel( element ) {
+	const labelCreator = element.getCustomProperty( fakeSelectionLabelSymbol );
+
+	if ( !labelCreator ) {
+		return undefined;
+	}
+
+	return typeof labelCreator == 'function' ? labelCreator() : labelCreator;
+}
+
 // Default filler offset function applied to all widget elements.
 //
 // @returns {null}

+ 2 - 2
packages/ckeditor5-image/src/widget/widgetengine.js

@@ -8,7 +8,7 @@
  */
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import { WIDGET_SELECTED_CLASS_NAME, isWidget } from './utils';
+import { WIDGET_SELECTED_CLASS_NAME, isWidget, getFakeSelectionLabel } from './utils';
 
 /**
  * The widget engine plugin.
@@ -40,7 +40,7 @@ export default class WidgetEngine extends Plugin {
 				return;
 			}
 
-			viewSelection.setFake( true );
+			viewSelection.setFake( true, { label: getFakeSelectionLabel( selectedElement ) } );
 			selectedElement.addClass( WIDGET_SELECTED_CLASS_NAME );
 			previouslySelected = selectedElement;
 		}, { priority: 'low' } );

+ 1 - 24
packages/ckeditor5-image/tests/converters.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-import { viewToModelImage, modelToViewSelection, createImageAttributeConverter } from '../src/converters';
+import { viewToModelImage, createImageAttributeConverter } from '../src/converters';
 import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';
 import { createImageViewElement } from '../src/imageengine';
 import { toImageWidget } from '../src/utils';
@@ -32,7 +32,6 @@ describe( 'Image converters', () => {
 					.fromElement( 'image' )
 					.toElement( () => toImageWidget( createImageViewElement() ) );
 
-				editor.editing.modelToView.on( 'selection', modelToViewSelection( editor.t ), { priority: 'lowest' } );
 				buildModelConverter().for( editor.editing.modelToView )
 					.fromElement( 'image' )
 					.toElement( () => toImageWidget( createImageViewElement() ) );
@@ -101,28 +100,6 @@ describe( 'Image converters', () => {
 		}
 	} );
 
-	describe( 'modelToViewSelection', () => {
-		it( 'should convert selection over image to fake selection', () => {
-			setModelData( document, '[<image src=""></image>]' );
-
-			expect( viewDocument.selection.isFake ).to.be.true;
-			expect( viewDocument.selection.fakeSelectionLabel ).to.equal( 'image widget' );
-		} );
-
-		it( 'should convert fake selection label with alt', () => {
-			setModelData( document, '[<image src="" alt="foo bar"></image>]' );
-
-			expect( viewDocument.selection.isFake ).to.be.true;
-			expect( viewDocument.selection.fakeSelectionLabel ).to.equal( 'foo bar image widget' );
-		} );
-
-		it( 'should not convert fake selection if image is not selected', () => {
-			setModelData( document, '[]<image src="" alt="foo bar"></image>' );
-
-			expect( viewDocument.selection.isFake ).to.be.false;
-		} );
-	} );
-
 	describe( 'modelToViewAttributeConverter', () => {
 		it( 'should convert adding attribute to image', () => {
 			setModelData( document, '<image src=""></image>' );