disciple-tools-theme icon indicating copy to clipboard operation
disciple-tools-theme copied to clipboard

Support more markdown in comments

Open corsacca opened this issue 2 years ago • 14 comments

We support links. test [text](https://google.com) renders like: image

Lets add:

  • bold: **bold** or __bold__
  • italics: *italics*
  • lists:
- one
- two
- three

or

* one
* two
* three

And:

  • Images: ![image](https://github.com/DiscipleTools/disciple-tools-theme/assets/24901539/7d51d61d-07ea-414f-8a46-ce83b994bd93)

See https://www.markdownguide.org/basic-syntax

Not supported by markdown:

  • Underline

corsacca avatar Mar 29 '24 09:03 corsacca

I think this will be the main file: https://github.com/DiscipleTools/disciple-tools-theme/blob/develop/dt-assets/js/comments.js

corsacca avatar Mar 29 '24 15:03 corsacca

are we going to want to support all of markdown? or just a subset?

squigglybob avatar Apr 03 '24 13:04 squigglybob

I have bold and italics figured out. Still working on images and lists

CptHappyHands avatar Apr 04 '24 04:04 CptHappyHands

Awesome!

corsacca avatar Apr 04 '24 09:04 corsacca

Think I have numbered lists working. The other list format is being difficult

CptHappyHands avatar Apr 08 '24 00:04 CptHappyHands

Figured I should make a loom to explain where I'm at in the process on this: https://www.loom.com/share/2b62fc6821334cc29c6ed3addceb009f?sid=fa6ccd53-3b65-4d20-8e39-61d5d5e8b474

CptHappyHands avatar Apr 09 '24 03:04 CptHappyHands

Thanks for the update @CptHappyHands ! Can you share your code so far? In shared-functions.js there is a "formatComment" function. I think most of we want to do will be there.

For the list: if we can regex the list format and convert it to

      <ul style="list-style: disc; padding: revert">
        <li style="list-style-type: disc">Item 1</li>
        <li style="list-style-type: disc">Item 2</li>
      </ul>

(we'll pull the css to the right place later). It should show: image

Same for the images. I think it will work if we regex the ![]() format and transform it into an <img src="https://">.

What block are you coming up against for the images? (Note, we don't need to deal with uploading at this point. We have another feature in the makes that we'll need first)

corsacca avatar Apr 09 '24 08:04 corsacca

@CptHappyHands If you can create the PR now and put 'resolves #2427' in the description, then we can track where you're at so far and it will be linked to this issue :)

squigglybob avatar Apr 09 '24 12:04 squigglybob

I just now saw these comments when I came to add the loom video I made to give y'all an update: https://www.loom.com/share/39319e0bb0c849008fec19123d5a44aa?sid=449e16ea-a2e3-4003-94b1-aebb335bc187 Ill check out shared-functions.js since as it may be able to fix the issue I was running in to in that video

CptHappyHands avatar Apr 13 '24 21:04 CptHappyHands

Well...moving everything to shared_functions seems to have fixed all of the problems in the loom. So, thats rad. Still haven't managed to find a workaround for the images, though it is at least showing up as an anchor tag now instead of not showing up at all like it was previously

CptHappyHands avatar Apr 14 '24 13:04 CptHappyHands

https://www.loom.com/share/05a295c599e7427e95531c6be4e5f28d?sid=a3f1699a-068d-4827-8049-f398cb579130

CptHappyHands avatar Apr 14 '24 14:04 CptHappyHands

Got images working as well https://www.loom.com/share/e767e827e871423f8b883002b1f8415a?sid=1d2ba229-f233-4f0c-bd4a-d434ecdde504

CptHappyHands avatar Apr 15 '24 03:04 CptHappyHands

Nice work @CptHappyHands!

corsacca avatar Apr 15 '24 08:04 corsacca

Nice one 😄

squigglybob avatar Apr 15 '24 08:04 squigglybob