musae 0.2.26 → 0.3.0

package/dist/components/rate/star.cjs

@@ -0,0 +1,147 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var relax = require('@aiszlab/relax');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var hooks = require('../theme/hooks.cjs');
+var colors = require('../../utils/colors.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+var star = require('../icon/icons/toggle/star.cjs');
+
+var styles = {
+  star: {
+    "default": function _default(props) {
+      return [{
+        position: "musaex-1n2onr6",
+        transition: "musaex-1ng1d19",
+        transitionBehavior: null,
+        transitionDelay: null,
+        transitionDuration: null,
+        transitionProperty: null,
+        transitionTimingFunction: null,
+        cursor: "musaex-1ypdohk",
+        color: "musaex-19dipnz",
+        ":hover_transform": "musaex-1lcra6a",
+        $$css: true
+      }, {
+        "--color": props.color != null ? props.color : "initial"
+      }];
+    },
+    disabled: {
+      cursor: null,
+      ":hover_transform": null,
+      $$css: true
+    }
+  },
+  half: {
+    "default": {
+      position: "musaex-10l6tqk",
+      width: "musaex-1um6o8b",
+      height: "musaex-1xj1dsn",
+      insetInlineStart: "musaex-1o0tod",
+      left: null,
+      right: null,
+      top: "musaex-13vifvy",
+      opacity: "musaex-g01cxk",
+      userSelect: "musaex-87ps6o",
+      overflow: "musaex-b3r6kr",
+      overflowX: null,
+      overflowY: null,
+      $$css: true
+    },
+    checked: function checked(props) {
+      return [{
+        opacity: "musaex-1hc1fzr",
+        color: "musaex-19dipnz",
+        $$css: true
+      }, {
+        "--color": props.color != null ? props.color : "initial"
+      }];
+    }
+  },
+  full: {
+    "default": {
+      userSelect: "musaex-87ps6o",
+      $$css: true
+    },
+    checked: function checked(props) {
+      return [{
+        color: "musaex-19dipnz",
+        $$css: true
+      }, {
+        "--color": props.color != null ? props.color : "initial"
+      }];
+    }
+  }
+};
+var Star = function Star(_ref) {
+  var disabled = _ref.disabled,
+    value = _ref.value,
+    onEnter = _ref.onEnter,
+    at = _ref.at,
+    onLeave = _ref.onLeave,
+    onClick = _ref.onClick;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Rate);
+  var theme = hooks.useTheme();
+  var isHalf = value === 0.5;
+  var isFull = value >= 1;
+  var half = relax.useEvent(function () {
+    onClick(at + 0.5);
+  });
+  var full = relax.useEvent(function () {
+    onClick(at + 1);
+  });
+  var enterHalf = relax.useEvent(function () {
+    onEnter(at + 0.5);
+  });
+  var enterFull = relax.useEvent(function () {
+    onEnter(at + 1);
+  });
+  var _useHover = relax.useHover({
+      onEnter: enterHalf,
+      onLeave: onLeave
+    }),
+    _useHover2 = _slicedToArray(_useHover, 2),
+    halfHoverProps = _useHover2[1];
+  var _useHover3 = relax.useHover({
+      onEnter: enterFull,
+      onLeave: onLeave
+    }),
+    _useHover4 = _slicedToArray(_useHover3, 2),
+    fullHoverProps = _useHover4[1];
+  var styled = {
+    star: stylex.default.props(styles.star["default"]({
+      color: theme.colors[colors.ColorToken.SurfaceContainerHighest]
+    }), disabled && styles.star.disabled),
+    half: stylex.default.props(styles.half["default"], isHalf && styles.half.checked({
+      color: theme.colors[colors.ColorToken.Primary]
+    })),
+    full: stylex.default.props(styles.full["default"], isFull && styles.full.checked({
+      color: theme.colors[colors.ColorToken.Primary]
+    }))
+  };
+  return /*#__PURE__*/React.createElement("li", {
+    className: relax.clsx(classNames[className.RateClassToken.Star], styled.star.className),
+    style: styled.star.style
+  }, /*#__PURE__*/React.createElement("div", _objectSpread({
+    className: relax.clsx(classNames[className.RateClassToken.Half], styled.half.className),
+    style: styled.half.style
+  }, !disabled && _objectSpread(_objectSpread({}, halfHoverProps), {}, {
+    onClick: half
+  })), /*#__PURE__*/React.createElement(star.default, {
+    size: "large"
+  })), /*#__PURE__*/React.createElement("div", _objectSpread({
+    className: relax.clsx(classNames[className.RateClassToken.Full], styled.full.className),
+    style: styled.full.style
+  }, !disabled && _objectSpread(_objectSpread({}, fullHoverProps), {}, {
+    onClick: full
+  })), /*#__PURE__*/React.createElement(star.default, {
+    size: "large"
+  })));
+};
+
+exports.default = Star;

package/dist/components/rate/{star.js → star.mjs}

@@ -2,13 +2,13 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { createElement } from 'react';
 import { useEvent, useHover, clsx } from '@aiszlab/relax';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { RateClassToken } from '../../utils/class-name.js';
-import { useTheme } from '../theme/hooks.js';
-import { ColorToken } from '../../utils/colors.js';
-import { ComponentToken } from '../../utils/component-token.js';
-import _Star from '../icon/icons/toggle/star.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { RateClassToken } from '../../utils/class-name.mjs';
+import { useTheme } from '../theme/hooks.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
+import Star$1 from '../icon/icons/toggle/star.mjs';
 
 var styles = {
   star: {
@@ -130,14 +130,14 @@ var Star = function Star(_ref) {
     style: styled.half.style
   }, !disabled && _objectSpread(_objectSpread({}, halfHoverProps), {}, {
     onClick: half
-  })), /*#__PURE__*/createElement(_Star, {
+  })), /*#__PURE__*/createElement(Star$1, {
     size: "large"
   })), /*#__PURE__*/React.createElement("div", _objectSpread({
     className: clsx(classNames[RateClassToken.Full], styled.full.className),
     style: styled.full.style
   }, !disabled && _objectSpread(_objectSpread({}, fullHoverProps), {}, {
     onClick: full
-  })), /*#__PURE__*/createElement(_Star, {
+  })), /*#__PURE__*/createElement(Star$1, {
     size: "large"
   })));
 };

package/dist/components/rate/types.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps } from "../../types/element";
+import { ComponentProps } from "musae/types/element";
 /**
  * @description
  * rate props

package/dist/components/rich-text-editor/dropdown.cjs

@@ -0,0 +1,80 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _regeneratorRuntime = require('@babel/runtime/helpers/regeneratorRuntime');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var button = require('../button/button.cjs');
+var React = require('react');
+var popover = require('../popover/popover.cjs');
+var menu = require('../menu/menu.cjs');
+var empty = require('../empty/empty.cjs');
+var relax = require('@aiszlab/relax');
+
+var Dropdown = function Dropdown(_ref) {
+  var _items$get;
+  var _ref$items = _ref.items,
+    _items = _ref$items === void 0 ? new Map() : _ref$items,
+    _value = _ref.value,
+    onChange = _ref.onChange,
+    children = _ref.children;
+  var popoverRef = React.useRef(null);
+  var onClick = relax.useEvent(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(key) {
+      var _popoverRef$current;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return (_popoverRef$current = popoverRef.current) === null || _popoverRef$current === void 0 ? void 0 : _popoverRef$current.close()["catch"](function () {
+              return null;
+            });
+          case 2:
+            onChange(key);
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }());
+  var items = React.useMemo(function () {
+    return Array.from(_items).map(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+        key = _ref4[0],
+        item = _ref4[1];
+      return _objectSpread(_objectSpread({}, item), {}, {
+        key: key
+      });
+    });
+  }, [_items]);
+  var value = React.useMemo(function () {
+    return relax.toArray(_value);
+  }, [_value]);
+  var content = React.useMemo(function () {
+    if (items.length === 0) {
+      return /*#__PURE__*/React.createElement(empty.default, null);
+    }
+    return /*#__PURE__*/React.createElement(menu.default, {
+      items: items,
+      onClick: onClick,
+      selectedKeys: relax.toArray(value)
+    });
+  }, [items, onClick, value]);
+  return /*#__PURE__*/React.createElement(popover.default, {
+    content: content,
+    triggerBy: "click",
+    arrow: false,
+    placement: "bottom-start",
+    padding: 4,
+    ref: popoverRef
+  }, /*#__PURE__*/React.createElement(button.Button, {
+    variant: "text",
+    size: "small"
+  }, children !== null && children !== void 0 ? children : (_items$get = _items.get(value[0])) === null || _items$get === void 0 ? void 0 : _items$get.label));
+};
+
+exports.default = Dropdown;

package/dist/components/rich-text-editor/{dropdown.js → dropdown.mjs}

@@ -2,11 +2,11 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
-import Button from '../button/button.js';
+import { Button } from '../button/button.mjs';
 import React, { useRef, useMemo } from 'react';
-import Popover from '../popover/popover.js';
-import Menu from '../menu/menu.js';
-import Empty from '../empty/empty.js';
+import Popover from '../popover/popover.mjs';
+import Menu from '../menu/menu.mjs';
+import Empty from '../empty/empty.mjs';
 import { useEvent, toArray } from '@aiszlab/relax';
 
 var Dropdown = function Dropdown(_ref) {

package/dist/components/rich-text-editor/index.cjs

@@ -0,0 +1,12 @@
+var React = require('react');
+
+var _RichTextEditor = /*#__PURE__*/React.lazy(function () {
+  return Promise.resolve().then(function () { return require('./rich-text-editor.cjs'); });
+});
+var RichTextEditor = function RichTextEditor(props) {
+  return /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: /*#__PURE__*/React.createElement("div", null, "Loading...")
+  }, /*#__PURE__*/React.createElement(_RichTextEditor, props));
+};
+
+exports.RichTextEditor = RichTextEditor;

package/dist/components/rich-text-editor/{index.js → index.mjs}

@@ -1,7 +1,7 @@
 import React, { Suspense, createElement, lazy } from 'react';
 
 var _RichTextEditor = /*#__PURE__*/lazy(function () {
-  return import('./rich-text-editor.js');
+  return import('./rich-text-editor.mjs');
 });
 var RichTextEditor = function RichTextEditor(props) {
   return /*#__PURE__*/React.createElement(Suspense, {

package/dist/components/rich-text-editor/nodes/checkable-list-item.cjs

@@ -0,0 +1,89 @@
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
+var _createClass = require('@babel/runtime/helpers/createClass');
+var _callSuper = require('@babel/runtime/helpers/callSuper');
+var _superPropGet = require('@babel/runtime/helpers/superPropGet');
+var _inherits = require('@babel/runtime/helpers/inherits');
+var list = require('@lexical/list');
+var utils = require('@lexical/utils');
+var relax = require('@aiszlab/relax');
+
+// toggle class names into checkbox element
+var toggleCheckboxClassNames = function toggleCheckboxClassNames(checkbox) {
+  var isChecked = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var theme = arguments.length > 2 ? arguments[2] : undefined;
+  if (!checkbox) return;
+  if (isChecked) {
+    var _theme$checkList, _theme$checkList2;
+    utils.removeClassNamesFromElement(checkbox, (_theme$checkList = theme.checkList) === null || _theme$checkList === void 0 || (_theme$checkList = _theme$checkList.checkbox) === null || _theme$checkList === void 0 ? void 0 : _theme$checkList.unchecked);
+    utils.addClassNamesToElement(checkbox, (_theme$checkList2 = theme.checkList) === null || _theme$checkList2 === void 0 || (_theme$checkList2 = _theme$checkList2.checkbox) === null || _theme$checkList2 === void 0 ? void 0 : _theme$checkList2.checked);
+  } else {
+    var _theme$checkList3, _theme$checkList4;
+    utils.removeClassNamesFromElement(checkbox, (_theme$checkList3 = theme.checkList) === null || _theme$checkList3 === void 0 || (_theme$checkList3 = _theme$checkList3.checkbox) === null || _theme$checkList3 === void 0 ? void 0 : _theme$checkList3.checked);
+    utils.addClassNamesToElement(checkbox, (_theme$checkList4 = theme.checkList) === null || _theme$checkList4 === void 0 || (_theme$checkList4 = _theme$checkList4.checkbox) === null || _theme$checkList4 === void 0 ? void 0 : _theme$checkList4.unchecked);
+  }
+};
+var CheckableListItemNode = /*#__PURE__*/function (_ListItemNode) {
+  function CheckableListItemNode() {
+    _classCallCheck(this, CheckableListItemNode);
+    return _callSuper(this, CheckableListItemNode, arguments);
+  }
+  _inherits(CheckableListItemNode, _ListItemNode);
+  return _createClass(CheckableListItemNode, [{
+    key: "exportJSON",
+    value: function exportJSON() {
+      return _objectSpread(_objectSpread({}, _superPropGet(CheckableListItemNode, "exportJSON", this, 3)([])), {}, {
+        checked: this.getChecked(),
+        type: this.getType(),
+        value: this.getValue(),
+        version: 1
+      });
+    }
+  }, {
+    key: "createDOM",
+    value: function createDOM(config) {
+      var listItem = _superPropGet(CheckableListItemNode, "createDOM", this, 3)([config]);
+      var parent = this.getParent();
+      var isCheckList = list.$isListNode(parent) && parent.getListType() === "check";
+      if (!isCheckList) return listItem;
+      var isChecked = this.getChecked();
+      var checkbox = document.createElement("input");
+      checkbox.setAttribute("type", "checkbox");
+      toggleCheckboxClassNames(checkbox, isChecked, config.theme);
+      listItem.appendChild(checkbox);
+      return listItem;
+    }
+  }, {
+    key: "updateDOM",
+    value: function updateDOM(prevNode, dom, config) {
+      _superPropGet(CheckableListItemNode, "updateDOM", this, 3)([prevNode, dom, config]);
+      var checkbox = dom.firstElementChild;
+      toggleCheckboxClassNames(relax.isHTMLElement(checkbox) ? checkbox : null, this.getChecked(), config.theme);
+      return true;
+    }
+  }], [{
+    key: "getType",
+    value: function getType() {
+      return "checkable-list-item";
+    }
+  }, {
+    key: "clone",
+    value: function clone(node) {
+      return new CheckableListItemNode(node.__value, node.__checked, node.__key);
+    }
+  }, {
+    key: "importJSON",
+    value: function importJSON(serializedNode) {
+      return _superPropGet(CheckableListItemNode, "importJSON", this, 2)([serializedNode]);
+    }
+  }]);
+}(list.ListItemNode);
+var replacement = {
+  replace: list.ListItemNode,
+  "with": function _with(node) {
+    return new CheckableListItemNode(node.getValue(), node.getChecked());
+  }
+};
+
+exports.CheckableListItemNode = CheckableListItemNode;
+exports.replacement = replacement;

package/dist/components/rich-text-editor/plugins/check-list/index.cjs

@@ -0,0 +1,49 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var list = require('@lexical/list');
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var lexical = require('lexical');
+var relax = require('@aiszlab/relax');
+
+var CheckListPlugin = function CheckListPlugin() {
+  var _useLexicalComposerCo = LexicalComposerContext.useLexicalComposerContext(),
+    _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var onEditorClick = relax.useEvent(function (event) {
+    if (!editor.isEditable()) return;
+    var target = event.target;
+    // skip when target is not checkbox
+    if (!target) return;
+    if (!relax.isHTMLInputElement(target)) return;
+    var isCheckbox = target.getAttribute("type") === "checkbox";
+    if (!isCheckbox) return;
+    editor.update(function () {
+      var node = lexical.$getNearestNodeFromDOMNode(target);
+      if (!list.$isListItemNode(node)) return;
+      target.focus();
+      node.toggleChecked();
+    });
+  });
+  relax.useMounted(function () {
+    var unregister = relax.chain(editor.registerCommand(list.INSERT_CHECK_LIST_COMMAND, function () {
+      list.insertList(editor, "check");
+      return true;
+    }, lexical.COMMAND_PRIORITY_LOW), editor.registerRootListener(function (rootElement, prevRootElement) {
+      if (rootElement !== null) {
+        rootElement.addEventListener("click", onEditorClick);
+        //   rootElement.addEventListener("pointerdown", handlePointerDown);
+      }
+      if (prevRootElement !== null) {
+        prevRootElement.removeEventListener("click", onEditorClick);
+        //   prevRootElement.removeEventListener("pointerdown", handlePointerDown);
+      }
+    }));
+    return function () {
+      unregister();
+    };
+  });
+  return null;
+};
+
+exports.default = CheckListPlugin;

package/dist/components/rich-text-editor/plugins/controlled-state/index.cjs

@@ -0,0 +1,45 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var relax = require('@aiszlab/relax');
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var LexicalOnChangePlugin = require('@lexical/react/LexicalOnChangePlugin');
+var markdown = require('@lexical/markdown');
+var index = require('../markdown-shortcut/index.cjs');
+
+var ControlledStatePlugin = function ControlledStatePlugin(_ref) {
+  var value = _ref.value,
+    _use = _ref.use,
+    onChange = _ref.onChange;
+  var _useLexicalComposerCo = LexicalComposerContext.useLexicalComposerContext(),
+    _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  relax.useUpdateEffect(function () {
+    if (relax.isUndefined(value)) return;
+    try {
+      var editorState = editor.parseEditorState(value);
+      editor.setEditorState(editorState);
+    } catch (error) {
+      console.error(error);
+    }
+  }, [value, editor]);
+  var change = relax.useEvent(function (state, editor) {
+    var _value = JSON.stringify(state.toJSON());
+    onChange === null || onChange === void 0 || onChange(_value);
+    editor.read(function () {
+      var _value = JSON.stringify(state.toJSON());
+      if (_use === "serialized") {
+        onChange === null || onChange === void 0 || onChange(_value);
+        return;
+      }
+      var markdown$1 = markdown.$convertToMarkdownString(index.TRANSFORMERS, state._nodeMap.get("root"));
+      onChange === null || onChange === void 0 || onChange(markdown$1);
+    });
+  });
+  return /*#__PURE__*/React.createElement(LexicalOnChangePlugin.OnChangePlugin, {
+    onChange: change
+  });
+};
+
+exports.default = ControlledStatePlugin;

package/dist/components/rich-text-editor/plugins/controlled-state/{index.js → index.mjs}

@@ -4,7 +4,7 @@ import { useUpdateEffect, isUndefined, useEvent } from '@aiszlab/relax';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
 import { $convertToMarkdownString } from '@lexical/markdown';
-import { TRANSFORMERS } from '../markdown-shortcut/index.js';
+import { TRANSFORMERS } from '../markdown-shortcut/index.mjs';
 
 var ControlledStatePlugin = function ControlledStatePlugin(_ref) {
   var value = _ref.value,

package/dist/components/rich-text-editor/plugins/floating-link-editor/index.cjs

@@ -0,0 +1,123 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _regeneratorRuntime = require('@babel/runtime/helpers/regeneratorRuntime');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var popper = require('../../../popper/popper.cjs');
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var getElementByNode = require('../../utils/get-element-by-node.cjs');
+var link = require('@lexical/link');
+var relax = require('@aiszlab/relax');
+var space = require('../../../space/space.cjs');
+var button = require('../../../button/button.cjs');
+var index = require('../../../form/index.cjs');
+var input = require('../../../input/input.cjs');
+var hooks = require('../../../form/hooks.cjs');
+var lexical = require('lexical');
+var openInNew = require('../../../icon/icons/action/open-in-new.cjs');
+var edit = require('../../../icon/icons/image/edit.cjs');
+var linkOff = require('../../../icon/icons/content/link-off.cjs');
+
+var FloatingLinkEditorPlugin = function FloatingLinkEditorPlugin(_ref) {
+  var link$1 = _ref.link;
+  var _useLexicalComposerCo = LexicalComposerContext.useLexicalComposerContext(),
+    _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var _useBoolean = relax.useBoolean(),
+    _useBoolean2 = _slicedToArray(_useBoolean, 2),
+    isEditable = _useBoolean2[0],
+    _useBoolean2$ = _useBoolean2[1],
+    turnOn = _useBoolean2$.turnOn,
+    turnOff = _useBoolean2$.turnOff;
+  var form = hooks.useForm();
+  var trigger = React.useMemo(function () {
+    return getElementByNode.getElementByNode(editor, link$1);
+  }, [editor, link$1]);
+  var styled = {
+    className: "musaex-1fap3ks"
+  };
+  var updateLink = relax.useEvent(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var isValid, _form$getValues, href, title;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return form.trigger()["catch"](function () {
+            return false;
+          });
+        case 2:
+          isValid = _context.sent;
+          if (isValid) {
+            _context.next = 5;
+            break;
+          }
+          return _context.abrupt("return");
+        case 5:
+          _form$getValues = form.getValues(), href = _form$getValues.href, title = _form$getValues.title;
+          editor.update(function () {
+            if (!link$1) return;
+            var linkNode = link.$createLinkNode(href);
+            linkNode.append(lexical.$createTextNode(title));
+            linkNode.select();
+            link$1.replace(linkNode, false);
+          });
+          turnOff();
+        case 8:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  var edit$1 = function edit() {
+    if (!link$1) return;
+    editor.read(function () {
+      var href = link$1.getURL();
+      form.setValue("href", href);
+      turnOn();
+    });
+  };
+  var linkOff$1 = function linkOff() {
+    editor.dispatchCommand(link.TOGGLE_LINK_COMMAND, null);
+  };
+  var openLink = function openLink() {
+    if (!link$1) return;
+    window.open(link$1.getURL());
+  };
+  return /*#__PURE__*/React.createElement(popper.default, {
+    open: !!link$1,
+    trigger: trigger,
+    className: styled.className,
+    style: styled.style,
+    onExited: turnOff
+  }, !isEditable && (/*#__PURE__*/React.createElement(space.default, null, /*#__PURE__*/React.createElement(button.Button, {
+    variant: "text",
+    shape: "circular",
+    size: "small",
+    onClick: openLink
+  }, /*#__PURE__*/React.createElement(openInNew.default, null)), /*#__PURE__*/React.createElement(button.Button, {
+    variant: "text",
+    shape: "circular",
+    size: "small",
+    onClick: edit$1
+  }, /*#__PURE__*/React.createElement(edit.default, null)), /*#__PURE__*/React.createElement(button.Button, {
+    variant: "text",
+    shape: "circular",
+    size: "small",
+    onClick: linkOff$1
+  }, /*#__PURE__*/React.createElement(linkOff.default, null)))), isEditable && (/*#__PURE__*/React.createElement(index.Form, {
+    form: form
+  }, /*#__PURE__*/React.createElement(index.Form.Item, {
+    name: "title",
+    label: "\u6807\u9898"
+  }, /*#__PURE__*/React.createElement(input.default, null)), /*#__PURE__*/React.createElement(index.Form.Item, {
+    name: "href",
+    label: "\u94FE\u63A5"
+  }, /*#__PURE__*/React.createElement(input.default, null)), /*#__PURE__*/React.createElement(button.Button, {
+    variant: "filled",
+    size: "small",
+    onClick: updateLink
+  }, "\u786E\u5B9A"))));
+};
+
+exports.default = FloatingLinkEditorPlugin;

package/dist/components/rich-text-editor/plugins/floating-link-editor/{index.js → index.mjs}

@@ -2,20 +2,20 @@ import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useMemo } from 'react';
-import Popper from '../../../popper/popper.js';
+import Popper from '../../../popper/popper.mjs';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { getElementByNode } from '../../utils/get-element-by-node.js';
+import { getElementByNode } from '../../utils/get-element-by-node.mjs';
 import { $createLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
 import { useBoolean, useEvent } from '@aiszlab/relax';
-import Space from '../../../space/space.js';
-import Button from '../../../button/button.js';
-import { Form } from '../../../form/index.js';
-import Input from '../../../input/input.js';
-import { useForm } from '../../../form/hooks.js';
+import Space from '../../../space/space.mjs';
+import { Button } from '../../../button/button.mjs';
+import { Form } from '../../../form/index.mjs';
+import Input from '../../../input/input.mjs';
+import { useForm } from '../../../form/hooks.mjs';
 import { $createTextNode } from 'lexical';
-import OpenInNew from '../../../icon/icons/action/open-in-new.js';
-import Edit from '../../../icon/icons/image/edit.js';
-import LinkOff from '../../../icon/icons/content/link-off.js';
+import OpenInNew from '../../../icon/icons/action/open-in-new.mjs';
+import Edit from '../../../icon/icons/image/edit.mjs';
+import LinkOff from '../../../icon/icons/content/link-off.mjs';
 
 var FloatingLinkEditorPlugin = function FloatingLinkEditorPlugin(_ref) {
   var link = _ref.link;