x-star-editor 0.0.4 → 0.0.6

package/dist/XStarEditor/{index.less → _index.scss}

@@ -1,20 +1,20 @@
-@import '../styles/global.less';
+@import '../styles/global';
 
-.@{prefix}editor {
+.#{$prefix}editor {
   display: flex;
   flex-wrap: wrap;
 
-  .@{prefix}toolbar {
+  .#{$prefix}toolbar {
     width: 100%;
   }
 
-  .@{prefix}md-editor {
+  .#{$prefix}md-editor {
     flex: 1;
     border-top: none;
     border-bottom-right-radius: 0;
   }
 
-  .@{prefix}md-viewer {
+  .#{$prefix}md-viewer {
     flex: 1;
     border-top: none;
     border-left: none;

package/dist/XStarEditor/index.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import type { XStarMdEditorHandle, XStarMdEditorProps } from '../XStarMdEditor';
 import type { XStarMdViewerHandle, XStarMdViewerProps } from '../XStarMdViewer';
-import './index.less';
 export interface XStarEditorHandle {
     getEditor: () => XStarMdEditorHandle | null;
     getViewer: () => XStarMdViewerHandle | null;

package/dist/XStarEditor/index.js

@@ -16,7 +16,6 @@ import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
 import XStarMdEditor, { useMdEditorRef } from "../XStarMdEditor";
 import XStarMdViewer, { useMdViewerRef } from "../XStarMdViewer";
 import { prefix } from "../utils/global";
-import "./index.less";
 var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var height = _ref.height,
     initialValue = _ref.initialValue,

package/dist/XStarMdEditor/{index.less → _index.scss}

@@ -1,6 +1,6 @@
-@import '../styles/global.less';
+@import '../styles/global';
 
-.@{prefix}md-editor {
+.#{$prefix}md-editor {
   position: relative;
   line-height: 1.6em;
   white-space: break-spaces;

package/dist/XStarMdEditor/index.d.ts

@@ -1,8 +1,6 @@
 import React from 'react';
 import type { ToolbarItem } from '../components/Toolbar';
-import '../styles/markdown.less';
 import type { Executor, KeyboardEventHandler } from '../utils/handler';
-import './index.less';
 interface EditorOptions {
     /**
      * 工具栏项映射

package/dist/XStarMdEditor/index.js

@@ -1,12 +1,10 @@
 import classNames from 'classnames';
 import React, { useEffect, useImperativeHandle, useRef } from 'react';
 import Toolbar, { getDefaultToolbarItemMap, getDefaultToolbarItems } from "../components/Toolbar";
-import "../styles/markdown.less";
 import { createSelection, getRange, useContainer } from "../utils/container";
 import { prefix } from "../utils/global";
 import { composeHandlers, getDefaultKeyboardEventHandlers } from "../utils/handler";
 import { useHistory } from "../utils/history";
-import "./index.less";
 var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     style = _ref.style,

package/dist/XStarMdViewer/{index.less → _index.scss}

@@ -1,6 +1,6 @@
-@import '../styles/global.less';
+@import '../styles/global';
 
-.@{prefix}md-viewer {
+.#{$prefix}md-viewer {
   position: relative;
   padding: 0 1em;
   color: #000000d9;

package/dist/XStarMdViewer/index.d.ts

@@ -1,8 +1,5 @@
 import React from 'react';
-import '../styles/katex.css';
-import '../styles/prism.less';
 import type { ViewerOptions } from '../utils/markdown';
-import './index.less';
 export interface XStarMdViewerPlugin {
     (ctx: ViewerOptions): void;
 }

package/dist/XStarMdViewer/index.js

@@ -1,11 +1,8 @@
 import classNames from 'classnames';
 import React, { useImperativeHandle, useRef } from 'react';
-import "../styles/katex.css";
-import "../styles/prism.less";
 import { prefix } from "../utils/global";
 import { composeHandlers } from "../utils/handler";
 import { getDefaultSchema, viewerRender } from "../utils/markdown";
-import "./index.less";
 var XStarMdViewer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     style = _ref.style,

package/dist/components/FileInput.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './FileInput.less';
 interface FileInputProps {
     onCancel: () => void;
     onOk: (data: ({

package/dist/components/FileInput.js

@@ -11,7 +11,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import classNames from 'classnames';
 import React, { useState } from 'react';
 import { prefix } from "../utils/global";
-import "./FileInput.less";
 var FileInput = function FileInput(_ref) {
   var _file$name;
   var onCancel = _ref.onCancel,

package/dist/components/Toolbar.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import type { Executor } from '../utils/handler';
-import './Toolbar.less';
 export interface ToolbarItem {
     children: React.ReactNode;
     tooltip?: React.ReactNode;

package/dist/components/Toolbar.js

@@ -13,7 +13,6 @@ import React, { useEffect, useRef, useState } from 'react';
 import { prefix } from "../utils/global";
 import { toggleHandler } from "../utils/handler";
 import FileInput from "./FileInput";
-import "./Toolbar.less";
 var Button = function Button(_ref) {
   var toolbarRef = _ref.toolbarRef,
     children = _ref.children,

package/dist/components/{FileInput.less → _FileInput.scss}

@@ -1,31 +1,31 @@
-@import '../styles/global.less';
+@import '../styles/global';
 
-.@{prefix}file-input {
+.#{$prefix}file-input {
   margin: 0.5em 1em 1em;
 
-  .@{prefix}tabs {
+  .#{$prefix}tabs {
     display: flex;
 
-    .@{prefix}tab {
+    .#{$prefix}tab {
       padding: 0.4em 1em;
       border-bottom: 1px solid #f5771280;
       cursor: pointer;
       user-select: none;
 
-      &.@{prefix}active {
+      &.#{$prefix}active {
         color: #f57712;
         border-bottom: 2px solid #f57712;
       }
     }
   }
 
-  .@{prefix}buttons {
+  .#{$prefix}buttons {
     display: flex;
     flex-direction: row-reverse;
     gap: 0.4em;
   }
 
-  .@{prefix}button {
+  .#{$prefix}button {
     padding: 0.4em 1em;
     background-color: #f0f0f0;
     border: 1px solid #d0d0d0;
@@ -33,21 +33,21 @@
     cursor: pointer;
     user-select: none;
 
-    &.@{prefix}primary {
+    &.#{$prefix}primary {
       color: #fff;
       background-color: #f57712;
       border: none;
     }
   }
 
-  .@{prefix}field {
+  .#{$prefix}field {
     margin: 0.8em;
     display: flex;
     flex-direction: column;
     gap: 0.2em;
     font-size: 0.9em;
 
-    .@{prefix}input {
+    .#{$prefix}input {
       width: 20em;
       padding: 0.4em;
       border: 1px solid #d0d0d0;
@@ -59,23 +59,23 @@
       }
     }
 
-    .@{prefix}file-container {
+    .#{$prefix}file-container {
       position: relative;
       display: flex;
       align-items: center;
       justify-content: space-between;
 
-      .@{prefix}hidden {
+      .#{$prefix}hidden {
         position: absolute;
         inset: 0;
         opacity: 0;
       }
 
-      .@{prefix}input {
+      .#{$prefix}input {
         width: 14em;
       }
 
-      .@{prefix}button {
+      .#{$prefix}button {
         padding: 0.3em 0.4em;
       }
     }

package/dist/components/{Toolbar.less → _Toolbar.scss}

@@ -1,6 +1,6 @@
-@import '../styles/global.less';
+@import '../styles/global';
 
-.@{prefix}toolbar {
+.#{$prefix}toolbar {
   padding: 0.2em;
   display: flex;
   flex-wrap: wrap;
@@ -11,10 +11,10 @@
   border-top-left-radius: 0.2em;
   border-top-right-radius: 0.2em;
 
-  .@{prefix}button-container {
+  .#{$prefix}button-container {
     position: relative;
 
-    > .@{prefix}button {
+    > .#{$prefix}button {
       width: 2em;
       height: 2em;
       display: flex;
@@ -25,47 +25,47 @@
       cursor: pointer;
       user-select: none;
 
-      &.@{prefix}active {
+      &.#{$prefix}active {
         background-color: #f8f8f8;
         border: 1px solid #f5771280;
         border-radius: 0.2em;
       }
 
-      .@{prefix}icon {
+      .#{$prefix}icon {
         width: 45%;
         height: 45%;
         background-size: contain;
 
-        &.@{prefix}code-library {
+        &.#{$prefix}code-library {
           background-image: url('icons/code-library.svg');
         }
 
-        &.@{prefix}italic {
+        &.#{$prefix}italic {
           background-image: url('icons/italic.svg');
         }
 
-        &.@{prefix}bold {
+        &.#{$prefix}bold {
           background-image: url('icons/bold.svg');
         }
 
-        &.@{prefix}code {
+        &.#{$prefix}code {
           background-image: url('icons/code.svg');
         }
 
-        &.@{prefix}link {
+        &.#{$prefix}link {
           background-image: url('icons/link.svg');
         }
 
-        &.@{prefix}image {
+        &.#{$prefix}image {
           background-image: url('icons/image.svg');
         }
 
-        &.@{prefix}strikethrough {
+        &.#{$prefix}strikethrough {
           background-image: url('icons/strikethrough.svg');
         }
       }
 
-      .@{prefix}tooltip {
+      .#{$prefix}tooltip {
         position: absolute;
         top: 3em;
         width: max-content;
@@ -89,7 +89,7 @@
       }
     }
 
-    .@{prefix}popover {
+    .#{$prefix}popover {
       position: absolute;
       width: max-content;
       background-color: #f8f8f8;
@@ -99,7 +99,7 @@
       opacity: 0;
       z-index: 1;
 
-      .@{prefix}option {
+      .#{$prefix}option {
         padding: 4px 8px;
         cursor: pointer;
         user-select: none;
@@ -111,7 +111,7 @@
     }
   }
 
-  .@{prefix}divider {
+  .#{$prefix}divider {
     margin: 0.4em;
     border: 1px solid #f5771280;
   }

package/dist/styles/_global.scss

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

package/dist/styles/{markdown.less → _markdown.scss}

@@ -1,64 +1,65 @@
-@import './global.less';
+@import './global';
 
-@md-prefix: ~'@{prefix}md-editor-';
+$md-prefix: #{$prefix}md-editor-;
 
-.@{md-prefix}block {
+.#{$md-prefix}block {
   margin: 0.2em;
   padding: 0.2em;
   border-radius: 0.2em;
 }
 
-.@{md-prefix}block:hover {
+.#{$md-prefix}block:hover {
   background-color: #f8f8f8;
 }
 
-.@{md-prefix}delimiter,
-.@{md-prefix}break {
+.#{$md-prefix}delimiter,
+.#{$md-prefix}break {
   color: #f5771280;
 }
 
-.@{md-prefix}heading {
+.#{$md-prefix}heading {
+  line-height: 1.6em;
   font-weight: bold;
 }
 
-.@{md-prefix}heading1 {
+.#{$md-prefix}heading1 {
   font-size: 1.6em;
 }
 
-.@{md-prefix}heading2 {
+.#{$md-prefix}heading2 {
   font-size: 1.3em;
 }
 
-.@{md-prefix}heading3 {
+.#{$md-prefix}heading3 {
   font-size: 1.2em;
 }
 
-.@{md-prefix}heading4 {
+.#{$md-prefix}heading4 {
   font-size: 1.1em;
 }
 
-.@{md-prefix}heading5 {
+.#{$md-prefix}heading5 {
   font-size: 1em;
 }
 
-.@{md-prefix}heading6 {
+.#{$md-prefix}heading6 {
   font-size: 0.9em;
 }
 
-.@{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 {
+.#{$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;
 }
 
-.@{md-prefix}html,
-.@{md-prefix}code {
+.#{$md-prefix}html,
+.#{$md-prefix}code {
   padding: 0 0.2em;
   tab-size: 4;
   font-family: Consolas;
@@ -68,21 +69,21 @@
   border-left: 1px solid #02267920;
 }
 
-.@{md-prefix}html.@{md-prefix}first,
-.@{md-prefix}code.@{md-prefix}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;
 }
 
-.@{md-prefix}html.@{md-prefix}last,
-.@{md-prefix}code.@{md-prefix}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;
 }
 
-.@{md-prefix}inlineCode {
+.#{$md-prefix}inlineCode {
   margin: 0 0.2em;
   padding: 0 0.2em;
   tab-size: 4;
@@ -93,19 +94,19 @@
   border-radius: 0.2em;
 }
 
-.@{md-prefix}emphasis {
+.#{$md-prefix}emphasis {
   font-style: italic;
 }
 
-.@{md-prefix}strong {
+.#{$md-prefix}strong {
   font-weight: bold;
 }
 
-.@{md-prefix}delete > :not(.@{md-prefix}delimiter) {
+.#{$md-prefix}delete > :not(.#{$md-prefix}delimiter) {
   text-decoration: line-through;
 }
 
-.@{md-prefix}math {
+.#{$md-prefix}math {
   padding: 0 0.2em;
   color: #f57712;
   background-color: #f5771210;
@@ -113,19 +114,19 @@
   border-left: 1px solid #f5771220;
 }
 
-.@{md-prefix}math.@{md-prefix}first {
+.#{$md-prefix}math.#{$md-prefix}first {
   border-top: 1px solid #f5771220;
   border-top-left-radius: 0.2em;
   border-top-right-radius: 0.2em;
 }
 
-.@{md-prefix}math.@{md-prefix}last {
+.#{$md-prefix}math.#{$md-prefix}last {
   border-bottom: 1px solid #f5771220;
   border-bottom-right-radius: 0.2em;
   border-bottom-left-radius: 0.2em;
 }
 
-.@{md-prefix}inlineMath {
+.#{$md-prefix}inlineMath {
   margin: 0 0.2em;
   padding: 0 0.2em;
   color: #f57712;

package/dist/styles/{prism.less → _prism.scss}

@@ -3,9 +3,9 @@
  * Inspired by Visual Studio syntax coloring
  */
 
-@import './global.less';
+@import './global';
 
-.@{prefix}md-viewer.@{prefix}md-viewer {
+.#{$prefix}md-viewer.#{$prefix}md-viewer {
   code,
   pre {
     color: #393a34;

package/dist/styles/index.scss

@@ -0,0 +1,8 @@
+@import '../components/FileInput';
+@import '../components/Toolbar';
+@import '../XStarEditor/index';
+@import '../XStarMdEditor/index';
+@import '../XStarMdViewer/index';
+@import './katex';
+@import './markdown';
+@import './prism';

package/package.json

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

package/dist/index.d.ts

@@ -1,9 +0,0 @@
-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, 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';
-export type { Handler } from './utils/handler';

package/dist/styles/global.less

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