Html type in the canvas : display errors and cleaning the code

Making Packs
1

Hello,

On the way to building a pack for the telegra.ph API, i hit a snag.
80% of the pack works. Now for the biggest parts: displaying content imported from telegra.ph… I would even like to be able to use the new two-way sync table. :exploding_head:

Here’s how it works…

The step to import content from telegra.ph :
JSON (ok) >> Html (ok) > Display in a canvas (ko)

My page for tests : Test Html Edit – Telegraph

In the schema, i use :

content_html_flat: { type: coda.ValueType.String,},
content_html: { type: coda.ValueType.String, codaType:  coda.ValueHintType.Html },

Here’s what it looks like:

Capture d’écran du 2023-11-09 22-18-18
Capture d’écran du 2023-11-09 22-18-181164×714 177 KB

I noticed that the images were displayed poorly… Same for the embeds.

I also tried to use ToHtml function from the pack Rich Text Tools Pack, extend Coda with Rich Text... - Coda but it adds a lot of style. So i think i have to clean the code and to transform some tags :

  • figure
  • figcaption
  • iframe

I tried to use sanitize-html to clean up the code.
But i get an error :

Error while finalizing pack version
message: 'Dynamic code evaluation not allowed'

When the display in the canva will be correct, i will work on the other way to create a page:
Canvas > Html > JSON

Anybody have a exhaustive list of the html tag use in the canvas?
Any idea to sanitize the code?
In the pack Rich Text Tools, the formula pass through the API?

2

Hi @j.b_o - It is correct that while Coda can display HTML as rich text, it doesn’t have support for all HTML elements and features. You can see some examples of what does and doesn’t work here:

Cleaning up the HTML before you return it to Coda is a good idea, although I’m not sure that specific library will perform. The error you are seeing is because somewhere in the library it is using an eval() expression, which we don’t allow in Packs. You could try to find an alternative library, or try to do some of the cleaning yourself.

I authored the Rich Text Tools Pack and it just uses the same HTML/Markdown parsing and rendering that is build into the Packs SDK. You can see the full source code of the Pack here:

3

Thank you very much for these documents which were of great help to me.

I told myself that I was going to use markdown, because the telegra.ph editor is basic… But ultimately, I have line break problems which are less present when using HTML.

Capture d’écran du 2023-11-13 22-57-23
Capture d’écran du 2023-11-13 22-57-231672×900 326 KB

I noticed :

  • it’s not possible to modify the display type of the embed (youtube, vimeo)
  • the use of the text field instead of the canva is also a difficulty because it is no longer possible to add or modify an image or a video

Finally, the display is correct.
However i am not sure i could implement the page creation or edition in a two-way sync table.

4

Hello,

I finally chose to release the pack without two-way synchronized tables. Too complicated to implement without using the canva field. It is nevertheless possible to create a custom table to have similar workflow.

I’m going to look into an explanation template.

All feedback are welcome.

Thank you for the help.

[edit]

5

Hi @j.b_o - The link to your Pack didn’t work for me, are you sure it was both released and published?

6

Hello @Eric_Koleda ,
Thank you for your message. In fact, I had not published the pack :man_facepalming:
I edited my initial post to reflect the change.