x-star-editor 0.0.2

package/dist/styles/markdown.css

@@ -0,0 +1,129 @@
+.x-star-md-editor-block {
+  margin: 0.2em;
+  padding: 0.2em;
+  border-radius: 0.2em;
+}
+
+.x-star-md-editor-block:hover {
+  background-color: #f8f8f8;
+}
+
+.x-star-md-editor-delimiter,
+.x-star-md-editor-break {
+  color: #f5771280;
+}
+
+.x-star-md-editor-heading {
+  font-weight: bold;
+}
+
+.x-star-md-editor-heading1 {
+  font-size: 1.6em;
+}
+
+.x-star-md-editor-heading2 {
+  font-size: 1.3em;
+}
+
+.x-star-md-editor-heading3 {
+  font-size: 1.2em;
+}
+
+.x-star-md-editor-heading4 {
+  font-size: 1.1em;
+}
+
+.x-star-md-editor-heading5 {
+  font-size: 1em;
+}
+
+.x-star-md-editor-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 {
+  color: #f57712;
+}
+
+.x-star-md-editor-html,
+.x-star-md-editor-code {
+  padding: 0 0.2em;
+  tab-size: 4;
+  font-family: Consolas;
+  color: #022679;
+  background-color: #02267910;
+  border-right: 1px solid #02267920;
+  border-left: 1px solid #02267920;
+}
+
+:is(.x-star-md-editor-html, .x-star-md-editor-code).x-star-md-editor-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 {
+  border-bottom: 1px solid #02267920;
+  border-bottom-right-radius: 0.2em;
+  border-bottom-left-radius: 0.2em;
+}
+
+.x-star-md-editor-inlineCode {
+  margin: 0 0.2em;
+  padding: 0 0.2em;
+  tab-size: 4;
+  font-family: Consolas;
+  color: #022679;
+  background-color: #02267910;
+  border: 1px solid #02267920;
+  border-radius: 0.2em;
+}
+
+.x-star-md-editor-emphasis {
+  font-style: italic;
+}
+
+.x-star-md-editor-strong {
+  font-weight: bold;
+}
+
+.x-star-md-editor-delete > :not(.x-star-md-editor-delimiter) {
+  text-decoration: line-through;
+}
+
+.x-star-md-editor-math {
+  padding: 0 0.2em;
+  color: #f57712;
+  background-color: #f5771210;
+  border-right: 1px solid #f5771220;
+  border-left: 1px solid #f5771220;
+}
+
+.x-star-md-editor-math.x-star-md-editor-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 {
+  border-bottom: 1px solid #f5771220;
+  border-bottom-right-radius: 0.2em;
+  border-bottom-left-radius: 0.2em;
+}
+
+.x-star-md-editor-inlineMath {
+  margin: 0 0.2em;
+  padding: 0 0.2em;
+  color: #f57712;
+  background-color: #f5771210;
+  border: 1px solid #f5771220;
+  border-radius: 0.2em;
+}

package/dist/styles/prism.css

@@ -0,0 +1,182 @@
+/**
+ * VS theme by Andrew Lock (https://andrewlock.net)
+ * Inspired by Visual Studio syntax coloring
+ */
+
+.x-star-md-viewer.x-star-md-viewer code,
+.x-star-md-viewer.x-star-md-viewer pre {
+  margin: 0.2em;
+  color: #f57712;
+  border-radius: 0.2em;
+  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: 0.9em;
+  line-height: 1.2em;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+.x-star-md-viewer.x-star-md-viewer pre > code {
+  margin: 0;
+  color: #393a34;
+  font-size: 1em;
+}
+
+.x-star-md-viewer.x-star-md-viewer pre::-moz-selection,
+.x-star-md-viewer.x-star-md-viewer pre ::-moz-selection,
+.x-star-md-viewer.x-star-md-viewer code::-moz-selection,
+.x-star-md-viewer.x-star-md-viewer code ::-moz-selection {
+  background-color: #c1def1;
+}
+
+.x-star-md-viewer.x-star-md-viewer pre::selection,
+.x-star-md-viewer.x-star-md-viewer pre ::selection,
+.x-star-md-viewer.x-star-md-viewer code::selection,
+.x-star-md-viewer.x-star-md-viewer code ::selection {
+  background-color: #c1def1;
+}
+
+/* Code blocks */
+.x-star-md-viewer.x-star-md-viewer pre {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+  border: 1px solid #dddddd;
+  background-color: white;
+}
+
+/* Inline code */
+.x-star-md-viewer.x-star-md-viewer :not(pre) > code {
+  padding: 0.2em;
+  padding-top: 1px;
+  padding-bottom: 1px;
+  background-color: #f8f8f8;
+  border: 1px solid #dddddd;
+}
+
+.x-star-md-viewer .token.comment,
+.x-star-md-viewer .token.prolog,
+.x-star-md-viewer .token.doctype,
+.x-star-md-viewer .token.cdata {
+  color: #008000;
+  font-style: italic;
+}
+
+.x-star-md-viewer .token.namespace {
+  opacity: 0.7;
+}
+
+.x-star-md-viewer .token.string {
+  color: #a31515;
+}
+
+.x-star-md-viewer .token.punctuation,
+.x-star-md-viewer .token.operator {
+  color: #393a34; /* no highlight */
+}
+
+.x-star-md-viewer .token.url,
+.x-star-md-viewer .token.symbol,
+.x-star-md-viewer .token.number,
+.x-star-md-viewer .token.boolean,
+.x-star-md-viewer .token.variable,
+.x-star-md-viewer .token.constant,
+.x-star-md-viewer .token.inserted {
+  color: #36acaa;
+}
+
+.x-star-md-viewer .token.atrule,
+.x-star-md-viewer .token.keyword,
+.x-star-md-viewer .token.attr-value,
+.x-star-md-viewer .language-autohotkey .token.selector,
+.x-star-md-viewer .language-json .token.boolean,
+.x-star-md-viewer .language-json .token.number,
+.x-star-md-viewer code[class*='language-css'] {
+  color: #0000ff;
+}
+
+.x-star-md-viewer .token.function {
+  color: #393a34;
+}
+
+.x-star-md-viewer .token.deleted,
+.x-star-md-viewer .language-autohotkey .token.tag {
+  color: #9a050f;
+}
+
+.x-star-md-viewer .token.selector,
+.x-star-md-viewer .language-autohotkey .token.keyword {
+  color: #00009f;
+}
+
+.x-star-md-viewer .token.important {
+  color: #e90;
+}
+
+.x-star-md-viewer .token.important,
+.x-star-md-viewer .token.bold {
+  font-weight: bold;
+}
+
+.x-star-md-viewer .token.italic {
+  font-style: italic;
+}
+
+.x-star-md-viewer .token.class-name,
+.x-star-md-viewer .language-json .token.property {
+  color: #2b91af;
+}
+
+.x-star-md-viewer .token.tag,
+.x-star-md-viewer .token.selector {
+  color: #800000;
+}
+
+.x-star-md-viewer .token.attr-name,
+.x-star-md-viewer .token.property,
+.x-star-md-viewer .token.regex,
+.x-star-md-viewer .token.entity {
+  color: #ff0000;
+}
+
+.x-star-md-viewer .token.directive.tag .tag {
+  background-color: #ffff00;
+  color: #393a34;
+}
+
+.x-star-md-viewer .line-number::before {
+  width: 2em;
+  margin-right: 16px;
+  margin-left: -8px;
+  display: inline-block;
+  text-align: right;
+  color: #2b91af;
+  content: attr(line);
+}
+
+.x-star-md-viewer .highlight-line {
+  display: block;
+  background-color: rgba(193, 222, 241, 0.2);
+  background-image: -webkit-linear-gradient(
+    left,
+    rgba(193, 222, 241, 0.2) 70%,
+    rgba(221, 222, 241, 0)
+  );
+  background-image: linear-gradient(
+    to right,
+    rgba(193, 222, 241, 0.2) 70%,
+    rgba(221, 222, 241, 0)
+  );
+}

package/dist/utils/container.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+/**
+ * 容器选区，表示从锚点到焦点的文本
+ */
+export interface ContainerSelection {
+    /**
+     * 锚点偏移量
+     */
+    anchorOffset: number;
+    /**
+     * 焦点偏移量
+     */
+    focusOffset: number;
+}
+/**
+ * 创建容器选区
+ *
+ * @param anchorOffset 锚点偏移量
+ * @param focusOffset 焦点偏移量，默认与锚点偏移量相同
+ * @returns 容器选区
+ */
+export declare const createSelection: (anchorOffset: number, focusOffset?: number) => ContainerSelection;
+/**
+ * 根据容器选区获取容器范围
+ *
+ * @param selection 容器选区
+ * @returns 容器范围
+ */
+export declare const getRange: ({ anchorOffset, focusOffset, }: ContainerSelection) => {
+    startOffset: number;
+    endOffset: number;
+};
+/**
+ * 获取一个可以设置文本和选区的容器
+ *
+ * @returns 容器
+ */
+export declare const useContainer: () => {
+    ref: import("react").RefObject<HTMLDivElement>;
+    normalize: () => void;
+    getText: () => string;
+    setText: (text: string) => void;
+    getSelection: () => ContainerSelection;
+    setSelection: ({ anchorOffset, focusOffset }: ContainerSelection) => void;
+};

package/dist/utils/container.js

@@ -0,0 +1,366 @@
+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 _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; }
+import { useEffect, useRef } from 'react';
+import { editorRender } from "./markdown";
+
+/**
+ * 容器选区，表示从锚点到焦点的文本
+ */
+
+/**
+ * 创建容器选区
+ *
+ * @param anchorOffset 锚点偏移量
+ * @param focusOffset 焦点偏移量，默认与锚点偏移量相同
+ * @returns 容器选区
+ */
+export var createSelection = function createSelection(anchorOffset) {
+  var focusOffset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : anchorOffset;
+  return {
+    anchorOffset: anchorOffset,
+    focusOffset: focusOffset
+  };
+};
+
+/**
+ * 根据容器选区获取容器范围
+ *
+ * @param selection 容器选区
+ * @returns 容器范围
+ */
+export var getRange = function getRange(_ref) {
+  var anchorOffset = _ref.anchorOffset,
+    focusOffset = _ref.focusOffset;
+  return {
+    startOffset: anchorOffset < focusOffset ? anchorOffset : focusOffset,
+    endOffset: anchorOffset < focusOffset ? focusOffset : anchorOffset
+  };
+};
+
+/**
+ * 获取一个可以设置文本和选区的容器
+ *
+ * @returns 容器
+ */
+export var useContainer = function useContainer() {
+  /**
+   * 容器挂载的 DOM 节点
+   */
+  var ref = useRef(null);
+
+  /**
+   * 将 DOM 树规范化
+   *
+   * 检查每个行节点的末尾是否为零宽空格，如果不是，则删除行中的零宽空格并在末尾添加零宽空格
+   */
+  var normalize = function normalize() {
+    if (!ref.current) {
+      return;
+    }
+    var traverse = function traverse(node, depth) {
+      if (depth === 2) {
+        var _node$lastChild;
+        // 检查行节点的末尾
+        if (((_node$lastChild = node.lastChild) === null || _node$lastChild === void 0 ? void 0 : _node$lastChild.nodeType) === Node.TEXT_NODE) {
+          var _node$lastChild$nodeV;
+          if ((_node$lastChild$nodeV = node.lastChild.nodeValue) !== null && _node$lastChild$nodeV !== void 0 && _node$lastChild$nodeV.endsWith("\u200B")) {
+            return;
+          }
+        }
+      } else if (depth > 2) {
+        // 删除行中的零宽空格
+        if (node.nodeType === Node.TEXT_NODE) {
+          var _node$nodeValue;
+          if ((_node$nodeValue = node.nodeValue) !== null && _node$nodeValue !== void 0 && _node$nodeValue.includes("\u200B")) {
+            node.nodeValue = node.nodeValue.replace(/\u200B/g, '');
+          }
+          return;
+        }
+      }
+      for (var i = 0; i < node.childNodes.length; i++) {
+        traverse(node.childNodes[i], depth + 1);
+      }
+      if (depth === 2) {
+        // 添加零宽空格
+        node.appendChild(document.createTextNode("\u200B"));
+      }
+    };
+    traverse(ref.current, 0);
+  };
+
+  /**
+   * 获取容器文本
+   *
+   * 在 DOM 树上遍历，将文本节点的值连接起来
+   *
+   * @returns 容器文本
+   */
+  var getText = function getText() {
+    if (!ref.current) {
+      return '';
+    }
+    var text = '';
+    var traverse = function traverse(node) {
+      if (node.nodeType === Node.TEXT_NODE) {
+        if (node.nodeValue) {
+          text += node.nodeValue;
+        }
+      } else {
+        for (var i = 0; i < node.childNodes.length; i++) {
+          traverse(node.childNodes[i]);
+        }
+      }
+    };
+    traverse(ref.current);
+    return text.slice(0, -1).replace(/\u200B/g, '\n');
+  };
+
+  /**
+   * 设置容器文本
+   *
+   * 将文本映射到 DOM 树，用 diff 算法更新 DOM 树
+   *
+   * @param text 容器文本
+   */
+  var setText = function setText(text) {
+    if (!ref.current) {
+      return;
+    }
+
+    /**
+     * 将一棵 DOM 树更新为另一棵 DOM 树
+     *
+     * @param newNode 新节点
+     * @param oldNode 旧节点
+     */
+    var diff = function diff(newNode, oldNode) {
+      var newChild = newNode.firstChild;
+      var oldChild = oldNode.firstChild;
+
+      // 依次更新子节点
+      for (; newChild && oldChild;) {
+        var newNext = newChild.nextSibling;
+        var oldNext = oldChild.nextSibling;
+        if (newChild.nodeName !== oldChild.nodeName) {
+          // 节点名称不同，直接替换
+          oldChild.replaceWith(newChild);
+        } else if (newChild.nodeType === Node.TEXT_NODE) {
+          // 节点均为文本类型，更新文本内容
+          if (newChild.nodeValue !== oldChild.nodeValue) {
+            oldChild.nodeValue = newChild.nodeValue;
+          }
+        } else {
+          // 节点名称相同，更新属性和子节点
+          if (newChild instanceof Element && oldChild instanceof Element) {
+            var _iterator = _createForOfIteratorHelper(oldChild.getAttributeNames()),
+              _step;
+            try {
+              for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                var oldAttrName = _step.value;
+                if (!newChild.hasAttribute(oldAttrName)) {
+                  // 移除新节点没有的属性
+                  oldChild.removeAttribute(oldAttrName);
+                }
+              }
+            } catch (err) {
+              _iterator.e(err);
+            } finally {
+              _iterator.f();
+            }
+            var _iterator2 = _createForOfIteratorHelper(newChild.getAttributeNames()),
+              _step2;
+            try {
+              for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+                var newAttrName = _step2.value;
+                var newAttrValue = newChild.getAttribute(newAttrName);
+                var oldAttrValue = oldChild.getAttribute(newAttrName);
+                if (newAttrValue !== null && newAttrValue !== oldAttrValue) {
+                  oldChild.setAttribute(newAttrName, newAttrValue);
+                }
+              }
+            } catch (err) {
+              _iterator2.e(err);
+            } finally {
+              _iterator2.f();
+            }
+          }
+          diff(newChild, oldChild);
+        }
+        newChild = newNext;
+        oldChild = oldNext;
+      }
+
+      // 移除节点
+      for (; oldChild;) {
+        var _oldNext = oldChild.nextSibling;
+        oldChild.remove();
+        oldChild = _oldNext;
+      }
+
+      // 添加节点
+      for (; newChild;) {
+        var _newNext = newChild.nextSibling;
+        oldNode.appendChild(newChild);
+        newChild = _newNext;
+      }
+    };
+    diff(editorRender(text), ref.current);
+  };
+
+  /**
+   * 获取容器选区
+   *
+   * 用 Selection API 获取选中的 DOM 节点和节点内偏移量，在 DOM 树上遍历获取对应的容器内偏移量
+   *
+   * @returns 容器选区
+   */
+  var getSelection = function getSelection() {
+    var selection = window.getSelection();
+    if (!selection || !selection.anchorNode || !selection.focusNode) {
+      return createSelection(-1);
+    }
+
+    /**
+     * 根据节点和节点内偏移量获取容器内偏移量
+     *
+     * @param targetNode 节点
+     * @param targetOffset 节点内偏移量
+     * @returns 容器内偏移量
+     */
+    var getOffset = function getOffset(targetNode, targetOffset) {
+      if (!ref.current) {
+        return -1;
+      }
+      var offset = 0;
+      var traverse = function traverse(node) {
+        if (node === targetNode) {
+          if (node.nodeType === Node.TEXT_NODE) {
+            if (node.nodeValue) {
+              offset += targetOffset;
+              if (node.nodeValue[targetOffset - 1] === "\u200B") {
+                offset--;
+              }
+            }
+          } else {
+            for (var i = 0; i < targetOffset; i++) {
+              traverse(node.childNodes[i]);
+            }
+          }
+          return true;
+        }
+        if (node.nodeType === Node.TEXT_NODE) {
+          if (node.nodeValue) {
+            offset += node.nodeValue.length;
+          }
+        } else {
+          for (var _i = 0; _i < node.childNodes.length; _i++) {
+            if (traverse(node.childNodes[_i])) {
+              return true;
+            }
+          }
+        }
+      };
+      return traverse(ref.current) ? offset : -1;
+    };
+    return createSelection(getOffset(selection.anchorNode, selection.anchorOffset), getOffset(selection.focusNode, selection.focusOffset));
+  };
+
+  /**
+   * 设置容器选区
+   *
+   * 根据容器内偏移量，在 DOM 树上遍历获取对应的 DOM 节点和节点内偏移量，用 Selection API 选中
+   *
+   * @param selection 容器选区
+   */
+  var setSelection = function setSelection(_ref2) {
+    var anchorOffset = _ref2.anchorOffset,
+      focusOffset = _ref2.focusOffset;
+    var selection = window.getSelection();
+    if (!selection || anchorOffset === -1 || focusOffset === -1) {
+      return;
+    }
+
+    /**
+     * 根据容器内偏移量获取节点和节点内偏移量
+     *
+     * @param targetOffset 容器内偏移量
+     * @returns 节点和节点内偏移量
+     */
+    var getNodeOffset = function getNodeOffset(targetOffset) {
+      if (!ref.current) {
+        return {
+          node: undefined,
+          offset: 0
+        };
+      }
+      var offset = targetOffset;
+      var traverse = function traverse(node) {
+        if (node.nodeType === Node.TEXT_NODE) {
+          if (node.nodeValue) {
+            if (offset < node.nodeValue.length) {
+              return node;
+            }
+            offset -= node.nodeValue.length;
+          }
+        } else {
+          for (var i = 0; i < node.childNodes.length; i++) {
+            var result = traverse(node.childNodes[i]);
+            if (result) {
+              return result;
+            }
+          }
+        }
+      };
+      return {
+        node: traverse(ref.current),
+        offset: offset
+      };
+    };
+    var anchor = getNodeOffset(anchorOffset);
+    var focus = getNodeOffset(focusOffset);
+    if (!anchor.node || !focus.node) {
+      return;
+    }
+    selection.setBaseAndExtent(anchor.node, anchor.offset, focus.node, focus.offset);
+  };
+
+  // 容器选区改变后将光标滚动到视口内
+  useEffect(function () {
+    var listener = function listener() {
+      var selection = window.getSelection();
+      if (!selection || !selection.focusNode || !ref.current || !ref.current.contains(selection.focusNode)) {
+        return;
+      }
+      var range = document.createRange();
+      range.setStart(selection.focusNode, selection.focusOffset);
+      range.setEnd(selection.focusNode, selection.focusOffset);
+      var rangeRect = range.getBoundingClientRect();
+      var containerRect = ref.current.getBoundingClientRect();
+      var topOffset = rangeRect.top - containerRect.top;
+      var bottomOffset = rangeRect.bottom - containerRect.bottom;
+      if (topOffset < 10) {
+        ref.current.scrollTop += topOffset - 10;
+      } else if (bottomOffset > -10) {
+        ref.current.scrollTop += bottomOffset + 10;
+      }
+    };
+    document.addEventListener('selectionchange', listener, {
+      capture: true,
+      passive: true
+    });
+    return function () {
+      return document.removeEventListener('selectionchange', listener, {
+        capture: true
+      });
+    };
+  }, []);
+  return useRef({
+    ref: ref,
+    normalize: normalize,
+    getText: getText,
+    setText: setText,
+    getSelection: getSelection,
+    setSelection: setSelection
+  }).current;
+};