禁用打开页面时弹窗

2024-08-06 10:13:26 +08:00 · 2024-08-06 10:13:26 +08:00 · 5a24639b69
commit 5a24639b69
parent 200e9d06bb
3 changed files with 152 additions and 85 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,5 +1,6 @@
 # Node dependencies
 node_modules
+build

 # Logs
 logs
--- a/src/App.js
+++ b/src/App.js
@ -25,9 +25,13 @@ 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";
@ -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);
@ -164,7 +179,7 @@ class App extends Component {
    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
@ -173,7 +188,10 @@ class App extends Component {
        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");
@ -193,7 +211,11 @@ class App extends Component {
      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
+      });
    }
  };

@ -256,17 +281,20 @@ class App extends Component {
      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,17 +317,28 @@ 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 {
+      isEditAreaOpen,
+      isPreviewAreaOpen,
+      isStyleEditorOpen,
+      isImmersiveEditing
+    } = this.props.view;
    const { isSearchOpen } = this.props.dialog;

    const parseHtml =
@ -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 (
      <appContext.Consumer>
-        {({defaultTitle, onStyleChange, onStyleBlur, onStyleFocus, token}) => (
+        {({
+          defaultTitle,
+          onStyleChange,
+          onStyleBlur,
+          onStyleFocus,
+          token
+        }) => (
          <div className="nice-app">
            <Navbar title={defaultTitle} token={token} />
            <Toobar token={token} />
            <div className={textContainerClass}>
-              <div id="nice-md-editor" className={mdEditingClass} onMouseOver={(e) => this.setCurrentIndex(1, e)}>
+              <div
+                id="nice-md-editor"
+                className={mdEditingClass}
+                onMouseOver={e => this.setCurrentIndex(1, e)}
+              >
                {isSearchOpen && <SearchBox />}
                <CodeMirror
                  value={this.props.content.content}
@ -354,8 +403,8 @@ class App extends Component {
                    extraKeys: {
                      ...bindHotkeys(this.props.content, this.props.dialog),
                      Tab: betterTab,
-                      RightClick: rightClick,
-                    },
+                      RightClick: rightClick
+                    }
                  }}
                  onChange={this.handleChange}
                  onScroll={this.handleScroll}
@ -366,24 +415,28 @@ class App extends Component {
                  ref={this.getInstance}
                />
              </div>
-              <div id="nice-rich-text" className={richTextClass} onMouseOver={(e) => this.setCurrentIndex(2, e)}>
+              <div
+                id="nice-rich-text"
+                className={richTextClass}
+                onMouseOver={e => this.setCurrentIndex(2, e)}
+              >
                <Sidebar />
                <div
                  id={BOX_ID}
                  className={richTextBoxClass}
                  onScroll={this.handleScroll}
-                  ref={(node) => {
+                  ref={node => {
                    this.previewContainer = node;
                  }}
                >
                  <section
                    id={LAYOUT_ID}
-                    data-tool="markdown2wechat编辑器"
-                    data-website="https://aizhuanqian.com"
+                    data-tool="markdown2html编辑器"
+                    data-website="https://md.luckday.cn"
                    dangerouslySetInnerHTML={{
-                      __html: parseHtml,
+                      __html: parseHtml
                    }}
-                    ref={(node) => {
+                    ref={node => {
                      this.previewWrap = node;
                    }}
                  />
@ -392,7 +445,11 @@ class App extends Component {

              {isStyleEditorOpen && (
                <div id="nice-style-editor" className={styleEditingClass}>
-                  <StyleEditor onStyleChange={onStyleChange} onStyleBlur={onStyleBlur} onStyleFocus={onStyleFocus} />
+                  <StyleEditor
+                    onStyleChange={onStyleChange}
+                    onStyleBlur={onStyleBlur}
+                    onStyleFocus={onStyleFocus}
+                  />
                </div>
              )}

--- a/src/component/Dialog/VersionDialog.js
+++ b/src/component/Dialog/VersionDialog.js
@ -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,18 +45,23 @@ 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:
        //  '<div style="display:flex;justify-content:center;align-items:center;"><img style="width:50%;" src="http://md.aizhuanqian.online/img/wechat_qr.df324554.jpeg"/></div>',
      };
      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 });
@ -74,13 +80,16 @@ class VersionDialog extends Component {
        footer={[
          <Button key="submit" type="primary" onClick={this.handleOk}>
            确认
-          </Button>,
+          </Button>
        ]}
        destroyOnClose
      >
        <Timeline>
-          <Timeline.Item dot={<SvgIcon name="environment" style={style.svgIcon} />}>
-              <strong>更多版本更新与说明信息请查看
+          <Timeline.Item
+            dot={<SvgIcon name="environment" style={style.svgIcon} />}
+          >
+            <strong>
+              更多版本更新与说明信息请查看
              <a
                id="more-info"
                style={{ fontWeight: "bold", borderBottom: "solid" }}
@ -148,8 +157,8 @@ class VersionDialog extends Component {
 const style = {
  svgIcon: {
    width: "16px",
-    height: "16px",
-  },
+    height: "16px"
+  }
 };

 export default VersionDialog;