@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
151 lines (143 loc) • 8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styles_1 = require("@mui/material/styles");
const react_intl_1 = require("react-intl");
const material_1 = require("@mui/material");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
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 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 = 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 LexicalHistoryPlugin_1 = require("@lexical/react/LexicalHistoryPlugin");
const LexicalListPlugin_1 = require("@lexical/react/LexicalListPlugin");
const classes = {
root: `${constants_1.PREFIX}-root`,
focused: `${constants_1.PREFIX}-focused`,
toolbar: `${constants_1.PREFIX}-toolbar`,
content: `${constants_1.PREFIX}-content`,
placeholder: `${constants_1.PREFIX}-placeholder`,
actions: `${constants_1.PREFIX}-actions`
};
const Root = (0, styles_1.styled)(material_1.Box, {
name: constants_1.PREFIX,
slot: 'Root',
overridesResolver: (props, styles) => {
return [styles.root, props.className.includes(classes.toolbar) && styles.toolbar];
}
})(({ theme }) => ({}));
const editorTheme = {
heading: {
h1: `${constants_1.PREFIX}-h1`,
h2: `${constants_1.PREFIX}-h2`,
h3: `${constants_1.PREFIX}-h3`,
h4: `${constants_1.PREFIX}-h4`,
h5: `${constants_1.PREFIX}-h5`,
h6: `${constants_1.PREFIX}-h6`
},
link: `${constants_1.PREFIX}-link`,
list: {
listitem: `${constants_1.PREFIX}-listItem`,
nested: {
listitem: `${constants_1.PREFIX}-nestedListItem`
},
olDepth: [`${constants_1.PREFIX}-ol1`, `${constants_1.PREFIX}-ol2`, `${constants_1.PREFIX}-ol3`, `${constants_1.PREFIX}-ol4`, `${constants_1.PREFIX}-ol5`],
ul: `${constants_1.PREFIX}-ul`
},
ltr: `${constants_1.PREFIX}-ltr`,
paragraph: `${constants_1.PREFIX}-paragraph`,
image: `${constants_1.PREFIX}-image`,
quote: `${constants_1.PREFIX}-quote`,
rtl: `${constants_1.PREFIX}-rtl`,
text: {
bold: `${constants_1.PREFIX}-textBold`,
italic: `${constants_1.PREFIX}-textItalic`,
strikethrough: `${constants_1.PREFIX}-textStrikethrough`,
subscript: `${constants_1.PREFIX}-textSubscript`,
superscript: `${constants_1.PREFIX}-textSuperscript`,
underline: `${constants_1.PREFIX}-textUnderline`,
underlineStrikethrough: `${constants_1.PREFIX}-textUnderlineStrikethrough`
}
};
/**
* > API documentation for the Community-JS Editor component. Learn about the available props and the CSS API.
*
*
* This component renders a text editor.
* Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Editor)
#### Import
```jsx
import {Editor} from '@selfcommunity/react-ui';
```
#### Component Name
The name `SCEditor` can be used when providing style overrides in the theme.
#### CSS
|Rule Name|Global class|Description|
|---|---|---|
|root|.SCEditor-root|Styles applied to the root element.|
|toolbar|.SCEditor-toolbar|Styles applied to the toolbar element.|
|content|.SCEditor-content|Styles applied to the content element.|
|placeholder|.SCEditor-placeholder|Styles applied to the placeholder element.|
|actions|.SCEditor-actions|Styles applied to the actions section.|
* @param inProps
*/
const Editor = (inProps, ref) => {
// PROPS
const props = (0, system_1.useThemeProps)({
props: inProps,
name: constants_1.PREFIX
});
const { id = 'editor', className = null, defaultValue = '', toolbar = false, uploadImage = false, editable = true, onChange = null, onFocus = null, onBlur = null } = props;
const apiRef = (0, react_1.useRef)();
// STATE
const [focused, setFocused] = (0, react_1.useState)(false);
// HANDLERS
const handleChange = (value) => {
onChange && onChange(value);
};
const handleError = (error, editor) => {
console.log(error);
};
const handleFocus = () => {
apiRef.current.focus();
};
const handleHasFocus = (0, react_1.useCallback)((event) => {
setFocused(true);
onFocus && onFocus(event);
}, [onFocus]);
const handleHasBlur = (0, react_1.useCallback)((event) => {
setFocused(false);
onBlur && onBlur(event);
}, [onBlur]);
// EXPOSED METHODS
(0, react_1.useImperativeHandle)(ref, () => ({
focus: () => {
apiRef.current.focus();
}
}));
// RENDER
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
const initialConfig = (0, react_1.useMemo)(() => ({
namespace: 'LexicalEditor',
editable: editable,
onError: handleError,
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)(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);