ParsoidDocument

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

ParsoidDocument is an ES9+ 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. The library works even without the existence of MediaWiki notification and Title modules, although they are helpful in ensuring data stability.

To be fully optimized, this should be implemented as a gadget and loaded through mw.loader. Note that some APIs used by this library may not be available on older browsers.

Installation

As a developer, insert the following code in the initialization section of your userscript. This is the only way to use the library on the English Wikipedia, and for most Wikimedia wikis.

// 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

Usage

You can then access ParsoidDocument using the ParsoidDocument window global.

const parsoid = new ParsoidDocument();

parsoid.loadPage("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();

chlodalejandro / parsoid-document Goto Github PK