practical copy/paste clipboard model of recent web HTML5 browsers?

I have difficulties in understanding the conceptual model of the copy/paste clipboard in recent HTML5 browsers (e.g. a Firefox 60.7 or a Chrome 75.0, on Linux/Debian, released this year in 2019). This is in the context of the Bismon applied research project, with a low TRL, which provides some domain specific, dynamic and transpiled language (also called Bismon), already has a Web interface generic machinery conceptually inspired by ocsigen, and is orthogonally persistent.

In X11, the model (see ICCCM & EWMH) starts by negotiating a common data format. This is why we can copy/paste images and rich text from Firefox to Libreoffice.

But let’s suppose I have two instances (running on two different Linux hosts) of the same single-page web application : it is bismon, a GPLv3+ “research prototype” software which is some specialized HTTP server above libonion, with already existing components generating C – bismon is a transpiler -, JavaScript & HTML5 (the CSS being handwritten by me) running in two different tabs of the same Linux browser. Both tabs are running some syntactic editor (in their specialized bismon web servers), so are manipulating abstract syntax trees (textually representable in some textual serialized format, conceptually like S-expressions, XML, YAML or JSON – and without loss of generality it could be exactly some JSON). And I want to copy/paste one abstract syntax sub-tree from one tab to another. My continuously updated Bismon draft report gives further details, notably in its chapter 4. There is an already working, but very incomplete, Web interface in bismon commit 980c2d6ff2df2 with a working login form (similar in functionality to the StackOverflow login form) setting some HTTP session cookie, in practice quite a random and unique one, such as BISMONCOOKIE=n000041R970099188t330716425o_6IHYL1fOROi_58xJPnBLCTe. Every user (so every Bismon web browser tab) is allowed to interact, in a single page application fashion, only after having successfully logged in (conceptually analog to StackOverflow login procedure). Hence, exactly like I could have two StackOverflow users and login to them in two different web browser tabs, I might have two or three Bismon web browser tabs logged in (from Bismon’s perpective) differently. Each of these tabs is a single page application browser tab (with a different and unique BISMONCOOKIE). Here is an already working example of Bismon login form (with ./bismon serving, for HTTP thru libonion, on port 8086 of localhost): Bismon login form

After a successful login, Bismon gives the following generated XHTML5:

 <?xml version="1.0" encoding="utf-8"?>  <!DOCTYPE html>  <html xmlns="">    <head >     <title >Bismon</title>    <script src="/jscript/jquery.js" type="text/javascript"/>    <script src='/jscript/jquery-ui.js' type='text/javascript'/>    <script src='/bismon-root-jsmodule.js' type="text/javascript"/>    <script src='/jscript/bismon-hwroot.js' type="module"/>    <link href='/themes/first-theme.css' rel='stylesheet' type='text/css'/>    <link href='/css/jquery-ui.css' rel='stylesheet' type='text/css'/>   </head>   <body >     <h1 >Bismon</h1>    <nav class='bmcl_topnav' id='topnav_8LMWqayq5sW_9G2xsSpA0yS' >      &#9755;     <button class='bmcl_topbut' id='topbut_4m9twhDXB7k_88CBTgLfGvs' >  App </button>    </nav>    <p class='bmcl_hellopara' id='hellop_0uAT1v6dH9d_1o3q8wzbV7K' >  Hello Basile Starynkevitch  your web session is  <tt class='bmcl_cookie'>BISMONCOOKIE=n000001R59317675t289012178o_5FKgTFl64f2_2h8Y79EvsK7</tt> </p>    <ul class='bmcl_topmenu ui-menu' id='topmenu_2hnb4LnCzga_48CQrsBJofR' >      <li class='bmcl_topmenutitle ui-menu-item ui-state-disabled' id='topmtitle_6G1xOyeten5_7SqZ4EcQe8T' ><div >application : </div></li>     <li class='bmcl_topmenuitem ui-menu-item' id='topmitem_1SiDnlyQRR6_5meHUV4d3iF' ><div >dump</div></li>     <li class='bmcl_topmenuitem ui-menu-item' id='topmitem_9ZmJrhdpjae_79WiEHOVpbE' ><div >exit</div></li>     <li class='bmcl_topmenuitem ui-menu-item' id='topmitem_2nguorns5mY_2UnseYw0xRf' ><div >quit</div></li>    </ul>   </body>  </html>  <!-- end root-web-handler o_webex=_7rOPSVsyZnS_31DSTvb99w7; o_websess=_5FKgTFl64f2_2h8Y79EvsK7 at 2019 Jul 26, 05:15:35.52 MEST --> 

A quite generic existing infrastructure in Bismon is capable of generating quite arbitrary XHTML5 (with SVG!) code like above (from some Bismon specific runtime data). A generic infrastructure also exists in Bismon to generate JavaScript code (transpiled from some Bismon specific domain specific language).

My ambition is to code, in my Bismon system, something with a fancy web interface, capable of editing some abstract syntax tree, perhaps appearing in the Web browser tab in a way close to the below figure (taken from wikipedia): some abstract syntax tree

In the future, the Bismon user would have a tab with a content similar to above figure, and might, for example, click on the while box, and conveniently replace it with some until box. That idea (of syntax-oriented visual editors) is not new: Centaur implemented a similar idea in the 1980s. I want to implement a similar thing in Bismon using Web technologies. And I want to copy/paste, from one tab to another of the same Firefox browser, entire, well formed, abstract syntax sub-trees (or, at the conceptual level, well written S-expressions representing such AST subtrees)


How should I design such a thing? FWIW, every software involved – Bismon, web browsers, etc…- is (contractually, in the H2020 project funding that work) open source software on Linux. And Bismon is in july 2019 at TRL 2 and might, if all goes well, reach TRL 3 at end of 2020.

Notice that I am not asking about AJAX code manipulating the DOM, I am asking about the concepts explaining copy/pasting (of some structured tree-like data, expressible in XML or in S-exprs or JSON, and displayed as nested HTML5 or SVG DOM elements) between two different tabs of the same browser. Also, I would like that the copy source and paste destination web tabs (hence their different web servers) to communicate some data which has no visual appearance (preferably even without any display:none HTML5 element).

In other words, I am trying to find and understand the equivalent of ICCCM & EWMH for web technologies, about copy/pasting between two tabs of the same recent Firefox (or Chrome) browser on Linux. My feeling (just a guess) is that it is frowned upon (for security reasons) to copy/paste between two different tabs, but I don’t know the details. I did found this W3C clipboard API but I am guessing most of it is not yet implemented today. What is exactly available today in practice on recent Linux browsers? Also, real-life code examples (working with Firefox 60.7 on Debian/Linux/x86-64) are welcome!

My question could be rephrased as: how to copy/paste, using Linux with a recent Xorg and some EWMH compliant window manager only (I don’t care about other OSes at all!), some textual format content (probably JSON, but it could be my own Bismon textual format) with its MIME type from one tab (driven by Bismon on Linux host A) to another tab (single page web application tab of Bismon on Linux host B) of the same browser? Ideally, I would prefer not changing the DOM at all (exactly in the same spirit of EWMH), but if possible I don’t want a visual change of it (since the actual DOM modification would be controlled by Bismon AJAX or WebSocket handshakes or exchanges).

The several tabs are illustrated in the figure bismon-monitor.svg. In that figure, in some weird cases, Alice, Bob, and the left-side static analysis expert (that is in practice me, Basile), could be using three different tabs on the same Firefox browser (on Linux), and the Bismon server (or bismon monitor on that figure; in weird cases, we could even imagine 2 or 3 Bismon monitor processes running on different machines…) is also running on Linux and serving HTTP using libonion, and I want to copy/paste semantic contents representing complex ASTs (Bismon objects, in my parlance) from one browser tab to another one. If I was using GTK or Qt I would be able to code that without issues (since both have a flexible, generic, well document, clipboard & copy/paste related API).

From a user point of view, I am almost asking about the detailed design of some collaborative software tool, using Web technologies, and capable of editing some sophisticated proof (or mathematical text or wiki with formulae) within a small team.

My draft report has dozen more pages about my ideas (and references to systems as old as Centaur and Mentor related to them). I want to implement these ideas using modern Web technologies in my bismon GPLv3+ system. If I was using GTK or Qt, implementing these ideas is just a matter of coding (using also ssh -X or similar stuff). But I am less familiar with web technologies, however, Google docs is capable of copy/pasting like I dream of.

To summarize my question :

what are the ideas of the design of copy/pasting from one browser tab to another one some complex structured contents in Google Docs or in TinyMCE (with several HTTP wiki servers involved!) ? How would you, the hypothetical software architect of such applications, guide the junior developer coding them?

PS: I am today july 2019 a quite senior software developer, aged 60, (with a PhD in CS from 1990) coding professionally since 1985, but today, as a new web developer, I am still a newbie in that area (but I have some academic knowledge about HTTP, cookies, HTML5, DOM, AJAX, JavaScript, … but very few concrete practical coding experience)