@chlodalejandro/parsoid

A userscript library for easily handling Parsoid DOM trees.

Usage no npm install needed!

<script type="module">
  import chlodalejandroParsoid from 'https://cdn.skypack.dev/@chlodalejandro/parsoid';
</script>

README

ParsoidDocument

npm version npm downloads

Originally from User:Chlod/Scripts/ParsoidDocument on the English Wikipedia.

ParsoidDocument is an ES6+ library which implements a Parsoid-compatible document handler using an HTML5 IFrame. It is not a userscript, but is instead loaded by other userscripts. The IFrame contains the Parsoid document, which can then be modified using standard DOM functions. This is used to perform Parsoid-dependent operations in the browser without having to pull in the entirety of the VisualEditor codebase.

To be fully optimized, this should be implemented as a gadget and loaded through mw.loader. Since the Gadgets extension does not support ES6, however, it cannot yet be implemented as one on most wikis.

Usage

As a developer, insert the following code in the initialization section of your userscript.

// The "await" is optional, but ensures that the script has loaded and run before proceeding.
// On the English Wikipedia
await mw.loader.getScript("https://en.wikipedia.org/wiki/User:Chlod/Scripts/ParsoidDocument.js?action=raw&ctype=text/javascript");

// On other wikis, you must upload ParsoidDocument.js from the English Wikipedia or this repository
// first, and then change the URL to lead to the correct page. Make sure to keep the
// `?action=raw&ctype=text/javascript` at the end of the URL!

// If it is available as a gadget, you can instead use the following.
mw.loader.load("ext.gadget.ParsoidDocument"); // where ParsoidDocument is the ID of the gadget.

If your userscript is bundled with Webpack, you can also install the @chlodalejandro/parsoid package. This package also adds typings for ParsoidDocument, in case you're developing with TypeScript or a decent IDE with a type checker.

npm install @chlodalejandro/parsoid

You can then access ParsoidDocument using the ParsoidDocument window global.

const parsoid = new ParsoidDocument();
// You can append the frame anywhere; it will never be visible to the user.
document.body.appendChild(parsoid.buildFrame());

parsoid.loadFrame("User:Chlod/Scripts/ParsoidDocument");
parsoid.document.body.classList.contains("parsoid-body"); // true

// Prints the "data-mw" attribute of all transclusions.
parsoid.document.querySelectorAll("[typeof=\"mw:Transclusion\"]").forEach(v => {
    console.log(v.getAttribute("data-mw"));
});

// Convert the document, including any modification, to wikitext.
parsoid.toWikitext();

You can also extend the ParsoidDocument class as any other class.

class MyParsoidHandler extends ParsoidDocument {

    findAllTransclusions() {
        return this.document.querySelectorAll("[typeof=\"mw:Transclusion\"]");
    }

}

const parsoid = new MyParsoidHandler();
// ...
parsoid.findAllTransclusions();

See also