The reason I need editable window is that I can choose and copy part of the clipboard or variable content and paste to other app.
I don't like to use clipboard manger, because the window is too big, I just simply need a window with no clipboard history.
(By the way, how can I completely disable clipboard manger, because I don't need BTT to follow up with my clipboard history.)
Any solution or am I missing any action in BTT?
Thank you for your help!
I'm now trying to open a HTML window instead of clipboard manager, but I don't know exactly how to write, so I use ai to write code as below, the problem is: How to display the value of the variable “BTTresponse” in the window?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Markdown </title>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<style>
body {
margin: 0;
padding: 10px;
}
#editableDiv {
width: 100%;
height: 100vh;
padding: 10px;
box-sizing: border-box;
outline: none;
white-space: pre-wrap;
border: none;
font-family: Arial, sans-serif;
font-size: 16px;
}
</style>
</head>
<body>
<div id="editableDiv" contenteditable="true" oninput="renderMarkdown()"></div>
<script>
function renderMarkdown() {
const inputText = document.getElementById("editableDiv").innerText;
document.getElementById("editableDiv").innerHTML = marked.parse(inputText);
}
</script>
</body>
</html>
That script comes with various issues, however you can e.g. use this:
Here is an example preset using this HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Markdown </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
<script>
// this is called once BTT's scripting capabilities are loaded into the webview
function BTTInitialize() {
window.easyMDE = new EasyMDE({ element: document.getElementById('my-text-area') });
loadClipboardContent();
}
function BTTWindowWillBecomeVisible() {
loadCLipboardContent();
}
async function loadClipboardContent() {
let content = await get_clipboard_content({ format: "NSPasteboardTypeString", asBase64: false });
window.easyMDE.value(content);
}
</script>
</head>
<body>
<textarea id="my-text-area"></textarea>
</body>
</html>
editable-clipboard2.bttpreset (27.0 KB)
It uses the keyboard shortcut cmd+opt+E to show the editable webview which is placed into a floating menu.
that I don’t know, this was just the first best library for rendering &editing I found 
Dark mode also needs to be handled by the code running in the webview
