RuleEditor

A CodeMirror 6 based rule editor with Regex validation, search, and theme switching.

Dieses Skript sollte nicht direkt installiert werden. Es handelt sich hier um eine Bibliothek für andere Skripte, welche über folgenden Befehl in den Metadaten eines Skriptes eingebunden wird // @require https://update.greasyfork.org/scripts/566628/1896077/RuleEditor.js

Stellen Sie eine Frage, veröffentlichen Sie eine Bewertung oder melden Sie das Skript.

Autor: ryxel
Version: 2.0.0
Erstellt am: 18.02.2026
Letzte Aktualisierung: 07.08.2026
Größe: 973 KB
Lizenz: MIT

CodeMirror 6 Rule Editor Documentation

This editor is built on CodeMirror 6, integrating custom syntax highlighting, regular expression validation, real-time search navigation, and multi-theme switching.

Quick Start

Initialize the editor by instantiating the RuleEditor class.

const container = document.getElementById('editor-container');
const editor = new RuleEditor(container, {
  content: "# Initial rules\n/example/g",
  darkMode: false
});

Core API

Instance Properties & Options

darkMode (boolean)
- Description: Property getter/setter to retrieve or dynamically toggle the visual theme. true for dark mode, false for light mode.
- Example: editor.darkMode = true;

Content Operations

setContent(content, keepHistory)
- Description: Sets the editor text content.
- Parameters:
  - content (string): The new text content.
  - keepHistory (boolean, default false): When false, resets undo history and syncs baseline snapshot.
getContent()
- Description: Returns the complete text content of the editor.
updateSnapshot()
- Description: Manually sets the current document content as a new baseline snapshot.
restoreToSnapshot()
- Description: Restores the editor text to the last saved baseline snapshot.

Search & Navigation

setSearch(term)
- Description: Updates the search keyword, triggers highlights, and automatically navigates to the first match.
findNext()
- Description: Navigates forward to the next match.
findPrev()
- Description: Navigates backward to the previous match.

Event Callbacks

Assign callback functions directly to instance properties:

onDirtyChange
- Description: Triggered when the document's modified (dirty) state changes relative to the baseline snapshot.
- Callback Argument: isDirty (boolean) — Indicates whether the document has been modified.
- Example: editor.onDirtyChange = (isDirty) => { console.log(isDirty); };
onSearchUpdate
- Description: Triggered when search results are updated.
- Callback Argument: Returns object { total, current, isExact }
  - total: Total number of matched lines.
  - current: Line index closest to the current cursor position (1-based).
  - isExact: Whether the cursor is exactly on a matched line.
- Example: editor.onSearchUpdate = (res) => { console.log(res); };

Rule Parsing & Cleanup

getRules()
- Description: Parses the syntax tree and returns structured rule data.
- Return Structure: Returns object { regexes, keywords, errors }
  - regexes: Array of valid RegExp objects [{ pattern, flags }].
  - keywords: Array of recognized keyword strings [string].
  - errors: Array of invalid RegExp objects and position info [{ text, from, to, line }].
destroy()
- Description: Destroys the editor instance and releases resources.

Syntax Reference

The editor supports the following three basic syntax elements:

Keywords: Plain text used for substring matching.
Regular Expressions: Supports /pattern/flags format with real-time syntax validation and error reporting.
Comments: Entire lines or inline text starting with #.

Credits & References

This project is built on top of the CodeMirror 6 core library, with interaction design and UI inspiration drawn from uBlacklist and uBlock Origin.