@browserless.io/browserless 2.31.1 → 2.32.0-beta-1

package/extensions/ublocklite/js/develop.js

@@ -19,871 +19,606 @@
     Home: https://github.com/gorhill/uBlock
 */
 
-import {
-    browser,
-    localRead,
-    localRemove,
-    localWrite,
-    sendMessage,
-} from './ext.js';
-import { dom, qs$ } from './dom.js';
-import { rulesFromText, textFromRules } from './dnr-parser.js';
-import { dnr } from './ext-compat.js';
-import { i18n$ } from './i18n.js';
+import { dom, qs$, qsa$ } from './dom.js';
+import { localRead, localWrite, sendMessage } from './ext.js';
+import { ModeEditor } from './mode-editor.js';
+import { ReadOnlyDNREditor } from './ro-dnr-editor.js';
+import { ReadWriteDNREditor } from './rw-dnr-editor.js';
+import { faIconsInit } from './fa-icons.js';
+import { i18n } from './i18n.js';
 
 /******************************************************************************/
 
-// Details of YAML document(s) intersecting with a text span. If the text span
-// starts on a YAML document divider, the previous YAML document will be
-// included. If the text span ends on a YAML document divider, the next YAML
-// document will be included.
+class Editor {
+    constructor() {
+        this.lastSavedText = '';
+        this.view = null;
+        this.reYamlDocSeparator = /^(?:---|...)\s*$/;
+        this.modifiedRange = { start: 0, end: 0 };
+        this.updateTimer = undefined;
+        this.ioPanel = self.cm6.createViewPanel();
+        this.summaryPanel = self.cm6.createViewPanel();
+        this.panels = [];
+    }
 
-function snapToYamlDocument(doc, start, end) {
-    let yamlDocStart = doc.lineAt(start).number;
-    if ( reYamlDocSeparator.test(doc.line(yamlDocStart).text) ) {
-        if ( yamlDocStart > 1 ) {
-            yamlDocStart -= 1;
+    async init() {
+        this.editors = {
+             'modes': new ModeEditor(this),
+            'dnr.rw': new ReadWriteDNREditor(this),
+            'dnr.ro': new ReadOnlyDNREditor(this),
+        };
+        const rulesetDetails = await sendMessage({ what: 'getRulesetDetails' });
+        const parent = qs$('#editors optgroup');
+        for ( const details of rulesetDetails ) {
+            const option = document.createElement('option');
+            option.value = `dnr.ro.${details.id}`;
+            option.textContent = details.name;
+            parent.append(option);
         }
+        this.validModes = Array.from(qsa$('#editors option')).map(a => a.value);
+        const mode = await localRead('dashboard.develop.editor');
+        this.editorFromMode(mode);
+        const text = this.normalizeEditorText(await this.editor.getText(this.mode));
+        const viewConfig = {
+            text,
+            yamlLike: true,
+            oneDark: dom.cl.has(':root', 'dark'),
+            updateListener: info => { this.viewUpdateListener(info); },
+            saveListener: ( ) => { this.saveEditorText(); },
+            lineError: true,
+            spanError: true,
+            // https://codemirror.net/examples/autocompletion/
+            autocompletion: {
+                override: [
+                    context => {
+                        return this.autoComplete(context);
+                    },
+                ],
+                activateOnCompletion: ( ) => true,
+            },
+            gutterClick: (view, info) => {
+                return this.gutterClick(view, info);
+            },
+            hoverTooltip: (view, pos, side) => {
+                return this.hoverTooltip(view, pos, side);
+            },
+            streamParser: this.streamParser,
+            foldService: (state, from) => {
+                return this.foldService(state, from);
+            },
+            readOnly: this.isReadOnly(),
+        };
+        viewConfig.panels = [ this.ioPanel, this.summaryPanel, ...this.panels ];
+        this.view = self.cm6.createEditorView(viewConfig, qs$('#cm-container'));
+        this.lastSavedText = text;
+        self.cm6.foldAll(this.view);
+        self.cm6.resetUndoRedo(this.view);
+        this.updateIOPanel();
+        this.editor.on?.(this);
+        this.modifiedRange.start = 1;
+        this.modifiedRange.end = this.view.state.doc.lines;
+        this.updateViewAsync();
     }
-    while ( yamlDocStart > 1 ) {
-        const line = doc.line(yamlDocStart);
-        if ( reYamlDocSeparator.test(line.text) ) { break; }
-        yamlDocStart -= 1;
+
+    normalizeEditorText(text) {
+        text ||= '';
+        text = text.trim();
+        if ( text !== '' ) { text += '\n'; }
+        return text;
     }
-    const lastLine = doc.lines;
-    let yamlDocEnd = doc.lineAt(end).number;
-    if ( reYamlDocSeparator.test(doc.line(yamlDocEnd).text) ) {
-        if ( yamlDocEnd < lastLine ) {
-            yamlDocEnd += 1;
+
+    setEditorText(text, saved = false) {
+        text = this.normalizeEditorText(text);
+        if ( saved ) {
+            this.lastSavedText = text;
         }
+        this.view.dispatch({
+            changes: {
+                from: 0, to: this.view.state.doc.length,
+                insert: text,
+            },
+        });
+        this.view.focus();
     }
-    while ( yamlDocEnd < lastLine ) {
-        const line = doc.line(yamlDocEnd);
-        if ( reYamlDocSeparator.test(line.text) ) { break; }
-        yamlDocEnd += 1;
-    }
-    return { yamlDocStart, yamlDocEnd };
-}
-
-function rangeFromTransaction(transaction) {
-    let from, to;
-    transaction.changes.iterChangedRanges((fromA, toA, fromB, toB) => {
-        if ( from === undefined || fromB < from ) { from = fromB; }
-        if ( to === undefined || toB > to ) { to = toB; }
-    });
-    return { from, to };
-}
 
-function addToModifiedRange(transaction) {
-    const { from, to } = rangeFromTransaction(transaction);
-    if ( from === undefined || to === undefined ) { return; }
-    const { newDoc } = transaction;
-    const { yamlDocStart, yamlDocEnd } = snapToYamlDocument(newDoc, from, to);
-    if ( modifiedRange.start === -1 || yamlDocStart < modifiedRange.start ) {
-        modifiedRange.start = yamlDocStart;
-    }
-    if ( modifiedRange.end === -1 || yamlDocEnd > modifiedRange.end ) {
-        modifiedRange.end = yamlDocEnd;
+    getEditorText() {
+        return this.view.state.doc.toString();
     }
-}
-
-const reYamlDocSeparator = /^(?:---|...)\s*$/;
-const modifiedRange = { start: -1, end: -1 };
-
-/******************************************************************************/
 
-function rulesFromJSON(json) {
-    let content = json.trim();
-    if ( /^[[{]/.test(content) === false ) {
-        const match = /^[^[{]+/.exec(content);
-        if ( match === null ) { return; }
-        content = content.slice(match[0].length);
-    }
-    const firstChar = content.charAt(0);
-    const expectedLastChar = firstChar === '[' ? ']' : '}';
-    if ( content.at(-1) !== expectedLastChar ) {
-        const re = new RegExp(`\\${expectedLastChar}[^\\${expectedLastChar}]+$`);
-        const match = re.exec(content);
-        if ( match === null ) { return; }
-        content = content.slice(0, match.index+1);
-    }
-    if ( content.startsWith('{') && content.endsWith('}') ) {
-        content = `[${content}]`;
-    }
-    try {
-        const rules = JSON.parse(content);
-        if ( Array.isArray(rules) ) { return rules; }
+    editorTextChanged() {
+        const text = this.normalizeEditorText(this.getEditorText());
+        return text !== this.lastSavedText;
     }
-    catch {
-    }
-}
-
-/******************************************************************************/
 
-function lineIndentAt(line) {
-    const match = /^(?: {2})*/.exec(line.text);
-    const indent = match !== null ? match[0].length : -1;
-    if ( indent === -1 || (indent & 1) !== 0 ) { return -1; }
-    return indent / 2;
-}
+    async selectEditor(mode) {
+        if ( mode === this.mode ) { return; }
+        this.editorFromMode(mode);
+        const text = await this.editor.getText(this.mode);
+        this.setEditorText(text);
+        this.lastSavedText = this.getEditorText();
+        self.cm6.foldAll(this.view)
+        self.cm6.resetUndoRedo(this.view);
+        self.cm6.toggleReadOnly(this.view, this.isReadOnly());
+        this.updateIOPanel();
+        this.editor.on?.(this);
+        this.modifiedRange.start = 1;
+        this.modifiedRange.end = this.view.state.doc.lines;
+        this.updateViewAsync();
+    }
 
-function getScopeAt(from) {
-    const { doc }  = cmRules.state;
-    const lineFrom = doc.lineAt(from);
-    let depth = lineIndentAt(lineFrom);
-    if ( depth === -1 ) { return; }
-    const text = lineFrom.text.trim();
-    if ( text.startsWith('#') ) { return; }
-    const path = [];
-    const pos = text.indexOf(':');
-    if ( pos !== -1 ) {
-        path.push(text.slice(0, pos+1));
-    }
-    let lineNo = lineFrom.number;
-    while ( depth > 0 && lineNo > 1 ) {
-        lineNo -= 1;
-        const lineBefore = doc.line(lineNo);
-        const text = lineBefore.text.trim();
-        if ( text.startsWith('#') ) { continue; }
-        if ( lineIndentAt(lineBefore) > (depth-1) ) { continue; }
-        const match = /^- ([^:]+:)/.exec(text);
-        if ( match !== null ) {
-            path.unshift(match[1]);
+    editorFromMode(mode) {
+        if ( this.validModes.includes(mode) === false ) {
+            mode = 'modes';
+        }
+        if ( mode === this.mode ) { return mode; }
+        let editor;
+        if ( mode === 'modes' ) {
+            editor = this.editors['modes'];
+        } else if ( mode.startsWith('dnr.rw.') ) {
+            editor = this.editors['dnr.rw'];
+        } else if ( mode.startsWith('dnr.ro.') ) {
+            editor = this.editors['dnr.ro'];
         } else {
-            path.unshift(text);
+            return;
         }
-        depth -= 1;
+        this.editor?.off?.(this);
+        this.editor = editor;
+        this.mode = mode;
+        const select = qs$('#editors');
+        select.value = mode;
     }
-    return path.join('');
-}
 
-function getAutocompleteCandidates(from) {
-    const scope = getScopeAt(from);
-    switch ( scope ) {
-    case '':
-        return {
-            before: /^$/,
-            candidates: [
-                { token: 'action:', after: '\n  ' },
-                { token: 'condition:', after: '\n  ' },
-                { token: 'priority:', after: ' ' },
-                { token: '---', after: '\n' },
-            ]
-        };
-    case 'action:':
-        return {
-            before: /^ {2}$/,
-            candidates: [
-                { token: 'type:', after: ' ' },
-                { token: 'redirect:', after: '\n    ' },
-                { token: 'requestHeaders:', after: '\n    - header: ' },
-                { token: 'responseHeaders:', after: '\n    - header: ' },
-            ],
-        };
-    case 'action:type:':
-        return {
-            before: /: $/,
-            candidates: [
-                { token: 'block', after: '\n  ' },
-                { token: 'redirect', after: '\n  ' },
-                { token: 'allow', after: '\n  ' },
-                { token: 'modifyHeaders', after: '\n  ' },
-                { token: 'upgradeScheme', after: '\n  ' },
-                { token: 'allowAllRequest', after: '\n  ' },
-            ],
-        };
-    case 'action:redirect:':
-        return {
-            before: /^ {4}$/,
-            candidates: [
-                { token: 'extensionPath:', after: ' ' },
-                { token: 'regexSubstitution:', after: ' ' },
-                { token: 'transform:', after: '\n      ' },
-                { token: 'url:', after: ' ' },
-            ],
-        };
-    case 'action:redirect:transform:':
-        return {
-            before: /^ {6}$/,
-            candidates: [
-                { token: 'fragment:', after: ' ' },
-                { token: 'host:', after: ' ' },
-                { token: 'path:', after: ' ' },
-                { token: 'port:', after: ' ' },
-                { token: 'query:', after: ' ' },
-                { token: 'scheme:', after: ' ' },
-                { token: 'queryTransform:', after: '\n        ' },
-            ],
-        };
-    case 'action:redirect:transform:queryTransform:':
-        return {
-            before: /^ {8}$/,
-            candidates: [
-                { token: 'addOrReplaceParams:', after: '\n          - ' },
-                { token: 'removeParams:', after: '\n          - ' },
-            ],
-        };
-    case 'action:responseHeaders:':
-    case 'action:requestHeaders:':
-        return {
-            before: /^ {4}- $/,
-            candidates: [
-                { token: 'header:', after: ' ' },
-            ],
-        };
-    case 'action:responseHeaders:header:':
-    case 'action:requestHeaders:header:':
-        return {
-            before: /^ {6}$/,
-            candidates: [
-                { token: 'operation:', after: ' ' },
-                { token: 'value:', after: ' ' },
-            ],
-        };
-    case 'action:responseHeaders:header:operation:':
-    case 'action:requestHeaders:header:operation:':
-        return {
-            before: /: $/,
-            candidates: [
-                { token: 'append', after: '\n      value: ' },
-                { token: 'set', after: '\n      value: ' },
-                { token: 'remove', after: '\n    ' },
-            ],
-        };
-    case 'condition:':
-        return {
-            before: /^ {2}$/,
-            candidates: [
-                { token: 'domainType:', after: ' ' },
-                { token: 'isUrlFilterCaseSensitive:', after: ' ' },
-                { token: 'regexFilter:', after: ' ' },
-                { token: 'urlFilter:', after: ' ' },
-                { token: 'initiatorDomains:', after: '\n    - ' },
-                { token: 'excludedInitiatorDomains:', after: '\n    - ' },
-                { token: 'requestDomains:', after: '\n    - ' },
-                { token: 'excludedRequestDomains:', after: '\n    - ' },
-                { token: 'resourceTypes:', after: '\n    - ' },
-                { token: 'excludedResourceTypes:', after: '\n    - ' },
-                { token: 'requestMethods:', after: '\n    - ' },
-                { token: 'excludedRequestMethods:', after: '\n    - ' },
-                { token: 'responseHeaders:', after: '\n    - ' },
-                { token: 'excludedResponseHeaders:', after: '\n    - ' },
-            ],
-        };
-    case 'condition:domainType:':
-        return {
-            before: /: $/,
-            candidates: [
-                { token: 'firstParty', after: '\n  ' },
-                { token: 'thirdParty', after: '\n  ' },
-            ],
-        };
-    case 'condition:isUrlFilterCaseSensitive:':
-        return {
-            before: /: $/,
-            candidates: [
-                { token: 'true', after: '\n  ' },
-                { token: 'false', after: '\n  ' },
-            ],
-        };
-    case 'condition:requestMethods:':
-    case 'condition:excludedRequestMethods:':
-        return {
-            before: /^ {4}- $/,
-            candidates: [
-                { token: 'connect', after: '\n    - ' },
-                { token: 'delete', after: '\n    - ' },
-                { token: 'get', after: '\n    - ' },
-                { token: 'head', after: '\n    - ' },
-                { token: 'options', after: '\n    - ' },
-                { token: 'patch', after: '\n    - ' },
-                { token: 'post', after: '\n    - ' },
-                { token: 'put', after: '\n    - ' },
-                { token: 'other', after: '\n  ' },
-            ],
-        };
-    case 'condition:resourceTypes:':
-    case 'condition:excludedResourceTypes:':
-        return {
-            before: /^ {4}- $/,
-            candidates: [
-                { token: 'main_frame', after: '\n    - ' },
-                { token: 'sub_frame', after: '\n    - ' },
-                { token: 'stylesheet', after: '\n    - ' },
-                { token: 'script', after: '\n    - ' },
-                { token: 'image', after: '\n    - ' },
-                { token: 'font', after: '\n    - ' },
-                { token: 'object', after: '\n    - ' },
-                { token: 'xmlhttprequest', after: '\n    - ' },
-                { token: 'ping', after: '\n    - ' },
-                { token: 'csp_report', after: '\n    - ' },
-                { token: 'media', after: '\n    - ' },
-                { token: 'websocket', after: '\n    - ' },
-                { token: 'webtransport', after: '\n    - ' },
-                { token: 'webbundle', after: '\n    - ' },
-                { token: 'other', after: '\n  ' },
-            ],
-        };
+    isReadOnly() {
+        return typeof this.editor.saveEditorText !== 'function';
     }
-}
 
-function autoComplete(context) {
-    const match = context.matchBefore(/[\w-]*/);
-    if ( match === undefined ) { return null; }
-    const result = getAutocompleteCandidates(match.from);
-    if ( result === undefined ) { return null; }
-    if ( result.before !== undefined ) {
-        const { doc } = context.state;
-        const line = doc.lineAt(context.pos);
-        const before = doc.sliceString(line.from, match.from);
-        if ( result.before.test(before) === false ) { return null; }
-    }
-    const filtered = result.candidates.filter(e =>
-        e.token !== match.text || e.after !== '\n'
-    ); 
-    return {
-        from: match.from,
-        options: filtered.map(e => ({ label: e.token, apply: `${e.token}${e.after}` })),
-        validFor: /\w*/,
-    };
-}
-
-/******************************************************************************/
-
-function setEditorText(text) {
-    if ( text === undefined ) { return; }
-    if ( text !== '' ) { text += '\n'; }
-    cmRules.dispatch({
-        changes: {
-            from: 0, to: cmRules.state.doc.length,
-            insert: text,
-        },
-    });
-    cmRules.focus();
-}
-
-function getEditorText() {
-    return cmRules.state.doc.toString();
-}
-
-/******************************************************************************/
-
-function saveEditorText() {
-    const text = getEditorText().trim();
-    const promise = text.length !== 0
-        ? localWrite('userDnrRules', text)
-        : localRemove('userDnrRules');
-    promise.then(( ) => {
-        lastSavedText = text;
-        updateView();
-    }).then(( ) =>
-        sendMessage({ what: 'updateUserDnrRules' })
-    ).then(result => {
-        if ( result instanceof Object === false ) { return; }
-        updateFeedbackPanel(result);
-    });
-}
-
-/******************************************************************************/
-
-async function validateRegexes(regexes) {
-    if ( regexes.length === 0 ) { return; }
-    const promises = regexes.map(regex => validateRegex(regex));
-    await Promise.all(promises);
-    for ( const regex of regexes ) {
-        const i = validatedRegexes.regexes.indexOf(regex);
-        if ( i === -1 ) { continue; }
-        const reason = validatedRegexes.results[i];
-        if ( reason === true ) { continue; }
-        const entries = self.cm6.findAll(cmRules,
-            `(?<=\\bregexFilter: )${RegExp.escape(regex)}`
-        );
-        for ( const entry of entries ) {
-            self.cm6.spanErrorAdd(cmRules, entry.from, entry.to, reason);
+    viewUpdateListener(info) {
+        if ( info.docChanged === false ) { return; }
+        for ( const transaction of info.transactions ) {
+            if ( transaction.docChanged === false ) { continue; }
+            this.addToModifiedRange(transaction);
+            if ( transaction.isUserEvent('delete.backward') ) {
+                this.smartBackspace(transaction);
+            } else if ( transaction.isUserEvent('input.paste') ) {
+                if ( this.editor.importFromPaste ) {
+                    this.editor.importFromPaste(this, transaction);
+                }
+            } else if ( transaction.isUserEvent('input') ) {
+                if ( this.smartReturn(transaction) ) { continue; }
+                this.smartSpacebar(transaction);
+            }
         }
+        this.updateViewAsync();
     }
-}
 
-async function validateRegex(regex) {
-    const details = await dnr.isRegexSupported({ regex });
-    const result = details.isSupported || details.reason;
-    if ( validatedRegexes.regexes.length > 32 ) {
-        validatedRegexes.regexes.pop();
-        validatedRegexes.results.pop();
+    updateViewAsync() {
+        if ( this.updateTimer !== undefined ) { return; }
+        this.updateTimer = self.setTimeout(( ) => {
+            this.updateTimer = undefined;
+            this.updateView();
+        }, 71);
     }
-    validatedRegexes.regexes.unshift(regex);
-    validatedRegexes.results.unshift(result);
-}
 
-const validatedRegexes = {
-    regexes: [],
-    results: [],
-};
-
-/******************************************************************************/
+    updateView() {
+        const { doc } = this.view.state;
+        const changed = this.editorTextChanged();
+        dom.attr('#apply', 'disabled', changed ? null : '');
+        dom.attr('#revert', 'disabled', changed ? null : '');
+        if ( typeof this.editor.updateView !== 'function' ) { return; }
+        let { start, end } = this.modifiedRange;
+        if ( start === 0 || end === 0 ) { return; }
+        this.modifiedRange.start = this.modifiedRange.end = 0;
+        if ( start > doc.lines ) { start = doc.lines; }
+        if ( end > doc.lines ) { end = doc.lines; }
+        self.cm6.lineErrorClear(this.view, start, end);
+        self.cm6.spanErrorClear(this.view, start, end);
+        const firstLine = doc.line(start);
+        const lastLine = doc.line(end);
+        this.editor.updateView(this, firstLine, lastLine);
+    }
 
-function updateView() {
-    const { doc } = cmRules.state;
-    const changed = doc.toString().trim() !== 
-        lastSavedText.trim();
-    dom.attr('#dnrRulesApply', 'disabled', changed ? null : '');
-    dom.attr('#dnrRulesRevert', 'disabled', changed ? null : '');
-    const { start, end } = modifiedRange;
-    if ( start === -1 || end === -1 ) { return; }
-    modifiedRange.start = modifiedRange.end = -1;
-    self.cm6.lineErrorClear(cmRules, start, end);
-    self.cm6.spanErrorClear(cmRules, start, end);
-    const firstLine = doc.line(start);
-    const lastLine = doc.line(end);
-    const text = doc.sliceString(firstLine.from, lastLine.to);
-    const { bad } = rulesFromText(text);
-    if ( Array.isArray(bad) && bad.length !== 0 ) {
-        self.cm6.lineErrorAdd(cmRules, bad.map(i => i + start));
-    }
-    const entries = self.cm6.findAll(
-        cmRules,
-        '\\bregexFilter: (\\S+)',
-        firstLine.from,
-        lastLine.to
-    );
-    const regexes = [];
-    for ( const entry of entries ) {
-        const regex = entry.match[1];
-        const i = validatedRegexes.regexes.indexOf(regex);
-        if ( i !== -1 ) {
-            const reason = validatedRegexes.results[i];
-            if ( reason === true ) { continue; }
-            self.cm6.spanErrorAdd(cmRules, entry.from+13, entry.to, reason);
-        } else { 
-            regexes.push(regex);
+    updateIOPanel() {
+        const ioButtons = [];
+        if ( this.editor.saveEditorText ) {
+            ioButtons.push('apply', 'revert');
+        }
+        if ( this.editor.importFromFile ) {
+            ioButtons.push('import');
         }
+        if ( this.editor.exportToFile ) {
+            ioButtons.push('export');
+        }
+        if ( ioButtons.length === 0 ) {
+            return this.ioPanel.render(this.view, null);
+        }
+        const template = document.querySelector('template.io-panel');
+        const fragment = template.content.cloneNode(true);
+        const root = fragment.querySelector('.io-panel');
+        i18n.render(root);
+        faIconsInit(root);
+        root.dataset.io = ioButtons.join(' ');
+        const config = {
+            dom: root,
+            mount: ( ) => {
+                dom.on('#apply', 'click', ( ) => {
+                    this.saveEditorText();
+                });
+                dom.on('#revert', 'click', ( ) => {
+                    this.revertEditorText();
+                });
+                dom.on('#import', 'click', ( ) => {
+                    this.importFromFile()
+                });
+                dom.on('#export', 'click', ( ) => {
+                    this.exportToFile();
+                });
+            }
+        };
+        this.ioPanel.render(this.view, config);
     }
-    validateRegexes(regexes);
-}
 
-function updateViewAsync() {
-    if ( updateViewAsync.timer !== undefined ) { return; }
-    updateViewAsync.timer = self.setTimeout(( ) => {
-        updateViewAsync.timer = undefined;
-        updateView();
-    }, 71);
-}
+    updateSummaryPanel(dom) {
+        if ( dom instanceof Object ) {
+            if ( this.updateSummaryPanel.timer !== undefined ) {
+                self.clearTimeout(this.updateSummaryPanel.timer);
+                this.updateSummaryPanel.timer = undefined;
+            }
+            return this.summaryPanel.render(this.view, { dom });
+        }
+        if ( this.updateSummaryPanel.timer !== undefined ) { return; }
+        this.updateSummaryPanel.timer = self.setTimeout(( ) => {
+            this.updateSummaryPanel.timer = undefined;
+            this.summaryPanel.render(this.view, null);
+        }, 157);
+    }
 
-/******************************************************************************/
+    autoComplete(context) {
+        if ( typeof this.editor.autoComplete !== 'function' ) { return null; }
+        return this.editor.autoComplete(this, context);
+    }
 
-function updateSummaryPanel(info) {
-    self.cm6.showSummaryPanel(cmRules, {
-        template: '.summary-panel',
-        text: i18n$('dnrRulesCountInfo')
-            .replace('{count}', (info.userDnrRuleCount || 0).toLocaleString()),
-    });
-}
+    hoverTooltip(view, pos, side) {
+        if ( typeof this.editor.createTooltipWidget !== 'function' ) { return null; }
+        const details = view.domAtPos(pos);
+        const textNode = details.node;
+        if ( textNode.nodeType !== 3 ) { return null; }
+        const { parentElement } = textNode;
+        const targetElement = parentElement.closest('[data-tooltip]');
+        if ( targetElement === null ) { return null; }
+        const tooltipText = targetElement.getAttribute('data-tooltip');
+        if ( Boolean(tooltipText) === false ) { return null; }
+        const start = pos - details.offset;
+        const end = start + textNode.nodeValue.length;
+        if ( start === pos && side < 0 || end === pos && side > 0 ) { return null; }
+        return {
+            above: true,
+            pos: start,
+            end,
+            create: ( ) => {
+                return { dom: this.editor.createTooltipWidget(tooltipText) };
+            },
+        };
+    }
 
-function updateFeedbackPanel(info) {
-    const errors = [];
-    if ( Array.isArray(info.errors) ) {
-        info.errors.forEach(e => errors.push(e));
+    foldService(state, from) {
+        if ( typeof this.editor.foldService !== 'function' ) { return null; }
+        return this.editor.foldService(state, from);
     }
-    const text = errors.join('\n');
-    self.cm6.showFeedbackPanel(cmRules, { template: '.feedback-panel', text });
-}
 
-/******************************************************************************/
+    // Details of YAML document(s) intersecting with a text span. If the text span
+    // starts on a YAML document divider, the previous YAML document will be
+    // included. If the text span ends on a YAML document divider, the next YAML
+    // document will be included.
 
-function importRulesFromFile() {
-    const input = qs$('input[type="file"]');
-    input.onchange = ev => {
-        input.onchange = null;
-        const file = ev.target.files[0];
-        if ( file === undefined || file.name === '' ) { return; }
-        if ( file.type !== 'application/json' ) { return; }
-        const fr = new FileReader();
-        fr.onload = ( ) => {
-            if ( typeof fr.result !== 'string' ) { return; }
-            const rules = rulesFromJSON(fr.result);
-            if ( rules === undefined ) { return; }
-            const text = textFromRules(rules);
-            if ( text === undefined ) { return; }
-            const { doc } = cmRules.state;
-            const lastChars = doc.toString().trimEnd().slice(-4);
-            const lastLine = doc.line(doc.lines);
-            let from = lastLine.to;
-            let prepend = '';
-            if ( lastLine.text !== '' ) {
-                prepend = '\n';
-            } else {
-                from = lastLine.from;
+    snapToYamlDocument(doc, start, end) {
+        let yamlDocStart = doc.lineAt(start).number;
+        if ( this.reYamlDocSeparator.test(doc.line(yamlDocStart).text) ) {
+            if ( yamlDocStart > 1 ) {
+                yamlDocStart -= 1;
             }
-            if ( /(?:^|\n)---$/.test(lastChars) === false ) {
-                prepend = `${prepend}---\n`;
+        }
+        while ( yamlDocStart > 1 ) {
+            const line = doc.line(yamlDocStart);
+            if ( this.reYamlDocSeparator.test(line.text) ) { break; }
+            yamlDocStart -= 1;
+        }
+        const lastLine = doc.lines;
+        let yamlDocEnd = doc.lineAt(end).number;
+        if ( this.reYamlDocSeparator.test(doc.line(yamlDocEnd).text) ) {
+            if ( yamlDocEnd < lastLine ) {
+                yamlDocEnd += 1;
             }
-            cmRules.dispatch({ changes: { from, insert: `${prepend}${text}` } });
-            self.cm6.foldAll(cmRules);
-            cmRules.focus();
-        };
-        fr.readAsText(file);
-    };
-    // Reset to empty string, this will ensure a change event is properly
-    // triggered if the user pick a file, even if it's the same as the last
-    // one picked.
-    input.value = '';
-    input.click();
-}
-
-/******************************************************************************/
-
-function exportRulesToFile() {
-    const text = getEditorText();
-    const { rules } = rulesFromText(text);
-    if ( Array.isArray(rules) === false ) { return; }
-    let ruleId = 1;
-    for ( const rule of rules ) {
-        rule.id = ruleId++;
-    }
-    const filename = 'my-ubol-dnr-rules.json';
-    const a = document.createElement('a');
-    a.href = `data:application/json;charset=utf-8,${JSON.stringify(rules, null, 2)}`;
-    dom.attr(a, 'download', filename || '');
-    dom.attr(a, 'type', 'application/json');
-    a.click();
-}
-
-/******************************************************************************/
-
-function importRulesFromPaste(transaction) {
-    const { from, to } = rangeFromTransaction(transaction);
-    if ( from === undefined || to === undefined ) { return; }
-    // Paste position must match start of a line
-    const { newDoc } = transaction;
-    const lineFrom = newDoc.lineAt(from);
-    if ( lineFrom.from !== from ) { return; }
-    // Paste position must match a rule boundary
-    if ( lineFrom.number !== 1 ) {
-        const lineBefore = newDoc.line(lineFrom.number-1);
-        if ( /^---\s*$/.test(lineBefore.text) === false ) { return; }
-    }
-    const pastedText = newDoc.sliceString(from, to);
-    const rules = rulesFromJSON(pastedText);
-    if ( rules === undefined ) { return; }
-    const yamlText = textFromRules(rules);
-    if ( yamlText === undefined ) { return; }
-    cmRules.dispatch({ changes: { from, to, insert: yamlText } });
-    self.cm6.foldAll(cmRules);
-    return true;
-}
-
-/******************************************************************************/
-
-function foldService(state, from) {
-    const { doc } = state;
-    const lineFrom = doc.lineAt(from);
-    if ( reFoldable.test(lineFrom.text) === false ) { return null; }
-    if ( lineFrom.number <= 5 ) { return null ; }
-    const lineBlockStart = doc.line(lineFrom.number - 5);
-    if ( reFoldCandidates.test(lineBlockStart.text) === false ) { return null; }
-    for ( let i = lineFrom.number-4; i < lineFrom.number; i++ ) {
-        const line = doc.line(i);
-        if ( reFoldable.test(line.text) === false ) { return null; }
-    }
-    let i = lineFrom.number + 1;
-    for ( ; i <= doc.lines; i++ ) {
-        const lineNext = doc.line(i);
-        if ( reFoldable.test(lineNext.text) === false ) { break; }
-    }
-    i -= 1;
-    if ( i === lineFrom.number ) { return null; }
-    const lineFoldEnd = doc.line(i);
-    return { from: lineFrom.from+6, to: lineFoldEnd.to };
-}
-
-const reFoldable = /^ {4}- \S/;
-const reFoldCandidates = new RegExp(`^(?: {2})+${[
-    'initiatorDomains',
-    'excludedInitiatorDomains',
-    'requestDomains',
-    'excludedRequestDomains',
-].join('|')}:$`);
-
-/******************************************************************************/
-
-function smartBackspace(transaction) {
-    const { from, to } = rangeFromTransaction(transaction);
-    if ( from === undefined || to === undefined ) { return; }
-    if ( to !== from ) { return; }
-    const { newDoc } = transaction;
-    const line = newDoc.lineAt(from);
-    if ( /^(?: {2})+-$/.test(line.text) === false ) { return; }
-    cmRules.dispatch({ changes: { from: from-3, to: from, insert: '' } });
-    return true;
-}
-
-/******************************************************************************/
+        }
+        while ( yamlDocEnd < lastLine ) {
+            const line = doc.line(yamlDocEnd);
+            if ( this.reYamlDocSeparator.test(line.text) ) { break; }
+            yamlDocEnd += 1;
+        }
+        return { yamlDocStart, yamlDocEnd };
+    }
 
-function lineIsArrayItem(doc, lineNo) {
-    if ( lineNo < 1 || lineNo > doc.lines ) { return false; }
-    const line = doc.line(lineNo);
-    return line.text.startsWith('    - ');
-}
+    rangeFromTransaction(transaction) {
+        let from, to;
+        transaction.changes.iterChangedRanges((fromA, toA, fromB, toB) => {
+            if ( from === undefined || fromB < from ) { from = fromB; }
+            if ( to === undefined || toB > to ) { to = toB; }
+        });
+        return { from, to };
+    }
 
-/******************************************************************************/
+    addToModifiedRange(transaction) {
+        const { from, to } = this.rangeFromTransaction(transaction);
+        if ( from === undefined || to === undefined ) { return; }
+        const { newDoc } = transaction;
+        const { yamlDocStart, yamlDocEnd } = this.snapToYamlDocument(newDoc, from, to);
+        if ( this.modifiedRange.start === 0 || yamlDocStart < this.modifiedRange.start ) {
+            this.modifiedRange.start = yamlDocStart;
+        }
+        if ( this.modifiedRange.end === 0 || yamlDocEnd > this.modifiedRange.end ) {
+            this.modifiedRange.end = yamlDocEnd;
+        }
+    }
 
-function smartArrayItem(doc, from) {
-    const line = doc.lineAt(from);
-    if ( lineIsArrayItem(doc, line.number-1) === false ) {
-        if ( lineIsArrayItem(doc, line.number+1) === false ) { return ''; }
+    lineIndentAt(line) {
+        const match = /^(?: {2})*/.exec(line.text);
+        const indent = match !== null ? match[0].length : -1;
+        if ( indent === -1 || (indent & 1) !== 0 ) { return -1; }
+        return indent / 2;
     }
-    const blanks = /^ {2,4}$/.exec(line.text);
-    if ( blanks === null ) { return ''; }
-    const count = blanks[0].length;
-    return `${' '.repeat(4-count)}- `;
-}
 
-/******************************************************************************/
+    getScopeAt(from, doc) {
+        doc ||= this.view.state.doc;
+        const lineFrom = doc.lineAt(from);
+        const out = {};
+        let depth = this.lineIndentAt(lineFrom);
+        if ( depth === -1 ) { return out; }
+        const text = lineFrom.text.trim();
+        if ( text.startsWith('#') ) { return out; }
+        const path = [];
+        const end = text.indexOf(':');
+        if ( end !== -1 ) {
+            const beg = text.startsWith('- ') ? 2 : 0;
+            path.push(text.slice(beg, end+1));
+        }
+        let lineNo = lineFrom.number;
+        while ( depth > 0 && lineNo > 1 ) {
+            lineNo -= 1;
+            const lineBefore = doc.line(lineNo);
+            const text = lineBefore.text.trim();
+            if ( text.startsWith('#') ) { continue; }
+            if ( this.lineIndentAt(lineBefore) > (depth-1) ) { continue; }
+            const match = /^- ([^:]+:)/.exec(text);
+            if ( match !== null ) {
+                path.unshift(match[1]);
+            } else {
+                path.unshift(text);
+            }
+            depth -= 1;
+        }
+        out.scope = path.join('');
+        out.depth = path.length;
+        return out;
+    }
 
-function smartReturn(transaction) {
-    const { from, to } = rangeFromTransaction(transaction);
-    if ( from === undefined || to === undefined ) { return; }
-    const { newDoc } = transaction;
-    const insert = smartArrayItem(newDoc, to);
-    if ( insert === '' ) { return; }
-    cmRules.dispatch({
-        changes: { from: to, insert },
-        selection: { anchor: to + insert.length },
-    });
-    return true;
-}
+    async saveEditorText() {
+        if ( typeof this.editor.saveEditorText !== 'function' ) { return; }
+        if ( this.editorTextChanged() === false ) { return; }
+        const saved = await this.editor.saveEditorText(this);
+        if ( saved !== true ) { return; }
+        this.lastSavedText = this.normalizeEditorText(this.getEditorText());
+        this.updateView();
+    }
 
-/******************************************************************************/
+    revertEditorText() {
+        if ( this.editorTextChanged() === false ) { return; }
+        this.setEditorText(this.lastSavedText);
+    }
 
-function smartSpacebar(transaction) {
-    const { from, to } = rangeFromTransaction(transaction);
-    if ( from === undefined || to === undefined ) { return; }
-    if ( (to - from) !== 1 ) { return; }
-    const { newDoc } = transaction;
-    const line = newDoc.lineAt(to);
-    const localTo = to - line.from;
-    const before = line.text.slice(0, localTo);
-    if ( /^(?: {1}| {3})$/.test(before) === false ) { return; }
-    const insert = smartArrayItem(newDoc, to) || ' ';
-    cmRules.dispatch({
-        changes: { from: to, insert },
-        selection: { anchor: to + insert.length },
-    });
-    return true;
-}
+    smartBackspace(transaction) {
+        const { from, to } = this.rangeFromTransaction(transaction);
+        if ( from === undefined || to === undefined ) { return; }
+        if ( to !== from ) { return; }
+        const { newDoc } = transaction;
+        const line = newDoc.lineAt(from);
+        if ( /^(?: {2})+-$/.test(line.text) === false ) { return; }
+        this.view.dispatch({ changes: { from: from-3, to: from, insert: '' } });
+        return true;
+    }
 
-/******************************************************************************/
+    lineIsArrayItem(doc, lineNo) {
+        if ( lineNo < 1 || lineNo > doc.lines ) { return false; }
+        const line = doc.line(lineNo);
+        return /^(?: {2})+- /.test(line.text);
+    }
 
-const dnryamlStreamParser = {
-    name: 'dnryaml',
-    startState() {
-        return {
-            scope: 0,
-            reKeywords: new RegExp(`\\b(${[
-                'block',
-                'redirect',
-                'allow',
-                'modifyHeaders',
-                'upgradeScheme',
-                'allowAllRequest',
-                'append',
-                'set',
-                'remove',
-                'firstParty',
-                'thirdParty',
-                'true',
-                'false',
-                'connect',
-                'delete',
-                'get',
-                'head',
-                'options',
-                'patch',
-                'post',
-                'put',
-                'other',
-                'main_frame',
-                'sub_frame',
-                'stylesheet',
-                'script',
-                'image',
-                'font',
-                'object',
-                'xmlhttprequest',
-                'ping',
-                'csp_report',
-                'media',
-                'websocket',
-                'webtransport',
-                'webbundle',
-                'other',
-            ].join('|')})\\b`),
-        };
-    },
-    token(stream, state) {
-        const c = stream.peek();
-        if ( c === '#' ) {
-            if ( (stream.pos === 0 || /\s/.test(stream.string.charAt(stream.pos - 1))) ) {
-                stream.skipToEnd();
-                return 'comment';
+    smartArrayItem(doc, from) {
+        const line = doc.lineAt(from);
+        if ( line.from === 0 ) { return; }
+        const blanks = /^ *$/.exec(line.text);
+        if ( blanks === null ) { return; }
+        if ( this.editor.newlineAssistant ) {
+            const { scope } = this.getScopeAt(line.from-1, doc);
+            const insert = this.editor.newlineAssistant[scope];
+            if ( insert ) {
+                this.view.dispatch({
+                    changes: { from: line.from, to: line.to, insert },
+                    selection: { anchor: line.from + insert.length },
+                });
+                return true;
             }
         }
-        if ( stream.sol() ) {
-            if ( stream.match('---') ) { return 'contentSeparator'; }
-            if ( stream.match('...') ) { return 'contentSeparator'; }
-        }
-        if ( stream.eatSpace() ) {
-            return null;
-        }
-        const { scope } = state;
-        state.scope = 0;
-        if ( scope === 0 && stream.match(/^[^:]+(?=:)/) ) {
-            state.scope = 1;
-            return 'keyword';
+        let targetIndent;
+        if ( this.lineIsArrayItem(doc, line.number-1) ) {
+            targetIndent = doc.line(line.number-1).text.indexOf('- ');
+        } else if ( this.lineIsArrayItem(doc, line.number+1) ) {
+            targetIndent = doc.line(line.number+1).text.indexOf('- ');
         }
-        if ( scope === 1 && stream.match(/^:(?: |$)/) ) {
-            return 'meta';
-        }
-        if ( stream.match(/^- /) ) {
-            return 'meta';
-        }
-        if ( stream.match(state.reKeywords) ) {
-            return 'literal';
-        }
-        if ( stream.match(/^\S+/) ) {
-            return null;
-        }
-        stream.next();
-        return null;
-    },
-};
-
-/******************************************************************************/
+        if ( targetIndent === undefined ) { return; }
+        const indent = targetIndent - blanks[0].length;
+        if ( indent < 0 || indent > 2 ) { return; }
+        const insert = `${' '.repeat(indent)}- `;
+        this.view.dispatch({
+            changes: { from, insert },
+            selection: { anchor: from + insert.length },
+        });
+        return true;
+    }
 
-function cmUpdateListener(info) {
-    if ( info.docChanged === false ) { return; }
-    for ( const transaction of info.transactions ) {
-        if ( transaction.docChanged === false ) { continue; }
-        addToModifiedRange(transaction);
-        if ( transaction.isUserEvent('delete.backward') ) {
-            smartBackspace(transaction);
-        } else if ( transaction.isUserEvent('input.paste') ) {
-            importRulesFromPaste(transaction);
-        } else if ( transaction.isUserEvent('input') ) {
-            if ( smartReturn(transaction) ) { continue; }
-            smartSpacebar(transaction);
-        }
+    smartReturn(transaction) {
+        const { from, to } = this.rangeFromTransaction(transaction);
+        if ( from === undefined || to === undefined ) { return; }
+        const { newDoc } = transaction;
+        return this.smartArrayItem(newDoc, to);
     }
-    updateViewAsync();
-}
 
-/******************************************************************************/
+    smartSpacebar(transaction) {
+        const { from, to } = this.rangeFromTransaction(transaction);
+        if ( from === undefined || to === undefined ) { return; }
+        if ( (to - from) !== 1 ) { return; }
+        const { newDoc } = transaction;
+        const line = newDoc.lineAt(to);
+        const localTo = to - line.from;
+        const before = line.text.slice(0, localTo);
+        if ( /^(?: {1}| {3})$/.test(before) === false ) { return; }
+        if ( this.smartArrayItem(newDoc, to) ) { return true; }
+        this.view.dispatch({
+            changes: { from: to, insert: ' ' },
+            selection: { anchor: to + 1 },
+        });
+        return true;
+    }
 
-function gutterClick(view, info) {
-    const reSeparator = /^---\s*/;
-    const { doc } = view.state;
-    const lineFirst = doc.lineAt(info.from);
-    if ( lineFirst.text === '' ) { return false; }
-    let { from, to } = lineFirst;
-    if ( reSeparator.test(lineFirst.text) ) {
-        let lineNo = lineFirst.number + 1;
-        while ( lineNo < doc.lines ) {
-            const line = doc.line(lineNo);
-            if ( reSeparator.test(line.text) ) { break; }
-            to = line.to;
-            lineNo += 1;
+    gutterClick(view, info) {
+        const reSeparator = /^(?:---|# ---)\s*/;
+        const { doc } = view.state;
+        const lineFirst = doc.lineAt(info.from);
+        if ( lineFirst.text === '' ) { return false; }
+        let { from, to } = lineFirst;
+        if ( reSeparator.test(lineFirst.text) ) {
+            let lineNo = lineFirst.number + 1;
+            while ( lineNo < doc.lines ) {
+                const line = doc.line(lineNo);
+                if ( reSeparator.test(line.text) ) { break; }
+                to = line.to;
+                lineNo += 1;
+            }
         }
+        view.dispatch({
+            selection: { anchor: from, head: to+1 }
+        });
+        view.focus();
+        return true;
     }
-    view.dispatch({
-        selection: { anchor: from, head: to+1 }
-    });
-    view.focus();
-    return true;
-}
 
-/******************************************************************************/
+    importFromFile() {
+        const editor = this.editor;
+        if ( typeof editor.importFromFile !== 'function' ) { return; }
+        const input = qs$('input[type="file"]');
+        input.accept = editor.ioAccept || '';
+        input.onchange = ev => {
+            input.onchange = null;
+            const file = ev.target.files[0];
+            if ( file === undefined || file.name === '' ) { return; }
+            const fr = new FileReader();
+            fr.onload = ( ) => {
+                if ( typeof fr.result !== 'string' ) { return; }
+                editor.importFromFile(this, fr.result);
+            };
+            fr.readAsText(file);
+        };
+        // Reset to empty string, this will ensure a change event is properly
+        // triggered if the user pick a file, even if it's the same as the last
+        // one picked.
+        input.value = '';
+        input.click();
+    }
 
-function hoverTooltip(view, pos, side) {
-    const details = view.domAtPos(pos);
-    const textNode = details.node;
-    if ( textNode.nodeType !== 3 ) { return null; }
-    const { parentElement } = textNode;
-    const targetElement = parentElement.closest('[data-tooltip]');
-    if ( targetElement === null ) { return null; }
-    const tooltipText = targetElement.getAttribute('data-tooltip');
-    if ( Boolean(tooltipText) === false ) { return null; }
-    const start = pos - details.offset;
-    const end = start + textNode.nodeValue.length;
-    if ( start === pos && side < 0 || end === pos && side > 0 ) { return null; }
-    return {
-        above: true,
-        pos: start,
-        end,
-        create() {
-            const template = document.querySelector('.badmark-tooltip');
-            const fragment = template.content.cloneNode(true);
-            const dom = fragment.querySelector('.badmark-tooltip');
-            dom.textContent = tooltipText;
-            return { dom };
+    exportToFile() {
+        const editor = this.editor;
+        if ( typeof editor.exportToFile !== 'function' ) { return; }
+        const text = this.getEditorText();
+        const result = editor.exportToFile(text);
+        if ( result === undefined ) { return; }
+        const { fname, data, mime } = result;
+        const a = document.createElement('a');
+        a.href = `data:${mime};charset=utf-8,${encodeURIComponent(data)}`;
+        dom.attr(a, 'download', fname || '');
+        dom.attr(a, 'type', mime);
+        a.click();
+    }
+
+    streamParser = {
+        startState: ( ) => {
+            return { scope: 0 };
+        },
+        token: (stream, state) => {
+            if ( stream.sol() ) {
+                if ( stream.match(/^---\s*$/) ) { return 'meta'; }
+                if ( stream.match(/^# ---\s*$/) ) { return 'meta comment'; }
+                if ( stream.match(/\.\.\.\s*$/) ) { return 'meta'; }
+            }
+            const c = stream.peek();
+            if ( c === '#' ) {
+                if ( (stream.pos === 0 || /\s/.test(stream.string.charAt(stream.pos - 1))) ) {
+                    stream.skipToEnd();
+                    return 'comment';
+                }
+            }
+            if ( stream.eatSpace() ) {
+                return null;
+            }
+            const { scope } = state;
+            state.scope = 0;
+            if ( scope === 0 && stream.match(/^[^:]+(?=:)/) ) {
+                state.scope = 1;
+                return 'keyword';
+            }
+            if ( scope === 1 && stream.match(/^:(?: |$)/) ) {
+                return 'punctuation';
+            }
+            if ( stream.match(/^- /) ) {
+                return 'punctuation';
+            }
+            if ( this.editor.streamParserKeywords ) {
+                if ( stream.match(this.editor.streamParserKeywords) ) {
+                    return 'literal';
+                }
+            }
+            if ( stream.match(/^\S+/) ) {
+                return null;
+            }
+            stream.next();
+            return null;
+        },
+        languageData: {
+            commentTokens: { line: '#' },
         },
     };
 }
 
 /******************************************************************************/
 
-let lastSavedText = '';
-
-const cmRules = await localRead('userDnrRules').then(text => {
-    text ||= '';
-
-    const view = self.cm6.createEditorView({
-        text,
-        dnrRules: true,
-        oneDark: dom.cl.has(':root', 'dark'),
-        updateListener: cmUpdateListener,
-        saveListener: ( ) => {
-            saveEditorText();
-        },
-        lineError: true,
-        spanError: true,
-        // https://codemirror.net/examples/autocompletion/
-        autocompletion: {
-            override: [ autoComplete ],
-            activateOnCompletion: ( ) => true,
-        },
-        gutterClick,
-        hoverTooltip,
-        streamParser: dnryamlStreamParser,
-        foldService,
-    }, qs$('#cm-dnrRules'));
-
-    lastSavedText = text;
-    self.cm6.foldAll(view);
-    self.cm6.resetUndoRedo(view);
-
-    browser.storage.onChanged.addListener((changes, area) => {
-        if ( area !== 'local' ) { return; }
-        const { userDnrRuleCount } = changes;
-        if ( userDnrRuleCount instanceof Object === false ) { return; }
-        const { newValue } = changes.userDnrRuleCount;
-        updateSummaryPanel({ userDnrRuleCount: newValue });
-    });
-
-    localRead('userDnrRuleCount').then(userDnrRuleCount => {
-        updateSummaryPanel({ userDnrRuleCount })
+async function start() {
+    const editor = new Editor();
+    await editor.init();
+    dom.on('#editors', 'change', ( ) => {
+        const select = qs$('#editors');
+        const mode = select.value;
+        if ( mode === editor.mode ) { return; }
+        editor.selectEditor(mode);
+        localWrite('dashboard.develop.editor', editor.mode);
     });
+}
 
-    dom.on('#dnrRulesApply', 'click', ( ) => {
-        saveEditorText();
-    });
-    dom.on('#dnrRulesRevert', 'click', ( ) => {
-        setEditorText(lastSavedText);
-        sendMessage({ what: 'updateUserDnrRules' });
-    });
-    dom.on('#dnrRulesImport', 'click', importRulesFromFile);
-    dom.on('#dnrRulesExport', 'click', exportRulesToFile);
-
-    return view;
+let observer = new IntersectionObserver(entries => {
+    for ( const entry of entries ) {
+        if ( entry.isIntersecting === false ) { continue; }
+        start();
+        observer.disconnect();
+        observer = null;
+        break;
+    }
 });
+observer.observe(qs$('section[data-pane="develop"]'));
 
 /******************************************************************************/