@brizy/ui
Version:
React elements in Brizy style
59 lines (58 loc) • 3.06 kB
JavaScript
import React, { useCallback, useEffect, useMemo, useRef, useState, Suspense, lazy, } from "react";
import { classNames } from "../classNamesFn";
import { isString } from "../utils";
import { customSize, formats, makeBackground, NOTHING_IN_QUILL } from "./utils";
import { Loading } from "./Loading";
import { Toolbar } from "./Toolbar";
import { useTranslation } from "../utils/localization/useTranslation";
import { ConfigConsumer } from "../ConfigConsumer";
const RQuill = lazy(() => import("react-quill"));
export const RichText = (props) => {
const { t } = useTranslation();
const { size = "middle", placeholder = t("Enter here the content for this field..."), background, value = NOTHING_IN_QUILL, autoFocus, disabled, onBlur, onChange, } = props;
const [modules, setModules] = useState();
const quillRef = useRef();
const quillToolbar = useRef(null);
const className = classNames()("rich-text", {
[`rich-text--${size}`]: isString(size),
"rich-text--disabled": disabled,
});
const style = useMemo(() => (Object.assign(Object.assign({}, makeBackground(background)), customSize(size))), [background, size]);
const handleChange = useCallback((v) => {
var _a, _b;
(_b = (_a = quillRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("img")) === null || _b === void 0 ? void 0 : _b.remove();
onChange(v === NOTHING_IN_QUILL ? "" : v);
}, [onChange]);
const handleBlur = useCallback((event) => {
const currentTarget = event.currentTarget;
const relatedTarget = event.relatedTarget;
if (!currentTarget.contains(relatedTarget)) {
onBlur === null || onBlur === void 0 ? void 0 : onBlur();
}
}, [onBlur]);
const setQuillRef = useCallback((el) => {
if (el) {
const editor = el.getEditor();
quillRef.current = editor.root;
if (autoFocus) {
editor.focus();
editor.setSelection(editor.getLength(), 0);
}
}
}, [autoFocus]);
useEffect(() => {
if (quillToolbar.current) {
setModules({ toolbar: quillToolbar.current });
}
}, [setModules]);
return (React.createElement(React.Fragment, null,
React.createElement(ConfigConsumer, null, ({ isRTL }) => {
const clsName = classNames()(className, {
["rich-text-rtl"]: isRTL,
});
return (typeof window !== "undefined" && (React.createElement(Suspense, { fallback: React.createElement(Loading, { size: size, style: style }) },
React.createElement("div", { tabIndex: 0, onBlur: handleBlur, className: clsName, style: style },
React.createElement(Toolbar, { ref: quillToolbar }),
modules && (React.createElement(RQuill, { ref: setQuillRef, onChange: handleChange, placeholder: placeholder, formats: formats, modules: modules, value: !value ? NOTHING_IN_QUILL : value, readOnly: disabled, theme: "snow" }))))));
})));
};