Create editor.js

editor.js

@@ -0,0 +1,237 @@
+(function () {
+  "use strict";
+  const MARKDOWN_IT_CDN =
+    "https://cdn.jsdelivr.net/npm/[email protected]/dist/markdown-it.min.js";
+  const HIGHLIGHT_JS_CDN =
+    "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js";
+  const HIGHLIGHT_LANG_GO_CDN =
+    "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/go.min.js";
+  const HIGHLIGHT_LANG_RUST_CDN =
+    "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/rust.min.js";
+  const HIGHLIGHT_LANG_TS_CDN =
+    "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/typescript.min.js";
+  const EDITOR_BUTTON_ID = "custom-markdown-edit-btn";
+  const MODAL_ID = "markdown-editor-modal";
+  const CHAT_INPUT_SELECTOR = "#chat-input";
+  const VOICE_BUTTON_SELECTOR = "#voice-input-button";
+  let md;
+  let hljs;
+  let editorModal = null;
+  let editorInput = null;
+  let markdownPreview = null;
+  let mainChatInput = null;
+  let mouseDownTarget = null;
+  function loadScript(src) {
+    return new Promise((resolve, reject) => {
+      if (document.querySelector(`script[src="${src}"]`)) {
+        resolve();
+        return;
+      }
+      const script = document.createElement("script");
+      script.src = src;
+      script.onload = resolve;
+      script.onerror = reject;
+      document.head.appendChild(script);
+    });
+  }
+  async function ensureDependencies() {
+    try {
+      if (typeof window.markdownit === "undefined") {
+        await loadScript(MARKDOWN_IT_CDN);
+      }
+      if (typeof window.hljs === "undefined") {
+        await loadScript(HIGHLIGHT_JS_CDN);
+        await Promise.all([
+          loadScript(HIGHLIGHT_LANG_GO_CDN),
+          loadScript(HIGHLIGHT_LANG_RUST_CDN),
+          loadScript(HIGHLIGHT_LANG_TS_CDN),
+        ]).catch((e) =>
+          console.warn("Could not load optional highlight.js languages:", e)
+        );
+      }
+      md = window.markdownit({
+        html: true,
+        linkify: true,
+        typographer: true,
+        highlight: function (str, lang) {
+          if (window.hljs) {
+            hljs = window.hljs;
+            if (lang && hljs.getLanguage(lang)) {
+              try {
+                return (
+                  '<pre class="hljs"><code>' +
+                  hljs.highlight(str, { language: lang, ignoreIllegals: true })
+                    .value +
+                  "</code></pre>"
+                );
+              } catch (__) {}
+            }
+            try {
+              return (
+                '<pre class="hljs"><code>' +
+                hljs.highlightAuto(str).value +
+                "</code></pre>"
+              );
+            } catch (__) {}
+          }
+          return (
+            '<pre class="hljs"><code>' +
+            md.utils.escapeHtml(str) +
+            "</code></pre>"
+          );
+        },
+      });
+      hljs = window.hljs;
+      console.log("Markdown Editor Dependencies loaded.");
+    } catch (error) {
+      console.error("Failed to load Markdown editor dependencies:", error);
+    }
+  }
+  function createModal() {
+    if (document.getElementById(MODAL_ID)) {
+      return document.getElementById(MODAL_ID);
+    }
+    const modalHTML = `<div class="editor-container"><div class="editor-header"><div class="editor-title">Markdown编辑器</div><button class="close-btn"title="关闭 (Esc)">&times;</button></div><div class="editor-body"><textarea class="editor-input"placeholder="在这里输入 Markdown 内容..."></textarea><div class="preview-pane"><div class="markdown-preview"></div></div></div><div class="editor-footer"><button class="apply-btn"title="应用更改 (Ctrl+Enter)">应用</button></div></div>`;
+    const modalDiv = document.createElement("div");
+    modalDiv.id = MODAL_ID;
+    modalDiv.innerHTML = modalHTML;
+    document.body.appendChild(modalDiv);
+    editorModal = modalDiv;
+    editorInput = modalDiv.querySelector(".editor-input");
+    markdownPreview = modalDiv.querySelector(".markdown-preview");
+    const closeBtn = modalDiv.querySelector(".close-btn");
+    const applyBtn = modalDiv.querySelector(".apply-btn");
+    closeBtn.addEventListener("click", closeModal);
+    applyBtn.addEventListener("click", applyChanges);
+    editorInput.addEventListener("input", updatePreview);
+    modalDiv.addEventListener("mousedown", (e) => {
+      if (e.target === modalDiv) {
+        mouseDownTarget = e.target;
+      } else {
+        mouseDownTarget = null;
+      }
+    });
+    modalDiv.addEventListener("mouseup", (e) => {
+      if (e.target === modalDiv && mouseDownTarget === modalDiv) {
+        closeModal();
+      }
+      mouseDownTarget = null;
+    });
+    return modalDiv;
+  }
+  function openModal() {
+    if (!md || !hljs) {
+      console.error("Markdown editor dependencies not ready.");
+      alert("编辑器依赖未能加载，请检查网络连接或控制台错误。");
+      return;
+    }
+    if (!mainChatInput) {
+      mainChatInput = document.querySelector(CHAT_INPUT_SELECTOR);
+      if (!mainChatInput) {
+        console.error("Chat input element not found when opening modal.");
+        return;
+      }
+    }
+    editorModal = createModal();
+    const currentText = (mainChatInput.innerText || "").trim();
+    editorInput.value = currentText;
+    updatePreview();
+    editorModal.classList.add("active");
+    editorInput.focus();
+  }
+  function closeModal() {
+    if (editorModal) {
+      editorModal.classList.remove("active");
+    }
+  }
+  function updatePreview() {
+    if (!md || !editorInput || !markdownPreview) return;
+    const content = editorInput.value;
+    markdownPreview.innerHTML = md.render(content);
+  }
+  function applyChanges() {
+    if (!mainChatInput || !editorInput) return;
+    const newText = editorInput.value;
+    mainChatInput.innerText = newText;
+    const placeholderP = mainChatInput.querySelector("p.is-empty");
+    if (newText.trim() === "") {
+      if (!placeholderP) {
+      }
+    } else {
+      if (placeholderP) {
+      }
+      mainChatInput.classList.remove("is-editor-empty");
+      const parentPlaceholder = mainChatInput.querySelector("p.is-empty");
+      if (parentPlaceholder) parentPlaceholder.classList.remove("is-empty");
+    }
+    mainChatInput.dispatchEvent(
+      new Event("input", { bubbles: true, cancelable: true })
+    );
+    closeModal();
+    mainChatInput.focus();
+  }
+  function injectEditorButton() {
+    if (document.getElementById(EDITOR_BUTTON_ID)) {
+      return;
+    }
+    mainChatInput = document.querySelector(CHAT_INPUT_SELECTOR);
+    const voiceButton = document.querySelector(VOICE_BUTTON_SELECTOR);
+    if (!mainChatInput || !voiceButton) {
+      return;
+    }
+    const voiceButtonContainer = voiceButton.closest(".flex");
+    if (!voiceButtonContainer || !voiceButtonContainer.parentElement) {
+      console.warn("Could not find suitable container for Markdown button.");
+      return;
+    }
+    const editButton = document.createElement("button");
+    editButton.id = EDITOR_BUTTON_ID;
+    editButton.className = "markdown-edit-btn";
+    editButton.type = "button";
+    editButton.title = "Markdown 编辑 (打开/关闭)";
+    editButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg"width="20"height="20"viewBox="0 0 24 24"fill="none"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>`;
+    editButton.addEventListener("click", (e) => {
+      e.preventDefault();
+      if (editorModal && editorModal.classList.contains("active")) {
+        closeModal();
+      } else {
+        openModal();
+      }
+    });
+    voiceButtonContainer.parentElement.insertBefore(
+      editButton,
+      voiceButtonContainer
+    );
+    console.log("Markdown Editor button injected.");
+  }
+  function handleKeyDown(e) {
+    if (editorModal && editorModal.classList.contains("active")) {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        closeModal();
+      }
+      if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        applyChanges();
+      }
+    }
+  }
+  ensureDependencies()
+    .then(() => {
+      injectEditorButton();
+      const observer = new MutationObserver((mutationsList, observer) => {
+        if (
+          document.querySelector(CHAT_INPUT_SELECTOR) &&
+          !document.getElementById(EDITOR_BUTTON_ID)
+        ) {
+          injectEditorButton();
+        }
+      });
+      observer.observe(document.body, { childList: true, subtree: true });
+      document.addEventListener("keydown", handleKeyDown);
+      console.log("Markdown Editor script initialized and observing DOM.");
+    })
+    .catch((error) => {
+      console.error("Initialization failed:", error);
+    });
+})();