285 lines
12 KiB
HTML
285 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="language" content="english">
|
|
<meta name="viewport" content="width=device-width">
|
|
<link rel="stylesheet" href="https://app.example/katex.min.css" />
|
|
<link rel="stylesheet" href="https://app.example/monokai-sublime.min.css" />
|
|
<link rel="stylesheet" href="https://app.example/quill.snow.css" />
|
|
<link rel="stylesheet" href="https://app.example/global.css" />
|
|
|
|
<style>
|
|
body >
|
|
/* #standalone-container {
|
|
margin: 50px auto;
|
|
height: 100%;
|
|
|
|
} */
|
|
#editor-container {
|
|
height: 100%;
|
|
}
|
|
|
|
#wino-original-message-container {
|
|
border: solid #636e72;
|
|
margin-top: 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<meta name="color-scheme" content="dark light">
|
|
<div id="standalone-container">
|
|
<!-- remove display none to enable toolbar -->
|
|
<div id="toolbar-container" style="display: none;">
|
|
<span class="ql-formats">
|
|
<!-- <button id="ql-font-monospace" class="ql-font" value="monospace" />
|
|
<button id="ql-font-serif" class="ql-font" value="serif" />
|
|
<button id="ql-font-sans-serif" class="ql-font" /> -->
|
|
<select class="ql-font"></select>
|
|
<select class="ql-size"></select>
|
|
</span>
|
|
<span class="ql-formats">
|
|
<button id="boldButton" class="ql-bold"></button>
|
|
<button id="italicButton" class="ql-italic"></button>
|
|
<button id="underlineButton" class="ql-underline"></button>
|
|
<button id="strikeButton" class="ql-strike"></button>
|
|
</span>
|
|
<span class="ql-formats">
|
|
<select class="ql-color"></select>
|
|
<select class="ql-background"></select>
|
|
</span>
|
|
<span class="ql-formats">
|
|
<button class="ql-script" value="sub"></button>
|
|
<button class="ql-script" value="super"></button>
|
|
</span>
|
|
<span class="ql-formats">
|
|
<button class="ql-header" value="1"></button>
|
|
<button class="ql-header" value="2"></button>
|
|
<button class="ql-blockquote"></button>
|
|
<button class="ql-code-block"></button>
|
|
</span>
|
|
<span class="ql-formats">
|
|
<button id="orderedListButton" class="ql-list" value="ordered"></button>
|
|
<button id="bulletListButton" class="ql-list" value="bullet"></button>
|
|
<button id="decreaseIndentButton" class="ql-indent" value="-1"></button>
|
|
<button id="increaseIndentButton" class="ql-indent" value="+1"></button>
|
|
</span>
|
|
<span class="ql-formats">
|
|
<button id="directionButton" class="ql-direction" value="rtl"></button>
|
|
<button id="ql-align-left" class="ql-align" value=""></button>
|
|
<button id="ql-align-center" class="ql-align" value="center"></button>
|
|
<button id="ql-align-right" class="ql-align" value="right"></button>
|
|
<button id="ql-align-justify" class="ql-align" value="justify"></button>
|
|
<!--<select id="alignmentButton" class="ql-align"></select>-->
|
|
</span>
|
|
<span class="ql-formats">
|
|
<button class="ql-link"></button>
|
|
<button id=addImageButton class="ql-image"></button>
|
|
<button class="ql-video"></button>
|
|
<button class="ql-formula"></button>
|
|
</span>
|
|
<span class="ql-formats">
|
|
<button class="ql-clean"></button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!--style="background-color: white;"-->
|
|
<div id="editor-container">
|
|
<!--<br><br>Sent from <a href="https://github.com/bkaankose/Wino-Mail/">Wino Mail</a> for Windows-->
|
|
</div>
|
|
|
|
<!-- <div id="mail-container-parent" hidden="true" style="border: solid #636e72; padding: 10px; margin-top: 5px; margin-right: 16px; margin-bottom: 5px; margin-left: 5px;">
|
|
<center>
|
|
Original message<br>
|
|
</center>
|
|
|
|
<div id="mail-container" style="margin-top: 5px;">
|
|
|
|
</div>
|
|
</div> -->
|
|
|
|
<script src="https://app.example/katex.min.js"></script>
|
|
|
|
<script src="https://app.example/highlight.min.js"></script>
|
|
|
|
<!-- <script src="../quill.min.js"></script>
|
|
<script src="../image-resize.min.js"></script> -->
|
|
|
|
<script src="https://app.example/quill.min.js"></script>
|
|
<script src="https://app.example/image-resize.min.js"></script>
|
|
<script src="https://app.example/darkreader.js"></script>
|
|
|
|
<script>
|
|
// configure Quill to use inline styles so the email's format properly
|
|
var resizer = Quill.import('modules/imageResize');
|
|
Quill.register(resizer, true);
|
|
|
|
var DirectionAttribute = Quill.import('attributors/attribute/direction');
|
|
Quill.register(DirectionAttribute, true);
|
|
|
|
var AlignClass = Quill.import('attributors/class/align');
|
|
Quill.register(AlignClass, true);
|
|
|
|
var BackgroundClass = Quill.import('attributors/class/background');
|
|
Quill.register(BackgroundClass, true);
|
|
|
|
var ColorClass = Quill.import('attributors/class/color');
|
|
Quill.register(ColorClass, true);
|
|
|
|
var DirectionClass = Quill.import('attributors/class/direction');
|
|
Quill.register(DirectionClass, true);
|
|
|
|
var FontClass = Quill.import('attributors/class/font');
|
|
Quill.register(FontClass, true);
|
|
|
|
var SizeClass = Quill.import('attributors/class/size');
|
|
Quill.register(SizeClass, true);
|
|
|
|
var AlignStyle = Quill.import('attributors/style/align');
|
|
Quill.register(AlignStyle, true);
|
|
|
|
var BackgroundStyle = Quill.import('attributors/style/background');
|
|
Quill.register(BackgroundStyle, true);
|
|
|
|
var ColorStyle = Quill.import('attributors/style/color');
|
|
Quill.register(ColorStyle, true);
|
|
|
|
var DirectionStyle = Quill.import('attributors/style/direction');
|
|
Quill.register(DirectionStyle, true);
|
|
|
|
var FontStyle = Quill.import('attributors/style/font');
|
|
Quill.register(FontStyle, true);
|
|
|
|
var SizeStyle = Quill.import('attributors/style/size');
|
|
Quill.register(SizeStyle, true);
|
|
|
|
var quill = new Quill('#editor-container', {
|
|
modules: {
|
|
toolbar: '#toolbar-container',
|
|
imageResize: {}
|
|
},
|
|
placeholder: '',
|
|
theme: 'snow'
|
|
});
|
|
|
|
|
|
var boldButton = document.getElementById('boldButton');
|
|
var italicButton = document.getElementById('italicButton');
|
|
var underlineButton = document.getElementById('underlineButton');
|
|
var strikeButton = document.getElementById('strikeButton');
|
|
|
|
var orderedListButton = document.getElementById('orderedListButton');
|
|
var bulletListButton = document.getElementById('bulletListButton');
|
|
|
|
var directionButton = document.getElementById('directionButton');
|
|
|
|
var alignLeftButton = document.getElementById('ql-align-left');
|
|
var alignCenterButton = document.getElementById('ql-align-center');
|
|
var alignRightButton = document.getElementById('ql-align-right');
|
|
var alignJustifyButton = document.getElementById('ql-align-justify');
|
|
|
|
// The mutation observer
|
|
var boldObserver = new MutationObserver(function () { classChanged(boldButton); });
|
|
boldObserver.observe(boldButton, { attributes: true, attributeFilter: ["class"] });
|
|
|
|
var italicObserver = new MutationObserver(function () { classChanged(italicButton); });
|
|
italicObserver.observe(italicButton, { attributes: true, attributeFilter: ["class"] });
|
|
|
|
var underlineObserver = new MutationObserver(function () { classChanged(underlineButton); });
|
|
underlineObserver.observe(underlineButton, { attributes: true, attributeFilter: ["class"] });
|
|
|
|
var strikeObserver = new MutationObserver(function () { classChanged(strikeButton); });
|
|
strikeObserver.observe(strikeButton, { attributes: true, attributeFilter: ["class"] });
|
|
|
|
var orderedListObserver = new MutationObserver(function () { classAndValueChanged(orderedListButton); });
|
|
orderedListObserver.observe(orderedListButton, { attributes: true, attributeFilter: ["class"] });
|
|
|
|
var bulletListObserver = new MutationObserver(function () { classAndValueChanged(bulletListButton); });
|
|
bulletListObserver.observe(bulletListButton, { attributes: true, attributeFilter: ["class"] });
|
|
|
|
var directionObserver = new MutationObserver(function () { classChanged(directionButton); });
|
|
directionObserver.observe(directionButton, { attributes: true, attributeFilter: ["class"] });
|
|
|
|
var alignmentObserver = new MutationObserver(function () { alignmentDataValueChanged(alignLeftButton); });
|
|
alignmentObserver.observe(alignLeftButton, { attributes: true, attributeFilter: ["class"] });
|
|
|
|
var alignmentObserverCenter = new MutationObserver(function () { alignmentDataValueChanged(alignCenterButton); });
|
|
alignmentObserverCenter.observe(alignCenterButton, { attributes: true, attributeFilter: ["class"] });
|
|
|
|
var alignmentObserverRight = new MutationObserver(function () { alignmentDataValueChanged(alignRightButton); });
|
|
alignmentObserverRight.observe(alignRightButton, { attributes: true, attributeFilter: ["class"] });
|
|
|
|
var alignmentObserverJustify = new MutationObserver(function () { alignmentDataValueChanged(alignJustifyButton); });
|
|
alignmentObserverJustify.observe(alignJustifyButton, { attributes: true, attributeFilter: ["class"] });
|
|
|
|
function classChanged(button) {
|
|
window.chrome.webview.postMessage(`${button.className}`);
|
|
}
|
|
|
|
function classAndValueChanged(button) {
|
|
window.chrome.webview.postMessage(`${button.id} ${button.className}`);
|
|
}
|
|
|
|
function alignmentDataValueChanged(button) {
|
|
if (button.className.endsWith('ql-active'))
|
|
window.chrome.webview.postMessage(`${button.id}`);
|
|
}
|
|
|
|
function RenderHTML(htmlString) {
|
|
const delta = quill.clipboard.convert(htmlString)
|
|
|
|
quill.setContents(delta, 'silent')
|
|
}
|
|
|
|
function GetHTMLContent() {
|
|
return quill.root.innerHTML;
|
|
}
|
|
|
|
function GetTextContent() {
|
|
return quill.getText();
|
|
}
|
|
|
|
function SetLightEditor(){
|
|
DarkReader.disable();
|
|
}
|
|
|
|
function SetDarkEditor(){
|
|
DarkReader.enable();
|
|
}
|
|
|
|
// function ShowToolbar() {
|
|
// document.getElementById('editor-container').style.display = 'block';
|
|
// quill.focus();
|
|
// }
|
|
|
|
// function HideToolbar() {
|
|
// document.getElementById('editor-container').style.display = 'none';
|
|
// }
|
|
|
|
function getSelectedText() {
|
|
var range = quill.getSelection();
|
|
if (range) {
|
|
if (range.length == 0) {
|
|
|
|
}
|
|
else {
|
|
return quill.getText(range.index, range.length);
|
|
}
|
|
}
|
|
}
|
|
|
|
function addHyperlink(url) {
|
|
var range = quill.getSelection();
|
|
|
|
if (range) {
|
|
quill.formatText(range.index, range.length, 'link', url);
|
|
quill.setSelection(0, 0);
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|