Ditch UWP solution completely.

This commit is contained in:
Burak Kaan Köse
2024-07-20 23:32:39 +02:00
parent 654b7ec1a7
commit ebf4bc6f97
378 changed files with 674 additions and 5271 deletions

View File

@@ -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>

105
Wino.Packaging/JS/editor.js Normal file
View File

@@ -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">`);
});
};

View File

@@ -0,0 +1,4 @@
* {
scrollbar-color: auto !important;
scrollbar-width: thin !important;
}

File diff suppressed because it is too large Load Diff

5664
Wino.Packaging/JS/libs/jodit.min.css vendored Normal file

File diff suppressed because one or more lines are too long

10
Wino.Packaging/JS/libs/jodit.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@@ -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>