musae 0.2.26 → 0.3.1

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;

package/dist/components/rich-text-editor/plugins/markdown-shortcut/index.cjs

@@ -0,0 +1,16 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var LexicalMarkdownShortcutPlugin = require('@lexical/react/LexicalMarkdownShortcutPlugin');
+var React = require('react');
+var markdown = require('@lexical/markdown');
+
+var TRANSFORMERS = [].concat(_toConsumableArray(markdown.ELEMENT_TRANSFORMERS), _toConsumableArray(markdown.TEXT_FORMAT_TRANSFORMERS), _toConsumableArray(markdown.TEXT_MATCH_TRANSFORMERS));
+var MarkdownShortcutPlugin = function MarkdownShortcutPlugin() {
+  return /*#__PURE__*/React.createElement(LexicalMarkdownShortcutPlugin.MarkdownShortcutPlugin, {
+    transformers: TRANSFORMERS
+  });
+};
+
+exports.TRANSFORMERS = TRANSFORMERS;
+exports.default = MarkdownShortcutPlugin;

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

@@ -1,14 +1,13 @@
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import { MarkdownShortcutPlugin as MarkdownShortcutPlugin$2 } from '@lexical/react/LexicalMarkdownShortcutPlugin';
+import { MarkdownShortcutPlugin as MarkdownShortcutPlugin$1 } from '@lexical/react/LexicalMarkdownShortcutPlugin';
 import { createElement } from 'react';
 import { ELEMENT_TRANSFORMERS, TEXT_FORMAT_TRANSFORMERS, TEXT_MATCH_TRANSFORMERS } from '@lexical/markdown';
 
 var TRANSFORMERS = [].concat(_toConsumableArray(ELEMENT_TRANSFORMERS), _toConsumableArray(TEXT_FORMAT_TRANSFORMERS), _toConsumableArray(TEXT_MATCH_TRANSFORMERS));
 var MarkdownShortcutPlugin = function MarkdownShortcutPlugin() {
-  return /*#__PURE__*/createElement(MarkdownShortcutPlugin$2, {
+  return /*#__PURE__*/createElement(MarkdownShortcutPlugin$1, {
     transformers: TRANSFORMERS
   });
 };
-var MarkdownShortcutPlugin$1 = MarkdownShortcutPlugin;
 
-export { TRANSFORMERS, MarkdownShortcutPlugin$1 as default };
+export { TRANSFORMERS, MarkdownShortcutPlugin as default };

package/dist/components/rich-text-editor/plugins/toolbar/hooks.cjs

@@ -0,0 +1,265 @@
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var link = require('@lexical/link');
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var lexical = require('lexical');
+var React = require('react');
+var selection = require('@lexical/selection');
+var richText = require('@lexical/rich-text');
+var list = require('@lexical/list');
+var code = require('@lexical/code');
+var notes = require('../../../icon/icons/editor/notes.cjs');
+var formatStrikethrough = require('../../../icon/icons/editor/format-strikethrough.cjs');
+var subscript = require('../../../icon/icons/editor/subscript.cjs');
+var superscript = require('../../../icon/icons/editor/superscript.cjs');
+var checklist = require('../../../icon/icons/editor/checklist.cjs');
+var looksOne = require('../../../icon/icons/image/looks-one.cjs');
+var looksTwo = require('../../../icon/icons/image/looks-two.cjs');
+var looksThree = require('../../../icon/icons/image/looks-three.cjs');
+var looksFour = require('../../../icon/icons/image/looks-four.cjs');
+var looksFive = require('../../../icon/icons/image/looks-five.cjs');
+var looksSix = require('../../../icon/icons/image/looks-six.cjs');
+
+var DEFAULT_FONT_SIZE = "15px";
+/**
+ * @description
+ * toolbar event handlers
+ */
+var useHandlers = function useHandlers(_ref) {
+  var isLink = _ref.isLink;
+  var _useLexicalComposerCo = LexicalComposerContext.useLexicalComposerContext(),
+    _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var bold = function bold() {
+    editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "bold");
+  };
+  var redo = function redo() {
+    editor.dispatchCommand(lexical.REDO_COMMAND, void 0);
+  };
+  var undo = function undo() {
+    editor.dispatchCommand(lexical.UNDO_COMMAND, void 0);
+  };
+  var code = function code() {
+    editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "code");
+  };
+  var italic = function italic() {
+    editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "italic");
+  };
+  var underline = function underline() {
+    editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "underline");
+  };
+  var insertLink = function insertLink() {
+    if (!isLink) {
+      editor.dispatchCommand(link.TOGGLE_LINK_COMMAND, "https://");
+    } else {
+      editor.dispatchCommand(link.TOGGLE_LINK_COMMAND, null);
+    }
+  };
+  return {
+    bold: bold,
+    redo: redo,
+    undo: undo,
+    code: code,
+    italic: italic,
+    underline: underline,
+    insertLink: insertLink
+  };
+};
+/**
+ * @description
+ * formats
+ */
+var useBlockFormats = function useBlockFormats() {
+  var _useLexicalComposerCo3 = LexicalComposerContext.useLexicalComposerContext(),
+    _useLexicalComposerCo4 = _slicedToArray(_useLexicalComposerCo3, 1),
+    editor = _useLexicalComposerCo4[0];
+  var blockFormats = React.useMemo(function () {
+    return new Map([["paragraph", {
+      label: "Normal",
+      prefix: /*#__PURE__*/React.createElement(notes.default, null)
+    }], ["h1", {
+      label: "Heading 1",
+      prefix: /*#__PURE__*/React.createElement(looksOne.default, null)
+    }], ["h2", {
+      label: "Heading 2",
+      prefix: /*#__PURE__*/React.createElement(looksTwo.default, null)
+    }], ["h3", {
+      label: "Heading 3",
+      prefix: /*#__PURE__*/React.createElement(looksThree.default, null)
+    }], ["h4", {
+      label: "Heading 4",
+      prefix: /*#__PURE__*/React.createElement(looksFour.default, null)
+    }], ["h5", {
+      label: "Heading 5",
+      prefix: /*#__PURE__*/React.createElement(looksFive.default, null)
+    }], ["h6", {
+      label: "Heading 6",
+      prefix: /*#__PURE__*/React.createElement(looksSix.default, null)
+    }], ["check", {
+      label: "Check List",
+      prefix: /*#__PURE__*/React.createElement(checklist.default, null)
+    }], ["code-block", {
+      label: "Check List",
+      prefix: /*#__PURE__*/React.createElement(checklist.default, null)
+    }]]);
+  }, []);
+  var _useState = React.useState("paragraph"),
+    _useState2 = _slicedToArray(_useState, 2),
+    blockFormat = _useState2[0],
+    setBlockFormat = _useState2[1];
+  var formatParagraph = React.useCallback(function () {
+    editor.update(function () {
+      var selection$1 = lexical.$getSelection();
+      selection.$setBlocksType(selection$1, function () {
+        return lexical.$createParagraphNode();
+      });
+    });
+  }, [editor]);
+  var formatBlock = function formatBlock(_blockFormat) {
+    if (_blockFormat === blockFormat) return;
+    if (_blockFormat === "paragraph") {
+      formatParagraph();
+      return;
+    }
+    if (_blockFormat === "check") {
+      if (blockFormat !== "check") {
+        editor.dispatchCommand(list.INSERT_CHECK_LIST_COMMAND, void 0);
+        return;
+      }
+      formatParagraph();
+      return;
+    }
+    if (_blockFormat === "code-block") {
+      editor.update(function () {
+        var selection$1 = lexical.$getSelection();
+        if (!selection$1) return;
+        if (selection$1.isCollapsed()) {
+          selection.$setBlocksType(selection$1, function () {
+            return code.$createCodeNode();
+          });
+          return;
+        }
+        var textContent = selection$1.getTextContent();
+        var codeNode = code.$createCodeNode();
+        selection$1.insertNodes([codeNode]);
+        var _selection = lexical.$getSelection();
+        if (lexical.$isRangeSelection(_selection)) {
+          _selection.insertRawText(textContent);
+        }
+      });
+      return;
+    }
+    editor.update(function () {
+      var selection$1 = lexical.$getSelection();
+      selection.$setBlocksType(selection$1, function () {
+        return richText.$createHeadingNode(_blockFormat);
+      });
+    });
+  };
+  var _setBlockFormat = React.useCallback(function (value) {
+    setBlockFormat(value);
+  }, []);
+  return {
+    blockFormat: blockFormat,
+    blockFormats: blockFormats,
+    setBlockFormat: _setBlockFormat,
+    formatBlock: formatBlock
+  };
+};
+/**
+ * @description
+ * font sizes
+ */
+var useFontSizes = function useFontSizes() {
+  var _useLexicalComposerCo5 = LexicalComposerContext.useLexicalComposerContext(),
+    _useLexicalComposerCo6 = _slicedToArray(_useLexicalComposerCo5, 1),
+    editor = _useLexicalComposerCo6[0];
+  var _useState3 = React.useState(DEFAULT_FONT_SIZE),
+    _useState4 = _slicedToArray(_useState3, 2),
+    fontSize = _useState4[0],
+    setFontSize = _useState4[1];
+  var fontSizes = React.useMemo(function () {
+    return new Map([["12px", {
+      label: "12px"
+    }], ["13px", {
+      label: "13px"
+    }], ["14px", {
+      label: "14px"
+    }], ["15px", {
+      label: "15px"
+    }], ["16px", {
+      label: "16px"
+    }], ["19px", {
+      label: "19px"
+    }], ["22px", {
+      label: "22px"
+    }], ["24px", {
+      label: "24px"
+    }], ["29px", {
+      label: "29px"
+    }], ["32px", {
+      label: "32px"
+    }], ["40px", {
+      label: "40px"
+    }], ["48px", {
+      label: "48px"
+    }]]);
+  }, []);
+  var updateFontSize = React.useCallback(function (value) {
+    editor.update(function () {
+      if (!editor.isEditable()) return;
+      var selection$1 = lexical.$getSelection();
+      if (!selection$1) return;
+      selection.$patchStyleText(selection$1, {
+        "font-size": value
+      });
+    });
+  }, [editor]);
+  var _setFontSize = React.useCallback(function (value) {
+    setFontSize(value || DEFAULT_FONT_SIZE);
+  }, []);
+  return {
+    fontSize: fontSize,
+    fontSizes: fontSizes,
+    setFontSize: _setFontSize,
+    updateFontSize: updateFontSize
+  };
+};
+/**
+ * @description
+ * more font formats
+ */
+var useFontFormats = function useFontFormats() {
+  var _useState5 = React.useState(new Set()),
+    _useState6 = _slicedToArray(_useState5, 2),
+    fontFormat = _useState6[0],
+    setFontFormat = _useState6[1];
+  var _useLexicalComposerCo7 = LexicalComposerContext.useLexicalComposerContext(),
+    _useLexicalComposerCo8 = _slicedToArray(_useLexicalComposerCo7, 1),
+    editor = _useLexicalComposerCo8[0];
+  var formatFont = React.useCallback(function (_fontFormat) {
+    editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, _fontFormat);
+  }, [editor]);
+  var fontFormats = React.useMemo(function () {
+    return new Map([["strikethrough", {
+      label: "strikethrough",
+      prefix: /*#__PURE__*/React.createElement(formatStrikethrough.default, null)
+    }], ["subscript", {
+      label: "subscript",
+      prefix: /*#__PURE__*/React.createElement(subscript.default, null)
+    }], ["superscript", {
+      label: "superscript",
+      prefix: /*#__PURE__*/React.createElement(superscript.default, null)
+    }]]);
+  }, []);
+  return {
+    fontFormat: fontFormat,
+    fontFormats: fontFormats,
+    setFontFormat: setFontFormat,
+    formatFont: formatFont
+  };
+};
+
+exports.useBlockFormats = useBlockFormats;
+exports.useFontFormats = useFontFormats;
+exports.useFontSizes = useFontSizes;
+exports.useHandlers = useHandlers;

package/dist/components/rich-text-editor/plugins/toolbar/hooks.d.ts

@@ -23,7 +23,7 @@ export declare const useHandlers: ({ isLink }: {
  */
 export declare const useBlockFormats: () => {
     blockFormat: BlockFormat;
-    blockFormats: Map<BlockFormat, Omit<import("../../../menu").MenuItem, "key">> | undefined;
+    blockFormats: Map<BlockFormat, Omit<import("../../../../types/menu").MenuItem, "key">> | undefined;
     setBlockFormat: (value: string) => void;
     formatBlock: (_blockFormat: BlockFormat) => void;
 };
@@ -33,7 +33,7 @@ export declare const useBlockFormats: () => {
  */
 export declare const useFontSizes: () => {
     fontSize: string;
-    fontSizes: Map<string, Omit<import("../../../menu").MenuItem, "key">> | undefined;
+    fontSizes: Map<string, Omit<import("../../../../types/menu").MenuItem, "key">> | undefined;
     setFontSize: (value: string) => void;
     updateFontSize: (value: string) => void;
 };
@@ -43,7 +43,7 @@ export declare const useFontSizes: () => {
  */
 export declare const useFontFormats: () => {
     fontFormat: Set<FontFormat>;
-    fontFormats: Map<FontFormat, Omit<import("../../../menu").MenuItem, "key">> | undefined;
+    fontFormats: Map<FontFormat, Omit<import("../../../../types/menu").MenuItem, "key">> | undefined;
     setFontFormat: React.Dispatch<React.SetStateAction<Set<FontFormat>>>;
     formatFont: (_fontFormat: FontFormat) => void;
 };

package/dist/components/rich-text-editor/plugins/toolbar/{hooks.js → hooks.mjs}

@@ -7,17 +7,17 @@ import { $setBlocksType, $patchStyleText } from '@lexical/selection';
 import { $createHeadingNode } from '@lexical/rich-text';
 import { INSERT_CHECK_LIST_COMMAND } from '@lexical/list';
 import { $createCodeNode } from '@lexical/code';
-import Notes from '../../../icon/icons/editor/notes.js';
-import FormatStrikethrough from '../../../icon/icons/editor/format-strikethrough.js';
-import Subscript from '../../../icon/icons/editor/subscript.js';
-import Superscript from '../../../icon/icons/editor/superscript.js';
-import Checklist from '../../../icon/icons/editor/checklist.js';
-import LooksOne from '../../../icon/icons/image/looks-one.js';
-import LooksTwo from '../../../icon/icons/image/looks-two.js';
-import LooksThree from '../../../icon/icons/image/looks-three.js';
-import LooksFour from '../../../icon/icons/image/looks-four.js';
-import LooksFive from '../../../icon/icons/image/looks-five.js';
-import LooksSix from '../../../icon/icons/image/looks-six.js';
+import Notes from '../../../icon/icons/editor/notes.mjs';
+import FormatStrikethrough from '../../../icon/icons/editor/format-strikethrough.mjs';
+import Subscript from '../../../icon/icons/editor/subscript.mjs';
+import Superscript from '../../../icon/icons/editor/superscript.mjs';
+import Checklist from '../../../icon/icons/editor/checklist.mjs';
+import LooksOne from '../../../icon/icons/image/looks-one.mjs';
+import LooksTwo from '../../../icon/icons/image/looks-two.mjs';
+import LooksThree from '../../../icon/icons/image/looks-three.mjs';
+import LooksFour from '../../../icon/icons/image/looks-four.mjs';
+import LooksFive from '../../../icon/icons/image/looks-five.mjs';
+import LooksSix from '../../../icon/icons/image/looks-six.mjs';
 
 var DEFAULT_FONT_SIZE = "15px";
 /**