From 5a24639b69dcf2fb00895fa9ce2a396191313378 Mon Sep 17 00:00:00 2001 From: liushuang Date: Tue, 6 Aug 2024 10:13:26 +0800 Subject: [PATCH] =?UTF-8?q?=E7=A6=81=E7=94=A8=E6=89=93=E5=BC=80=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E6=97=B6=E5=BC=B9=E7=AA=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 1 + src/App.js | 167 +++++++++++++++++--------- src/component/Dialog/VersionDialog.js | 69 ++++++----- 3 files changed, 152 insertions(+), 85 deletions(-) diff --git a/.gitignore b/.gitignore index 373ca3f..d092e65 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ # Node dependencies node_modules +build # Logs logs diff --git a/src/App.js b/src/App.js index 4aa76a6..1e26954 100644 --- a/src/App.js +++ b/src/App.js @@ -1,9 +1,9 @@ -import React, {Component} from "react"; +import React, { Component } from "react"; import CodeMirror from "@uiw/react-codemirror"; import "codemirror/addon/search/searchcursor"; import "codemirror/keymap/sublime"; import "antd/dist/antd.css"; -import {observer, inject} from "mobx-react"; +import { observer, inject } from "mobx-react"; import classnames from "classnames"; import throttle from "lodash.throttle"; @@ -25,13 +25,17 @@ import { IMAGE_HOSTING_NAMES, IMAGE_HOSTING_TYPE, MJX_DATA_FORMULA, - MJX_DATA_FORMULA_TYPE, + MJX_DATA_FORMULA_TYPE } from "./utils/constant"; -import {markdownParser, markdownParserWechat, updateMathjax} from "./utils/helper"; +import { + markdownParser, + markdownParserWechat, + updateMathjax +} from "./utils/helper"; import pluginCenter from "./utils/pluginCenter"; import appContext from "./utils/appContext"; -import {uploadAdaptor} from "./utils/imageHosting"; -import bindHotkeys, {betterTab, rightClick} from "./utils/hotkey"; +import { uploadAdaptor } from "./utils/imageHosting"; +import bindHotkeys, { betterTab, rightClick } from "./utils/hotkey"; @inject("content") @inject("navbar") @@ -46,7 +50,7 @@ class App extends Component { this.scale = 1; this.handleUpdateMathjax = throttle(updateMathjax, 1500); this.state = { - focus: false, + focus: false }; } @@ -60,25 +64,25 @@ class App extends Component { tex: { inlineMath: [["$", "$"]], displayMath: [["$$", "$$"]], - tags: "ams", + tags: "ams" }, svg: { - fontCache: "none", + fontCache: "none" }, options: { renderActions: { addMenu: [0, "", ""], addContainer: [ 190, - (doc) => { + doc => { for (const math of doc.math) { this.addContainer(math, doc); } }, - this.addContainer, - ], - }, - }, + this.addContainer + ] + } + } }; // eslint-disable-next-line require("mathjax/es5/tex-svg-full"); @@ -98,7 +102,10 @@ class App extends Component { componentWillUnmount() { document.removeEventListener("fullscreenchange", this.solveScreenChange); - document.removeEventListener("webkitfullscreenchange", this.solveScreenChange); + document.removeEventListener( + "webkitfullscreenchange", + this.solveScreenChange + ); document.removeEventListener("mozfullscreenchange", this.solveScreenChange); document.removeEventListener("MSFullscreenChange", this.solveScreenChange); } @@ -107,7 +114,15 @@ class App extends Component { if (this.props.useImageHosting === undefined) { return; } - const {url, name, isSmmsOpen, isQiniuyunOpen, isAliyunOpen, isGiteeOpen, isGitHubOpen} = this.props.useImageHosting; + const { + url, + name, + isSmmsOpen, + isQiniuyunOpen, + isAliyunOpen, + isGiteeOpen, + isGitHubOpen + } = this.props.useImageHosting; if (name) { this.props.imageHosting.setHostingUrl(url); this.props.imageHosting.setHostingName(name); @@ -149,7 +164,7 @@ class App extends Component { }; setEditorContent = () => { - const {defaultText} = this.props; + const { defaultText } = this.props; if (defaultText) { this.props.content.setContent(defaultText); } @@ -160,20 +175,23 @@ class App extends Component { } solveScreenChange = () => { - const {isImmersiveEditing} = this.props.view; + const { isImmersiveEditing } = this.props.view; this.props.view.setImmersiveEditing(!isImmersiveEditing); }; - getInstance = (instance) => { + getInstance = instance => { instance.editor.on("inputRead", function(cm, event) { if (event.origin === "paste") { var text = event.text[0]; // pasted string var new_text = ""; // any operations here cm.refresh(); - const {length} = cm.getSelections(); + const { length } = cm.getSelections(); // my first idea was // note: for multiline strings may need more complex calculations - cm.replaceRange(new_text, event.from, {line: event.from.line, ch: event.from.ch + text.length}); + cm.replaceRange(new_text, event.from, { + line: event.from.line, + ch: event.from.ch + text.length + }); // first solution did'nt work (before i guess to call refresh) so i tried that way, works too if (length === 1) { cm.execCommand("undo"); @@ -189,11 +207,15 @@ class App extends Component { handleScroll = () => { if (this.props.navbar.isSyncScroll) { - const {markdownEditor} = this.props.content; + const { markdownEditor } = this.props.content; const cmData = markdownEditor.getScrollInfo(); const editorToTop = cmData.top; const editorScrollHeight = cmData.height - cmData.clientHeight; - this.scale = (this.previewWrap.offsetHeight - this.previewContainer.offsetHeight + 55) / editorScrollHeight; + this.scale = + (this.previewWrap.offsetHeight - + this.previewContainer.offsetHeight + + 55) / + editorScrollHeight; if (this.index === 1) { this.previewContainer.scrollTop = editorToTop * this.scale; } else { @@ -203,7 +225,7 @@ class App extends Component { } }; - handleChange = (editor) => { + handleChange = editor => { if (this.state.focus) { const content = editor.getValue(); this.props.content.setContent(content); @@ -211,21 +233,21 @@ class App extends Component { } }; - handleFocus = (editor) => { + handleFocus = editor => { this.setState({ - focus: true, + focus: true }); this.props.onTextFocus && this.props.onTextFocus(editor.getValue()); }; - handleBlur = (editor) => { + handleBlur = editor => { this.setState({ - focus: false, + focus: false }); this.props.onTextBlur && this.props.onTextBlur(editor.getValue()); }; - getStyleInstance = (instance) => { + getStyleInstance = instance => { if (instance) { this.styleEditor = instance.editor; this.styleEditor.on("keyup", (cm, e) => { @@ -244,7 +266,10 @@ class App extends Component { } for (let i = 0; i < e.dataTransfer.files.length; i++) { // console.log(e.dataTransfer.files[i]); - uploadAdaptor({file: e.dataTransfer.files[i], content: this.props.content}); + uploadAdaptor({ + file: e.dataTransfer.files[i], + content: this.props.content + }); } }; @@ -252,21 +277,24 @@ class App extends Component { const cbData = e.clipboardData; const insertPasteContent = (cm, content) => { - const {length} = cm.getSelections(); + const { length } = cm.getSelections(); cm.replaceSelections(Array(length).fill(content)); this.setState( { - focus: true, + focus: true }, () => { this.handleChange(cm); - }, + } ); }; if (e.clipboardData && e.clipboardData.files) { for (let i = 0; i < e.clipboardData.files.length; i++) { - uploadAdaptor({file: e.clipboardData.files[i], content: this.props.content}); + uploadAdaptor({ + file: e.clipboardData.files[i], + content: this.props.content + }); } } @@ -289,18 +317,29 @@ class App extends Component { addContainer(math, doc) { const tag = "span"; - const spanClass = math.display ? "span-block-equation" : "span-inline-equation"; + const spanClass = math.display + ? "span-block-equation" + : "span-inline-equation"; const cls = math.display ? "block-equation" : "inline-equation"; math.typesetRoot.className = cls; math.typesetRoot.setAttribute(MJX_DATA_FORMULA, math.math); math.typesetRoot.setAttribute(MJX_DATA_FORMULA_TYPE, cls); - math.typesetRoot = doc.adaptor.node(tag, {class: spanClass, style: "cursor:pointer"}, [math.typesetRoot]); + math.typesetRoot = doc.adaptor.node( + tag, + { class: spanClass, style: "cursor:pointer" }, + [math.typesetRoot] + ); } render() { - const {codeNum, previewType} = this.props.navbar; - const {isEditAreaOpen, isPreviewAreaOpen, isStyleEditorOpen, isImmersiveEditing} = this.props.view; - const {isSearchOpen} = this.props.dialog; + const { codeNum, previewType } = this.props.navbar; + const { + isEditAreaOpen, + isPreviewAreaOpen, + isStyleEditorOpen, + isImmersiveEditing + } = this.props.view; + const { isSearchOpen } = this.props.dialog; const parseHtml = codeNum === 0 @@ -310,38 +349,48 @@ class App extends Component { const mdEditingClass = classnames({ "nice-md-editing": !isImmersiveEditing, "nice-md-editing-immersive": isImmersiveEditing, - "nice-md-editing-hide": !isEditAreaOpen, + "nice-md-editing-hide": !isEditAreaOpen }); const styleEditingClass = classnames({ "nice-style-editing": true, - "nice-style-editing-hide": isImmersiveEditing, + "nice-style-editing-hide": isImmersiveEditing }); const richTextClass = classnames({ "nice-marked-text": true, "nice-marked-text-pc": previewType === "pc", - "nice-marked-text-hide": isImmersiveEditing || !isPreviewAreaOpen, + "nice-marked-text-hide": isImmersiveEditing || !isPreviewAreaOpen }); const richTextBoxClass = classnames({ "nice-wx-box": true, - "nice-wx-box-pc": previewType === "pc", + "nice-wx-box-pc": previewType === "pc" }); const textContainerClass = classnames({ "nice-text-container": !isImmersiveEditing, - "nice-text-container-immersive": isImmersiveEditing, + "nice-text-container-immersive": isImmersiveEditing }); return ( - {({defaultTitle, onStyleChange, onStyleBlur, onStyleFocus, token}) => ( + {({ + defaultTitle, + onStyleChange, + onStyleBlur, + onStyleFocus, + token + }) => (
-
this.setCurrentIndex(1, e)}> +
this.setCurrentIndex(1, e)} + > {isSearchOpen && }
-
this.setCurrentIndex(2, e)}> +
this.setCurrentIndex(2, e)} + >
{ + ref={node => { this.previewContainer = node; }} >
{ + ref={node => { this.previewWrap = node; }} /> @@ -392,7 +445,11 @@ class App extends Component { {isStyleEditorOpen && (
- +
)} diff --git a/src/component/Dialog/VersionDialog.js b/src/component/Dialog/VersionDialog.js index 9eb5a27..f654fc1 100644 --- a/src/component/Dialog/VersionDialog.js +++ b/src/component/Dialog/VersionDialog.js @@ -1,8 +1,8 @@ -import React, {Component} from "react"; -import {observer, inject} from "mobx-react"; -import {Modal, Timeline, Button} from "antd"; +import React, { Component } from "react"; +import { observer, inject } from "mobx-react"; +import { Modal, Timeline, Button } from "antd"; import axios from "axios"; -import {NEWEST_VERSION} from "../../utils/constant"; +import { NEWEST_VERSION } from "../../utils/constant"; import SvgIcon from "../../icon"; import "./VersionDialog.css"; @@ -17,7 +17,7 @@ class VersionDialog extends Component { versionNumber: 0, versionTimeline: [], recommend: null, - specialInfo: "", + specialInfo: "" }; } @@ -31,7 +31,8 @@ class VersionDialog extends Component { handleMore = () => { const w = window.open("about:blank"); - w.location.href = "https://git.luckday.cn/Markdown2Html/master/CHANGELOG.md"; + w.location.href = + "https://git.luckday.cn/Markdown2Html/master/CHANGELOG.md"; }; handleDocs = () => { @@ -44,21 +45,26 @@ class VersionDialog extends Component { const data = { versionId: 1, versionNumber: "1.0.0", - versionTimeline: ["2023-09-20 增加网格黑主题", "2023-09-14 解决超链接文字复制到公众号颜色失效的问题", "2023-09-01 优化部分配置与信息", "2023-08-30 Fork 自 markdown2html"], + versionTimeline: [ + "2023-09-20 增加网格黑主题", + "2023-09-14 解决超链接文字复制到公众号颜色失效的问题", + "2023-09-01 优化部分配置与信息", + "2023-08-30 Fork 自 markdown2html" + ], recommend: { link: "https://github.com/shenweiyan/Knowledge-Garden", - mainInfo: "欢迎关注我的知识花园", + mainInfo: "欢迎关注我的知识花园" }, - specialInfo: '' + specialInfo: "" //specialInfo: // '
', }; const newestVersion = localStorage.getItem(NEWEST_VERSION); if (data.versionNumber !== newestVersion) { - this.props.dialog.setVersionOpen(true); + // this.props.dialog.setVersionOpen(true); localStorage.setItem(NEWEST_VERSION, data.versionNumber); } - this.setState({...data}); + this.setState({ ...data }); } catch (err) { console.error("读取最新版本信息错误"); } @@ -74,24 +80,27 @@ class VersionDialog extends Component { footer={[ , + ]} destroyOnClose > - }> - 更多版本更新与说明信息请查看 - - 这里 - - + } + > + + 更多版本更新与说明信息请查看 + + 这里 + + {this.state.versionTimeline.map((version, index) => { /*if (index === 0) { @@ -109,7 +118,7 @@ class VersionDialog extends Component { 了解更多，请查看 }> )} @@ -148,8 +157,8 @@ class VersionDialog extends Component { const style = { svgIcon: { width: "16px", - height: "16px", - }, + height: "16px" + } }; export default VersionDialog;