完成插入视频功能

src/pages/Create/components/Editor/icon/video.svg

@@ -0,0 +1 @@
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M4 19V5H9.58579L11.5858 7H20V19H4ZM21 5H12.4142L10.4142 3H3C2.44772 3 2 3.44772 2 4V20C2 20.5523 2.44772 21 3 21H21C21.5523 21 22 20.5523 22 20V6C22 5.44772 21.5523 5 21 5ZM15.0008 12.667L10.1219 9.41435C10.0562 9.37054 9.979 9.34717 9.9 9.34717C9.6791 9.34717 9.5 9.52625 9.5 9.74717V16.2524C9.5 16.3314 9.5234 16.4086 9.5672 16.4743C9.6897 16.6581 9.9381 16.7078 10.1219 16.5852L15.0008 13.3326C15.0447 13.3033 15.0824 13.2656 15.1117 13.2217C15.2343 13.0379 15.1846 12.7895 15.0008 12.667Z"></path></svg>

src/pages/Create/components/Editor/plugins.tsx

@@ -1,3 +1,6 @@
+import { Modal, Input, message } from 'antd';
+
+import videoSvg from "./icon/video.svg?raw";
 import markerSvg from './icon/marker.svg?raw';
 import calloutSvg from './icon/callout.svg?raw';
 import noteSvg from './icon/note.svg?raw';
@@ -17,6 +20,45 @@ import rehypeCallouts from 'rehype-callouts';
 import 'rehype-callouts/theme/obsidian';
 import { remarkMark } from 'remark-mark-highlight';
 
+const videos = (): BytemdPlugin => {
+  return {
+    actions: [
+      {
+        title: '视频',
+        icon: videoSvg,
+        handler: {
+          type: 'action',
+          click: (ctx) => {
+            let videoUrl = '';
+
+            Modal.info({
+              title: '插入视频',
+              content: <Input placeholder="请输入视频链接" onChange={(e) => videoUrl = e.target.value.trim()} />,
+              cancelText: '取消',
+              okText: '确认',
+              onOk: () => {
+                if (!videoUrl) {
+                  message.error('请输入视频链接');
+                  return Promise.reject();
+                }
+
+                if (!/^https?:\/\//i.test(videoUrl)) {
+                  message.error('视频链接必须以 http:// 或 https:// 开头');
+                  return Promise.reject();
+                }
+                
+                ctx.appendBlock(`[jvideo](${videoUrl})`);
+              },
+              maskClosable: true,
+              keyboard: true
+            });
+          }
+        }
+      }
+    ]
+  }
+}
+
 const markers = (): BytemdPlugin => {
   return {
     remark: (processor) => processor.use(remarkMark),
@@ -43,6 +85,7 @@ const callouts = (): BytemdPlugin => {
     { title: 'Check', icon: checkSvg, blockType: '[!CHECK]' },
     { title: 'Danger', icon: dangerSvg, blockType: '[!DANGER]' }
   ];
+
   return {
     rehype: (processor) => processor.use(rehypeCallouts),
     actions: [
@@ -67,6 +110,7 @@ const callouts = (): BytemdPlugin => {
 }
 
 export default [
+  videos(),
   gfm({ singleTilde: false }),
   markers(),
   gemoji(),

src/pages/CreateRecord/index.tsx

@@ -85,8 +85,10 @@ export default () => {
                         message.warning('最多只能上传 4 张图片');
                         return;
                     }
+
                     let inputUrl = '';
-                    Modal.confirm({
+
+                    Modal.info({
                         title: '输入图片链接',
                         content: (
                             <Input
@@ -104,6 +106,7 @@ export default () => {
                                 message.error('链接必须以 http:// 或 https:// 开头');
                                 return Promise.reject();
                             }
+                            
                             setImageList([...imageList, inputUrl]);
                             return Promise.resolve();
                         }