@ckeditor/ckeditor5-highlight - npm Package Compare versions

Comparing version 0.0.1 to 1.0.0-beta.1

package.json

 {
   "name": "@ckeditor/ckeditor5-highlight",
-  "version": "0.0.1",
+  "version": "1.0.0-beta.1",
   "description": "Highilght feature for CKEditor 5.",
@@ -10,16 +10,17 @@ "keywords": [
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^1.0.0-alpha.2",
-    "@ckeditor/ckeditor5-engine": "^1.0.0-alpha.2",
-    "@ckeditor/ckeditor5-ui": "^1.0.0-alpha.2"
+    "@ckeditor/ckeditor5-core": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-engine": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-ui": "^1.0.0-beta.1"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-block-quote": "^1.0.0-alpha.2",
-    "@ckeditor/ckeditor5-editor-classic": "^1.0.0-alpha.2",
-    "@ckeditor/ckeditor5-enter": "^1.0.0-alpha.2",
-    "@ckeditor/ckeditor5-heading": "^1.0.0-alpha.2",
-    "@ckeditor/ckeditor5-image": "^1.0.0-alpha.2",
-    "@ckeditor/ckeditor5-list": "^1.0.0-alpha.2",
-    "@ckeditor/ckeditor5-paragraph": "^1.0.0-alpha.2",
-    "@ckeditor/ckeditor5-typing": "^1.0.0-alpha.2",
-    "@ckeditor/ckeditor5-utils": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-block-quote": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-cloudservices": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-editor-classic": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-enter": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-heading": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-image": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-list": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-paragraph": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-typing": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-utils": "^1.0.0-beta.1",
     "eslint": "^4.15.0",
@@ -26,0 +27,0 @@ "eslint-config-ckeditor5": "^1.0.7",

src/highlight.js

@@ -48,3 +48,3 @@ /**
  *			title: 'Pink Marker',
- *			color: '#fc7999',
+ *			color: 'var(--ck-highlight-marker-pink)',
  *			type: 'marker'
@@ -56,4 +56,5 @@ *		}
  * @property {String} model The unique attribute value in the model.
- * @property {String} color The color used for the highlighter. It should match the `class` CSS definition.
- * The color is used in the user interface to represent the highlighter.
+ * @property {String} color The CSS var() used for the highlighter. The color is used in the user interface to represent the highlighter.
+ * There is possibility to use default color format like rgb, hex or hsl, but you need to care about color of `<mark>`
+ * by adding CSS classes definition.
  * @property {String} class The CSS class used on the `<mark>` element in the view. It should match the `color` setting.
@@ -92,8 +93,44 @@ * @property {'marker'|'pen'} type The type of highlighter:
  *		options: [
- *			{ model: 'yellowMarker', class: 'marker-yellow', title: 'Yellow marker', color: '#fdfd77', type: 'marker' },
- *			{ model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: '#63f963', type: 'marker' },
- *			{ model: 'pinkMarker', class: 'marker-pink', title: 'Pink marker', color: '#fc7999', type: 'marker' },
- *			{ model: 'blueMarker', class: 'marker-blue', title: 'Blue marker', color: '#72cdfd', type: 'marker' },
- *			{ model: 'redPen', class: 'pen-red', title: 'Red pen', color: '#e91313', type: 'pen' },
- *			{ model: 'greenPen', class: 'pen-green', title: 'Green pen', color: '#118800', 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'
+ *			}
  *		]
@@ -105,8 +142,29 @@ *
  *
- * **Note**: A style sheet with CSS classes is required for the configuration to work properly.
- * The highlight feature does not provide the actual styles by itself.
+ * **Note**: The highlight feature provides a style sheet with the CSS classes and corresponding colors defined
+ * as CSS variables.
  *
- * **Note**: It is recommended that the `color` value should correspond to the class in the content
- * style sheet. It represents the highlighter in the user interface of the editor.
+ *		:root {
+ *			--ck-highlight-marker-yellow: #fdfd77;
+ *			--ck-highlight-marker-green: #63f963;
+ *			--ck-highlight-marker-pink: #fc7999;
+ *			--ck-highlight-marker-blue: #72cdfd;
+ *			--ck-highlight-pen-red: #e91313;
+ *			--ck-highlight-pen-green: #118800;
+ *		}
  *
+ *		.marker-yellow { ... }
+ *		.marker-green { ... }
+ *		.marker-pink { ... }
+ *		.marker-blue { ... }
+ *		.pen-red { ... }
+ *		.pen-green { ... }
+ *
+ * **Note**: It is possible to define the `color` property directly as `rgba(R, G, B, A)`,
+ * `#RRGGBB[AA]` or `hsla(H, S, L, A)`. In such situation, the color will **only** apply to the UI of
+ * the editor and the `<mark>` elements in the content must be styled by custom classes provided by
+ * a dedicated style sheet.
+ *
+ * **Note**: It is recommended for the `color` property to correspond to the class in the content
+ * style sheet because it represents the highlighter in the user interface of the editor.
+ *
  *		ClassicEditor
@@ -120,3 +178,3 @@ *			.create( editorElement, {
  *							title: 'Pink Marker',
- *							color: '#fc7999',
+ *							color: 'var(--ck-highlight-marker-pink)',
  *							type: 'marker'
@@ -128,3 +186,3 @@ *						},
  *							title: 'Red Pen',
- *							color: '#e91313',
+ *							color: 'var(--ck-highlight-pen-red)',
  *							type: 'pen'
@@ -131,0 +189,0 @@ *						},

src/highlightcommand.js

@@ -87,2 +87,3 @@ /**
 						writer.setAttribute( 'highlight', highlighter, highlightRange );
+						writer.setSelectionAttribute( 'highlight', highlighter );
 					}
@@ -89,0 +90,0 @@ } else if ( highlighter ) {

src/highlightediting.js

@@ -31,8 +31,44 @@ /**
 			options: [
-				{ model: 'yellowMarker', class: 'marker-yellow', title: 'Yellow marker', color: '#fdfd77', type: 'marker' },
-				{ model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: '#63f963', type: 'marker' },
-				{ model: 'pinkMarker', class: 'marker-pink', title: 'Pink marker', color: '#fc7999', type: 'marker' },
-				{ model: 'blueMarker', class: 'marker-blue', title: 'Blue marker', color: '#72cdfd', type: 'marker' },
-				{ model: 'redPen', class: 'pen-red', title: 'Red pen', color: '#e91313', type: 'pen' },
-				{ model: 'greenPen', class: 'pen-green', title: 'Green pen', color: '#118800', 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'
+				}
 			]
@@ -39,0 +75,0 @@ } );

src/highlightui.js

@@ -12,3 +12,2 @@ /**
 
-import HighlightEditing from './highlightediting';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
@@ -28,7 +27,9 @@
  * The default Highlight UI plugin. It introduces:
- * * the `'highlightDropdown'` drop-down,
+ *
+ * * the `'highlight'` dropdown,
  * * `'removeHighlight'` and `'highlight:*'` buttons.
  *
  * The default configuration includes the following buttons:
- * * `'highlight:marker'`
+ *
+ * * `'highlight:yellowMarker'`
  * * `'highlight:greenMarker'`
@@ -78,9 +79,2 @@ * * `'highlight:pinkMarker'`
 	 */
-	static get requires() {
-		return [ HighlightEditing ];
-	}
-
-	/**
-	 * @inheritDoc
-	 */
 	static get pluginName() {
@@ -113,3 +107,3 @@ return 'HighlightUI';
 
-		this._addButton( 'removeHighlight', t( 'Remove highlighting' ), eraserIcon );
+		this._addButton( 'removeHighlight', t( 'Remove highlight' ), eraserIcon );
 	}
@@ -132,9 +126,3 @@
 			button.bind( 'isOn' ).to( command, 'value', value => value === option.model );
-
-			button.extendTemplate( {
-				attributes: {
-					style: `color: ${ option.color }`,
-					class: 'ck-highlight-button'
-				}
-			} );
+			button.iconView.fillColor = option.color;
 		}
@@ -197,3 +185,3 @@ }
 
-		componentFactory.add( 'highlightDropdown', locale => {
+		componentFactory.add( 'highlight', locale => {
 			const command = editor.commands.get( 'highlight' );
@@ -221,8 +209,2 @@ const dropdownView = createDropdown( locale, SplitButtonView );
 
-			splitButtonView.extendTemplate( {
-				attributes: {
-					class: 'ck-highlight-button'
-				}
-			} );
-
 			// Create buttons array.
@@ -247,11 +229,4 @@ const buttons = options.map( option => {
 			addToolbarToDropdown( dropdownView, buttons );
+			bindToolbarIconStyleToActiveColor( dropdownView );
 
-			bindIconStyleToColor( dropdownView );
-
-			dropdownView.extendTemplate( {
-				attributes: {
-					class: [ 'ck-highlight-dropdown' ]
-				}
-			} );
-
 			// Execute current action from dropdown's split button action button.
@@ -279,15 +254,6 @@ splitButtonView.on( 'execute', () => {
 // Extends split button icon style to reflect last used button style.
-function bindIconStyleToColor( dropdownView ) {
+function bindToolbarIconStyleToActiveColor( dropdownView ) {
 	const actionView = dropdownView.buttonView.actionView;
 
-	const bind = actionView.bindTemplate;
-
-	// Color will propagate to iconView.
-	actionView.extendTemplate( {
-		attributes: {
-			style: bind.to( 'color', color => `color:${ color }` )
-		}
-	} );
-
-	actionView.bind( 'color' ).to( dropdownView.buttonView, 'color' );
+	actionView.iconView.bind( 'fillColor' ).to( dropdownView.buttonView, 'color' );
 }
@@ -294,0 +260,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39929

increased by53.91%

Number of package files

22

increased by100%

Lines of code

626

increased by19.01%

Worsened metrics

Dev dependency count

14

increased by7.69%

Dependency changes

• Updated@ckeditor/ckeditor5-core@^1.0.0-beta.1

• Updated@ckeditor/ckeditor5-engine@^1.0.0-beta.1

• Updated@ckeditor/ckeditor5-ui@^1.0.0-beta.1