RuleEditor

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

This script should not be not be installed directly. It is a library for other scripts to include with the meta directive // @require https://update.greasyfork.org/scripts/566628/1756739/RuleEditor.js

Ask a question, post a review, or report the script.

Author: ryxel
Version: 1.0.0
Created: 2026-02-18
Updated: 2026-02-18
Size: 955 KB
License: 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.