Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Notebooks] Support Markdown in Notebook Entries #6060

Closed
jvigliotta opened this issue Dec 15, 2022 · 14 comments · Fixed by #7084
Closed

[Notebooks] Support Markdown in Notebook Entries #6060

jvigliotta opened this issue Dec 15, 2022 · 14 comments · Fixed by #7084
Assignees
@scottbell @jvigliotta
Labels
type:enhancement type:feature Feature. Required intentional design
Milestone
Target:3.1.0

Comments

@jvigliotta
Copy link
Contributor

Is your feature request related to a problem? Please describe.
Robust formatting in Notebook entries. Using Markdown: https://www.npmjs.com/package/snarkdown is a lightweight viable option.

Describe the solution you'd like
When editing a notebook entry, if you were to use MarkDown, when viewing the notebook entry, it would be formatted accordingly using HTML.

Additional context
First version is #6059
@jvigliotta jvigliotta self-assigned this Dec 15, 2022
@jvigliotta jvigliotta mentioned this issue Dec 15, 2022
Closed
@jvigliotta jvigliotta mentioned this issue Dec 30, 2022
Merged
15 tasks
@akhenry
Copy link
Contributor

akhenry commented Mar 4, 2023

Note that users have requested support for tables, so we should ensure that whatever library we use supports tables.

@scottbell scottbell self-assigned this Sep 18, 2023
@scottbell
Copy link
Contributor

@jvigliotta Snarkdown looks cool/clean, but they unfortunately don't support tables (yet?). So maybe something like Marked instead? They appear to support tables (a la Github)

@jvigliotta
Copy link
Contributor Author

jvigliotta commented Sep 19, 2023 •
edited
Loading

@scottbell Yeah I think we were looking at Snarkdown because of the size and functionality needs at the time, if you think Marked is a better choice then I'm on board!

@scottbell
Copy link
Contributor

Tables!

Screen.Recording.2023-09-25.at.4.01.24.PM.mov

It looks like we ignore <em> in our CSS though.

@scottbell scottbell mentioned this issue Sep 25, 2023
Merged
15 tasks
@scottbell scottbell linked a pull request Sep 25, 2023 that will close this issue
Add markdown to notebook entries #7084
Merged
15 tasks
@scottbell
Copy link
Contributor

To test, use this markdown sample file:

sample.md

and ensure it renders properly. Try to add new some new elements too like tables, text, and whitelisted and non-whitelisted links.

charlesh88 added a commit that referenced this issue Sep 27, 2023
@charlesh88
Closes #6060
1116915 
- CSS resets and styling for markdown-related HTML markup in Notebook entries.
- Better styling and cursor affordances for Notebook entry selection and editing interaction flow.
charlesh88 added a commit that referenced this issue Sep 27, 2023
@charlesh88
Closes #6060
90bea00 
- Tab
charlesh88 added a commit that referenced this issue Sep 28, 2023
@charlesh88
Closes #6060
a069efb 
- Conversion of contenteditable-div to textarea started.
- Stubbed in textarea with styles.
charlesh88 added a commit that referenced this issue Sep 29, 2023
@charlesh88
Closes #6060
e091781 
- Padding added back to text `div` area.
charlesh88 added a commit that referenced this issue Sep 29, 2023
@charlesh88
Closes #6060
dbab7c8 
- Styles added to support Shift Log and hover behavior for entries on locked pages.
- Removed `--major` styling from Shift Log Commit Entries button
to reduce confusion with entry commit button.
- CSS code cleanups.
@ozyx ozyx added this to the Target:3.1.0 milestone Oct 2, 2023
@ozyx ozyx closed this as completed in #7084 Oct 2, 2023
ozyx added a commit that referenced this issue Oct 2, 2023
@scottbell @charlesh88 @ozyx
Add markdown to notebook entries (#7084)
6947c91 
* try marked out

* fix url validation

* now rendering blockquotes properly

* add abbrv, link titles, and strikethrough

* fix tests and lint

* Closes #6060
- CSS resets and styling for markdown-related HTML markup in Notebook entries.
- Better styling and cursor affordances for Notebook entry selection and editing interaction flow.

* add line breaks option

* Closes #6060
- Tab

* Closes #6060
- Conversion of contenteditable-div to textarea started.
- Stubbed in textarea with styles.

* have it markdown with a textarea and adjust size automatically

* Closes #6060
- Padding added back to text `div` area.

* Closes #6060
- Styles added to support Shift Log and hover behavior for entries on locked pages.
- Removed `--major` styling from Shift Log Commit Entries button
to reduce confusion with entry commit button.
- CSS code cleanups.

* two step focus/edit. also scroll into view for editing

* add markdown, strip all tags, and truncate

* lint

* remove unneeded code

* fix notebook entry, selected page may also be null

* fix existing notebook tests

* lint

* fix whitelist

* readd whitelist

* lint

* fix link tests

* fix tests

* fix tagging test

* add some markdown test

* get rid of pause

* add another sanitization step

---------

Co-authored-by: Charles Hacskaylo <charlesh88@gmail.com>
Co-authored-by: Jesse Mazzella <ozyx@users.noreply.github.com>
@ozyx ozyx added unverified needs:test instructions Missing testing notes labels Oct 2, 2023
@ozyx ozyx changed the title [Notebooks] Formatted entries v2 [Notebooks] Support Markdown in Notebook Entries Oct 3, 2023
@ozyx ozyx added type:feature Feature. Required intentional design and removed needs:test instructions Missing testing notes labels Oct 3, 2023
@charlesh88
Copy link
Contributor

charlesh88 commented Oct 5, 2023 •
edited
Loading

Testing Notes

  1. Test markdown capabilities. We need to test as many different formatting capabilities as we can. In a Notebook entry, paste the contents of this text file:
    Notebook Markdown test 1.txt

  2. Save the entry and verify it looks like this screenshot:
    image
    Note that there's a error: automatic numbering of ordered list items under an unordered item does work.

  3. Try editing the entry, adding and removing line breaks. Verify that unexpected line breaks aren't added and that formatting works as expected.

  4. Go freeform! Try your own markdown.

@ozyx
Copy link
Member

ozyx commented Oct 5, 2023

Verified in Testathon 10/5/23

Great job! This rocks.

@khalidadil
Copy link
Contributor

Verified in Testathon on 10/05/2023

@rukmini-bose
Copy link
Contributor

Verified Testathon 10/5/2023

@charlesh88
Copy link
Contributor

How do I quote lines?

Like this, right?

@scottbell
Copy link
Contributor

@charlesh88 right! From the marked demo:

The overriding design goal for Markdown's
formatting syntax is to make it as readable
as possible. The idea is that a
Markdown-formatted document should be
publishable as-is, as plain text, without
looking like it's been marked up with tags
or formatting instructions.

@charlesh88
Copy link
Contributor

@charlesh88 right! From the marked demo:

The overriding design goal for Markdown's
formatting syntax is to make it as readable
as possible. The idea is that a
Markdown-formatted document should be
publishable as-is, as plain text, without
looking like it's been marked up with tags
or formatting instructions.

Lol, that was a test... Turns out I think sanitizing Notebook entries has broken block quotes, as
> block quote gets encoded as &gt; block quote.

@charlesh88
Copy link
Contributor

Verified fixed Testathon 2023-10-05. There are a few issues and I'll file a followup issue for future fixes.

@ozyx ozyx removed the unverified label Oct 5, 2023
@scottbell
Copy link
Contributor

scottbell commented Oct 5, 2023 •
edited
Loading

Agreed, that makes sense. Dang angle brackets

@akhenry akhenry mentioned this issue Mar 20, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@scottbell scottbell

@jvigliotta jvigliotta

Labels
type:enhancement type:feature Feature. Required intentional design
Projects
None yet
Milestone
Target:3.1.0
Development

Successfully merging a pull request may close this issue.

Add markdown to notebook entries nasa/openmct
7 participants
@charlesh88 @khalidadil @akhenry @ozyx @scottbell @jvigliotta @rukmini-bose