ronds-metadata 1.2.10 → 1.2.11

package/es/comps/JsonView/index.js

@@ -0,0 +1,109 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React from 'react';
+import './index.less';
+
+var JsonView = function JsonView(props) {
+  var json = props.json;
+
+  var _React$useState = React.useState(''),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      myJson = _React$useState2[0],
+      setMyJson = _React$useState2[1];
+
+  React.useEffect(function () {
+    try {
+      var textJson = JSON.parse(json);
+      var result = syntaxHighlight(JSON.stringify(textJson, undefined, 2));
+      setMyJson(result);
+    } catch (e) {
+      setMyJson('This is not right JSON');
+    } // eslint-disable-next-line
+
+  }, [json]); // JSON格式转化
+
+  var syntaxHighlight = function syntaxHighlight(_json) {
+    if (typeof json != 'string') {
+      _json = JSON.stringify(json, undefined, 2);
+    }
+
+    var index = 0;
+    _json = _json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
+    return _json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?|{|}|\[|\])/g, function (match) {
+      var cls = 'number';
+
+      if (/^"/.test(match)) {
+        if (/:$/.test(match)) {
+          cls = 'key';
+        } else {
+          cls = 'string';
+        }
+      } else if (/true|false/.test(match)) {
+        cls = 'boolean';
+      } else if (/null/.test(match)) {
+        cls = 'null';
+      } else if (/{/.test(match)) {
+        index = index + 1;
+        return "<i class=\"open\"></i><span class=\"Object{...}\">".concat(match);
+      } else if (/}/.test(match)) {
+        return "".concat(match, "</span>");
+      } else if (/\[/.test(match)) {
+        return "<i class=\"open\"></i><span class=\"Array\">".concat(match);
+      } else if (/\]/.test(match)) {
+        return "".concat(match, "</span>");
+      }
+
+      return "<span class='".concat(cls, "'>").concat(match, "</span>");
+    });
+  };
+
+  var onClickDom = function onClickDom(e) {
+    var target = e.target;
+
+    if (target.nodeName === 'I') {
+      if (target.className === 'open') {
+        target.className = 'close';
+        var dom = e.target.nextSibling;
+        dom.style.display = 'none';
+        var childNode = document.createElement('em');
+
+        if (dom.className === 'Array') {
+          var childrenList = dom.children;
+          var newList = [];
+
+          for (var i = 0; i < childrenList.length; i++) {
+            if (childrenList[i].nodeName === 'SPAN') {
+              newList.push(childrenList[i]);
+            }
+          }
+
+          childNode.innerHTML = "".concat(dom.className, "[<em style=\"color:#25aae2;\">").concat(newList.length, "</em>]");
+        } else {
+          childNode.innerHTML = dom.className;
+        }
+
+        e.target.parentNode.insertBefore(childNode, e.target.nextSibling);
+      } else if (target.className === 'close') {
+        e.target.parentNode.removeChild(e.target.nextSibling);
+        target.className = 'open';
+        var _dom = e.target.nextSibling;
+        _dom.style.display = '';
+      }
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '100%',
+      overflow: 'auto'
+    }
+  }, /*#__PURE__*/React.createElement("pre", {
+    onClick: function onClick(e) {
+      onClickDom(e);
+    },
+    dangerouslySetInnerHTML: {
+      __html: myJson
+    }
+  })));
+};
+
+export default JsonView;

package/es/comps/MdEdit/index.js

@@ -0,0 +1,41 @@
+/*
+ * @Author: your name
+ * @Date: 2021-12-15 15:29:51
+ * @LastEditTime: 2022-09-02 16:52:09
+ */
+import React from 'react';
+import MdEditor from 'react-markdown-editor-lite';
+import 'react-markdown-editor-lite/lib/index.css';
+import './index.less';
+import MdView from '../MdView';
+
+var MdEdit = function MdEdit(props) {
+  var value = props.value,
+      width = props.width,
+      height = props.height,
+      onChange = props.onChange,
+      onImageUpload = props.onImageUpload,
+      onCustomImageUpload = props.onCustomImageUpload;
+
+  var onValueChange = function onValueChange(v) {
+    onChange && onChange(v.text);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MdEditor, {
+    value: value,
+    onImageUpload: onImageUpload,
+    onCustomImageUpload: onCustomImageUpload,
+    style: {
+      width: "".concat(width, "px"),
+      height: "".concat(height, "px")
+    },
+    renderHTML: function renderHTML(text) {
+      return /*#__PURE__*/React.createElement(MdView, {
+        source: text
+      });
+    },
+    onChange: onValueChange
+  }));
+};
+
+export default MdEdit;

package/es/comps/MdNavbar/index.js

@@ -0,0 +1,180 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+
+/*
+ * @Author: wangxian
+ * @Date: 2022-10-14 09:05:50
+ * @LastEditTime: 2022-10-14 14:25:18
+ */
+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),
+      navStructure = _React$useState2[0],
+      setNavStructure = _React$useState2[1];
+
+  var navStructureRef = React.useRef([]);
+
+  var _React$useState3 = React.useState(''),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      currentListNo = _React$useState4[0],
+      setCurrentListNo = _React$useState4[1];
+
+  var scrollTimeoutRef = React.useRef();
+  var addTargetTimeoutRef = React.useRef();
+  var getNavStructure = React.useCallback(function () {
+    if (source) {
+      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('.');
+      }
+
+      setNavStructure(_toConsumableArray(navData));
+      navStructureRef.current = navData;
+    }
+  }, [source]);
+  var initHeadingsId = React.useCallback(function () {
+    var headingId = decodeURIComponent(declarative ? window.location.hash.replace(/^#/, '').trim() : (window.location.hash.match(/heading-\d+/g) || [])[0]);
+    navStructureRef.current.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);
+  }, [navStructure]);
+  React.useEffect(function () {
+    if (source) {
+      getNavStructure();
+    }
+  }, [source, getNavStructure]);
+  React.useEffect(function () {
+    if (source && navStructure && navStructure.length > 0) {
+      refreshNav();
+    }
+  }, [navStructure, source]);
+
+  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/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.js

@@ -0,0 +1,70 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["node", "inline", "className", "children"];
+import React from "react";
+
+/*
+ * @Author: wangxian
+ * @Date: 2022-09-02 16:17:38
+ * @LastEditTime: 2022-11-23 09:09:46
+ */
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
+import 'github-markdown-css';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+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,
+      navOptions = props.navOptions;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "react-mark-down",
+    style: {
+      height: '100%',
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "markdown-body react-mark-down"
+  }, /*#__PURE__*/React.createElement(ReactMarkdown, {
+    remarkPlugins: [remarkGfm],
+    rehypePlugins: [rehypeRaw],
+    components: {
+      code: function code(_ref) {
+        var node = _ref.node,
+            inline = _ref.inline,
+            className = _ref.className,
+            children = _ref.children,
+            props = _objectWithoutProperties(_ref, _excluded);
+
+        var match = /language-(\w+)/.exec(className || 'javascript');
+        return !inline && match ? /*#__PURE__*/React.createElement(SyntaxHighlighter, _extends({
+          showLineNumbers: true,
+          style: oneLight,
+          language: match[1],
+          PreTag: "div",
+          className: "self-highlighter"
+        }, props), String(children).replace(/\n$/, '')) : /*#__PURE__*/React.createElement("code", _extends({
+          className: className
+        }, props), children);
+      }
+    }
+  }, source)), isMarkNav && /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '250px',
+      height: '100%',
+      padding: '10px',
+      overflowY: 'auto'
+    }
+  }, /*#__PURE__*/React.createElement(MdNavbar, _extends({
+    className: "h-full w-full",
+    source: source,
+    ordered: true
+  }, navOptions)))));
+};
+
+export default MdView;