RuleEditor

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

Dit script moet niet direct worden geïnstalleerd - het is een bibliotheek voor andere scripts om op te nemen met de meta-richtlijn // @require https://update.greasyfork.org/scripts/566628/1756739/RuleEditor.js

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey, Greasemonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Userscripts.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een gebruikersscriptbeheerder nodig.

(Ik heb al een user script manager, laat me het downloaden!)

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

(Ik heb al een beheerder - laat me doorgaan met de installatie!)

Maker
ryxel
Versie
1.0.0
Gemaakt op
18-02-2026
Bijgewerkt op
18-02-2026
Grootte
955 KB
Licentie
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.