Is any way that can show up clipboard or variable content in a editable window?

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?

You can make the clipboard manager's window smaller, e.g.

And to disable CM you can use this:

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.

2 Likes

Thank you.

How can I deal with the dark mode?
Why is there pink highlight in some texts?

that I don’t know, this was just the first best library for rendering &editing I found :wink:
Dark mode also needs to be handled by the code running in the webview