Skip to content

Conversation

@gerteck
Copy link
Member

@gerteck gerteck commented Mar 8, 2025

What is the purpose of this pull request?

  • Documentation update
  • Bug fix
  • Feature addition or enhancement
  • Code maintenance
  • DevOps
  • Improve developer experience
  • Others, please explain:

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:

## Test

[`][`][`]js 
console.log('hello world');
[`][`][`]

<pre>
   /\_/\
  ( o.o )
   > ^ <
</pre>

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: ☑️

  • Updated the documentation for feature additions and enhancements
  • Added tests for bug fixes or features
  • Linked all related issues
  • No unrelated changes

Reviewer checklist:

Indicate the SEMVER impact of the PR:

  • Major (when you make incompatible API changes)
  • Minor (when you add functionality in a backward compatible manner)
  • Patch (when you make backward compatible bug fixes)

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):

  • To be included in the release note for any feature that is made obsolete/breaking

Give a brief explanation note about:

  • what was the old feature that was made obsolete
  • any replacement feature (if any), and
  • how the author should modify his website to migrate from the old feature to the replacement feature (if possible).

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.
@gerteck gerteck requested review from Incogdino, Tim-Siu and lhw-1 March 8, 2025 04:26
Copy link
Contributor

@Tim-Siu Tim-Siu left a comment

Choose a reason for hiding this comment

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

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:

  1. 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>.
  2. 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!

Copy link
Contributor

@lhw-1 lhw-1 left a comment

Choose a reason for hiding this comment

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

LGTM. The changes make sense as per #2624 and possible concerns were addressed by @AgentHagu and @gerteck. Thanks @gerteck for the PR!

@lhw-1 lhw-1 added the r.Patch Version resolver: increment by 0.0.1 label Mar 9, 2025
@lhw-1 lhw-1 merged commit 8c9de42 into MarkBind:master Mar 9, 2025
13 of 16 checks passed
@gerteck gerteck mentioned this pull request Mar 10, 2025
13 tasks
@lhw-1 lhw-1 added this to the v5.6.0 milestone Mar 13, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

r.Patch Version resolver: increment by 0.0.1

Projects

None yet

Development

Successfully merging this pull request may close these issues.

codeBlockCopyButton and codeBlockWrapButtons Plugins Side Effects

4 participants