Enhanced Parenthizing or Bracketing in Markdown Editor #1638

New Issue

OVERLORD · 2026-02-05T01:28:46+03:00

OVERLORD commented

2026-02-05 01:28:46 +03:00

Originally created by @paulkernstock on GitHub (Apr 8, 2020).

Most recent editors or IDEs implement the use of parentheses and brackets in a very nice way, for example:

If the user opens a bracket, the editor adds the closing bracket behind the caret
If the user selects text and types in an opening bracket, the selection remains and is enclosed with brackets

Could this be implemented into the the markdown editor?

Originally created by @paulkernstock on GitHub (Apr 8, 2020). Most recent editors or IDEs implement the use of parentheses and brackets in a very nice way, for example: - If the user opens a bracket, the editor adds the closing bracket behind the caret - If the user selects text and types in an opening bracket, the selection remains and is enclosed with brackets Could this be implemented into the the markdown editor?

OVERLORD closed this issue

2026-02-05 01:28:47 +03:00

OVERLORD commented

2026-02-05 01:28:52 +03:00

@ssddanbrown commented on GitHub (Apr 9, 2020):

Hi @paulkernstock,
Am I right in thinking this demo contains all the functionality you're after?:
https://codemirror.net/demo/closebrackets.html

@ssddanbrown commented on GitHub (Apr 9, 2020): Hi @paulkernstock, Am I right in thinking this demo contains all the functionality you're after?: https://codemirror.net/demo/closebrackets.html

OVERLORD commented

2026-02-05 01:28:57 +03:00

@paulkernstock commented on GitHub (Apr 11, 2020):

Hi @ssddanbrown, unfortunately I am not adept enough in JS/CodeMirror to tell. :( The demo shows a "Grid" class/function with methods for... what exactly?

Thanks for helping me along! Bookstack is a very nice piece of software.

@paulkernstock commented on GitHub (Apr 11, 2020): Hi @ssddanbrown, unfortunately I am not adept enough in JS/CodeMirror to tell. :( The demo shows a "Grid" class/function with methods for... what exactly? Thanks for helping me along! Bookstack is a very nice piece of software.

OVERLORD commented

2026-02-05 01:29:00 +03:00

@ssddanbrown commented on GitHub (Apr 11, 2020):

Hi @paulkernstock,
That's okay, I just wanted to see if the bracket functionality was the same as what you were after.

I'm not sure if this is something I want to include by default, as it could affect the current flow of existing users, and I've generally never seen auto-close for markdown input outside of code-editors/ide's.

I've had a play and it's possible to unofficially dynamically load in this functionality using some editor events we expose:

<script>
	window.addEventListener('editor-markdown::setup', event => {
		// Get the editor and global codemirror instances
		const cmInstance = event.detail.codeMirrorInstance;
		window.CodeMirror = cmInstance.__proto__.constructor;

		// Create plugin script
		const version = window.CodeMirror.version;
		const pluginScript = document.createElement('script');
		pluginScript.src = `https://cdnjs.cloudflare.com/ajax/libs/codemirror/${version}/addon/edit/closebrackets.min.js`;
		// Update our existing codemirror instance on plugin load
		pluginScript.onload = () => {
			cmInstance.setOption('autoCloseBrackets', true)
			cmInstance.refresh();
		}

		// Add our plugin to the page
		document.head.append(pluginScript);
	});
</script>

If you copy and paste the above into your "Custom HTML Head Content" setting in BookStack than that should enable this functionality. Note, This does load a plugin for the editor from a CDN.

@ssddanbrown commented on GitHub (Apr 11, 2020): Hi @paulkernstock, That's okay, I just wanted to see if the bracket functionality was the same as what you were after. I'm not sure if this is something I want to include by default, as it could affect the current flow of existing users, and I've generally never seen auto-close for markdown input outside of code-editors/ide's. I've had a play and it's possible to unofficially dynamically load in this functionality using some editor events we expose: ```html <script> window.addEventListener('editor-markdown::setup', event => { // Get the editor and global codemirror instances const cmInstance = event.detail.codeMirrorInstance; window.CodeMirror = cmInstance.__proto__.constructor; // Create plugin script const version = window.CodeMirror.version; const pluginScript = document.createElement('script'); pluginScript.src = `https://cdnjs.cloudflare.com/ajax/libs/codemirror/${version}/addon/edit/closebrackets.min.js`; // Update our existing codemirror instance on plugin load pluginScript.onload = () => { cmInstance.setOption('autoCloseBrackets', true) cmInstance.refresh(); } // Add our plugin to the page document.head.append(pluginScript); }); </script> ``` If you copy and paste the above into your "Custom HTML Head Content" setting in BookStack than that should enable this functionality. Note, This does load a plugin for the editor from a CDN.

OVERLORD commented

2026-02-05 01:29:04 +03:00

@paulkernstock commented on GitHub (Apr 11, 2020):

@ssddanbrown You're right, GitHub/GitLab don't have this feature, as far as I know. I missed it there as well, and maybe I'm not the only one.

Anyways, thanks for your proposal, unfortunately it doesn't work as expected on my instance (v0.27.4). The header entry is properly placed and appearing after a refresh but neither brackets, parentheses nor curly brackets are auto-closed. When I enter the editor view of a page, I noticed there is an error happening in the console, which wasn't there before:

TypeError: e is null (app.js:27:397068)
    setupSearchBox https://[my-domain]/dist/app.js?version=v0.27.4:27
    Ke https://[my-domain]/dist/app.js?version=v0.27.4:27
    Qe https://[my-domain]/dist/app.js?version=v0.27.4:27
    Je https://[my-domain]/dist/app.js?version=v0.27.4:27
    <anonym> https://[my-domain]/dist/app.js?version=v0.27.4:27
    n https://[my-domain]/dist/app.js?version=v0.27.4:1
    <anonym> https://[my-domain]/dist/app.js?version=v0.27.4:1
    <anonym> https://[my-domain]/dist/app.js?version=v0.27.4:1

@paulkernstock commented on GitHub (Apr 11, 2020): @ssddanbrown You're right, GitHub/GitLab don't have this feature, as far as I know. I missed it there as well, and maybe I'm not the only one. Anyways, thanks for your proposal, unfortunately it doesn't work as expected on my instance (v0.27.4). The header entry is properly placed and appearing after a refresh but neither brackets, parentheses nor curly brackets are auto-closed. When I enter the editor view of a page, I noticed there is an error happening in the console, which wasn't there before: ``` TypeError: e is null (app.js:27:397068) setupSearchBox https://[my-domain]/dist/app.js?version=v0.27.4:27 Ke https://[my-domain]/dist/app.js?version=v0.27.4:27 Qe https://[my-domain]/dist/app.js?version=v0.27.4:27 Je https://[my-domain]/dist/app.js?version=v0.27.4:27 <anonym> https://[my-domain]/dist/app.js?version=v0.27.4:27 n https://[my-domain]/dist/app.js?version=v0.27.4:1 <anonym> https://[my-domain]/dist/app.js?version=v0.27.4:1 <anonym> https://[my-domain]/dist/app.js?version=v0.27.4:1 ```

OVERLORD commented

2026-02-05 01:29:10 +03:00

@paulkernstock commented on GitHub (Apr 11, 2020):

I'll have to correct myself: I reverted the custom header entry and the error on the editor view remains. Seems it was there unnoticed all along.

@paulkernstock commented on GitHub (Apr 11, 2020): I'll have to correct myself: I reverted the custom header entry and the error on the editor view remains. Seems it was there unnoticed all along.

OVERLORD commented

2026-02-05 01:29:12 +03:00

@ssddanbrown commented on GitHub (Apr 11, 2020):

@paulkernstock Yeah, that error is unrelated and I think is fixed for the next release.

My code above will only work on a BookStack version greater than v0.28.0, since that's when we added the editor events the code is using.

@ssddanbrown commented on GitHub (Apr 11, 2020): @paulkernstock Yeah, that error is unrelated and I think is fixed for the next release. My code above will only work on a BookStack version greater than v0.28.0, since that's when we added the editor events the code is using.

OVERLORD commented

2026-02-05 01:29:14 +03:00

@ssddanbrown commented on GitHub (Apr 25, 2020):

I'll assume the above workaround has been successful so I'll close this off. If you're still having issues with it on the latest version of BookStack feel free to comment here or open a new issue referencing this one.

@ssddanbrown commented on GitHub (Apr 25, 2020): I'll assume the above workaround has been successful so I'll close this off. If you're still having issues with it on the latest version of BookStack feel free to comment here or open a new issue referencing this one.

OVERLORD commented

2026-02-05 01:29:16 +03:00

@paulkernstock commented on GitHub (Apr 25, 2020):

Thanks @ssddanbrown, I didn’t manage to update my bookstack yet. As soon as I do, I will try the workaround and give you feedback here.
Have a nice sunday!

@paulkernstock commented on GitHub (Apr 25, 2020): Thanks @ssddanbrown, I didn’t manage to update my bookstack yet. As soon as I do, I will try the workaround and give you feedback here. Have a nice sunday!

OVERLORD commented

2026-02-05 01:29:19 +03:00

@paulkernstock commented on GitHub (Jul 14, 2020):

Hey @ssddanbrown. Thanks for this! I tried it in my instance and it works with parentheses, brackets, curlies, single and double quotes.

If you ask me, this should be default behavior, although I'm totally happy with this solution.

@paulkernstock commented on GitHub (Jul 14, 2020): Hey @ssddanbrown. Thanks for this! I tried it in my instance and it works with parentheses, brackets, curlies, single and double quotes. If you ask me, this should be default behavior, although I'm totally happy with this solution.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#1638