add paste image support

app.js

@@ -1,3 +1,10 @@
+import { Editor } from "@tiptap/core";
+import TiptapImage from "@tiptap/extension-image";
+import TextAlign from "@tiptap/extension-text-align";
+import { Markdown } from "@tiptap/markdown";
+import StarterKit from "@tiptap/starter-kit";
+import { stringify as stringifyUuid } from "uuid";
+
 const uiStorageKey = "memo-ui-state-v1";
 
 if (new URLSearchParams(window.location.search).get("device") === "mobile") {
@@ -6,7 +13,7 @@ if (new URLSearchParams(window.location.search).get("device") === "mobile") {
 
 const starterNotes = [
   {
-    id: crypto.randomUUID(),
+    id: createId(),
     folder: "notes",
     body: "欢迎使用备忘录\n\n左侧选择文件夹，中间选择笔记，右侧直接编辑。第一行会自动作为标题。",
     createdAt: Date.now() - 1000 * 60 * 60 * 24,
@@ -14,7 +21,7 @@ const starterNotes = [
     version: 1
   },
   {
-    id: crypto.randomUUID(),
+    id: createId(),
     folder: "notes",
     body: "待办清单\n\n- 记录想法\n- 整理项目\n- 做一个真正好用的 Web 版笔记",
     createdAt: Date.now() - 1000 * 60 * 60 * 3,
@@ -32,8 +39,26 @@ let saveTimerNoteId = null;
 let saveInFlightNoteId = null;
 let queuedSaveNoteId = null;
 let saveStatusTimer = null;
+let tiptapEditor = null;
+let syncingEditor = false;
 const saveDelay = 700;
-const maxNoteBodyLength = 1024 * 1024;
+const maxNoteBodyLength = 10 * 1024 * 1024;
+const maxPastedImageDimension = 1600;
+const pastedImageQuality = 0.82;
+const AlignedImage = TiptapImage.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      align: {
+        default: "center",
+        parseHTML: (element) => element.getAttribute("data-align") || "center",
+        renderHTML: (attributes) => ({
+          "data-align": attributes.align || "center"
+        })
+      }
+    };
+  }
+});
 const els = {
   authGate: document.querySelector("#authGate"),
   authForm: document.querySelector("#authForm"),
@@ -73,6 +98,8 @@ const els = {
   mobileSearchInput: document.querySelector("#mobileSearchInput"),
   mobileSearchWrap: document.querySelector("#mobileSearchWrap"),
   mobileEdit: document.querySelector("#mobileEdit"),
+  mobileEditorMenuToggle: document.querySelector("#mobileEditorMenuToggle"),
+  mobileEditorFormatMenu: document.querySelector("#mobileEditorFormatMenu"),
   mobilePreviewToggle: document.querySelector("#mobilePreviewToggle"),
   mobileSave: document.querySelector("#mobileSave"),
   mobileMore: document.querySelector("#mobileMore"),
@@ -84,6 +111,8 @@ const els = {
   appShell: document.querySelector(".app-shell"),
   editor: document.querySelector("#editor"),
   noteFolderSelect: document.querySelector("#noteFolderSelect"),
+  editorMenuToggle: document.querySelector("#editorMenuToggle"),
+  editorFormatMenu: document.querySelector("#editorFormatMenu"),
   editorPreviewToggle: document.querySelector("#editorPreviewToggle"),
   saveNote: document.querySelector("#saveNote"),
   saveStatus: document.querySelector("#saveStatus"),
@@ -92,6 +121,7 @@ const els = {
   editorPane: document.querySelector(".editor-pane")
 };
 
+initTiptapEditor();
 render();
 if (authStatus.authenticated) {
   hideAuthGate();
@@ -130,7 +160,7 @@ els.authForm.addEventListener("submit", async (event) => {
 els.newNote.addEventListener("click", async () => {
   const now = Date.now();
   const note = {
-    id: crypto.randomUUID(),
+    id: createId(),
     folder: getWriteFolderId(),
     body: "",
     createdAt: now,
@@ -226,6 +256,24 @@ els.mobileSave.addEventListener("click", () => {
 
 els.mobilePreviewToggle.addEventListener("click", togglePreviewMode);
 
+els.editorMenuToggle.addEventListener("click", (event) => {
+  event.stopPropagation();
+  toggleEditorMenu("desktop");
+});
+
+els.mobileEditorMenuToggle.addEventListener("click", (event) => {
+  event.stopPropagation();
+  toggleEditorMenu("mobile");
+});
+
+[...document.querySelectorAll("[data-editor-command]")].forEach((button) => {
+  button.addEventListener("click", (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    runEditorCommand(button.dataset.editorCommand);
+  });
+});
+
 els.mobileMore.addEventListener("click", (event) => {
   event.stopPropagation();
   els.mobileActionMenu.hidden = !els.mobileActionMenu.hidden;
@@ -247,9 +295,15 @@ els.mobileMenuDelete.addEventListener("click", () => {
 });
 
 document.addEventListener("click", (event) => {
-  if (els.mobileActionMenu.hidden) return;
-  if (event.target.closest("#mobileActions")) return;
-  els.mobileActionMenu.hidden = true;
+  if (!els.mobileActionMenu.hidden && !event.target.closest("#mobileActions")) {
+    els.mobileActionMenu.hidden = true;
+  }
+  if (!event.target.closest(".editor-menu-wrap")) {
+    els.editorFormatMenu.hidden = true;
+  }
+  if (!event.target.closest(".mobile-editor-menu-wrap")) {
+    els.mobileEditorFormatMenu.hidden = true;
+  }
 });
 
 els.newFolder.addEventListener("click", () => {
@@ -259,23 +313,6 @@ els.newFolder.addEventListener("click", () => {
   });
 });
 
-els.editor.addEventListener("input", (event) => {
-  const note = getSelectedNote();
-  if (!note) return;
-
-  if (event.target.value.length > maxNoteBodyLength) {
-    event.target.value = event.target.value.slice(0, maxNoteBodyLength);
-    setSaveStatus("内容已达上限", "error");
-  }
-
-  note.body = event.target.value;
-  note.updatedAt = Date.now();
-  saveSelectedNote();
-  renderListOnly();
-  updateEditorMeta(note);
-  renderMarkdownPreview(note);
-});
-
 els.noteFolderSelect.addEventListener("change", (event) => {
   moveSelectedNoteToFolder(event.target.value);
 });
@@ -379,10 +416,239 @@ function moveSelectedNoteToFolder(nextFolder) {
 function togglePreviewMode() {
   state.previewMode = !state.previewMode;
   saveUiState();
+  hideEditorMenus();
   renderEditor();
   renderMobileChrome();
 }
 
+function toggleEditorMenu(target) {
+  const note = getSelectedNote();
+  if (!note || state.previewMode) return;
+  const menu = target === "mobile" ? els.mobileEditorFormatMenu : els.editorFormatMenu;
+  const otherMenu = target === "mobile" ? els.editorFormatMenu : els.mobileEditorFormatMenu;
+  otherMenu.hidden = true;
+  menu.hidden = !menu.hidden;
+  els.editorMenuToggle.classList.toggle("active", !els.editorFormatMenu.hidden);
+  els.mobileEditorMenuToggle.classList.toggle("active", !els.mobileEditorFormatMenu.hidden);
+  renderEditorMenuState();
+}
+
+function hideEditorMenus() {
+  els.editorFormatMenu.hidden = true;
+  els.mobileEditorFormatMenu.hidden = true;
+  els.editorMenuToggle.classList.remove("active");
+  els.mobileEditorMenuToggle.classList.remove("active");
+}
+
+function runEditorCommand(command) {
+  if (!tiptapEditor || state.previewMode || !getSelectedNote()) return;
+  const align = {
+    alignLeft: "left",
+    alignCenter: "center",
+    alignRight: "right"
+  }[command];
+
+  if (align) {
+    setCurrentAlignment(align);
+    renderEditorMenuState();
+    return;
+  }
+
+  const chain = tiptapEditor.chain().focus();
+  const commands = {
+    paragraph: () => chain.setParagraph().run(),
+    heading1: () => chain.toggleHeading({ level: 1 }).run(),
+    heading2: () => chain.toggleHeading({ level: 2 }).run(),
+    bold: () => chain.toggleBold().run(),
+    italic: () => chain.toggleItalic().run(),
+    bulletList: () => chain.toggleBulletList().run(),
+    orderedList: () => chain.toggleOrderedList().run()
+  };
+
+  commands[command]?.();
+  renderEditorMenuState();
+}
+
+function setCurrentAlignment(align) {
+  if (isImageSelected()) {
+    setImageAlignment(align);
+    return;
+  }
+  tiptapEditor.chain().focus().setTextAlign(align).run();
+}
+
+function setImageAlignment(align) {
+  if (!isImageSelected()) return;
+  tiptapEditor.chain().focus().updateAttributes("image", { align }).run();
+}
+
+function renderEditorMenuState(editor = tiptapEditor) {
+  if (!editor) return;
+  const disabled = !getSelectedNote() || state.previewMode;
+  els.editorMenuToggle.disabled = disabled;
+  els.mobileEditorMenuToggle.disabled = disabled;
+  if (disabled) hideEditorMenus();
+
+  const activeCommands = new Set();
+  if (editor.isActive("paragraph")) activeCommands.add("paragraph");
+  if (editor.isActive("heading", { level: 1 })) activeCommands.add("heading1");
+  if (editor.isActive("heading", { level: 2 })) activeCommands.add("heading2");
+  if (editor.isActive("bold")) activeCommands.add("bold");
+  if (editor.isActive("italic")) activeCommands.add("italic");
+  if (editor.isActive("bulletList")) activeCommands.add("bulletList");
+  if (editor.isActive("orderedList")) activeCommands.add("orderedList");
+
+  const imageAlign = getSelectedImageAlign();
+  const textAlign = editor.getAttributes("paragraph").textAlign || editor.getAttributes("heading").textAlign;
+  const align = imageAlign || textAlign || "left";
+  activeCommands.add(`align${align[0].toUpperCase()}${align.slice(1)}`);
+
+  document.querySelectorAll("[data-editor-command]").forEach((button) => {
+    const isActive = activeCommands.has(button.dataset.editorCommand);
+    button.classList.toggle("active", isActive);
+    button.disabled = disabled;
+  });
+}
+
+function isImageSelected() {
+  return tiptapEditor?.state.selection.node?.type.name === "image";
+}
+
+function getSelectedImageAlign() {
+  if (!isImageSelected()) return "";
+  return tiptapEditor.state.selection.node.attrs.align || "center";
+}
+
+function initTiptapEditor() {
+  tiptapEditor = new Editor({
+    element: els.editor,
+    extensions: [
+      StarterKit,
+      AlignedImage.configure({
+        allowBase64: true,
+        HTMLAttributes: {
+          class: "memo-image"
+        }
+      }),
+      TextAlign.configure({
+        types: ["heading", "paragraph"]
+      }),
+      Markdown
+    ],
+    content: "",
+    editorProps: {
+      handlePaste(_view, event) {
+        const files = [...(event.clipboardData?.files || [])].filter((file) => file.type.startsWith("image/"));
+        if (!files.length) return false;
+        event.preventDefault();
+        insertPastedImages(files);
+        return true;
+      }
+    },
+    onUpdate({ editor }) {
+      if (syncingEditor) return;
+      const note = getSelectedNote();
+      if (!note) return;
+
+      const nextBody = normalizeEditorHtml(editor.getHTML());
+      if (nextBody.length > maxNoteBodyLength) {
+        setSaveStatus("内容已达上限", "error");
+        return;
+      }
+
+      note.body = nextBody;
+      note.updatedAt = Date.now();
+      saveSelectedNote();
+      renderListOnly();
+      updateEditorMeta(note);
+      renderMarkdownPreview(note);
+      renderEditorMenuState(editor);
+    },
+    onSelectionUpdate({ editor }) {
+      renderEditorMenuState(editor);
+    }
+  });
+}
+
+async function insertPastedImages(files) {
+  if (!tiptapEditor || !getSelectedNote()) return;
+  setSaveStatus("处理图片");
+
+  for (const file of files) {
+    try {
+      const dataUrl = await imageFileToDataUrl(file);
+      const currentLength = normalizeEditorHtml(tiptapEditor.getHTML()).length;
+      if (currentLength + dataUrl.length > maxNoteBodyLength) {
+        setSaveStatus("图片太大", "error");
+        continue;
+      }
+
+      tiptapEditor
+        .chain()
+        .focus()
+        .insertContent([
+          {
+            type: "image",
+            attrs: {
+              src: dataUrl,
+              alt: file.name || "粘贴的图片",
+              title: file.name || null,
+              align: "center"
+            }
+          },
+          { type: "paragraph" }
+        ])
+        .run();
+    } catch (error) {
+      setSaveStatus("图片粘贴失败", "error");
+      console.error("Failed to paste image.", error);
+    }
+  }
+}
+
+async function imageFileToDataUrl(file) {
+  if (file.type === "image/gif") {
+    return await readFileAsDataUrl(file);
+  }
+
+  const image = await loadImage(file);
+  const scale = Math.min(
+    1,
+    maxPastedImageDimension / Math.max(image.naturalWidth || image.width, image.naturalHeight || image.height)
+  );
+  const width = Math.max(1, Math.round((image.naturalWidth || image.width) * scale));
+  const height = Math.max(1, Math.round((image.naturalHeight || image.height) * scale));
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const context = canvas.getContext("2d");
+  if (!context) throw new Error("Canvas is unavailable.");
+  context.drawImage(image, 0, 0, width, height);
+  URL.revokeObjectURL(image.src);
+
+  const webp = canvas.toDataURL("image/webp", pastedImageQuality);
+  if (webp.startsWith("data:image/webp")) return webp;
+  return canvas.toDataURL("image/jpeg", pastedImageQuality);
+}
+
+function loadImage(file) {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.onload = () => resolve(image);
+    image.onerror = reject;
+    image.src = URL.createObjectURL(file);
+  });
+}
+
+function readFileAsDataUrl(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result || ""));
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}
+
 document.addEventListener("keydown", (event) => {
   if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "n") {
     event.preventDefault();
@@ -400,9 +666,13 @@ document.addEventListener("keydown", (event) => {
     if (getSelectedNote()) saveSelectedNote({ immediate: true });
   }
 
-  if (event.key === "Delete" && document.activeElement !== els.editor) {
+  if (event.key === "Delete" && !els.editor.contains(document.activeElement)) {
     els.deleteNote.click();
   }
+
+  if (event.key === "Escape") {
+    hideEditorMenus();
+  }
 });
 
 async function loadState() {
@@ -878,9 +1148,10 @@ function renderNoteButton(note) {
 function renderEditor() {
   const note = getSelectedNote();
   els.editorPane.classList.toggle("empty", !note);
-  els.editor.disabled = !note;
   els.saveNote.disabled = !note;
   els.mobileSave.disabled = !note;
+  els.editorMenuToggle.disabled = !note || state.previewMode;
+  els.mobileEditorMenuToggle.disabled = !note || state.previewMode;
   els.editorPreviewToggle.disabled = !note;
   els.mobilePreviewToggle.disabled = !note;
   els.mobileMore.disabled = !note;
@@ -894,7 +1165,9 @@ function renderEditor() {
 
   if (!note) {
     els.mobileActionMenu.hidden = true;
-    els.editor.value = "";
+    hideEditorMenus();
+    setEditorContent("");
+    tiptapEditor?.setEditable(false, false);
     els.editor.hidden = false;
     els.editedAt.textContent = "";
     els.markdownPreview.hidden = true;
@@ -905,14 +1178,29 @@ function renderEditor() {
     return;
   }
 
-  if (els.editor.value !== note.body) {
-    els.editor.value = note.body;
-  }
+  setEditorContent(note.body);
+  tiptapEditor?.setEditable(!state.previewMode, false);
   els.editor.hidden = state.previewMode;
   els.markdownPreview.hidden = !state.previewMode;
   renderMarkdownPreview(note);
   renderNoteFolderSelect(note);
   updateEditorMeta(note);
+  renderEditorMenuState();
+}
+
+function setEditorContent(body) {
+  if (!tiptapEditor) return;
+  const currentHtml = normalizeEditorHtml(tiptapEditor.getHTML());
+  if (currentHtml === normalizeEditorHtml(body) || (!isHtmlNoteBody(body) && currentHtml === normalizeEditorHtml(markdownToHtml(body)))) {
+    return;
+  }
+
+  syncingEditor = true;
+  tiptapEditor.commands.setContent(body || "", {
+    contentType: isHtmlNoteBody(body) ? "html" : "markdown",
+    emitUpdate: false
+  });
+  syncingEditor = false;
 }
 
 function renderNoteFolderSelect(note) {
@@ -1038,7 +1326,7 @@ async function submitFolderCreate(name) {
   const previousActiveFolder = state.activeFolder;
   const previousSelectedId = state.selectedId;
   const folder = {
-    id: crypto.randomUUID(),
+    id: createId(),
     name,
     createdAt: now,
     updatedAt: now,
@@ -1132,6 +1420,20 @@ function defaultFolders() {
   return [{ id: "notes", name: "备忘录", version: 1 }];
 }
 
+function createId() {
+  const bytes = new Uint8Array(16);
+  if (globalThis.crypto?.getRandomValues) {
+    globalThis.crypto.getRandomValues(bytes);
+  } else {
+    for (let index = 0; index < bytes.length; index += 1) {
+      bytes[index] = Math.floor(Math.random() * 256);
+    }
+  }
+  bytes[6] = (bytes[6] & 0x0f) | 0x40;
+  bytes[8] = (bytes[8] & 0x3f) | 0x80;
+  return stringifyUuid(bytes);
+}
+
 function renderIcons() {
   window.lucide?.createIcons({
     attrs: {
@@ -1142,7 +1444,85 @@ function renderIcons() {
 
 function renderMarkdownPreview(note) {
   if (!state.previewMode) return;
-  els.markdownPreview.innerHTML = markdownToHtml(note.body);
+  els.markdownPreview.innerHTML = isHtmlNoteBody(note.body)
+    ? sanitizeRichHtml(note.body)
+    : markdownToHtml(note.body);
+}
+
+function normalizeEditorHtml(value) {
+  const html = String(value || "").trim();
+  return html === "<p></p>" ? "" : html;
+}
+
+function isHtmlNoteBody(value) {
+  return /<\/?(p|h[1-6]|ul|ol|li|blockquote|pre|code|strong|em|s|u|a|img|br|hr)\b/i.test(String(value || ""));
+}
+
+function sanitizeRichHtml(html) {
+  const template = document.createElement("template");
+  template.innerHTML = String(html || "");
+  const allowedTags = new Set([
+    "A",
+    "BLOCKQUOTE",
+    "BR",
+    "CODE",
+    "DIV",
+    "EM",
+    "H1",
+    "H2",
+    "H3",
+    "H4",
+    "H5",
+    "H6",
+    "HR",
+    "IMG",
+    "LI",
+    "OL",
+    "P",
+    "PRE",
+    "S",
+    "STRONG",
+    "U",
+    "UL"
+  ]);
+
+  [...template.content.querySelectorAll("*")].forEach((node) => {
+    if (!allowedTags.has(node.tagName)) {
+      node.replaceWith(...node.childNodes);
+      return;
+    }
+
+    const href = node.getAttribute("href") || "";
+    const src = node.getAttribute("src") || "";
+    const alt = node.getAttribute("alt") || "";
+    const style = node.getAttribute("style") || "";
+    const textAlign = style.match(/text-align:\s*(left|center|right)/i)?.[1] || "";
+    const imageAlign = node.getAttribute("data-align") || node.getAttribute("align") || "";
+    [...node.attributes].forEach((attribute) => node.removeAttribute(attribute.name));
+    if (textAlign && ["P", "H1", "H2", "H3", "H4", "H5", "H6"].includes(node.tagName)) {
+      node.setAttribute("style", `text-align: ${textAlign}`);
+    }
+    if (node.tagName === "A") {
+      if (/^(https?:|mailto:)/i.test(href)) {
+        node.setAttribute("href", href);
+        node.setAttribute("target", "_blank");
+        node.setAttribute("rel", "noreferrer");
+      }
+    }
+    if (node.tagName === "IMG") {
+      if (/^(data:image\/|https?:\/\/)/i.test(src)) {
+        node.setAttribute("src", src);
+        node.setAttribute("alt", alt);
+        if (["left", "center", "right"].includes(imageAlign)) {
+          node.setAttribute("data-align", imageAlign);
+        }
+      } else {
+        node.remove();
+      }
+    }
+  });
+
+  return template.innerHTML;
 }
 
 function markdownToHtml(markdown) {
@@ -1233,6 +1613,7 @@ function renderInlineMarkdown(value) {
     .replace(/`([^`]+)`/g, "<code>$1</code>")
     .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
     .replace(/\*([^*]+)\*/g, "<em>$1</em>")
+    .replace(/!\[([^\]]*)\]\((data:image\/[^)\s]+|https?:\/\/[^)\s]+)\)/g, '<img src="$2" alt="$1">')
     .replace(/\[([^\]]+)\]\((https?:\/\/[^)\s]+)\)/g, '<a href="$2" target="_blank" rel="noreferrer">$1</a>');
 }
 
@@ -1246,16 +1627,29 @@ function escapeHtml(value) {
 }
 
 function getTitle(note) {
-  const firstLine = note.body.split(/\n/).find((line) => line.trim());
+  const firstLine = getNotePlainText(note).split(/\n/).find((line) => line.trim());
   return firstLine ? firstLine.trim().slice(0, 80) : "新建笔记";
 }
 
 function getPreview(note) {
-  const lines = note.body.split(/\n/).map((line) => line.trim()).filter(Boolean);
+  const lines = getNotePlainText(note).split(/\n/).map((line) => line.trim()).filter(Boolean);
   const text = lines.slice(1).join(" ") || "无附加文本";
   return text.slice(0, 140);
 }
 
+function getNotePlainText(note) {
+  if (!isHtmlNoteBody(note.body)) return note.body;
+  const template = document.createElement("template");
+  template.innerHTML = sanitizeRichHtml(note.body);
+  const imageCount = template.content.querySelectorAll("img").length;
+  const blockSelector = "p,h1,h2,h3,h4,h5,h6,li,blockquote,pre";
+  const blocks = [...template.content.querySelectorAll(blockSelector)]
+    .map((node) => node.textContent.trim())
+    .filter(Boolean);
+  const text = blocks.length ? blocks.join("\n") : template.content.textContent || "";
+  return `${text}${imageCount ? `\n${imageCount} 张图片` : ""}`;
+}
+
 function formatListDate(value) {
   const date = new Date(value);
   const today = new Date();

index.html

@@ -120,6 +120,23 @@
           <time id="editedAt"></time>
           <span class="save-status" id="saveStatus" aria-live="polite"></span>
           <select id="noteFolderSelect" aria-label="移动笔记到文件夹"></select>
+          <div class="editor-menu-wrap">
+            <button class="editor-menu-button" id="editorMenuToggle" type="button" aria-label="编辑菜单" title="编辑菜单">
+              <i data-lucide="type" aria-hidden="true"></i>
+            </button>
+            <div class="editor-format-menu" id="editorFormatMenu" hidden>
+              <button type="button" data-editor-command="paragraph" aria-label="正文" title="正文"><i data-lucide="pilcrow" aria-hidden="true"></i></button>
+              <button type="button" data-editor-command="heading1" aria-label="一级标题" title="一级标题"><i data-lucide="heading-1" aria-hidden="true"></i></button>
+              <button type="button" data-editor-command="heading2" aria-label="二级标题" title="二级标题"><i data-lucide="heading-2" aria-hidden="true"></i></button>
+              <button type="button" data-editor-command="bold" aria-label="加粗" title="加粗"><i data-lucide="bold" aria-hidden="true"></i></button>
+              <button type="button" data-editor-command="italic" aria-label="斜体" title="斜体"><i data-lucide="italic" aria-hidden="true"></i></button>
+              <button type="button" data-editor-command="bulletList" aria-label="无序列表" title="无序列表"><i data-lucide="list" aria-hidden="true"></i></button>
+              <button type="button" data-editor-command="orderedList" aria-label="有序列表" title="有序列表"><i data-lucide="list-ordered" aria-hidden="true"></i></button>
+              <button type="button" data-editor-command="alignLeft" aria-label="左对齐" title="左对齐"><i data-lucide="align-left" aria-hidden="true"></i></button>
+              <button type="button" data-editor-command="alignCenter" aria-label="居中" title="居中"><i data-lucide="align-center" aria-hidden="true"></i></button>
+              <button type="button" data-editor-command="alignRight" aria-label="右对齐" title="右对齐"><i data-lucide="align-right" aria-hidden="true"></i></button>
+            </div>
+          </div>
           <button class="editor-preview-button" id="editorPreviewToggle" type="button" aria-label="Markdown 预览" title="Markdown 预览">
             <i data-lucide="eye" aria-hidden="true"></i>
           </button>
@@ -127,7 +144,7 @@
             <i data-lucide="save" aria-hidden="true"></i>
           </button>
         </div>
-        <textarea id="editor" spellcheck="true" aria-label="笔记正文"></textarea>
+        <div id="editor" spellcheck="true" aria-label="笔记正文"></div>
         <article class="markdown-preview" id="markdownPreview" hidden></article>
         <div class="empty-state" id="emptyState">
           <strong>没有选择笔记</strong>
@@ -142,6 +159,23 @@
         <button class="mobile-edit-button" id="mobileEdit" type="button" aria-label="新建笔记" title="新建笔记">
           <i data-lucide="square-pen" aria-hidden="true"></i>
         </button>
+        <div class="mobile-editor-menu-wrap">
+          <button class="mobile-editor-menu-button" id="mobileEditorMenuToggle" type="button" aria-label="编辑菜单" title="编辑菜单">
+            <i data-lucide="type" aria-hidden="true"></i>
+          </button>
+          <div class="mobile-editor-format-menu" id="mobileEditorFormatMenu" hidden>
+            <button type="button" data-editor-command="paragraph" aria-label="正文" title="正文"><i data-lucide="pilcrow" aria-hidden="true"></i></button>
+            <button type="button" data-editor-command="heading1" aria-label="一级标题" title="一级标题"><i data-lucide="heading-1" aria-hidden="true"></i></button>
+            <button type="button" data-editor-command="heading2" aria-label="二级标题" title="二级标题"><i data-lucide="heading-2" aria-hidden="true"></i></button>
+            <button type="button" data-editor-command="bold" aria-label="加粗" title="加粗"><i data-lucide="bold" aria-hidden="true"></i></button>
+            <button type="button" data-editor-command="italic" aria-label="斜体" title="斜体"><i data-lucide="italic" aria-hidden="true"></i></button>
+            <button type="button" data-editor-command="bulletList" aria-label="无序列表" title="无序列表"><i data-lucide="list" aria-hidden="true"></i></button>
+            <button type="button" data-editor-command="orderedList" aria-label="有序列表" title="有序列表"><i data-lucide="list-ordered" aria-hidden="true"></i></button>
+            <button type="button" data-editor-command="alignLeft" aria-label="左对齐" title="左对齐"><i data-lucide="align-left" aria-hidden="true"></i></button>
+            <button type="button" data-editor-command="alignCenter" aria-label="居中" title="居中"><i data-lucide="align-center" aria-hidden="true"></i></button>
+            <button type="button" data-editor-command="alignRight" aria-label="右对齐" title="右对齐"><i data-lucide="align-right" aria-hidden="true"></i></button>
+          </div>
+        </div>
         <button class="mobile-preview-button" id="mobilePreviewToggle" type="button" aria-label="Markdown 预览" title="Markdown 预览">
           <i data-lucide="eye" aria-hidden="true"></i>
         </button>
@@ -152,6 +186,6 @@
     </div>
 
     <script src="/node_modules/lucide/dist/umd/lucide.js"></script>
-    <script type="module" src="app.js"></script>
+    <script type="module" src="assets/app.bundle.js"></script>
   </body>
 </html>

package.json

@@ -1,12 +1,21 @@
 {
 	"type": "module",
 	"scripts": {
-		"dev": "node server.mjs",
+		"build": "vite build",
+		"dev": "pnpm run build && node server.mjs",
 		"seed:mock": "node scripts/seed-mock.mjs"
 	},
 	"dependencies": {
 		"@hono/node-server": "^2.0.4",
+		"@tiptap/core": "^3.26.1",
+		"@tiptap/extension-image": "^3.26.1",
+		"@tiptap/extension-text-align": "^3.26.1",
+		"@tiptap/markdown": "^3.26.1",
+		"@tiptap/pm": "^3.26.1",
+		"@tiptap/starter-kit": "^3.26.1",
 		"hono": "^4.12.23",
-		"lucide": "^1.16.0"
+		"lucide": "^1.16.0",
+		"uuid": "^14.0.0",
+		"vite": "^8.0.16"
 	}
 }

pnpm-lock.yaml

@@ -11,34 +11,969 @@ importers:
       '@hono/node-server':
         specifier: ^2.0.4
         version: 2.0.4(hono@4.12.23)
+      '@tiptap/core':
+        specifier: ^3.26.1
+        version: 3.26.1(@tiptap/pm@3.26.1)
+      '@tiptap/extension-image':
+        specifier: ^3.26.1
+        version: 3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))
+      '@tiptap/extension-text-align':
+        specifier: ^3.26.1
+        version: 3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))
+      '@tiptap/markdown':
+        specifier: ^3.26.1
+        version: 3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))(@tiptap/pm@3.26.1)
+      '@tiptap/pm':
+        specifier: ^3.26.1
+        version: 3.26.1
+      '@tiptap/starter-kit':
+        specifier: ^3.26.1
+        version: 3.26.1
       hono:
         specifier: ^4.12.23
         version: 4.12.23
       lucide:
         specifier: ^1.16.0
         version: 1.16.0
+      uuid:
+        specifier: ^14.0.0
+        version: 14.0.0
+      vite:
+        specifier: ^8.0.16
+        version: 8.0.16
 
 packages:
 
+  '@emnapi/core@1.10.0':
+    resolution: {integrity: sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==}
+
+  '@emnapi/runtime@1.10.0':
+    resolution: {integrity: sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==}
+
+  '@emnapi/wasi-threads@1.2.1':
+    resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==}
+
   '@hono/node-server@2.0.4':
     resolution: {integrity: sha512-Ut3y0dMMPWy6bZ2kVfx25EOVbZlm15dhF4mOsezMlhpNHy+4MkU1qN9Y6lnruYi4wPmFzimGX2X7LF/FwHli4A==}
     engines: {node: '>=20'}
     peerDependencies:
       hono: ^4
 
+  '@napi-rs/wasm-runtime@1.1.5':
+    resolution: {integrity: sha512-AWPoBRJ9tsnVhor4sjO7rkni+7p+2IAEFj6cx06UgP10jkQHqay/36uRV/bFkgrh18D9vb4cr8Q0Pthskgzy+Q==}
+    peerDependencies:
+      '@emnapi/core': ^1.7.1
+      '@emnapi/runtime': ^1.7.1
+
+  '@oxc-project/types@0.133.0':
+    resolution: {integrity: sha512-KzkdCd6Uxqnf6l3HOw1xfatAlUURA0g14cvBYFyJ5SaNOQbOUvBr9PKArcPcrNIeRsBdgcUzOGrhKveVpvOIGA==}
+
+  '@rolldown/binding-android-arm64@1.0.3':
+    resolution: {integrity: sha512-454rs7jHngixp/NMxd5srYD57OnzSlZ/eFTETjORQHLwJG1lRtmNOJcBerZlfu4GjKqeq8aCCIQrMdHyhI51Hw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@rolldown/binding-darwin-arm64@1.0.3':
+    resolution: {integrity: sha512-PcAhP+ynjURNyy8SKGl5DQP94aGuB/7JrXJb/t7P+hanXvQVMWzUvRRhBAcg/lNRadBhoUPqSoP4xw5tR/KBEA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rolldown/binding-darwin-x64@1.0.3':
+    resolution: {integrity: sha512-9YpfeUvSE2RS7wysJ81uOZkXJz7f7Q55H2Gvp3VEw/EsahqDtrphrZ0EwDLK5vvKOzaCrBsjF8JmnMLcUt78Gg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rolldown/binding-freebsd-x64@1.0.3':
+    resolution: {integrity: sha512-yB1IlAsSNHncV6SCTL27/MVGR5htvQsoGxIv5KMGXALp+Ll1wYsn+x98M9MW7qa+NdSbvrrY7ANI4wLJ0n1e6g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.3':
+    resolution: {integrity: sha512-Yi30IVAAfLUCy2MseFjbB1jAMDl1VMCAas5StnYp8da9+CKvMd2H2cbEjWcw5NPaPqzvYkVIaF1nNUG+b7u/sw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@rolldown/binding-linux-arm64-gnu@1.0.3':
+    resolution: {integrity: sha512-jsO7R8To+AdlYgUmN5sHSCZbfhtMBkO0WUx8iORQnPcMMdgr7qM2DQmMwgabs3GhNztdmoKkMKQFHD6DTMCIQw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rolldown/binding-linux-arm64-musl@1.0.3':
+    resolution: {integrity: sha512-VWkUHwWriDciit80wleYwKILoR/KMvxh/IdwS/paX+ZgpuRpCrKLUdadJbc0NpBEiyhpYawsJ73j9aCvOH+f7Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rolldown/binding-linux-ppc64-gnu@1.0.3':
+    resolution: {integrity: sha512-5f1laC0SlIR0yDbFCd8acUhvJIag6N3zC5P7oUPN6wX0aOma+uKJ0wBDH5aq7I1PVI2ttTlhJwzwRIBnLiSGEg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rolldown/binding-linux-s390x-gnu@1.0.3':
+    resolution: {integrity: sha512-Iq4ko0r4XsgbrF/LunNgHtAGLRRVE2kXonAXQ/MV0mC6jQpMOhW1SvtZja2EhC/kd05++bP78dsqBeIQyYJ6Yg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+
+  '@rolldown/binding-linux-x64-gnu@1.0.3':
+    resolution: {integrity: sha512-B8m6tD5+/N5FeNQFbKlLA/2yVq9ycQP1SeedyEYYKWBNR3ZQbkvIUcNnDNM03lO1l5F2roiiFJGgvoLLyZXtSg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@rolldown/binding-linux-x64-musl@1.0.3':
+    resolution: {integrity: sha512-pSdpdUJHkuCxun9LE7jvgUB9qsRgaiyNNCX7m/AvHTcq67AiT/Yhoxvw5zPfhrM8k/BfP8ce/hMOpthKDpEUow==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@rolldown/binding-openharmony-arm64@1.0.3':
+    resolution: {integrity: sha512-OXXS3RKJgX2uLwM+gYyuH5omcH8fL1LJs96pZGgtetVCahON57+d4SJHzTgZiOjxgGkSnpXpOsWuPDGAKAigEg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rolldown/binding-wasm32-wasi@1.0.3':
+    resolution: {integrity: sha512-JTtb8BWFynicNSoPrehsCzBtOKjZ6jhMiPFEmOiuXg1Fl8dn2KHQob+GuPSGR0dryQa1PQJbzjF3dqO/whhjLg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [wasm32]
+
+  '@rolldown/binding-win32-arm64-msvc@1.0.3':
+    resolution: {integrity: sha512-gEdFFEN70A/jxb2svrWsN3aDL7OUtmvlOy+6fa2jxG8K0wQ1ZbdeLGnidov6Yu5/733dI5ySfzFlQ/cb0bSz1g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rolldown/binding-win32-x64-msvc@1.0.3':
+    resolution: {integrity: sha512-eXB7CHuaQdqmJcc3koCNtNPmT/bj2gc999kUFgBxG8Ac0NdgXc4rkCHhqrgrhN3zddvvvrgzj1e90SuSfmyIXA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@rolldown/pluginutils@1.0.1':
+    resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==}
+
+  '@tiptap/core@3.26.1':
+    resolution: {integrity: sha512-TX9PyPqBoix0qDLjtok/bddtdSy54QhzLVha405C07V+WySOpH3s/pWYkywehZQY0SQtcrcY4MNSCeQjCbA28A==}
+    peerDependencies:
+      '@tiptap/pm': 3.26.1
+
+  '@tiptap/extension-blockquote@3.26.1':
+    resolution: {integrity: sha512-WaKjKmUaadgvZDDBk9JOn/oidlOFr6booqJIWHGL5S0aUUTKHS19oGfKQq/l9Z1y1niaRePk0Y4fy/jxCnfKPA==}
+    peerDependencies:
+      '@tiptap/core': 3.26.1
+
+  '@tiptap/extension-bold@3.26.1':
+    resolution: {integrity: sha512-VIlF2sAiV6K009pcIDotfY8mvsPaq90dxeG9Q0ZIqfMD958TUCqjHw4MGYZf0/FgP12xksBfmcR7W312xgUf9Q==}
+    peerDependencies:
+      '@tiptap/core': 3.26.1
+
+  '@tiptap/extension-bullet-list@3.26.1':
+    resolution: {integrity: sha512-JB6bEJJHxXNAXEXTIAN3/j70p1ARHdeMfhzshGZswWKUWtDibTCrspIp7p1VNeiuVtJ/HB6PpFkGi7yWtQ3RTg==}
+    peerDependencies:
+      '@tiptap/extension-list': 3.26.1
+
+  '@tiptap/extension-code-block@3.26.1':
+    resolution: {integrity: sha512-NY7SYqcrqDVYTSWyaNGdSfCims6pOHoRQ2Rh4DEFb/rb8gLVkqbLZhcHzQCVfinlPqgV3xWF6cYMORwmnlBkXQ==}
+    peerDependencies:
+      '@tiptap/core': 3.26.1
+      '@tiptap/pm': 3.26.1
+
+  '@tiptap/extension-code@3.26.1':
+    resolution: {integrity: sha512-t9/VR5k3rGPyhcGau9YvVgaAQ+nP9R9WzS996bQQ7GIrMOTSXb0FWwoQFBiYl83V6VA16Tlj/oScC7SFlA8lvA==}
+    peerDependencies:
+      '@tiptap/core': 3.26.1
+
+  '@tiptap/extension-document@3.26.1':
+    resolution: {integrity: sha512-6W2vZjvi0Mv+4xEtwMDGhWwo7FotWR6eKfmntmduvehWevFpMxOKcTtyotjLigfZv738y50YWmvbaPuAPJG3BA==}
+    peerDependencies:
+      '@tiptap/core': 3.26.1
+
+  '@tiptap/extension-dropcursor@3.26.1':
+    resolution: {integrity: sha512-eVq3BvFIa3YD+pBIlj1i72vYEixlegGVKHnSYiVF2ovkQOSAH9sca7pkq6WgV1sMTCyWCU8e+WznTqtydvHUWA==}
+    peerDependencies:
+      '@tiptap/extensions': 3.26.1
+
+  '@tiptap/extension-gapcursor@3.26.1':
+    resolution: {integrity: sha512-BWW1yMQQA4TbEU0LLK+4cd9ebLTuZG5KjHwFMBRD/bGiRW9V1gTWFsCqThBbczcANoQiZK9pn5/4Ad/rGM3HUg==}
+    peerDependencies:
+      '@tiptap/extensions': 3.26.1
+
+  '@tiptap/extension-hard-break@3.26.1':
+    resolution: {integrity: sha512-gzNb1e/fK6HN+ko1axsrasjK7F1q0Bnm0G4ZY/0eq7pV7s1wZuwoCiGbvUx/9LCFKRV6+94FTqlb0A3NbYN36g==}
+    peerDependencies:
+      '@tiptap/core': 3.26.1
+
+  '@tiptap/extension-heading@3.26.1':
+    resolution: {integrity: sha512-eRlv9XxzUL8FobKAiF1WjP35CT2QpbcxxeyYFF7BmGEONvKI7r5g7JGwyGli4Cvclh70h8w6JuoXSmGUVEU65A==}
+    peerDependencies:
+      '@tiptap/core': 3.26.1
+
+  '@tiptap/extension-horizontal-rule@3.26.1':
+    resolution: {integrity: sha512-l9lPZYeSmY90y/2GkQcKaICFD5Atr8sx2SzJGkQzpNC9tRxZXyAHnfJE3OjBkspuGzjWIN0DimxBj4ibz58sKw==}
+    peerDependencies:
+      '@tiptap/core': 3.26.1
+      '@tiptap/pm': 3.26.1
+
+  '@tiptap/extension-image@3.26.1':
+    resolution: {integrity: sha512-IjoT+kRK4a1sTImvUz257yfk5l9kMxXxfxCfix5AUKdiWyn8SGUjJZapLICcZVY05UDqXmwsBvBK9lHkKX5ERg==}
+    peerDependencies:
+      '@tiptap/core': 3.26.1
+
+  '@tiptap/extension-italic@3.26.1':
+    resolution: {integrity: sha512-cLKYvOLToWEkJkAPspgIZ/PYDzAxacLm1VWcAq1tO1QDQCDe2Kw+y/zsGlyYEq/aKsAgpp4JNopBwAXRXxt2/A==}
+    peerDependencies:
+      '@tiptap/core': 3.26.1
+
+  '@tiptap/extension-link@3.26.1':
+    resolution: {integrity: sha512-aLLGLgikuhLFHRbjfUC6D4gRg+NUty4uhW7YkyVl8AxxPME47dPbCOX4H6uLCjEZcn3WnfNuCTr6HCTl0KEmGA==}
+    peerDependencies:
+      '@tiptap/core': 3.26.1
+      '@tiptap/pm': 3.26.1
+
+  '@tiptap/extension-list-item@3.26.1':
+    resolution: {integrity: sha512-5gLXJUiP763NA6i4HgrtcwUDXPP8820hsaBQyF1Y1VsXNi02uW9FVLe3RZK8jF0NZUNh9CqD0gogYJCbKOUU8A==}
+    peerDependencies:
+      '@tiptap/extension-list': 3.26.1
+
+  '@tiptap/extension-list-keymap@3.26.1':
+    resolution: {integrity: sha512-EReSayePO6SIxtRbxx+7KfBQreWHvoZmMb3O/RemfT8W6J0hCG5N/Rh8Z12+YZOnCDRXJ4RzFpAikYka3E54jQ==}
+    peerDependencies:
+      '@tiptap/extension-list': 3.26.1
+
+  '@tiptap/extension-list@3.26.1':
+    resolution: {integrity: sha512-06nOjnyXpzMO8Ys5k3IbYsDsKib1mv2OtaxBYX1/1uvRyOKwUX5tqDLb/qigic0LIANNL73lkNC8Z8XPeG4Tkg==}
+    peerDependencies:
+      '@tiptap/core': 3.26.1
+      '@tiptap/pm': 3.26.1
+
+  '@tiptap/extension-ordered-list@3.26.1':
+    resolution: {integrity: sha512-LeFPeFwb7ylkQVuuaHj+niu7WhWHpjDOi1GKZJE/ohOa2lgt7P221HMqhUzPiDlXOExN72oWTNmXUlT0ymCTkw==}
+    peerDependencies:
+      '@tiptap/extension-list': 3.26.1
+
+  '@tiptap/extension-paragraph@3.26.1':
+    resolution: {integrity: sha512-OkBeYUNM3eTzjm3z6IcC3NHryOX8g3eGNI86P/B+tFoFQSRuzLsKZU50ARCfIiLLg812NjcqujeJ1eX3BKDZrw==}
+    peerDependencies:
+      '@tiptap/core': 3.26.1
+
+  '@tiptap/extension-strike@3.26.1':
+    resolution: {integrity: sha512-7hmQ2mBsA+75GRrJIKYxb+10H23mblEQSGGsv9Ptl7JLaGmj+8sv2HGQGSUT9QBiBVprxaYTqyWFXQC9akfLWg==}
+    peerDependencies:
+      '@tiptap/core': 3.26.1
+
+  '@tiptap/extension-text-align@3.26.1':
+    resolution: {integrity: sha512-Ptbu1FyASFqIrbw/p9D6zLt8G7seDh4X408qU9FIrun7PE79o+amB5LWI/SzHFuVk3OMI+g7jE/mMDhNUYsqVA==}
+    peerDependencies:
+      '@tiptap/core': 3.26.1
+
+  '@tiptap/extension-text@3.26.1':
+    resolution: {integrity: sha512-Gocui5WvcCCJJIX17gdOVCSdYi5H4fDwaR0qkMAUZPq5kJCdrfl+vNpt8BTt53Bk+/QumiUW21fhQ184w7RoeQ==}
+    peerDependencies:
+      '@tiptap/core': 3.26.1
+
+  '@tiptap/extension-underline@3.26.1':
+    resolution: {integrity: sha512-HUHtQ+DRWDM0opW7Nk3YQwrLzw876hMU7cr1X/ZTG+8Bp+AKHihlwU+bqrPgG5St0mqASyUEhHQ/vK5PlnUYOQ==}
+    peerDependencies:
+      '@tiptap/core': 3.26.1
+
+  '@tiptap/extensions@3.26.1':
+    resolution: {integrity: sha512-PmRaoe6bebTgz/ZQrjmzwZMST1d9js9ZTiKnUXeXl3Fm+V5U/c3TbbKDfqmL63qPQdjtShDMHi9tYuv+c77OFQ==}
+    peerDependencies:
+      '@tiptap/core': 3.26.1
+      '@tiptap/pm': 3.26.1
+
+  '@tiptap/markdown@3.26.1':
+    resolution: {integrity: sha512-PpAi3hZqZnb7IsCiRnD6rZfauj8O19fvSzRRdx99Uwx14VnhznbO3WKpUMyleuLz5KjClidqqtKMQWDM6Wt0dA==}
+    peerDependencies:
+      '@tiptap/core': 3.26.1
+      '@tiptap/pm': 3.26.1
+
+  '@tiptap/pm@3.26.1':
+    resolution: {integrity: sha512-48cJQRbvr9Ux0+IgM1BR5vOLU5hkC+n+uerdQy2JjrIRKpYE/huU8fQFm6PoRppoKYfilklzb29elsQ+n2TA+g==}
+
+  '@tiptap/starter-kit@3.26.1':
+    resolution: {integrity: sha512-A0zsvwGU9exLND34F8e8KqUXFSfs835tNN+VC+ZT3yNeaO/WXnlh/Cgal1F6pHHbcxy7RV2CRwJU5S3cWLPxrA==}
+
+  '@tybys/wasm-util@0.10.2':
+    resolution: {integrity: sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==}
+
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
+
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
   hono@4.12.23:
     resolution: {integrity: sha512-eIaZ9qDgu7XV0pxOCrg7/WhnQ6Ivm22UcxhXx/A3dcbqbbYgBEkc6e/J/s7j2tS96zoB0S9VBdLwQNCWwUo4LA==}
     engines: {node: '>=16.9.0'}
 
+  lightningcss-android-arm64@1.32.0:
+    resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.32.0:
+    resolution: {integrity: sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.32.0:
+    resolution: {integrity: sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.32.0:
+    resolution: {integrity: sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    resolution: {integrity: sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.32.0:
+    resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    resolution: {integrity: sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.32.0:
+    resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
+    engines: {node: '>= 12.0.0'}
+
+  linkifyjs@4.3.3:
+    resolution: {integrity: sha512-P8aEP5U/D1/IlTY2OeYsErdwh9bGuLE30NcXtKEjgdHcahveQoQwM2yZNsioQHsWFz0P7KKudisbrzCgR0sDHg==}
+
   lucide@1.16.0:
     resolution: {integrity: sha512-20QvduCJTB7e7K9WVvoLBuKPsYZ8d6ptwe9PIdTFiZmjVTPdFWQreBNyNCM9QQtGnqHR0PLiEQdxyhYsL1LdoA==}
 
+  marked@17.0.6:
+    resolution: {integrity: sha512-gB0gkNafnonOw0obSTEGZTT86IuhILt2Wfx0mWH/1Au83kybTayroZ/V6nS25mN7u8ASy+5fMhgB3XPNrOZdmA==}
+    engines: {node: '>= 20'}
+    hasBin: true
+
+  nanoid@3.3.12:
+    resolution: {integrity: sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  orderedmap@2.1.1:
+    resolution: {integrity: sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@4.0.4:
+    resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
+    engines: {node: '>=12'}
+
+  postcss@8.5.15:
+    resolution: {integrity: sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  prosemirror-changeset@2.4.1:
+    resolution: {integrity: sha512-96WBLhOaYhJ+kPhLg3uW359Tz6I/MfcrQfL4EGv4SrcqKEMC1gmoGrXHecPE8eOwTVCJ4IwgfzM8fFad25wNfw==}
+
+  prosemirror-commands@1.7.1:
+    resolution: {integrity: sha512-rT7qZnQtx5c0/y/KlYaGvtG411S97UaL6gdp6RIZ23DLHanMYLyfGBV5DtSnZdthQql7W+lEVbpSfwtO8T+L2w==}
+
+  prosemirror-dropcursor@1.8.2:
+    resolution: {integrity: sha512-CCk6Gyx9+Tt2sbYk5NK0nB1ukHi2ryaRgadV/LvyNuO3ena1payM2z6Cg0vO1ebK8cxbzo41ku2DE5Axj1Zuiw==}
+
+  prosemirror-gapcursor@1.4.1:
+    resolution: {integrity: sha512-pMdYaEnjNMSwl11yjEGtgTmLkR08m/Vl+Jj443167p9eB3HVQKhYCc4gmHVDsLPODfZfjr/MmirsdyZziXbQKw==}
+
+  prosemirror-history@1.5.0:
+    resolution: {integrity: sha512-zlzTiH01eKA55UAf1MEjtssJeHnGxO0j4K4Dpx+gnmX9n+SHNlDqI2oO1Kv1iPN5B1dm5fsljCfqKF9nFL6HRg==}
+
+  prosemirror-inputrules@1.5.1:
+    resolution: {integrity: sha512-7wj4uMjKaXWAQ1CDgxNzNtR9AlsuwzHfdFH1ygEHA2KHF2DOEaXl1CJfNPAKCg9qNEh4rum975QLaCiQPyY6Fw==}
+
+  prosemirror-keymap@1.2.3:
+    resolution: {integrity: sha512-4HucRlpiLd1IPQQXNqeo81BGtkY8Ai5smHhKW9jjPKRc2wQIxksg7Hl1tTI2IfT2B/LgX6bfYvXxEpJl7aKYKw==}
+
+  prosemirror-model@1.25.8:
+    resolution: {integrity: sha512-BswA4BLSFEiORV6Vjj/yZBXDbos1zTEnhyeSSgT8psGFhstQS7UJ8/WOLiDos9Byaee27+tml0/DuMNxYR84zg==}
+
+  prosemirror-schema-list@1.5.1:
+    resolution: {integrity: sha512-927lFx/uwyQaGwJxLWCZRkjXG0p48KpMj6ueoYiu4JX05GGuGcgzAy62dfiV8eFZftgyBUvLx76RsMe20fJl+Q==}
+
+  prosemirror-state@1.4.4:
+    resolution: {integrity: sha512-6jiYHH2CIGbCfnxdHbXZ12gySFY/fz/ulZE333G6bPqIZ4F+TXo9ifiR86nAHpWnfoNjOb3o5ESi7J8Uz1jXHw==}
+
+  prosemirror-tables@1.8.5:
+    resolution: {integrity: sha512-V/0cDCsHKHe/tfWkeCmthNUcEp1IVO3p6vwN8XtwE9PZQLAZJigbw3QoraAdfJPir4NKJtNvOB8oYGKRl+t0Dw==}
+
+  prosemirror-transform@1.12.0:
+    resolution: {integrity: sha512-GxboyN4AMIsoHNtz5uf2r2Ru551i5hWeCMD6E2Ib4Eogqoub0NflniaBPVQ4MrGE5yZ8JV9tUHg9qcZTTrcN4w==}
+
+  prosemirror-view@1.41.9:
+    resolution: {integrity: sha512-clTunTX+eaLbr87L1V1QPheRlEQJyTlL3gXe9x3jQIk3rL0RVWxviDGz8tFaydwIVm+hKhYCyr+R/zBtWr9s6A==}
+
+  rolldown@1.0.3:
+    resolution: {integrity: sha512-i00lAJ2ks1BYr7rjNjKC7BcqAS7nVfiT3QX1SI5aY+AFHblCmaUf9OE9dbdzDvW6dJxbi2ZCZiy9v3CcwOiX3g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+
+  rope-sequence@1.3.4:
+    resolution: {integrity: sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  tinyglobby@0.2.17:
+    resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
+    engines: {node: '>=12.0.0'}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  uuid@14.0.0:
+    resolution: {integrity: sha512-Qo+uWgilfSmAhXCMav1uYFynlQO7fMFiMVZsQqZRMIXp0O7rR7qjkj+cPvBHLgBqi960QCoo/PH2/6ZtVqKvrg==}
+    hasBin: true
+
+  vite@8.0.16:
+    resolution: {integrity: sha512-h9bXPmJichP5fLmVQo3PyaGSDE2n3aPuomeAlVRm0JLmt4rY6zmPKd59HYI4LNW8oTK7tlTsuC7l/m7awx9Jcw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^20.19.0 || >=22.12.0
+      '@vitejs/devtools': ^0.1.18
+      esbuild: ^0.27.0 || ^0.28.0
+      jiti: '>=1.21.0'
+      less: ^4.0.0
+      sass: ^1.70.0
+      sass-embedded: ^1.70.0
+      stylus: '>=0.54.8'
+      sugarss: ^5.0.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      '@vitejs/devtools':
+        optional: true
+      esbuild:
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  w3c-keyname@2.2.8:
+    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
+
 snapshots:
 
+  '@emnapi/core@1.10.0':
+    dependencies:
+      '@emnapi/wasi-threads': 1.2.1
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/runtime@1.10.0':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/wasi-threads@1.2.1':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
   '@hono/node-server@2.0.4(hono@4.12.23)':
     dependencies:
       hono: 4.12.23
 
+  '@napi-rs/wasm-runtime@1.1.5(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
+    dependencies:
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@tybys/wasm-util': 0.10.2
+    optional: true
+
+  '@oxc-project/types@0.133.0': {}
+
+  '@rolldown/binding-android-arm64@1.0.3':
+    optional: true
+
+  '@rolldown/binding-darwin-arm64@1.0.3':
+    optional: true
+
+  '@rolldown/binding-darwin-x64@1.0.3':
+    optional: true
+
+  '@rolldown/binding-freebsd-x64@1.0.3':
+    optional: true
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.3':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-gnu@1.0.3':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-musl@1.0.3':
+    optional: true
+
+  '@rolldown/binding-linux-ppc64-gnu@1.0.3':
+    optional: true
+
+  '@rolldown/binding-linux-s390x-gnu@1.0.3':
+    optional: true
+
+  '@rolldown/binding-linux-x64-gnu@1.0.3':
+    optional: true
+
+  '@rolldown/binding-linux-x64-musl@1.0.3':
+    optional: true
+
+  '@rolldown/binding-openharmony-arm64@1.0.3':
+    optional: true
+
+  '@rolldown/binding-wasm32-wasi@1.0.3':
+    dependencies:
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@napi-rs/wasm-runtime': 1.1.5(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+    optional: true
+
+  '@rolldown/binding-win32-arm64-msvc@1.0.3':
+    optional: true
+
+  '@rolldown/binding-win32-x64-msvc@1.0.3':
+    optional: true
+
+  '@rolldown/pluginutils@1.0.1': {}
+
+  '@tiptap/core@3.26.1(@tiptap/pm@3.26.1)':
+    dependencies:
+      '@tiptap/pm': 3.26.1
+
+  '@tiptap/extension-blockquote@3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))':
+    dependencies:
+      '@tiptap/core': 3.26.1(@tiptap/pm@3.26.1)
+
+  '@tiptap/extension-bold@3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))':
+    dependencies:
+      '@tiptap/core': 3.26.1(@tiptap/pm@3.26.1)
+
+  '@tiptap/extension-bullet-list@3.26.1(@tiptap/extension-list@3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))(@tiptap/pm@3.26.1))':
+    dependencies:
+      '@tiptap/extension-list': 3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))(@tiptap/pm@3.26.1)
+
+  '@tiptap/extension-code-block@3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))(@tiptap/pm@3.26.1)':
+    dependencies:
+      '@tiptap/core': 3.26.1(@tiptap/pm@3.26.1)
+      '@tiptap/pm': 3.26.1
+
+  '@tiptap/extension-code@3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))':
+    dependencies:
+      '@tiptap/core': 3.26.1(@tiptap/pm@3.26.1)
+
+  '@tiptap/extension-document@3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))':
+    dependencies:
+      '@tiptap/core': 3.26.1(@tiptap/pm@3.26.1)
+
+  '@tiptap/extension-dropcursor@3.26.1(@tiptap/extensions@3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))(@tiptap/pm@3.26.1))':
+    dependencies:
+      '@tiptap/extensions': 3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))(@tiptap/pm@3.26.1)
+
+  '@tiptap/extension-gapcursor@3.26.1(@tiptap/extensions@3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))(@tiptap/pm@3.26.1))':
+    dependencies:
+      '@tiptap/extensions': 3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))(@tiptap/pm@3.26.1)
+
+  '@tiptap/extension-hard-break@3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))':
+    dependencies:
+      '@tiptap/core': 3.26.1(@tiptap/pm@3.26.1)
+
+  '@tiptap/extension-heading@3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))':
+    dependencies:
+      '@tiptap/core': 3.26.1(@tiptap/pm@3.26.1)
+
+  '@tiptap/extension-horizontal-rule@3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))(@tiptap/pm@3.26.1)':
+    dependencies:
+      '@tiptap/core': 3.26.1(@tiptap/pm@3.26.1)
+      '@tiptap/pm': 3.26.1
+
+  '@tiptap/extension-image@3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))':
+    dependencies:
+      '@tiptap/core': 3.26.1(@tiptap/pm@3.26.1)
+
+  '@tiptap/extension-italic@3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))':
+    dependencies:
+      '@tiptap/core': 3.26.1(@tiptap/pm@3.26.1)
+
+  '@tiptap/extension-link@3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))(@tiptap/pm@3.26.1)':
+    dependencies:
+      '@tiptap/core': 3.26.1(@tiptap/pm@3.26.1)
+      '@tiptap/pm': 3.26.1
+      linkifyjs: 4.3.3
+
+  '@tiptap/extension-list-item@3.26.1(@tiptap/extension-list@3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))(@tiptap/pm@3.26.1))':
+    dependencies:
+      '@tiptap/extension-list': 3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))(@tiptap/pm@3.26.1)
+
+  '@tiptap/extension-list-keymap@3.26.1(@tiptap/extension-list@3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))(@tiptap/pm@3.26.1))':
+    dependencies:
+      '@tiptap/extension-list': 3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))(@tiptap/pm@3.26.1)
+
+  '@tiptap/extension-list@3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))(@tiptap/pm@3.26.1)':
+    dependencies:
+      '@tiptap/core': 3.26.1(@tiptap/pm@3.26.1)
+      '@tiptap/pm': 3.26.1
+
+  '@tiptap/extension-ordered-list@3.26.1(@tiptap/extension-list@3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))(@tiptap/pm@3.26.1))':
+    dependencies:
+      '@tiptap/extension-list': 3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))(@tiptap/pm@3.26.1)
+
+  '@tiptap/extension-paragraph@3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))':
+    dependencies:
+      '@tiptap/core': 3.26.1(@tiptap/pm@3.26.1)
+
+  '@tiptap/extension-strike@3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))':
+    dependencies:
+      '@tiptap/core': 3.26.1(@tiptap/pm@3.26.1)
+
+  '@tiptap/extension-text-align@3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))':
+    dependencies:
+      '@tiptap/core': 3.26.1(@tiptap/pm@3.26.1)
+
+  '@tiptap/extension-text@3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))':
+    dependencies:
+      '@tiptap/core': 3.26.1(@tiptap/pm@3.26.1)
+
+  '@tiptap/extension-underline@3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))':
+    dependencies:
+      '@tiptap/core': 3.26.1(@tiptap/pm@3.26.1)
+
+  '@tiptap/extensions@3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))(@tiptap/pm@3.26.1)':
+    dependencies:
+      '@tiptap/core': 3.26.1(@tiptap/pm@3.26.1)
+      '@tiptap/pm': 3.26.1
+
+  '@tiptap/markdown@3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))(@tiptap/pm@3.26.1)':
+    dependencies:
+      '@tiptap/core': 3.26.1(@tiptap/pm@3.26.1)
+      '@tiptap/pm': 3.26.1
+      marked: 17.0.6
+
+  '@tiptap/pm@3.26.1':
+    dependencies:
+      prosemirror-changeset: 2.4.1
+      prosemirror-commands: 1.7.1
+      prosemirror-dropcursor: 1.8.2
+      prosemirror-gapcursor: 1.4.1
+      prosemirror-history: 1.5.0
+      prosemirror-inputrules: 1.5.1
+      prosemirror-keymap: 1.2.3
+      prosemirror-model: 1.25.8
+      prosemirror-schema-list: 1.5.1
+      prosemirror-state: 1.4.4
+      prosemirror-tables: 1.8.5
+      prosemirror-transform: 1.12.0
+      prosemirror-view: 1.41.9
+
+  '@tiptap/starter-kit@3.26.1':
+    dependencies:
+      '@tiptap/core': 3.26.1(@tiptap/pm@3.26.1)
+      '@tiptap/extension-blockquote': 3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))
+      '@tiptap/extension-bold': 3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))
+      '@tiptap/extension-bullet-list': 3.26.1(@tiptap/extension-list@3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))(@tiptap/pm@3.26.1))
+      '@tiptap/extension-code': 3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))
+      '@tiptap/extension-code-block': 3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))(@tiptap/pm@3.26.1)
+      '@tiptap/extension-document': 3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))
+      '@tiptap/extension-dropcursor': 3.26.1(@tiptap/extensions@3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))(@tiptap/pm@3.26.1))
+      '@tiptap/extension-gapcursor': 3.26.1(@tiptap/extensions@3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))(@tiptap/pm@3.26.1))
+      '@tiptap/extension-hard-break': 3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))
+      '@tiptap/extension-heading': 3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))
+      '@tiptap/extension-horizontal-rule': 3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))(@tiptap/pm@3.26.1)
+      '@tiptap/extension-italic': 3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))
+      '@tiptap/extension-link': 3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))(@tiptap/pm@3.26.1)
+      '@tiptap/extension-list': 3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))(@tiptap/pm@3.26.1)
+      '@tiptap/extension-list-item': 3.26.1(@tiptap/extension-list@3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))(@tiptap/pm@3.26.1))
+      '@tiptap/extension-list-keymap': 3.26.1(@tiptap/extension-list@3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))(@tiptap/pm@3.26.1))
+      '@tiptap/extension-ordered-list': 3.26.1(@tiptap/extension-list@3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))(@tiptap/pm@3.26.1))
+      '@tiptap/extension-paragraph': 3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))
+      '@tiptap/extension-strike': 3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))
+      '@tiptap/extension-text': 3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))
+      '@tiptap/extension-underline': 3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))
+      '@tiptap/extensions': 3.26.1(@tiptap/core@3.26.1(@tiptap/pm@3.26.1))(@tiptap/pm@3.26.1)
+      '@tiptap/pm': 3.26.1
+
+  '@tybys/wasm-util@0.10.2':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  detect-libc@2.1.2: {}
+
+  fdir@6.5.0(picomatch@4.0.4):
+    optionalDependencies:
+      picomatch: 4.0.4
+
+  fsevents@2.3.3:
+    optional: true
+
   hono@4.12.23: {}
 
+  lightningcss-android-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-x64@1.32.0:
+    optional: true
+
+  lightningcss-freebsd-x64@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.32.0:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    optional: true
+
+  lightningcss@1.32.0:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.32.0
+      lightningcss-darwin-arm64: 1.32.0
+      lightningcss-darwin-x64: 1.32.0
+      lightningcss-freebsd-x64: 1.32.0
+      lightningcss-linux-arm-gnueabihf: 1.32.0
+      lightningcss-linux-arm64-gnu: 1.32.0
+      lightningcss-linux-arm64-musl: 1.32.0
+      lightningcss-linux-x64-gnu: 1.32.0
+      lightningcss-linux-x64-musl: 1.32.0
+      lightningcss-win32-arm64-msvc: 1.32.0
+      lightningcss-win32-x64-msvc: 1.32.0
+
+  linkifyjs@4.3.3: {}
+
   lucide@1.16.0: {}
+
+  marked@17.0.6: {}
+
+  nanoid@3.3.12: {}
+
+  orderedmap@2.1.1: {}
+
+  picocolors@1.1.1: {}
+
+  picomatch@4.0.4: {}
+
+  postcss@8.5.15:
+    dependencies:
+      nanoid: 3.3.12
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  prosemirror-changeset@2.4.1:
+    dependencies:
+      prosemirror-transform: 1.12.0
+
+  prosemirror-commands@1.7.1:
+    dependencies:
+      prosemirror-model: 1.25.8
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.0
+
+  prosemirror-dropcursor@1.8.2:
+    dependencies:
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.0
+      prosemirror-view: 1.41.9
+
+  prosemirror-gapcursor@1.4.1:
+    dependencies:
+      prosemirror-keymap: 1.2.3
+      prosemirror-model: 1.25.8
+      prosemirror-state: 1.4.4
+      prosemirror-view: 1.41.9
+
+  prosemirror-history@1.5.0:
+    dependencies:
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.0
+      prosemirror-view: 1.41.9
+      rope-sequence: 1.3.4
+
+  prosemirror-inputrules@1.5.1:
+    dependencies:
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.0
+
+  prosemirror-keymap@1.2.3:
+    dependencies:
+      prosemirror-state: 1.4.4
+      w3c-keyname: 2.2.8
+
+  prosemirror-model@1.25.8:
+    dependencies:
+      orderedmap: 2.1.1
+
+  prosemirror-schema-list@1.5.1:
+    dependencies:
+      prosemirror-model: 1.25.8
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.0
+
+  prosemirror-state@1.4.4:
+    dependencies:
+      prosemirror-model: 1.25.8
+      prosemirror-transform: 1.12.0
+      prosemirror-view: 1.41.9
+
+  prosemirror-tables@1.8.5:
+    dependencies:
+      prosemirror-keymap: 1.2.3
+      prosemirror-model: 1.25.8
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.0
+      prosemirror-view: 1.41.9
+
+  prosemirror-transform@1.12.0:
+    dependencies:
+      prosemirror-model: 1.25.8
+
+  prosemirror-view@1.41.9:
+    dependencies:
+      prosemirror-model: 1.25.8
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.0
+
+  rolldown@1.0.3:
+    dependencies:
+      '@oxc-project/types': 0.133.0
+      '@rolldown/pluginutils': 1.0.1
+    optionalDependencies:
+      '@rolldown/binding-android-arm64': 1.0.3
+      '@rolldown/binding-darwin-arm64': 1.0.3
+      '@rolldown/binding-darwin-x64': 1.0.3
+      '@rolldown/binding-freebsd-x64': 1.0.3
+      '@rolldown/binding-linux-arm-gnueabihf': 1.0.3
+      '@rolldown/binding-linux-arm64-gnu': 1.0.3
+      '@rolldown/binding-linux-arm64-musl': 1.0.3
+      '@rolldown/binding-linux-ppc64-gnu': 1.0.3
+      '@rolldown/binding-linux-s390x-gnu': 1.0.3
+      '@rolldown/binding-linux-x64-gnu': 1.0.3
+      '@rolldown/binding-linux-x64-musl': 1.0.3
+      '@rolldown/binding-openharmony-arm64': 1.0.3
+      '@rolldown/binding-wasm32-wasi': 1.0.3
+      '@rolldown/binding-win32-arm64-msvc': 1.0.3
+      '@rolldown/binding-win32-x64-msvc': 1.0.3
+
+  rope-sequence@1.3.4: {}
+
+  source-map-js@1.2.1: {}
+
+  tinyglobby@0.2.17:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.4)
+      picomatch: 4.0.4
+
+  tslib@2.8.1:
+    optional: true
+
+  uuid@14.0.0: {}
+
+  vite@8.0.16:
+    dependencies:
+      lightningcss: 1.32.0
+      picomatch: 4.0.4
+      postcss: 8.5.15
+      rolldown: 1.0.3
+      tinyglobby: 0.2.17
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  w3c-keyname@2.2.8: {}

src/data/state-utils.mjs

@@ -1,4 +1,4 @@
-export const maxNoteBodyLength = 1024 * 1024;
+export const maxNoteBodyLength = 10 * 1024 * 1024;
 
 export function createSeedState(now = Date.now()) {
   return {

styles.css

@@ -516,7 +516,7 @@ textarea {
 
 .editor-meta {
   display: grid;
-  grid-template-columns: 1fr auto auto auto auto;
+  grid-template-columns: 1fr auto auto auto auto auto;
   align-items: center;
   gap: 8px;
   height: 48px;
@@ -559,6 +559,7 @@ textarea {
 }
 
 .editor-save-button,
+.editor-menu-button,
 .editor-preview-button {
   display: grid;
   place-items: center;
@@ -572,22 +573,26 @@ textarea {
 }
 
 .editor-save-button:hover:not(:disabled),
+.editor-menu-button:hover:not(:disabled),
 .editor-preview-button:hover:not(:disabled) {
   background: var(--selected-soft);
   border-color: #eed08b;
 }
 
-.editor-preview-button.active {
+.editor-preview-button.active,
+.editor-menu-button.active {
   background: var(--selected);
   border-color: #e3bd5d;
 }
 
 .editor-save-button:disabled,
+.editor-menu-button:disabled,
 .editor-preview-button:disabled {
   color: #b9b4aa;
 }
 
 .editor-save-button svg,
+.editor-menu-button svg,
 .editor-preview-button svg {
   width: 18px;
   height: 18px;
@@ -598,7 +603,74 @@ textarea {
   stroke-width: 2;
 }
 
+.editor-menu-wrap {
+  position: relative;
+}
+
+.editor-format-menu,
+.mobile-editor-format-menu {
+  display: grid;
+  grid-template-columns: repeat(5, 32px);
+  gap: 4px;
+  padding: 6px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: rgba(248, 247, 243, 0.98);
+  box-shadow: 0 12px 30px rgba(31, 29, 25, 0.16);
+}
+
+.editor-format-menu {
+  position: absolute;
+  z-index: 26;
+  top: 36px;
+  right: 0;
+}
+
+.editor-format-menu[hidden],
+.mobile-editor-format-menu[hidden] {
+  display: none;
+}
+
+.editor-format-menu button,
+.mobile-editor-format-menu button {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text);
+}
+
+.editor-format-menu button:hover:not(:disabled),
+.mobile-editor-format-menu button:hover:not(:disabled),
+.editor-format-menu button.active,
+.mobile-editor-format-menu button.active {
+  border-color: #eed08b;
+  background: var(--selected-soft);
+  color: var(--accent-strong);
+}
+
+.editor-format-menu button:disabled,
+.mobile-editor-format-menu button:disabled {
+  color: #b9b4aa;
+}
+
+.editor-format-menu svg,
+.mobile-editor-format-menu svg {
+  width: 17px;
+  height: 17px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2;
+}
+
 .mobile-folder-select,
+.mobile-editor-menu-wrap,
 .mobile-save-button,
 .mobile-preview-button {
   display: none;
@@ -615,7 +687,7 @@ textarea {
   padding: 8px 56px 36px;
   border: 0;
   outline: 0;
-  resize: none;
+  overflow: auto;
   background: transparent;
   color: var(--text);
   font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
@@ -623,6 +695,94 @@ textarea {
   line-height: 1.55;
 }
 
+#editor .ProseMirror {
+  min-height: 100%;
+  outline: 0;
+  white-space: pre-wrap;
+}
+
+#editor .ProseMirror > *:first-child {
+  margin-top: 0;
+}
+
+#editor .ProseMirror > *:last-child {
+  margin-bottom: 0;
+}
+
+#editor p,
+#editor ul,
+#editor ol,
+#editor blockquote,
+#editor pre {
+  margin: 0.55em 0;
+}
+
+#editor h1,
+#editor h2,
+#editor h3 {
+  margin: 0.8em 0 0.35em;
+  line-height: 1.2;
+}
+
+#editor code,
+#editor pre {
+  border-radius: 6px;
+  background: #f1f0ec;
+}
+
+#editor code {
+  padding: 2px 4px;
+}
+
+#editor pre {
+  overflow: auto;
+  padding: 10px;
+}
+
+#editor blockquote {
+  border-left: 3px solid #d7d2c8;
+  padding-left: 12px;
+  color: #6e675d;
+}
+
+#editor img,
+.markdown-preview img {
+  display: block;
+  max-width: min(100%, 720px);
+  height: auto;
+  margin: 12px auto;
+  border: 1px solid #ddd7cc;
+  border-radius: 7px;
+  background: white;
+}
+
+#editor img[data-align="left"],
+.markdown-preview img[data-align="left"] {
+  margin-right: auto;
+  margin-left: 0;
+}
+
+#editor img[data-align="center"],
+.markdown-preview img[data-align="center"] {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+#editor img[data-align="right"],
+.markdown-preview img[data-align="right"] {
+  margin-right: 0;
+  margin-left: auto;
+}
+
+#editor .ProseMirror-selectednode {
+  outline: 3px solid rgba(216, 150, 33, 0.34);
+  outline-offset: 3px;
+}
+
+#editor img.ProseMirror-selectednode {
+  box-shadow: 0 0 0 3px rgba(216, 150, 33, 0.22);
+}
+
 .markdown-preview {
   flex: 1;
   min-height: 0;
@@ -831,6 +991,7 @@ textarea {
   }
 
   #noteFolderSelect,
+  .editor-menu-wrap,
   .editor-preview-button,
   .editor-save-button {
     display: none;
@@ -976,6 +1137,7 @@ html.force-mobile .save-status {
 }
 
 html.force-mobile #noteFolderSelect,
+html.force-mobile .editor-menu-wrap,
 html.force-mobile .editor-preview-button,
 html.force-mobile .editor-save-button {
   display: none;
@@ -1153,6 +1315,7 @@ html.force-mobile .app-shell[data-mobile-view="editor"] .mobile-folder-select {
   }
 
   .mobile-edit-button,
+  .mobile-editor-menu-button,
   .mobile-preview-button,
   .mobile-save-button {
     display: grid;
@@ -1167,20 +1330,34 @@ html.force-mobile .app-shell[data-mobile-view="editor"] .mobile-folder-select {
   }
 
   .mobile-save-button:disabled,
+  .mobile-editor-menu-button:disabled,
   .mobile-preview-button:disabled {
     color: #b9b4aa;
   }
 
   .mobile-save-button,
+  .mobile-editor-menu-wrap,
   .mobile-preview-button {
     display: none;
   }
 
+  .mobile-editor-menu-wrap {
+    position: relative;
+  }
+
+  .mobile-editor-format-menu {
+    position: absolute;
+    z-index: 28;
+    right: -96px;
+    bottom: 48px;
+  }
+
   .mobile-preview-button.active {
     background: var(--selected);
   }
 
   .mobile-edit-button svg,
+  .mobile-editor-menu-button svg,
   .mobile-preview-button svg,
   .mobile-save-button svg {
     width: 22px;
@@ -1208,7 +1385,7 @@ html.force-mobile .app-shell[data-mobile-view="editor"] .mobile-folder-select {
   }
 
   .app-shell[data-mobile-view="editor"] .mobile-bottom {
-    grid-template-columns: 44px 44px 44px;
+    grid-template-columns: 44px 44px 44px 44px;
     justify-content: end;
   }
 
@@ -1220,6 +1397,10 @@ html.force-mobile .app-shell[data-mobile-view="editor"] .mobile-folder-select {
     display: grid;
   }
 
+  .app-shell[data-mobile-view="editor"] .mobile-editor-menu-wrap {
+    display: block;
+  }
+
   .app-shell[data-mobile-view="editor"] .mobile-preview-button {
     display: grid;
   }
@@ -1341,6 +1522,7 @@ html.force-mobile .mobile-back span {
 
 html.force-mobile .mobile-back svg,
 html.force-mobile .mobile-edit-button svg,
+html.force-mobile .mobile-editor-menu-button svg,
 html.force-mobile .mobile-preview-button svg,
 html.force-mobile .mobile-save-button svg {
   width: 22px;
@@ -1447,6 +1629,7 @@ html.force-mobile .mobile-search input {
 }
 
 html.force-mobile .mobile-edit-button,
+html.force-mobile .mobile-editor-menu-button,
 html.force-mobile .mobile-preview-button,
 html.force-mobile .mobile-save-button {
   display: grid;
@@ -1460,15 +1643,28 @@ html.force-mobile .mobile-save-button {
 }
 
 html.force-mobile .mobile-save-button:disabled,
+html.force-mobile .mobile-editor-menu-button:disabled,
 html.force-mobile .mobile-preview-button:disabled {
   color: #b9b4aa;
 }
 
 html.force-mobile .mobile-save-button,
+html.force-mobile .mobile-editor-menu-wrap,
 html.force-mobile .mobile-preview-button {
   display: none;
 }
 
+html.force-mobile .mobile-editor-menu-wrap {
+  position: relative;
+}
+
+html.force-mobile .mobile-editor-format-menu {
+  position: absolute;
+  z-index: 28;
+  right: -96px;
+  bottom: 48px;
+}
+
 html.force-mobile .mobile-preview-button.active {
   background: var(--selected);
 }
@@ -1489,7 +1685,7 @@ html.force-mobile .app-shell[data-mobile-view="editor"] .editor-pane {
 }
 
 html.force-mobile .app-shell[data-mobile-view="editor"] .mobile-bottom {
-  grid-template-columns: 44px 44px 44px;
+  grid-template-columns: 44px 44px 44px 44px;
   justify-content: end;
 }
 
@@ -1501,6 +1697,10 @@ html.force-mobile .app-shell[data-mobile-view="editor"] .mobile-save-button {
   display: grid;
 }
 
+html.force-mobile .app-shell[data-mobile-view="editor"] .mobile-editor-menu-wrap {
+  display: block;
+}
+
 html.force-mobile .app-shell[data-mobile-view="editor"] .mobile-preview-button {
   display: grid;
 }

vite.config.js

@@ -0,0 +1,15 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  build: {
+    codeSplitting: false,
+    emptyOutDir: false,
+    outDir: "assets",
+    lib: {
+      entry: "app.js",
+      formats: ["es"],
+      fileName: () => "app.bundle.js"
+    },
+    rollupOptions: {}
+  }
+});