☰

RuleEditor

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

이 스크립트는 직접 설치하는 용도가 아닙니다. 다른 스크립트에서 메타 지시문 // @require https://update.greasyfork.org/scripts/566628/1756739/RuleEditor.js을(를) 사용하여 포함하는 라이브러리입니다.

설치 방법

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램을 설치해야 합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

설치 방법

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

작성자
ryxel
버전
1.0.0
생성일
2026-02-18
갱신일
2026-02-18
크기
955KB
라이선스
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.