8
0
Quellcode durchsuchen

Widget util function toWidgetEditable now accepts element to have similar parameter as toWidget function. Small docs fixes.

Szymon Kupś vor 8 Jahren
Ursprung
Commit
97e406c1f6

+ 4 - 2
packages/ckeditor5-image/src/imagecaption/utils.js

@@ -8,6 +8,7 @@
  */
 
 import ModelElement from '@ckeditor/ckeditor5-engine/src/model/element';
+import ViewEditableElement from '@ckeditor/ckeditor5-engine/src/view/editableelement';
 import { toWidgetEditable } from '../widget/utils';
 
 const captionSymbol = Symbol( 'imageCaption' );
@@ -20,10 +21,11 @@ const captionSymbol = Symbol( 'imageCaption' );
  */
 export function captionElementCreator( viewDocument ) {
 	return () => {
-		const editable = toWidgetEditable( 'figcaption', viewDocument );
+		const editable = new ViewEditableElement( 'figcaption' );
+		editable.document = viewDocument;
 		editable.setCustomProperty( captionSymbol, true );
 
-		return editable;
+		return toWidgetEditable( editable );
 	};
 }
 

+ 8 - 9
packages/ckeditor5-image/src/widget/utils.js

@@ -7,8 +7,6 @@
  * @module image/widget/utils
  */
 
-import ViewEditableElement from '@ckeditor/ckeditor5-engine/src/view/editableelement';
-
 const widgetSymbol = Symbol( 'isWidget' );
 const labelSymbol = Symbol( 'label' );
 
@@ -92,16 +90,17 @@ export function getLabel( element ) {
 }
 
 /**
- * Creates nested editable element with proper CSS classes.
+ * Adds functionality to provided {module:engine/view/editableelement~EditableElement} to act as a widget's editable:
+ * * sets `contenteditable` attribute to `true`,
+ * * adds `ck-editable` CSS class,
+ * * adds `ck-editable_focused` CSS class when editable is focused and removes it when it's blurred.
  *
- * @param {String} elementName Name of the element to be created.
- * @param {module:engine/view/document~Document} viewDocument
- * @returns {module:engine/view/editableelement~EditableElement}
+ * @param {module:engine/view/editableelement~EditableElement} editable
+ * @returns {module:engine/view/editableelement~EditableElement} Returns same element that was provided in `editable` param.
  */
-export function toWidgetEditable( elementName, viewDocument ) {
-	const editable = new ViewEditableElement( elementName, { contenteditable: true } );
+export function toWidgetEditable( editable ) {
+	editable.setAttribute( 'contenteditable', 'true' );
 	editable.addClass( 'ck-editable' );
-	editable.document = viewDocument;
 
 	editable.on( 'change:isFocused', ( evt, property, is ) => {
 		if ( is ) {

+ 4 - 1
packages/ckeditor5-image/tests/widget/utils.js

@@ -4,6 +4,7 @@
  */
 
 import ViewElement from '@ckeditor/ckeditor5-engine/src/view/element';
+import ViewEditableElement from '@ckeditor/ckeditor5-engine/src/view/editableelement';
 import ViewDocument from '@ckeditor/ckeditor5-engine/src/view/document';
 import {
 	toWidget,
@@ -91,7 +92,9 @@ describe( 'widget utils', () => {
 
 		beforeEach( () => {
 			viewDocument = new ViewDocument();
-			element = toWidgetEditable( 'div', viewDocument );
+			element = new ViewEditableElement( 'div' );
+			element.document = viewDocument;
+			toWidgetEditable( element );
 		} );
 
 		it( 'should be created in context of proper document', () => {