phx-react 1.3.141 → 1.3.143

package/dist/cjs/components/TextEditor/ui/DropDown.js

@@ -0,0 +1,142 @@
+"use strict";
+exports.__esModule = true;
+exports.DropDownItem = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var react_1 = require("react");
+var react_dom_1 = require("react-dom");
+var DropDownContext = React.createContext(null);
+var dropDownPadding = 4;
+function DropDownItem(_a) {
+    var children = _a.children, className = _a.className, onClick = _a.onClick, title = _a.title;
+    var ref = (0, react_1.useRef)(null);
+    var dropDownContext = React.useContext(DropDownContext);
+    if (dropDownContext === null) {
+        throw new Error('DropDownItem must be used within a DropDown');
+    }
+    var registerItem = dropDownContext.registerItem;
+    (0, react_1.useEffect)(function () {
+        if (ref && ref.current) {
+            registerItem(ref);
+        }
+    }, [ref, registerItem]);
+    return (React.createElement("button", { ref: ref, className: className, onClick: onClick, title: title, type: 'button' }, children));
+}
+exports.DropDownItem = DropDownItem;
+function DropDownItems(_a) {
+    var children = _a.children, dropDownRef = _a.dropDownRef, onClose = _a.onClose;
+    var _b = (0, react_1.useState)(), items = _b[0], setItems = _b[1];
+    var _c = (0, react_1.useState)(), highlightedItem = _c[0], setHighlightedItem = _c[1];
+    var registerItem = (0, react_1.useCallback)(function (itemRef) {
+        setItems(function (prev) { return (prev ? tslib_1.__spreadArray(tslib_1.__spreadArray([], prev, true), [itemRef], false) : [itemRef]); });
+    }, [setItems]);
+    var handleKeyDown = function (event) {
+        if (!items)
+            return;
+        var key = event.key;
+        if (['Escape', 'ArrowUp', 'ArrowDown', 'Tab'].includes(key)) {
+            event.preventDefault();
+        }
+        if (key === 'Escape' || key === 'Tab') {
+            onClose();
+        }
+        else if (key === 'ArrowUp') {
+            setHighlightedItem(function (prev) {
+                if (!prev)
+                    return items[0];
+                var index = items.indexOf(prev) - 1;
+                return items[index === -1 ? items.length - 1 : index];
+            });
+        }
+        else if (key === 'ArrowDown') {
+            setHighlightedItem(function (prev) {
+                if (!prev)
+                    return items[0];
+                return items[items.indexOf(prev) + 1];
+            });
+        }
+    };
+    var contextValue = (0, react_1.useMemo)(function () { return ({
+        registerItem: registerItem
+    }); }, [registerItem]);
+    (0, react_1.useEffect)(function () {
+        if (items && !highlightedItem) {
+            setHighlightedItem(items[0]);
+        }
+        if (highlightedItem && highlightedItem.current) {
+            highlightedItem.current.focus();
+        }
+    }, [items, highlightedItem]);
+    return (React.createElement(DropDownContext.Provider, { value: contextValue },
+        React.createElement("div", { ref: dropDownRef, className: 'dropdown', onKeyDown: handleKeyDown }, children)));
+}
+function DropDown(_a) {
+    var buttonAriaLabel = _a.buttonAriaLabel, buttonClassName = _a.buttonClassName, buttonIconClassName = _a.buttonIconClassName, buttonLabel = _a.buttonLabel, children = _a.children, _b = _a.disabled, disabled = _b === void 0 ? false : _b, stopCloseOnClickSelf = _a.stopCloseOnClickSelf;
+    var dropDownRef = (0, react_1.useRef)(null);
+    var buttonRef = (0, react_1.useRef)(null);
+    var _c = (0, react_1.useState)(false), showDropDown = _c[0], setShowDropDown = _c[1];
+    var handleClose = function () {
+        setShowDropDown(false);
+        if (buttonRef && buttonRef.current) {
+            buttonRef.current.focus();
+        }
+    };
+    (0, react_1.useEffect)(function () {
+        var button = buttonRef.current;
+        var dropDown = dropDownRef.current;
+        if (showDropDown && button !== null && dropDown !== null) {
+            var _a = button.getBoundingClientRect(), left = _a.left, top_1 = _a.top;
+            dropDown.style.top = "".concat(top_1 + button.offsetHeight + dropDownPadding, "px");
+            dropDown.style.left = "".concat(Math.min(left, window.innerWidth - dropDown.offsetWidth - 20), "px");
+        }
+    }, [dropDownRef, buttonRef, showDropDown]);
+    (0, react_1.useEffect)(function () {
+        var button = buttonRef.current;
+        if (button !== null && showDropDown) {
+            var handle_1 = function (event) {
+                var target = event.target;
+                if (stopCloseOnClickSelf) {
+                    if (dropDownRef.current && dropDownRef.current.contains(target)) {
+                        return;
+                    }
+                }
+                if (!button.contains(target)) {
+                    setShowDropDown(false);
+                }
+            };
+            document.addEventListener('click', handle_1);
+            return function () {
+                document.removeEventListener('click', handle_1);
+            };
+        }
+        return;
+    }, [dropDownRef, buttonRef, showDropDown, stopCloseOnClickSelf]);
+    (0, react_1.useEffect)(function () {
+        var handleButtonPositionUpdate = function () {
+            if (showDropDown) {
+                var button = buttonRef.current;
+                var dropDown = dropDownRef.current;
+                if (button !== null && dropDown !== null) {
+                    var top_2 = button.getBoundingClientRect().top;
+                    var newPosition = top_2 + button.offsetHeight + dropDownPadding;
+                    if (newPosition !== dropDown.getBoundingClientRect().top) {
+                        dropDown.style.top = "".concat(newPosition, "px");
+                    }
+                }
+            }
+        };
+        document.addEventListener('scroll', handleButtonPositionUpdate);
+        return function () {
+            document.removeEventListener('scroll', handleButtonPositionUpdate);
+        };
+    }, [buttonRef, dropDownRef, showDropDown]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("button", { ref: buttonRef, "aria-label": buttonAriaLabel || buttonLabel, className: buttonClassName, disabled: disabled, onClick: function () { return setShowDropDown(!showDropDown); }, type: 'button' },
+            buttonIconClassName && React.createElement("span", { className: buttonIconClassName }),
+            buttonLabel && React.createElement("span", { className: 'text dropdown-button-text' }, buttonLabel),
+            React.createElement("i", { className: 'chevron-down' })),
+        showDropDown &&
+            (0, react_dom_1.createPortal)(React.createElement(DropDownItems, { dropDownRef: dropDownRef, onClose: handleClose }, children), document.body)));
+}
+exports["default"] = DropDown;
+//# sourceMappingURL=DropDown.js.map

package/dist/cjs/components/TextEditor/ui/DropDown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropDown.js","sourceRoot":"","sources":["../../../../../src/components/TextEditor/ui/DropDown.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/UploadFile/UploadFile.d.ts

@@ -8,5 +8,7 @@ export interface ModalProps {
     fileName: string;
     moduleId: string;
     projectId: string;
+    defaultLink?: string;
+    fileType?: 'excel' | 'image';
 }
-export declare const PHXUploadFile: ({ apiCdnUpload, projectId, moduleId, basePath, fileName, handleListenUpload, size, title, }: ModalProps) => React.JSX.Element;
+export declare const PHXUploadFile: ({ apiCdnUpload, basePath, fileName, fileType, handleListenUpload, defaultLink, moduleId, projectId, size, title, }: ModalProps) => React.JSX.Element;

package/dist/cjs/components/UploadFile/UploadFile.js

@@ -2,14 +2,13 @@
 exports.__esModule = true;
 exports.PHXUploadFile = void 0;
 var tslib_1 = require("tslib");
-var image_1 = tslib_1.__importDefault(require("next/image"));
 var react_1 = tslib_1.__importStar(require("react"));
 var types_1 = require("../types");
 var Card_1 = require("../Card");
 var Loading_1 = require("../Loading");
 var Button_1 = require("../Button");
 var PHXUploadFile = function (_a) {
-    var apiCdnUpload = _a.apiCdnUpload, projectId = _a.projectId, moduleId = _a.moduleId, basePath = _a.basePath, fileName = _a.fileName, handleListenUpload = _a.handleListenUpload, size = _a.size, title = _a.title;
+    var apiCdnUpload = _a.apiCdnUpload, basePath = _a.basePath, fileName = _a.fileName, _b = _a.fileType, fileType = _b === void 0 ? 'image' : _b, handleListenUpload = _a.handleListenUpload, defaultLink = _a.defaultLink, moduleId = _a.moduleId, projectId = _a.projectId, size = _a.size, title = _a.title;
     var sizeModal = (0, types_1.classNames)(size === 'small' && 'sm:max-w-lg');
     var fileInputRef = (0, react_1.useRef)(null);
     var handleUploadClick = function () {
@@ -17,7 +16,7 @@ var PHXUploadFile = function (_a) {
             fileInputRef.current.click();
         }
     };
-    var _b = (0, react_1.useState)(''), link = _b[0], setLink = _b[1];
+    var _c = (0, react_1.useState)(''), link = _c[0], setLink = _c[1];
     var handleFileChange = function (event) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
         var selectedFile, dataSubmit, response, responseData, res, error_1;
         return tslib_1.__generator(this, function (_a) {
@@ -25,6 +24,7 @@ var PHXUploadFile = function (_a) {
                 case 0:
                     selectedFile = event.target.files[0];
                     if (!selectedFile) return [3 /*break*/, 8];
+                    event.target.value = '';
                     _a.label = 1;
                 case 1:
                     _a.trys.push([1, 7, , 8]);
@@ -47,7 +47,7 @@ var PHXUploadFile = function (_a) {
                     res = _a.sent();
                     setLink(res);
                     if (responseData === null || responseData === void 0 ? void 0 : responseData.link) {
-                        handleListenUpload(event, responseData === null || responseData === void 0 ? void 0 : responseData.link);
+                        handleListenUpload(selectedFile, responseData === null || responseData === void 0 ? void 0 : responseData.link);
                     }
                     return [3 /*break*/, 6];
                 case 5:
@@ -62,8 +62,8 @@ var PHXUploadFile = function (_a) {
             }
         });
     }); };
-    var _c = (0, react_1.useState)(false), isImage = _c[0], setIsImage = _c[1];
-    var _d = (0, react_1.useState)(false), showImage = _d[0], setShowImage = _d[1];
+    var _d = (0, react_1.useState)(false), isImage = _d[0], setIsImage = _d[1];
+    var _e = (0, react_1.useState)(false), showImage = _e[0], setShowImage = _e[1];
     (0, react_1.useEffect)(function () {
         var _a;
         if (fileName) {
@@ -84,22 +84,30 @@ var PHXUploadFile = function (_a) {
             return;
         }
     }, [fileName]);
+    (0, react_1.useEffect)(function () {
+        if (defaultLink) {
+            setShowImage(true);
+        }
+    }, []);
     return (react_1["default"].createElement("div", { className: sizeModal },
         react_1["default"].createElement(Card_1.PHXCard, { primaryHeader: true, title: title },
-            react_1["default"].createElement("div", { className: "".concat(showImage && isImage ? 'grid grid-cols-4 grid-rows-2 gap-2' : '') },
-                react_1["default"].createElement("div", { className: "".concat(showImage && isImage ? 'col-span-2 row-span-2 rounded-lg border border-#00000080' : '') },
-                    showImage && isImage && (react_1["default"].createElement("div", { className: 'flex h-full items-center' },
-                        react_1["default"].createElement(image_1["default"], { alt: 'Alternative text for the image', className: 'float-left w-full', height: 200, src: "".concat(link !== null && link), width: 500 }))),
-                    fileName && !showImage ? (react_1["default"].createElement("div", { className: 'w-[300px] h-[200px] rounded-lg border border-#00000080 flex items-center justify-center' },
-                        react_1["default"].createElement(Loading_1.PHXSpinner, { className: 'w-5 h-5' }))) : null),
-                react_1["default"].createElement("div", { className: "flex flex-col  ".concat(showImage && isImage ? 'col-span-1 row-span-1' : 'w-full', " ").concat(showImage && isImage ? 'col-span-1 row-span-1' : 'h-full', " justify-center cursor-pointer rounded-lg border border-dashed border-gray-900/25 px-5 pb-8 pt-8 hover:bg-gray-200") },
+            react_1["default"].createElement("div", { className: "".concat(isImage || defaultLink ? 'grid grid-cols-4 grid-rows-2 gap-2' : '') },
+                react_1["default"].createElement("div", { className: "".concat(isImage || defaultLink ? 'col-span-2 row-span-2 rounded-lg border border-#00000080' : '') },
+                    ((showImage && isImage) || (showImage && defaultLink)) && (react_1["default"].createElement("div", { className: 'flex h-full items-center' },
+                        react_1["default"].createElement("img", { alt: 'Alternative text for the image', className: 'float-left w-full', src: "".concat(link ? link : defaultLink) }))),
+                    fileName && !showImage && isImage ? (react_1["default"].createElement("div", { className: 'rounded-lg h-full border border-#00000080 flex items-center justify-center' },
+                        react_1["default"].createElement(Loading_1.PHXSpinner, { className: 'w-5 h-5' }))) : ('')),
+                react_1["default"].createElement("div", { className: 'flex flex-col justify-center cursor-pointer rounded-lg border border-dashed border-gray-900/25 px-5 pb-8 pt-8 hover:bg-[#f7f7f7]' },
                     react_1["default"].createElement("div", { className: 'flex flex-col items-center justify-center' },
                         !isImage && react_1["default"].createElement("p", { className: 'mt-2 text-sm text-gray-600' }, fileName),
                         react_1["default"].createElement("div", { className: 'mt-2 flex text-sm leading-6 text-gray-600' },
                             react_1["default"].createElement("label", { className: 'relative cursor-pointer rounded-md bg-white font-semibold text-indigo-600 hover:text-indigo-500', htmlFor: 'file-upload' },
                                 react_1["default"].createElement(Button_1.PHXButton, { onClick: handleUploadClick, secondary: true, size: 'micro' }, "T\u1EA3i l\u00EAn"),
-                                react_1["default"].createElement("input", { ref: fileInputRef, accept: '.jpg, .jpeg, .png, .gif, .xlsx, .xls', className: 'sr-only', id: 'file-upload', name: 'file-upload', onChange: handleFileChange, type: 'file' }))),
-                        react_1["default"].createElement("p", { className: 'text-xs leading-6 cursor-pointer text-gray-400' }, showImage && isImage ? '' : 'Chấp nhận hình ảnh, excel')))))));
+                                react_1["default"].createElement("input", { ref: fileInputRef, accept: "".concat((fileType === 'excel' && '.xlsx, .xls') || (fileType === 'image' && 'jpg, .jpeg, .png, .gif')), className: 'sr-only', id: 'file-upload', name: 'file-upload', onChange: handleFileChange, type: 'file' }))),
+                        react_1["default"].createElement("p", { className: 'text-xs leading-6 cursor-pointer text-gray-400' }, isImage
+                            ? ''
+                            : "".concat((fileType === 'excel' && 'XLXS, XLS tối đa 100MB') ||
+                                (fileType === 'image' && 'JPG, JPEG, PNG, GIF')))))))));
 };
 exports.PHXUploadFile = PHXUploadFile;
 //# sourceMappingURL=UploadFile.js.map

package/dist/cjs/components/UploadFile/UploadFile.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadFile.js","sourceRoot":"","sources":["../../../../src/components/UploadFile/UploadFile.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"UploadFile.js","sourceRoot":"","sources":["../../../../src/components/UploadFile/UploadFile.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/TextEditor/plugins/ToolbarPlugin.js

@@ -1,14 +1,14 @@
-import React from 'react';
 import { $createCodeNode, $isCodeNode, getDefaultCodeLanguage, getCodeLanguages } from '@lexical/code';
 import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
 import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND, $isListNode, ListNode, } from '@lexical/list';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { $createHeadingNode, $createQuoteNode, $isHeadingNode } from '@lexical/rich-text';
-import { $isParentElementRTL, $wrapNodes, $isAtNodeEnd } from '@lexical/selection';
+import { $isParentElementRTL, $wrapNodes, $patchStyleText, $getSelectionStyleValueForProperty, $isAtNodeEnd, } from '@lexical/selection';
 import { $getNearestNodeOfType, mergeRegister } from '@lexical/utils';
 import { CAN_REDO_COMMAND, CAN_UNDO_COMMAND, REDO_COMMAND, UNDO_COMMAND, SELECTION_CHANGE_COMMAND, FORMAT_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND, $getSelection, $isRangeSelection, $createParagraphNode, $getNodeByKey, } from 'lexical';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
+import DropDown, { DropDownItem } from '../ui/DropDown';
 var LowPriority = 1;
 var supportedBlockTypes = new Set(['paragraph', 'quote', 'code', 'h1', 'h2', 'ul', 'ol']);
 var blockTypeToBlockName = {
@@ -23,6 +23,45 @@ var blockTypeToBlockName = {
     quote: 'Quote',
     ul: 'Bulleted List'
 };
+var FONT_SIZE_OPTIONS = [
+    ['10px', '10px'],
+    ['11px', '11px'],
+    ['12px', '12px'],
+    ['13px', '13px'],
+    ['14px', '14px'],
+    ['15px', '15px'],
+    ['16px', '16px'],
+    ['17px', '17px'],
+    ['18px', '18px'],
+    ['19px', '19px'],
+    ['20px', '20px'],
+];
+function dropDownActiveClass(active) {
+    if (active)
+        return 'active dropdown-item-active';
+    else
+        return '';
+}
+function FontDropDown(_a) {
+    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, editor = _a.editor, style = _a.style, value = _a.value;
+    var handleClick = useCallback(function (option) {
+        editor.update(function () {
+            var _a;
+            var selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                $patchStyleText(selection, (_a = {},
+                    _a[style] = option,
+                    _a));
+            }
+        });
+    }, [editor, style]);
+    var buttonAriaLabel = style === 'font-family' ? 'Formatting options for font family' : 'Formatting options for font size';
+    return (React.createElement(DropDown, { buttonAriaLabel: buttonAriaLabel, buttonClassName: 'toolbar-item ' + style, buttonIconClassName: style === 'font-family' ? 'icon block-type font-family' : '', buttonLabel: value, disabled: disabled }, FONT_SIZE_OPTIONS.map(function (_a) {
+        var option = _a[0], text = _a[1];
+        return (React.createElement(DropDownItem, { key: option, className: "item ".concat(dropDownActiveClass(value === option), " ").concat(style === 'font-size' ? 'fontsize-item' : ''), onClick: function () { return handleClick(option); } },
+            React.createElement("span", { className: 'text' }, text)));
+    })));
+}
 function Divider() {
     return React.createElement("div", { className: 'divider' });
 }
@@ -314,6 +353,8 @@ export default function ToolbarPlugin() {
     var _l = useState(false), isUnderline = _l[0], setIsUnderline = _l[1];
     var _m = useState(false), isStrikethrough = _m[0], setIsStrikethrough = _m[1];
     var _o = useState(false), isCode = _o[0], setIsCode = _o[1];
+    var _p = useState(function () { return editor.isEditable(); }), isEditable = _p[0], setIsEditable = _p[1];
+    var _q = useState('15px'), fontSize = _q[0], setFontSize = _q[1];
     var updateToolbar = useCallback(function () {
         var selection = $getSelection();
         if ($isRangeSelection(selection)) {
@@ -336,6 +377,7 @@ export default function ToolbarPlugin() {
                     }
                 }
             }
+            setFontSize($getSelectionStyleValueForProperty(selection, 'font-size', '15px'));
             // Update text format
             setIsBold(selection.hasFormat('bold'));
             setIsItalic(selection.hasFormat('italic'));
@@ -354,45 +396,10 @@ export default function ToolbarPlugin() {
             }
         }
     }, [editor]);
-    // useEffect(
-    //   () =>
-    //     mergeRegister(
-    //       editor.registerUpdateListener(({ editorState }: any) => {
-    //         editorState.read(() => {
-    //           updateToolbar()
-    //         })
-    //       }),
-    //       editor.registerCommand(
-    //         SELECTION_CHANGE_COMMAND,
-    //         () => {
-    //           updateToolbar()
-    //           return false
-    //         },
-    //         LowPriority,
-    //       ),
-    //       editor.registerCommand(
-    //         CAN_UNDO_COMMAND,
-    //         (payload: any) => {
-    //           console.log('payload', payload)
-    //           setCanUndo(payload)
-    //           return false
-    //         },
-    //         LowPriority,
-    //       ),
-    //       editor.registerCommand(
-    //         CAN_REDO_COMMAND,
-    //         (payload: any) => {
-    //           setCanRedo(payload)
-    //           return false
-    //         },
-    //         LowPriority,
-    //       ),
-    //     ),
-    //   [editor, updateToolbar],
-    // )
     useEffect(function () {
-        console.log('chay vao day');
-        mergeRegister(editor.registerUpdateListener(function (_a) {
+        mergeRegister(editor.registerEditableListener(function (editable) {
+            setIsEditable(editable);
+        }), editor.registerUpdateListener(function (_a) {
             var editorState = _a.editorState;
             editorState.read(function () {
                 updateToolbar();
@@ -429,13 +436,13 @@ export default function ToolbarPlugin() {
     }, [editor, isLink]);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { ref: toolbarRef, className: 'toolbar' },
-            React.createElement("button", { type: 'button', "aria-label": 'Undo', className: 'toolbar-item spaced', disabled: !canUndo, onClick: function () {
+            React.createElement("button", { "aria-label": 'Undo', className: 'toolbar-item spaced', disabled: !canUndo, onClick: function () {
                     editor.dispatchCommand(UNDO_COMMAND);
-                } },
+                }, type: 'button' },
                 React.createElement("i", { className: 'format undo' })),
-            React.createElement("button", { type: 'button', "aria-label": 'Redo', className: 'toolbar-item', disabled: !canRedo, onClick: function () {
+            React.createElement("button", { "aria-label": 'Redo', className: 'toolbar-item', disabled: !canRedo, onClick: function () {
                     editor.dispatchCommand(REDO_COMMAND);
-                } },
+                }, type: 'button' },
                 React.createElement("i", { className: 'format redo' })),
             React.createElement(Divider, null),
             supportedBlockTypes.has(blockType) && (React.createElement(React.Fragment, null,
@@ -446,6 +453,8 @@ export default function ToolbarPlugin() {
                 showBlockOptionsDropDown &&
                     createPortal(React.createElement(BlockOptionsDropdownList, { blockType: blockType, editor: editor, setShowBlockOptionsDropDown: setShowBlockOptionsDropDown, toolbarRef: toolbarRef }), document.body),
                 React.createElement(Divider, null))),
+            React.createElement(FontDropDown, { disabled: !isEditable, editor: editor, style: 'font-size', value: fontSize }),
+            React.createElement(Divider, null),
             blockType === 'code' ? (React.createElement(React.Fragment, null,
                 React.createElement(Select, { className: 'toolbar-item code-language', onChange: onCodeLanguageSelect, options: codeLanguges, value: codeLanguage }),
                 React.createElement("i", { className: 'chevron-down inside' }))) : (React.createElement(React.Fragment, null,
@@ -490,6 +499,6 @@ export default function ToolbarPlugin() {
                     }, type: 'button' },
                     React.createElement("i", { className: 'format justify-align' })),
                 ' '))),
-        React.createElement("style", null, "\n          ul li {\n            /* list-style: inherit !important; */\n            list-style-type: disc !important;\n          \n          }\n          \n          ol {\n            /* list-style: inherit !important; */\n            list-style-type: decimal !important;\n          }\n          .other h2 {\n              font-size: 18px;\n              color: #444;\n              margin-bottom: 7px;\n            }\n            \n            .other a {\n              color: #777;\n              text-decoration: underline;\n              font-size: 14px;\n            }\n            \n            .other ul {\n              padding: 0;\n              margin: 0;\n              list-style-type: none;\n            }\n            \n            .App {\n              font-family: sans-serif;\n              text-align: center;\n            }\n            \n            h1 {\n              font-size: 24px;\n              color: #333;\n            }\n            \n            .ltr {\n              text-align: left;\n            }\n            \n            .rtl {\n              text-align: right;\n            }\n            \n            .editor-container {\n              margin: 20px 0px;\n              border-radius: 2px;\n              max-width: 600px;\n              color: #000;\n              position: relative;\n              line-height: 20px;\n              font-weight: 400;\n              text-align: left;\n              border-top-left-radius: 10px;\n              border-top-right-radius: 10px;\n            }\n            \n            .editor-inner {\n              background: #fff;\n              position: relative;\n            }\n            \n            .editor-input {\n              min-height: 150px;\n              resize: none;\n              font-size: 15px;\n              caret-color: rgb(5, 5, 5);\n              position: relative;\n              tab-size: 1;\n              outline: 0;\n              padding: 15px 10px;\n              caret-color: #444;\n            }\n            \n            .editor-placeholder {\n              color: #999;\n              overflow: hidden;\n              position: absolute;\n              text-overflow: ellipsis;\n              top: 15px;\n              left: 10px;\n              font-size: 15px;\n              user-select: none;\n              display: inline-block;\n              pointer-events: none;\n            }\n            \n            .editor-text-bold {\n              font-weight: bold;\n            }\n            \n            .editor-text-italic {\n              font-style: italic;\n            }\n            \n            .editor-text-underline {\n              text-decoration: underline;\n            }\n            \n            .editor-text-strikethrough {\n              text-decoration: line-through;\n            }\n            \n            .editor-text-underlineStrikethrough {\n              text-decoration: underline line-through;\n            }\n            \n            .editor-text-code {\n              background-color: rgb(240, 242, 245);\n              padding: 1px 0.25rem;\n              font-family: Menlo, Consolas, Monaco, monospace;\n              font-size: 94%;\n            }\n            \n            .editor-link {\n              color: rgb(33, 111, 219);\n              text-decoration: none;\n            }\n            \n            .tree-view-output {\n              display: block;\n              background: #222;\n              color: #fff;\n              padding: 5px;\n              font-size: 12px;\n              white-space: pre-wrap;\n              margin: 1px auto 10px auto;\n              max-height: 250px;\n              position: relative;\n              border-bottom-left-radius: 10px;\n              border-bottom-right-radius: 10px;\n              overflow: auto;\n              line-height: 14px;\n            }\n            \n            .editor-code {\n              background-color: rgb(240, 242, 245);\n              font-family: Menlo, Consolas, Monaco, monospace;\n              display: block;\n              padding: 8px 8px 8px 52px;\n              line-height: 1.53;\n              font-size: 13px;\n              margin: 0;\n              margin-top: 8px;\n              margin-bottom: 8px;\n              tab-size: 2;\n              /* white-space: pre; */\n              overflow-x: auto;\n              position: relative;\n            }\n            \n            .editor-code:before {\n              content: attr(data-gutter);\n              position: absolute;\n              background-color: #eee;\n              left: 0;\n              top: 0;\n              border-right: 1px solid #ccc;\n              padding: 8px;\n              color: #777;\n              white-space: pre-wrap;\n              text-align: right;\n              min-width: 25px;\n            }\n            .editor-code:after {\n              content: attr(data-highlight-language);\n              top: 0;\n              right: 3px;\n              padding: 3px;\n              font-size: 10px;\n              text-transform: uppercase;\n              position: absolute;\n              color: rgba(0, 0, 0, 0.5);\n            }\n            \n            .editor-tokenComment {\n              color: slategray;\n            }\n            \n            .editor-tokenPunctuation {\n              color: #999;\n            }\n            \n            .editor-tokenProperty {\n              color: #905;\n            }\n            \n            .editor-tokenSelector {\n              color: #690;\n            }\n            \n            .editor-tokenOperator {\n              color: #9a6e3a;\n            }\n            \n            .editor-tokenAttr {\n              color: #07a;\n            }\n            \n            .editor-tokenVariable {\n              color: #e90;\n            }\n            \n            .editor-tokenFunction {\n              color: #dd4a68;\n            }\n            \n            .editor-paragraph {\n              margin: 0;\n              margin-bottom: 8px;\n              position: relative;\n            }\n            \n            .editor-paragraph:last-child {\n              margin-bottom: 0;\n            }\n            \n            .editor-heading-h1 {\n              font-size: 24px;\n              color: rgb(5, 5, 5);\n              font-weight: 400;\n              margin: 0;\n              margin-bottom: 12px;\n              padding: 0;\n            }\n            \n            .editor-heading-h2 {\n              font-size: 15px;\n              color: rgb(101, 103, 107);\n              font-weight: 700;\n              margin: 0;\n              margin-top: 10px;\n              padding: 0;\n              text-transform: uppercase;\n            }\n            \n            .editor-quote {\n              margin: 0;\n              margin-left: 20px;\n              font-size: 15px;\n              color: rgb(101, 103, 107);\n              border-left-color: rgb(206, 208, 212);\n              border-left-width: 4px;\n              border-left-style: solid;\n              padding-left: 16px;\n            }\n            \n            .editor-list-ol {\n              padding: 0;\n              margin: 0;\n              margin-left: 16px;\n            }\n            \n            .editor-list-ul {\n              padding: 0;\n              margin: 0;\n              margin-left: 16px;\n            }\n            \n            .editor-listitem {\n              margin: 8px 32px 8px 32px;\n            }\n            \n            .editor-nested-listitem {\n              list-style-type: none;\n            }\n            \n            pre::-webkit-scrollbar {\n              background: transparent;\n              width: 10px;\n            }\n            \n            pre::-webkit-scrollbar-thumb {\n              background: #999;\n            }\n            \n            .debug-timetravel-panel {\n              overflow: hidden;\n              padding: 0 0 10px 0;\n              margin: auto;\n              display: flex;\n            }\n            \n            .debug-timetravel-panel-slider {\n              padding: 0;\n              flex: 8;\n            }\n            \n            .debug-timetravel-panel-button {\n              padding: 0;\n              border: 0;\n              background: none;\n              flex: 1;\n              color: #fff;\n              font-size: 12px;\n            }\n            \n            .debug-timetravel-panel-button:hover {\n              text-decoration: underline;\n            }\n            \n            .debug-timetravel-button {\n              border: 0;\n              padding: 0;\n              font-size: 12px;\n              top: 10px;\n              right: 15px;\n              position: absolute;\n              background: none;\n              color: #fff;\n            }\n            \n            .debug-timetravel-button:hover {\n              text-decoration: underline;\n            }\n              \n            .toolbar {\n              display: flex;\n              margin-bottom: 1px;\n              background: #fff;\n              padding: 4px;\n              border-top-left-radius: 10px;\n              border-top-right-radius: 10px;\n              vertical-align: middle;\n            }\n            \n            .toolbar button.toolbar-item {\n              border: 0;\n              display: flex;\n              background: none;\n              border-radius: 10px;\n              padding: 8px;\n              cursor: pointer;\n              vertical-align: middle;\n            }\n            \n            .toolbar button.toolbar-item:disabled {\n              cursor: not-allowed;\n            }\n            \n            .toolbar button.toolbar-item.spaced {\n              margin-right: 2px;\n            }\n            \n            .toolbar button.toolbar-item i.format {\n              background-size: contain;\n              display: inline-block;\n              height: 18px;\n              width: 18px;\n              margin-top: 2px;\n              vertical-align: -0.25em;\n              display: flex;\n              opacity: 0.6;\n            }\n            \n            .toolbar button.toolbar-item:disabled i.format {\n              opacity: 0.2;\n            }\n            \n            .toolbar button.toolbar-item.active {\n              background-color: rgba(223, 232, 250, 0.3);\n            }\n            \n            .toolbar button.toolbar-item.active i {\n              opacity: 1;\n            }\n            \n            .toolbar .toolbar-item:hover:not([disabled]) {\n              background-color: #eee;\n            }\n            \n            .toolbar .divider {\n              width: 1px;\n              background-color: #eee;\n              margin: 0 4px;\n            }\n            \n            .toolbar select.toolbar-item {\n              border: 0;\n              display: flex;\n              background: none;\n              border-radius: 10px;\n              padding: 8px;\n              vertical-align: middle;\n              -webkit-appearance: none;\n              -moz-appearance: none;\n              width: 70px;\n              font-size: 14px;\n              color: #777;\n              text-overflow: ellipsis;\n            }\n            \n            .toolbar select.code-language {\n              text-transform: capitalize;\n              width: 130px;\n            }\n            \n            .toolbar .toolbar-item .text {\n              display: flex;\n              line-height: 20px;\n              width: 200px;\n              vertical-align: middle;\n              font-size: 14px;\n              color: #777;\n              text-overflow: ellipsis;\n              width: 70px;\n              overflow: hidden;\n              height: 20px;\n              text-align: left;\n            }\n            \n            .toolbar .toolbar-item .icon {\n              display: flex;\n              width: 20px;\n              height: 20px;\n              user-select: none;\n              margin-right: 8px;\n              line-height: 16px;\n              background-size: contain;\n            }\n            \n            .toolbar i.chevron-down {\n              margin-top: 3px;\n              width: 16px;\n              height: 16px;\n              display: flex;\n              user-select: none;\n            }\n            \n            .toolbar i.chevron-down.inside {\n              width: 16px;\n              height: 16px;\n              display: flex;\n              margin-left: -25px;\n              margin-top: 11px;\n              margin-right: 10px;\n              pointer-events: none;\n            }\n            \n            i.chevron-down {\n              background-color: transparent;\n              background-size: contain;\n              display: inline-block;\n              height: 8px;\n              width: 8px;\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/chevron-down.svg);\n            }\n            \n            #block-controls button:hover {\n              background-color: #efefef;\n            }\n            \n            #block-controls button:focus-visible {\n              border-color: blue;\n            }\n            \n            #block-controls span.block-type {\n              background-size: contain;\n              display: block;\n              width: 18px;\n              height: 18px;\n              margin: 2px;\n            }\n            \n            #block-controls span.block-type.paragraph {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/text-paragraph.svg);\n            }\n            \n            #block-controls span.block-type.h1 {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-h1.svg);\n            }\n            \n            #block-controls span.block-type.h2 {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-h2.svg);\n            }\n            \n            #block-controls span.block-type.quote {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/chat-square-quote.svg);\n            }\n            \n            #block-controls span.block-type.ul {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/list-ul.svg);\n            }\n            \n            #block-controls span.block-type.ol {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/list-ol.svg);\n            }\n            \n            #block-controls span.block-type.code {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/code.svg);\n            }\n            \n            .dropdown {\n              z-index: 5;\n              display: block;\n              position: absolute;\n              box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1),\n                inset 0 0 0 1px rgba(255, 255, 255, 0.5);\n              border-radius: 8px;\n              min-width: 100px;\n              min-height: 40px;\n              background-color: #fff;\n            }\n            \n            .dropdown .item {\n              margin: 0 8px 0 8px;\n              padding: 8px;\n              color: #050505;\n              cursor: pointer;\n              line-height: 16px;\n              font-size: 15px;\n              display: flex;\n              align-content: center;\n              flex-direction: row;\n              flex-shrink: 0;\n              justify-content: space-between;\n              background-color: #fff;\n              border-radius: 8px;\n              border: 0;\n              min-width: 268px;\n            }\n            \n            .dropdown .item .active {\n              display: flex;\n              width: 20px;\n              height: 20px;\n              background-size: contain;\n            }\n            \n            .dropdown .item:first-child {\n              margin-top: 8px;\n            }\n            \n            .dropdown .item:last-child {\n              margin-bottom: 8px;\n            }\n            \n            .dropdown .item:hover {\n              background-color: #eee;\n            }\n            \n            .dropdown .item .text {\n              display: flex;\n              line-height: 20px;\n              flex-grow: 1;\n              width: 200px;\n            }\n            \n            .dropdown .item .icon {\n              display: flex;\n              width: 20px;\n              height: 20px;\n              user-select: none;\n              margin-right: 12px;\n              line-height: 16px;\n              background-size: contain;\n            }\n            \n            .link-editor {\n              position: absolute;\n              z-index: 100;\n              top: -10000px;\n              left: -10000px;\n              margin-top: -6px;\n              max-width: 300px;\n              width: 100%;\n              opacity: 0;\n              background-color: #fff;\n              box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);\n              border-radius: 8px;\n              transition: opacity 0.5s;\n            }\n            \n            .link-editor .link-input {\n              display: block;\n              width: calc(100% - 24px);\n              box-sizing: border-box;\n              margin: 8px 12px;\n              padding: 8px 12px;\n              border-radius: 15px;\n              background-color: #eee;\n              font-size: 15px;\n              color: rgb(5, 5, 5);\n              border: 0;\n              outline: 0;\n              position: relative;\n              font-family: inherit;\n            }\n            \n            .link-editor div.link-edit {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/pencil-fill.svg);\n              background-size: 16px;\n              background-position: center;\n              background-repeat: no-repeat;\n              width: 35px;\n              vertical-align: -0.25em;\n              position: absolute;\n              right: 0;\n              top: 0;\n              bottom: 0;\n              cursor: pointer;\n            }\n            \n            .link-editor .link-input a {\n              color: rgb(33, 111, 219);\n              text-decoration: none;\n              display: block;\n              white-space: nowrap;\n              overflow: hidden;\n              margin-right: 30px;\n              text-overflow: ellipsis;\n            }\n            \n            .link-editor .link-input a:hover {\n              text-decoration: underline;\n            }\n            \n            .link-editor .button {\n              width: 20px;\n              height: 20px;\n              display: inline-block;\n              padding: 6px;\n              border-radius: 8px;\n              cursor: pointer;\n              margin: 0 2px;\n            }\n            \n            .link-editor .button.hovered {\n              width: 20px;\n              height: 20px;\n              display: inline-block;\n              background-color: #eee;\n            }\n            \n            .link-editor .button i,\n            .actions i {\n              background-size: contain;\n              display: inline-block;\n              height: 20px;\n              width: 20px;\n              vertical-align: -0.25em;\n            }\n            \n            i.undo {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/arrow-counterclockwise.svg);\n            }\n            \n            i.redo {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/arrow-clockwise.svg);\n            }\n            \n            .icon.paragraph {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/text-paragraph.svg);\n            }\n            \n            .icon.large-heading,\n            .icon.h1 {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-h1.svg);\n            }\n            \n            .icon.small-heading,\n            .icon.h2 {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-h2.svg);\n            }\n            \n            .icon.bullet-list,\n            .icon.ul {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/list-ul.svg);\n            }\n            \n            .icon.numbered-list,\n            .icon.ol {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/list-ol.svg);\n            }\n            \n            .icon.quote {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/chat-square-quote.svg);\n            }\n            \n            .icon.code {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/code.svg);\n            }\n            \n            i.bold {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-bold.svg);\n            }\n            \n            i.italic {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-italic.svg);\n            }\n            \n            i.underline {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-underline.svg);\n            }\n            \n            i.strikethrough {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-strikethrough.svg);\n            }\n            \n            i.code {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/code.svg);\n            }\n            \n            i.link {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/link.svg);\n            }\n            \n            i.left-align {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/text-left.svg);\n            }\n            \n            i.center-align {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/text-center.svg);\n            }\n            \n            i.right-align {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/text-right.svg);\n            }\n            \n            i.justify-align {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/justify.svg);\n            }\n            \n          \n          \n        ")));
+        React.createElement("style", null, "\n          ul li {\n            /* list-style: inherit !important; */\n            list-style-type: disc !important;\n          \n          }\n          \n          ol {\n            /* list-style: inherit !important; */\n            list-style-type: decimal !important;\n          }\n          .dropdown .item.fontsize-item,\n          .dropdown .item.fontsize-item .text {\n             min-width: unset;\n            }\n            .font-size .dropdown-button-text {\n              display: flex !important;\n            }\n          .other h2 {\n              font-size: 18px;\n              color: #444;\n              margin-bottom: 7px;\n            }\n            \n            .other a {\n              color: #777;\n              text-decoration: underline;\n              font-size: 14px;\n            }\n            \n            .other ul {\n              padding: 0;\n              margin: 0;\n              list-style-type: none;\n            }\n            \n            .App {\n              font-family: sans-serif;\n              text-align: center;\n            }\n            \n            h1 {\n              font-size: 24px;\n              color: #333;\n            }\n            \n            .ltr {\n              text-align: left;\n            }\n            \n            .rtl {\n              text-align: right;\n            }\n            \n            .editor-container {\n              margin: 20px 0px;\n              border-radius: 2px;\n              max-width: 600px;\n              color: #000;\n              position: relative;\n              line-height: 20px;\n              font-weight: 400;\n              text-align: left;\n              border-top-left-radius: 10px;\n              border-top-right-radius: 10px;\n            }\n            \n            .editor-inner {\n              background: #fff;\n              position: relative;\n            }\n            \n            .editor-input {\n              min-height: 150px;\n              resize: none;\n              font-size: 15px;\n              caret-color: rgb(5, 5, 5);\n              position: relative;\n              tab-size: 1;\n              outline: 0;\n              padding: 15px 10px;\n              caret-color: #444;\n            }\n            button.item.dropdown-item-active {\n              background-color: rgba(223, 232, 250, 0.3);\n            }\n            \n            button.item.dropdown-item-active i {\n              opacity: 1;\n            }\n            .editor-placeholder {\n              color: #999;\n              overflow: hidden;\n              position: absolute;\n              text-overflow: ellipsis;\n              top: 15px;\n              left: 10px;\n              font-size: 15px;\n              user-select: none;\n              display: inline-block;\n              pointer-events: none;\n            }\n            \n            .editor-text-bold {\n              font-weight: bold;\n            }\n            \n            .editor-text-italic {\n              font-style: italic;\n            }\n            \n            .editor-text-underline {\n              text-decoration: underline;\n            }\n            \n            .editor-text-strikethrough {\n              text-decoration: line-through;\n            }\n            \n            .editor-text-underlineStrikethrough {\n              text-decoration: underline line-through;\n            }\n            \n            .editor-text-code {\n              background-color: rgb(240, 242, 245);\n              padding: 1px 0.25rem;\n              font-family: Menlo, Consolas, Monaco, monospace;\n              font-size: 94%;\n            }\n            \n            .editor-link {\n              color: rgb(33, 111, 219);\n              text-decoration: none;\n            }\n            \n            .tree-view-output {\n              display: block;\n              background: #222;\n              color: #fff;\n              padding: 5px;\n              font-size: 12px;\n              white-space: pre-wrap;\n              margin: 1px auto 10px auto;\n              max-height: 250px;\n              position: relative;\n              border-bottom-left-radius: 10px;\n              border-bottom-right-radius: 10px;\n              overflow: auto;\n              line-height: 14px;\n            }\n            \n            .editor-code {\n              background-color: rgb(240, 242, 245);\n              font-family: Menlo, Consolas, Monaco, monospace;\n              display: block;\n              padding: 8px 8px 8px 52px;\n              line-height: 1.53;\n              font-size: 13px;\n              margin: 0;\n              margin-top: 8px;\n              margin-bottom: 8px;\n              tab-size: 2;\n              /* white-space: pre; */\n              overflow-x: auto;\n              position: relative;\n            }\n            \n            .editor-code:before {\n              content: attr(data-gutter);\n              position: absolute;\n              background-color: #eee;\n              left: 0;\n              top: 0;\n              border-right: 1px solid #ccc;\n              padding: 8px;\n              color: #777;\n              white-space: pre-wrap;\n              text-align: right;\n              min-width: 25px;\n            }\n            .editor-code:after {\n              content: attr(data-highlight-language);\n              top: 0;\n              right: 3px;\n              padding: 3px;\n              font-size: 10px;\n              text-transform: uppercase;\n              position: absolute;\n              color: rgba(0, 0, 0, 0.5);\n            }\n            \n            .editor-tokenComment {\n              color: slategray;\n            }\n            \n            .editor-tokenPunctuation {\n              color: #999;\n            }\n            \n            .editor-tokenProperty {\n              color: #905;\n            }\n            \n            .editor-tokenSelector {\n              color: #690;\n            }\n            \n            .editor-tokenOperator {\n              color: #9a6e3a;\n            }\n            \n            .editor-tokenAttr {\n              color: #07a;\n            }\n            \n            .editor-tokenVariable {\n              color: #e90;\n            }\n            \n            .editor-tokenFunction {\n              color: #dd4a68;\n            }\n            \n            .editor-paragraph {\n              margin: 0;\n              margin-bottom: 8px;\n              position: relative;\n            }\n            \n            .editor-paragraph:last-child {\n              margin-bottom: 0;\n            }\n            \n            .editor-heading-h1 {\n              font-size: 24px;\n              color: rgb(5, 5, 5);\n              font-weight: 400;\n              margin: 0;\n              margin-bottom: 12px;\n              padding: 0;\n            }\n            \n            .editor-heading-h2 {\n              font-size: 15px;\n              color: rgb(101, 103, 107);\n              font-weight: 700;\n              margin: 0;\n              margin-top: 10px;\n              padding: 0;\n              text-transform: uppercase;\n            }\n            \n            .editor-quote {\n              margin: 0;\n              margin-left: 20px;\n              font-size: 15px;\n              color: rgb(101, 103, 107);\n              border-left-color: rgb(206, 208, 212);\n              border-left-width: 4px;\n              border-left-style: solid;\n              padding-left: 16px;\n            }\n            \n            .editor-list-ol {\n              padding: 0;\n              margin: 0;\n              margin-left: 16px;\n            }\n            \n            .editor-list-ul {\n              padding: 0;\n              margin: 0;\n              margin-left: 16px;\n            }\n            \n            .editor-listitem {\n              margin: 8px 32px 8px 32px;\n            }\n            \n            .editor-nested-listitem {\n              list-style-type: none;\n            }\n            \n            pre::-webkit-scrollbar {\n              background: transparent;\n              width: 10px;\n            }\n            \n            pre::-webkit-scrollbar-thumb {\n              background: #999;\n            }\n            \n            .debug-timetravel-panel {\n              overflow: hidden;\n              padding: 0 0 10px 0;\n              margin: auto;\n              display: flex;\n            }\n            \n            .debug-timetravel-panel-slider {\n              padding: 0;\n              flex: 8;\n            }\n            \n            .debug-timetravel-panel-button {\n              padding: 0;\n              border: 0;\n              background: none;\n              flex: 1;\n              color: #fff;\n              font-size: 12px;\n            }\n            \n            .debug-timetravel-panel-button:hover {\n              text-decoration: underline;\n            }\n            \n            .debug-timetravel-button {\n              border: 0;\n              padding: 0;\n              font-size: 12px;\n              top: 10px;\n              right: 15px;\n              position: absolute;\n              background: none;\n              color: #fff;\n            }\n            \n            .debug-timetravel-button:hover {\n              text-decoration: underline;\n            }\n              \n            .toolbar {\n              display: flex;\n              margin-bottom: 1px;\n              background: #fff;\n              padding: 4px;\n              border-top-left-radius: 10px;\n              border-top-right-radius: 10px;\n              vertical-align: middle;\n            }\n            \n            .toolbar button.toolbar-item {\n              border: 0;\n              display: flex;\n              background: none;\n              border-radius: 10px;\n              padding: 8px;\n              cursor: pointer;\n              vertical-align: middle;\n            }\n            \n            .toolbar button.toolbar-item:disabled {\n              cursor: not-allowed;\n            }\n            \n            .toolbar button.toolbar-item.spaced {\n              margin-right: 2px;\n            }\n            \n            .toolbar button.toolbar-item i.format {\n              background-size: contain;\n              display: inline-block;\n              height: 18px;\n              width: 18px;\n              margin-top: 2px;\n              vertical-align: -0.25em;\n              display: flex;\n              opacity: 0.6;\n            }\n            \n            .toolbar button.toolbar-item:disabled i.format {\n              opacity: 0.2;\n            }\n            \n            .toolbar button.toolbar-item.active {\n              background-color: rgba(223, 232, 250, 0.3);\n            }\n            \n            .toolbar button.toolbar-item.active i {\n              opacity: 1;\n            }\n            \n            .toolbar .toolbar-item:hover:not([disabled]) {\n              background-color: #eee;\n            }\n            \n            .toolbar .divider {\n              width: 1px;\n              background-color: #eee;\n              margin: 0 4px;\n            }\n            \n            .toolbar select.toolbar-item {\n              border: 0;\n              display: flex;\n              background: none;\n              border-radius: 10px;\n              padding: 8px;\n              vertical-align: middle;\n              -webkit-appearance: none;\n              -moz-appearance: none;\n              width: 70px;\n              font-size: 14px;\n              color: #777;\n              text-overflow: ellipsis;\n            }\n            \n            .toolbar select.code-language {\n              text-transform: capitalize;\n              width: 130px;\n            }\n            \n            .toolbar .toolbar-item .text {\n              display: flex;\n              line-height: 20px;\n              width: 200px;\n              vertical-align: middle;\n              font-size: 14px;\n              color: #777;\n              text-overflow: ellipsis;\n              width: 70px;\n              overflow: hidden;\n              height: 20px;\n              text-align: left;\n            }\n            \n            .toolbar .toolbar-item .icon {\n              display: flex;\n              width: 20px;\n              height: 20px;\n              user-select: none;\n              margin-right: 8px;\n              line-height: 16px;\n              background-size: contain;\n            }\n            \n            .toolbar i.chevron-down {\n              margin-top: 3px;\n              width: 16px;\n              height: 16px;\n              display: flex;\n              user-select: none;\n            }\n            \n            .toolbar i.chevron-down.inside {\n              width: 16px;\n              height: 16px;\n              display: flex;\n              margin-left: -25px;\n              margin-top: 11px;\n              margin-right: 10px;\n              pointer-events: none;\n            }\n            \n            i.chevron-down {\n              background-color: transparent;\n              background-size: contain;\n              display: inline-block;\n              height: 8px;\n              width: 8px;\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/chevron-down.svg);\n            }\n            \n            #block-controls button:hover {\n              background-color: #efefef;\n            }\n            \n            #block-controls button:focus-visible {\n              border-color: blue;\n            }\n            \n            #block-controls span.block-type {\n              background-size: contain;\n              display: block;\n              width: 18px;\n              height: 18px;\n              margin: 2px;\n            }\n            \n            #block-controls span.block-type.paragraph {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/text-paragraph.svg);\n            }\n            \n            #block-controls span.block-type.h1 {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-h1.svg);\n            }\n            \n            #block-controls span.block-type.h2 {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-h2.svg);\n            }\n            \n            #block-controls span.block-type.quote {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/chat-square-quote.svg);\n            }\n            \n            #block-controls span.block-type.ul {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/list-ul.svg);\n            }\n            \n            #block-controls span.block-type.ol {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/list-ol.svg);\n            }\n            \n            #block-controls span.block-type.code {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/code.svg);\n            }\n            \n            .dropdown {\n              z-index: 5;\n              display: block;\n              position: absolute;\n              box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1),\n                inset 0 0 0 1px rgba(255, 255, 255, 0.5);\n              border-radius: 8px;\n              min-width: 100px;\n              min-height: 40px;\n              background-color: #fff;\n            }\n            \n            .dropdown .item {\n              margin: 0 8px 0 8px;\n              padding: 8px;\n              color: #050505;\n              cursor: pointer;\n              line-height: 16px;\n              font-size: 15px;\n              display: flex;\n              align-content: center;\n              flex-direction: row;\n              flex-shrink: 0;\n              justify-content: space-between;\n              background-color: #fff;\n              border-radius: 8px;\n              border: 0;\n              min-width: 268px;\n            }\n            \n            .dropdown .item .active {\n              display: flex;\n              width: 20px;\n              height: 20px;\n              background-size: contain;\n            }\n            \n            .dropdown .item:first-child {\n              margin-top: 8px;\n            }\n            \n            .dropdown .item:last-child {\n              margin-bottom: 8px;\n            }\n            \n            .dropdown .item:hover {\n              background-color: #eee;\n            }\n            \n            .dropdown .item .text {\n              display: flex;\n              line-height: 20px;\n              flex-grow: 1;\n              width: 200px;\n            }\n            \n            .dropdown .item .icon {\n              display: flex;\n              width: 20px;\n              height: 20px;\n              user-select: none;\n              margin-right: 12px;\n              line-height: 16px;\n              background-size: contain;\n            }\n            \n            .link-editor {\n              position: absolute;\n              z-index: 100;\n              top: -10000px;\n              left: -10000px;\n              margin-top: -6px;\n              max-width: 300px;\n              width: 100%;\n              opacity: 0;\n              background-color: #fff;\n              box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);\n              border-radius: 8px;\n              transition: opacity 0.5s;\n            }\n            \n            .link-editor .link-input {\n              display: block;\n              width: calc(100% - 24px);\n              box-sizing: border-box;\n              margin: 8px 12px;\n              padding: 8px 12px;\n              border-radius: 15px;\n              background-color: #eee;\n              font-size: 15px;\n              color: rgb(5, 5, 5);\n              border: 0;\n              outline: 0;\n              position: relative;\n              font-family: inherit;\n            }\n            \n            .link-editor div.link-edit {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/pencil-fill.svg);\n              background-size: 16px;\n              background-position: center;\n              background-repeat: no-repeat;\n              width: 35px;\n              vertical-align: -0.25em;\n              position: absolute;\n              right: 0;\n              top: 0;\n              bottom: 0;\n              cursor: pointer;\n            }\n            \n            .link-editor .link-input a {\n              color: rgb(33, 111, 219);\n              text-decoration: none;\n              display: block;\n              white-space: nowrap;\n              overflow: hidden;\n              margin-right: 30px;\n              text-overflow: ellipsis;\n            }\n            \n            .link-editor .link-input a:hover {\n              text-decoration: underline;\n            }\n            \n            .link-editor .button {\n              width: 20px;\n              height: 20px;\n              display: inline-block;\n              padding: 6px;\n              border-radius: 8px;\n              cursor: pointer;\n              margin: 0 2px;\n            }\n            \n            .link-editor .button.hovered {\n              width: 20px;\n              height: 20px;\n              display: inline-block;\n              background-color: #eee;\n            }\n            \n            .link-editor .button i,\n            .actions i {\n              background-size: contain;\n              display: inline-block;\n              height: 20px;\n              width: 20px;\n              vertical-align: -0.25em;\n            }\n            \n            i.undo {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/arrow-counterclockwise.svg);\n            }\n            \n            i.redo {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/arrow-clockwise.svg);\n            }\n            \n            .icon.paragraph {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/text-paragraph.svg);\n            }\n            \n            .icon.large-heading,\n            .icon.h1 {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-h1.svg);\n            }\n            \n            .icon.small-heading,\n            .icon.h2 {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-h2.svg);\n            }\n            \n            .icon.bullet-list,\n            .icon.ul {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/list-ul.svg);\n            }\n            \n            .icon.numbered-list,\n            .icon.ol {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/list-ol.svg);\n            }\n            \n            .icon.quote {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/chat-square-quote.svg);\n            }\n            \n            .icon.code {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/code.svg);\n            }\n            \n            i.bold {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-bold.svg);\n            }\n            \n            i.italic {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-italic.svg);\n            }\n            \n            i.underline {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-underline.svg);\n            }\n            \n            i.strikethrough {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-strikethrough.svg);\n            }\n            \n            i.code {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/code.svg);\n            }\n            \n            i.link {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/link.svg);\n            }\n            \n            i.left-align {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/text-left.svg);\n            }\n            \n            i.center-align {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/text-center.svg);\n            }\n            \n            i.right-align {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/text-right.svg);\n            }\n            \n            i.justify-align {\n              background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/justify.svg);\n            }\n            \n          \n          \n        ")));
 }
 //# sourceMappingURL=ToolbarPlugin.js.map