@selfcommunity/react-ui 0.11.0-alpha.32 → 0.11.0-alpha.34

package/lib/cjs/components/Editor/Editor.js

@@ -11,19 +11,19 @@ const system_1 = require("@mui/system");
 const nodes_1 = tslib_1.__importDefault(require("./nodes"));
 const LexicalComposer_1 = require("@lexical/react/LexicalComposer");
 const LexicalContentEditable_1 = require("@lexical/react/LexicalContentEditable");
-const LexicalHistoryPlugin_1 = require("@lexical/react/LexicalHistoryPlugin");
+const ToolbarPlugin_1 = tslib_1.__importDefault(require("./plugins/ToolbarPlugin"));
+const constants_1 = require("./constants");
+const HorizontalRulePlugin_1 = require("./plugins/HorizontalRulePlugin");
 const LexicalRichTextPlugin_1 = require("./plugins/LexicalRichTextPlugin");
-const LexicalErrorBoundary_1 = tslib_1.__importDefault(require("@lexical/react/LexicalErrorBoundary"));
-const LexicalHorizontalRulePlugin_1 = require("@lexical/react/LexicalHorizontalRulePlugin");
+const LexicalErrorBoundary_1 = require("@lexical/react/LexicalErrorBoundary");
 const plugins_1 = require("./plugins");
+const OnBlurPlugin_1 = tslib_1.__importDefault(require("./plugins/OnBlurPlugin"));
+const OnFocusPlugin_1 = tslib_1.__importDefault(require("./plugins/OnFocusPlugin"));
 const LexicalLinkPlugin_1 = require("@lexical/react/LexicalLinkPlugin");
+const FloatingLinkPlugin_1 = tslib_1.__importDefault(require("./plugins/FloatingLinkPlugin"));
 const ApiPlugin_1 = tslib_1.__importDefault(require("./plugins/ApiPlugin"));
-const ToolbarPlugin_1 = tslib_1.__importDefault(require("./plugins/ToolbarPlugin"));
+const LexicalHistoryPlugin_1 = require("@lexical/react/LexicalHistoryPlugin");
 const LexicalListPlugin_1 = require("@lexical/react/LexicalListPlugin");
-const FloatingLinkPlugin_1 = tslib_1.__importDefault(require("./plugins/FloatingLinkPlugin"));
-const OnBlurPlugin_1 = tslib_1.__importDefault(require("./plugins/OnBlurPlugin"));
-const OnFocusPlugin_1 = tslib_1.__importDefault(require("./plugins/OnFocusPlugin"));
-const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     focused: `${constants_1.PREFIX}-focused`,
@@ -145,6 +145,6 @@ const Editor = (inProps, ref) => {
         nodes: [...nodes_1.default],
         theme: editorTheme
     }), [editable]);
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, { [classes.toolbar]: toolbar, [classes.focused]: focused }) }, { children: (0, jsx_runtime_1.jsxs)(LexicalComposer_1.LexicalComposer, Object.assign({ initialConfig: initialConfig }, { children: [toolbar ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolbarPlugin_1.default, { uploadImage: uploadImage }), (0, jsx_runtime_1.jsx)(LexicalListPlugin_1.ListPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalHorizontalRulePlugin_1.HorizontalRulePlugin, {})] })) : ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actions, direction: "row" }, { children: [uploadImage && (0, jsx_runtime_1.jsx)(plugins_1.ImagePlugin, {}), (0, jsx_runtime_1.jsx)(plugins_1.EmojiPlugin, {})] }))), (0, jsx_runtime_1.jsx)(LexicalRichTextPlugin_1.RichTextPlugin, { contentEditable: (0, jsx_runtime_1.jsx)(LexicalContentEditable_1.ContentEditable, { className: classes.content }), placeholder: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.placeholder, onClick: handleFocus }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editor.placeholder", defaultMessage: "ui.editor.placeholder" }) })), ErrorBoundary: LexicalErrorBoundary_1.default }), (0, jsx_runtime_1.jsx)(plugins_1.DefaultHtmlValuePlugin, { defaultValue: defaultValue }), (0, jsx_runtime_1.jsx)(LexicalHistoryPlugin_1.HistoryPlugin, {}), (0, jsx_runtime_1.jsx)(plugins_1.OnChangePlugin, { onChange: handleChange }), (0, jsx_runtime_1.jsx)(OnBlurPlugin_1.default, { onBlur: handleHasBlur }), (0, jsx_runtime_1.jsx)(OnFocusPlugin_1.default, { onFocus: handleHasFocus }), (0, jsx_runtime_1.jsx)(plugins_1.AutoLinkPlugin, {}), (0, jsx_runtime_1.jsx)(plugins_1.MentionsPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalLinkPlugin_1.LinkPlugin, {}), (0, jsx_runtime_1.jsx)(FloatingLinkPlugin_1.default, {}), (0, jsx_runtime_1.jsx)(ApiPlugin_1.default, { ref: apiRef })] })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, { [classes.toolbar]: toolbar, [classes.focused]: focused }) }, { children: (0, jsx_runtime_1.jsxs)(LexicalComposer_1.LexicalComposer, Object.assign({ initialConfig: initialConfig }, { children: [toolbar ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolbarPlugin_1.default, { uploadImage: uploadImage }), (0, jsx_runtime_1.jsx)(LexicalListPlugin_1.ListPlugin, {}), (0, jsx_runtime_1.jsx)(HorizontalRulePlugin_1.HorizontalRulePlugin, {})] })) : ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actions, direction: "row" }, { children: [uploadImage && (0, jsx_runtime_1.jsx)(plugins_1.ImagePlugin, {}), (0, jsx_runtime_1.jsx)(plugins_1.EmojiPlugin, {})] }))), (0, jsx_runtime_1.jsx)(LexicalRichTextPlugin_1.RichTextPlugin, { contentEditable: (0, jsx_runtime_1.jsx)(LexicalContentEditable_1.ContentEditable, { className: classes.content }), placeholder: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.placeholder, onClick: handleFocus }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editor.placeholder", defaultMessage: "ui.editor.placeholder" }) })), ErrorBoundary: LexicalErrorBoundary_1.LexicalErrorBoundary }), (0, jsx_runtime_1.jsx)(plugins_1.DefaultHtmlValuePlugin, { defaultValue: defaultValue }), (0, jsx_runtime_1.jsx)(LexicalHistoryPlugin_1.HistoryPlugin, {}), (0, jsx_runtime_1.jsx)(plugins_1.OnChangePlugin, { onChange: handleChange }), (0, jsx_runtime_1.jsx)(OnBlurPlugin_1.default, { onBlur: handleHasBlur }), (0, jsx_runtime_1.jsx)(OnFocusPlugin_1.default, { onFocus: handleHasFocus }), (0, jsx_runtime_1.jsx)(plugins_1.AutoLinkPlugin, {}), (0, jsx_runtime_1.jsx)(plugins_1.MentionsPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalLinkPlugin_1.LinkPlugin, {}), (0, jsx_runtime_1.jsx)(FloatingLinkPlugin_1.default, {}), (0, jsx_runtime_1.jsx)(ApiPlugin_1.default, { ref: apiRef })] })) })));
 };
 exports.default = (0, react_1.forwardRef)(Editor);

package/lib/cjs/components/Editor/plugins/HorizontalRulePlugin.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export declare function HorizontalRulePlugin(): null;

package/lib/cjs/components/Editor/plugins/HorizontalRulePlugin.js

@@ -0,0 +1,34 @@
+"use strict";
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HorizontalRulePlugin = void 0;
+const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
+const LexicalHorizontalRuleNode_1 = require("@lexical/react/LexicalHorizontalRuleNode");
+const utils_1 = require("@lexical/utils");
+const lexical_1 = require("lexical");
+const react_1 = require("react");
+function HorizontalRulePlugin() {
+    const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
+    (0, react_1.useEffect)(() => {
+        return editor.registerCommand(LexicalHorizontalRuleNode_1.INSERT_HORIZONTAL_RULE_COMMAND, (type) => {
+            const selection = (0, lexical_1.$getSelection)();
+            if (!(0, lexical_1.$isRangeSelection)(selection)) {
+                return false;
+            }
+            const focusNode = selection.focus.getNode();
+            if (focusNode !== null) {
+                const horizontalRuleNode = (0, LexicalHorizontalRuleNode_1.$createHorizontalRuleNode)();
+                (0, utils_1.$insertNodeToNearestRoot)(horizontalRuleNode);
+            }
+            return true;
+        }, lexical_1.COMMAND_PRIORITY_EDITOR);
+    }, [editor]);
+    return null;
+}
+exports.HorizontalRulePlugin = HorizontalRulePlugin;

package/lib/cjs/components/Editor/plugins/LexicalRichTextPlugin.d.ts

@@ -1,6 +1,6 @@
 import { ErrorBoundaryType } from '../shared/useDecorators';
 export declare function RichTextPlugin({ contentEditable, placeholder, ErrorBoundary }: {
     contentEditable: JSX.Element;
-    placeholder: ((isEditable: boolean) => null | JSX.Element) | null | JSX.Element;
-    ErrorBoundary: ErrorBoundaryType;
+    placeholder?: ((isEditable: boolean) => null | JSX.Element) | null | JSX.Element;
+    ErrorBoundary?: ErrorBoundaryType;
 }): JSX.Element;

package/lib/cjs/components/Editor/plugins/LexicalRichTextPlugin.js

@@ -1,10 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RichTextPlugin = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
-const useLexicalEditable_1 = tslib_1.__importDefault(require("@lexical/react/useLexicalEditable"));
+const useLexicalEditable_1 = require("@lexical/react/useLexicalEditable");
 const useDecorators_1 = require("../shared/useDecorators");
 const useEditorFocus_1 = require("../shared/useEditorFocus");
 const useCanShowPlaceholder_1 = require("../shared/useCanShowPlaceholder");
@@ -19,7 +18,7 @@ exports.RichTextPlugin = RichTextPlugin;
 function Placeholder({ content }) {
     const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
     const showPlaceholder = (0, useCanShowPlaceholder_1.useCanShowPlaceholder)(editor);
-    const editable = (0, useLexicalEditable_1.default)();
+    const editable = (0, useLexicalEditable_1.useLexicalEditable)();
     const hasFocus = (0, useEditorFocus_1.useEditorFocus)();
     if (!showPlaceholder || hasFocus) {
         return null;

package/lib/esm/components/Editor/Editor.js

@@ -8,19 +8,19 @@ import { useThemeProps } from '@mui/system';
 import nodes from './nodes';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { ContentEditable } from '@lexical/react/LexicalContentEditable';
-import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import ToolbarPlugin from './plugins/ToolbarPlugin';
+import { PREFIX } from './constants';
+import { HorizontalRulePlugin } from './plugins/HorizontalRulePlugin';
 import { RichTextPlugin } from './plugins/LexicalRichTextPlugin';
-import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
-import { HorizontalRulePlugin } from '@lexical/react/LexicalHorizontalRulePlugin';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
 import { AutoLinkPlugin, DefaultHtmlValuePlugin, EmojiPlugin, ImagePlugin, MentionsPlugin, OnChangePlugin } from './plugins';
+import OnBlurPlugin from './plugins/OnBlurPlugin';
+import OnFocusPlugin from './plugins/OnFocusPlugin';
 import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
+import FloatingLinkPlugin from './plugins/FloatingLinkPlugin';
 import ApiPlugin from './plugins/ApiPlugin';
-import ToolbarPlugin from './plugins/ToolbarPlugin';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 import { ListPlugin } from '@lexical/react/LexicalListPlugin';
-import FloatingLinkPlugin from './plugins/FloatingLinkPlugin';
-import OnBlurPlugin from './plugins/OnBlurPlugin';
-import OnFocusPlugin from './plugins/OnFocusPlugin';
-import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     focused: `${PREFIX}-focused`,

package/lib/esm/components/Editor/plugins/HorizontalRulePlugin.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export declare function HorizontalRulePlugin(): null;

package/lib/esm/components/Editor/plugins/HorizontalRulePlugin.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $createHorizontalRuleNode, INSERT_HORIZONTAL_RULE_COMMAND } from '@lexical/react/LexicalHorizontalRuleNode';
+import { $insertNodeToNearestRoot } from '@lexical/utils';
+import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR } from 'lexical';
+import { useEffect } from 'react';
+export function HorizontalRulePlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        return editor.registerCommand(INSERT_HORIZONTAL_RULE_COMMAND, (type) => {
+            const selection = $getSelection();
+            if (!$isRangeSelection(selection)) {
+                return false;
+            }
+            const focusNode = selection.focus.getNode();
+            if (focusNode !== null) {
+                const horizontalRuleNode = $createHorizontalRuleNode();
+                $insertNodeToNearestRoot(horizontalRuleNode);
+            }
+            return true;
+        }, COMMAND_PRIORITY_EDITOR);
+    }, [editor]);
+    return null;
+}

package/lib/esm/components/Editor/plugins/LexicalRichTextPlugin.d.ts

@@ -1,6 +1,6 @@
 import { ErrorBoundaryType } from '../shared/useDecorators';
 export declare function RichTextPlugin({ contentEditable, placeholder, ErrorBoundary }: {
     contentEditable: JSX.Element;
-    placeholder: ((isEditable: boolean) => null | JSX.Element) | null | JSX.Element;
-    ErrorBoundary: ErrorBoundaryType;
+    placeholder?: ((isEditable: boolean) => null | JSX.Element) | null | JSX.Element;
+    ErrorBoundary?: ErrorBoundaryType;
 }): JSX.Element;

package/lib/esm/components/Editor/plugins/LexicalRichTextPlugin.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import useLexicalEditable from '@lexical/react/useLexicalEditable';
+import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
 import { useDecorators } from '../shared/useDecorators';
 import { useEditorFocus } from '../shared/useEditorFocus';
 import { useCanShowPlaceholder } from '../shared/useCanShowPlaceholder';