ronds-metadata 1.1.46 → 1.1.48

package/es/comps/MdNavbar/index.d.ts

@@ -0,0 +1,13 @@
+import './index.less';
+interface IMdNavbarProps {
+    source: string;
+    ordered?: boolean;
+    headingTopOffset?: number;
+    updateHashAuto?: boolean;
+    declarative?: boolean;
+    className?: string;
+    onNavItemClick?: (event: any, element: HTMLDivElement, hashValue: string) => void;
+    onHashChange?: (newHash: string, oldHash: string) => void;
+}
+declare const MdNavbar: (props: IMdNavbarProps) => JSX.Element;
+export default MdNavbar;

package/es/comps/MdNavbar/index.js

@@ -0,0 +1,164 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+
+/*
+ * @Author: wangxian
+ * @Date: 2022-10-14 09:05:50
+ * @LastEditTime: 2022-10-14 10:55:42
+ */
+import React from 'react';
+import { getCurrentHashValue, trimArrZero } from './utils';
+import './index.less';
+
+var MdNavbar = function MdNavbar(props) {
+  var source = props.source,
+      ordered = props.ordered,
+      declarative = props.declarative,
+      className = props.className,
+      onNavItemClick = props.onNavItemClick,
+      onHashChange = props.onHashChange;
+
+  var _React$useState = React.useState(''),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      currentListNo = _React$useState2[0],
+      setCurrentListNo = _React$useState2[1];
+
+  var scrollTimeoutRef = React.useRef();
+  var addTargetTimeoutRef = React.useRef();
+  var navStructure = React.useMemo(function () {
+    var contentWithoutCode = source.replace(/^[^#]+\n/g, '').replace(/(?:[^\n#]+)#+\s([^#\n]+)\n*/g, '') // 匹配行内出现 # 号的情况
+    .replace(/^#\s[^#\n]*\n+/, '').replace(/```[^`\n]*\n+[^```]+```\n+/g, '').replace(/`([^`\n]+)`/g, '$1').replace(/\*\*?([^*\n]+)\*\*?/g, '$1').replace(/__?([^_\n]+)__?/g, '$1').trim();
+    var pattOfTitle = /#+\s([^#\n]+)\n*/g;
+    var matchResult = contentWithoutCode.match(pattOfTitle);
+
+    if (!matchResult) {
+      return [];
+    }
+
+    var navData = matchResult.map(function (r, i) {
+      return {
+        index: i,
+        level: r.match(/^#+/g)[0].length,
+        text: r.replace(pattOfTitle, '$1')
+      };
+    });
+    var maxLevel = 0;
+    navData.forEach(function (t) {
+      if (t.level > maxLevel) {
+        maxLevel = t.level;
+      }
+    });
+    var matchStack = []; // 此部分重构，原有方法会出现次级标题后再次出现高级标题时，listNo重复的bug
+
+    for (var i = 0; i < navData.length; i++) {
+      var t = navData[i];
+      var level = t.level;
+
+      while (matchStack.length && matchStack[matchStack.length - 1].level > level) {
+        matchStack.pop();
+      }
+
+      if (matchStack.length === 0) {
+        var _arr = new Array(maxLevel).fill(0);
+
+        _arr[level - 1] += 1;
+        matchStack.push({
+          level: level,
+          arr: _arr
+        });
+        t.listNo = trimArrZero(_arr).join('.');
+        continue;
+      }
+
+      var arr = matchStack[matchStack.length - 1].arr;
+      var newArr = arr.slice();
+      newArr[level - 1] += 1;
+      matchStack.push({
+        level: level,
+        arr: newArr
+      });
+      t.listNo = trimArrZero(newArr).join('.');
+    }
+
+    return navData;
+  }, [source]);
+  var initHeadingsId = React.useCallback(function () {
+    var headingId = decodeURIComponent(declarative ? window.location.hash.replace(/^#/, '').trim() : (window.location.hash.match(/heading-\d+/g) || [])[0]);
+    navStructure.forEach(function (t) {
+      var headings = document.querySelectorAll("h".concat(t.level));
+      var curHeading = Array.prototype.slice.apply(headings).find(function (h) {
+        return h.innerText.trim() === t.text.trim() && (!h.dataset || !h.dataset.id);
+      });
+
+      if (curHeading) {
+        curHeading.dataset.id = declarative ? "".concat(t.listNo, "-").concat(t.text) : "heading-".concat(t.index);
+
+        if (headingId && headingId === curHeading.dataset.id) {
+          scrollToTarget(headingId);
+          setCurrentListNo(t.listNo);
+        }
+      }
+    });
+  }, []);
+  var refreshNav = React.useCallback(function () {
+    if (addTargetTimeoutRef.current) {
+      clearTimeout(addTargetTimeoutRef.current);
+    }
+
+    addTargetTimeoutRef.current = setTimeout(function () {
+      initHeadingsId();
+
+      if (navStructure.length) {
+        var listNo = navStructure[0].listNo;
+        setCurrentListNo(listNo);
+      }
+    }, 500);
+  }, []);
+  React.useEffect(function () {
+    if (navStructure) {
+      refreshNav();
+    }
+  }, [navStructure]);
+
+  var scrollToTarget = function scrollToTarget(dataId) {
+    if (scrollTimeoutRef.current) {
+      clearTimeout(scrollTimeoutRef.current);
+    }
+
+    scrollTimeoutRef.current = setTimeout(function () {
+      var target = document.querySelector("[data-id=\"".concat(dataId, "\"]"));
+
+      if (target) {
+        target.scrollIntoView({
+          block: 'start',
+          behavior: 'smooth'
+        });
+      }
+    }, 0);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "markdown-navigation ".concat(className)
+  }, navStructure.map(function (t) {
+    var cls = "title-anchor title-level".concat(t.level, " ").concat(currentListNo === t.listNo ? 'active' : '');
+    return /*#__PURE__*/React.createElement("div", {
+      className: cls,
+      onClick: function onClick(evt) {
+        var currentHash = declarative ? "".concat(t.listNo, "-").concat(t.text) // 加入listNo确保hash唯一ZZ
+        : "heading-".concat(t.index); // Avoid execution the callback `onHashChange` when clicking current nav item
+
+        if (t.listNo !== currentListNo) {
+          // Hash changing callback
+          onHashChange && onHashChange(currentHash, getCurrentHashValue());
+        } // Nav item clicking callback
+
+
+        onNavItemClick && onNavItemClick(evt, evt.target, currentHash);
+        scrollToTarget(currentHash);
+        setCurrentListNo(t.listNo);
+      },
+      key: "title_anchor_".concat(Math.random().toString(36).substring(2))
+    }, ordered ? /*#__PURE__*/React.createElement("small", null, t.listNo) : null, t.text);
+  })));
+};
+
+export default MdNavbar;

package/es/comps/MdNavbar/index.less

@@ -0,0 +1,77 @@
+.markdown-navigation {
+  font-size: 14px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Helvetica', 'Arial', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
+    'WenQuanYi Micro Hei', sans-serif;
+  width: 100%;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  scrollbar-width: 0;
+  width: 200px;
+}
+.markdown-navigation::-webkit-scrollbar {
+  width: 0;
+}
+
+.markdown-navigation .title-anchor {
+  display: block;
+  color: #bbb;
+  transition: all 0.2s;
+  margin: 0.8em 0;
+  font-weight: lighter;
+  line-height: 2em;
+  padding-right: 1.8em;
+  cursor: pointer;
+}
+
+.markdown-navigation .title-anchor:hover,
+.markdown-navigation .title-anchor.active {
+  background-color: #f8f8f8;
+  text-decoration: inherit;
+}
+
+.markdown-navigation .title-anchor.active {
+  color: #007fff;
+}
+
+.markdown-navigation .title-anchor small {
+  margin: 0 0.8em;
+}
+
+.markdown-navigation .title-level1 {
+  color: #000;
+  font-size: 1.2em;
+  padding-left: 1em;
+  font-weight: normal;
+}
+
+.markdown-navigation .title-level2 {
+  color: #000;
+  font-size: 1em;
+  padding-left: 1em;
+  font-weight: normal;
+}
+
+.markdown-navigation .title-level3 {
+  color: #000;
+  font-size: 0.8em;
+  padding-left: 3em;
+  font-weight: normal;
+}
+
+.markdown-navigation .title-level4 {
+  color: #000;
+  font-size: 0.72em;
+  padding-left: 5em;
+}
+
+.markdown-navigation .title-level5 {
+  color: #000;
+  font-size: 0.72em;
+  padding-left: 7em;
+}
+
+.markdown-navigation .title-level6 {
+  color: #000;
+  font-size: 0.72em;
+  padding-left: 9em;
+}

package/es/comps/MdNavbar/utils.d.ts

@@ -0,0 +1,3 @@
+export declare const getCurrentHashValue: () => string;
+export declare const trimArrZero: (arr: any[]) => any[];
+export declare const updateHash: (updateHashTimeout: any, value: string) => void;

package/es/comps/MdNavbar/utils.js

@@ -0,0 +1,34 @@
+/*
+ * @Author: wangxian
+ * @Date: 2022-10-14 10:03:03
+ * @LastEditTime: 2022-10-14 10:17:18
+ */
+export var getCurrentHashValue = function getCurrentHashValue() {
+  return decodeURIComponent(window.location.hash.replace(/^#/, ''));
+};
+export var trimArrZero = function trimArrZero(arr) {
+  var start, end;
+
+  for (start = 0; start < arr.length; start++) {
+    if (arr[start]) {
+      break;
+    }
+  }
+
+  for (end = arr.length - 1; end >= 0; end--) {
+    if (arr[end]) {
+      break;
+    }
+  }
+
+  return arr.slice(start, end + 1);
+};
+export var updateHash = function updateHash(updateHashTimeout, value) {
+  if (updateHashTimeout) {
+    clearTimeout(updateHashTimeout);
+  }
+
+  updateHashTimeout = setTimeout(function () {
+    window.history.replaceState({}, '', "".concat(window.location.pathname).concat(window.location.search, "#").concat(value));
+  }, 0);
+};

package/es/comps/MdView/index.d.ts

@@ -1,4 +1,3 @@
-import 'markdown-navbar/dist/navbar.css';
 import 'github-markdown-css';
 import './index.less';
 interface IMdViewProps {
@@ -10,6 +9,16 @@ interface IMdViewProps {
      * 是否显示导航
      */
     isMarkNav?: boolean;
+    navOptions?: {
+        /** Automatically update the hash value of browser address when page scrolling if true */
+        updateHashAuto?: boolean;
+        /** Use the text of the title from Markdown content as the hash value for the anchor if true */
+        declarative?: boolean;
+        /** The event callback function after clicking navbar item */
+        onNavItemClick?: (event: any, element: HTMLDivElement, hashValue: string) => void;
+        /** The event callback function before the hash value of browser address changing */
+        onHashChange?: (newHash: string, oldHash: string) => void;
+    };
 }
 declare const MdView: (props: IMdViewProps) => JSX.Element;
 export default MdView;

package/es/comps/MdView/index.js

@@ -1,22 +1,23 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
 
 /*
  * @Author: wangxian
  * @Date: 2022-09-02 16:17:38
- * @LastEditTime: 2022-10-09 10:41:55
+ * @LastEditTime: 2022-10-14 11:06:26
  */
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import rehypeRaw from 'rehype-raw';
-import MarkNav from 'markdown-navbar';
-import 'markdown-navbar/dist/navbar.css';
 import 'github-markdown-css';
 import './index.less';
+import MdNavbar from '../MdNavbar';
 
 var MdView = function MdView(props) {
   var source = props.source,
       _props$isMarkNav = props.isMarkNav,
-      isMarkNav = _props$isMarkNav === void 0 ? false : _props$isMarkNav;
+      isMarkNav = _props$isMarkNav === void 0 ? false : _props$isMarkNav,
+      navOptions = props.navOptions;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "react-mark-down",
     style: {
@@ -35,11 +36,11 @@ var MdView = function MdView(props) {
       padding: '10px',
       overflowY: 'auto'
     }
-  }, /*#__PURE__*/React.createElement(MarkNav, {
+  }, /*#__PURE__*/React.createElement(MdNavbar, _extends({
     className: "h-full w-full",
     source: source,
     ordered: true
-  }))));
+  }, navOptions)))));
 };
 
 export default MdView;

package/package.json

@@ -1,7 +1,7 @@
 {
   "public": true,
   "name": "ronds-metadata",
-  "version": "1.1.46",
+  "version": "1.1.48",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",