Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve Matcher to allow matching attribute keys by regexp and unify API #9872

Closed
jacekbogdanski opened this issue Jun 14, 2021 · 0 comments · Fixed by #9694
Closed

Improve Matcher to allow matching attribute keys by regexp and unify API #9872

jacekbogdanski opened this issue Jun 14, 2021 · 0 comments · Fixed by #9694
Assignees
Labels
domain:v4-compatibility This issue reports a CKEditor 4 feature/option that's missing in CKEditor 5. type:improvement This issue reports a possible enhancement of an existing feature.

Comments

@jacekbogdanski
Copy link
Member

📝 Provide a description of the improvement

MatcherPattern should be extended with an option to match attribute key using RegExp. We should also unify patterns between attributes, styles, and classes, so the API is easier to use. Proposed changes using attributes example (they will:

// Match view element with any attribute value.
const pattern = {
	name: 'p',
	attributes: true
};

// Match view element which has matching attributes (String).
const pattern = {
	name: 'figure',
	attributes: 'title' // Match title attribute (can be empty).
};

// Match view element which has matching attributes (RegExp).
const pattern = {
	name: 'figure',
	attributes: /^data-.*$/ // Match attributes starting with `data-` e.g. `data-foo` with any value (can be empty).
};

// Match view element which has matching attributes (Object).
const pattern = {
	name: 'figure',
	attributes: {
		title: 'foobar',           // Match `title` attribute with 'foobar' value.
		alt: true,                 // Match `alt` attribute with any value (can be empty).
		'data-type': /^(jpg|png)$/ // Match `data-type` attribute with `jpg` or `png` value.
	}
};

// Match view element which has matching attributes (Array).
const pattern = {
	name: 'figure',
	attributes: [
		'title',    // Match `title` attribute (can be empty).
		/^data-*$/, // Match attributes starting with `data-` e.g. `data-foo` with any value (can be empty).
	]
};

// Match view element which has matching attributes (key-value-pairs).
const pattern = {
	name: 'input',
	attributes: [
		{
			key: 'type',                     // Match `type` as an attribute key.
			value: /^(text|number|date)$/ }, // Match `text`, `number` or `date` values.
		{
			key: /^data-.*$/,                // Match attributes starting with `data-` e.g. `data-foo`.
			value: true                      // Match any value (can be empty).
		}
	]
};

Some of the above patterns are already working but are not unified between attributes, styles, and classes. This improvement should also cover these cases.


If you'd like to see this improvement implemented, add a 👍 reaction to this post.

@jacekbogdanski jacekbogdanski added type:improvement This issue reports a possible enhancement of an existing feature. squad:compat domain:v4-compatibility This issue reports a CKEditor 4 feature/option that's missing in CKEditor 5. labels Jun 14, 2021
@jacekbogdanski jacekbogdanski added this to the iteration 44 milestone Jun 14, 2021
jacekbogdanski added a commit that referenced this issue Jun 14, 2021
Feature (engine): Improved engine view matcher with new pattern syntax allowing to match attribute keys using regular expressions. Unified pattern syntax between attributes, styles, and classes. Closes #9872.

Feature (engine): Added special `expand` option to `StylesMap.getStyleNames()` and view `Element.getStyleNames()` methods allowing to expand shorthand style properties.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
domain:v4-compatibility This issue reports a CKEditor 4 feature/option that's missing in CKEditor 5. type:improvement This issue reports a possible enhancement of an existing feature.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants