publiclab / PublicLab.Editor

A general purpose, JS/Bootstrap UI framework for rich text posting. An author-friendly, minimal, mobile/desktop interface for creating blog-like content, designed for PublicLab.org
https://publiclab.github.io/PublicLab.Editor/examples/
GNU General Public License v3.0
79 stars 128 forks source link

Exiting out of the code module #487

Open keshav234156 opened 4 years ago

keshav234156 commented 4 years ago

Right now there is no way by which we can start a new paragraph after we have used the code module. We can solve this such that pressing the respective hotkey exits the module like in case of quoted text.

keshav234156 commented 4 years ago

Getting started with this!!!

keshav234156 commented 4 years ago

Bugs

  1. No way to exit out of the Code Module. Possible Solution:- if already in code Module pressing Code Sample Button or Ctrl + D should exist the module

  2. Pressing Enter for next line while writing Code sample, the new code sample is initiated. (GIF below )

  3. Pressing Ctrl + E inside code module to de- code text makes one more code module Screenshot from 2020-05-28 06-47-42

  4. If after writing code in Rich Mode we switch to markdown and then switch back to Rich Mode again No code is shown. This is because we need to write the type of code sample eg. HTML, js before Eg. ```javascript

// Code could go here var myVariable = 4;

here we have mentioned code type as javascript in the beginning so it works but without this, no code is shown in rich mode . This should be removed?

Untitled_ May 26, 2020 7_00 AM

keshav234156 commented 4 years ago

@jywarren @emilyashley @ebarry @shreyaa-s @Shulammite-Aso @NitinBhasneria Any more bugs that you have faced in code sample or view regarding the above faced issue?

shreyaa-s-zz commented 4 years ago

Great finding @keshav234156 ! I haven't faced any bug as of yet but I'm facing trouble reproducing this bug. I specified the type of code as javascript but the code still disappeared on switching from md to rich text, either completely or partially. Can you check?

Shulammite-Aso commented 4 years ago

Hi @keshav234156 i'm also not able to reproduce the part where code disappears after switching to markdown and back.

jywarren commented 4 years ago

Thanks for digging into this. I think sharing GIFs is going to be helpful here to narrow in on the bug. Also, similarly to the debugging going on in https://github.com/publiclab/PublicLab.Editor/issues/457, perhaps we can manage to reproduce this in a test environment in either https://github.com/bevacqua/domador or https://github.com/bevacqua/megamark tests?

Finally, i noticed a convention in Slack that in order to get out, you press the -> right-arrow key. What are some conventions we could rely on to "get out of a state" here, not only for code but for other types?

  1. pressing right arrow key ->
  2. pressing enter a second time where no content has been added to the first instance (does this make sense?)

Any others?

Thanks, all! 🎉

keshav234156 commented 4 years ago

Hi @keshav234156 i'm also not able to reproduce the part where code disappears after switching to markdown and back.

  1. With control ctrl + E initiate the code module
  2. Write some code in it.
  3. With Ctrl + M switch to Markdown mode
  4. With Ctrl + P switch to rich mode Again

And the code would disappear .That because we in markdown mode we need to mention the type of code eg javascript , html

keshav234156 commented 4 years ago

Thanks for digging into this. I think sharing GIFs is going to be helpful here to narrow in on the bug. Also, similarly to the debugging going on in #457, perhaps we can manage to reproduce this in a test environment in either https://github.com/bevacqua/domador or https://github.com/bevacqua/megamark tests?

Finally, i noticed a convention in Slack that in order to get out, you press the -> right-arrow key. What are some conventions we could rely on to "get out of a state" here, not only for code but for other types?

  1. pressing right arrow key ->
  2. pressing enter a second time where no content has been added to the first instance (does this make sense?)

Any others?

Thanks, all!

I think a more standard way would be to press the hotkey or press icon if it's already present in that module. Like In Google Docs to Bold we use press Ctrl + B and it exists if already in Bold

keshav234156 commented 4 years ago

Great finding @keshav234156 ! I haven't faced any bug as of yet but I'm facing trouble reproducing this bug. I specified the type of code as javascript but the code still disappeared on switching from md to rich text, either completely or partially. Can you check?

Try this


// Code could go here
var myVariable = 4;
var funtion()
keshav234156 commented 4 years ago

@shreyaa-s Please see the above comment in markdown mode by clicking on Edit button in top right corner as Comment has been processed.

keshav234156 commented 4 years ago

@shreyaa-s Please see the above comment in markdown mode by clicking on Edit button in top right corner as Comment has been processed.

shreyaa-s-zz commented 4 years ago

I think the issue is here is that the part inside the code module is processed. The code does not disappear when we write code like the one you mentioned. But if we were to write HTML with tags, the tags would be processed. If we mention html/xml in the beginning, then tags are processed partially and some snippets disappear, the </ part of closing tag to be precise. And if we don't mention then the complete code disappears.

Steps to reproduce: Try copy pasting the following snippets in markdown and then switch to rich text. (Also testing how github would deal with this code.) The description is based on what I tested and got as a result.

  1. No changes in switching.
```js
var myVariable = 4;
var function()```
  1. No description of type code yet still no changes in switching.
```var myVariable = 4;
var funtion()```
  1. Partially disappearing code
```html
<body>
<div class = "profile">
</div>
</body>```
  1. Complete code disappears.
```<body>
<div class = "profile">
</div>
</body>```

Please verify the same. I'm putting up GIFs for reference.

Here's for the javascript: simplescreenrecorder-2020-05-27_13 19 43

For HTML: simplescreenrecorder-2020-05-27_13 22 34

One possible solution is not to process this code. We can only look for the end of the module and leave that part as it is. In my opinion, from safety standards, it would be better if we containerize it and not let it interact with our editor. By containerize, here, I mean, treat it as a separate shell that we don't access, just store and display, and not let it access us either. That's just an idea.

Hope this could be of help :)

keshav234156 commented 4 years ago

@shreyaa-s The cause of problem 3 ( https://github.com/publiclab/PublicLab.Editor/issues/487#issuecomment-633766518 ) is that in code module, tag is

 , so closing tag should be "
" but rleading here(https://github.com/jywarren/woofmark/blob/master/src/html/wrapping.js#L7 ) makes it "" .That makes it to initiate a new code module.

In this case, I think we should have a different wrapping module for every module?

keshav234156 commented 4 years ago

Please see the above comment in markdown mode by clicking on Edit button in top right corner as Comment has been processed.

jywarren commented 4 years ago

Hmm, maybe I misunderstand but in theory ``` is supposed to transform to either the <code> tags or to <pre> tags (i think <code> -- you can check the closest thing to a standard at https://commonmark.org/). This should automatically mean the code is not executed, no?

I believe the correct syntax is:

image

or

image

But not:

image

(btw i found it easier to share a screenshot rather than trying to write markdown into markdown :joy: -- or to use \ backslashes to escape and force it not to render the markdown...)