[code] tag gets reproduced on every new line

[timint]

Assuming this project is dead and no one is maintaining it. It will be worth a try at least to report a bug.

When marking text and clicking the code button, then [code] gets printed on every single line rather than the beginning and the end of the block.

$('textarea[name="message"]').sceditor({
  format: "bbcode",
  plugins: "plaintext",
  pastetext: {
    addButton: true,
    enabled: true,
  },
  style: "/vendor/sceditor/themes/content/default.min.css",
  locale: "en",
  emoticonsEnabled: false,
  enablePasteFiltering: true,
  toolbar: "bold,italic,underline,strike|removeformat|bulletlist,orderedlist,table|code,quote|horizontalrule,image,link,unlink|source",
  bbcodeTrim : true,
  parserOptions: {
    breakBeforeBlock: false,
    breakStartBlock: false
  },
  width: "auto"
});

[brunoais]

Can you reproduce this in the website?

[timint]

Set up a bbcode example and i will try. Can you reproduce it with the given code example?

[timint]

I managed to reproduce it with the following lines of code:

$('textarea[name="message"]').sceditor({
  format: "bbcode",
  style: "/vendor/sceditor/themes/content/default.min.css",
});

Using latest 2.1.3.

[brunoais]

Does it happen with this one?

[timint]

No it does not. You seemed to only load sceditor.min.js. I'm loading jquery.sceditor.bbcode.min.js.

These are my loaded sources:

document::$snippets['head_tags']['sceditor'] = '<link rel="stylesheet" href="'. WS_DIR_APP . 'vendor/sceditor/themes/default.min.css" />';

document::$snippets['foot_tags']['sceditor'] = '<script src="'. WS_DIR_APP . 'vendor/sceditor/jquery.sceditor.bbcode.min.js"></script>' . PHP_EOL
                                             . '<script src="'. WS_DIR_APP . 'vendor/sceditor/formats/bbcode.js"></script>' . PHP_EOL
                                             . '<script src="'. WS_DIR_APP . 'vendor/sceditor/plugins/plaintext.js"></script>' . PHP_EOL
                                             . '<script src="'. WS_DIR_APP . 'vendor/sceditor/languages/'. language::$selected['code'] .'.js"></script>';

[timint]

It seems to be resolved when using jquery.sceditor.min.js instead of jquery.sceditor.bbcode.min.js. What is jquery.sceditor.bbcode.min.js used for?

[brunoais]

jquery.sceditor.bbcode.min.js is the equivalent of including both SCEditor and the bbcode editor in a single file. In practice, the effect was the same as (for your code):

document::$snippets['foot_tags']['sceditor'] = '<script src="'. WS_DIR_APP . 'vendor/sceditor/jquery.sceditor.min.js"></script>' . PHP_EOL
                                             . '<script src="'. WS_DIR_APP . 'vendor/sceditor/formats/bbcode.js"></script>' . PHP_EOL
                                             . '<script src="'. WS_DIR_APP . 'vendor/sceditor/formats/bbcode.js"></script>' . PHP_EOL

[timint]

That makes sense, I'm happy we got it working. :) Thank you @brunoais If others also are confused by jquery.sceditor.bbcode.min.js I think tossing it completely is an idea. Cheers

[brunoais]

I'll leave that to @samclarke. He's the owner.

[timint]

Have you heard from the man? He was seen last active may 2018.

[timint]

The problem persists. Can you confirm it here? Using latest Chrome. https://jsfiddle.net/hy3bz68t/1/

[brunoais]

I can't reproduce. Use a screen recorder, please

[timint]

Simply copy paste the code from the left into the editor. Select all content and click the code button. I will be back with a screen recording.

[timint]

Here is your video https://easyupload.io/8jpxy9 Clean install, clean new browser, happens in any browser. Using the official sources seen in the link. https://jsfiddle.net/hy3bz68t/1/

[brunoais]

Like this?

[timint]

Here goes new computer, Windows 10 and latest Chrome.

(Note: The gif doesn't loop.)

2nd attempt and so on can turn out fine. But I 9 out 10 times get it wrong when initially marking and select Code. When it come to the forums where this is used. Every user gets it wrong every single time they post code. And it's annoying.

[timint]

Windows 10 - Firefox newest version.

Worked first two times. Then third time I get this.

[timint]

Windows 10 - Opera latest version

First attempt

[timint]

Latest Chrome again, using minimal sources.

https://jsfiddle.net/x3zw6n12/

[timint]

And lastly a demonstration of how this problem makes no absolute sense to me.

[timint]

@brunoais did you bail on me?

[brunoais]

@timint No. I just forgot to tag and my busy life came back to me. My company is making me do overtime to handle all the clients.. Can't do any more around now. If someone can help, it can be the one who made the editor. For now, I just wish someone would fork SCE and lead its development while including @samclarke as code editors...

[timint]

@brunoais :) Agree. Try talking @samclarke into posting a note that the project needs someone to take over. There are not too many alternatives out there for bbcode editors.

[timint]

@samclarke @samclarke @samclarke Wakey pakey @samclarke, sun is shining! 😁

[woodholly]

I think it is related to this bug. This is probably linked to rich-text-paste: https://user-images.githubusercontent.com/65503093/115967757-01664600-a53d-11eb-976b-89485d6e8e9b.gif

[woodholly]

I fixed this, but code editing is generally useless without undo/redo support...

[samclarke]

It's due to <div> tags being pasted inside of a <p> tag.

The spec says <p> tags are closed by the start of another block element. When the HTML is parsed by the browser using innerHTML, the <p> tag gets closed and the way everything is then interpreted results in the unexpected output.

For example, parsing:

<p><code><div>line 1<br></div><div>line 2<br></div></code><br></p>

with innerHTML will result in:

<p><code></code></p><div><code>line 1<br></code></div><div><code>line 2<br></code></div><br><p></p>

Which is what gives the strange output. You can try it in the dev console:

let div = document.createElement('div');
div.innerHTML = '<p><code><div>line 1<br></div><div>line 2<br></div></code><br></p>';
console.log(div.innerHTML);

I've updated the fixNesting() (#820) to handle blocks inside of <p> tags which fixes this. It should be fixed in the next release.

[samclarke]

@woodholly thanks for reporting. That's a different bug to this which should be fixed by #804. If you use the undo plugin that should enable undo/redo.

[woodholly]

@samclarke I'll try undo plugin, thanks. Code paste should be cleaned from all tags except BR (already done inside bbcode.js, but were not done in paste code), here is my patch/diff (to apply: git am < file.patch) 0001-fixes-paste-into-code-bugs.patch.txt

Edit: I already use undo.js plugin and it is unusable - try to copy and paste inside [code] block and push Ctrl-z Ctrl-y.

[timint]

If I remember right, it's not a rich text problem. Because I copy raw code straight from my code editor into SCEditor. As soon as I select the code block button I get the issue randomly. Meaning it sometimes work.

[samclarke]

It could be your code editor adding a rich text version of your code to the clipboard when copying (it's what VSCode and a few others do). Are you able to reproduce the issue here (build of the fixNesting() changes): https://jsfiddle.net/sjmeLrp7/

[woodholly]

I already fixed that lol. check that patch.

[timint]

There is no code editor I am aware of that copies the raw source code in rich text format. What's the point of doing so? To do so you must have used an extension. Pasting your clipboard into Wordpad should reveal if it's rich text. I just tried Notepad++ and Visual Code and it's raw text, no rich text data.

[woodholly]

@timint, I meant not rich text copy but html, copy any highlighted code from internet and paste it into sceditor code block, and you are done

[timint]

My response was a reply to @samclarke. I should have pointed that out.