x-star-editor 0.0.2 → 0.0.4

package/dist/components/Toolbar.js

@@ -1,15 +1,19 @@
+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 _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); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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 _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import classNames from 'classnames/bind';
+import classNames from 'classnames';
 import React, { useEffect, useRef, useState } from 'react';
+import { prefix } from "../utils/global";
 import { toggleHandler } from "../utils/handler";
 import FileInput from "./FileInput";
-import styles from "./Toolbar.module.css";
-var cx = classNames.bind(styles);
+import "./Toolbar.less";
 var Button = function Button(_ref) {
   var toolbarRef = _ref.toolbarRef,
     children = _ref.children,
@@ -55,11 +59,9 @@ var Button = function Button(_ref) {
     }
   }, [popoverMount]);
   return /*#__PURE__*/React.createElement("div", {
-    className: cx('button-container')
+    className: classNames("".concat(prefix, "button-container"))
   }, /*#__PURE__*/React.createElement("div", {
-    className: cx('button', {
-      'button-hover': tooltipOpen || popoverMount
-    }),
+    className: classNames("".concat(prefix, "button"), _defineProperty({}, "".concat(prefix, "active"), tooltipOpen || popoverMount)),
     onClick: function onClick() {
       setPopoverOpen(true);
       _onClick === null || _onClick === void 0 ? void 0 : _onClick();
@@ -74,10 +76,10 @@ var Button = function Button(_ref) {
       return setTooltipOpen(false);
     }
   }, children, tooltipMount && /*#__PURE__*/React.createElement("div", {
-    className: cx('tooltip')
+    className: classNames("".concat(prefix, "tooltip"))
   }, tooltip)), popoverMount && /*#__PURE__*/React.createElement("div", {
     ref: popoverRef,
-    className: cx('popover')
+    className: classNames("".concat(prefix, "popover"))
   }, popover));
 };
 export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(onInsertFile) {
@@ -88,7 +90,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(onInsert
       popoverRender: function popoverRender(exec, close) {
         var optionRender = function optionRender(depth, fontSize) {
           return /*#__PURE__*/React.createElement("div", {
-            className: cx('option'),
+            className: classNames("".concat(prefix, "option")),
             style: {
               fontSize: fontSize
             },
@@ -124,7 +126,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(onInsert
     },
     code: {
       children: /*#__PURE__*/React.createElement("div", {
-        className: cx('icon', 'code-library')
+        className: classNames("".concat(prefix, "icon"), "".concat(prefix, "code-library"))
       }),
       tooltip: '代码块',
       onClick: function onClick(exec) {
@@ -135,7 +137,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(onInsert
     },
     emphasis: {
       children: /*#__PURE__*/React.createElement("div", {
-        className: cx('icon', 'italic')
+        className: classNames("".concat(prefix, "icon"), "".concat(prefix, "italic"))
       }),
       tooltip: '斜体',
       onClick: function onClick(exec) {
@@ -146,7 +148,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(onInsert
     },
     strong: {
       children: /*#__PURE__*/React.createElement("div", {
-        className: cx('icon', 'bold')
+        className: classNames("".concat(prefix, "icon"), "".concat(prefix, "bold"))
       }),
       tooltip: '粗体',
       onClick: function onClick(exec) {
@@ -157,7 +159,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(onInsert
     },
     inlineCode: {
       children: /*#__PURE__*/React.createElement("div", {
-        className: cx('icon', 'code')
+        className: classNames("".concat(prefix, "icon"), "".concat(prefix, "code"))
       }),
       tooltip: '行内代码',
       onClick: function onClick(exec) {
@@ -168,7 +170,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(onInsert
     },
     link: {
       children: /*#__PURE__*/React.createElement("div", {
-        className: cx('icon', 'link')
+        className: classNames("".concat(prefix, "icon"), "".concat(prefix, "link"))
       }),
       tooltip: '链接',
       popoverRender: function popoverRender(exec, close) {
@@ -194,7 +196,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(onInsert
     },
     image: {
       children: /*#__PURE__*/React.createElement("div", {
-        className: cx('icon', 'image')
+        className: classNames("".concat(prefix, "icon"), "".concat(prefix, "image"))
       }),
       tooltip: '图片',
       popoverRender: function popoverRender(exec, close) {
@@ -220,7 +222,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(onInsert
     },
     delete: {
       children: /*#__PURE__*/React.createElement("div", {
-        className: cx('icon', 'strikethrough')
+        className: classNames("".concat(prefix, "icon"), "".concat(prefix, "strikethrough"))
       }),
       tooltip: '删除线',
       onClick: function onClick(exec) {
@@ -261,13 +263,13 @@ var Toolbar = function Toolbar(_ref2) {
   var toolbarRef = useRef(null);
   return /*#__PURE__*/React.createElement("div", {
     ref: toolbarRef,
-    className: cx('toolbar', className),
+    className: classNames("".concat(prefix, "toolbar"), className),
     style: style
   }, items.map(function (group, index) {
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: index
     }, !!index && /*#__PURE__*/React.createElement("div", {
-      className: cx('divider')
+      className: classNames("".concat(prefix, "divider"))
     }), group.map(function (item, index) {
       var toolbarItem = typeof item === 'string' ? itemMap[item] : item;
       if (!toolbarItem) {

package/dist/components/Toolbar.less

@@ -0,0 +1,118 @@
+@import '../styles/global.less';
+
+.@{prefix}toolbar {
+  padding: 0.2em;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.2em;
+  font-size: 1.1em;
+  background-color: #f5771210;
+  border: 1px solid #f5771220;
+  border-top-left-radius: 0.2em;
+  border-top-right-radius: 0.2em;
+
+  .@{prefix}button-container {
+    position: relative;
+
+    > .@{prefix}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;
+
+      &.@{prefix}active {
+        background-color: #f8f8f8;
+        border: 1px solid #f5771280;
+        border-radius: 0.2em;
+      }
+
+      .@{prefix}icon {
+        width: 45%;
+        height: 45%;
+        background-size: contain;
+
+        &.@{prefix}code-library {
+          background-image: url('icons/code-library.svg');
+        }
+
+        &.@{prefix}italic {
+          background-image: url('icons/italic.svg');
+        }
+
+        &.@{prefix}bold {
+          background-image: url('icons/bold.svg');
+        }
+
+        &.@{prefix}code {
+          background-image: url('icons/code.svg');
+        }
+
+        &.@{prefix}link {
+          background-image: url('icons/link.svg');
+        }
+
+        &.@{prefix}image {
+          background-image: url('icons/image.svg');
+        }
+
+        &.@{prefix}strikethrough {
+          background-image: url('icons/strikethrough.svg');
+        }
+      }
+
+      .@{prefix}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;
+
+        &::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);
+        }
+      }
+    }
+
+    .@{prefix}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;
+
+      .@{prefix}option {
+        padding: 4px 8px;
+        cursor: pointer;
+        user-select: none;
+
+        &:hover {
+          background-color: #f0f0f0;
+        }
+      }
+    }
+  }
+
+  .@{prefix}divider {
+    margin: 0.4em;
+    border: 1px solid #f5771280;
+  }
+}

package/dist/index.d.ts

@@ -1,8 +1,8 @@
-export { default as XStarEditor } from './XStarEditor';
-export type { XStarMDProps } from './XStarEditor';
-export { default as XStarMdEditor } from './XStarMdEditor';
+export { default as XStarEditor, useEditorRef } from './XStarEditor';
+export type { XStarEditorHandle, XStarEditorProps } from './XStarEditor';
+export { default as XStarMdEditor, useMdEditorRef } from './XStarMdEditor';
 export type { XStarMdEditorHandle, XStarMdEditorPlugin, XStarMdEditorProps, } from './XStarMdEditor';
-export { default as XStarMdViewer } from './XStarMdViewer';
+export { default as XStarMdViewer, useMdViewerRef } from './XStarMdViewer';
 export type { XStarMdViewerHandle, XStarMdViewerPlugin, XStarMdViewerProps, } from './XStarMdViewer';
 export { createSelection, getRange } from './utils/container';
 export { deleteHandler, insertHandler, redoHandler, selectHandler, setHandler, toggleHandler, undoHandler, } from './utils/handler';

package/dist/index.js

@@ -1,5 +1,5 @@
-export { default as XStarEditor } from "./XStarEditor";
-export { default as XStarMdEditor } from "./XStarMdEditor";
-export { default as XStarMdViewer } from "./XStarMdViewer";
+export { default as XStarEditor, useEditorRef } from "./XStarEditor";
+export { default as XStarMdEditor, useMdEditorRef } from "./XStarMdEditor";
+export { default as XStarMdViewer, useMdViewerRef } from "./XStarMdViewer";
 export { createSelection, getRange } from "./utils/container";
 export { deleteHandler, insertHandler, redoHandler, selectHandler, setHandler, toggleHandler, undoHandler } from "./utils/handler";

package/dist/styles/global.less

@@ -0,0 +1 @@
+@prefix: x-star-;

package/dist/styles/{markdown.css → markdown.less}

@@ -1,60 +1,64 @@
-.x-star-md-editor-block {
+@import './global.less';
+
+@md-prefix: ~'@{prefix}md-editor-';
+
+.@{md-prefix}block {
   margin: 0.2em;
   padding: 0.2em;
   border-radius: 0.2em;
 }
 
-.x-star-md-editor-block:hover {
+.@{md-prefix}block:hover {
   background-color: #f8f8f8;
 }
 
-.x-star-md-editor-delimiter,
-.x-star-md-editor-break {
+.@{md-prefix}delimiter,
+.@{md-prefix}break {
   color: #f5771280;
 }
 
-.x-star-md-editor-heading {
+.@{md-prefix}heading {
   font-weight: bold;
 }
 
-.x-star-md-editor-heading1 {
+.@{md-prefix}heading1 {
   font-size: 1.6em;
 }
 
-.x-star-md-editor-heading2 {
+.@{md-prefix}heading2 {
   font-size: 1.3em;
 }
 
-.x-star-md-editor-heading3 {
+.@{md-prefix}heading3 {
   font-size: 1.2em;
 }
 
-.x-star-md-editor-heading4 {
+.@{md-prefix}heading4 {
   font-size: 1.1em;
 }
 
-.x-star-md-editor-heading5 {
+.@{md-prefix}heading5 {
   font-size: 1em;
 }
 
-.x-star-md-editor-heading6 {
+.@{md-prefix}heading6 {
   font-size: 0.9em;
 }
 
-.x-star-md-editor-thematicBreak,
-.x-star-md-editor-listItem > .x-star-md-editor-delimiter,
-.x-star-md-editor-definition,
-.x-star-md-editor-link,
-.x-star-md-editor-image,
-.x-star-md-editor-linkReference,
-.x-star-md-editor-imageReference,
-.x-star-md-editor-footnoteDefinition,
-.x-star-md-editor-footnoteReference {
+.@{md-prefix}thematicBreak,
+.@{md-prefix}listItem > .@{md-prefix}delimiter,
+.@{md-prefix}definition,
+.@{md-prefix}link,
+.@{md-prefix}image,
+.@{md-prefix}linkReference,
+.@{md-prefix}imageReference,
+.@{md-prefix}footnoteDefinition,
+.@{md-prefix}footnoteReference {
   color: #f57712;
 }
 
-.x-star-md-editor-html,
-.x-star-md-editor-code {
+.@{md-prefix}html,
+.@{md-prefix}code {
   padding: 0 0.2em;
   tab-size: 4;
   font-family: Consolas;
@@ -64,19 +68,21 @@
   border-left: 1px solid #02267920;
 }
 
-:is(.x-star-md-editor-html, .x-star-md-editor-code).x-star-md-editor-first {
+.@{md-prefix}html.@{md-prefix}first,
+.@{md-prefix}code.@{md-prefix}first {
   border-top: 1px solid #02267920;
   border-top-left-radius: 0.2em;
   border-top-right-radius: 0.2em;
 }
 
-:is(.x-star-md-editor-html, .x-star-md-editor-code).x-star-md-editor-last {
+.@{md-prefix}html.@{md-prefix}last,
+.@{md-prefix}code.@{md-prefix}last {
   border-bottom: 1px solid #02267920;
   border-bottom-right-radius: 0.2em;
   border-bottom-left-radius: 0.2em;
 }
 
-.x-star-md-editor-inlineCode {
+.@{md-prefix}inlineCode {
   margin: 0 0.2em;
   padding: 0 0.2em;
   tab-size: 4;
@@ -87,19 +93,19 @@
   border-radius: 0.2em;
 }
 
-.x-star-md-editor-emphasis {
+.@{md-prefix}emphasis {
   font-style: italic;
 }
 
-.x-star-md-editor-strong {
+.@{md-prefix}strong {
   font-weight: bold;
 }
 
-.x-star-md-editor-delete > :not(.x-star-md-editor-delimiter) {
+.@{md-prefix}delete > :not(.@{md-prefix}delimiter) {
   text-decoration: line-through;
 }
 
-.x-star-md-editor-math {
+.@{md-prefix}math {
   padding: 0 0.2em;
   color: #f57712;
   background-color: #f5771210;
@@ -107,19 +113,19 @@
   border-left: 1px solid #f5771220;
 }
 
-.x-star-md-editor-math.x-star-md-editor-first {
+.@{md-prefix}math.@{md-prefix}first {
   border-top: 1px solid #f5771220;
   border-top-left-radius: 0.2em;
   border-top-right-radius: 0.2em;
 }
 
-.x-star-md-editor-math.x-star-md-editor-last {
+.@{md-prefix}math.@{md-prefix}last {
   border-bottom: 1px solid #f5771220;
   border-bottom-right-radius: 0.2em;
   border-bottom-left-radius: 0.2em;
 }
 
-.x-star-md-editor-inlineMath {
+.@{md-prefix}inlineMath {
   margin: 0 0.2em;
   padding: 0 0.2em;
   color: #f57712;

package/dist/styles/prism.less

@@ -0,0 +1,171 @@
+/**
+ * VS theme by Andrew Lock (https://andrewlock.net)
+ * Inspired by Visual Studio syntax coloring
+ */
+
+@import './global.less';
+
+.@{prefix}md-viewer.@{prefix}md-viewer {
+  code,
+  pre {
+    color: #393a34;
+    font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier,
+      monospace;
+    direction: ltr;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    font-size: 1em;
+    line-height: 1.2em;
+    tab-size: 4;
+    tab-size: 4;
+    tab-size: 4;
+    hyphens: none;
+    hyphens: none;
+    hyphens: none;
+    hyphens: none;
+  }
+
+  pre > code {
+    font-size: 1.1em;
+  }
+
+  /* Code blocks */
+  pre {
+    padding: 1em;
+    margin: 0.5em 0;
+    overflow: auto;
+    border: 1px solid #ddd;
+    background-color: white;
+  }
+
+  /* Inline code */
+  :not(pre) > code {
+    padding: 0.2em;
+    padding-top: 1px;
+    padding-bottom: 1px;
+    background: #f8f8f8;
+    border: 1px solid #ddd;
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #008000;
+    font-style: italic;
+  }
+
+  .token.namespace {
+    opacity: 0.7;
+  }
+
+  .token.string {
+    color: #a31515;
+  }
+
+  .token.punctuation,
+  .token.operator {
+    color: #393a34; /* no highlight */
+  }
+
+  .token.url,
+  .token.symbol,
+  .token.number,
+  .token.boolean,
+  .token.variable,
+  .token.constant,
+  .token.inserted {
+    color: #36acaa;
+  }
+
+  .token.atrule,
+  .token.keyword,
+  .token.attr-value,
+  .language-autohotkey .token.selector,
+  .language-json .token.boolean,
+  .language-json .token.number,
+  code[class*='language-css'] {
+    color: #00f;
+  }
+
+  .token.function {
+    color: #393a34;
+  }
+
+  .token.deleted,
+  .language-autohotkey .token.tag {
+    color: #9a050f;
+  }
+
+  .token.selector,
+  .language-autohotkey .token.keyword {
+    color: #00009f;
+  }
+
+  .token.important {
+    color: #e90;
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.class-name,
+  .language-json .token.property {
+    color: #2b91af;
+  }
+
+  .token.tag,
+  .token.selector {
+    color: #800000;
+  }
+
+  .token.attr-name,
+  .token.property,
+  .token.regex,
+  .token.entity {
+    color: #f00;
+  }
+
+  .token.directive.tag .tag {
+    background: #ff0;
+    color: #393a34;
+  }
+
+  .line-number::before {
+    content: attr(line);
+    width: 1.6em;
+    margin-right: 0.8em;
+    display: inline-block;
+    text-align: right;
+    color: #2b91af;
+  }
+
+  .code-line {
+    padding-left: 0.4em;
+    display: block;
+    border-left: 4px solid transparent;
+  }
+
+  .highlight-line {
+    background: rgba(193, 222, 241, 20%);
+    background: linear-gradient(
+      left,
+      rgba(193, 222, 241, 20%) 70%,
+      rgba(221, 222, 241, 0%)
+    );
+    background: linear-gradient(
+      to right,
+      rgba(193, 222, 241, 20%) 70%,
+      rgba(221, 222, 241, 0%)
+    );
+    border-left: 4px solid rgb(59, 130, 246);
+  }
+}

package/dist/utils/container.js

@@ -238,7 +238,7 @@ export var useContainer = function useContainer() {
           if (node.nodeType === Node.TEXT_NODE) {
             if (node.nodeValue) {
               offset += targetOffset;
-              if (node.nodeValue[targetOffset - 1] === "\u200B") {
+              if (targetOffset === node.nodeValue.length && node.nodeValue.endsWith("\u200B")) {
                 offset--;
               }
             }
@@ -298,7 +298,7 @@ export var useContainer = function useContainer() {
       var traverse = function traverse(node) {
         if (node.nodeType === Node.TEXT_NODE) {
           if (node.nodeValue) {
-            if (offset < node.nodeValue.length) {
+            if (offset < node.nodeValue.length || offset === node.nodeValue.length && !node.nodeValue.endsWith("\u200B")) {
               return node;
             }
             offset -= node.nodeValue.length;

package/dist/utils/global.d.ts

@@ -0,0 +1 @@
+export declare const prefix = "x-star-";

package/dist/utils/global.js

@@ -0,0 +1 @@
+export var prefix = 'x-star-';

package/dist/utils/markdown.d.ts

@@ -1,5 +1,8 @@
 /// <reference types="react" />
 import type { Components } from 'hast-util-to-jsx-runtime';
+import { defaultSchema } from 'rehype-sanitize';
+type Schema = typeof defaultSchema;
+export declare const getDefaultSchema: () => Schema;
 /**
  * 将 Markdown 文本解析为 Mdast 树并转换为 Hast 树的处理器
  */
@@ -16,6 +19,10 @@ export type MdastNode = ReturnType<(typeof processor)['parse']>['children'][numb
  */
 export declare const editorRender: (sourceCode: string) => HTMLDivElement;
 export interface ViewerOptions {
+    /**
+     * 自定义过滤模式
+     */
+    customSchema: Schema;
     /**
      * 自定义 HTML 元素
      */