HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Question about MarkDown rendering on the fly

AoleeAolee Hobbyist & Coder ✭✭

Hi , I've converted the Private/Group Message into a Real-time chat messaging with the help of a few Nodejs line of code. Next in line is the Web push notification . However I realized the image in markdown is not being rendered automatically. Is there a way to apply the markdown rending on the fly when a message is received by the user?

You may check it below

http://tiny.cc/u8ywdz

Comments

  • Hi , I've converted the Private/Group Message into a Real-time chat messaging with the help of a few Nodejs line of code.

    Yea, hello!

    Wait! what!? Let's just fly over that casually like that is not some hall-of-fame material right there.

    Let's agree that no one here will help you unless you share a detailed tutorial (with demo) to this kick-jaw achievement. :)

    BTW, I was working hard on something similar (like hardly working) until I ditched it for third-party. So I am thoroughly interested in returning to this magic.

    Cheers

  • AoleeAolee Hobbyist & Coder ✭✭

    haha I wouldn't call it kick-jaw achievement :D it's all from the good old stackoverflow.

    I can share you what I did but be warned I hacked the conversation view (./applications/conversations/views/messages/xxx.php) as i don't know to to extend them in the theme. Vanilla views can be extended on the theme folder but couldn't make it to work for conversation view .

    ok here it goes, I just used the basic room concept, since vanillaforum uses unique Conversation ID, I've used it as the unique room, besides even if someone knows the room / conversation ID and directly tamper the URL he wont be able to load it due to permission check is in place.

    I basically... [grr I edited due to rich editor's code block keeps crashing - I inserted the word doc instead]

    http://tiny.cc/15jxdz

  • AoleeAolee Hobbyist & Coder ✭✭
    edited October 2019

    Not sure what Vanilla is using to convert to display Markdown properly but maybe this will work? https://github.com/showdownjs/showdown as a converter?

  • R_JR_J Ex-Fanboy Munich Admin

    Vanilla is doing it server side with PHP. It's done with the Gdn_Format class method to() which takes the text and the format: Gdn_Format::to($body, $format);

  • AoleeAolee Hobbyist & Coder ✭✭

    Argh im dead. need to use other 3rd party then . Thanks a lot @R_J

  • R_JR_J Ex-Fanboy Munich Admin

    Could you describe more detailed where the problem comes up in the process flow? I would be interested to make that as clean as possible to be able to re-use it for others.

    One problem I see is that the formatting method can be extended and if you use an external formatter, that would never happen.

  • AoleeAolee Hobbyist & Coder ✭✭
    edited October 2019

    Ah my bad! it works now. Issue was , I'm sending over the message by grabbing the message by using Jquery .text() instead of .html() . text() strips html tags.

    basically when the user sends the private message, the conversation's addMessage is called and adds the message on his page in html format. then my js code grabs the added element by using $('xxx').text() and uses this to broadcast to other members. I don't need a converter anymore as it was already formatted by Vanilla's addMessage so i just need to replace it with $('xxx').html() then throw it to nodeJs.

  • AoleeAolee Hobbyist & Coder ✭✭

    @R_J i forgot to ask, is it possible to extend the conversation template to the theme?

    right now we can overite the vanilla views (applications/vanilla/views/* ) by copying the files to the theme folder

    is it possible for conversation views (/applications/conversation/views/*) to be placed in theme folder too?

    Wanted to package this Realtime Chat Conversion properly and share the full code here :)

  • Just share it! lol

  • AoleeAolee Hobbyist & Coder ✭✭

    If you will read the doc, all codes are already in the document. just thinking if theres a way to properly repackage it.

  • Awesome! so I just fire up nodejs and proceed... I'll give feedback

  • R_JR_J Ex-Fanboy Munich Admin


    I'm not sure. Create the following files

    /plugins/your-plugin/views/applications/conversations/views/the-view-name-php

    /plugins/your-plugin/views/conversations/views/the-view-name-php

    /plugins/your-plugin/views/the-view-name-php


    The content of each of this files should be echo __FILE__;

    Delete the addon.json file before you try if it works.


    Another way to "override" a view is by changing it before the page is rendered. Not sure about the best way, but this should lead you to a working solution:

       public function messagesController_render_before($sender, $args) {
           if ($sender->RequestMethod !== 'add') {
               return;
           }
           // The following code will only be rendered for the /messages/add page
            $sender->View = $sender->fetchViewLocation(...
    

    I haven't taken a closer look at your documentation but if you only want to add JavaScript to that file, it should be better done with a simple $sender-addJsFile() call in the ...Controller_render_before method

  • rbrahmsonrbrahmson "You may say I'm a dreamer / But I'm not the only one" NY ✭✭✭

    @Aolee - I'm late at this conversation but take a look at the InboxPanel plugin source - while very old it may still give you some hints

  • charrondevcharrondev Developer Lead (PHP, JS) Montreal Vanilla Staff
    edited October 2019

    Just a note: This method is deprecated (still works though). The new versions are:

    \Gdn::formatService()->renderHtml($body, $format);
    \Gdn::formatService()->renderPlainText($body, $format)
    \Gdn::formatService()->renderExcerpt($body, $format)
    \Gdn::formatService()->renderQuote($body, $format)
    

    This is just my monthly reminder that I need to write documentation on the new formatting pipeline.

  • AoleeAolee Hobbyist & Coder ✭✭
    edited October 2019

    Thanks guys, however i ended up adding new views to the conversation view and adding methods to the conversation controller.

    I needed to create a Real time Group Page where people can join. like a Facebook group + messenger in one. So far it does the job especially with web FCMpushnotification working :)




  • AoleeAolee Hobbyist & Coder ✭✭
    edited October 2019

    Im hoping iOS will release their api for safari push notification too :) it's been overdue for 2 yrs. it's good if we can engage mobile users back to the web thru Progressive Web App.

  • R_JR_J Ex-Fanboy Munich Admin
  • AoleeAolee Hobbyist & Coder ✭✭

    @R_J Yes this is basically what it does, but if you mean creating my own api server, I have offloaded that task to the FREE Google Firebase , no limitations compared to other push providers (with 30k registrations)

Sign In or Register to comment.