x-star-editor 0.6.3 → 0.6.5

package/dist/styles/index.css

@@ -1787,6 +1787,9 @@ body {
 .x-star-editor-md-editor > :last-child {
   margin-bottom: 0.5em;
 }
+.x-star-editor-md-editor.x-star-editor-empty {
+  /* 文本为空时显示提示 */
+}
 .x-star-editor-md-editor.x-star-editor-empty::before {
   content: attr(placeholder);
   position: absolute;
@@ -1830,11 +1833,13 @@ body {
 .x-star-editor-md-viewer tr:nth-child(even) td {
   background-color: rgba(0, 0, 0, 0.04);
 }
+.x-star-editor-md-viewer img {
+  max-width: 100%;
+}
 
 .x-star-editor-slide-viewer {
   position: relative;
   color: rgba(0, 0, 0, 0.88);
-  position: relative;
   overflow: hidden;
   aspect-ratio: 16/9;
 }
@@ -1849,19 +1854,14 @@ body {
 .x-star-editor-slide-viewer .x-star-editor-slide {
   width: 1280px;
   height: 720px;
-  padding: 0 32px;
+  padding: 78.5px;
   display: flex;
   flex-direction: column;
   justify-content: center;
+  font-size: 29px;
   background-color: #fff;
   transform-origin: top left;
 }
-.x-star-editor-slide-viewer .x-star-editor-slide > :first-child {
-  margin-top: 0;
-}
-.x-star-editor-slide-viewer .x-star-editor-slide > :last-child {
-  margin-bottom: 0;
-}
 .x-star-editor-slide-viewer .x-star-editor-slide h1,
 .x-star-editor-slide-viewer .x-star-editor-slide h2,
 .x-star-editor-slide-viewer .x-star-editor-slide h3,
@@ -1871,12 +1871,12 @@ body {
   font-weight: bold;
 }
 .x-star-editor-slide-viewer .x-star-editor-slide table {
-  margin: 16px 0;
+  margin: 1em 0;
   border-collapse: collapse;
 }
 .x-star-editor-slide-viewer .x-star-editor-slide th,
 .x-star-editor-slide-viewer .x-star-editor-slide td {
-  padding: 8px;
+  padding: 0.5em;
   border: 1px solid #dedede;
 }
 .x-star-editor-slide-viewer .x-star-editor-slide th {
@@ -1886,18 +1886,25 @@ body {
 .x-star-editor-slide-viewer .x-star-editor-slide tr:nth-child(even) td {
   background-color: rgba(0, 0, 0, 0.04);
 }
-.x-star-editor-slide-viewer .x-star-editor-slide pre {
-  width: max-content;
+.x-star-editor-slide-viewer .x-star-editor-slide img {
   max-width: 100%;
 }
-.x-star-editor-slide-viewer .x-star-editor-slide img[id^=user-content-mermaid] {
-  max-width: 100%;
+.x-star-editor-slide-viewer .x-star-editor-slide > :first-child {
+  margin-top: 0; /* 防止垂直居中时出现视觉上不居中的现象 */
+}
+.x-star-editor-slide-viewer .x-star-editor-slide > :last-child {
+  margin-bottom: 0; /* 防止垂直居中时出现视觉上不居中的现象 */
+}
+.x-star-editor-slide-viewer .x-star-editor-pad {
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 .x-star-editor-slide-viewer .x-star-editor-custom-cursor-pencil {
   cursor: url("./cursor/pencil.png"), auto;
 }
 .x-star-editor-slide-viewer .x-star-editor-custom-cursor-eraser {
-  cursor: url("./cursor/editor-eraser.png"), auto;
+  cursor: url("./cursor/eraser.png"), auto;
 }
 .x-star-editor-slide-viewer .x-star-editor-btn-container {
   position: absolute;
@@ -1906,7 +1913,7 @@ body {
   height: 32px;
   display: flex;
   flex-direction: row-reverse;
-  z-index: 10000;
+  z-index: 1;
 }
 .x-star-editor-slide-viewer .x-star-editor-btn-container .x-star-editor-common-btn {
   position: relative;
@@ -1922,13 +1929,14 @@ body {
   cursor: pointer;
 }
 .x-star-editor-slide-viewer .x-star-editor-btn-container .x-star-editor-common-btn:hover {
-  color: #f8f8f8;
+  color: rgb(132, 174, 241);
   background-color: #f0f0f0;
 }
 .x-star-editor-slide-viewer .x-star-editor-btn-container .x-star-editor-popover {
   position: absolute;
   width: 150px;
   height: 0;
+  margin: 5px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -1937,40 +1945,51 @@ body {
   border-radius: 6px;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
   overflow: hidden;
-  z-index: 10000;
+  z-index: 1;
   transition: all 0.3s cubic-bezier(0.51, 0.3, 0.06, 0.98);
+  user-select: none;
 }
 .x-star-editor-slide-viewer .x-star-editor-btn-container .x-star-editor-popover > * {
   margin: 8px 0;
 }
+.x-star-editor-slide-viewer .x-star-editor-btn-container .x-star-editor-popover-label {
+  margin-right: 15px;
+  font-size: 12px;
+}
+.x-star-editor-slide-viewer .x-star-editor-btn-container .x-star-editor-tooltip {
+  position: absolute;
+  height: 0;
+  margin-top: 36px;
+  margin-left: 10px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  line-height: 30px;
+  white-space: nowrap;
+  font-size: 12px;
+  background-color: #fff;
+  border-radius: 6px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+  z-index: 1;
+  transform: scale(0);
+  transition: all 0.25s cubic-bezier(0.51, 0.3, 0.06, 0.98);
+  user-select: none;
+}
+.x-star-editor-slide-viewer .x-star-editor-btn-container .x-star-editor-common-btn:hover + .x-star-editor-tooltip {
+  height: 30px;
+  transform: scale(1);
+}
 .x-star-editor-slide-viewer .x-star-editor-btn-container .x-star-editor-common-btn:hover + .x-star-editor-popover,
 .x-star-editor-slide-viewer .x-star-editor-btn-container .x-star-editor-popover:hover {
   height: 100px;
 }
-.x-star-editor-slide-viewer .x-star-editor-btn-container .x-star-editor-draw-popover {
+.x-star-editor-slide-viewer .x-star-editor-btn-container .x-star-editor-pencil-popover {
   top: 33px;
   left: 120px;
 }
-.x-star-editor-slide-viewer .x-star-editor-btn-container .x-star-editor-erase-popover {
+.x-star-editor-slide-viewer .x-star-editor-btn-container .x-star-editor-eraser-popover {
   top: 33px;
   left: 75px;
 }
-.x-star-editor-slide-viewer .x-star-editor-pad {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 960px;
-  height: 540px;
-}
-.x-star-editor-slide-viewer .x-star-editor-ring {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 100px;
-  height: 100px;
-  border: 2px solid black;
-  border-radius: 50%;
-  opacity: 0.5; /* 圆环内部透明 */
-  transform: translate(-50%, -50%);
-  pointer-events: none; /* 防止圆环遮挡鼠标事件 */
-}

package/dist/utils/markdown.d.ts

@@ -1,7 +1,15 @@
 import type { Root as HastRoot } from 'hast';
+import type { Root as MdastRoot } from 'mdast';
 import type { Options as ToStringOptions } from 'mdast-util-to-string';
 import { defaultSchema } from 'rehype-sanitize';
 import type { ViewerOptions } from '../x-star-md-viewer';
+/**
+ * 带缓存的解析函数
+ *
+ * @param sourceCode Markdown 文本
+ * @returns Mdast 树
+ */
+export declare const cachedParse: (sourceCode: string) => MdastRoot;
 /**
  * 将 Markdown 文本映射到 DOM 树，第一层为 `<div>` 块元素，第二层为 `<div>` 行元素，之后均为 `<span>` 元素
  *

package/dist/utils/markdown.js

@@ -41,7 +41,7 @@ var toMdastProcessor = unified().use(remarkParse).use(remarkGfm).use(remarkMath)
  * @param sourceCode Markdown 文本
  * @returns Mdast 树
  */
-var cachedParse = function () {
+export var cachedParse = function () {
   var cache = {};
   return function (sourceCode) {
     var _cache$sourceCode;

package/dist/utils/rehype/rehype-math.js

@@ -139,9 +139,7 @@ var rehypeMath = function rehypeMath() {
     }, function (node, index, parent) {
       var _node$properties3;
       if (typeof ((_node$properties3 = node.properties) === null || _node$properties3 === void 0 ? void 0 : _node$properties3.value) === 'string') {
-        rawPositions = node.properties.value.split(' ').map(function (offset) {
-          return parseInt(offset);
-        });
+        rawPositions = node.properties.value.split(' ').map(Number);
       }
       if (index !== null && parent) {
         parent.children.splice(index);

package/dist/utils/slide.d.ts

@@ -0,0 +1,26 @@
+import type { PointGroup } from 'signature_pad';
+export interface PadValue {
+    data: PointGroup[];
+    scale: number;
+}
+/**
+ * 计算缩放后点的坐标值
+ *
+ * @param padValue 画板数据
+ * @param parentWidth 父元素宽度
+ * @returns 新坐标值
+ */
+export declare const getScaledData: ({ data, scale }: PadValue, parentWidth: number) => {
+    points: {
+        x: number;
+        y: number;
+        pressure: number;
+        time: number;
+    }[];
+    dotSize: number;
+    minWidth: number;
+    maxWidth: number;
+    penColor: string;
+    velocityFilterWeight: number;
+    compositeOperation: GlobalCompositeOperation;
+}[];

package/dist/utils/slide.js

@@ -0,0 +1,22 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+/**
+ * 计算缩放后点的坐标值
+ *
+ * @param padValue 画板数据
+ * @param parentWidth 父元素宽度
+ * @returns 新坐标值
+ */
+export var getScaledData = function getScaledData(_ref, parentWidth) {
+  var data = _ref.data,
+    scale = _ref.scale;
+  return data.map(function (group) {
+    return _objectSpread(_objectSpread({}, group), {}, {
+      points: group.points.map(function (point) {
+        return _objectSpread(_objectSpread({}, point), {}, {
+          x: point.x / scale * (parentWidth / 1280),
+          y: point.y / scale * (parentWidth / 1280)
+        });
+      })
+    });
+  });
+};

package/dist/x-star-editor/index.d.ts

@@ -50,7 +50,7 @@ export interface XStarEditorProps {
      */
     viewerRender?: (value: string) => React.ReactNode;
     /**
-     * 文本变化回调函数
+     * 文本改变回调函数
      */
     onChange?: XStarMdEditorProps['onChange'];
     /**

package/dist/x-star-editor/index.js

@@ -64,12 +64,8 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
 
   // 同步滚动
   useEffect(function () {
-    var _editorRef$current, _viewerRef$current;
-    var editor = (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.getEditorContainer();
-    var viewer = (_viewerRef$current = viewerRef.current) === null || _viewerRef$current === void 0 ? void 0 : _viewerRef$current.getViewerContainer();
-    if (!editor || !viewer) {
-      return;
-    }
+    var editor = editorRef.current.getEditorContainer();
+    var viewer = viewerRef.current.getViewerContainer();
 
     /**
      * 获取两个父元素的子元素到各自父元素顶部的距离
@@ -92,9 +88,8 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
           } else if (!(toChild instanceof HTMLElement)) {
             j++;
           } else {
-            var _fromChild$dataset$li, _toChild$dataset$line;
-            var fromLine = parseInt((_fromChild$dataset$li = fromChild.dataset.line) !== null && _fromChild$dataset$li !== void 0 ? _fromChild$dataset$li : '');
-            var toLine = parseInt((_toChild$dataset$line = toChild.dataset.line) !== null && _toChild$dataset$line !== void 0 ? _toChild$dataset$line : '');
+            var fromLine = Number(fromChild.dataset.line);
+            var toLine = Number(toChild.dataset.line);
             if (!fromLine) {
               i++;
             } else if (!toLine) {

package/dist/x-star-md-editor/index.d.ts

@@ -70,7 +70,7 @@ export interface XStarMdEditorProps {
      */
     plugins?: XStarMdEditorPlugin[];
     /**
-     * 文本变化回调函数
+     * 文本改变回调函数
      */
     onChange?: (value: string) => void;
     /**