x-star-editor 0.0.2 → 0.0.4

package/dist/utils/markdown.js

@@ -1,5 +1,5 @@
-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 _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 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); }
@@ -23,17 +23,20 @@ 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']
-  })
-});
+import { prefix } from "./global";
+export var getDefaultSchema = function getDefaultSchema() {
+  var _defaultSchema$tagNam, _defaultSchema$attrib, _defaultSchema$attrib2, _defaultSchema$attrib3, _defaultSchema$attrib4, _defaultSchema$attrib5, _defaultSchema$attrib6, _defaultSchema$attrib7, _defaultSchema$attrib8;
+  return _objectSpread(_objectSpread({}, defaultSchema), {}, {
+    tagNames: [].concat(_toConsumableArray((_defaultSchema$tagNam = defaultSchema.tagNames) !== null && _defaultSchema$tagNam !== void 0 ? _defaultSchema$tagNam : []), ['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']),
+      custom: ['meta', 'value']
+    })
+  });
+};
 
 /**
  * 将 Markdown 文本解析为 Mdast 树并转换为 Hast 树的处理器
@@ -53,7 +56,25 @@ var processor = unified().use(remarkParse).use(remarkBreaks).use(remarkGfm).use(
   }
 }).use(rehypePrism, {
   ignoreMissing: true
-}).use(rehypeKatex).use(rehypeRaw).use(rehypeSanitize, schema).freeze();
+}).use(rehypeKatex).use(rehypeRaw).use(function () {
+  return function (root) {
+    var _iterator = _createForOfIteratorHelper(root.children),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var node = _step.value;
+        if ('properties' in node && node.properties) {
+          var _node$position;
+          node.properties.line = (_node$position = node.position) === null || _node$position === void 0 ? void 0 : _node$position.start.line;
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  };
+}).freeze();
 
 /**
  * Mdast 节点
@@ -69,7 +90,7 @@ export var editorRender = function editorRender(sourceCode) {
   /**
    * CSS 类名前缀
    */
-  var classNamePrefix = 'x-star-md-editor-';
+  var classNamePrefix = "".concat(prefix, "md-editor-");
 
   /**
    * 扫描偏移量，表示已经添加到 DOM 树的文本
@@ -211,51 +232,60 @@ export var editorRender = function editorRender(sourceCode) {
    * @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;
-      }
+    var _iterator2 = _createForOfIteratorHelper(nodes),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var _node$position2, _node$position3;
+        var node = _step2.value;
+        var startOffset = (_node$position2 = node.position) === null || _node$position2 === void 0 ? void 0 : _node$position2.start.offset;
+        var endOffset = (_node$position3 = node.position) === null || _node$position3 === void 0 ? void 0 : _node$position3.end.offset;
+        if (startOffset === undefined || endOffset === undefined) {
+          continue;
+        }
+        // 由于 unified 的问题，起点偏移量可能小于扫描偏移量，应修正
+        if (startOffset < scanOffset) {
+          startOffset = scanOffset;
+        }
+        // 如果起点偏移量大于等于终点偏移量，则不用添加任何文本
+        if (startOffset >= endOffset) {
+          continue;
+        }
 
-      // 添加扫描偏移量与起点偏移量间的分隔文本
-      addText(sourceCode.slice(scanOffset, startOffset), true);
+        // 添加扫描偏移量与起点偏移量间的分隔文本
+        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++;
+        // 为 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 {
+          var _node$position4;
+          // 如果栈大小为 1，说明为块级元素终点
+          stack[0].el.append("\u200B");
+          pushElement(0, true);
+          block.setAttribute('line', "".concat((_node$position4 = node.position) === null || _node$position4 === void 0 ? void 0 : _node$position4.start.line));
+          pushBlock();
+          scanOffset++;
+        }
+        stack.pop();
       }
-      stack.pop();
-    }
 
-    // 添加扫描偏移量与父节点终点偏移量间的分隔文本
+      // 添加扫描偏移量与父节点终点偏移量间的分隔文本
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
     addText(sourceCode.slice(scanOffset, parentEndOffset), true);
   };
   getChildren(processor.parse(sourceCode).children, sourceCode.length);
@@ -274,7 +304,7 @@ export var editorRender = function editorRender(sourceCode) {
  * @returns React 虚拟 DOM 树
  */
 export var viewerRender = function viewerRender(sourceCode, options) {
-  return toJsxRuntime(processor.runSync(processor.parse(sourceCode)), {
+  return toJsxRuntime(processor().use(rehypeSanitize, options.customSchema).runSync(processor.parse(sourceCode)), {
     Fragment: Fragment,
     jsx: jsx,
     jsxs: jsxs,

package/package.json

@@ -1,29 +1,26 @@
 {
   "name": "x-star-editor",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "An editor developed by turingstar",
+  "license": "MIT",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "start": "npm run dev",
-    "dev": "dumi dev",
     "build": "father build",
     "build:watch": "father dev",
+    "dev": "dumi 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"
+    "prepare": "husky install && dumi setup",
+    "prepublishOnly": "father doctor && npm run build",
+    "start": "npm run dev"
   },
-  "authors": [
-    "XYD Tech Team tech@xinyoudui.com"
-  ],
-  "license": "MIT",
-  "files": [
-    "dist"
-  ],
   "commitlint": {
     "extends": [
       "@commitlint/config-conventional"
@@ -46,14 +43,22 @@
       "prettier --parser=typescript --write"
     ]
   },
-  "publishConfig": {
-    "access": "public"
-  },
-  "peerDependencies": {
-    "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
+  "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"
   },
   "devDependencies": {
+    "@babel/core": "^7.22.10",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
     "@types/react": "^18.0.0",
@@ -64,25 +69,25 @@
     "father": "^4.1.0",
     "husky": "^8.0.1",
     "lint-staged": "^13.0.3",
+    "postcss": "^8.4.28",
     "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"
+    "styled-components": "^6.0.7",
+    "stylelint": "^14.9.1",
+    "typescript": "^5.1.6",
+    "webpack": "^5.88.2"
   },
-  "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"
-  }
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "authors": [
+    "XYD Tech Team tech@xinyoudui.com"
+  ]
 }

package/dist/XStarEditor/index.module.css

@@ -1,19 +0,0 @@
-.container {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.editor {
-  flex: 1;
-  border-bottom-right-radius: 0;
-}
-
-.viewer {
-  flex: 1;
-  border-radius: 0;
-  border-bottom-right-radius: 0.2em;
-}
-
-.toolbar {
-  width: 100%;
-}

package/dist/components/FileInput.module.css

@@ -1,81 +0,0 @@
-.container {
-  margin: 0.5em 1em 1em 1em;
-}
-
-.tabs {
-  display: flex;
-}
-
-.tab {
-  padding: 0.4em 1em;
-  border-bottom: 1px solid #f5771280;
-  cursor: pointer;
-  user-select: none;
-}
-
-.tab.active {
-  color: #f57712;
-  border-bottom: 2px solid #f57712;
-}
-
-.field {
-  margin: 0.8em;
-  display: flex;
-  flex-direction: column;
-  gap: 0.2em;
-  font-size: 0.9em;
-}
-
-.file-container {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.hidden {
-  position: absolute;
-  inset: 0;
-  opacity: 0;
-}
-
-.input {
-  width: 20em;
-  padding: 0.4em;
-  border: 1px solid #d0d0d0;
-  border-radius: 0.2em;
-  outline: none;
-}
-
-.input:focus {
-  border: 1px solid #f57712;
-}
-
-.input.file-input {
-  width: 14em;
-}
-
-.buttons {
-  display: flex;
-  flex-direction: row-reverse;
-  gap: 0.4em;
-}
-
-.button {
-  padding: 0.4em 1em;
-  background-color: #f0f0f0;
-  border: 1px solid #d0d0d0;
-  border-radius: 0.2em;
-  cursor: pointer;
-  user-select: none;
-}
-
-.button.primary {
-  color: #ffffff;
-  background-color: #f57712;
-  border: none;
-}
-
-.button.file-button {
-  padding: 0.3em 0.4em;
-}

package/dist/components/Toolbar.module.css

@@ -1,116 +0,0 @@
-.button-container {
-  position: relative;
-}
-
-.button {
-  width: 2em;
-  height: 2em;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-family: Consolas;
-  border: 1px solid transparent;
-  cursor: pointer;
-  user-select: none;
-}
-
-.button-hover {
-  background-color: #f8f8f8;
-  border: 1px solid #f5771280;
-  border-radius: 0.2em;
-}
-
-.tooltip {
-  position: absolute;
-  top: 3em;
-  width: max-content;
-  padding: 0.4em;
-  font-size: 0.8em;
-  color: #f8f8f8;
-  background-color: #022679;
-  border-radius: 0.2em;
-  z-index: 2;
-}
-
-.tooltip::before {
-  content: '';
-  position: absolute;
-  top: -0.3em;
-  left: 50%;
-  border-top: 0.6em solid #022679;
-  border-right: 0.6em solid transparent;
-  transform-origin: 0 0;
-  transform: rotate(45deg);
-}
-
-.popover {
-  position: absolute;
-  width: max-content;
-  background-color: #f8f8f8;
-  border: 1px solid #f5771280;
-  border-radius: 0.2em;
-  box-shadow: 0 2px 4px #00000020;
-  opacity: 0;
-  z-index: 1;
-}
-
-.option {
-  padding: 4px 8px;
-  cursor: pointer;
-  user-select: none;
-}
-
-.option:hover {
-  background-color: #f0f0f0;
-}
-
-.icon {
-  width: 45%;
-  height: 45%;
-  background-size: contain;
-}
-
-.icon.code-library {
-  background-image: url(icons/code-library.svg);
-}
-
-.icon.italic {
-  background-image: url(icons/italic.svg);
-}
-
-.icon.bold {
-  background-image: url(icons/bold.svg);
-}
-
-.icon.code {
-  background-image: url(icons/code.svg);
-}
-
-.icon.link {
-  background-image: url(icons/link.svg);
-}
-
-.icon.image {
-  background-image: url(icons/image.svg);
-}
-
-.icon.strikethrough {
-  background-image: url(icons/strikethrough.svg);
-}
-
-.toolbar {
-  margin: 0 -1px;
-  padding: 0.2em;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.2em;
-  background-color: #f5771210;
-  border: 1px solid #f5771220;
-  border-top-left-radius: 0.2em;
-  border-top-right-radius: 0.2em;
-}
-
-.divider {
-  margin: 0.4em;
-  border: 1px solid #f5771280;
-}