Sfoglia il codice sorgente

Draft of the placeholder feature.

Aleksander Nowodzinski 7 anni fa
parent
commit
f9a56db3a8

+ 12 - 0
packages/ckeditor5-engine/src/view/placeholder.js

@@ -50,6 +50,10 @@ export function attachPlaceholder( view, element, placeholderText, checkFunction
  * @param {module:engine/view/element~Element} element
  */
 export function detachPlaceholder( view, element ) {
+	if ( typeof element == 'function' ) {
+		element = element();
+	}
+
 	const doc = element.document;
 
 	view.change( writer => {
@@ -87,6 +91,14 @@ function updateAllPlaceholders( document, writer ) {
 // @param {module:engine/view/element~Element} element
 // @param {Object} info
 function updateSinglePlaceholder( writer, element, info ) {
+	if ( typeof element == 'function' ) {
+		element = element();
+
+		if ( !element ) {
+			return false;
+		}
+	}
+
 	const document = element.document;
 	const text = info.placeholderText;
 	let changed = false;

+ 19 - 0
packages/ckeditor5-engine/src/view/view.js

@@ -182,15 +182,34 @@ export default class View {
 
 		// Set view root name the same as DOM root tag name.
 		viewRoot._name = domRoot.tagName.toLowerCase();
+		viewRoot._domAttributes = {};
+
+		// Copy the attributes, to remember the state of the attributes as the element
+		// was before attaching. Apply the attributes using the engine, so they all
+		// remain under the control of the engine.
+		// TODO detachDomRoot back to viewRoot._domAttributes.
+		// TODO get rid of .change(), this._writer
+		for ( const { name, value } of domRoot.attributes ) {
+			this._writer.setAttribute( name, viewRoot._domAttributes[ name ] = value, viewRoot );
+		}
+
+		const onIsReadOnlyChange = () => {
+			this._writer.setAttribute( 'contenteditable', !viewRoot.isReadOnly, viewRoot );
+		};
+
+		// Set initial values.
+		onIsReadOnlyChange();
 
 		this.domRoots.set( name, domRoot );
 		this.domConverter.bindElements( domRoot, viewRoot );
 		this._renderer.markToSync( 'children', viewRoot );
+		this._renderer.markToSync( 'attributes', viewRoot );
 		this._renderer.domDocuments.add( domRoot.ownerDocument );
 
 		viewRoot.on( 'change:children', ( evt, node ) => this._renderer.markToSync( 'children', node ) );
 		viewRoot.on( 'change:attributes', ( evt, node ) => this._renderer.markToSync( 'attributes', node ) );
 		viewRoot.on( 'change:text', ( evt, node ) => this._renderer.markToSync( 'text', node ) );
+		viewRoot.on( 'change:isReadOnly', () => this.change( onIsReadOnlyChange ) );
 
 		for ( const observer of this._observers.values() ) {
 			observer.observe( domRoot, name );

+ 4 - 4
packages/ckeditor5-engine/theme/placeholder.css

@@ -6,9 +6,9 @@
 /* See ckeditor/ckeditor5#936. */
 .ck.ck-placeholder, .ck .ck-placeholder {
 	&::before {
-		 content: attr(data-placeholder);
+		content: attr(data-placeholder);
 
-		 /* See ckeditor/ckeditor5#469. */
-		 pointer-events: none;
-	 }
+		/* See ckeditor/ckeditor5#469. */
+		pointer-events: none;
+	}
 }