@brizy/ui
Version:
React elements in Brizy style
96 lines (95 loc) • 4.89 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.RichText = void 0;
const react_1 = __importStar(require("react"));
const classNamesFn_1 = require("../classNamesFn");
const utils_1 = require("../utils");
const utils_2 = require("./utils");
const Loading_1 = require("./Loading");
const Toolbar_1 = require("./Toolbar");
const useTranslation_1 = require("../utils/localization/useTranslation");
const ConfigConsumer_1 = require("../ConfigConsumer");
const RQuill = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require("react-quill"))));
const RichText = (props) => {
const { t } = (0, useTranslation_1.useTranslation)();
const { size = "middle", placeholder = t("Enter here the content for this field..."), background, value = utils_2.NOTHING_IN_QUILL, autoFocus, disabled, onBlur, onChange, } = props;
const [modules, setModules] = (0, react_1.useState)();
const quillRef = (0, react_1.useRef)();
const quillToolbar = (0, react_1.useRef)(null);
const className = (0, classNamesFn_1.classNames)()("rich-text", {
[`rich-text--${size}`]: (0, utils_1.isString)(size),
"rich-text--disabled": disabled,
});
const style = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, (0, utils_2.makeBackground)(background)), (0, utils_2.customSize)(size))), [background, size]);
const handleChange = (0, react_1.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 === utils_2.NOTHING_IN_QUILL ? "" : v);
}, [onChange]);
const handleBlur = (0, react_1.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 = (0, react_1.useCallback)((el) => {
if (el) {
const editor = el.getEditor();
quillRef.current = editor.root;
if (autoFocus) {
editor.focus();
editor.setSelection(editor.getLength(), 0);
}
}
}, [autoFocus]);
(0, react_1.useEffect)(() => {
if (quillToolbar.current) {
setModules({ toolbar: quillToolbar.current });
}
}, [setModules]);
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(ConfigConsumer_1.ConfigConsumer, null, ({ isRTL }) => {
const clsName = (0, classNamesFn_1.classNames)()(className, {
["rich-text-rtl"]: isRTL,
});
return (typeof window !== "undefined" && (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement(Loading_1.Loading, { size: size, style: style }) },
react_1.default.createElement("div", { tabIndex: 0, onBlur: handleBlur, className: clsName, style: style },
react_1.default.createElement(Toolbar_1.Toolbar, { ref: quillToolbar }),
modules && (react_1.default.createElement(RQuill, { ref: setQuillRef, onChange: handleChange, placeholder: placeholder, formats: utils_2.formats, modules: modules, value: !value ? utils_2.NOTHING_IN_QUILL : value, readOnly: disabled, theme: "snow" }))))));
})));
};
exports.RichText = RichText;