search

jdtrat / shinymarkdown

Packages JavaScript's Toast UI Markdown Editor for use in R with Shiny.
Other
7 stars 4 forks source link

Render for download #4

Open Teolone88 opened 3 years ago

Teolone88 commented 3 years ago

Hi,

I am quite struggling in finding a way to download the wyswug editor as the character string is hard to parse. Would you have any idea on how to download the content of the editor in a form of html or pdf file?

P.s. I have tried to pull the div but it comes out a .png that is hardly readable.

Thank you in advance.

jdtrat commented 3 years ago

Hi! I'm not positive I understand your question, so if what I say below doesn't address it, please let me know!

If you're just trying to access the raw HTML so you can download it, the documentation here covers that. I might suggest writeLines() to save it as a file. That said, there is a bug when bolding and italicizing for the WYSIWYG editor (see #2). I'm working on a solution for that now, so if that's what the problem is, I (unfortunately) can't help yet.

Teolone88 commented 3 years ago

Hi,

I am currently adopting a dirty replace with CSS to overcome the parsing, replacing "" with ". Would be nice to have pre-defined styling for the table, quote and checkbox as otherwise would translate in respectively table without borders, indented sentence with no formatting and bullet point instead of checkboxes.

Furthermore, the checkboxes when checked are not updated in input$mytext_markdown.

However, the "writeLines" can be a good suggestion instead of the "cat" function. I am still playing around and I will keep you posted in regards to some breakthroughs.

Best, https://about.me/teolopiparo?promo=email_sig&utm_source=product&utm_medium=email_sig&utm_campaign=gmail_api&utm_content=thumb Teo Lo Piparo

Il giorno mer 10 mar 2021 alle ore 20:58 Jonathan D. Trattner < notifications@github.com> ha scritto:

Hi! I'm not positive I understand your question, so if what I say below doesn't address it, please let me know!

If you're just trying to access the raw HTML so you can download it, the documentation here https://github.com/jdtrat/shinymarkdown#accessing-the-editors-contents covers that. I might suggest writeLines() to save it as a file. That said, there is a bug when bolding and italicizing for the WYSIWYG editor (see #2 https://github.com/jdtrat/shinymarkdown/issues/2). I'm working on a solution for that now, so if that's what the problem is, I (unfortunately) can't help yet.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/jdtrat/shinymarkdown/issues/4#issuecomment-796000598, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIZV5F3FPIPXZBLR4HE2OD3TC66MNANCNFSM4Y56P5IA .

jdtrat commented 3 years ago

I'm not exactly sure what you mean. Do you want to take the HTML output from the editor and -- with the CSS styling already defined -- use it somewhere else?

For the checkboxes, they are updating on my end. Could you provide a reprex?

I also fixed #2, so if you are using the WYSIWYG editor, it should work better now.

Teolone88 commented 3 years ago

Hi Jonathan,

I have fixed with later CSS as per your suggestion. However, the last thing that would enhance the package, would be picture resizing. Is there a place where I can read to fix this?

Best, https://about.me/teolopiparo?promo=email_sig&utm_source=product&utm_medium=email_sig&utm_campaign=gmail_api&utm_content=thumb Teo Lo Piparo

Il giorno sab 13 mar 2021 alle ore 01:46 Jonathan D. Trattner < @.***> ha scritto:

I'm not exactly sure what you mean. Do you want to take the HTML output from the editor and -- with the CSS styling already defined -- use it somewhere else?

For the checkboxes, they are updating on my end. Could you provide a reprex?

I also fixed #2 https://github.com/jdtrat/shinymarkdown/issues/2, so if you are using the WYSIWYG editor, it should work better now.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/jdtrat/shinymarkdown/issues/4#issuecomment-797834235, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIZV5F2UY4XAFR66QGAYIH3TDKRWJANCNFSM4Y56P5IA .

jdtrat commented 3 years ago

Hi Teo!

I just looked into image resizing briefly and will see about implementing that feature. It's an open issue with the underlying JS library {shinymarkdown} packages, so I'm not sure whether or not we'd be able to implement that seamlessly. As discussed there, if you're using the markdown editor, you can always use HTML:

<img src="..." style="width:50%; height:50%; float:right;" />

Regarding your CSS fix, would you mind sharing an example of what you mean/what you did?

Thanks!

Teolone88 commented 3 years ago

Hi Jonathan,

Within the DownloadHandler I am forcing some gsub with the followings:

Here's the new code to help users download data

output$print <- downloadHandler(

supply input$Export1 as an argument to customize the filename

filename = function(){

    str <- "my_report.html"
  return(str)
},
content = function(con){

  tmp_html <- gsub("\"", "\'",  paste0('<html>',
                 '<head><style>blockquote {margin: 14px 0;border-left:

4px solid #e5e5e5;padding: 0 16px;color: #999;} ul li {cursor: pointer;position: relative;padding: 12px;list-style-type: none;transition: 0.2s;} .tui-editor-contents code {color: #c1798b;background-color:

f9f2f4;padding: 2px 3px;letter-spacing: -.3px;border-radius: 2px;} code

{padding: 2px 4px;font-size: 90%;color: #c7254e;background-color:

f9f2f4;border-radius: 4px;}',

                 'pre {display: block;padding: 9.5px;margin: 0 0

10px;font-size: 13px;line-height: 1.42857143;color: #333;word-break: break-all;word-wrap: break-word;background-color: #f5f5f5;border: 1px solid

ccc;border-radius: 4px;}',

                 '.tui-editor-contents table th {background-color:

555;font-weight: 300;color: #fff;padding-top: 6px;}',

                 '.tui-editor-contents table td, .tui-editor-contents

table th {border: 1px solid rgba(0,0,0,.1);padding: 5px 14px 5px 12px;height: 32px;}', '.tui-editor-contents :not(table) {line-height: 160%;box-sizing: content-box;} .tui-editor-contents .task-list-item:before {background-repeat: no-repeat;background-size: 18px 18px;background-position: 50%;content: "";margin-left: 0;margin-top: 0;border-radius: 0;height: 18px;width: 18px;position: absolute;left: 0;top: 1px;cursor: pointer;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR…xA0jxqEFJg4GCOhhGOgEESHg0jpMDAwRx8YQQuj0DlCaUAAEdBCPJ7TaEPAAAAAElFTkSuQmCC);}', '.tui-editor-contents ol>li:before, .tui-editor-contents ul>li:before {display: inline-block;position: absolute;}', '.tui-editor-contents .task-list-item {border: 0;list-style: none;padding-left: 24px;margin-left: -24px;}', 'table {display: table;border-collapse: separate;border-spacing: 2px;border-color: grey;}', '<link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css/

', '', '','Report','', '', '', input$report_html, '', '')) txt <- gsub("task=''>","task=''>", tmp_html) txt <- gsub(">", ">\n", HTML(txt))

  cat(txt, "text", file=con)
}

)

However, in regards to the resizing I have found this option but I am not able to continue due to my lack of js /jquery knowledge.

If you can wrap the img in a div with the following class ".resize-drag" you can use the following js script to manipulate the image.

tags$script(type="text/javascript", src = "

https://unpkg.com/interactjs/dist/interact.min.js")

js <- "interact('.resize-drag')

.resizable({ // resize from all edges and corners edges: { left: true, right: true, bottom: true, top: true },

listeners: { move (event) { var target = event.target var x = (parseFloat(target.getAttribute('data-x')) || 0) var y = (parseFloat(target.getAttribute('data-y')) || 0)

  // update the element's style
    target.style.width = event.rect.width + 'px'
    target.style.height = event.rect.height + 'px'
    // translate when resizing from top or left edges
    x += event.deltaRect.left
    y += event.deltaRect.top
    target.style.webkitTransform = target.style.transform =
      'translate(' + x + 'px,' + y + 'px)'
    target.setAttribute('data-x', x)
    target.setAttribute('data-y', y)
    target.textContent = Math.round(event.rect.width) + '\u00D7' +

Math.round(event.rect.height) } }, modifiers: [ // keep the edges inside the parent interact.modifiers.restrictEdges({ outer: 'parent' }), // minimum size interact.modifiers.restrictSize({ min: { width: 100, height: 50 } }) ], inertia: true }) .draggable({ listeners: { move: window.dragMoveListener }, inertia: true, modifiers: [ interact.modifiers.restrictRect({ restriction: 'parent', endOnly: true }) ] })"

The problem is that

1) I am not able to automatically populate the div wrapper with that class name 2) Once the div is resized, the disappears and you need to reattach or re-upload it.

[image: image.png]

I have tried the followings but I am not able to make it work:

js2 <- "$(document).ready(function () {

$('.post img').wrap('

'); });"

js3 <- "var images = document.getElementsByTagName('img');

var mainpictureframe = document.getElementsByClass('.te-editor')[0]; var len = images.length; while (len--) { var wrapper = document.createElement('div'); var image = mainpictureframe.removeChild(images[0]); wrapper.appendChild(image); mainpictureframe.appendChild('<' + wrapper + ' class='resize-drag'>'); }"

I hope the above could be a start, but as I said before, I am a total n00b with js.

Your support would mean a lot to me.

Best, https://about.me/teolopiparo?promo=email_sig&utm_source=product&utm_medium=email_sig&utm_campaign=gmail_api&utm_content=thumb Teo Lo Piparo

Il giorno sab 13 mar 2021 alle ore 18:35 Jonathan D. Trattner < @.***> ha scritto:

Hi Teo!

I just looked into image resizing briefly and will see about implementing that feature. It's an open issue https://github.com/nhn/tui.editor/issues/861 with the underlying JS library {shinymarkdown} packages, so I'm not sure whether or not we'd be able to implement that seamlessly. As discussed there, if you're using the markdown editor, you can always use HTML:

Regarding your CSS fix, would you mind sharing an example of what you mean/what you did?

Thanks!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/jdtrat/shinymarkdown/issues/4#issuecomment-798675766, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIZV5F5CMZHMZ5DIDWGVJITTDOH4RANCNFSM4Y56P5IA .

Teolone88 commented 3 years ago

Hi Jonathan,

I have managed to stick the pic in the resizable div but I still need to auto populate or rename the wrapping div with class="resize-drag" within the "#te-editor" container

[image: image.png]

I think this is an easy task for you. Could you facilitate my learning on this issue?

I will send you the reprex once fixed, so you can update your library.

Best, https://about.me/teolopiparo?promo=email_sig&utm_source=product&utm_medium=email_sig&utm_campaign=gmail_api&utm_content=thumb Teo Lo Piparo

Il giorno lun 15 mar 2021 alle ore 12:07 teo lo piparo < @.***> ha scritto:

Hi Jonathan,

Within the DownloadHandler I am forcing some gsub with the followings:

Here's the new code to help users download data

output$print <- downloadHandler(

supply input$Export1 as an argument to customize the filename

filename = function(){

    str <- "my_report.html"
  return(str)
},
content = function(con){

  tmp_html <- gsub("\"", "\'",  paste0('<html>',
                 '<head><style>blockquote {margin: 14px

0;border-left: 4px solid #e5e5e5;padding: 0 16px;color: #999;} ul li {cursor: pointer;position: relative;padding: 12px;list-style-type: none;transition: 0.2s;} .tui-editor-contents code {color:

c1798b;background-color: #f9f2f4;padding: 2px 3px;letter-spacing:

-.3px;border-radius: 2px;} code {padding: 2px 4px;font-size: 90%;color:

c7254e;background-color: #f9f2f4;border-radius: 4px;}',

                 'pre {display: block;padding: 9.5px;margin: 0 0

10px;font-size: 13px;line-height: 1.42857143;color: #333;word-break: break-all;word-wrap: break-word;background-color: #f5f5f5;border: 1px solid

ccc;border-radius: 4px;}',

                 '.tui-editor-contents table th {background-color:

555;font-weight: 300;color: #fff;padding-top: 6px;}',

                 '.tui-editor-contents table td, .tui-editor-contents

table th {border: 1px solid rgba(0,0,0,.1);padding: 5px 14px 5px 12px;height: 32px;}', '.tui-editor-contents :not(table) {line-height: 160%;box-sizing: content-box;} .tui-editor-contents .task-list-item:before {background-repeat: no-repeat;background-size: 18px 18px;background-position: 50%;content: "";margin-left: 0;margin-top: 0;border-radius: 0;height: 18px;width: 18px;position: absolute;left: 0;top: 1px;cursor: pointer;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR…xA0jxqEFJg4GCOhhGOgEESHg0jpMDAwRx8YQQuj0DlCaUAAEdBCPJ7TaEPAAAAAElFTkSuQmCC);}', '.tui-editor-contents ol>li:before, .tui-editor-contents ul>li:before {display: inline-block;position: absolute;}', '.tui-editor-contents .task-list-item {border: 0;list-style: none;padding-left: 24px;margin-left: -24px;}', 'table {display: table;border-collapse: separate;border-spacing: 2px;border-color: grey;}', '<link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css/

', '', '','Report','', '', '', input$report_html, '', '')) txt <- gsub("task=''>","task=''>", tmp_html) txt <- gsub(">", ">\n", HTML(txt))

  cat(txt, "text", file=con)
}

)

However, in regards to the resizing I have found this option but I am not able to continue due to my lack of js /jquery knowledge.

If you can wrap the img in a div with the following class ".resize-drag" you can use the following js script to manipulate the image.

tags$script(type="text/javascript", src = "

https://unpkg.com/interactjs/dist/interact.min.js")

js <- "interact('.resize-drag')

.resizable({ // resize from all edges and corners edges: { left: true, right: true, bottom: true, top: true },

listeners: { move (event) { var target = event.target var x = (parseFloat(target.getAttribute('data-x')) || 0) var y = (parseFloat(target.getAttribute('data-y')) || 0)

  // update the element's style
    target.style.width = event.rect.width + 'px'
    target.style.height = event.rect.height + 'px'
    // translate when resizing from top or left edges
    x += event.deltaRect.left
    y += event.deltaRect.top
    target.style.webkitTransform = target.style.transform =
      'translate(' + x + 'px,' + y + 'px)'
    target.setAttribute('data-x', x)
    target.setAttribute('data-y', y)
    target.textContent = Math.round(event.rect.width) + '\u00D7' +

Math.round(event.rect.height) } }, modifiers: [ // keep the edges inside the parent interact.modifiers.restrictEdges({ outer: 'parent' }), // minimum size interact.modifiers.restrictSize({ min: { width: 100, height: 50 } }) ], inertia: true }) .draggable({ listeners: { move: window.dragMoveListener }, inertia: true, modifiers: [ interact.modifiers.restrictRect({ restriction: 'parent', endOnly: true }) ] })"

The problem is that

1) I am not able to automatically populate the div wrapper with that class name 2) Once the div is resized, the disappears and you need to reattach or re-upload it.

[image: image.png]

I have tried the followings but I am not able to make it work:

js2 <- "$(document).ready(function () {

$('.post img').wrap('

'); });"

js3 <- "var images = document.getElementsByTagName('img');

var mainpictureframe = document.getElementsByClass('.te-editor')[0]; var len = images.length; while (len--) { var wrapper = document.createElement('div'); var image = mainpictureframe.removeChild(images[0]); wrapper.appendChild(image); mainpictureframe.appendChild('<' + wrapper + ' class='resize-drag'>'); }"

I hope the above could be a start, but as I said before, I am a total n00b with js.

Your support would mean a lot to me.

Best,

https://about.me/teolopiparo?promo=email_sig&utm_source=product&utm_medium=email_sig&utm_campaign=gmail_api&utm_content=thumb Teo Lo Piparo

Il giorno sab 13 mar 2021 alle ore 18:35 Jonathan D. Trattner < @.***> ha scritto:

Hi Teo!

I just looked into image resizing briefly and will see about implementing that feature. It's an open issue https://github.com/nhn/tui.editor/issues/861 with the underlying JS library {shinymarkdown} packages, so I'm not sure whether or not we'd be able to implement that seamlessly. As discussed there, if you're using the markdown editor, you can always use HTML:

Regarding your CSS fix, would you mind sharing an example of what you mean/what you did?

Thanks!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/jdtrat/shinymarkdown/issues/4#issuecomment-798675766, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIZV5F5CMZHMZ5DIDWGVJITTDOH4RANCNFSM4Y56P5IA .

jdtrat commented 3 years ago

Hi Teo!

I think this is great work! I will look at the downloadHandler in more detail later and maybe we can integrate something like that with the editor, as well.

Regarding your JS question, did you wrap the image in just an empty div or does that div have a specific class/id? If the latter, I think the easiest thing would be to use jQuery to add the class like such:

// for a class "wrapperClass"
$(".wrapperClass").addClass("resize-drag");

// for an id "wrapperId"
$("#wrapperId").addClass("resize-drag");

If that doesn't help, let me know and I can send more suggestions!

Teolone88 commented 3 years ago

Hi Jonathan,

The division is by default an empty tag.

[image: image.png]

However, by adding the class "resize-drag" you get the CSS around the div with the interact library in action for the resizing.

[image: image.png]

Unfortunately, there is no id, class, css referenced to that wrapping div.. I have tried to loop through the img and addClass to the nearest div, but unsuccessfully. If you classify the img with the "resize-drag" the image resizing is buggy and I'd like to skip that option.

The JQuery provided is great if the div contains something, I think. Furthermore, additional gsub/CSS is necessary if you want to reflect the resized img in the downloadHandler, but I will work on that.

Let me know if you could pull off a JQuery/JSVanilla that can dynamically assign a class/css to the empty wrapping div.

Best, https://about.me/teolopiparo?promo=email_sig&utm_source=product&utm_medium=email_sig&utm_campaign=gmail_api&utm_content=thumb Teo Lo Piparo

Il giorno lun 15 mar 2021 alle ore 15:28 Jonathan D. Trattner < @.***> ha scritto:

Hi Teo!

I think this is great work! I will look at the downloadHandler in more detail later and maybe we can integrate something like that with the editor, as well.

Regarding your JS question, did you wrap the image in just an empty div or does that div have a specific class/id? If the latter, I think the easiest thing would be to use jQuery to add the class like such:

// for a class "wrapperClass"$(".wrapperClass").addClass("resize-drag"); // for an id "wrapperId"$("#wrapperId").addClass("resize-drag");

If that doesn't help, let me know and I can send more suggestions!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/jdtrat/shinymarkdown/issues/4#issuecomment-799463997, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIZV5F76M6CJLIU3MB5XLUTTDYKO7ANCNFSM4Y56P5IA .

jdtrat commented 3 years ago

Hi Teo,

Are you trying to attach images? If so, I don't see anything. Would you be able to provide some code that I could look at to help troubleshoot? I'm having trouble visualizing what the issue is exactly.

Thanks so much!

Teolone88 commented 3 years ago

Hi Jonathan,

The ToastUI library in R creates an empty wrapping div for every picture that you upload or paste. The issue is that the wrapping div should have a class, in my case called " resize-drag", but I do not know how to dynamically assign such class to that wrapping div around the img tag. The assignment of that class should be confined in the ".te-editor" container div and not in the whole website.

Your suggestions are really helpful, but this works only if the wrapping div has a class or id assigned to it, which is not our case.

// for a class "wrapperClass"

$(".wrapperClass").addClass("resize-drag"); // for an id "wrapperId"

$("#wrapperId").addClass("resize-drag");

Our case is the following:

$("NA").addClass("resize-drag"); // for an id "wrapperId"

$("NA").addClass("resize-drag");

At the moment I am manually assigning the class using chrome inspect option in the context menu, but it should be generated automatically.

I have tried to replicate your aforementioned logic by using the following:

$('div:not([class])').attr({ class: 'resize-drag'});

However, it applies a class to all the div that have no class in them for the whole website, and does not interact with the rich editor, so is not an option for me.

I have tried also the below js injections but unsuccessfully:

$('.tui-editor-contents').ready(function(){$('img').closest('div').addClass('resize-drag')});

OR js vanilla

var images = document.getElementsByTagName('.resize-drag');

var mainpictureframe = document.getElementsByClass('.te-editor')[0];

var len = images.length;

while (len--) {

var wrapper = document.createElement('<div

",'class="resize-drag">

',");

var image = mainpictureframe.removeChild(images[0]);

wrapper.appendChild(image);

mainpictureframe.appendChild('<' + wrapper + ' class='resize-drag'>');}

Once this is fixed I can work on reflecting the html in the downloadHandler to get the height and width of the respectively img tag.

I'd love to connect with you in a video call if this helps you.

The rich editor text is a powerful feature for every shiny application, and I really need it to parse and work correctly for my application to be finished. Unfortunately, the other rich editor packages, or are become pay-to-use or are confined to the programming code input, and the "shinymarkdown" package is the only one available that allows you to have rich text editor in your application so I really want to help you in this.

Best, https://about.me/teolopiparo?promo=email_sig&utm_source=product&utm_medium=email_sig&utm_campaign=gmail_api&utm_content=thumb Teo Lo Piparo

Il giorno mar 16 mar 2021 alle ore 22:44 Jonathan D. Trattner < @.***> ha scritto:

Hi Teo,

Are you trying to attach images? If so, I don't see anything. Would you be able to provide some code that I could look at to help troubleshoot? I'm having trouble visualizing what the issue is exactly.

Thanks so much!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/jdtrat/shinymarkdown/issues/4#issuecomment-800631461, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIZV5FY56DNOY6ZFLYRHRS3TD7GM3ANCNFSM4Y56P5IA .

jdtrat commented 3 years ago

Hi Teo! I've played around with it some and think I've run into similar issues that you did. Can you either send me a DM on twitter or reach out through the form on my website and we can find a time to video chat?

Teolone88 commented 3 years ago

Hi Jonathan,

I believe I found the underlining js code that affects the img, taken from " https://github.com/jdtrat/shinymarkdown/blob/main/inst/assets/js/toastui-editor-all.min.js "

var Ei = function(e) {

... }, i._applyImage = function(e, t) { this.eventManager.emit("command", "AddImage", {

  • imageUrl: e, altText: t || "image"*

Add the class here would probably add the "resize-drag" class within the img. "e" should represents the encoding of the img src "t" should represent the alt attribute, which changes depending on uploading the image or copy & paste the image Apparently, the eventManager is the library function for detecting events

...

                    }), this.hide()
                }, i._resetInputs = function() {
                    St.findAll(this.el, "input").forEach((function(e) {
                     *   e.value = ""*

This , I am not sure, but maybe you can also try to add the class "resize-drag" here.

...

                    }))
                }, i.remove = function() {
                    this.tab.remove(), e.prototype.remove.call(this)
                }, r
            }(di);
            var xi = function(e) {
                var t, n;

Another attempt could be done here, where we can add the attribute class " resize-drag" like is done for the "img' below.

htmlBlock: function(e, t) { var n = t.options, r = n.tagFilter ? o.filterDisallowedTags(e.literal) : e.literal; return n.nodeId ? [{

type: "openTag", tagName: "div", outerNewLine: !0 }, { type: "html", content: r }, {

type: "closeTag", tagName: "div", outerNewLine: !0,

image: function(e, t) { var n = t.getChildrenText, o = t.skipChildren, a = e, s = a.title, l = a.destination; return o(), {

I am also attaching the indented JS code, so it is easier to read.

If you could help me with the "how can I play with the library and reflect it in shiny markdown", I can surely be of any help and accelerate the process.

Best, https://about.me/teolopiparo?promo=email_sig&utm_source=product&utm_medium=email_sig&utm_campaign=gmail_api&utm_content=thumb Teo Lo Piparo

Il giorno ven 19 mar 2021 alle ore 20:47 Jonathan D. Trattner < @.***> ha scritto:

Hi Teo! I've played around with it some and think I've run into similar issues that you did. Can you either send me a DM on twitter http://twitter.com/jdtrat or reach out through the form on my website https://www.jdtrat.com and we can find a time to video chat?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/jdtrat/shinymarkdown/issues/4#issuecomment-803075135, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIZV5F6UKI5GB44FPWVBF3DTEOS4RANCNFSM4Y56P5IA .

Teolone88 commented 3 years ago

Hi Jonathan,

With the attached js library now, when you upload an image you get the class attached. To resize, you'll have to use dblclick-drag as the click is already taken. I have also included an id to the ".te-editor" div called "#te-editor-export" that contains the rich text. Would be great to have an export now, calling that id, but is again a wall to smash for me, and my head hurts :D https://about.me/teolopiparo?promo=email_sig&utm_source=product&utm_medium=email_sig&utm_campaign=gmail_api&utm_content=thumb Teo Lo Piparo

Il giorno dom 21 mar 2021 alle ore 11:49 teo lo piparo < @.***> ha scritto:

Hi Jonathan,

I believe I found the underlining js code that affects the img, taken from " https://github.com/jdtrat/shinymarkdown/blob/main/inst/assets/js/toastui-editor-all.min.js "

var Ei = function(e) {

... }, i._applyImage = function(e, t) { this.eventManager.emit("command", "AddImage", {

  • imageUrl: e, altText: t || "image"*

Add the class here would probably add the "resize-drag" class within the img. "e" should represents the encoding of the img src "t" should represent the alt attribute, which changes depending on uploading the image or copy & paste the image Apparently, the eventManager is the library function for detecting events

...

                    }), this.hide()
                }, i._resetInputs = function() {
                    St.findAll(this.el, "input").forEach((function(e)

{

  • e.value = ""*

This , I am not sure, but maybe you can also try to add the class "resize-drag" here.

...

                    }))
                }, i.remove = function() {
                    this.tab.remove(), e.prototype.remove.call(this)
                }, r
            }(di);
            var xi = function(e) {
                var t, n;

Another attempt could be done here, where we can add the attribute class " resize-drag" like is done for the "img' below.

htmlBlock: function(e, t) { var n = t.options, r = n.tagFilter ? o.filterDisallowedTags(e.literal) : e.literal; return n.nodeId ? [{

type: "openTag", tagName: "div", outerNewLine: !0 }, { type: "html", content: r }, {

type: "closeTag", tagName: "div", outerNewLine: !0,

  • attributes: r.__assign({*

  • ---------------> class: "resize-drag" })* }] : { type: "html", content: r, outerNewLine: !0 } },

image: function(e, t) { var n = t.getChildrenText, o = t.skipChildren, a = e, s = a.title, l = a.destination; return o(), {

  • type: "openTag", tagName: "img",* selfClose: !0,

  • attributes: r.__assign({ src: i.escapeXml(l), alt: n(e),*

  • ---------------> class: "resize-drag" },* s && { title: i.escapeXml(s) }) } }

I am also attaching the indented JS code, so it is easier to read.

If you could help me with the "how can I play with the library and reflect it in shiny markdown", I can surely be of any help and accelerate the process.

Best,

https://about.me/teolopiparo?promo=email_sig&utm_source=product&utm_medium=email_sig&utm_campaign=gmail_api&utm_content=thumb Teo Lo Piparo

Il giorno ven 19 mar 2021 alle ore 20:47 Jonathan D. Trattner < @.***> ha scritto:

Hi Teo! I've played around with it some and think I've run into similar issues that you did. Can you either send me a DM on twitter http://twitter.com/jdtrat or reach out through the form on my website https://www.jdtrat.com and we can find a time to video chat?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/jdtrat/shinymarkdown/issues/4#issuecomment-803075135, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIZV5F6UKI5GB44FPWVBF3DTEOS4RANCNFSM4Y56P5IA .

/*!