@bhsd/codemirror-mediawiki 2.28.2 → 2.29.0

package/README.md

@@ -7,7 +7,8 @@
 	<summary>Expand</summary>
 
 - [Description](#description)
-- [Usage](#usage)
+- [Installation](#installation)
+- [Browser Usage](#browser-usage)
 	- [JavaScript](#javascript)
 	- [CSS](#css)
 - [Constructor](#constructor)
@@ -68,7 +69,19 @@ Here is a [demo](https://bhsd-harry.github.io/codemirror-mediawiki). To experime
 
 Nonetheless, this repository also provides a customized version with additional functionality for use on a MediaWiki site. Browser editing tools such as [Wikiplus-highlight](https://github.com/bhsd-harry/Wikiplus-highlight) and an [InPageEdit plugin](https://github.com/inpageedit/Plugins) are built upon it. Please refer to a separate [README](./mw/README.md) file for the information.
 
-# Usage
+# Installation
+
+You can install the package via npm and import it as a module:
+
+```bash
+npm install @bhsd/codemirror-mediawiki
+```
+
+```js
+import {CodeMirror6} from '@bhsd/codemirror-mediawiki';
+```
+
+# Browser Usage
 
 You can download the code via CDN, for example:
 

package/dist/bidi.js

@@ -0,0 +1,84 @@
+/**
+ * @author MusikAnimal
+ * @license GPL-2.0-or-later
+ * @see https://gerrit.wikimedia.org/g/mediawiki/extensions/CodeMirror
+ */
+import { EditorView, Direction, ViewPlugin, Decoration } from '@codemirror/view';
+import { Prec, RangeSetBuilder } from '@codemirror/state';
+import { syntaxTree } from '@codemirror/language';
+import { getTag } from './matchTag';
+import { tokens } from './config';
+const isolateLTR = Decoration.mark({
+    class: 'cm-bidi-isolate cm-bidi-ltr',
+    bidiIsolate: Direction.LTR,
+}), isolate = Decoration.mark({ class: 'cm-bidi-isolate' });
+export const computeIsolates = ({ visibleRanges, state, textDirection }) => {
+    const set = new RangeSetBuilder();
+    if (textDirection === Direction.RTL) {
+        for (const { from, to } of visibleRanges) {
+            let node = syntaxTree(state).resolve(from, 1), td = 0, table = 0, parameter = 0;
+            while (node && node.to <= to) {
+                const { name, from: f, to: t, nextSibling } = node;
+                if (/-(?:ext|html)tag-bracket/u.test(name) && state.sliceDoc(f, t).includes('<')) {
+                    const tag = getTag(state, nextSibling);
+                    if (tag) {
+                        set.add(tag.from, tag.to, isolateLTR);
+                    }
+                }
+                else if (!td && !table && name.includes(tokens.tableDefinition)) {
+                    if (/-html-(?:table|tr)/u.test(name)) {
+                        table = state.doc.lineAt(f).to;
+                        set.add(f, table, isolateLTR);
+                    }
+                    else {
+                        td = f;
+                    }
+                }
+                else if (table && f > table) {
+                    table = 0;
+                }
+                else if (td && name.includes(tokens.tableDelimiter2)) {
+                    set.add(td, f, isolateLTR);
+                    td = 0;
+                }
+                else if (/-(?:template|parserfunction)-delimiter/u.test(name)) {
+                    if (parameter) {
+                        set.add(parameter, f, isolate);
+                    }
+                    parameter = t;
+                }
+                else if (parameter && /-(?:template|parserfunction)-bracket/u.test(name)) {
+                    if (state.sliceDoc(f, f + 1) === '}') {
+                        set.add(parameter, f, isolate);
+                    }
+                    parameter = 0;
+                }
+                node = node.nextSibling;
+            }
+        }
+    }
+    return set.finish();
+};
+export default ViewPlugin.fromClass(class {
+    constructor(view) {
+        this.isolates = computeIsolates(view);
+        this.tree = syntaxTree(view.state);
+        this.dir = view.textDirection;
+    }
+    update({ docChanged, viewportChanged, state, view }) {
+        const tree = syntaxTree(state), { textDirection } = view;
+        if (docChanged || viewportChanged || tree !== this.tree || textDirection !== this.dir) {
+            this.isolates = computeIsolates(view);
+            this.tree = tree;
+            this.dir = textDirection;
+        }
+    }
+}, {
+    provide(plugin) {
+        const access = (view) => view.plugin(plugin)?.isolates ?? Decoration.none;
+        return Prec.lowest([
+            EditorView.decorations.of(access),
+            EditorView.bidiIsolatedRanges.of(access),
+        ]);
+    },
+});