diff --git a/src/pages/Create/components/Editor/markdown.scss b/src/pages/Create/components/Editor/markdown.scss index 77d438a..47a4846 100644 --- a/src/pages/Create/components/Editor/markdown.scss +++ b/src/pages/Create/components/Editor/markdown.scss @@ -168,4 +168,11 @@ position: relative; cursor: not-allowed; } + + .douyin { + min-width: 320px; + min-height: 720px; + border-radius: 10px; + margin: 10px 0; + } } \ No newline at end of file diff --git a/src/pages/Create/components/Editor/plugins.tsx b/src/pages/Create/components/Editor/plugins.tsx index 29482c8..8b100ee 100644 --- a/src/pages/Create/components/Editor/plugins.tsx +++ b/src/pages/Create/components/Editor/plugins.tsx @@ -19,9 +19,54 @@ import 'katex/dist/katex.css'; import rehypeCallouts from 'rehype-callouts'; import 'rehype-callouts/theme/obsidian'; import { remarkMark } from 'remark-mark-highlight'; +import type { Plugin } from 'unified'; +import { visit } from 'unist-util-visit'; +import type { Element, Root } from 'hast'; + +const rehypeDouyinVideo: Plugin<[], Root> = () => { + return (tree) => { + visit(tree, 'element', (node: Element) => { + if (node.tagName === 'p') { + const link = node.children[0]; + if ( + link.type === 'element' && + link.tagName === 'a' && + link.properties?.href && + typeof link.properties.href === 'string' + ) { + const match = /(?:ixigua\.com|douyin\.com)\/(\d+)/.exec(link.properties.href); + if (match) { + const videoId = match[1]; + const wrapperDiv = { + type: 'element', + tagName: 'div', + properties: { + className: 'flex justify-center' + }, + children: [{ + type: 'element', + tagName: 'iframe', + properties: { + src: `https://open.douyin.com/player/video?vid=${videoId}&autoplay=0`, + referrerPolicy: 'unsafe-url', + allowFullScreen: true, + className: 'douyin' + }, + children: [] + }] + }; + + Object.assign(node, wrapperDiv); + } + } + } + }); + }; +}; const videos = (): BytemdPlugin => { return { + rehype: (processor) => processor.use(rehypeDouyinVideo), actions: [ { title: '视频',