[mv3] Use CodeMirror editor for list of no-filtering websites

This is a first step to integrate CodeMirror6 into the project.

As a side effect, this should take care of:
https://github.com/uBlockOrigin/uBOL-home/issues/297

Though most likely the list of no-filtering websites will probably
move to its own pane as in uBO in some future.

platform/mv3/extension/css/settings.css

@@ -78,10 +78,9 @@ h3[data-i18n="filteringMode0Name"]::first-letter {
     text-transform: capitalize;
     }
 #trustedSites  {
-    box-sizing: border-box;
-    height: 6rem;
-    resize: vertical;
-    width: 100%;
+    background-color: var(--surface-0);
+    border: 1px solid var(--surface-3);
+    min-height: 8rem;
     }
 
 section[data-pane="rulesets"] > div:first-of-type {

platform/mv3/extension/dashboard.html

@@ -91,8 +91,7 @@
         <div>
             <h3 data-i18n="filteringMode0Name"></h3>
             <p data-i18n="noFilteringModeDescription">_</p>
-            <p><textarea id="trustedSites" spellcheck="false" placeholder="noFilteringModePlaceholder"></textarea>
-            </p>
+            <div id="trustedSites"></div>
         </div>
     </section>
     <!-- -------- -->
@@ -156,6 +155,7 @@
             </span>
         </div>
     </div>
+<script src="lib/codemirror/cm6.bundle.ubol.min.js"></script>
 <script src="js/theme.js" type="module"></script>
 <script src="js/fa-icons.js" type="module"></script>
 <script src="js/i18n.js" type="module"></script>

platform/mv3/extension/js/settings.js

@@ -22,11 +22,24 @@
 import { browser, sendMessage } from './ext.js';
 import { dom, qs$ } from './dom.js';
 import { hashFromIterable } from './dashboard.js';
+import { i18n$ } from './i18n.js';
 import punycode from './punycode.js';
 import { renderFilterLists } from './filter-lists.js';
 
 /******************************************************************************/
 
+const cm6 = self.cm6;
+const cmView = (( ) => {
+    const options = {};
+    if ( dom.cl.has(':root', 'dark') ) {
+        options.oneDark = true;
+    }
+    options.placeholder = i18n$('noFilteringModePlaceholder');
+    return cm6.createEditorView(
+        cm6.createEditorState('', options),
+        qs$('#trustedSites')
+    );
+})();
 let cachedRulesetData = {};
 
 /******************************************************************************/
@@ -167,12 +180,15 @@ dom.on('#developerMode input[type="checkbox"]', 'change', ev => {
 /******************************************************************************/
 
 function renderTrustedSites() {
-    const textarea = qs$('#trustedSites');
     const hostnames = cachedRulesetData.trustedSites || [];
-    textarea.value = hostnames.map(hn => punycode.toUnicode(hn)).join('\n');
-    if ( textarea.value !== '' ) {
-        textarea.value += '\n';
-    }
+    let text = hostnames.map(hn => punycode.toUnicode(hn)).join('\n');
+    if ( text !== '' ) { text += '\n'; }
+    cmView.dispatch({
+        changes: {
+            from: 0, to: cmView.state.doc.length,
+            insert: text
+        },
+    });
 }
 
 function changeTrustedSites() {
@@ -186,8 +202,8 @@ function changeTrustedSites() {
 }
 
 function getStagedTrustedSites() {
-    const textarea = qs$('#trustedSites');
-    return textarea.value.split(/\s/).map(hn => {
+    const text = cmView.state.doc.toString();
+    return text.split(/\s/).map(hn => {
         try {
             return punycode.toASCII(
                 (new URL(`https://${hn}/`)).hostname
@@ -198,7 +214,7 @@ function getStagedTrustedSites() {
     }).filter(hn => hn !== '');
 }
 
-dom.on('#trustedSites', 'blur', changeTrustedSites);
+dom.on(cmView.contentDOM, 'blur', changeTrustedSites);
 
 self.addEventListener('beforeunload', changeTrustedSites);
 
@@ -296,7 +312,8 @@ sendMessage({
         renderFilterLists(cachedRulesetData);
         renderWidgets();
         dom.cl.remove(dom.body, 'loading');
-    } catch {
+    } catch(reason) {
+        console.error(reason);
     }
     listen();
 }).catch(reason => {

platform/mv3/extension/lib/codemirror/README.md

@@ -0,0 +1,9 @@
+Steps to build `cm6.bundle.ubol.min.js` -- command line:
+
+- `git clone https://github.com/gorhill/codemirror-quickstart.git`
+    - This is a customized repo forked from <https://github.com/RPGillespie6/codemirror-quickstart>
+- `cd codemirror-quickstart`
+- `npm install`
+- `npm build`
+- `cm6.bundle.ubol.min.js` should be in `dist` directory
+- This is the origin of the `cm6.bundle.ubol.min.js` in the current directory

tools/make-mv3.sh

@@ -96,6 +96,7 @@ cp platform/mv3/extension/*.html "$UBOL_DIR"/
 cp platform/mv3/extension/*.json "$UBOL_DIR"/
 cp platform/mv3/extension/css/* "$UBOL_DIR"/css/
 cp -R platform/mv3/extension/js/* "$UBOL_DIR"/js/
+cp -R platform/mv3/extension/lib "$UBOL_DIR"/
 cp platform/mv3/"$PLATFORM"/ext-compat.js "$UBOL_DIR"/js/ 2>/dev/null || :
 cp platform/mv3/extension/img/* "$UBOL_DIR"/img/
 cp -R platform/mv3/extension/_locales "$UBOL_DIR"/