Prism.js match-braces plugin support

[ozonosphere]

Hi

Is there a way to add match-braces plugin support for code-input? Thanks

[WebCoder49]

Sorry for the very long delay. The match braces plugin relies on detecting when the user hovers over the syntax-highlighted <pre><code> element, which will never happen with <code-input> by default since it places an editable but transparent <textarea> element over the <pre><code> element, covering it up for pointer events.

I expect that the rainbow braces part of match-braces does work with <code-input> but the hover part does not. Please let me know if this is not the case.

You have 2 main options for how to implement match-braces with <code-input>, and both could be implemented as <code-input> plugins:

1. Make the effects on hover occur when a key (e.g. Ctrl) is held down and the brace is hovered over. Implementation: Only when the key is pressed down, JavaScript would be used to (a) set CSS pointer-events: none; on the <textarea> and also (b) remove HTML inert attribute from the <pre><code> element.
2. Make the effects on hover occur when the token (bracket here) has the text editing caret/cursor on it. Implementation: Code from the findAndReplace plugin could be used to identify the affected tokens from the selectionStart and selectionEnd JS properties of the <textarea>. After this, JavaScript could be used to trigger the match-braces functionality.

Please could you let me know which of these would suit your use-case better? I will then implement the one you choose when I have time.

[WebCoder49]

@ozonosphere I just realised I didn't @ mention you above. Please let me know your choice when you have time.

[ozonosphere]

@WebCoder49 Hi Thanks very much for the reply

Both options seem to be good for the purpose, though No. 2 sounds more like what you would expect initially from general braces matching plugins..

[WebCoder49]

@ozonosphere For your information, I'm working on this right now. There are a few small bugs remaining in my local code, but once I've fixed them I'll commit, push, and release, and let you know how to use code-input with prism-match-braces!

[ozonosphere]

Thanks, much appreciated

[WebCoder49]

@ozonosphere I've finally released this!

To add match-braces support to code-input, you need:

• The match-braces class applied to the code-input element or a parent element (like Prism.js' plugin already needs).
• A slightly modified copy of Prism.js' match-braces plugin (so JavaScript callbacks can have the same effect as hovering) (Source code).
• code-input's new SelectTokenCallbacks plugin, instantiated with the modified-match-braces callbacks like this.

I have implemented these into the Prism.js tester file (Source, Online Demo).

Thank you so much for your patience - I've been very busy for the past few months but should probably have developed my incomplete plugin it out in the open to allow more collaborative development.

[ozonosphere]

@WebCoder49 this looks awesome. I ll go and have a play.

Thanks very much for your time and work. I wish I had more knowledge and time to help .