feat: add support for mixed html/js content

[delca85]

Working on #10 , I have enabled:

1. html mixed mode in MarkupEditor, syntax highlighting working even for js script now
2. script tag are now retrieved in Preview component and evaluated through window.eval. Before markup is passed as Scrollable child in dangerouslySetInnerHtml all the script elements are removed.

Right now, this kind of code:

<label for="checkbox">Check</label>
<input
  id="checkbox"
  type="checkbox"
/>
<button id="btn">
  Accept
</button>

<button id="btn2">
Decline
</button>

<script>
  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    alert('click');
  });
</script>

<script>
  const btn2 = document.getElementById('btn2');
  btn2.addEventListener('click', () => {
    alert('click no');
  });
</script>

can be inserted by the user and the result is an interactive Preview panel.

[smeijer]

The branch is looking great! It's already very useful. But I do have a few concerns. See the two comments below.

Also, the scripts aren't evaluated on page load. When pressing F5 or when opening a reply from a shared link, I first need to edit the markdown manually, to trigger the evals.

[smeijer]

This doesn't remove script elements that specify the type attribute. Type attributes for script elements default to text/javascript, but it's still a valid attribute to provide. 🙂

[delca85]

Yes, totally right! I am going to fix it!

[smeijer]

This also parses script elements of other types than javascript. For example <script type="text/css">. Type attributes for script elements default to text/javascript, so we should only extract script elements without a type attribute, or with a type === "text/javascript"

<script type="text/javascript">
  document.getElementById('btn').addEventListener('click', () => {
    alert('click');
  });
</script>

See also this repl.

[delca85]

Got it! I am going to fix it again!

[delca85]

Regarding the first comment, the one about the missed evaluation on page loading maybe I have some idea to fix it. I should try!

[delca85]

I should have fixed the issues you highlighted.
Regarding the problem that no script was evaluated on component mount, the problem was that useEffect runs before Scrollable children are rendered so I added a check on htmlRoot.current to make the effect runs again when children are rendered.
Furthermore I replaced usage of eval with new Function which should be a little safer.

A remaining issue is that if the user modifies the script code in MarkupEditor, the script is evaluate one time for each inserted char and this behavior affects the user experience. I am considering the idea of throttling the evaluation call but I would be glad to hear your thoughts.

[delca85]

I have moved try catch block inside the forEach function, because in the first version if a script failed all the scripts evaluation were be aborted. I added an alert to notify the user that he has inserted a failing script but it has just an idea!

[delca85]

I have prepared a fix to keep track of the already evaluated script, I could push it too if it's ok to you.

[delca85]

I am going to push it because I won't be able to do that during this morning, if that fix doesn't sound good to you I will turn it back!

[delca85]

Hi @smeijer ! I don't wanna to hurry you, but reading again my comments worry me that I haven't been so clear. I already pushed all the code I have for this feature and I would like to receive your thoughts.
(reading my comments made me wonder if you were still waiting for some code)

[smeijer]

Hi @delca85.

I'll do my best to check it today. Thanks for the reminder 👍

[smeijer]

@delca85, Thanks so much for your help!

I've added you as a 🐸 collaborator on the project. Please make sure that you review the MAINTAINING.md and CONTRIBUTING.md files (specifically the bit about the commit messages and the git hooks) and familiarize yourself with the code of conduct (we're using the contributor covenant).

You might also want to watch the repo to be notified when someone files an issue/PR. Please continue to make PRs as you feel the need (you can make your branches directly on the repo rather than your fork if you want).

Thanks! And welcome to the team 🎉

[delca85]

Wow! Thank you @smeijer! I am really really happy and excited about it. I'll keep on doing my best to collaborate to this awesome project. 🎉 🥳