Feature Request: Code Line Wrapping in Editing Mode

[mayurankv]

Summary

Add code line wrapping options in editing mode.

Basic example

Similar to how they are done in reading mode. The whole codeblock should scroll though, not individual lines.

Motivation

More usable codeblocks in edit mode.

Existing Requests?

No existing requests.

[mayurankv]

Consider this css I have used in the past. Scrolling document could be ok as long as codeblock covers length of code.

/*! Wrap Live Preview Codeblock */
.HyperMD-codeblock:not(.cm-active):not(:hover) > .cm-hmd-codeblock {
    white-space: nowrap !important;
}
.markdown-source-view.mod-cm6 .block-language-preview code {
    white-space: pre-wrap !important;
}

[mayurankv]

Information courtesy of @Dimava

Wrapping in editor requires EditorView.lineWrapping extension https://discuss.codemirror.net/t/word-wrapping/4512

new EditorView({
    state: EditorState.create({
        extensions: [
            EditorView.lineWrapping
        ]
    })
})

[mayurankv]

Unfortunately, this doesn't help editor wrapping since the default is already wrap. Implementing unwrap is the issue (as well as active unwrap). The only way to implement this currently that I can envisage is setting nowrap similar to the above snippets and extending the codeblock visually to cover the unwrapped lines.

The issues with this approach are:

• Scrolls the whole document which is a bit weird (but better than scrolling individual lines)
• How do you know how far to extend the background for the unwrapped lines?
• Can you actually visually extend the codeblock in this way

[mayurankv]

Template css:

.HyperMD-codeblock:has(> .cm-widgetBuffer) > .cm-hmd-codeblock {
    white-space: nowrap !important;
}

.code-styler-line {
    overflow: visible !important;
}

.code-styler-line.HyperMD-codeblock-end {
    overflow: hidden !important
}

.code-styler-line::after {
    content: "";
    background: red;
    position: absolute;
    top: 0;
    bottom:0;
    left:0;
    right: -100px;
    z-index: -1;
}

[mayurankv]

See this

[mmassenzio]

I am not sure why this is so challenging (I have seen the comments in the Obsidian Forum, where the devs have essentially stated that this feature is beyond their abilities) but I must say that, while wrapping lines in reading mode is nice, not having it in edit mode is a major drawback.

I wish I could offer to help, but I'm a "backend guy" and CSS is pretty much like Japanese to me, so not sure how can I contribute, but if there's a way please let me know.

Love what you've done with this plugin, BTW ❤️

[mayurankv]

Hiya! The real problem is that the Obsidian editor is implemented in code mirror - a functional implementation of text editing framework. The problem with CodeMirror is that it treats each line as independent of other lines. This means doing things like scrolling a single line and having the other lines in the codeblock scroll is extremely hard. (You can actually unwrap lines in code blocks but they will individually scroll which is a bit useless). There is probably a way to do it and I will continue looking into it (in fact if I could find a performant way to set how far a specific line is scrolled, I think it could be done) but I don't know when I'll have the time to not only test/find a solution but also to implement it well.

Thanks for the kind words, and I hope to continue providing features!

[mayurankv]

In terms of helping, if you ever get familiarised with CodeMirror, please do let me know but it took me a while to get my head around it (though this is my first front-end project as well so I'm sure it wouldn't take you long). Having said this, I don't believe a code mirror based solution exists. The key struggle is grouping the scroll state of different html objects and I haven't really looked into it but I think this would need to be done in pure javascript.

[kyldvs]

The problem with CodeMirror is that it treats each line as independent of other lines

I guess that makes sense why it's been so hard to find any plugin solving this. Would love to see this eventually :) I guess I'll have to deal with the wrapping for now.