Refactor codeBlockButton Plugins#2625
Merged
Merged
Conversation
Refactored logic to insert buttons only if pre element contains the code element. Scoped CSS rules similarly to minimized side effects Modularized CSS rules to be included only if plugin is enabled.
AgentHagu
reviewed
Mar 8, 2025
Tim-Siu
approved these changes
Mar 8, 2025
Tim-Siu
left a comment
Contributor
There was a problem hiding this comment.
This PR successfully addresses the problems spotted in #2624. It also refactors the code block button CSS by moving it from the general stylesheet (markbind.css) to a dedicated CSS file (codeBlockButtons.css).
Improvements:
- Addressed #2624 through Improved selector: Using
:has(.function-btn-container)is more specific than the previous selector. This will make sure code block plugin does not affect other plugins that uses<pre>. - Better organization: Moving CSS to a dedicated file improves modularity (and potentially performance)
Suggestions:
Actually don't have any suggestion.
The improved conditional check node.children?.some(child => child.name === 'code') is good. I can't think of any corner case.
Thanks @AgentHagu for carefully reviewing the code and @gerteck for detailed explanation.
The changes look good!
14 tasks
lhw-1
approved these changes
Mar 9, 2025
lhw-1
left a comment
Contributor
There was a problem hiding this comment.
LGTM. The changes make sense as per #2624 and possible concerns were addressed by @AgentHagu and @gerteck. Thanks @gerteck for the PR!
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
What is the purpose of this pull request?
Overview of changes:
Refactored logic to insert buttons only if pre element contains the code element. Scoped CSS rules (specifically, for
<pre/>element to minimize side effects. Modularized CSS rules to be included only if plugin is enabled.Refer to #1043 #1668 to check CSS rules that were added for the code block buttons.
Fixes #2624
Anything you'd like to highlight/discuss:
Testing instructions:
See #2624
Enable relevant plugins, and put some sample code into index.md:
Buttons should not show up beside the cat. It should only show up for the code block above it.
Proposed commit message: (wrap lines at 72 characters)
Refactor codeBlockButton Plugins
Refactored logic to insert plugin buttons only if
pre element contains the code element as per CommonMark
spec for fenced code blocks. Scoped CSS rules for pre element
to minimize side effects. Modularized previously global button
CSS rules to be included only if plugin is enabled.
Checklist: ☑️
Reviewer checklist:
Indicate the SEMVER impact of the PR:
At the end of the review, please label the PR with the appropriate label:
r.Major,r.Minor,r.Patch.Breaking change release note preparation (if applicable):