[#48370] - feat: add `selector` option for search term highlight script
- Pending
- Medium
- Build: 6.3-dev
- # 48370
- Diff
- hendrikbehncke:js-highlight-selector
User tests: Successful: Unsuccessful:
Pull Request resolves # .
- I read the Generative AI policy and my contribution is either not created with the help of AI or is compatible with the policy and GNU/GPL 2 or later.
Summary of Changes
Adds a configurable CSS selector to the System - Highlight plugin.
When a selector is configured, search terms are highlighted within the first element matching that selector. The plugin no longer wraps the component buffer in the a .js-highlight div, allowing templates to control the highlighting scope without introducing an extra wrapper element.
The existing .js-highlight wrapper behaviour remains unchanged when no selector is configured. Invalid selectors are handled with a browser-console warning.
Testing Instructions
- Enable the System - Highlight plugin.
- Edit the plugin and leave CSS Selector empty.
- Open a frontend page with a highlight parameter, for example:
index.php?option=com_content&view=article&id=&highlight=WyJKb29tbGEiXQ%3D%3D - Confirm occurrences of Joomla are highlighted and that the component output is wrapped in
<div class="js-highlight">. - In the plugin settings, set CSS Selector to a selector for an element that contains the page content, for example main or #main.
- Reload the same URL.
- Confirm matching terms are highlighted inside the selected element and no .js-highlight wrapper is added around the component buffer.
Actual result BEFORE applying this Pull Request
The System - Highlight plugin always wraps the complete component buffer in a <div class="js-highlight"> element. Templates cannot choose a more specific highlighting target or avoid this additional wrapper.
Expected result AFTER applying this Pull Request
Administrators can configure a CSS selector to define the element in which search terms are highlighted. With a selector configured, the component buffer remains unmodified. Leaving the option empty preserves the existing .js-highlight wrapper behaviour.
Link to documentations
Please select:
-
Documentation link for guide.joomla.org: TODO
-
No documentation changes for guide.joomla.org needed
-
Pull Request link for manual.joomla.org: TODO
-
No documentation changes for manual.joomla.org needed
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Administration Language & Strings JavaScript NPM Change Front End Plugins |
I am confused with what you are trying to do here. A template can already change the markup of a search term when it is highlighted
Actually I have no idea at all what that plugin does
Currently the Highlight plugin always wraps the output in a <div class="js-highlight"> element.
Not only on the search results page but also on the single article views and the rendered markup changes when the url is opened with the &highlight= parameter.
With this PR there is an option to specify a selector the highlight.js script will work with. Similar to the jooa11y plugin where you also can configure a selector.
Yes it wraps the entire output in a div with js-highlight but it does nothing. The styling of the highlight is just the css I showed and disabling that plugin doesnt have any impact on the search highlighting
Yes it wraps the entire output in a div with js-highlight but it does nothing. The styling of the highlight is just the css I showed and disabling that plugin doesnt have any impact on the search highlighting I see now that the plugin is required for highlighting on the subsequent individual article
Yes it wraps the entire output in a div with js-highlight but it does nothing. The styling of the highlight is just the css I showed and disabling that plugin doesnt have any impact on the search highlighting I see now that the plugin is required for highlighting on the subsequent individual article
I still dont see the reason for the changes in this PR. What am I missing?
Yes it wraps the entire output in a div with js-highlight but it does nothing on the results page. The styling of the highlight is just the css I showed and disabling that plugin doesnt have any impact on the search highlighting I see now that the plugin is required for highlighting on the subsequent individual article
I still dont see the reason for the changes in this PR. What am I missing?
I am confused with what you are trying to do here. A template can already change the markup of a search term when it is highlighted