Commit 51c2c9ab authored by Benni Mack's avatar Benni Mack
Browse files

[BUGFIX] Re-add highlighting of filter term in Svg Tree

This change re-adds the highlighting of filter
results in the Svg Trees, which was present
before in the Page Tree before it was built on SVG.

Due to the nature of SVG, it is rather complicated
to color the actual background of the text than the
text itself (using <tspan>), but still, the highlighting
is IMHO better than having no highlighting.

Resolves: #87743
Releases: master, 10.4
Change-Id: Ie37173149c8f9388194e63a07ae89eb2fc774f30
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/68835

Tested-by: default avatarTYPO3com <noreply@typo3.com>
Tested-by: Oliver Bartsch's avatarOliver Bartsch <bo@cedev.de>
Tested-by: Richard Haeser's avatarRichard Haeser <richard@richardhaeser.com>
Reviewed-by: Oliver Bartsch's avatarOliver Bartsch <bo@cedev.de>
Reviewed-by: Richard Haeser's avatarRichard Haeser <richard@richardhaeser.com>
parent 5c7cc33e
......@@ -2,6 +2,7 @@ $svgColors: (
border: #d7d7d7,
lines: #ddd,
nodeSelectedBg: #fff,
nodeHighlightText: #0078e6,
nodeOverBg: #f2f2f2,
dragOverBg: #d7e4f1,
dragOverBorder: transparent,
......@@ -301,6 +302,13 @@ $svgColors: (
}
}
.node-name {
.node-highlight-text {
fill: map_get($svgColors, nodeHighlightText);
font-weight: 700;
}
}
.node-edit {
position: absolute;
top: 0;
......
......@@ -481,7 +481,7 @@ export class SvgTree extends LitElement {
})
.attr('transform', this.getNodeTransform)
.select('.node-name')
.text(this.getNodeLabel);
.html((node: TreeNode) => this.getNodeLabel(node));
nodes
.select('.chevron')
......@@ -804,7 +804,17 @@ export class SvgTree extends LitElement {
}
protected getNodeLabel(node: TreeNode): string {
return (node.prefix || '') + node.name + (node.suffix || '');
let label = (node.prefix || '') + node.name + (node.suffix || '');
// make a text node out of it, and strip out any HTML (this is because the return value uses html()
// instead of text() which is needed to avoid XSS in a page title
const labelNode = document.createElement('div');
labelNode.textContent = label;
label = labelNode.innerHTML;
if (this.searchTerm) {
const regexp = new RegExp(this.searchTerm, 'gi');
label = label.replace(regexp, '<tspan class="node-highlight-text">$&</tspan>');
}
return label;
}
protected getNodeClass(node: TreeNode): string {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment