RuleEditor

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

Este script não deve ser instalado diretamente. Este script é uma biblioteca de outros scripts para incluir com o diretório meta // @require https://update.greasyfork.org/scripts/566628/1756739/RuleEditor.js

Você precisará instalar uma extensão como Tampermonkey, Greasemonkey ou Violentmonkey para instalar este script.

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

Você precisará instalar uma extensão como Tampermonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Userscripts para instalar este script.

Você precisará instalar uma extensão como o Tampermonkey para instalar este script.

Você precisará instalar um gerenciador de scripts de usuário para instalar este script.

(Eu já tenho um gerenciador de scripts de usuário, me deixe instalá-lo!)

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

(Eu já possuo um gerenciador de estilos de usuário, me deixar fazer a instalação!)

Autor
ryxel
Versão
1.0.0
Criado
18/02/2026
Atualizado
18/02/2026
Tamanho
955 KB
Licença
MIT

CodeMirror 6 Rule Editor Documentation

This editor is built on CodeMirror 6, featuring custom syntax highlighting, regex validation, real-time search navigation, and multi-theme support.


Quick Start

Initialize the editor and get the control instance via the window.CodeMirror6 global object.

const container = document.getElementById('editor-container');
const editor = window.CodeMirror6.createEditor(container);


Core API

Content Operations

  • setContent(content, keepHistory)
    • Function: Sets the editor text.
    • Parameter: If keepHistory (boolean) is false, it resets the undo history and updates the sync snapshot.
  • getContent()
    • Function: Retrieves the full text string from the editor.
  • updateSnapshot()
    • Function: Manually sets the current document content as the synchronization baseline snapshot.

Theme & Search

  • setTheme(isDark)
    • Function: Toggles the visual theme. true for Dark mode, false for Light mode.
  • setSearch(term)
    • Function: Updates search keywords, triggers highlighting, and automatically jumps to the current match.
  • findNext()
    • Function: Navigates downward through the matching items.
  • findPrev()
    • Function: Navigates upward through the matching items.

Event Listeners

  • onSyncStatusChange(callback)
    • Function: Fires when the sync status between document content and snapshot changes.
    • Callback Structure: Returns isSynced (boolean).
  • onSearchUpdate(callback)
    • Function: Fires when search results are updated.
    • Callback Structure: Returns object { total, current, isExact }
      • total: Total number of matching lines.
      • current: Current match index closest to the cursor (starting from 1).
      • isExact: Whether the cursor is exactly positioned on a matching line.

Rule Parsing

  • getRules()
    • Function: Parses the syntax tree and returns structured data.
    • Return Structure: Returns object { regexps, keywords, errors }
      • regexps: List of valid regular expressions.
      • keywords: List of identified keyword strings.
      • errors: Syntax errors including text and position info.


Syntax Description

The editor supports three basic syntax elements:

  • Keywords: Plain text input used for matching specific strings.
  • Regular Expressions: Supports /pattern/flags format with real-time validity linting.
  • Comments: Content starting with # (entire line or end-of-line).


Acknowledgments & References

This project is built upon the CodeMirror 6 core library, with interactive logic and UI design inspired by uBlacklist and uBlock Origin.