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/[email protected]/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 <[email protected]>
wrote:
> On Sun, Aug 18 2024 at 12:25:08 PM +01:00:00, Gavin Smith
> <[email protected]> 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
>
>
>
Djot-previewer.webm
Description: video/webm
_______________________________________________ webkit-gtk mailing list [email protected] https://lists.webkit.org/mailman/listinfo/webkit-gtk
