code blocks should have a copy all button

[streetwriters[bot]]

it's nearly impossible to copy code while on mobile

---

Device information: App version: 2.5.0 Platform: android Model: Nothing-A063-33 Pro: true Logged in: yes

[thecodrr]

This button should become visible on hover just like in GitHub:

function example(param: string) {
    console.log("Hello world");
}

[pdrive]

in github I see the button when I click the code. in notesnook can't find such button. neither on mobile or web app

[thecodrr]

@pdrive I was talking about how it should be implemented.

[pdrive]

oh OK. Anyway it would be really useful.

[FMMazur]

Can I take this one?

[thecodrr]

@FMMazur sure!

[FMMazur]

I implemented a solution like this, but I think it needs some feedback, if someone could help. On Web Desktop

On Web Mobile

another thing related to the Codeblock, it has some bug handling some history stuff, like in this example, i removed a char, and some injected function stopped working, then I can't add new lines:

As far as I have tested, sometimes don't happen if the Codeblock is the first node in the document. Probaly needs more tests.

[thecodrr]

@FMMazur looks good. I will test the other issue and see what's wrong. Feel free to open a PR. Also make sure the color of the icon follows the theme.

[FMMazur]

For the icon I use the follow code, shouldn't handle the color by itself? At least on desktop is visible, but not so much on mobile

    <Icon path={Icons.copy} size={"big"} color="icon" />

[FMMazur]

I was messing around and found the issue related to the Tiptap component, the tiptapOptions memo variable, don't have the theme in the array dependency, so it don't change the current theme to the editor. I know it's kinda not related to this issue, but I thought it would be better to comment about it.

if you could help me to checkout if I should use the "primary", "bgSecondary", "bgSecondaryBg"and the "icon". @thecodrr

[FMMazur]

I tried as the GIF below, and made a 1sec delay showing a check icon, probably needs to add some tests, and run current ones to check if everything works fine.

source: https://imgur.com/a/wGdPBcX

For test purpose, solved the issue above, I think it needs it's on issue, but if needed I can add to the PR when I commit, as I already changed the memoized variable to add the copy function

[pdrive]

i have more suggestions. should i open a new suggestion? :')

maybe this is entering too much into the realm of a full code editor and not the direction devs want. I just started making simple scripts and found these little annoyances. they seem simple enough but then again, i dont understand much. anyway here it goes:

1. word wrap for code blocks
2. line numbers
3. line selection by clicking the line number
4. code folding
5. fold entire code block. if there are several big code blocks in the same note, its annoying having to scroll all over the note
6. markdown folding. since notes already support markdown, folding should be possible? this would be really nice for large notes. similar to how zettlr does it check gif

[FMMazur]

As far as I have seen, line numbers and selection, and maybe fold block, are easy to implements, hovewer for the others ideas it will be quite hard to do, and probably goes way out of scope of the app, at least for now.

[thecodrr]

if you could help me to checkout if I should use the "primary", "bgSecondary", "bgSecondaryBg"and the "icon". @thecodrr

"icon" color for icons.

[thecodrr]

@FMMazur feel free to open a PR. We can discuss further on the PR.