Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

T/1: Initial implementation of Highlight editing without UI. #2

Merged
merged 20 commits into from
Nov 10, 2017
Merged

Conversation

jodator
Copy link
Contributor

@jodator jodator commented Nov 7, 2017

Suggested merge commit message (convention)

Feature: Initial implementation of highlight editing. Closes ckeditor/ckeditor5#2597.


Additional information

This PR comes with changes in other packages branches:

Merge commit message for related branches:

  • ckeditor5: Feature: Introduce ckeditor5-highlight package.

Misc

  • The initial implementation comes with stubs for Highlight UI but without any implementation.
  • I've implemented highlight as simples as possible - hence no Markers were used in view - only <mark> elements.
  • I'm not sure if tests are not too simple (looking at other features).

@jodator jodator changed the title T/1 T/1: Initial implementation of Highlight editing without UI. Nov 7, 2017
@szymonkups szymonkups self-requested a review November 7, 2017 13:09
@szymonkups szymonkups removed their assignment Nov 7, 2017
* @observable
* @readonly
* @member {undefined|String} HighlightCommand#value
*/
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This gives some docs errors - it should be moved probably to the class constructor or use full module name.

import Command from '@ckeditor/ckeditor5-core/src/command';

/**
* The highlight command. It is used by the {@link module:highlight/highlight~HighlightEditing highlight feature}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gives some docs errors, probably wrong module in @link.

const data = editor.data;
const editing = editor.editing;

editor.config.define( 'highlight', [
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't this be defined inside the class constructor?

.for( data.viewToModel )
.fromElement( 'mark' )
.toAttribute( viewElement => {
const viewClassNames = [ ...viewElement.getClassNames() ];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This function could be simplified to:

const viewClassNames = [ ...viewElement.getClassNames() ];

for( const className of viewClassNames ) {
	if ( configuredClasses.indexOf( className ) > -1 ) {
		return { key: 'highlight', value: className };
	}
}

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Writing:

for( const className of viewElement.getClassNames() ) {}

We'd take advantage of generators and save extra ms ;)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ma2ciek 👏 yeah... I've disabled thinking apparently :D

* @property {String} title The user-readable title of the option.
* @property {String} color Color used for highlighter. Should be coherent with CSS class definition.
* @property {'marker'|'pen'} type The type of highlighter. Either "marker" - will use #color as background name
* of the view element that will be used to represent the model element in the view.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like pen option description is missing.

*
* Read more in {@link module:highlight/highlightediting~HighlightEditingConfig}.
*
* @member {module:highlight/highlightediting~HighlightEditingConfig} module:core/editor/editorconfig~EditorConfig#alignment
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

alignment => highlight

] );

// Allow highlight attribute on all elements
editor.document.schema.allow( { name: '$inline', attributes: 'highlight', inside: '$block' } );
Copy link
Contributor

@szymonkups szymonkups Nov 9, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Basic styles contains this workaround. It probably should be included here as well.

@szymonkups szymonkups merged commit 5c687cf into master Nov 10, 2017
@szymonkups szymonkups deleted the t/1 branch November 10, 2017 10:39
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Implement the Highlight feature
3 participants