瀏覽代碼

Highlight text for link with marker.

Maciej Gołaszewski 5 年之前
父節點
當前提交
52e53e6150
共有 2 個文件被更改,包括 35 次插入0 次删除
  1. 27 0
      packages/ckeditor5-link/src/linkui.js
  2. 8 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css

+ 27 - 0
packages/ckeditor5-link/src/linkui.js

@@ -82,6 +82,21 @@ export default class LinkUI extends Plugin {
 
 		// Attach lifecycle actions to the the balloon.
 		this._enableUserBalloonInteractions();
+
+		editor.conversion.for( 'downcast' ).markerToHighlight( {
+			model: 'link-ui',
+			view: {
+				classes: [ 'ck-link_selected' ]
+			}
+		} );
+
+		editor.conversion.for( 'downcast' ).markerToElement( {
+			model: 'link-ui',
+			view: {
+				name: 'span',
+				classes: [ 'ck-link-text-selection', 'ck-link-text-selection_collapsed' ]
+			}
+		} );
 	}
 
 	/**
@@ -382,6 +397,14 @@ export default class LinkUI extends Plugin {
 			}
 
 			this._addFormView();
+
+			this.editor.model.change( writer => {
+				writer.addMarker( 'link-ui', {
+					usingOperation: false,
+					affectsData: false,
+					range: this.editor.model.document.selection.getFirstRange()
+				} );
+			} );
 		}
 		// If there's a link under the selection...
 		else {
@@ -430,6 +453,10 @@ export default class LinkUI extends Plugin {
 
 		// Then remove the actions view because it's beneath the form.
 		this._balloon.remove( this.actionsView );
+
+		editor.model.change( writer => {
+			writer.removeMarker( 'link-ui' );
+		} );
 	}
 
 	/**

+ 8 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css

@@ -4,6 +4,14 @@
  */
 
 /* Class added to span element surrounding currently selected link. */
+.ck .ck-link-text-selection {
+	background: var(--ck-color-link-default);
+}
+
+.ck .ck-link-text-selection_collapsed {
+	border: 1px solid var(--ck-color-link-selected-background);
+}
+
 .ck .ck-link_selected {
 	background: var(--ck-color-link-selected-background);
 }