Procházet zdrojové kódy

Adding focus class to captioning nested editable.

Szymon Kupś před 9 roky
rodič
revize
7720314825

+ 28 - 0
packages/ckeditor5-image/src/imagecaptioning/imagecaptioning.js

@@ -0,0 +1,28 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module image/imagecaptioning/imagecaptioning
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import ImageCaptioningEngine from './imagecaptioningengine';
+import '../../theme/imagecaptioning/theme.scss';
+
+export default class ImageCaptioning extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ ImageCaptioningEngine ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+
+	}
+}

+ 23 - 8
packages/ckeditor5-image/src/imagecaptioning/imagecaptioningengine.js

@@ -9,9 +9,9 @@
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import ModelTreeWalker from '@ckeditor/ckeditor5-engine/src/model/treewalker';
-// import { insertElement } from '@ckeditor/ckeditor5-engine/src/conversion/model-to-view-converters';
 import ModelElement from '@ckeditor/ckeditor5-engine/src/model/element';
 import ViewEditableElement from '@ckeditor/ckeditor5-engine/src/view/editableelement';
+import ViewContainerElement from '@ckeditor/ckeditor5-engine/src/view/containerelement';
 import ViewElement from '@ckeditor/ckeditor5-engine/src/view/element';
 import ViewPosition from '@ckeditor/ckeditor5-engine/src/view/position';
 import viewWriter from '@ckeditor/ckeditor5-engine/src/view/writer';
@@ -20,9 +20,6 @@ import buildViewConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildv
 import ViewMatcher from '@ckeditor/ckeditor5-engine/src/view/matcher';
 import { isImage } from '../utils';
 
-// TODO: move to the ImageCaptioning
-import '../../theme/imagecaptioning/theme.scss';
-
 export default class ImageCaptioningEngine extends Plugin {
 	/**
 	 * @inheritDoc
@@ -30,6 +27,7 @@ export default class ImageCaptioningEngine extends Plugin {
 	init() {
 		const editor = this.editor;
 		const document = editor.document;
+		const viewDocument = editor.editing.view;
 		const schema = document.schema;
 		const data = editor.data;
 		const editing = editor.editing;
@@ -62,19 +60,36 @@ export default class ImageCaptioningEngine extends Plugin {
 		// Model to view converter for data pipeline.
 		data.modelToView.on(
 			'insert:caption',
-			captionModelToView( new ViewEditableElement( 'figcaption' ), false )
+			captionModelToView( new ViewContainerElement( 'figcaption' ), false )
 		);
 
 		// Model to view converter for editing pipeline.
 		editing.modelToView.on(
 			'insert:caption',
-			captionModelToView( new ViewEditableElement( 'figcaption', { contenteditable: true } ) )
+			captionModelToView( editingViewEditableCreator( viewDocument ) )
 		);
 	}
 }
 
+function editingViewEditableCreator( viewDocument ) {
+	return () => {
+		const editable = new ViewEditableElement( 'figcaption', { contenteditable: true } ) ;
+		editable.document = viewDocument;
+
+		editable.on( 'change:isFocused', ( evt, property, is ) => {
+			if ( is ) {
+				editable.addClass( 'focused' );
+			} else {
+				editable.removeClass( 'focused' );
+			}
+		} );
+
+		return editable;
+	};
+}
+
 function captionModelToView( element, convertEmpty = true ) {
-	const insertConverter = insertElement( element );
+	const insertConverter = insertElementAtEnd( element );
 
 	return ( evt, data, consumable, conversionApi ) => {
 		const captionElement = data.item;
@@ -117,7 +132,7 @@ function hasCaption( image ) {
 	return false;
 }
 
-function insertElement( elementCreator ) {
+function insertElementAtEnd( elementCreator ) {
 	return ( evt, data, consumable, conversionApi ) => {
 		if ( !consumable.consume( data.item, 'insert' ) ) {
 			return;

+ 2 - 2
packages/ckeditor5-image/tests/manual/captioning.js

@@ -11,7 +11,7 @@ import TypingPlugin from '@ckeditor/ckeditor5-typing/src/typing';
 import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import HeadingPlugin from '@ckeditor/ckeditor5-heading/src/heading';
 import ImagePlugin from '../../src/image';
-import ImageCaptioningEngine from '../../src/imagecaptioning/imagecaptioningengine';
+import ImageCaptioning from '../../src/imagecaptioning/imagecaptioning';
 import UndoPlugin from '@ckeditor/ckeditor5-undo/src/undo';
 import ClipboardPlugin from '@ckeditor/ckeditor5-clipboard/src/clipboard';
 import ImageToolbar from '../../src/imagetoolbar';
@@ -19,7 +19,7 @@ import ImageToolbar from '../../src/imagetoolbar';
 ClassicEditor.create( document.querySelector( '#editor' ), {
 	plugins: [
 		EnterPlugin, TypingPlugin, ParagraphPlugin, HeadingPlugin, ImagePlugin,
-		UndoPlugin, ClipboardPlugin, ImageToolbar, ImageCaptioningEngine
+		UndoPlugin, ClipboardPlugin, ImageToolbar, ImageCaptioning
 	],
 	toolbar: [ 'headings', 'undo', 'redo' ],
 	image: {

+ 15 - 1
packages/ckeditor5-image/theme/imagecaptioning/theme.scss

@@ -1,5 +1,19 @@
+// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_colors.scss';
+@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_shadow.scss';
+@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_states.scss';
+
 .ck-widget.image {
 	figcaption {
-		border: 1px solid red;
+		background-color: ck-color( 'foreground' );
+		padding: 10px;
+
+		&.focused {
+			@include ck-focus-ring( 'outline' );
+			@include ck-box-shadow( $ck-inner-shadow );
+			background-color: ck-color( 'background' );;
+		}
 	}
 }