RuleEditor

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

Script này sẽ không được không được cài đặt trực tiếp. Nó là một thư viện cho các script khác để bao gồm các chỉ thị meta // @require https://update.greasyfork.org/scripts/566628/1896077/RuleEditor.js

Đặt câu hỏi, đăng đánh giá, hoặc báo cáo tập lệnh.

Tác giả: ryxel
Phiên bản: 2.0.0
Đã tạo: 18-02-2026
Đã cập nhật: 07-08-2026
Kích thước: 1000 KB
Giấy phép: 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.