☰

RuleEditor

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

Este script no debería instalarse directamente. Es una biblioteca que utilizan otros scripts mediante la meta-directiva de inclusión // @require https://update.greasyfork.org/scripts/566628/1896077/RuleEditor.js

Cómo instalar

Tendrás que instalar una extensión para tu navegador como Tampermonkey, Greasemonkey o Violentmonkey si quieres utilizar este script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

Tendrás que instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Userscripts para instalar este script.

Tendrás que instalar una extensión como Tampermonkey antes de poder instalar este script.

Necesitarás instalar una extensión para administrar scripts de usuario si quieres instalar este script.

(Ya tengo un administrador de scripts de usuario, déjame instalarlo)

Cómo instalar

Tendrás que instalar una extensión como Stylus antes de poder instalar este script.

Tendrás que instalar una extensión como Stylus antes de poder instalar este script.

Tendrás que instalar una extensión como Stylus antes de poder instalar este script.

Para poder instalar esto tendrás que instalar primero una extensión de estilos de usuario.

Para poder instalar esto tendrás que instalar primero una extensión de estilos de usuario.

Para poder instalar esto tendrás que instalar primero una extensión de estilos de usuario.

(Ya tengo un administrador de estilos de usuario, déjame instalarlo)

Autor
ryxel
Versión
2.0.0
Creado
18/2/2026
Actualizado
7/8/2026
Tamaño
973 KB
Licencia
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.