x-star-editor 0.0.2

package/dist/utils/markdown.js

@@ -0,0 +1,292 @@
+var _defaultSchema$tagNam, _defaultSchema$attrib, _defaultSchema$attrib2, _defaultSchema$attrib3, _defaultSchema$attrib4, _defaultSchema$attrib5, _defaultSchema$attrib6, _defaultSchema$attrib7, _defaultSchema$attrib8;
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import { toJsxRuntime } from 'hast-util-to-jsx-runtime';
+import { Fragment, jsx, jsxs } from 'react/jsx-runtime';
+import rehypeKatex from 'rehype-katex';
+import rehypePrism from 'rehype-prism-plus';
+import rehypeRaw from 'rehype-raw';
+import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
+import remarkBreaks from 'remark-breaks';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import remarkParse from 'remark-parse';
+import remarkRehype from 'remark-rehype';
+import { unified } from 'unified';
+var schema = _objectSpread(_objectSpread({}, defaultSchema), {}, {
+  tagNames: [].concat(_toConsumableArray((_defaultSchema$tagNam = defaultSchema.tagNames) !== null && _defaultSchema$tagNam !== void 0 ? _defaultSchema$tagNam : []), ['video', 'custom']),
+  attributes: _objectSpread(_objectSpread({}, defaultSchema.attributes), {}, {
+    pre: [].concat(_toConsumableArray((_defaultSchema$attrib = (_defaultSchema$attrib2 = defaultSchema.attributes) === null || _defaultSchema$attrib2 === void 0 ? void 0 : _defaultSchema$attrib2.pre) !== null && _defaultSchema$attrib !== void 0 ? _defaultSchema$attrib : []), ['className', 'style']),
+    code: [].concat(_toConsumableArray((_defaultSchema$attrib3 = (_defaultSchema$attrib4 = defaultSchema.attributes) === null || _defaultSchema$attrib4 === void 0 ? void 0 : _defaultSchema$attrib4.code) !== null && _defaultSchema$attrib3 !== void 0 ? _defaultSchema$attrib3 : []), ['className', 'style']),
+    div: [].concat(_toConsumableArray((_defaultSchema$attrib5 = (_defaultSchema$attrib6 = defaultSchema.attributes) === null || _defaultSchema$attrib6 === void 0 ? void 0 : _defaultSchema$attrib6.div) !== null && _defaultSchema$attrib5 !== void 0 ? _defaultSchema$attrib5 : []), ['className', 'style']),
+    span: [].concat(_toConsumableArray((_defaultSchema$attrib7 = (_defaultSchema$attrib8 = defaultSchema.attributes) === null || _defaultSchema$attrib8 === void 0 ? void 0 : _defaultSchema$attrib8.span) !== null && _defaultSchema$attrib7 !== void 0 ? _defaultSchema$attrib7 : []), ['className', 'style', 'line']),
+    video: ['src'],
+    custom: ['meta', 'value']
+  })
+});
+
+/**
+ * 将 Markdown 文本解析为 Mdast 树并转换为 Hast 树的处理器
+ */
+var processor = unified().use(remarkParse).use(remarkBreaks).use(remarkGfm).use(remarkMath).use(remarkRehype, {
+  allowDangerousHtml: true,
+  handlers: {
+    math: function math(h, node) {
+      return (
+        // 如果 Math 节点的 `meta` 属性不为空，则视为自定义块
+        node.meta ? h(node.position, 'custom', {
+          meta: node.meta,
+          value: node.value
+        }) : h(node, 'div')
+      );
+    }
+  }
+}).use(rehypePrism, {
+  ignoreMissing: true
+}).use(rehypeKatex).use(rehypeRaw).use(rehypeSanitize, schema).freeze();
+
+/**
+ * Mdast 节点
+ */
+
+/**
+ * 将 Markdown 文本映射到 DOM 树，第一层为 `<div>` 块元素，第二层为 `<div>` 行元素，之后均为 `<span>` 元素
+ *
+ * @param sourceCode Markdown 文本
+ * @returns DOM 树
+ */
+export var editorRender = function editorRender(sourceCode) {
+  /**
+   * CSS 类名前缀
+   */
+  var classNamePrefix = 'x-star-md-editor-';
+
+  /**
+   * 扫描偏移量，表示已经添加到 DOM 树的文本
+   */
+  var scanOffset = 0;
+
+  /**
+   * 遍历 Mdast 树时的栈，保存 Mdast 节点、对应的 DOM 元素、是否为 Mdast 节点的第一个子元素
+   */
+  var stack = [];
+
+  /**
+   * 块级元素
+   */
+  var block = document.createElement('div');
+
+  /**
+   * DOM 树根元素
+   */
+  var el = document.createElement('div');
+
+  /**
+   * 判断一个 Mdast 节点的子节点是否为流内容
+   *
+   * @param node Mdast 节点
+   * @returns 子节点是否为流内容
+   */
+  var isFlowContent = function isFlowContent(node) {
+    return node.type === 'blockquote' || node.type === 'listItem' || node.type === 'footnoteDefinition';
+  };
+
+  /**
+   * 将栈中指定索引的 DOM 元素推到对应的父元素中
+   *
+   * @param index 索引
+   * @param last 是否为 Mdast 节点的最后一个子元素，默认为 `false`
+   */
+  var pushElement = function pushElement(index) {
+    var last = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var _stack$index = stack[index],
+      node = _stack$index.node,
+      first = _stack$index.first;
+
+    // 如果节点为流内容，则将样式添加到该行的 `<div>` 元素上，否则添加到该节点的元素上
+    var styleElement = stack[index && !isFlowContent(stack[index - 1].node) ? index : 0].el;
+    styleElement.classList.add("".concat(classNamePrefix).concat(node.type));
+    if (node.type === 'heading') {
+      styleElement.classList.add("".concat(classNamePrefix, "heading").concat(node.depth));
+    } else if (node.type === 'html' || node.type === 'code' || node.type === 'math') {
+      if (first) {
+        styleElement.classList.add("".concat(classNamePrefix, "first"));
+      }
+      if (last) {
+        styleElement.classList.add("".concat(classNamePrefix, "last"));
+      }
+    }
+
+    // 如果索引为 0，则父节点为块级元素，否则为前一个索引的 DOM 元素
+    var parentElement = index ? stack[index - 1].el : block;
+    parentElement.append(stack[index].el);
+    stack[index].el = document.createElement(index ? 'span' : 'div');
+    stack[index].first = false;
+  };
+
+  /**
+   * 将块级元素推到 DOM 树根元素中
+   */
+  var pushBlock = function pushBlock() {
+    block.classList.add("".concat(classNamePrefix, "block"));
+    el.append(block);
+    block = document.createElement('div');
+  };
+
+  /**
+   * 创建分隔文本元素
+   *
+   * @param text 文本
+   * @returns `<span>` 元素
+   */
+  var createDelimiter = function createDelimiter(text) {
+    var temp = document.createElement('span');
+    temp.append(text);
+    temp.classList.add("".concat(classNamePrefix, "delimiter"));
+    return temp;
+  };
+
+  /**
+   * 创建行元素
+   *
+   * @param text 文本
+   * @returns `<div>` 元素
+   */
+  var createLine = function createLine(text) {
+    var temp = document.createElement('div');
+    temp.append("".concat(text, "\u200B"));
+    return temp;
+  };
+
+  /**
+   * 添加文本到 DOM 树
+   *
+   * @param text 文本
+   * @param delimiter 是否为分隔文本，默认为 `false`
+   */
+  var addText = function addText(text) {
+    var delimiter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    // 每行文本放在不同 `<div>` 元素中
+    var lines = text.split('\n');
+    if (stack.length) {
+      // 如果栈不为空，说明为块级元素内的文本，每一行都应推到块级元素中
+      if (lines[0]) {
+        stack[stack.length - 1].el.append(delimiter ? createDelimiter(lines[0]) : lines[0]);
+      }
+      for (var i = 1; i < lines.length; i++) {
+        for (var j = stack.length - 1; j; j--) {
+          pushElement(j);
+        }
+        stack[0].el.append("\u200B");
+        pushElement(0);
+        if (lines[i]) {
+          stack[stack.length - 1].el.append(delimiter ? createDelimiter(lines[i]) : lines[i]);
+        }
+      }
+      scanOffset += text.length;
+    } else {
+      // 如果栈为空，说明为块级元素间的文本，最后一行应视为下一块级元素内的文本
+      for (var _i = 0; _i < lines.length - 1; _i++) {
+        block.append(createLine(lines[_i]));
+        pushBlock();
+        scanOffset += lines[_i].length + 1;
+      }
+    }
+  };
+
+  /**
+   * 根据 Mdast 节点生成对应的 DOM 子元素
+   *
+   * @param nodes Mdast 节点
+   * @param parentEndOffset 父节点终点偏移量
+   */
+  var getChildren = function getChildren(nodes, parentEndOffset) {
+    for (var i = 0; i < nodes.length; i++) {
+      var _node$position, _node$position2;
+      var node = nodes[i];
+      var startOffset = (_node$position = node.position) === null || _node$position === void 0 ? void 0 : _node$position.start.offset;
+      var endOffset = (_node$position2 = node.position) === null || _node$position2 === void 0 ? void 0 : _node$position2.end.offset;
+      if (startOffset === undefined || endOffset === undefined) {
+        continue;
+      }
+      // 由于 unified 的问题，起点偏移量可能小于扫描偏移量，应修正
+      if (startOffset < scanOffset) {
+        startOffset = scanOffset;
+      }
+      // 如果起点偏移量大于等于终点偏移量，则不用添加任何文本
+      if (startOffset >= endOffset) {
+        continue;
+      }
+
+      // 添加扫描偏移量与起点偏移量间的分隔文本
+      addText(sourceCode.slice(scanOffset, startOffset), true);
+
+      // 为 Mdast 节点创建 DOM 元素
+      stack.push({
+        node: node,
+        el: document.createElement(stack.length ? 'span' : 'div'),
+        first: true
+      });
+      if ('children' in node) {
+        getChildren(node.children, endOffset);
+      } else {
+        addText(sourceCode.slice(scanOffset, endOffset));
+      }
+      if (stack.length > 1) {
+        pushElement(stack.length - 1, true);
+      } else {
+        // 如果栈大小为 1，说明为块级元素终点
+        stack[0].el.append("\u200B");
+        pushElement(0, true);
+        block.setAttribute('index', "".concat(i));
+        pushBlock();
+        scanOffset++;
+      }
+      stack.pop();
+    }
+
+    // 添加扫描偏移量与父节点终点偏移量间的分隔文本
+    addText(sourceCode.slice(scanOffset, parentEndOffset), true);
+  };
+  getChildren(processor.parse(sourceCode).children, sourceCode.length);
+  if (scanOffset <= sourceCode.length) {
+    // 添加最后一行文本
+    block.append(createLine(sourceCode.slice(scanOffset)));
+    pushBlock();
+  }
+  return el;
+};
+/**
+ * 将 Markdown 文本映射到 React 虚拟 DOM 树
+ *
+ * @param sourceCode Markdown 文本
+ * @param options 配置项
+ * @returns React 虚拟 DOM 树
+ */
+export var viewerRender = function viewerRender(sourceCode, options) {
+  return toJsxRuntime(processor.runSync(processor.parse(sourceCode)), {
+    Fragment: Fragment,
+    jsx: jsx,
+    jsxs: jsxs,
+    components: _objectSpread(_objectSpread({}, options.customHTMLElements), {}, {
+      custom: function custom(_ref) {
+        var _options$customBlocks;
+        var meta = _ref.meta,
+          value = _ref.value;
+        return jsx((_options$customBlocks = options.customBlocks[meta]) !== null && _options$customBlocks !== void 0 ? _options$customBlocks : 'div', {
+          children: value
+        });
+      }
+    })
+  });
+};

package/dist/utils/module-css.d.ts

@@ -0,0 +1,3 @@
+declare module '*.module.css' {
+  export default Record<string, string>;
+}

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "x-star-editor",
+  "version": "0.0.2",
+  "description": "An editor developed by turingstar",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "start": "npm run dev",
+    "dev": "dumi dev",
+    "build": "father build",
+    "build:watch": "father dev",
+    "docs:build": "dumi build",
+    "prepare": "husky install && dumi setup",
+    "doctor": "father doctor",
+    "lint": "npm run lint:es && npm run lint:css",
+    "lint:css": "stylelint \"{src,test}/**/*.{css,less}\"",
+    "lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
+    "prepublishOnly": "father doctor && npm run build"
+  },
+  "authors": [
+    "XYD Tech Team tech@xinyoudui.com"
+  ],
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "lint-staged": {
+    "*.{md,json}": [
+      "prettier --write --no-error-on-unmatched-pattern"
+    ],
+    "*.{css,less}": [
+      "stylelint --fix",
+      "prettier --write"
+    ],
+    "*.{js,jsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{ts,tsx}": [
+      "eslint --fix",
+      "prettier --parser=typescript --write"
+    ]
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^17.1.2",
+    "@commitlint/config-conventional": "^17.1.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@umijs/lint": "^4.0.0",
+    "dumi": "^2.2.0",
+    "eslint": "^8.23.0",
+    "father": "^4.1.0",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
+    "prettier": "^2.7.1",
+    "prettier-plugin-organize-imports": "^3.0.0",
+    "prettier-plugin-packagejson": "^2.2.18",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "stylelint": "^14.9.1"
+  },
+  "dependencies": {
+    "classnames": "^2.3.2",
+    "hast-util-to-jsx-runtime": "^1.2.0",
+    "rehype-katex": "^6.0.3",
+    "rehype-prism-plus": "^1.6.1",
+    "rehype-raw": "^6.1.1",
+    "rehype-sanitize": "^5.0.1",
+    "remark-breaks": "^3.0.3",
+    "remark-gfm": "^3.0.1",
+    "remark-math": "^5.1.1",
+    "remark-parse": "^10.0.2",
+    "remark-rehype": "^10.1.0",
+    "unified": "^10.1.2"
+  }
+}