chore: update src iframe

src/components/menus/components/BubbleMenuIframe.tsx

@@ -15,10 +15,10 @@ import { deleteNode } from '@/utils/delete-node';
 
 export function BubbleMenuIframe({ editor }: any) {
   const { t } = useLocale();
-  const { width, height, url } = useAttributes<IIframeAttrs>(editor, Iframe.name, {
+  const { width, height, src } = useAttributes<IIframeAttrs>(editor, Iframe.name, {
     width: 0,
     height: 0,
-    url: '',
+    src: '',
     defaultShowPicker: false,
   });
   const [visible, toggleVisible] = useState(false);
@@ -30,16 +30,16 @@ export function BubbleMenuIframe({ editor }: any) {
 
   useEffect(() => {
     if (visible)
-      setFormUrl(url as any);
-  }, [visible, url]);
+      setFormUrl(src as any);
+  }, [visible, src]);
 
   const handleOk = useCallback(() => {
     const urlFormat = getServiceSrc(formUrl);
 
     editor
       .chain()
       .updateAttributes(Iframe.name, {
-        url: urlFormat?.src || formUrl,
+        src: urlFormat?.src || formUrl,
       })
       .setNodeSelection(editor.state.selection.from)
       .focus()
@@ -48,8 +48,8 @@ export function BubbleMenuIframe({ editor }: any) {
   }, [editor, formUrl, toggleVisible]);
 
   const visitLink = useCallback(() => {
-    window.open(url, '_blank');
-  }, [url]);
+    window.open(src, '_blank');
+  }, [src]);
 
   const openEditLinkModal = useCallback(() => {
     toggleVisible(true);
@@ -61,7 +61,7 @@ export function BubbleMenuIframe({ editor }: any) {
     },
     [editor],
   );
-  const shouldShow = useCallback(() => editor.isActive(Iframe.name) && !url, [editor, url]);
+  const shouldShow = useCallback(() => editor.isActive(Iframe.name) && !src, [editor, src]);
   const deleteMe = useCallback(() => deleteNode(Iframe.name, editor), [editor]);
 
   return (

src/extensions/Iframe/Iframe.ts

@@ -9,7 +9,7 @@ import { getDatasetAttribute } from '@/utils/dom-dataset';
 export interface IIframeAttrs {
   width?: number | string
   height?: number
-  url?: string
+  src?: string
   defaultShowPicker?: boolean
 }
 
@@ -70,9 +70,9 @@ export const Iframe = /* @__PURE__ */ Node.create({
         default: 300,
         parseHTML: getDatasetAttribute('height'),
       },
-      url: {
+      src: {
         default: null,
-        parseHTML: getDatasetAttribute('url'),
+        parseHTML: getDatasetAttribute('src'),
       },
       defaultShowPicker: {
         default: false,

src/extensions/Iframe/components/IframeNodeView.tsx

@@ -15,7 +15,7 @@ import styles from './index.module.scss';
 function IframeNodeView({ editor, node, updateAttributes }: any) {
   const isEditable = useEditableEditor();
 
-  const { url, width, height } = node.attrs;
+  const { src, width, height } = node.attrs;
   // const { width: maxWidth } = getEditorContainerDOMSize(editor)
 
   const [originalLink, setOriginalLink] = useState<string>('');
@@ -30,7 +30,7 @@ function IframeNodeView({ editor, node, updateAttributes }: any) {
     editor
       .chain()
       .updateAttributes(Iframe.name, {
-        url: urlFormat?.src || originalLink,
+        src: urlFormat?.src || originalLink,
       })
       .setNodeSelection(editor.state.selection.from)
       .focus()
@@ -46,7 +46,7 @@ function IframeNodeView({ editor, node, updateAttributes }: any) {
 
   return (
     <NodeViewWrapper>
-      {!url && (
+      {!src && (
         <div className="richtext-mx-auto richtext-my-[12px] richtext-flex richtext-max-w-[600px] richtext-items-center richtext-justify-center richtext-gap-[10px] richtext-rounded-[12px] richtext-border richtext-border-solid richtext-border-[#ccc] richtext-p-[10px]">
           <Input
             autoFocus
@@ -65,7 +65,7 @@ function IframeNodeView({ editor, node, updateAttributes }: any) {
         </div>
       )}
 
-      {url && (
+      {src && (
         <Resizable
           size={{ width: Number.parseInt(width), height: Number.parseInt(height) }}
           onResizeStop={(e, direction, ref, d) => {
@@ -81,7 +81,7 @@ function IframeNodeView({ editor, node, updateAttributes }: any) {
             >
               <iframe
                 className="richtext-my-[12px] "
-                src={url}
+                src={src}
               >
               </iframe>
             </div>

src/extensions/Iframe/embed.ts

@@ -436,53 +436,53 @@ export function getServiceSrc(originalLink: any) {
 
   // src
   switch (service) {
-  case 'youtube': {
-    return getYoutubeSrc(result);
-  }
-  case 'youku': {
-    return getYoukuSrc(result);
-  }
-  case 'bilibili': {
-    return getBilibiliSrc(result);
-  }
-  case 'qqvideo': {
-    return getQQVideoSrc(result);
-  }
-  case 'amap': {
-    return getAMapSrc(originalLink, result);
-  }
-  case 'baidu_map': {
-    return getBaiduMapSrc(originalLink, result);
-  }
-  case 'googlemaps': {
-    return getGoogleMapSrc(originalLink, result);
-  }
-  case 'modao': {
-    return getModaoSrc(result);
-  }
-  case 'lanhu': {
-    return getLanhuSrc(result);
-  }
-  case 'figma': {
-    return getFigmaSrc(result);
-  }
-  case 'canva': {
-    return getCanvaSrc(originalLink, result);
-  }
-  case 'processon': {
-    return getProcessonSrc(originalLink, result);
-  }
-  case 'codepen': {
-    return getCodepenSrc(result);
-  }
-  case 'jinshuju': {
-    return getJinshujuSrc(originalLink, result);
-  }
-  case 'iframe': {
-    return getCommonSrc(originalLink, result);
-  }
-  default: {
-    return originalLink;
-  }
+    case 'youtube': {
+      return getYoutubeSrc(result);
+    }
+    case 'youku': {
+      return getYoukuSrc(result);
+    }
+    case 'bilibili': {
+      return getBilibiliSrc(result);
+    }
+    case 'qqvideo': {
+      return getQQVideoSrc(result);
+    }
+    case 'amap': {
+      return getAMapSrc(originalLink, result);
+    }
+    case 'baidu_map': {
+      return getBaiduMapSrc(originalLink, result);
+    }
+    case 'googlemaps': {
+      return getGoogleMapSrc(originalLink, result);
+    }
+    case 'modao': {
+      return getModaoSrc(result);
+    }
+    case 'lanhu': {
+      return getLanhuSrc(result);
+    }
+    case 'figma': {
+      return getFigmaSrc(result);
+    }
+    case 'canva': {
+      return getCanvaSrc(originalLink, result);
+    }
+    case 'processon': {
+      return getProcessonSrc(originalLink, result);
+    }
+    case 'codepen': {
+      return getCodepenSrc(result);
+    }
+    case 'jinshuju': {
+      return getJinshujuSrc(originalLink, result);
+    }
+    case 'iframe': {
+      return getCommonSrc(originalLink, result);
+    }
+    default: {
+      return originalLink;
+    }
   }
 }