Kaynağa Gözat

Changed CSS Variables naming convention.

Damian Konopka 7 yıl önce
ebeveyn
işleme
57590ad9b1

+ 14 - 2
packages/ckeditor5-highlight/docs/_snippets/features/custom-highlight-options.js

@@ -14,8 +14,20 @@ ClassicEditor
 		},
 		highlight: {
 			options: [
-				{ model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: 'var(--ck-marker-green)', type: 'marker' },
-				{ model: 'redPen', class: 'pen-red', title: 'Red pen', color: 'var(--ck-pen-red)', type: 'pen' },
+				{
+					model: 'greenMarker',
+					class: 'marker-green',
+					title: 'Green marker',
+					color: 'var(--ck-highlight-marker-green)',
+					type: 'marker'
+				},
+				{
+					model: 'redPen',
+					class: 'pen-red',
+					title: 'Red pen',
+					color: 'var(--ck-highlight-pen-red)',
+					type: 'pen'
+				},
 			]
 		}
 	} )

+ 8 - 8
packages/ckeditor5-highlight/docs/features/highlight.md

@@ -27,14 +27,14 @@ ClassicEditor
 					model: 'greenMarker',
 					class: 'marker-green',
 					title: 'Green marker',
-					color: 'var(--ck-marker-green)',
+					color: 'var(--ck-highlight-marker-green)',
 					type: 'marker'
 				},
 				{
 					model: 'redPen',
 					class: 'pen-red',
 					title: 'Red pen',
-					color: 'var(--ck-pen-red)',
+					color: 'var(--ck-highlight-pen-red)',
 					type: 'pen'
 				}
 			]
@@ -112,12 +112,12 @@ The {@link module:highlight/highlight~Highlight} plugin registers:
 	The `value` corresponds to the `model` property in configuration object. For the default configuration:
 	```js
 	highlight.options = [
-		{ model: 'yellowMarker', class: 'marker-yellow', title: 'Yellow Marker', color: 'var(--ck-marker-yellow)', type: 'marker' },
-		{ model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: 'var(--ck-marker-green)', type: 'marker' },
-		{ model: 'pinkMarker', class: 'marker-pink', title: 'Pink marker', color: 'var(--ck-marker-pink)', type: 'marker' },
-		{ model: 'blueMarker', class: 'marker-blue', title: 'Blue marker', color: 'var(--ck-marker-blue)', type: 'marker' },
-		{ model: 'redPen', class: 'pen-red', title: 'Red pen', color: 'var(--ck-pen-red)', type: 'pen' },
-		{ model: 'greenPen', class: 'pen-green', title: 'Green pen', color: 'var(--ck-pen-green)', type: 'pen' }
+		{ model: 'yellowMarker', class: 'marker-yellow', title: 'Yellow Marker', color: 'var(--ck-highlight-marker-yellow)', type: 'marker' },
+		{ model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: 'var(--ck-highlight-marker-green)', type: 'marker' },
+		{ model: 'pinkMarker', class: 'marker-pink', title: 'Pink marker', color: 'var(--ck-highlight-marker-pink)', type: 'marker' },
+		{ model: 'blueMarker', class: 'marker-blue', title: 'Blue marker', color: 'var(--ck-highlight-marker-blue)', type: 'marker' },
+		{ model: 'redPen', class: 'pen-red', title: 'Red pen', color: 'var(--ck-highlight-pen-red)', type: 'pen' },
+		{ model: 'greenPen', class: 'pen-green', title: 'Green pen', color: 'var(--ck-highlight-pen-green)', type: 'pen' }
 	]
 	```
 

+ 45 - 9
packages/ckeditor5-highlight/src/highlight.js

@@ -45,7 +45,7 @@ export default class Highlight extends Plugin {
  *			model: 'pinkMarker',
  *			class: 'marker-pink',
  *			title: 'Pink Marker',
- *			color: 'var(--ck-marker-pink)',
+ *			color: 'var(--ck-highlight-marker-pink)',
  *			type: 'marker'
  *		}
  *
@@ -87,12 +87,48 @@ export default class Highlight extends Plugin {
  * The available highlighters options. The default value is:
  *
  *		options: [
- *			{ model: 'yellowMarker', class: 'marker-yellow', title: 'Yellow marker', color: 'var(--ck-marker-yellow)', type: 'marker' },
- *			{ model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: 'var(--ck-marker-green)', type: 'marker' },
- *			{ model: 'pinkMarker', class: 'marker-pink', title: 'Pink marker', color: 'var(--ck-marker-pink)', type: 'marker' },
- *			{ model: 'blueMarker', class: 'marker-blue', title: 'Blue marker', color: 'var(--ck-marker-blue)', type: 'marker' },
- *			{ model: 'redPen', class: 'pen-red', title: 'Red pen', color: 'var(--ck-pen-red)', type: 'pen' },
- *			{ model: 'greenPen', class: 'pen-green', title: 'Green pen', color: 'var(--ck-pen-green)', type: 'pen' }
+ *			{
+				model: 'yellowMarker',
+				class: 'marker-yellow',
+				title: 'Yellow marker',
+				color: 'var(--ck-highlight-marker-yellow)',
+				type: 'marker'
+			},
+ *			{
+				model: 'greenMarker',
+				class: 'marker-green',
+				title: 'Green marker',
+				color: 'var(--ck-highlight-marker-green)',
+				type: 'marker'
+			},
+ *			{
+				model: 'pinkMarker',
+				class: 'marker-pink',
+				title: 'Pink marker',
+				color: 'var(--ck-highlight-marker-pink)',
+				type: 'marker'
+			},
+ *			{
+				model: 'blueMarker',
+				class: 'marker-blue',
+				title: 'Blue marker',
+				color: 'var(--ck-highlight-marker-blue)',
+				type: 'marker'
+			},
+ *			{
+				model: 'redPen',
+				class: 'pen-red',
+				title: 'Red pen',
+				color: 'var(--ck-highlight-pen-red)',
+				type: 'pen'
+			},
+ *			{
+				model: 'greenPen',
+				class: 'pen-green',
+				title: 'Green pen',
+				color: 'var(--ck-highlight-pen-green)',
+				type: 'pen'
+			}
  *		]
  *
  * There are two types of highlighters available:
@@ -113,14 +149,14 @@ export default class Highlight extends Plugin {
  *							model: 'pinkMarker',
  *							class: 'marker-pink',
  *							title: 'Pink Marker',
- *							color: 'var(--ck-marker-pink)',
+ *							color: 'var(--ck-highlight-marker-pink)',
  *							type: 'marker'
  *						},
  *						{
  *							model: 'redPen',
  *							class: 'pen-red',
  *							title: 'Red Pen',
- *							color: 'var(--ck-pen-red)',
+ *							color: 'var(--ck-highlight-pen-red)',
  *							type: 'pen'
  *						},
  *					]

+ 42 - 6
packages/ckeditor5-highlight/src/highlightediting.js

@@ -28,12 +28,48 @@ export default class HighlightEditing extends Plugin {
 
 		editor.config.define( 'highlight', {
 			options: [
-				{ model: 'yellowMarker', class: 'marker-yellow', title: 'Yellow marker', color: 'var(--ck-marker-yellow)', type: 'marker' },
-				{ model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: 'var(--ck-marker-green)', type: 'marker' },
-				{ model: 'pinkMarker', class: 'marker-pink', title: 'Pink marker', color: 'var(--ck-marker-pink)', type: 'marker' },
-				{ model: 'blueMarker', class: 'marker-blue', title: 'Blue marker', color: 'var(--ck-marker-blue)', type: 'marker' },
-				{ model: 'redPen', class: 'pen-red', title: 'Red pen', color: 'var(--ck-pen-red)', type: 'pen' },
-				{ model: 'greenPen', class: 'pen-green', title: 'Green pen', color: 'var(--ck-pen-green)', type: 'pen' }
+				{
+					model: 'yellowMarker',
+					class: 'marker-yellow',
+					title: 'Yellow marker',
+					color: 'var(--ck-highlight-marker-yellow)',
+					type: 'marker'
+				},
+				{
+					model: 'greenMarker',
+					class: 'marker-green',
+					title: 'Green marker',
+					color: 'var(--ck-highlight-marker-green)',
+					type: 'marker'
+				},
+				{
+					model: 'pinkMarker',
+					class: 'marker-pink',
+					title: 'Pink marker',
+					color: 'var(--ck-highlight-marker-pink)',
+					type: 'marker'
+				},
+				{
+					model: 'blueMarker',
+					class: 'marker-blue',
+					title: 'Blue marker',
+					color: 'var(--ck-highlight-marker-blue)',
+					type: 'marker'
+				},
+				{
+					model: 'redPen',
+					class: 'pen-red',
+					title: 'Red pen',
+					color: 'var(--ck-highlight-pen-red)',
+					type: 'pen'
+				},
+				{
+					model: 'greenPen',
+					class: 'pen-green',
+					title: 'Green pen',
+					color: 'var(--ck-highlight-pen-green)',
+					type: 'pen'
+				}
 			]
 		} );
 	}

+ 6 - 6
packages/ckeditor5-highlight/tests/highlightediting.js

@@ -89,42 +89,42 @@ describe( 'HighlightEditing', () => {
 							model: 'yellowMarker',
 							class: 'marker-yellow',
 							title: 'Yellow marker',
-							color: 'var(--ck-marker-yellow)',
+							color: 'var(--ck-highlight-marker-yellow)',
 							type: 'marker'
 						},
 						{
 							model: 'greenMarker',
 							class: 'marker-green',
 							title: 'Green marker',
-							color: 'var(--ck-marker-green)',
+							color: 'var(--ck-highlight-marker-green)',
 							type: 'marker'
 						},
 						{
 							model: 'pinkMarker',
 							class: 'marker-pink',
 							title: 'Pink marker',
-							color: 'var(--ck-marker-pink)',
+							color: 'var(--ck-highlight-marker-pink)',
 							type: 'marker'
 						},
 						{
 							model: 'blueMarker',
 							class: 'marker-blue',
 							title: 'Blue marker',
-							color: 'var(--ck-marker-blue)',
+							color: 'var(--ck-highlight-marker-blue)',
 							type: 'marker'
 						},
 						{
 							model: 'redPen',
 							class: 'pen-red',
 							title: 'Red pen',
-							color: 'var(--ck-pen-red)',
+							color: 'var(--ck-highlight-pen-red)',
 							type: 'pen'
 						},
 						{
 							model: 'greenPen',
 							class: 'pen-green',
 							title: 'Green pen',
-							color: 'var(--ck-pen-green)',
+							color: 'var(--ck-highlight-pen-green)',
 							type: 'pen'
 						}
 					]

+ 6 - 6
packages/ckeditor5-highlight/tests/highlightui.js

@@ -96,12 +96,12 @@ describe( 'HighlightUI', () => {
 			const toolbar = dropdown.toolbarView;
 
 			expect( toolbar.items.map( item => item.iconView && item.iconView.fillColor ) ).to.deep.equal( [
-				'var(--ck-marker-yellow)',
-				'var(--ck-marker-green)',
-				'var(--ck-marker-pink)',
-				'var(--ck-marker-blue)',
-				'var(--ck-pen-red)',
-				'var(--ck-pen-green)',
+				'var(--ck-highlight-marker-yellow)',
+				'var(--ck-highlight-marker-green)',
+				'var(--ck-highlight-marker-pink)',
+				'var(--ck-highlight-marker-blue)',
+				'var(--ck-highlight-pen-red)',
+				'var(--ck-highlight-pen-green)',
 				undefined,
 				'',
 			] );