[webkit-gtk] Interface between embedded Javascript and the main GTK app

Fri Jan 3 05:22:45 PST 2025

Thank you very  much Michael! Finally I was able to get to this project.
The idea is to create a small GTK-based text editor with live preview for
[djot](https://github.com/jgm/djot.js).

I've managed to advance a bit (see the attached file) and now need to know
how exactly to interact with the javascript in both direction (main GTK app
<-> JS inside WebKitGTK).

Please consider this HTML document (you can copy/paste it and open in your
browser):

<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Djot in the browser</title>
</head>
<body>
  <div id="preview"></div>
  <hr>
  <div id="parse-events"></div>
  <div id="djot-source" style="display: none;">
    # djot rendering

    _Hello there_

    this is *djot* preview!
  </div>

  <script src="https://unpkg.com/@djot/djot@0.2.5/dist/djot.js"></script>
  <script>
    // Preview rendered djot source text
    const djotContent = document.getElementById('djot-source').innerHTML;
    const ast = djot.parse(djotContent, { sourcePositions: true });
    const htmlContent = djot.renderHTML(ast);
    document.getElementById('preview').innerHTML = htmlContent;

    // Parsing events list
    const events = djot.parseEvents(djotContent, { sourcePositions: true });
    for (let event of events) {
      document.getElementById('parse-events').innerHTML +=
JSON.stringify(event) + "<br>";
    }
  </script>
</body>
</html>

1. How can I supply a string (in this case - djotContent) from the main GTK
app to the djot.parse(djotContent, { sourcePositions: true }) function
(instead of keeping it inside <div id="djot-source" style="display:
none;">)?

2. How can I get the events string directly from
djot.parseEvents(djotContent, { sourcePositions: true }) to the main GTK
app, instead of pushing it inside <div id="parse-events"></div> ?

Thank you in advance!

On Sun, Aug 18, 2024 at 3:32 PM Michael Catanzaro <mcatanzaro at redhat.com>
wrote:

> On Sun, Aug 18 2024 at 12:25:08 PM +01:00:00, Gavin Smith
> <gavinsmith0123 at gmail.com> wrote:
> > It has been a few years since I worked on this and there may be better
> > ways of doing this.
>
> Easiest way to send a simple message: in JS, call
> `window.webkit.messageHandlers.foo.postMessage()` to activate a UI
> process callback that you register with
> WebKitUserContentManager::script-message-received
>
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-gtk/attachments/20250103/d560f056/attachment-0001.htm>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Djot-previewer.webm
Type: video/webm
Size: 78715 bytes
Desc: not available
URL: <http://lists.webkit.org/pipermail/webkit-gtk/attachments/20250103/d560f056/attachment-0001.webm>