This repository has been archived by the owner on Jun 26, 2020. It is now read-only.
T/3: Highlight UI Implementation #6
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| <style> | ||
| .marker { | ||
| background-color: #ffff66; | ||
| } | ||
|
|
||
| .marker-green { | ||
| background-color: #66ff00; | ||
| } | ||
|
|
||
| .marker-pink { | ||
| background-color: #ff6fff; | ||
| } | ||
|
|
||
| .pen-red { | ||
| background-color: transparent; | ||
| color: #ff2929; | ||
| } | ||
|
|
||
| .pen-blue { | ||
| background-color: transparent; | ||
| color: #0091ff; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| /** | ||
| * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved. | ||
| * For licensing, see LICENSE.md. | ||
| */ | ||
|
|
||
| /* globals window */ | ||
|
|
||
| import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor'; | ||
|
|
||
| import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight'; | ||
|
|
||
| ClassicEditor.build.plugins.push( Highlight ); | ||
|
|
||
| window.ClassicEditor = ClassicEditor; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| <div id="snippet-custom-highlight-options"> | ||
| <p> | ||
| Here are defined highlighters: <mark class="marker-green">green one</mark> and <mark class="pen-blue">blue one</mark>. | ||
| </p> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| /** | ||
| * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved. | ||
| * For licensing, see LICENSE.md. | ||
| */ | ||
|
|
||
| /* globals ClassicEditor, console, window, document */ | ||
| ClassicEditor | ||
| .create( document.querySelector( '#snippet-custom-highlight-options' ), { | ||
| toolbar: { | ||
| items: [ | ||
| 'headings', '|', 'bulletedList', 'numberedList', 'highlightDropdown', 'undo', 'redo' | ||
| ], | ||
| viewportTopOffset: 60 | ||
| }, | ||
| highlight: { | ||
| options: [ | ||
| { model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: '#66ff00', type: 'marker' }, | ||
| { model: 'bluePen', class: 'pen-blue', title: 'Blue pen', color: '#0091ff', type: 'pen' } | ||
| ] | ||
| } | ||
| } ) | ||
| .then( editor => { | ||
| window.editor = editor; | ||
| } ) | ||
| .catch( err => { | ||
| console.error( err.stack ); | ||
| } ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| <div id="snippet-highlight-buttons"> | ||
| <h2>Highlight feature sample.</h2> | ||
|
|
||
| <p> | ||
| Here are some markers: | ||
| <mark class="marker">yellow one</mark>, <mark class="marker-pink">pink one</mark> and <mark class="marker-green">green one</mark>. | ||
| </p> | ||
| <p> | ||
| Here are some pens: | ||
| <mark class="pen-red">red pen</mark> and <mark class="pen-blue">blue one</mark>. | ||
| </p> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| /** | ||
| * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved. | ||
| * For licensing, see LICENSE.md. | ||
| */ | ||
|
|
||
| /* globals ClassicEditor, console, window, document */ | ||
|
|
||
| ClassicEditor | ||
| .create( document.querySelector( '#snippet-highlight-buttons' ), { | ||
| toolbar: { | ||
| items: [ | ||
| 'headings', '|', 'highlight:marker', 'highlight:greenMarker', 'highlight:pinkMarker', 'highlight:bluePen', | ||
| 'highlight:redPen', 'removeHighlight', '|', 'undo', 'redo' | ||
| ], | ||
| viewportTopOffset: 60 | ||
| } | ||
| } ) | ||
| .then( editor => { | ||
| window.editor = editor; | ||
| } ) | ||
| .catch( err => { | ||
| console.error( err.stack ); | ||
| } ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| <div id="snippet-highlight"> | ||
| <h2>Highlight feature sample.</h2> | ||
|
|
||
| <p> | ||
| Here are some markers: | ||
| <mark class="marker">yellow one</mark>, <mark class="marker-pink">pink one</mark> and <mark class="marker-green">green one</mark>. | ||
| </p> | ||
| <p> | ||
| Here are some pens: | ||
| <mark class="pen-red">red pen</mark> and <mark class="pen-blue">blue one</mark>. | ||
| </p> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| /** | ||
| * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved. | ||
| * For licensing, see LICENSE.md. | ||
| */ | ||
|
|
||
| /* globals ClassicEditor, console, window, document */ | ||
|
|
||
| ClassicEditor | ||
| .create( document.querySelector( '#snippet-highlight' ), { | ||
| toolbar: { | ||
| items: [ | ||
| 'headings', '|', 'bulletedList', 'numberedList', 'highlightDropdown', 'undo', 'redo' | ||
| ], | ||
| viewportTopOffset: 60 | ||
| } | ||
| } ) | ||
| .then( editor => { | ||
| window.editor = editor; | ||
| } ) | ||
| .catch( err => { | ||
| console.error( err.stack ); | ||
| } ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| --- | ||
| category: api-reference | ||
| --- | ||
|
|
||
| # CKEditor 5 highlight feature | ||
|
|
||
| [](https://www.npmjs.com/package/@ckeditor/ckeditor5-highlight) | ||
|
|
||
| This package implements the highlight feature for CKEditor 5. | ||
|
|
||
| ## Documentation | ||
|
|
||
| See the {@link features/highlight Highlight feature} guide and the {@link module:highlight/highlight~Highlight} plugin documentation. | ||
|
|
||
| ## Installation | ||
|
|
||
| ```bash | ||
| npm install --save @ckeditor/ckeditor5-highlight | ||
| ``` | ||
|
|
||
| ## Contribute | ||
|
|
||
| The source code of this package is available on GitHub in https://github.com/ckeditor/ckeditor5-highlight. | ||
|
|
||
| ## External links | ||
|
|
||
| * [`@ckeditor/ckeditor5-highlight` on npm](https://www.npmjs.com/package/@ckeditor/ckeditor5-highlight) | ||
| * [`ckeditor/ckeditor5-highlight` on GitHub](https://github.com/ckeditor/ckeditor5-highlight) | ||
| * [Issue tracker](https://github.com/ckeditor/ckeditor5-highlight/issues) | ||
| * [Changelog](https://github.com/ckeditor/ckeditor5-highlight/blob/master/CHANGELOG.md) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,138 @@ | ||
| --- | ||
| title: Highlight | ||
| category: features | ||
| --- | ||
|
|
||
| {@snippet features/build-highlight-source} | ||
|
|
||
| The {@link module:highlight/highlight~Highlight} feature offers a text marking tools that help content authors speed up their work, e.g. reviewing content or marking it for the future reference. It uses inline `<marker>` elements in the view, supports both markers (background color) and pens (text color), and comes with a flexible configuration. | ||
|
|
||
| ## Demo | ||
|
|
||
| {@snippet features/highlight} | ||
|
|
||
| ## Configuring the highlight options | ||
|
|
||
| It is possible to configure which highlight options are supported by the editor. | ||
| You can use the {@link module:highlight/highlight~HighlightConfig#options `highlight.options`} configuration and define your own highlight styles. | ||
|
|
||
| For example, the following editor supports only two styles (a green marker and a blue pen): | ||
|
|
||
| ```js | ||
| ClassicEditor | ||
| .create( document.querySelector( '#editor' ), { | ||
| highlight: { | ||
| options: [ | ||
| { | ||
| model: 'greenMarker', | ||
| class: 'marker-green', | ||
| title: 'Green marker', | ||
| color: '#66ff00', | ||
| type: 'marker' | ||
| }, | ||
| { | ||
| model: 'bluePen', | ||
| class: 'pen-blue', | ||
| title: 'Blue pen', | ||
| color: '#0091ff', | ||
| type: 'pen' | ||
| } | ||
| ] | ||
| }, | ||
| toolbar: [ | ||
| 'headings', '|', 'bulletedList', 'numberedList', 'highlightDropdown', 'undo', 'redo' | ||
| ] | ||
| } ) | ||
| .then( ... ) | ||
| .catch( ... ); | ||
| ``` | ||
|
|
||
| {@snippet features/custom-highlight-options} | ||
|
|
||
| Instead of using the (default) `highlightDropdown`, the feature also supports a configuration with separate buttons directly in the toolbar: | ||
|
|
||
| ```js | ||
| ClassicEditor | ||
| .create( document.querySelector( '#editor' ), { | ||
| toolbar: { | ||
| items: [ | ||
| 'headings', '|', 'highlight:marker', 'highlight:greenMarker', | ||
| 'highlight:pinkMarker', 'highlight:bluePen', | ||
| 'highlight:redPen', 'removeHighlight', 'undo', 'redo' | ||
| ] | ||
| } | ||
| } ) | ||
| .then( ... ) | ||
| .catch( ... ); | ||
| ``` | ||
|
|
||
| {@snippet features/highlight-buttons} | ||
|
|
||
| ## Installation | ||
|
|
||
| To add this feature to your editor install the [`@ckeditor/ckeditor5-highlight`](https://www.npmjs.com/package/@ckeditor/ckeditor5-highlight) package: | ||
|
|
||
| ``` | ||
| npm install --save @ckeditor/ckeditor5-highlight | ||
| ``` | ||
|
|
||
| And add it to your plugin list and the toolbar configuration: | ||
|
|
||
| ```js | ||
| import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight'; | ||
|
|
||
| ClassicEditor | ||
| .create( document.querySelector( '#editor' ), { | ||
| plugins: [ Highlight, ... ], | ||
| toolbar: [ 'highlightDropdown', ... ] | ||
| } ) | ||
| .then( ... ) | ||
| .catch( ... ); | ||
| ``` | ||
|
|
||
| <info-box info> | ||
| Read more about {@link builds/guides/development/installing-plugins installing plugins}. | ||
| </info-box> | ||
|
|
||
| ## Common API | ||
|
|
||
| The {@link module:highlight/highlight~Highlight} plugin registers: | ||
|
|
||
| * The `'highlightDropdown'` dropdown, | ||
| * The {@link module:highlight/highlightcommand~HighlightCommand `'highlight'`} command. | ||
|
|
||
| The number of options and their names correspond to the {@link module:highlight/highlight~HighlightConfig#options `highlight.options`} configuration option. | ||
|
|
||
| You can change the highlight of the current selection by executing the command with a desired value: | ||
|
|
||
| ```js | ||
| editor.execute( 'highlight', { value: 'marker' } ); | ||
| ``` | ||
|
|
||
| The `value` corresponds to the `model` property in configuration object. For the default configuration: | ||
| ```js | ||
| highlight.options = [ | ||
|
There was a problem hiding this comment. I think we need to work on the colors because AFAIR the has been chosen without any deeper research. |
||
| { model: 'marker', class: 'marker', title: 'Marker', color: '#ffff66', type: 'marker' }, | ||
|
There was a problem hiding this comment. Why is this marker named using a different convention than the others? |
||
| { model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: '#66ff00', type: 'marker' }, | ||
| { model: 'pinkMarker', class: 'marker-pink', title: 'Pink marker', color: '#ff6fff', type: 'marker' }, | ||
| { model: 'redPen', class: 'pen-red', title: 'Red pen', color: '#ff2929', type: 'pen' }, | ||
| { model: 'bluePen', class: 'pen-blue', title: 'Blue pen', color: '#0091ff', type: 'pen' } | ||
| ] | ||
| ``` | ||
|
|
||
| the `highlight` command will accept the corresponding strings as values: | ||
| - `'marker'` – available as a `'highlight:marker'` button. | ||
| - `'greenMarker'` – available as a `'highlight:greenMarker'` button. | ||
| - `'pinkMarker'` – available as a `'highlight:pinkMarker'` button. | ||
| - `'redPen'` – available as a `'highlight:redPen'` button. | ||
| - `'bluePen'` – available as a `'highlight:bluePen'` button. | ||
|
|
||
| passing an empty `value` will remove any `highlight` from the selection: | ||
|
|
||
| ```js | ||
| editor.execute( 'highlight' ); | ||
| ``` | ||
|
|
||
| ## Contribute | ||
|
|
||
| The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-highlight. | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since the highlight feature dropdown uses a basic
ToolbarView, I wonder if we could simply make the highlight configuration compatible with the toolbar config. I mean here a support for toolbar separators (|), that developers may want to use to group the buttons if only to separate pens from markers. WDYT?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Very interesting idea. How would the config need to look then?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Mixed-up with the options:
Or as a separate property, which makes more sense to me because it doesn't mix up the content logic and the UI.
In such situation, the order in
optionsdoesn't matter. We also provide a defaulttoolbarlayout, when no specified (and the default istoolbar: [ all options, '|', 'removeHighlight' ])There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@oleq AFAIR that was an idea to have UI configurable using button instances (toolbarDropdown) and it should have issue for that. It is also doable the same way for alignment.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@oleq & @Reinmar : https://github.com/ckeditor/ckeditor5-ui/issues/322 & https://github.com/ckeditor/ckeditor5-heading/issues/74#issuecomment-305224952.
The way how alignment & highlight features works (buttons + dropdown) was inspired by that issue & comment - so thus enables it pretty straightforward.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ps> I'd for doing this as a follow up just to see this feature live ;)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
But I don't think that https://github.com/ckeditor/ckeditor5-ui/issues/322 has anything to do with this. Here, in this specific feature, there's more than just wrapping buttons into a dropdown, am I right? The state of the button, the color of the pen, etc, has some custom bindings.