Support Substack

[gustavo-depaula]

The extension is great for doing code blocks in Medium. Any thoughts on supporting Substack, or do you know a similar solution to substack?

[Maluen]

No plans on supporting Substack for now, as this extension was designed and built with medium only in mind. I've never used Substack myself so first we would indeed have to look at the current solutions and at the editor itself.

A main requirement is for them to allow gist embedding. From a quick search looks like it isn't possible?

[gustavo-depaula]

@Maluen it is possible:

But IDK why this text about bidirectional unicode text happens

[Maluen]

The unicode warning is specific to gist, see https://github.blog/changelog/2021-10-31-warning-about-bidirectional-unicode-text/ I suggest trying with other gists, e.g. by creating one from scratch.

Substack supporting gist is a good first step as we can reuse all the background part of the extension and also all the UI for creating/updating gists/logging-in.

So the part still left to implement would be extending their WYSIWYG editor:

• button to show the "create new gist UI"
• double click on existing gists to edit them
• CSS to make sure the extension UI doesn't break their editor.

[gustavo-depaula]

Hey! I was able to create a new service to show the button:

But for some reason the event listeners don't seem to work inside the dropdown... Even when using window.addEventListener("click", console.log), clicks on the dropdown items are not triggering clicks. Maybe there are some event.stopPropagation/preventDefault that are "swallowing" these events?

Here's how I'm creating the button: gustavo-depaula@bf3a063#diff-32bbb3346e15f8054cffefe0a61d4a814a64dcf6d61674aeda6795c56ce21c6bR68-R82

[Maluen]

Hey! I was able to create a new service to show the button:

Nice work! Looks promising! I think in terms of CSS we'll have to separate the medium styles from the substack styles to limit regressions. E.g. by using a different CSS file for each (with some common imported styles if needed, better if not).

Maybe there are some event.stopPropagation/preventDefault that are "swallowing" these events?

I'll have to check on the actual website. The last resort is window.addEventListener("click", handler, true) (notice the third argument being true), where the handler function checks if event.target is the button or an element inside the button.

You can first try passing true when attaching the event to the element itself buttonEl.addEventListener('click', this.handleCreateGistClick, true);

[gustavo-depaula]

I think in terms of CSS we'll have to separate the medium styles from the substack styles to limit regressions.

Absolutely! I'm just trying to get it to work before doing all these design/architectural decisions.

You can first try passing true when attaching the event to the element itself

It didn't work... Might it perhaps be because it's not button?

[Maluen]

I've checked the substack editor. The dropdown closes on mousedown, thus the click never registers. Code below works:

buttonEl.addEventListener('mousedown', this.handleCreateGistClick);

The handleCreateGistClick needs to be adapted for substack as with other functions.

[Maluen]

See #12 and 465f7c2

I've also changed insertGistIntoPost to simulate a paste event with the gist URL.

For gist editing, I've noticed that they are not embedding the IFRAME with the gist, they are actually pulling the HTML and adding it inside a regular DIV. This means a different method needs to be used to update the gist.

[Maluen]

3e10589

• Added dblclick handler to trigger edit UI when double clicking on gists.
• Added code to delete a gist (`deleteGistIntoPost')

The main thing still left to do in SubstackService is the updateGistIntoPost function, which is supposed to refresh a gist with its new version after the editing is finished. For now I've tried deleting and then repasting the gist URL, but for some reasons the editor reads it as a plain URL and doesn't convert it into an embed. Will need to find a workaround.

[gustavo-depaula]

Nice!! Wouldn't have found the event stuff. Thanks

I think it might be a problem with the link itself. Pasting manually:

https://gist.github.com/gustavo-depaula/aeeccfa7056acf75836b57a23c063c89  -> this creates an embed
https://gist.github.com/aeeccfa7056acf75836b57a23c063c89 -> this doesn't

(the difference is the username, that must be simple to inject, gonna try it)

[gustavo-depaula]

done the username injection in gustavo-depaula@d46cd3f

insertion is now working as expected:

[gustavo-depaula]

Here's what I'm thinking about update: we could trigger a delete/backspace, that would delete the current embed, and then call the insert function again. That would fetch the new content