feat: 粘贴超链接、图片链接

src/hooks/usePasteTextClipboardData.ts

@@ -1,6 +1,9 @@
+import { storeToRefs } from 'pinia'
+import { useKeyboardStore } from '@/store'
 import { pasteCustomClipboardString } from '@/utils/clipboard'
 import { parseText2Paragraphs } from '@/utils/textParser'
 import { getImageDataURL, isSVGString, svg2File } from '@/utils/image'
+import { isValidImgURL, isValidURL } from '@/utils/common'
 import useCreateElement from '@/hooks/useCreateElement'
 import useAddSlidesOrElements from '@/hooks/useAddSlidesOrElements'
 
@@ -10,6 +13,8 @@ interface PasteTextClipboardDataOptions {
 }
 
 export default () => {
+  const { shiftKeyState } = storeToRefs(useKeyboardStore())
+
   const { createTextElement, createImageElement } = useCreateElement()
   const { addElementsFromData, addSlidesFromData } = useAddSlidesOrElements()
 
@@ -47,17 +52,31 @@ export default () => {
 
     // 普通文本
     else if (!onlyElements && !onlySlide) {
-      // 尝试检查是否为SVG代码
-      const isSVG = isSVGString(clipboardData)
-      if (isSVG) {
-        const file = svg2File(clipboardData)
-        getImageDataURL(file).then(dataURL => createImageElement(dataURL))
-      }
       // 普通文字
-      else {
+      if (shiftKeyState.value) {
         const string = parseText2Paragraphs(clipboardData)
         createTextElementFromClipboard(string)
       }
+      else {
+        // 尝试检查是否为图片地址链接
+        if (isValidImgURL(clipboardData)) {
+          createImageElement(clipboardData)
+        }
+        // 尝试检查是否为超链接
+        else if (isValidURL(clipboardData)) {
+          createTextElementFromClipboard(`<a href="${clipboardData}" title="${clipboardData}" target="_blank">${clipboardData}</a>`)
+        }
+        // 尝试检查是否为SVG代码
+        else if (isSVGString(clipboardData)) {
+          const file = svg2File(clipboardData)
+          getImageDataURL(file).then(dataURL => createImageElement(dataURL))
+        }
+        // 普通文字
+        else {
+          const string = parseText2Paragraphs(clipboardData)
+          createTextElementFromClipboard(string)
+        }
+      }
     }
   }
 

src/utils/common.ts

@@ -14,4 +14,18 @@ export const fillDigit = (digit: number, len: number) => {
  */
 export const isPC = () => {
   return !navigator.userAgent.match(/(iPhone|iPod|iPad|Android|Mobile|BlackBerry|Symbian|Windows Phone)/i)
+}
+
+/**
+ * 判断URL字符串
+ */
+export const isValidURL = (url: string) => {
+  return /^(https?:\/\/)([\w-]+\.)+[\w-]{2,}(\/[\w-./?%&=]*)?$/i.test(url)
+}
+
+/**
+ * 判断图片URL字符串
+ */
+export const isValidImgURL = (url: string) => {
+  return /^(https?:\/\/)([\w-]+\.)+[\w-]{2,}(\/[\w-./?%&=]*)?\.(jpg|jpeg|png|svg|webp)(\?.*)?$/i.test(url)
 }

src/views/Editor/CanvasTool/index.vue

@@ -255,7 +255,7 @@ const toggleNotesPanel = () => {
 
     &.group-btn {
       width: auto;
-      margin-right: 4px;
+      margin-right: 5px;
 
       &:hover {
         background-color: #f3f3f3;