[Feature Request]: Code block line wrap support

[SmokingCrop]

Describe the feature you'd like

I would like to have the ability to make a 'block code' format but without horizontal scrollbars.
Basically word wrapping that is used in many text editors.

The line-numbering should be empty on lines that are wrapped.

Describe the benefits this feature would bring to BookStack users

This makes the ease of use much higher for readers to view the entire code in one go without having to manually scroll horizontally to view every part of the code/text.

Additional context

Example of word-wrapping in another program:

[techauthoruk]

I think this would be a really good addition if it is possible within the current framework

[bloomt]

+1 for this feature

[hambern]

I need this too

[hambern]

This script in the head makes it work:

<script>
  window.onload = function() {
    let codemirror = document.createElement('script');
	codemirror.src = 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/codemirror.min.js';
	document.head.appendChild(codemirror);
	
	codemirror.onload = function() {
		let codemirrors = document.querySelectorAll('.CodeMirror');
		codemirrors.forEach(function(codemirror) {
			codemirror.CodeMirror.setOption('lineWrapping', true);
			codemirror.CodeMirror.setOption('wordWrap', true);
		});
	};
  }
</script>

Don't thank me... Thank Open AI ;)

[jenny787]

This script in the head makes it work:

<script>
  window.onload = function() {
    let codemirror = document.createElement('script');
	codemirror.src = 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/codemirror.min.js';
	document.head.appendChild(codemirror);
	
	codemirror.onload = function() {
		let codemirrors = document.querySelectorAll('.CodeMirror');
		codemirrors.forEach(function(codemirror) {
			codemirror.CodeMirror.setOption('lineWrapping', true);
			codemirror.CodeMirror.setOption('wordWrap', true);
		});
	};
  }
</script>

Don't thank me... Thank Open AI ;)

This is not working anymore, it seems.

[JavaDogWebDesign]

Seems like a good feature.

Some code is just so long and goes off-screen making it harder to read the code.

[ssddanbrown]

Within #4639 I've exposed the newer CodeMirror (code block) instances to allow a route of customization/hacking.
As of BookStack v23.10.1 (once released) it should be possible to enable line wrapping via adding this to your "Custom HTML Head Content" customizating setting:

<script>
window.addEventListener('library-cm6::pre-init', event => {
    const detail = event.detail;
    const config = detail.editorViewConfig;
    const EditorView = detail.libEditorView;
    
    if (detail.usage === 'content-code-block') {
        config.extensions.push(EditorView.lineWrapping);
    }
});
</script>

[ZAck1387]

Within #4639 I've exposed the newer CodeMirror (code block) instances to allow a route of customization/hacking. As of BookStack v23.10.1 (once released) it should be possible to enable line wrapping via adding this to your "Custom HTML Head Content" customizating setting:

<script>
window.addEventListener('library-cm6::pre-init', event => {
    const detail = event.detail;
    const config = detail.editorViewConfig;
    const EditorView = detail.libEditorView;
    
    if (detail.usage === 'content-code-block') {
        config.extensions.push(EditorView.lineWrapping);
    }
});
</script>

thank you, this works great! (tested with v23.12), highly appreciated!

[AMDHome]

Is there a way to wrap conditionally based on language?

For instance I only want to wrap the text if no language syntax is specified, but if we specify any code language (bash, php, C, js, etc) I dont want text wrapping.

I couldn't find any language item in the event data list. So I thought I'd ask in case i missed it.

[zennnzonnne]

+1 for this feature. ideally, the code block panel would have a checkbox for you to enable wrapping per code block instance.

Oddly – when you open the Code Block editor, it does wrap, but as soon as it's on the page, it no longer wraps.