Browse Source

Added selected exception highlighting.

Aleksander Nowodzinski 6 năm trước cách đây
mục cha
commit
953117ee7c

+ 41 - 0
packages/ckeditor5-restricted-editing/src/restrictedediting.js

@@ -13,6 +13,8 @@ import RestrictedEditingUI from './restrictededitingui';
 
 import '../theme/restrictedediting.css';
 
+const HIGHLIGHT_CLASS = 'ck-restricted-editing-exception_selected';
+
 /**
  * @extends module:core/plugin~Plugin
  */
@@ -57,6 +59,45 @@ export default class RestrictedEditing extends Plugin {
 				priority: -10
 			} )
 		} );
+
+		this._setupExceptionHighlighting();
+	}
+
+	_setupExceptionHighlighting() {
+		const editor = this.editor;
+		const view = editor.editing.view;
+		const model = editor.model;
+		const highlightedMarkers = new Set();
+
+		// Adding the class.
+		view.document.registerPostFixer( writer => {
+			const modelSelection = model.document.selection;
+
+			for ( const marker of model.markers.getMarkersAtPosition( modelSelection.anchor ) ) {
+				for ( const viewElement of editor.editing.mapper.markerNameToElements( marker.name ) ) {
+					writer.addClass( HIGHLIGHT_CLASS, viewElement );
+					highlightedMarkers.add( viewElement );
+				}
+			}
+		} );
+
+		// Removing the class.
+		editor.conversion.for( 'editingDowncast' ).add( dispatcher => {
+			// Make sure the highlight is removed on every possible event, before conversion is started.
+			dispatcher.on( 'insert', removeHighlight, { priority: 'highest' } );
+			dispatcher.on( 'remove', removeHighlight, { priority: 'highest' } );
+			dispatcher.on( 'attribute', removeHighlight, { priority: 'highest' } );
+			dispatcher.on( 'selection', removeHighlight, { priority: 'highest' } );
+
+			function removeHighlight() {
+				view.change( writer => {
+					for ( const item of highlightedMarkers.values() ) {
+						writer.removeClass( HIGHLIGHT_CLASS, item );
+						highlightedMarkers.delete( item );
+					}
+				} );
+			}
+		} );
 	}
 }
 

+ 15 - 1
packages/ckeditor5-restricted-editing/theme/restrictedediting.css

@@ -11,11 +11,14 @@
  */
 
 :root {
-	--ck-restricted-editing-color-exception-background: hsla(31, 100%, 65%, .3);
+	--ck-restricted-editing-color-exception-background: hsla(31, 100%, 65%, .2);
 	--ck-restricted-editing-color-exception-brackets: hsla(31, 100%, 40%, .4);
+	--ck-restricted-editing-color-selected-exception-background: hsla(31, 100%, 65%, .5);
+	--ck-restricted-editing-color-selected-exception-brackets: hsla(31, 100%, 40%, .6);
 }
 
 .ck-editor__editable .ck-restricted-editing-exception {
+	transition: .2s ease-in-out background;
 	background-color: var(--ck-restricted-editing-color-exception-background);
 	border: 1px solid;
 	border-image: linear-gradient(
@@ -27,4 +30,15 @@
 		var(--ck-restricted-editing-color-exception-brackets) calc(100% - 5px),
 		var(--ck-restricted-editing-color-exception-brackets) 100%
 	) 1;
+
+	&.ck-restricted-editing-exception_selected {
+		background-color: var(--ck-restricted-editing-color-selected-exception-background);
+		border-image: linear-gradient(
+			to right,
+			var(--ck-restricted-editing-color-selected-exception-brackets) 0%,
+			var(--ck-restricted-editing-color-selected-exception-brackets) 5px,
+			var(--ck-restricted-editing-color-selected-exception-brackets) calc(100% - 5px),
+			var(--ck-restricted-editing-color-selected-exception-brackets) 100%
+		) 1;
+	}
 }