Ditch UWP solution completely.

2024-07-20 23:32:39 +02:00
parent 654b7ec1a7
commit ebf4bc6f97
378 changed files with 674 additions and 5271 deletions
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="language" content="english">
+    <script src="./libs/jodit.min.js"></script>
+    <script src="./libs/darkreader.js"></script>
+    <link rel="stylesheet" href="./libs/jodit.min.css" />
+    <link rel="stylesheet" href="./global.css" />
+
+    <style>
+        .jodit-toolbar-button__trigger svg > path {
+            fill: black;
+        }
+
+        #editor {
+            height: 100%;
+        }
+
+
+
+        .jodit-container:not(.jodit_inline) {
+            background-color: transparent;
+            border: none;
+            border-radius: initial;
+        }
+
+        .jodit-wysiwyg {
+            min-height: 200px
+        }
+
+        /* Hide taskbar in css. Should not be hidden from configuration, because it's used to sync state with native buttons. */
+        .jodit-toolbar__box {
+            display: none;
+        }
+
+        body {
+            margin: 8px;
+        }
+    </style>
+</head>
+
+<body>
+    <meta name="color-scheme" content="dark light">
+    <textarea id="editor" name="editor"></textarea>
+
+    <!-- hidden input to handle image uploads -->
+    <input type="file" id="imageInput" style="display:none;">
+    <script src="/editor.js"></script>
+</body>
+
+</html>
@@ -0,0 +1,105 @@
+const editor = Jodit.make("#editor", {
+    "useSearch": false,
+    "toolbar": true,
+    "buttons": "bold,italic,underline,strikethrough,brush,ul,ol,font,fontsize,paragraph,image,link,indent,outdent,align,lineHeight,table",
+    "inline": true,
+    "toolbarAdaptive": false,
+    "toolbarInlineForSelection": false,
+    "showCharsCounter": false,
+    style: { font: "14px Arial" },
+    "showWordsCounter": false,
+    "showXPathInStatusbar": false,
+    "disablePlugins": "add-new-line",
+    "showPlaceholder": false,
+    "uploader": {
+        "insertImageAsBase64URI": true
+    },
+    "enter": "DIV",
+    "minHeight": 200
+});
+
+// Handle the image input change event
+imageInput.addEventListener('change', () => {
+    const file = imageInput.files[0];
+    if (file) {
+        const reader = new FileReader();
+        reader.onload = function (event) {
+            const base64Image = event.target.result;
+            insertImages([base64Image]);
+        };
+        reader.readAsDataURL(file);
+    }
+});
+
+const disabledButtons = ["indent", "outdent"];
+const ariaPressedButtons = ["bold", "italic", "underline", "strikethrough", "ul", "ol"];
+
+const alignmentButton = document.querySelector(`[ref='left']`).firstChild.firstChild;
+const alignmentObserver = new MutationObserver(function () {
+    const value = alignmentButton.firstChild.getAttribute('class').split(' ')[0];
+    window.chrome.webview.postMessage({ type: 'alignment', value: value });
+});
+alignmentObserver.observe(alignmentButton, { childList: true, attributes: true, attributeFilter: ["class"] });
+
+const ariaObservers = ariaPressedButtons.map(button => {
+    const buttonContainer = document.querySelector(`[ref='${button}']`);
+    const observer = new MutationObserver(function () { pressedChanged(buttonContainer) });
+    observer.observe(buttonContainer.firstChild, { attributes: true, attributeFilter: ["aria-pressed"] });
+
+    return observer;
+});
+
+const disabledObservers = disabledButtons.map(button => {
+    const buttonContainer = document.querySelector(`[ref='${button}']`);
+    const observer = new MutationObserver(function () { disabledButtonChanged(buttonContainer) });
+    observer.observe(buttonContainer.firstChild, { attributes: true, attributeFilter: ["disabled"] });
+
+    return observer;
+});
+
+function pressedChanged(buttonContainer) {
+    const ref = buttonContainer.getAttribute('ref');
+    const value = buttonContainer.firstChild.getAttribute('aria-pressed');
+    window.chrome.webview.postMessage({ type: ref, value: value });
+}
+
+function disabledButtonChanged(buttonContainer) {
+    const ref = buttonContainer.getAttribute('ref');
+    const value = buttonContainer.firstChild.getAttribute('disabled');
+    console.log(buttonContainer, ref, value);
+    window.chrome.webview.postMessage({ type: ref, value: value });
+}
+
+
+function RenderHTML(htmlString) {
+    editor.s.insertHTML(htmlString);
+    editor.synchronizeValues();
+}
+
+function GetHTMLContent() {
+    return editor.value;
+}
+
+function SetLightEditor() {
+    DarkReader.disable();
+}
+
+function SetDarkEditor() {
+    DarkReader.enable();
+}
+
+function toggleToolbar(enable) {
+    const toolbar = document.querySelector('.jodit-toolbar__box');
+    if (enable == 'true') {
+        toolbar.style.display = 'flex';
+    }
+    else {
+        toolbar.style.display = 'none';
+    }
+}
+
+function insertImages(images) {
+    images.forEach(image => {
+        editor.selection.insertHTML(`<img src="${image}" alt="Embedded Image">`);
+    });
+};
@@ -0,0 +1,4 @@
+* {
+    scrollbar-color: auto !important;
+    scrollbar-width: thin !important;
+}
@@ -0,0 +1,51 @@
+<html>
+<head>
+    <link rel="stylesheet" href="./global.css" />
+    <script src="./libs/darkreader.js"></script>
+    <style>
+        body {
+            padding-left: 12px;
+            padding-right: 12px;
+            padding-top: 8px;
+            padding-bottom: 8px;
+            margin: 0px;
+            border-radius: 8px;
+        }
+
+        #readerDiv {
+            font-family: Arial, Helvetica, sans-serif;
+            background-color: transparent !important;
+        }
+    </style>
+</head>
+<body>
+    <meta name="color-scheme" content="dark light">
+    <script>
+        function RenderHTML(htmlString) {
+            var containerDiv = document.getElementById("readerDiv");
+            containerDiv.innerHTML = htmlString;
+        }
+
+        function ChangeFontFamily(fontFamily) {
+            var containerDiv = document.getElementById("readerDiv");
+            containerDiv.style.fontFamily = fontFamily;
+        }
+
+        function ChangeFontSize(size) {
+            var containerDiv = document.getElementById("readerDiv");
+            containerDiv.style.fontSize = size;
+        }
+
+        function SetLightEditor() {
+            document.documentElement.setAttribute('data-theme', 'light');
+            DarkReader.disable();
+        }
+
+        function SetDarkEditor() {
+            document.documentElement.setAttribute('data-theme', 'dark');
+            DarkReader.enable();
+        }
+    </script>
+    <div id="readerDiv"></div>
+</body>
+</html>