Desktop: Add toggling functionality for bold, italics and code in Editor Toolbar

[rabeehrz]

Fixes issue #2560

This PR adds a toggling function for bold, italics and code elements in the Editor Toolbar.

As mentioned in the issue:

You have a text bla, select it and click Bold. Then you get **bla**, you select **bla**, click Bold and get bla.

Improvements

Added italics toggling for wrapping using underscores

Before

After

[rabeehrz]

@PackElend label me please.

[tessus]

I've noticed 1 issue and 1 room for improvement:

When you have a code block and select the code block (plus the bacticks) and use the code shortcut, the code block is rendered to normal text again (which was the idea), but an empty line is appended. So this has to be fixed. You have to make sure that there's no extra empty line.

As a suggestion, please also check for the underscore character for the emphasized text.
e.g. I write my emphasized text like _bla_, but when I select that and hit the I button, it turns into *_bla_*. see comment inline.

[tessus]

Please also check for underscore here.
if ((string.startsWith('*') && string.endsWith('*')) || (string.startsWith('_') && string.endsWith('_'))) {

[rabeehrz]

@tessus I've made the requested changes and updated the PR. Please review.

[tessus]

Unfortunately the codeblock still leaves an extra empty line.

[tessus]

There's one line between the code block and the text.

Now there are 2 empty lines bwtween the code block and the text.

[iyashwantsaini]

use this in commandTextCode():

                     if (string.startsWith('```') && string.endsWith('```')) {
			this.wrapSelectionWithStrings('', '', '', string.substr(4, selection.end - selection.start - 8
		} else {
			this.wrapSelectionWithStrings(`\`\`\`${match[0]}`, `${match[0]}\`\`\``);
		}

This will fix the extra line appearing.

[rabeehrz]

use this in commandTextCode():

                     if (string.startsWith('```') && string.endsWith('```')) {
			this.wrapSelectionWithStrings('', '', '', string.substr(4, selection.end - selection.start - 8
		} else {
			this.wrapSelectionWithStrings(`\`\`\`${match[0]}`, `${match[0]}\`\`\``);
		}

This will fix the extra line appearing.

Thanks, @meyash
@tessus I've added the above change and that seemed to have solved the issue. Please review.

[tessus]

LGTM. Tested.

[laurent22]

The four blocks of code you've added are all very similar. Could you refactor them into a single function please?

[rabeehrz]

The four blocks of code you've added are all very similar. Could you refactor them into a single function please?

I've shortened the code a bit without making it very complicated.
I've used the old style for code block replacement because the two cases (single line and multiple line) should be handled separately.

[Rishabh-malhotraa]

Looks good to me, you can improve this code by adding regexp for searching but this is fine too

[tessus]

Anything else that has to be done or can we merge?

[laurent22]

Looks good, thanks @rabeehrz!

[laurent22]

Did this feature ever worked? On the latest version if I select some text and click on bold it becomes **some text**, then if I click again it becomes ****some text****, so like it always did. Not sure if the feature got broken or if it had some bug. For now, I'm refactoring the text editor component and removing this feature as I don't know how to fix it.

[tessus]

Yes, but you have to select the text first.

There's also a follow-up PR which I think does what you think it should do.

[tessus]

#3077