x-star-editor 0.0.8 → 0.0.9

package/dist/components/Toolbar.js

@@ -128,10 +128,20 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(onInsert
         className: classNames("".concat(prefix, "icon"), "".concat(prefix, "code-library"))
       }),
       tooltip: '代码块',
-      onClick: function onClick(exec) {
-        return exec(toggleHandler({
-          type: 'code'
-        }));
+      popoverRender: function popoverRender(exec, close) {
+        var optionRender = function optionRender(label, language) {
+          return /*#__PURE__*/React.createElement("div", {
+            className: classNames("".concat(prefix, "option")),
+            onClick: function onClick() {
+              exec(toggleHandler({
+                type: 'code',
+                language: language
+              }));
+              close();
+            }
+          }, label);
+        };
+        return /*#__PURE__*/React.createElement(React.Fragment, null, optionRender('C++', 'cpp'), optionRender('Java', 'java'), optionRender('Python', 'py'), optionRender('Text', 'txt'));
       }
     },
     emphasis: {

package/dist/styles/index.css

@@ -176,15 +176,17 @@
 }
 .x-star-editor .x-star-md-editor {
   flex: 1;
-  border-top: none;
+  border-right: none;
   border-bottom-right-radius: 0;
 }
 .x-star-editor .x-star-md-viewer {
+  padding: 0 1em;
   flex: 1;
+  background-color: white;
+  border: 1px solid #d0d0d0;
   border-top: none;
-  border-left: none;
-  border-radius: 0;
   border-bottom-right-radius: 0.2em;
+  overflow: auto;
 }
 
 .x-star-md-editor {
@@ -194,6 +196,7 @@
   color: rgba(0, 0, 0, 0.8509803922);
   background-color: white;
   border: 1px solid #d0d0d0;
+  border-top: none;
   border-bottom-right-radius: 0.2em;
   border-bottom-left-radius: 0.2em;
   outline: none;
@@ -205,12 +208,7 @@
 
 .x-star-md-viewer {
   position: relative;
-  padding: 0 1em;
   color: rgba(0, 0, 0, 0.8509803922);
-  background-color: white;
-  border: 1px solid #d0d0d0;
-  border-radius: 0.2em;
-  overflow: auto;
 }
 .x-star-md-viewer ::selection {
   background: #c1def1;

package/dist/utils/history.d.ts

@@ -28,7 +28,10 @@ export interface ToggleAction {
         type: 'heading';
         depth: 1 | 2 | 3 | 4 | 5 | 6;
     } | {
-        type: 'thematicBreak' | 'blockquote' | 'code' | 'emphasis' | 'strong' | 'inlineCode' | 'delete' | 'math' | 'inlineMath';
+        type: 'code';
+        language: string;
+    } | {
+        type: 'thematicBreak' | 'blockquote' | 'emphasis' | 'strong' | 'inlineCode' | 'delete' | 'math' | 'inlineMath';
     } | {
         type: 'link' | 'image';
         url: string;

package/dist/utils/history.js

@@ -112,6 +112,14 @@ var stateReducer = function stateReducer(_ref, action) {
                 selection: createSelection(lineStartOffset + _text.length)
               };
             }
+          case 'code':
+            {
+              var language = action.payload.language;
+              return {
+                sourceCode: "".concat(sourceCode.slice(0, lineEndOffset), "\n```").concat(language, " showLineNumbers\n\n```\n").concat(lineAfter),
+                selection: createSelection(lineEndOffset + language.length + 21)
+              };
+            }
           case 'thematicBreak':
             {
               return {
@@ -143,14 +151,11 @@ var stateReducer = function stateReducer(_ref, action) {
                 selection: createSelection(lineStartOffset + _text2.length)
               };
             }
-          case 'code':
           case 'math':
             {
-              var type = action.payload.type;
-              var delimiter = type === 'code' ? '```' : '$$';
               return {
-                sourceCode: "".concat(sourceCode.slice(0, lineEndOffset), "\n").concat(delimiter, "\n\n").concat(delimiter, "\n").concat(lineAfter),
-                selection: createSelection(lineEndOffset + delimiter.length + 2)
+                sourceCode: "".concat(sourceCode.slice(0, lineEndOffset), "\n$$\n\n$$\n").concat(lineAfter),
+                selection: createSelection(lineEndOffset + 4)
               };
             }
           case 'emphasis':
@@ -159,8 +164,8 @@ var stateReducer = function stateReducer(_ref, action) {
           case 'delete':
           case 'inlineMath':
             {
-              var _type = action.payload.type;
-              var delimiters = _type === 'emphasis' ? ['*', '_'] : _type === 'strong' ? ['**', '__'] : _type === 'inlineCode' ? ['`'] : _type === 'delete' ? ['~~'] : ['$'];
+              var type = action.payload.type;
+              var delimiters = type === 'emphasis' ? ['*', '_'] : type === 'strong' ? ['**', '__'] : type === 'inlineCode' ? ['`'] : type === 'delete' ? ['~~'] : ['$'];
               var _text3 = sourceCode.slice(startOffset, endOffset);
               for (var _i4 = 0, _delimiters = delimiters; _i4 < _delimiters.length; _i4++) {
                 var _delimiter = _delimiters[_i4];
@@ -172,23 +177,23 @@ var stateReducer = function stateReducer(_ref, action) {
                   };
                 }
               }
-              var _delimiter2 = delimiters[0];
+              var delimiter = delimiters[0];
               // 插入分隔文本
               return {
-                sourceCode: "".concat(before).concat(_delimiter2).concat(_text3).concat(_delimiter2).concat(after),
-                selection: createSelection(anchorOffset + _delimiter2.length, focusOffset + _delimiter2.length)
+                sourceCode: "".concat(before).concat(delimiter).concat(_text3).concat(delimiter).concat(after),
+                selection: createSelection(anchorOffset + delimiter.length, focusOffset + delimiter.length)
               };
             }
           case 'link':
           case 'image':
             {
               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 === 'link' ? '' : '!', "[").concat(description, "](").concat(url, ")").concat(after),
-                selection: createSelection(startOffset + url.length + description.length + 4 + (_type2 === 'link' ? 0 : 1))
+                sourceCode: "".concat(before).concat(_type === 'link' ? '' : '!', "[").concat(description, "](").concat(url, ")").concat(after),
+                selection: createSelection(startOffset + url.length + description.length + 4 + (_type === 'link' ? 0 : 1))
               };
             }
           default:

package/dist/utils/markdown.js

@@ -28,16 +28,19 @@ import remarkStringify from 'remark-stringify';
 import { unified } from 'unified';
 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;
+  var _defaultSchema$attrib, _defaultSchema$attrib2, _defaultSchema$attrib3, _defaultSchema$attrib4, _defaultSchema$attrib5, _defaultSchema$attrib6, _defaultSchema$attrib7, _defaultSchema$attrib8, _defaultSchema$protoc, _defaultSchema$protoc2, _defaultSchema$tagNam;
   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']
-    })
+    }),
+    protocols: _objectSpread(_objectSpread({}, defaultSchema.protocols), {}, {
+      src: [].concat(_toConsumableArray((_defaultSchema$protoc = (_defaultSchema$protoc2 = defaultSchema.protocols) === null || _defaultSchema$protoc2 === void 0 ? void 0 : _defaultSchema$protoc2.src) !== null && _defaultSchema$protoc !== void 0 ? _defaultSchema$protoc : []), ['data'])
+    }),
+    tagNames: [].concat(_toConsumableArray((_defaultSchema$tagNam = defaultSchema.tagNames) !== null && _defaultSchema$tagNam !== void 0 ? _defaultSchema$tagNam : []), ['custom'])
   });
 };
 
@@ -59,25 +62,7 @@ var processor = unified().use(remarkParse).use(remarkBreaks).use(remarkGfm).use(
   }
 }).use(rehypePrism, {
   ignoreMissing: true
-}).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();
+}).use(rehypeKatex).use(rehypeRaw).freeze();
 
 /**
  * Mdast 节点
@@ -235,14 +220,14 @@ export var editorRender = function editorRender(sourceCode) {
    * @param parentEndOffset 父节点终点偏移量
    */
   var getChildren = function getChildren(nodes, parentEndOffset) {
-    var _iterator2 = _createForOfIteratorHelper(nodes),
-      _step2;
+    var _iterator = _createForOfIteratorHelper(nodes),
+      _step;
     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;
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var _node$position, _node$position2;
+        var node = _step.value;
+        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;
         }
@@ -272,11 +257,11 @@ export var editorRender = function editorRender(sourceCode) {
         if (stack.length > 1) {
           pushElement(stack.length - 1, true);
         } else {
-          var _node$position4;
+          var _node$position3;
           // 如果栈大小为 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));
+          block.setAttribute('line', "".concat((_node$position3 = node.position) === null || _node$position3 === void 0 ? void 0 : _node$position3.start.line));
           pushBlock();
           scanOffset++;
         }
@@ -285,9 +270,9 @@ export var editorRender = function editorRender(sourceCode) {
 
       // 添加扫描偏移量与父节点终点偏移量间的分隔文本
     } catch (err) {
-      _iterator2.e(err);
+      _iterator.e(err);
     } finally {
-      _iterator2.f();
+      _iterator.f();
     }
     addText(sourceCode.slice(scanOffset, parentEndOffset), true);
   };
@@ -307,7 +292,25 @@ export var editorRender = function editorRender(sourceCode) {
  * @returns React 虚拟 DOM 树
  */
 export var viewerRender = function viewerRender(sourceCode, options) {
-  return toJsxRuntime(processor().use(rehypeSanitize, options.customSchema).runSync(processor.parse(sourceCode)), {
+  return toJsxRuntime(processor().use(rehypeSanitize, options.customSchema).use(function () {
+    return function (root) {
+      var _iterator2 = _createForOfIteratorHelper(root.children),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var node = _step2.value;
+          if ('properties' in node && node.properties) {
+            var _node$position4;
+            node.properties.line = (_node$position4 = node.position) === null || _node$position4 === void 0 ? void 0 : _node$position4.start.line;
+          }
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+    };
+  }).runSync(processor.parse(sourceCode)), {
     Fragment: Fragment,
     jsx: jsx,
     jsxs: jsxs,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x-star-editor",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "An editor developed by turingstar",
   "license": "MIT",
   "module": "dist/index.js",