RuleEditor

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

このスクリプトは単体で利用できません。右のようなメタデータを含むスクリプトから、ライブラリとして読み込まれます: // @require https://update.greasyfork.org/scripts/566628/1896077/RuleEditor.js

このスクリプトの質問や評価の投稿はこちら、通報はこちらへお寄せください

作者: ryxel
バージョン: 2.0.0
作成日: 2026/02/18
更新日: 2026/08/07
大きさ: 973KB
ライセンス: 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.