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,9 +52,22 @@ export default () => {
 
     // 普通文本
     else if (!onlyElements && !onlySlide) {
+      // 普通文字
+      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代码
-      const isSVG = isSVGString(clipboardData)
+        else if (isSVGString(clipboardData)) {
-      if (isSVG) {
           const file = svg2File(clipboardData)
           getImageDataURL(file).then(dataURL => createImageElement(dataURL))
         }
@@ -60,6 +78,7 @@ export default () => {
         }
       }
     }
+  }
 
   return {
     pasteTextClipboardData,

src/utils/common.ts

@@ -15,3 +15,17 @@ 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;