@makeen.io/material-ui-kit
Version:
Makeen UI components kit. Based on material-ui.
1,207 lines (886 loc) • 50.2 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";import _regeneratorRuntime from "@babel/runtime/regenerator";import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";import _slicedToArray from "@babel/runtime/helpers/slicedToArray";import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject2() {var data = _taggedTemplateLiteral(["\n ", "", "\n "]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = _taggedTemplateLiteral(["\n width: 100%;\n\n ", "\n\n .ql-mention-list {\n list-style: none;\n\n margin: 3px 0 0 0;\n padding: 3px 0;\n\n &-container {\n background: white;\n border-radius: 4px;\n\n box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.2);\n }\n\n &-item {\n padding: 5px 10px;\n\n font-size: 14px;\n\n cursor: pointer;\n\n &.selected {\n background: rgba(0, 0, 0, 0.1);\n }\n }\n }\n\n .ql-editor {\n overflow-y: scroll;\n resize: vertical;\n\n &.ql-blank {\n &:before {\n left: 30px;\n right: 30px;\n }\n }\n\n .ql-align-justify {\n white-space: normal;\n }\n }\n\n .ql-formats {\n float: left;\n margin: 0;\n outline: none;\n\n &_custom-arrow {\n position: relative;\n\n .ql-picker {\n z-index: 5;\n margin-right: 5px;\n }\n\n .ql-custom-down-arrow {\n z-index: 2;\n position: absolute;\n right: 0;\n width: 20px;\n height: 20px;\n\n path {\n &:nth-child(2) {\n fill: #8f9bb3;\n }\n }\n }\n\n &:hover {\n .ql-custom-down-arrow {\n path {\n &:nth-child(2) {\n fill: ", ";\n }\n }\n }\n }\n }\n\n &_size {\n .ql-picker {\n width: 40px;\n\n .ql-picker-label {\n width: 100%;\n\n &:before {\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n }\n }\n }\n\n &_heading {\n .ql-picker {\n width: 100px;\n\n .ql-picker-label {\n width: 100%;\n\n &:before {\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n }\n }\n }\n\n &_family {\n .ql-picker.ql-font {\n width: 100px;\n min-width: 100px;\n\n .ql-picker-label {\n width: 100%;\n\n &:before {\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n }\n }\n }\n }\n\n .ql-picker-options {\n border-radius: 4px;\n\n .ql-picker-item {\n outline: none;\n\n &.ql-selected,\n &:hover {\n color: ", ";\n }\n }\n }\n\n .ql-snow .ql-picker.ql-expanded .ql-picker-options {\n z-index: 1501;\n }\n\n .ql-toolbar {\n border: 1px solid #eee;\n\n .ql-formats {\n float: left;\n height: 32px;\n\n margin: 0;\n padding: 0;\n\n background: none;\n border: none;\n cursor: pointer;\n\n display: inline-flex;\n align-items: center;\n margin-right: 0px;\n\n &:hover {\n .ql-picker-label,\n .ql-custom-down-arrow {\n color: ", ";\n }\n }\n }\n }\n\n .ql-container {\n border: 1px solid #eee;\n border-top: none;\n\n &.ql-disabled {\n border-color: transparent;\n }\n }\n\n .ql-snow .ql-picker-label {\n outline: none;\n border: none;\n\n &.ql-active {\n color: black;\n }\n\n svg {\n display: none;\n }\n }\n\n .ql__custom-toolbar {\n display: block;\n transition: max-height 0.25s ease-in-out, padding-top 0.25s ease-in-out,\n padding-bottom 0.25s ease-in-out;\n max-height: 300px;\n\n &_disabled {\n max-height: 0;\n\n padding-top: 0;\n padding-bottom: 0;\n\n overflow: hidden;\n\n border-color: transparent;\n }\n\n &_empty {\n padding: 0;\n border-top: none;\n }\n }\n\n .ql-delimiter {\n width: 1px;\n min-width: 1px;\n height: 32px;\n\n background: ", ";\n\n display: inline-block;\n float: left;\n\n margin: 0 5px 0 9px;\n }\n\n .ql-editor {\n padding: 15px 30px;\n min-height: var(--ck-sample-rich-editor-min-height);\n }\n\n .ql-font {\n min-width: 140px;\n }\n\n .ql-text-color {\n position: relative;\n\n .ql-color {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n\n .ql-text-background-color {\n position: relative;\n\n .ql-background {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n\n .ql-tooltip {\n .ql-action {\n &:after {\n border-right: none;\n }\n }\n\n .ql-remove {\n display: none;\n }\n }\n\n .ql-snow.ql-toolbar button {\n width: 32px;\n height: 32px;\n\n border-radius: 5.3px;\n padding: 3px 0px;\n margin: 0px 5px;\n\n display: flex;\n justify-content: center;\n align-items: center;\n outline: none;\n\n &.ql-active,\n &:hover {\n background: ", ";\n\n svg {\n path {\n &:nth-child(2) {\n fill: ", ";\n }\n }\n }\n }\n }\n"]);_templateObject = function _templateObject() {return data;};return data;} /* eslint-disable */
import IconButton from "@material-ui/core/IconButton";
import Tooltip from "@material-ui/core/Tooltip";
import React from "react";
import "quill-mention";
import ReactQuill, { Quill } from "react-quill";
import "react-quill/dist/quill.snow.css";
import styled, { css } from "styled-components";
import { get, isEqual } from "lodash";
import { extractContent, generateLimitedHTML } from "../../utils/helper";
import ColorPicker from "./component/colorPicker";
import CustomLink from "./component/customLink";
import CustomToolbar from "./component/customToolbar";
import ControlledTooltip from "./component/ControlledTooltip";
import ImageResize from "quill-image-resize-module";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import colorPalette from "../../themes/default";
import SmartBreak, { lineBreakMatcher } from "./plugins/smartBreak";
import ImageWithStyle from "./plugins/styledImage";
import ParagraphBlot from "./plugins/customParagpaph";
// import PlainClipboard from "./plugins/plainClipboard";
import 'quill-paste-smart';
import AppPanelEmbed from "./plugins/appPanelEmbed";
import appInlineEmbed from "./plugins/appInlineEmbed";
import { red, blue, green, orange, yellow, grey } from "@material-ui/core/colors";
import { Icon } from "../../atoms";
var AlignmentCenter = function AlignmentCenter() {return /*#__PURE__*/React.createElement(Icon, { name: "align-center" });};
var AlignmentJustify = function AlignmentJustify() {return /*#__PURE__*/React.createElement(Icon, { name: "align-justify" });};
var AlignmentLeft = function AlignmentLeft() {return /*#__PURE__*/React.createElement(Icon, { name: "align-left" });};
var AlignmentRight = function AlignmentRight() {return /*#__PURE__*/React.createElement(Icon, { name: "align-right" });};
var Bold = function Bold() {return /*#__PURE__*/React.createElement(Icon, { name: "bold" });};
var Upload = function Upload() {return /*#__PURE__*/React.createElement(Icon, { name: "cloud-upload-black" });};
var Italic = function Italic() {return /*#__PURE__*/React.createElement(Icon, { name: "italic" });};
var Link = function Link() {return /*#__PURE__*/React.createElement(Icon, { name: "link" });};
var ListBullet = function ListBullet() {return /*#__PURE__*/React.createElement(Icon, { name: "list-bullet" });};
var ListNumber = function ListNumber() {return /*#__PURE__*/React.createElement(Icon, { name: "list-numbers" });};
var Redo = function Redo() {return /*#__PURE__*/React.createElement(Icon, { name: "redo" });};
var Underline = function Underline() {return /*#__PURE__*/React.createElement(Icon, { name: "underline" });};
var Undo = function Undo() {return /*#__PURE__*/React.createElement(Icon, { name: "undo" });};
var icons = Quill.import("ui/icons");
icons.bold = /*#__PURE__*/React.createElement(Bold, null);
icons.italic = /*#__PURE__*/React.createElement(Italic, null);
icons.underline = /*#__PURE__*/React.createElement(Underline, null);
icons.color = "";
icons.background = "";
icons.link = /*#__PURE__*/React.createElement(Link, null);
icons.image = /*#__PURE__*/React.createElement(Upload, null);
icons.list = /*#__PURE__*/React.createElement(ListNumber, null);
icons.list = /*#__PURE__*/React.createElement(ListBullet, null);
icons.align = /*#__PURE__*/React.createElement(AlignmentLeft, null);
icons.align = /*#__PURE__*/React.createElement(AlignmentRight, null);
icons.align = /*#__PURE__*/React.createElement(AlignmentCenter, null);
icons.align = /*#__PURE__*/React.createElement(AlignmentJustify, null);
Quill.debug("error"); // 'error', 'warn', 'log', or 'info'
Quill.register("modules/imageResize", ImageResize);
Quill.register(SmartBreak, true);
Quill.register(ImageWithStyle, true);
Quill.register(ParagraphBlot, true);
Quill.register(AppPanelEmbed, true);
Quill.register(appInlineEmbed, true);
// Quill.register("modules/clipboard", PlainClipboard, true);
// this is a zero-width-space character
var ZWSP = "";
var CustomEditorWrapper = styled.div(_templateObject(),
function (props) {
var fontsCSS = "";
var fontSizeCSS = "";
var token = props.token;
var fontList = props.fonts;
if (Array.isArray(fontList) && fontList.length) {
fontsCSS += "font-family: \"".concat(fontList[0].value, "\"");
fontList.forEach(function (_ref) {var value = _ref.value;
fontsCSS += "\n #toolbar_".concat(
token, " span[data-label=\"").concat(value, "\"]::before {\n font-family: \"").concat(
value, "\";\n }\n\n .ql-font-").concat(
value, " {\n font-family: \"").concat(
value, "\";\n }");
});
}
var sizeList = props.sizes;
if (Array.isArray(sizeList) && sizeList.length) {
sizeList.forEach(function (size) {
fontsCSS += "\n #toolbar_".concat(
token, " .ql-size span[data-value=\"").concat(size, "px\"]::before {\n font-size: ").concat(
size, "px !important;\n }");
});
}
if (props.defaultFontSize) {
fontSizeCSS = "\n p {\n font-size: ".concat(
props.defaultFontSize, ";\n }");
}
return css(_templateObject2(),
fontsCSS, fontSizeCSS);
},
colorPalette.palette.primary.dark,
colorPalette.palette.primary.dark,
colorPalette.palette.primary.dark,
colorPalette.palette.secondaryLight.main,
colorPalette.palette.colors.primary[100],
colorPalette.palette.primary.dark);
var sahdesToUse = ["300", "400", "500", "600", "700", "800"];
var colorify = function colorify(colorObj, name, length) {
var result = Object.keys(colorObj).
filter(function (key) {return sahdesToUse.includes(key);}).
map(function (key) {return { color: colorObj[key], label: name + key };});
if (length !== undefined)
return result.slice(0, length);
return result;
};
var defaultConfig = {
fontBackgroundColor: {
colors: [
{
color: "transparent",
label: "Transparent"
}].concat(_toConsumableArray(
colorify(grey, "grey", 5)), _toConsumableArray(
colorify(red, "red")), _toConsumableArray(
colorify(blue, "blue")), _toConsumableArray(
colorify(orange, "orange")), _toConsumableArray(
colorify(green, "green")), _toConsumableArray(
colorify(yellow, "yellow"))),
columns: 6
},
fontColor: {
colors: [
{
color: "hsl(0, 0%, 0%)",
label: "Black"
},
{
color: "hsl(0, 0%, 30%)",
label: "Dim grey"
},
{
color: "hsl(0, 0%, 60%)",
label: "Grey"
},
{
color: "hsl(0, 0%, 90%)",
label: "Light grey"
},
{
color: "#fff",
label: "White"
}],
columns: 3
},
fontFamily: {
options: [
{
label: "Arial",
value: "Arial"
},
{
label: "Sans Serif",
value: "sans-serif"
},
{
label: "Georgia",
value: "Georgia"
},
{
label: "Charcoal",
value: "Charcoal"
},
{
label: "Tahoma",
value: "Tahoma"
},
{
label: "Geneva",
value: "Geneva"
},
{
label: "Verdana",
value: "Verdana"
}]
},
fontSize: {
options: [9, 11.5, 12, 14, 16, 18, 22, 24],
defaultSize: 14
},
heading: {
options: [
{
class: "ck-heading_paragraph",
model: "paragraph",
title: "Paragraph",
view: "paragraph"
},
{
class: "ck-heading_heading1",
model: "heading1",
title: "Heading 1",
view: "h2"
},
{
class: "ck-heading_heading2",
model: "heading2",
title: "Heading 2",
view: "h3"
}]
},
staticLink: {
defaultText: "Learn Less",
staticUrl: "https://google.com"
},
toolbar: {
items: [
"undo",
"redo",
"|",
"heading",
"|",
"fontFamilyDropdown",
"|",
"fontSizeDropdown",
"customUpload",
"|",
"bold",
"italic",
"underline",
"fontColor",
"fontBackgroundColor",
"|",
"link",
"imageUpload",
"|",
"alignment:left",
"alignment:center",
"alignment:right",
"alignment:justify",
"|",
"numberedList",
"bulletedList"]
}
};
var capitalize = function capitalize(lower) {
return lower.charAt(0).toUpperCase() + lower.substring(1);
};
var RichEditor = /*#__PURE__*/React.forwardRef(function (props, ref) {var
onChange = props.onChange,onFocus = props.onFocus,onBlur = props.onBlur,onInit = props.onInit,onChangeCursorPosition = props.onChangeCursorPosition,disabled = props.disabled,config = props.config,value = props.value,wrapClassName = props.wrapClassName,input = props.input,placeholder = props.placeholder,limit = props.limit;
var getKeyBindings = function getKeyBindings() {
var keyBindings = {
justifiedTextSpacebarFixForFirefox: {},
nextLine: {
key: 13,
shiftKey: false,
handler: function handler(range, context) {
this["quill"].insertText(range.index, "\n", Quill["sources"].USER);
this["quill"].setSelection(range.index + (!context.offset ? 2 : 1), Quill["sources"].SILENT);
}
},
linebreak: {
key: 13,
shiftKey: true,
handler: function handler(range, context) {
if (context.format.list) {
var currentLeaf = this["quill"].getLeaf(range.index)[0];
var nextLeaf = this["quill"].getLeaf(range.index + 1)[0];
this["quill"].insertEmbed(range.index, "break", true, Quill["sources"].USER);
// Insert a second break if:
// At the end of the editor, OR next leaf has a different parent (<p>)
if (nextLeaf === null || currentLeaf.parent !== nextLeaf.parent) {
this["quill"].insertEmbed(range.index, "break", true, Quill["sources"].USER);
}
var isUseTrick = false;
if (currentLeaf.value() === "\n" &&
nextLeaf &&
currentLeaf.parent === nextLeaf.parent) {
var tagName = get(currentLeaf, "parent.children.head.domNode.tagName", "");
if (tagName === "BR") {
isUseTrick = true;
var headIndex = this["quill"].getIndex(currentLeaf.parent.children.head);
this["quill"].insertText(headIndex, ZWSP, Quill["sources"].SILENT);
this["quill"].insertEmbed(range.index + 1, "break", true, Quill["sources"].USER);
this["quill"].insertEmbed(range.index + 2, "break", true, Quill["sources"].USER);
}
}
// Now that we've inserted a line break, move the cursor forward
this["quill"].setSelection(range.index + (isUseTrick ? 2 : 1), Quill["sources"].SILENT);
} else
{
this["quill"].insertText(range.index, "\n", Quill["sources"].USER);
this["quill"].setSelection(range.index + (!context.offset ? 2 : 1), Quill["sources"].SILENT);
}
}
},
removeList: {
key: "backspace",
format: ["list"],
handler: function handler(range, context) {
if (context.offset === 0) {
// When backspace on the first character of a list,
// remove the list instead
this["quill"].format("list", false, Quill["sources"].USER);
} else
{
var nextLeafText = this["quill"].getText(range.index + 1, 1);
var previousLeaf = this["quill"].getLeaf(range.index - 1)[0] || {};
if (!nextLeafText || previousLeaf.value() === ZWSP) {
this["quill"].deleteText(range.index - 1, 1, Quill["sources"].SILENT);
var currentLeaf = this["quill"].getLeaf(range.index)[0];
var headIndex = this["quill"].getIndex(currentLeaf.parent.children.head) || 0;
if (headIndex === range.index - 1) {
this["quill"].setSelection(range.index - 1, Quill["sources"].SILENT);
this["quill"].format("list", false, Quill["sources"].USER);
return false;
}
if (previousLeaf.value() !== ZWSP) {
this["quill"].insertEmbed(range.index - 1, "break", true, Quill["sources"].SILENT);
return false;
}
}
// Otherwise propogate to Quill's default
return true;
}
}
},
removeCharacter: {
key: "backspace",
handler: function handler(range, context) {
if (range.index > 0) {
var previousLeaf = this["quill"].getLeaf(range.index - 1)[0];
var isList = context.format.list;
var tagName = get(previousLeaf, "domNode.tagName", "");
if (previousLeaf && tagName === "BR" && !isList) {
this["quill"].deleteText(range.index - (range.length ? 0 : 2), range.length ? range.length : 2, Quill["sources"].USER);
this["quill"].setSelection(range.index - (range.length ? 0 : 2), Quill["sources"].SILENT);
} else
{
return true;
}
} else
{
return true;
}
}
},
indentList: {
key: "tab",
format: ["list"],
handler: function handler(range, context) {
if (context.format.list === "ordered") {
return false;
} else
{
if (context.collapsed && context.offset !== 0)
return true;
this["quill"].format("indent", "+1", Quill["sources"].USER);
}
}
}
};
var isFirefox = navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
if (isFirefox) {
keyBindings.justifiedTextSpacebarFixForFirefox = {
key: " ",
handler: function handler(range, context) {
if (context.format.align === "justify" &&
context.prefix.length >= context.offset) {
// this is the end of the paragraph / line, and user pressed spacebar, quill will ignore this / delete this, so insert an extra space here.
// Quill.insertText(range.index, ' ', 'user');
return true;
}
return true;
}
};
}
return keyBindings;
};var _React$useState =
React.useState({
history: {
delay: 1000
},
toolbar: {
handlers: {},
syntax: false
},
keyboard: {
bindings: getKeyBindings()
},
clipboard: {}
}),_React$useState2 = _slicedToArray(_React$useState, 2),modules = _React$useState2[0],setModules = _React$useState2[1];var _React$useState3 =
React.useState([]),_React$useState4 = _slicedToArray(_React$useState3, 2),formats = _React$useState4[0],setFormats = _React$useState4[1];var _React$useState5 =
React.useState([]),_React$useState6 = _slicedToArray(_React$useState5, 2),toolbarItemList = _React$useState6[0],setToolbarItemList = _React$useState6[1];var _React$useState7 =
React.useState(undefined),_React$useState8 = _slicedToArray(_React$useState7, 2),val = _React$useState8[0],setVal = _React$useState8[1];var _React$useState9 =
React.useState(Math.random().toString(36).substring(2, 15)),_React$useState10 = _slicedToArray(_React$useState9, 1),token = _React$useState10[0];var _React$useState11 =
React.useState([]),_React$useState12 = _slicedToArray(_React$useState11, 2),fontList = _React$useState12[0],setFontList = _React$useState12[1];var _React$useState13 =
React.useState([]),_React$useState14 = _slicedToArray(_React$useState13, 2),sizeList = _React$useState14[0],setSizeList = _React$useState14[1];var _React$useState15 =
React.useState("12px"),_React$useState16 = _slicedToArray(_React$useState15, 2),defaultFontSize = _React$useState16[0],setDefaultFontSize = _React$useState16[1];var _React$useState17 =
React.useState(null),_React$useState18 = _slicedToArray(_React$useState17, 2),storedConfig = _React$useState18[0],setStoredConfig = _React$useState18[1];
var useCombinedRefs = function useCombinedRefs() {for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {refs[_key] = arguments[_key];}
var targetRef = React.useRef();
React.useEffect(function () {
refs.forEach(function (ref) {
if (!ref)
return;
if (typeof ref === "function") {
ref(targetRef.current);
} else
{
ref.current = targetRef.current;
}
});
}, [refs]);
return targetRef;
};
var quillRef = React.useRef(null);
var onChangeHandler = React.useCallback(function () {
if (onChange) {
onChange.apply(void 0, arguments);
}
if (input && input.onChange) {
input.onChange.apply(input, arguments);
}
}, [onChange]);
var onFocusHandler = React.useCallback(function () {
if (onFocus) {
onFocus.apply(void 0, arguments);
}
if (input && input.onFocus) {
input.onFocus.apply(input, arguments);
}
}, [onFocus]);
var onBlurHandler = React.useCallback(function () {
if (onBlur) {
onBlur.apply(void 0, arguments);
}
if (input && input.onBlur) {
input.onBlur();
}
}, [onBlur]);
var onChangeCursorPositionHandler = React.useCallback(function () {
onChangeCursorPosition && onChangeCursorPosition.apply(void 0, arguments);
input &&
input.onChangeCursorPosition &&
input.onChangeCursorPosition.apply(input, arguments);
}, [onFocus]);
var onInitHandler = React.useCallback(function () {
if (onInit) {
onInit.apply(void 0, arguments);
}
}, [onInit]);
var customEditorEvent = function customEditorEvent(event, data) {
var editor = quillRef.current.getEditor();
var selection = editor.getSelection() || get(editor, "selection.savedRange", null);
switch (event) {
case "undo":
editor.history.undo();
break;
case "redo":
editor.history.redo();
break;
case "insertCustomLink":
var url = get(config, "staticLink.staticUrl", null) ||
get(defaultConfig, "staticLink.staticUrl", null);
if (url && data) {
var cursorPosition = selection ? selection.index : 0;
editor.insertText(cursorPosition, data, "link", url);
editor.setSelection(cursorPosition + data.length);
}
break;
case "insertUserLink":
if (data != null && data.url && data.text) {
var _cursorPosition = selection ? selection.index : 0;
editor.insertText(_cursorPosition, data.text, "link", data.url);
editor.setSelection(_cursorPosition + data.text.length);
}
break;
case "updateFontColor":
case "updateFontBackgroundColor":
if (selection && data) {
setTimeout(function () {
editor.formatText(selection.index, selection.length, event === "updateFontColor" ?
{
color: data
} :
{
background: data
});
editor.format(event === "updateFontColor" ? "color" : "background", data);
}, 10);
}
break;
default:}
};
React.useEffect(function () {
if (!isEqual(storedConfig, config)) {var _config$mention, _config$mention2, _config$toolbar;
var newToolbarItemList = [];
var moduleHelperList = [];
var formatList = ["indent"];
var newModules = {
history: {
delay: 1000
},
toolbar: {
container: "#toolbar_".concat(token),
handlers: {},
syntax: false
},
keyboard: {
bindings: getKeyBindings()
},
clipboard: {
matchers: [["BR", lineBreakMatcher]],
allowed: {
tags: ['a', 'b', 'strong', 'u', 's', 'i', 'p', 'br', 'ul', 'ol', 'li', 'span', 'div'],
attributes: ['href', 'rel', 'target', 'class', 'className', 'data-index', 'data-denotation-char', 'data-value', 'data-id', 'data-active-char', 'contenteditable']
},
keepSelection: false,
substituteBlockElements: false,
magicPasteLinks: false,
hooks: {
uponSanitizeElement: function uponSanitizeElement(node, data, config) {
}
}
},
imageResize: false,
mention: undefined
};
if (config !== null && config !== void 0 && config.mention && ((_config$mention = config.mention) !== null && _config$mention !== void 0 && _config$mention.enableAtSearch || (_config$mention2 = config.mention) !== null && _config$mention2 !== void 0 && _config$mention2.enableHashSearch)) {var _config$mention3, _config$mention4, _config$mention5, _config$mention12, _config$mention13, _config$mention14, _config$mention15, _config$mention16, _config$mention17, _config$mention18, _config$mention19;
var atChar = ((_config$mention3 = config.mention) === null || _config$mention3 === void 0 ? void 0 : _config$mention3.atSearchSymbol) || "@";
var hashChar = ((_config$mention4 = config.mention) === null || _config$mention4 === void 0 ? void 0 : _config$mention4.atSearchSymbol) || "#";
newModules.mention = {
allowedChars: ((_config$mention5 = config.mention) === null || _config$mention5 === void 0 ? void 0 : _config$mention5.allowedChars) || /^[A-Za-z0-9]*$/,
mentionDenotationChars: [atChar, hashChar],
source: function () {var _source = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(searchTerm, renderList, mentionChar) {var _config$mention10, _config$mention11;var values, _config$mention6, _config$mention7, _config$mention8, _config$mention9, matches, i;return _regeneratorRuntime.wrap(function _callee$(_context) {while (1) {switch (_context.prev = _context.next) {case 0:
values = [];if (!(
mentionChar === atChar)) {_context.next = 12;break;}if (!((_config$mention6 =
config.mention) !== null && _config$mention6 !== void 0 && _config$mention6.suggestPeople)) {_context.next = 8;break;}_context.next = 5;return (
config.mention.suggestPeople(searchTerm));case 5:_context.t0 = _context.sent;_context.next = 9;break;case 8:_context.t0 =
((_config$mention7 = config.mention) === null || _config$mention7 === void 0 ? void 0 : _config$mention7.atValues) || [];case 9:values = _context.t0;_context.next = 20;break;case 12:if (!((_config$mention8 =
config.mention) !== null && _config$mention8 !== void 0 && _config$mention8.suggestTags)) {_context.next = 18;break;}_context.next = 15;return (
config.mention.suggestTags(searchTerm));case 15:_context.t1 = _context.sent;_context.next = 19;break;case 18:_context.t1 =
((_config$mention9 = config.mention) === null || _config$mention9 === void 0 ? void 0 : _config$mention9.hashValues) || [];case 19:values = _context.t1;case 20:
if (searchTerm.length === 0 || mentionChar === atChar && (_config$mention10 = config.mention) !== null && _config$mention10 !== void 0 && _config$mention10.suggestPeople || mentionChar !== atChar && (_config$mention11 = config.mention) !== null && _config$mention11 !== void 0 && _config$mention11.suggestTags) {
renderList(values, searchTerm);
} else
{
matches = [];
for (i = 0; i < values.length; i++) {
if (~values[i].value.
toLowerCase().
indexOf(searchTerm.toLowerCase())) {
matches.push(values[i]);
}
}
renderList(matches, searchTerm);
}case 21:case "end":return _context.stop();}}}, _callee);}));function source(_x, _x2, _x3) {return _source.apply(this, arguments);}return source;}(),
renderItem: (_config$mention12 = config.mention) === null || _config$mention12 === void 0 ? void 0 : _config$mention12.renderMentionItem,
onSelect: (_config$mention13 = config.mention) === null || _config$mention13 === void 0 ? void 0 : _config$mention13.mentionOnSelect,
renderLoading: (_config$mention14 = config.mention) === null || _config$mention14 === void 0 ? void 0 : _config$mention14.renderMentionLoading,
positioningStrategy: ((_config$mention15 = config.mention) === null || _config$mention15 === void 0 ? void 0 : _config$mention15.positioningStrategy) || 'absolute',
spaceAfterInsert: ((_config$mention16 = config.mention) === null || _config$mention16 === void 0 ? void 0 : _config$mention16.spaceAfterInsert) || true,
defaultMenuOrientation: ((_config$mention17 = config.mention) === null || _config$mention17 === void 0 ? void 0 : _config$mention17.defaultMenuOrientation) || "bottom",
onOpen: ((_config$mention18 = config.mention) === null || _config$mention18 === void 0 ? void 0 : _config$mention18.onMenuOpen) || undefined,
onClose: ((_config$mention19 = config.mention) === null || _config$mention19 === void 0 ? void 0 : _config$mention19.onMenuClose) || undefined
};
}
var defaultColor = "";
var toolbarConfig = defaultConfig;
if (Array.isArray(config === null || config === void 0 ? void 0 : (_config$toolbar = config.toolbar) === null || _config$toolbar === void 0 ? void 0 : _config$toolbar.items)) {
toolbarConfig = config;
}
var toolbarItems = get(toolbarConfig, "toolbar.items", []);
toolbarItems.forEach(function (item) {
switch (item) {
case "undo":
if (!moduleHelperList.includes("undo")) {
moduleHelperList.push("undo");
newModules.toolbar.handlers = _extends({},
newModules.toolbar.handlers, {
undo: function undo() {return customEditorEvent("undo", null);} });
newToolbarItemList.push( /*#__PURE__*/React.createElement(Tooltip, { title: "Undo" }, /*#__PURE__*/
React.createElement(IconButton, { disableRipple: true, className: "ql-undo" }, /*#__PURE__*/
React.createElement(Undo, null))));
}
break;
case "redo":
if (!moduleHelperList.includes("redo")) {
moduleHelperList.push("redo");
newModules.toolbar.handlers = _extends({},
newModules.toolbar.handlers, {
redo: function redo() {return customEditorEvent("redo", null);} });
newToolbarItemList.push( /*#__PURE__*/React.createElement(Tooltip, { title: "Redo" }, /*#__PURE__*/
React.createElement(IconButton, { disableRipple: true, className: "ql-redo" }, /*#__PURE__*/
React.createElement(Redo, null))));
}
break;
case "heading":
if (!moduleHelperList.includes("header")) {
moduleHelperList.push("header");
var headerPropValues = get(toolbarConfig, "heading.options", []);
var headerDefaultValues = get(defaultConfig, "heading.options", []);
var headerValues = headerPropValues || headerDefaultValues;
newToolbarItemList.push( /*#__PURE__*/React.createElement(ControlledTooltip, { title: "Heading" }, function (ref) {return /*#__PURE__*/React.createElement("span", { ref: ref, className: "ql-formats ql-formats_custom-arrow ql-formats_heading" }, /*#__PURE__*/
React.createElement("select", { className: "ql-header", defaultValue: headerValues.length ?
headerValues[0].view.replace(/\D/g, "") :
"" }, headerValues.map(function (_ref2, key) {var view = _ref2.view,title = _ref2.title;return /*#__PURE__*/React.createElement("option", { key: key, value: view.replace(/\D/g, "") }, title);})), /*#__PURE__*/
React.createElement(ExpandMoreIcon, { className: "ql-custom-down-arrow" }));}));
}
if (!formatList.includes("header")) {
formatList.push("header");
}
break;
case "fontFamily":
case "fontFamilyDropdown":
if (!moduleHelperList.includes("font")) {
moduleHelperList.push("font");
var defaultFontFamilyValues = get(defaultConfig, "fontFamily.options", []);
var propsFontFamilyValues = get(toolbarConfig, "fontFamily.options", []);
var fontFamilyValues = propsFontFamilyValues || defaultFontFamilyValues;
setFontList(_toConsumableArray(fontFamilyValues));
// const Font = Quill.import("formats/font");
// Font.whitelist = [];
// fontFamilyValues.forEach((font) => {
// Font.whitelist.push(font.value);
// });
// Quill.register(Font, true);
var Font = Quill.import("attributors/style/font");
delete Font.whitelist;
Quill.register(Font);
newToolbarItemList.push( /*#__PURE__*/React.createElement(ControlledTooltip, { title: "Font" }, function (ref) {return /*#__PURE__*/React.createElement("span", { ref: ref, className: "ql-formats ql-formats_custom-arrow ql-formats_family" }, /*#__PURE__*/
React.createElement("select", { className: "ql-font", defaultValue: fontFamilyValues.length ?
fontFamilyValues[0].value :
"" }, fontFamilyValues.map(function (_ref3, key) {var label = _ref3.label,value = _ref3.value;return /*#__PURE__*/React.createElement("option", { key: key, value: value }, label);})), /*#__PURE__*/
React.createElement(ExpandMoreIcon, { className: "ql-custom-down-arrow" }));}));
}
if (!formatList.includes("font")) {
formatList.push("font");
}
break;
case "fontSize":
case "fontSizeDropdown":
if (!moduleHelperList.includes("size")) {
moduleHelperList.push("size");
var defaultFontSizeOptions = get(defaultConfig, "fontSize.options", []);
var propsFontSizeOptions = get(toolbarConfig, "fontSize.options", []);
var defaultFontSizeValue = get(defaultConfig, "fontSize.defaultSize", []);
var propsFontSizeValue = get(toolbarConfig, "fontSize.defaultSize", []);
var fontSizeOptions = propsFontSizeOptions || defaultFontSizeOptions;
var fontSizeValue = propsFontSizeValue || defaultFontSizeValue;
var initFontSize = fontSizeOptions !== null && fontSizeOptions !== void 0 && fontSizeOptions.includes(fontSizeValue) ? "".concat(
fontSizeValue, "px") : "".concat(
fontSizeOptions[0], "px");
setDefaultFontSize(initFontSize);
setSizeList(fontSizeOptions);
var Size = Quill.import("attributors/style/size");
Size.whitelist = [];
fontSizeOptions.forEach(function (size) {
Size.whitelist.push("".concat(size, "px"));
});
Quill.register(Size, true);
newToolbarItemList.push( /*#__PURE__*/React.createElement(ControlledTooltip, { title: "Font size" }, function (ref) {return /*#__PURE__*/React.createElement("span", { ref: ref, className: "ql-formats ql-formats_custom-arrow ql-formats_size" }, /*#__PURE__*/
React.createElement("select", { className: "ql-size", defaultValue: initFontSize }, fontSizeOptions.map(function (i, key) {return /*#__PURE__*/React.createElement("option", { key: key, value: "".concat(i, "px") }, i);})), /*#__PURE__*/
React.createElement(ExpandMoreIcon, { className: "ql-custom-down-arrow" }));}));
}
if (!formatList.includes("size")) {
formatList.push("size");
}
break;
case "bold":
case "italic":
case "underline":
if (!moduleHelperList.includes(item)) {
moduleHelperList.push(item);
newToolbarItemList.push( /*#__PURE__*/React.createElement(Tooltip, { title: capitalize(item) }, /*#__PURE__*/
React.createElement(IconButton, { disableRipple: true, className: "ql-".concat(item) },
item === "bold" && /*#__PURE__*/React.createElement(Bold, null),
item === "italic" && /*#__PURE__*/React.createElement(Italic, null),
item === "underline" && /*#__PURE__*/React.createElement(Underline, null))));
}
if (!formatList.includes(item)) {
formatList.push(item);
}
break;
case "fontColor":
if (!moduleHelperList.includes("color")) {var _defaultConfig$fontCo;
moduleHelperList.push("color");
var colorList = defaultConfig === null || defaultConfig === void 0 ? void 0 : (_defaultConfig$fontCo = defaultConfig.fontColor) === null || _defaultConfig$fontCo === void 0 ? void 0 : _defaultConfig$fontCo.colors;
var columnCount = 3;
if (toolbarConfig.fontColor &&
toolbarConfig.fontColor.colors &&
Array.isArray(toolbarConfig.fontColor.colors)) {
colorList = toolbarConfig.fontColor.colors;
}
if (toolbarConfig.fontColor &&
toolbarConfig.fontColor.columns) {
columnCount = toolbarConfig.fontColor.columns;
}
if (colorList && colorList.length) {
defaultColor = colorList[0].color;
}
newToolbarItemList.push( /*#__PURE__*/React.createElement(ColorPicker, { tooltip: "Font Color", icon: "font color", colorList: colorList, columnCount: columnCount, onSelectColor: function onSelectColor(color) {return customEditorEvent("updateFontColor", color);} }));
}
if (!formatList.includes("color")) {
formatList.push("color");
}
break;
case "fontBackgroundColor":
if (!moduleHelperList.includes("background")) {var _defaultConfig$fontBa, _toolbarConfig$fontBa, _toolbarConfig, _toolbarConfig$fontBa2, _defaultConfig$fontBa2;
moduleHelperList.push("background");
var _colorList = defaultConfig === null || defaultConfig === void 0 ? void 0 : (_defaultConfig$fontBa = defaultConfig.fontBackgroundColor) === null || _defaultConfig$fontBa === void 0 ? void 0 : _defaultConfig$fontBa.colors;
if (toolbarConfig.fontBackgroundColor &&
toolbarConfig.fontBackgroundColor.colors &&
Array.isArray(toolbarConfig.fontBackgroundColor.colors)) {
_colorList = toolbarConfig.fontBackgroundColor.colors;
}
var _columnCount = (_toolbarConfig$fontBa = (_toolbarConfig = toolbarConfig) === null || _toolbarConfig === void 0 ? void 0 : (_toolbarConfig$fontBa2 = _toolbarConfig.fontBackgroundColor) === null || _toolbarConfig$fontBa2 === void 0 ? void 0 : _toolbarConfig$fontBa2.columns) !== null && _toolbarConfig$fontBa !== void 0 ? _toolbarConfig$fontBa :
defaultConfig === null || defaultConfig === void 0 ? void 0 : (_defaultConfig$fontBa2 = defaultConfig.fontBackgroundColor) === null || _defaultConfig$fontBa2 === void 0 ? void 0 : _defaultConfig$fontBa2.columns;
newToolbarItemList.push( /*#__PURE__*/React.createElement(ColorPicker, { tooltip: "Font Background Color", icon: "font background color", colorList: _colorList, columnCount: _columnCount, onSelectColor: function onSelectColor(color) {return customEditorEvent("updateFontBackgroundColor", color);} }));
}
if (!formatList.includes("background")) {
formatList.push("background");
}
break;
case "insertStaticLink":
if (!moduleHelperList.includes(item)) {
moduleHelperList.push(item);
var link = get(toolbarConfig, "staticLink.staticUrl", null) ||
get(defaultConfig, "staticLink.staticUrl", null);
var text = get(toolbarConfig, "staticLink.defaultText", null) ||
get(defaultConfig, "staticLink.defaultText", null);
newToolbarItemList.push( /*#__PURE__*/React.createElement(CustomLink, { link: link, text: text, onInsertLink: function onInsertLink(t) {return customEditorEvent("insertCustomLink", t);} }));
}
if (!formatList.includes(item)) {
formatList.push(item);
}
break;
case "link":
if (!moduleHelperList.includes(item)) {
moduleHelperList.push(item);
newToolbarItemList.push( /*#__PURE__*/React.createElement(CustomLink, { link: "", text: "", onInsertLink: function onInsertLink(linkInfo) {return customEditorEvent("insertUserLink", linkInfo);} }));
}
if (!formatList.includes(item)) {
formatList.push(item);
}
break;
case "imageUpload":
if (!moduleHelperList.includes("image")) {
moduleHelperList.push("image");
newToolbarItemList.push( /*#__PURE__*/React.createElement(Tooltip, { title: "Insert image" }, /*#__PURE__*/
React.createElement(IconButton, { disableRipple: true, className: "ql-image" }, /*#__PURE__*/
React.createElement(Upload, null))));
Quill.register("modules/imageResize", ImageResize); // register globally for QuillJS
if (!newModules.imageResize) {
newModules.imageResize = true;
// newModules.imageResize = {
// // parchment: Quill.import('parchment')
// // modules: ['Resize', 'DisplaySize', 'Toolbar']
// };
}
}
if (!formatList.includes("image")) {
formatList.push("image");
}
break;
case "alignment:left":
case "alignment:center":
case "alignment:right":
case "alignment:justify":
{
var direction = item.replace("alignment:", "");
var block = {
align: direction === "left" ? null : direction
};
if (!moduleHelperList.includes(block)) {
moduleHelperList.push(block);
newToolbarItemList.push( /*#__PURE__*/React.createElement(Tooltip, { title: "Align ".concat(direction) }, /*#__PURE__*/
React.createElement(IconButton, { className: "ql-align", value: direction !== "left" ? direction : "" },
direction === "left" && /*#__PURE__*/React.createElement(AlignmentLeft, null),
direction === "center" && /*#__PURE__*/React.createElement(AlignmentCenter, null),
direction === "right" && /*#__PURE__*/React.createElement(AlignmentRight, null),
direction === "justify" && /*#__PURE__*/React.createElement(AlignmentJustify, null))));
}
if (!formatList.includes("align")) {
formatList.push("align");
}
}
break;
case "numberedList":
case "bulletedList":
if (item === "numberedList") {
if (!moduleHelperList.includes({ list: "ordered" })) {
moduleHelperList.push({ list: "ordered" });
newToolbarItemList.push( /*#__PURE__*/React.createElement(Tooltip, { title: "Numbered list" }, /*#__PURE__*/
React.createElement(IconButton, { disableRipple: true, className: "ql-list", value: "ordered" }, /*#__PURE__*/
React.createElement(ListNumber, null))));
}
}
if (item === "bulletedList") {
if (!moduleHelperList.includes({ list: "bullet" })) {
moduleHelperList.push({ list: "bullet" });
newToolbarItemList.push( /*#__PURE__*/React.createElement(Tooltip, { title: "Bulleted list" }, /*#__PURE__*/
React.createElement(IconButton, { disableRipple: true, className: "ql-list", value: "bullet" }, /*#__PURE__*/
React.createElement(ListBullet, null))));
}
}
if (!formatList.includes("list")) {
formatList.push("list");
}
break;
case "|":
newToolbarItemList.push( /*#__PURE__*/React.createElement("span", { className: "ql-delimiter" }));
break;
default:}
});
setModules(_extends({}, newModules));
setFormats(formatList);
setToolbarItemList(newToolbarItemList);
setStoredConfig(_extends({}, config));
if (value || input && input.value) {var _fixedVal;
var fixedVal = value || (input === null || input === void 0 ? void 0 : input.value);
fixedVal = (_fixedVal = fixedVal) === null || _fixedVal === void 0 ? void 0 : _fixedVal.
replace(/<\D*><br><[^<]*/gm, "").
replace(/><br><\/span>/g, "></span>");
setTimeout(function () {
setVal(fixedVal);
}, 15);
}
if (defaultColor) {
setTimeout(function () {
customEditorEvent("updateFontColor", defaultColor);
}, 15);
}
onInitHandler(true);
}
}, [config]);
React.useEffect(function () {
if (value !== null || input && input.value !== null) {var _fixedVal2;
var fixedVal = value || (input === null || input === void 0 ? void 0 : input.value);
fixedVal = (_fixedVal2 = fixedVal) === null || _fixedVal2 === void 0 ? void 0 : _fixedVal2.
replace(/<\D*><br><[^<]*/gm, "").
replace(/><br><\/span>/g, "></span>");
if (fixedVal !== val) {
setVal(fixedVal);
}
}
}, [value, input]);
var onChangeContentEvent = function onChangeContentEvent(content, delta, source, editor) {
if (source === Quill["sources"].USER ||
source === Quill["sources"].SILENT) {
var customContent = content;
if (limit && extractContent(content).length > limit) {
var div = document.createElement("div");
div.innerHTML = content.trim();
customContent = generateLimitedHTML(div, limit, 0).innerHTML;
var myEditor = quillRef.current.getEditor();
myEditor.setContents(customContent, Quill["sources"].USER);
}
setVal(customContent);
onChangeHandler("customEvent", _extends({},
editor, {
textData: extractContent(customContent),
getData: function getData() {return customContent;},
delta: delta }));
} else
{
if (!value && quillRef) {
var _editor = quillRef.current.getEditor();
_editor.deleteText(0, _editor.getLength());
}
}
};
var onChangeSelection = function onChangeSelection(range, source, editor) {
onChangeCursorPositionHandler(range);
};
var onFocusEvent = function onFocusEvent(range, source, editor) {
onFocusHandler(range, source, editor);
};
var onBlurEvent = function onBlurEvent(previousRange, source, editor) {
onBlurHandler(previousRange, source, editor);
};
return /*#__PURE__*/React.createElement(CustomEditorWrapper, { className: "".concat(wrapClassName, " rich-editor"), fonts: fontList, sizes: sizeList, defaultFontSize: defaultFontSize, token: token }, /*#__PURE__*/
React.createElement(CustomToolbar, { toolbarItemList: toolbarItemList, token: token, disabled: disabled }), /*#__PURE__*/
React.createElement(ReactQuill
/* @ts-ignore */,
{
/* @ts-ignore */
ref: useCombinedRefs(quillRef, ref), theme: "snow", placeholder: placeholder, readOnly: disabled, value: val || '', onChange: onChangeContentEvent, onChangeSelection: onChangeSelection, onFocus: onFocusEvent, onBlur: onBlurEvent, modules: modules }));
});
RichEditor.defaultProps = {
wrapClassName: undefined,
config: defaultCo