x-star-editor 0.6.2 → 0.6.4

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export type { ToolbarItem } from './components/Toolbar';
 export { createSelection, getRange } from './utils/container';
-export { batchHandler, insertHandler, mutateHandler, redoHandler, selectHandler, setHandler, toggleHandler, undoHandler, } from './utils/handler';
+export { batchHandler, indentHandler, insertHandler, mutateHandler, redoHandler, selectHandler, setHandler, toggleHandler, undoHandler, } from './utils/handler';
 export type { Executor, Handler, KeyboardEventHandler } from './utils/handler';
 export { toHTML, toMarkdown, toText } from './utils/markdown';
 export { default as XStarEditor, useEditorRef } from './x-star-editor';

package/dist/index.js

@@ -1,5 +1,5 @@
 export { createSelection, getRange } from "./utils/container";
-export { batchHandler, insertHandler, mutateHandler, redoHandler, selectHandler, setHandler, toggleHandler, undoHandler } from "./utils/handler";
+export { batchHandler, indentHandler, insertHandler, mutateHandler, redoHandler, selectHandler, setHandler, toggleHandler, undoHandler } from "./utils/handler";
 export { toHTML, toMarkdown, toText } from "./utils/markdown";
 export { default as XStarEditor, useEditorRef } from "./x-star-editor";
 export { default as XStarMdEditor, useMdEditorRef } from "./x-star-md-editor";

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,6 +1833,9 @@ 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;
@@ -1849,19 +1855,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 +1872,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,12 +1887,14 @@ 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: 70%;
+.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-] {
-  width: 100%;
-  max-height: 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-custom-cursor-pencil {
   cursor: url("./cursor/pencil.png"), auto;

package/dist/utils/handler.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { BatchAction, InsertAction, MutateAction, SelectAction, SetAction, ToggleAction, useHistory } from './history';
+import type { BatchAction, IndentAction, InsertAction, MutateAction, SelectAction, SetAction, ToggleAction, useHistory } from './history';
 /**
  * 处理函数上下文
  */
@@ -12,6 +12,7 @@ export interface Handler<T = void> {
 }
 export declare const insertHandler: (payload: InsertAction['payload']) => Handler;
 export declare const toggleHandler: (payload: ToggleAction['payload']) => Handler;
+export declare const indentHandler: (payload: IndentAction['payload']) => Handler;
 export declare const setHandler: (payload: SetAction['payload']) => Handler;
 export declare const undoHandler: () => Handler;
 export declare const redoHandler: () => Handler;

package/dist/utils/handler.js

@@ -1,6 +1,6 @@
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
 import { createKeybindingsHandler } from 'tinykeys';
-import { createSelection } from "./container";
+import { createSelection, getRange } from "./container";
 
 /**
  * 处理函数上下文
@@ -32,10 +32,21 @@ export var toggleHandler = function toggleHandler(payload) {
     });
   };
 };
-export var setHandler = function setHandler(payload) {
+export var indentHandler = function indentHandler(payload) {
   return function (_ref3) {
     var selection = _ref3.selection,
       dispatch = _ref3.dispatch;
+    return dispatch({
+      type: 'indent',
+      payload: payload,
+      selection: selection
+    });
+  };
+};
+export var setHandler = function setHandler(payload) {
+  return function (_ref4) {
+    var selection = _ref4.selection,
+      dispatch = _ref4.dispatch;
     return dispatch({
       type: 'set',
       payload: payload,
@@ -44,24 +55,24 @@ export var setHandler = function setHandler(payload) {
   };
 };
 export var undoHandler = function undoHandler() {
-  return function (_ref4) {
-    var dispatch = _ref4.dispatch;
+  return function (_ref5) {
+    var dispatch = _ref5.dispatch;
     return dispatch({
       type: 'undo'
     });
   };
 };
 export var redoHandler = function redoHandler() {
-  return function (_ref5) {
-    var dispatch = _ref5.dispatch;
+  return function (_ref6) {
+    var dispatch = _ref6.dispatch;
     return dispatch({
       type: 'redo'
     });
   };
 };
 export var batchHandler = function batchHandler(payload) {
-  return function (_ref6) {
-    var dispatch = _ref6.dispatch;
+  return function (_ref7) {
+    var dispatch = _ref7.dispatch;
     return dispatch({
       type: 'batch',
       payload: payload
@@ -69,8 +80,8 @@ export var batchHandler = function batchHandler(payload) {
   };
 };
 export var mutateHandler = function mutateHandler(payload) {
-  return function (_ref7) {
-    var dispatch = _ref7.dispatch;
+  return function (_ref8) {
+    var dispatch = _ref8.dispatch;
     return dispatch({
       type: 'mutate',
       payload: payload
@@ -78,8 +89,8 @@ export var mutateHandler = function mutateHandler(payload) {
   };
 };
 export var selectHandler = function selectHandler(payload) {
-  return function (_ref8) {
-    var dispatch = _ref8.dispatch;
+  return function (_ref9) {
+    var dispatch = _ref9.dispatch;
     return dispatch({
       type: 'select',
       payload: payload
@@ -98,18 +109,42 @@ export var selectHandler = function selectHandler(payload) {
  */
 
 export var getDefaultKeyboardEventHandlers = function getDefaultKeyboardEventHandlers() {
-  return [function (_ref9) {
-    var sourceCode = _ref9.sourceCode,
-      selection = _ref9.selection,
-      dispatch = _ref9.dispatch,
-      e = _ref9.e;
+  return [function (_ref10) {
+    var sourceCode = _ref10.sourceCode,
+      selection = _ref10.selection,
+      dispatch = _ref10.dispatch,
+      e = _ref10.e;
     return createKeybindingsHandler({
       Tab: function Tab(e) {
+        e.preventDefault();
+        var _getRange = getRange(selection),
+          startOffset = _getRange.startOffset,
+          endOffset = _getRange.endOffset;
+        var text = sourceCode.slice(startOffset, endOffset);
+        if (text.includes('\n')) {
+          dispatch({
+            type: 'indent',
+            payload: {
+              indent: true
+            },
+            selection: selection
+          });
+        } else {
+          dispatch({
+            type: 'insert',
+            payload: {
+              text: '\t'
+            },
+            selection: selection
+          });
+        }
+      },
+      'Shift+Tab': function ShiftTab(e) {
         e.preventDefault();
         dispatch({
-          type: 'insert',
+          type: 'indent',
           payload: {
-            text: '\t'
+            indent: false
           },
           selection: selection
         });

package/dist/utils/history.d.ts

@@ -33,12 +33,19 @@ export interface ToggleAction {
     };
     selection: ContainerSelection;
 }
+export interface IndentAction {
+    type: 'indent';
+    payload: {
+        indent: boolean;
+    };
+    selection: ContainerSelection;
+}
 export interface SetAction {
     type: 'set';
     payload: State;
     selection: ContainerSelection;
 }
-type StateAction = InsertAction | ToggleAction | SetAction;
+type StateAction = InsertAction | ToggleAction | IndentAction | SetAction;
 /**
  * 编辑器历史
  */

package/dist/utils/history.js

@@ -33,6 +33,34 @@ var stateReducer = function stateReducer(_ref, action) {
         var lineEndOffset = endOffset + "".concat(after, "\n").indexOf('\n');
         var lineBefore = sourceCode.slice(0, lineStartOffset);
         var lineAfter = sourceCode.slice(lineEndOffset);
+        var toggleDelimiters = function toggleDelimiters() {
+          var text = sourceCode.slice(startOffset, endOffset);
+          for (var _len = arguments.length, delimiters = new Array(_len), _key = 0; _key < _len; _key++) {
+            delimiters[_key] = arguments[_key];
+          }
+          for (var _i = 0, _delimiters = delimiters; _i < _delimiters.length; _i++) {
+            var _delimiter = _delimiters[_i];
+            if (before.endsWith(_delimiter) && after.startsWith(_delimiter)) {
+              // 删除分隔文本
+              return {
+                sourceCode: "".concat(before.slice(0, before.length - _delimiter.length)).concat(text).concat(after.slice(_delimiter.length)),
+                selection: createSelection(anchorOffset - _delimiter.length, focusOffset - _delimiter.length)
+              };
+            }
+          }
+          var delimiter = delimiters[0];
+          // 插入分隔文本
+          return {
+            sourceCode: "".concat(before).concat(delimiter).concat(text).concat(delimiter).concat(after),
+            selection: createSelection(anchorOffset + delimiter.length, focusOffset + delimiter.length)
+          };
+        };
+        var toggleBlock = function toggleBlock(block, offset) {
+          return {
+            sourceCode: "".concat(sourceCode.slice(0, lineEndOffset), "\n").concat(block, "\n").concat(lineAfter),
+            selection: createSelection(lineEndOffset + offset + 1)
+          };
+        };
         switch (action.payload.type) {
           case 'blockquote':
           case 'orderedList':
@@ -53,8 +81,8 @@ var stateReducer = function stateReducer(_ref, action) {
               if (values.some(function (value) {
                 return !value;
               })) {
-                for (var _i = 0; _i < lines.length; _i++) {
-                  lines[_i] = "".concat(prefixes[1], " ").concat(lines[_i]);
+                for (var _i2 = 0; _i2 < lines.length; _i2++) {
+                  lines[_i2] = "".concat(prefixes[1], " ").concat(lines[_i2]);
                 }
               }
               var _text = lines.join('\n');
@@ -76,30 +104,12 @@ var stateReducer = function stateReducer(_ref, action) {
               };
             }
           case 'delete':
+            {
+              return toggleDelimiters('~~');
+            }
           case 'emphasis':
-          case 'inlineCode':
-          case 'inlineMath':
-          case 'strong':
             {
-              var _type = action.payload.type;
-              var delimiters = _type === 'emphasis' ? ['*', '_'] : _type === 'strong' ? ['**', '__'] : _type === 'inlineCode' ? ['`'] : _type === 'delete' ? ['~~'] : ['$'];
-              var _text2 = sourceCode.slice(startOffset, endOffset);
-              for (var _i2 = 0, _delimiters = delimiters; _i2 < _delimiters.length; _i2++) {
-                var _delimiter = _delimiters[_i2];
-                if (before.endsWith(_delimiter) && after.startsWith(_delimiter)) {
-                  // 删除分隔文本
-                  return {
-                    sourceCode: "".concat(before.slice(0, before.length - _delimiter.length)).concat(_text2).concat(after.slice(_delimiter.length)),
-                    selection: createSelection(anchorOffset - _delimiter.length, focusOffset - _delimiter.length)
-                  };
-                }
-              }
-              var delimiter = delimiters[0];
-              // 插入分隔文本
-              return {
-                sourceCode: "".concat(before).concat(delimiter).concat(_text2).concat(delimiter).concat(after),
-                selection: createSelection(anchorOffset + delimiter.length, focusOffset + delimiter.length)
-              };
+              return toggleDelimiters('*', '_');
             }
           case 'heading':
             {
@@ -123,44 +133,47 @@ var stateReducer = function stateReducer(_ref, action) {
                   _lines[_i4] = "".concat('#'.repeat(depth), " ").concat(_lines[_i4]);
                 }
               }
-              var _text3 = _lines.join('\n');
+              var _text2 = _lines.join('\n');
               return {
-                sourceCode: "".concat(lineBefore).concat(_text3).concat(lineAfter),
-                selection: createSelection(lineStartOffset + _text3.length)
+                sourceCode: "".concat(lineBefore).concat(_text2).concat(lineAfter),
+                selection: createSelection(lineStartOffset + _text2.length)
               };
             }
           case 'image':
           case 'link':
             {
               var _action$payload2 = action.payload,
-                _type2 = _action$payload2.type,
+                _type = _action$payload2.type,
                 url = _action$payload2.url,
                 description = _action$payload2.description;
               return {
-                sourceCode: "".concat(before).concat(_type2 === 'image' ? '!' : '', "[").concat(description, "](").concat(url, ")").concat(after),
-                selection: createSelection(startOffset + url.length + description.length + 4 + (_type2 === 'image' ? 1 : 0))
+                sourceCode: "".concat(before).concat(_type === 'image' ? '!' : '', "[").concat(description, "](").concat(url, ")").concat(after),
+                selection: createSelection(startOffset + url.length + description.length + 4 + (_type === 'image' ? 1 : 0))
               };
             }
+          case 'inlineCode':
+            {
+              return toggleDelimiters('`');
+            }
+          case 'inlineMath':
+            {
+              return toggleDelimiters('$');
+            }
           case 'math':
             {
-              return {
-                sourceCode: "".concat(sourceCode.slice(0, lineEndOffset), "\n$$\n\n$$\n").concat(lineAfter),
-                selection: createSelection(lineEndOffset + 4)
-              };
+              return toggleBlock('$$\n\n$$', 3);
+            }
+          case 'strong':
+            {
+              return toggleDelimiters('**', '__');
             }
           case 'table':
             {
-              return {
-                sourceCode: "".concat(sourceCode.slice(0, lineEndOffset), "\n|  |  |\n| - | - |\n|  |  |\n|  |  |\n").concat(lineAfter),
-                selection: createSelection(lineEndOffset + 3)
-              };
+              return toggleBlock('|  |  |\n| - | - |\n|  |  |\n|  |  |', 2);
             }
           case 'thematicBreak':
             {
-              return {
-                sourceCode: "".concat(sourceCode.slice(0, lineEndOffset), "\n***\n").concat(lineAfter),
-                selection: createSelection(lineEndOffset + 5)
-              };
+              return toggleBlock('***', 4);
             }
           default:
             {
@@ -169,6 +182,20 @@ var stateReducer = function stateReducer(_ref, action) {
             }
         }
       }
+    case 'indent':
+      {
+        var _lineStartOffset = before.lastIndexOf('\n') + 1;
+        var _lineEndOffset = endOffset + "".concat(after, "\n").indexOf('\n');
+        var _lineBefore = sourceCode.slice(0, _lineStartOffset);
+        var _lineAfter = sourceCode.slice(_lineEndOffset);
+        var _text3 = sourceCode.slice(_lineStartOffset, _lineEndOffset).split('\n').map(function (line) {
+          return action.payload.indent ? "\t".concat(line) : line.replace(/^(\t|  )/, '');
+        }).join('\n');
+        return {
+          sourceCode: "".concat(_lineBefore).concat(_text3).concat(_lineAfter),
+          selection: createSelection(_lineStartOffset, _lineStartOffset + _text3.length)
+        };
+      }
     case 'set':
       {
         var _action$payload3 = action.payload,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x-star-editor",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "description": "An editor developed by turingstar",
   "license": "MIT",
   "module": "dist/index.js",
@@ -44,7 +44,7 @@
     ]
   },
   "dependencies": {
-    "@babel/runtime": "^7.22.11",
+    "@babel/runtime": "^7.24.1",
     "ahooks": "^3.7.10",
     "classnames": "^2.3.2",
     "hast-util-to-jsx-runtime": "^1.2.0",
@@ -71,8 +71,8 @@
     "unist-util-visit": "^4.1.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.10",
-    "@babel/preset-typescript": "^7.22.11",
+    "@babel/core": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
     "@types/react": "^18.0.0",