- 
- 
+
+
+ 
+ 
+ 
+ 
+
+
+ 
+
- 
-
- 
-
- )}
- {/* E 文章封面 */}
-
- {/* S 文章元信息 */}
-
-
- {/* E 文章元信息 */}
-
- {/* S 文章内容 */}
- {article.title}
-
-
- {t('publishAt')}
-
- {/* S 文章版权 */}
-
- {/* E 文章脚部 */}
-
- {t('publishAt')}
-
- {/* E 文章版权 */}
-
- {/* S 文章标签 */}
- {article.tags && article.tags.length ? (
-
- {article.tags.map((tag) => {
- return (
-
- ) : null}
- {/* E 文章标签 */}
-
-
- );
- })}
-
-
-
-
- 
-
-- 通过 WeChat 联系，可通过搜素微信号 \`red_tea_v2\` 或扫码加入 ，并备注来源。
-
-- 通过 GitHub Discussions 提问时，建议使用 \`Q&A\` 标签。
-
-- 通过 Stack Overflow 或者 Segment Fault 提问时，建议加上 \`reactpress\` 标签。
-
-
-1. [GitHub Discussions](https://github.com/ant-design/ant-design/discussions)
-2. [Stack Overflow](http://stackoverflow.com/questions/tagged/antd)（英文）
-3. [Segment Fault](https://segmentfault.com/t/antd)（中文）
-`;
diff --git a/client/src/components/Editor/MonacoEditor.tsx b/client/src/components/Editor/MonacoEditor.tsx
deleted file mode 100644
index d1b21467..00000000
--- a/client/src/components/Editor/MonacoEditor.tsx
+++ /dev/null
@@ -1,205 +0,0 @@
-import Editor, { loader } from '@monaco-editor/react';
-import { message, Spin } from 'antd';
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
-
-import { FileProvider } from '@/providers/file';
-
-import { registerScollListener, removeScrollListener, subjectScrollListener } from './utils/syncScroll';
-
-const IMG_REXEXP = /^image\/(png|jpg|jpeg|gif)$/i;
-
-const MonacoEditorOptions = {
- language: 'markdown',
- automaticLayout: true,
- wordWrap: 'on',
- theme: 'vs',
- minimap: {
- enabled: false,
- },
- scrollBeyondLastLine: false,
- scrollbar: {
- useShadows: false,
- vertical: 'visible',
- horizontal: 'visible',
- verticalScrollbarSize: 6,
- horizontalScrollbarSize: 6,
- },
-} as any;
-
-
-// solve jsdelivr cdn load error
-loader.config({
- paths: {
- vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.31.1/min/vs"
- }
-});
-
-const _MonacoEditor = (props, ref) => {
- const { defaultValue, onMount, onChange, onSave } = props;
- const container = useRef(null);
- const monacoRef = useRef(null);
- const editorRef = useRef(null);
- const [mounted, setMounted] = useState(false);
-
- const registerChange = useCallback(() => {
- editorRef.current.onDidChangeModelContent(() => {
- const content = editorRef.current.getValue();
- onChange(content);
- });
- }, [onChange]);
-
- const registerScroll = useCallback(() => {
- editorRef.current.onDidScrollChange(
- registerScollListener('editor', () => {
- const top =
- editorRef.current.getScrollTop() /
- (editorRef.current.getContentHeight() - editorRef.current.getLayoutInfo().height);
- return {
- id: 'editor-scroll',
- top: top,
- left: editorRef.current.getScrollLeft(),
- };
- })
- );
- }, []);
-
- const registerSave = useCallback(() => {
- // eslint-disable-next-line no-bitwise
- editorRef.current.addCommand(monacoRef.current.KeyMod.CtrlCmd | monacoRef.current.KeyCode.KEY_S, () => {
- onSave(editorRef.current.getValue());
- });
- }, [onSave]);
-
- const notifyMounted = useCallback(() => {
- window.postMessage(
- {
- id: 'editor-mounted',
- },
- window.location.href
- );
- }, []);
-
- const handleEditorDidMount = useCallback(
- (editor, monaco) => {
- monacoRef.current = monaco;
- editorRef.current = editor;
- registerScroll();
- registerChange();
- registerSave();
- notifyMounted();
- setMounted(true);
- onMount && onMount();
- },
- [onMount, registerScroll, registerChange, registerSave, notifyMounted]
- );
-
- useImperativeHandle(ref, () => ({
- editor: editorRef.current,
- monaco: monacoRef.current,
- }));
-
- useEffect(() => {
- if (!mounted) {
- return undefined;
- }
- const listener = ({ top, left }) => {
- editorRef.current.setScrollTop(top * editorRef.current.getContentHeight());
- editorRef.current.setScrollLeft(left);
- };
- subjectScrollListener('editor', 'preview', listener);
- return () => {
- removeScrollListener('preview', listener);
- };
- }, [mounted]);
-
- useEffect(() => {
- if (!mounted || !editorRef.current) {
- return;
- }
- editorRef.current.setValue(defaultValue);
- }, [mounted, defaultValue]);
-
- useEffect(() => {
- if (!mounted) {
- return undefined;
- }
-
- const editor = editorRef.current;
- const clearRef = {
- current: () => {
- return undefined;
- },
- };
- editor.onDidPaste((e) => {
- const pastePosition = e.range;
- const delta = [
- {
- range: new monacoRef.current.Range(
- pastePosition.startLineNumber,
- pastePosition.startColumn,
- pastePosition.endLineNumber,
- pastePosition.endColumn
- ),
- text: ``,
- },
- ];
- clearRef.current = () => {
- editor.executeEdits('', delta);
- };
- });
-
- const onPaste = async (e) => {
- const selection = editor.getSelection();
- const items = e.clipboardData.items;
- const imgFiles = (Array.from(items) as [DataTransferItem])
- .filter((item) => item.type.match(IMG_REXEXP))
- .map((item) => item.getAsFile());
- if (!imgFiles.length) {
- return;
- }
- const hide = message.loading('正在上传图片中', 0);
- const upload = (file) => {
- return FileProvider.uploadFile(file, 1).then(({ url }) => {
- const delta = [
- {
- range: new monacoRef.current.Range(
- selection.endLineNumber,
- selection.endColumn,
- selection.endLineNumber,
- selection.endColumn
- ),
- text: ``,
- },
- ];
- editor.executeEdits('', delta);
- const { endLineNumber, endColumn } = editor.getSelection();
- editor.setPosition({ lineNumber: endLineNumber, column: endColumn });
- });
- };
- await Promise.all(imgFiles.map(upload));
- hide();
- clearRef.current();
- };
-
- window.addEventListener('paste', onPaste);
-
- return () => {
- window.removeEventListener('paste', onPaste);
- };
- }, [mounted]);
-
- return (
- 
-