Merge branch 'main' of github.com:lite-note/lite-note

.node-version

@@ -1 +1 @@
-22.11.0
+22.12.0

package.json

@@ -16,9 +16,9 @@
   },
   "dependencies": {
     "@intlify/unplugin-vue-i18n": "^6.0.8",
-    "@octokit/core": "^7.0.3",
-    "@octokit/rest": "^22.0.0",
-    "@tailwindcss/postcss": "^4.1.11",
+    "@octokit/core": "^7.0.6",
+    "@octokit/rest": "^22.0.1",
+    "@tailwindcss/postcss": "^4.1.16",
     "@toycode/markdown-it-class": "^1.2.4",
     "@vscode/markdown-it-katex": "^1.1.2",
     "@vueuse/core": "^13.6.0",
@@ -34,8 +34,8 @@
     "markdown-it-github-alerts": "^1.0.0",
     "markdown-it-iframe": "^1.0.0",
     "markdown-it-shikiji": "^0.10.2",
-    "mermaid": "^11.9.0",
-    "nanoid": "^5.1.5",
+    "mermaid": "^11.12.1",
+    "nanoid": "^5.1.6",
     "notyf": "^3.10.0",
     "pastel-color": "^1.0.3",
     "pinia": "^2.2.6",
@@ -50,23 +50,23 @@
     "vue-router": "^4.5.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.0",
-    "@rushstack/eslint-patch": "^1.12.0",
-    "@tailwindcss/typography": "^0.5.16",
+    "@babel/core": "^7.28.5",
+    "@rushstack/eslint-patch": "^1.14.1",
+    "@tailwindcss/typography": "^0.5.19",
     "@types/fontfaceobserver": "^2.1.3",
     "@types/markdown-it": "^14.1.2",
     "@types/node": "^22.15.24",
     "@types/pouchdb-browser": "^6.1.5",
     "@types/sanitize-html": "^2.16.0",
-    "@typescript-eslint/eslint-plugin": "^8.38.0",
-    "@typescript-eslint/parser": "^8.38.0",
+    "@typescript-eslint/eslint-plugin": "^8.46.2",
+    "@typescript-eslint/parser": "^8.46.2",
     "@vitejs/plugin-vue": "^5.2.4",
-    "@vue/compiler-sfc": "^3.5.18",
+    "@vue/compiler-sfc": "^3.5.22",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.6.0",
     "autoprefixer": "^10.4.21",
-    "daisyui": "^5.0.50",
-    "dotenv": "^17.2.1",
+    "daisyui": "^5.3.11",
+    "dotenv": "^17.2.3",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier-vue": "^5.0.0",
@@ -76,11 +76,11 @@
     "esno": "^4.8.0",
     "husky": "^9.1.7",
     "prettier": "^3.6.2",
-    "sass": "^1.89.2",
-    "tailwindcss": "^4.1.11",
-    "typescript": "~5.9.2",
-    "vite": "^7.0.6",
-    "vite-plugin-pwa": "^1.0.2",
+    "sass": "^1.93.3",
+    "tailwindcss": "^4.1.16",
+    "typescript": "~5.9.3",
+    "vite": "^7.1.12",
+    "vite-plugin-pwa": "^1.1.0",
     "vitest": "^3.2.4"
   }
 }

src/components/FontChange.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue"
 import { useUserRepoStore } from "../modules/repo/store/userRepo.store"
+import ThemeSwap from "@/components/ThemeSwap.vue"
 
 const store = useUserRepoStore()
 
@@ -13,6 +14,8 @@ const fontSizes = Array.from({ length: 7 }, (_, i) => `${9 + i * 2}pt`)
 
 <template>
   <div class="font-change" v-if="sortedFontFamilies.length > 0">
+    <theme-swap />
+
     <select
       class="select"
       :value="store.userSettings?.chosenFontFamily"
@@ -40,6 +43,7 @@ const fontSizes = Array.from({ length: 7 }, (_, i) => `${9 + i * 2}pt`)
   flex: 1;
   display: flex;
   flex-wrap: wrap;
+  align-items: center;
   gap: 1rem;
 
   select {

src/components/HeaderNote.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import ThemeSwap from "@/components/ThemeSwap.vue"
 import FontChange from "@/components/FontChange.vue"
 
 defineProps<{ user: string; repo: string }>()
@@ -72,6 +71,23 @@ defineProps<{ user: string; repo: string }>()
         <path d="M5 20l6 -16l2 0l7 16" />
       </svg>
     </button>
+    <router-link :to="{ name: 'FluxNoteView', params: { user, repo } }">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="36"
+        height="36"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        fill="none"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M5 12l-2 0l9 -9l9 9l-2 0" />
+        <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
+        <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
+      </svg>
+    </router-link>
     <router-link :to="{ name: 'DraftNotes', params: { user, repo } }">
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -91,23 +107,6 @@ defineProps<{ user: string; repo: string }>()
         <line x1="9" y1="15" x2="13" y2="15" />
       </svg>
     </router-link>
-    <router-link :to="{ name: 'FluxNoteView', params: { user, repo } }">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="36"
-        height="36"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-        fill="none"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path d="M5 12l-2 0l9 -9l9 9l-2 0" />
-        <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
-        <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
-      </svg>
-    </router-link>
     <router-link :to="{ name: 'FleetingNotes', params: { user, repo } }">
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -130,11 +129,13 @@ defineProps<{ user: string; repo: string }>()
     </router-link>
     <dialog id="font_modal" class="modal">
       <div class="modal-box">
-        <h3 class="text-lg font-bold">Font settings</h3>
+        <h3 class="text-lg font-bold">Style settings</h3>
         <font-change />
       </div>
+      <form method="dialog" class="modal-backdrop">
+        <button></button>
+      </form>
     </dialog>
-    <theme-swap />
   </header>
 </template>
 

src/utils/youtube.ts

@@ -0,0 +1,39 @@
+export const extractYouTubeId = (input: string) => {
+  if (!input) {
+    return null
+  }
+
+  let url: URL
+
+  try {
+    url = new URL(input)
+  } catch {
+    return input.trim()
+  }
+
+  const host = url.hostname.toLowerCase()
+  const pathSegments = url.pathname.split("/").filter(Boolean)
+
+  if (host.includes("youtu.be")) {
+    return pathSegments[0] ?? null
+  }
+
+  if (!host.includes("youtube.com")) {
+    return null
+  }
+
+  const vParam = url.searchParams.get("v")
+
+  if (vParam) {
+    return vParam
+  }
+
+  if (
+    pathSegments.length >= 2 &&
+    ["embed", "shorts", "live", "watch"].includes(pathSegments[0])
+  ) {
+    return pathSegments[1]
+  }
+
+  return null
+}

src/views/FleetingNotes.vue

@@ -9,6 +9,8 @@ import { prepareNoteCache } from "@/modules/note/cache/prepareNoteCache"
 import EditNote from "@/modules/note/components/EditNote.vue"
 import { useFolderNotes } from "@/modules/note/hooks/useFolderNotes"
 import { encodeUTF8ToBase64 } from "@/utils/decodeBase64ToUTF8"
+import { confirmMessage, errorMessage } from "@/utils/notif"
+import { extractYouTubeId } from "@/utils/youtube"
 
 const FLEETING_NOTES_FOLDER = ["inbox", "_inbox"]
 
@@ -25,6 +27,47 @@ const initialContent = ``
 const newContent = ref(initialContent)
 const { mode, toggleMode } = useEditionMode()
 
+const handleYouTube = async () => {
+  if (typeof navigator === "undefined" || !navigator.clipboard?.readText) {
+    errorMessage("Clipboard access is not available.")
+    return
+  }
+
+  let clipboardText: string
+
+  try {
+    clipboardText = (await navigator.clipboard.readText()).trim()
+  } catch (err) {
+    console.warn(err)
+
+    errorMessage("Unable to read from the clipboard.")
+    return
+  }
+
+  debugger
+
+  if (!clipboardText) {
+    errorMessage("Clipboard is empty.")
+    return
+  }
+
+  const videoId = extractYouTubeId(clipboardText)
+
+  if (!videoId) {
+    errorMessage("The clipboard does not contain a valid YouTube link or id.")
+    return
+  }
+
+  const snippet = `@[youtube](${videoId})`
+  try {
+    await navigator.clipboard.writeText(snippet)
+  } catch {
+    errorMessage("Unable to paste to the clipboard.")
+  }
+
+  confirmMessage("YouTube video embed added to the note.")
+}
+
 const { createFile } = useGitHubContent({
   repo: repo.value,
   user: user.value,
@@ -74,6 +117,9 @@ watch(mode, async (newMode) => {
             new fleeting note
           </button>
         </div>
+        <div class="column">
+          <button class="btn" @click="handleYouTube">YouTube</button>
+        </div>
       </div>
 
       <div v-if="mode === 'edit'">