Introduce new TreeView UI component

Key highlights:

- Written from scratch to cater specifically to privacy.sexy's
  needs and requirements.
- The visual look mimics the previous component with minimal changes,
  but its internal code is completely rewritten.
- Lays groundwork for future functionalities like the "expand all"
  button a flat view mode as discussed in #158.
- Facilitates the transition to Vue 3 by omitting the Vue 2.0 dependent
  `liquour-tree` as part of #230.

Improvements and features:

- Caching for quicker node queries.
- Gradual rendering of nodes that introduces a noticable boost in
  performance, particularly during search/filtering.
  - `TreeView` solely governs the check states of branch nodes.

Changes:

- Keyboard interactions now alter the background color to highlight the
  focused item. Previously, it was changing the color of the text.
- Better state management with clear separation of concerns:
  - `TreeView` exclusively manages indeterminate states.
  - `TreeView` solely governs the check states of branch nodes.
  - Introduce transaction pattern to update state in batches to minimize
    amount of events handled.
- Improve keyboard focus, style background instead of foreground. Use
  hover/touch color on keyboard focus.
- `SelectableTree` has been removed. Instead, `TreeView` is now directly
  integrated with `ScriptsTree`.
- `ScriptsTree` has been refactored to incorporate hooks for clearer
  code and separation of duties.
- Adopt Vue-idiomatic bindings instead of keeping a reference of the
  tree component.
- Simplify and change filter event management.
- Abandon global styles in favor of class-scoped styles.
- Use global mixins with descriptive names to clarify indended
  functionality.

tests/unit/presentation/components/Scripts/View/Tree/NodeContent/Documentation/MarkdownRenderer.spec.ts

@@ -0,0 +1,104 @@
+import { describe, it, expect } from 'vitest';
+import { createRenderer } from '@/presentation/components/Scripts/View/Tree/NodeContent/Documentation/MarkdownRenderer';
+
+describe('MarkdownRenderer', () => {
+  describe('createRenderer', () => {
+    it('can create', () => {
+      // arrange & act
+      const renderer = createRenderer();
+      // assert
+      expect(renderer !== undefined);
+    });
+    describe('sets expected anchor attributes', () => {
+      const attributes: ReadonlyArray<{
+        readonly name: string,
+        readonly expectedValue: string,
+        readonly invalidMarkdown: string
+      }> = [
+        {
+          name: 'target',
+          expectedValue: '_blank',
+          invalidMarkdown: '<a href="https://undergroundwires.dev" target="_self">example</a>',
+        },
+        {
+          name: 'rel',
+          expectedValue: 'noopener noreferrer',
+          invalidMarkdown: '<a href="https://undergroundwires.dev" rel="nooverride">example</a>',
+        },
+      ];
+      for (const attribute of attributes) {
+        const { name, expectedValue, invalidMarkdown } = attribute;
+
+        it(`adds "${name}" attribute to anchor elements`, () => {
+          // arrange
+          const renderer = createRenderer();
+          const markdown = '[undergroundwires.dev](https://undergroundwires.dev)';
+
+          // act
+          const htmlString = renderer.render(markdown);
+
+          // assert
+          const html = parseHtml(htmlString);
+          const aElement = html.getElementsByTagName('a')[0];
+          expect(aElement.getAttribute(name)).to.equal(expectedValue);
+        });
+
+        it(`overrides existing "${name}" attribute`, () => {
+          // arrange
+          const renderer = createRenderer();
+
+          // act
+          const htmlString = renderer.render(invalidMarkdown);
+
+          // assert
+          const html = parseHtml(htmlString);
+          const aElement = html.getElementsByTagName('a')[0];
+          expect(aElement.getAttribute(name)).to.equal(expectedValue);
+        });
+      }
+    });
+    it('does not convert single linebreak to <br>', () => {
+      // arrange
+      const renderer = createRenderer();
+      const markdown = 'Text with\nSingle\nLinebreaks';
+      // act
+      const htmlString = renderer.render(markdown);
+      // assert
+      const html = parseHtml(htmlString);
+      const totalBrElements = html.getElementsByTagName('br').length;
+      expect(totalBrElements).to.equal(0);
+    });
+    it('creates links for plain URL', () => {
+      // arrange
+      const renderer = createRenderer();
+      const expectedUrl = 'https://privacy.sexy/';
+      const markdown = `Visit ${expectedUrl} now!`;
+      // act
+      const htmlString = renderer.render(markdown);
+      // assert
+      const html = parseHtml(htmlString);
+      const aElement = html.getElementsByTagName('a')[0];
+      const href = aElement.getAttribute('href');
+      expect(href).to.equal(expectedUrl);
+    });
+    it('it generates beautiful labels for auto-linkified URL', () => {
+      // arrange
+      const renderer = createRenderer();
+      const url = 'https://privacy.sexy';
+      const expectedText = 'privacy.sexy';
+      const markdown = `Visit ${url} now!`;
+      // act
+      const htmlString = renderer.render(markdown);
+      // assert
+      const html = parseHtml(htmlString);
+      const aElement = html.getElementsByTagName('a')[0];
+      expect(aElement.text).to.equal(expectedText);
+    });
+  });
+});
+
+function parseHtml(htmlString: string): Document {
+  const parser = new window.DOMParser();
+  const htmlDoc = parser.parseFromString(htmlString, 'text/html');
+  return htmlDoc;
+}