grep-components 2.22.2 → 2.23.0-GREPF-2943.1

package/dist/index.js

@@ -60,6 +60,10 @@ import { $isElementNode, $caretFromPoint, $isExtendableTextPointCaret, $extendCa
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import FormatBold from '@mui/icons-material/FormatBold';
 import FormatItalic from '@mui/icons-material/FormatItalic';
+import FormatSuperscript from '@mui/icons-material/Superscript';
+import FormatSubscript from '@mui/icons-material/Subscript';
+import { CharacterLimitPlugin } from '@lexical/react/LexicalCharacterLimitPlugin';
+import DOMPurify from 'dompurify';
 import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
@@ -8508,6 +8512,16 @@ function s(e){const t=window.location.origin,n=n=>{if(n.origin!==t)return;const
 
 function gt(t,e){if(void 0!==document.caretRangeFromPoint){const n=document.caretRangeFromPoint(t,e);return null===n?null:{node:n.startContainer,offset:n.startOffset}}if("undefined"!==document.caretPositionFromPoint){const n=document.caretPositionFromPoint(t,e);return null===n?null:{node:n.offsetNode,offset:n.offset}}return null}const pt="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,ht=pt&&"documentMode"in document?document.documentMode:null,vt=pt&&/Mac|iPod|iPhone|iPad/.test(navigator.platform),Ct=!(!pt||!("InputEvent"in window)||ht)&&"getTargetRanges"in new window.InputEvent("input"),yt=pt&&/Version\/[\d.]+.*Safari/.test(navigator.userAgent),xt=pt&&/iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream,Dt=pt&&/^(?=.*Chrome).*/i.test(navigator.userAgent),Nt=pt&&/AppleWebKit\/[\d.]+/.test(navigator.userAgent)&&vt&&!Dt,wt=createCommand("DRAG_DROP_PASTE_FILE");class Et extends ElementNode{static getType(){return "quote"}static clone(t){return new Et(t.__key)}createDOM(t){const e=document.createElement("blockquote");return addClassNamesToElement(e,t.theme.quote),e}updateDOM(t,e){return  false}static importDOM(){return {blockquote:t=>({conversion:Ft,priority:0})}}exportDOM(t){const{element:e}=super.exportDOM(t);if(isHTMLElement$1(e)){this.isEmpty()&&e.append(document.createElement("br"));const t=this.getFormatType();t&&(e.style.textAlign=t);const n=this.getDirection();n&&(e.dir=n);}return {element:e}}static importJSON(t){return _t().updateFromJSON(t)}insertNewAfter(t,e){const n=$createParagraphNode(),r=this.getDirection();return n.setDirection(r),this.insertAfter(n,e),n}collapseAtStart(){const t=$createParagraphNode();return this.getChildren().forEach(e=>t.append(e)),this.replace(t),true}canMergeWhenEmpty(){return  true}}function _t(){return $applyNodeReplacement(new Et)}class Pt extends ElementNode{__tag;static getType(){return "heading"}static clone(t){return new Pt(t.__tag,t.__key)}constructor(t,e){super(e),this.__tag=t;}getTag(){return this.__tag}setTag(t){const e=this.getWritable();return this.__tag=t,e}createDOM(t){const e=this.__tag,n=document.createElement(e),r=t.theme.heading;if(void 0!==r){const t=r[e];addClassNamesToElement(n,t);}return n}updateDOM(t,e,n){return t.__tag!==this.__tag}static importDOM(){return {h1:t=>({conversion:At,priority:0}),h2:t=>({conversion:At,priority:0}),h3:t=>({conversion:At,priority:0}),h4:t=>({conversion:At,priority:0}),h5:t=>({conversion:At,priority:0}),h6:t=>({conversion:At,priority:0}),p:t=>{const e=t.firstChild;return null!==e&&Tt(e)?{conversion:()=>({node:null}),priority:3}:null},span:t=>Tt(t)?{conversion:t=>({node:St("h1")}),priority:3}:null}}exportDOM(t){const{element:e}=super.exportDOM(t);if(isHTMLElement$1(e)){this.isEmpty()&&e.append(document.createElement("br"));const t=this.getFormatType();t&&(e.style.textAlign=t);const n=this.getDirection();n&&(e.dir=n);}return {element:e}}static importJSON(t){return St(t.tag).updateFromJSON(t)}updateFromJSON(t){return super.updateFromJSON(t).setTag(t.tag)}exportJSON(){return {...super.exportJSON(),tag:this.getTag()}}insertNewAfter(t,e=true){const n=t?t.anchor.offset:0,r=this.getLastDescendant(),o=!r||t&&t.anchor.key===r.getKey()&&n===r.getTextContentSize()||!t?$createParagraphNode():St(this.getTag()),i=this.getDirection();if(o.setDirection(i),this.insertAfter(o,e),0===n&&!this.isEmpty()&&t){const t=$createParagraphNode();t.select(),this.replace(t,true);}return o}collapseAtStart(){const t=this.isEmpty()?$createParagraphNode():St(this.getTag());return this.getChildren().forEach(e=>t.append(e)),this.replace(t),true}extractWithChild(){return  true}}function Tt(t){return "span"===t.nodeName.toLowerCase()&&"26pt"===t.style.fontSize}function At(t){const e=t.nodeName.toLowerCase();let n=null;return "h1"!==e&&"h2"!==e&&"h3"!==e&&"h4"!==e&&"h5"!==e&&"h6"!==e||(n=St(e),null!==t.style&&(setNodeIndentFromDOM(t,n),n.setFormat(t.style.textAlign))),{node:n}}function Ft(t){const e=_t();return null!==t.style&&(e.setFormat(t.style.textAlign),setNodeIndentFromDOM(t,e)),{node:e}}function St(t="h1"){return $applyNodeReplacement(new Pt(t))}function Mt(t){let e=null;if(At$2(t,DragEvent)?e=t.dataTransfer:At$2(t,ClipboardEvent)&&(e=t.clipboardData),null===e)return [false,[],false];const n=e.types,r=n.includes("Files"),o=n.includes("text/html")||n.includes("text/plain");return [r,Array.from(e.files),o]}function bt(t){const e=$getSelection();if(!$isRangeSelection(e))return  false;const n=new Set,r=e.getNodes();for(let e=0;e<r.length;e++){const o=r[e],i=o.getKey();if(n.has(i))continue;const s=$findMatchingParent(o,t=>$isElementNode(t)&&!t.isInline());if(null===s)continue;const c=s.getKey();s.canIndent()&&!n.has(c)&&(n.add(c),t(s));}return n.size>0}function Kt(t){const e=$getNearestNodeFromDOMNode(t);return $isDecoratorNode(e)}function kt(t){for(const e of ["lowercase","uppercase","capitalize"])t.hasFormat(e)&&t.toggleFormat(e);}function Jt(n){return mergeRegister(n.registerCommand(CLICK_COMMAND,t=>{const e=$getSelection();return !!$isNodeSelection(e)&&(e.clear(),true)},COMMAND_PRIORITY_EDITOR),n.registerCommand(DELETE_CHARACTER_COMMAND,t=>{const e=$getSelection();return $isRangeSelection(e)?(e.deleteCharacter(t),true):!!$isNodeSelection(e)&&(e.deleteNodes(),true)},COMMAND_PRIORITY_EDITOR),n.registerCommand(DELETE_WORD_COMMAND,t=>{const e=$getSelection();return !!$isRangeSelection(e)&&(e.deleteWord(t),true)},COMMAND_PRIORITY_EDITOR),n.registerCommand(DELETE_LINE_COMMAND,t=>{const e=$getSelection();return !!$isRangeSelection(e)&&(e.deleteLine(t),true)},COMMAND_PRIORITY_EDITOR),n.registerCommand(CONTROLLED_TEXT_INSERTION_COMMAND,e=>{const r=$getSelection();if("string"==typeof e)null!==r&&r.insertText(e);else {if(null===r)return  false;const o=e.dataTransfer;if(null!=o)R(o,r,n);else if($isRangeSelection(r)){const t=e.data;return t&&r.insertText(t),true}}return  true},COMMAND_PRIORITY_EDITOR),n.registerCommand(REMOVE_TEXT_COMMAND,()=>{const t=$getSelection();return !!$isRangeSelection(t)&&(t.removeText(),true)},COMMAND_PRIORITY_EDITOR),n.registerCommand(FORMAT_TEXT_COMMAND,t=>{const e=$getSelection();return !!$isRangeSelection(e)&&(e.formatText(t),true)},COMMAND_PRIORITY_EDITOR),n.registerCommand(FORMAT_ELEMENT_COMMAND,t=>{const e=$getSelection();if(!$isRangeSelection(e)&&!$isNodeSelection(e))return  false;const n=e.getNodes();for(const e of n){const n=$findMatchingParent(e,t=>$isElementNode(t)&&!t.isInline());null!==n&&n.setFormat(t);}return  true},COMMAND_PRIORITY_EDITOR),n.registerCommand(INSERT_LINE_BREAK_COMMAND,t=>{const e=$getSelection();return !!$isRangeSelection(e)&&(e.insertLineBreak(t),true)},COMMAND_PRIORITY_EDITOR),n.registerCommand(INSERT_PARAGRAPH_COMMAND,()=>{const t=$getSelection();return !!$isRangeSelection(t)&&(t.insertParagraph(),true)},COMMAND_PRIORITY_EDITOR),n.registerCommand(INSERT_TAB_COMMAND,()=>($insertNodes([$createTabNode()]),true),COMMAND_PRIORITY_EDITOR),n.registerCommand(INDENT_CONTENT_COMMAND,()=>bt(t=>{const e=t.getIndent();t.setIndent(e+1);}),COMMAND_PRIORITY_EDITOR),n.registerCommand(OUTDENT_CONTENT_COMMAND,()=>bt(t=>{const e=t.getIndent();e>0&&t.setIndent(Math.max(0,e-1));}),COMMAND_PRIORITY_EDITOR),n.registerCommand(KEY_ARROW_UP_COMMAND,t=>{const e=$getSelection();if($isNodeSelection(e)){const n=e.getNodes();if(n.length>0)return t.preventDefault(),n[0].selectPrevious(),true}else if($isRangeSelection(e)){const n=$getAdjacentNode(e.focus,true);if(!t.shiftKey&&$isDecoratorNode(n)&&!n.isIsolated()&&!n.isInline())return n.selectPrevious(),t.preventDefault(),true}return  false},COMMAND_PRIORITY_EDITOR),n.registerCommand(KEY_ARROW_DOWN_COMMAND,t=>{const e=$getSelection();if($isNodeSelection(e)){const n=e.getNodes();if(n.length>0)return t.preventDefault(),n[0].selectNext(0,0),true}else if($isRangeSelection(e)){if(function(t){const e=t.focus;return "root"===e.key&&e.offset===$getRoot().getChildrenSize()}(e))return t.preventDefault(),true;const n=$getAdjacentNode(e.focus,false);if(!t.shiftKey&&$isDecoratorNode(n)&&!n.isIsolated()&&!n.isInline())return n.selectNext(),t.preventDefault(),true}return  false},COMMAND_PRIORITY_EDITOR),n.registerCommand(KEY_ARROW_LEFT_COMMAND,t=>{const e=$getSelection();if($isNodeSelection(e)){const n=e.getNodes();if(n.length>0)return t.preventDefault(),A$1(n[0])?n[0].selectNext(0,0):n[0].selectPrevious(),true}if(!$isRangeSelection(e))return  false;if(Z$1(e,true)){const n=t.shiftKey;return t.preventDefault(),ne(e,n,true),true}return  false},COMMAND_PRIORITY_EDITOR),n.registerCommand(KEY_ARROW_RIGHT_COMMAND,t=>{const e=$getSelection();if($isNodeSelection(e)){const n=e.getNodes();if(n.length>0)return t.preventDefault(),A$1(n[0])?n[0].selectPrevious():n[0].selectNext(0,0),true}if(!$isRangeSelection(e))return  false;const n=t.shiftKey;return !!Z$1(e,false)&&(t.preventDefault(),ne(e,n,false),true)},COMMAND_PRIORITY_EDITOR),n.registerCommand(KEY_BACKSPACE_COMMAND,t=>{if(Kt(t.target))return  false;const e=$getSelection();if($isRangeSelection(e)){if(function(t){if(!t.isCollapsed())return  false;const{anchor:e}=t;if(0!==e.offset)return  false;const n=e.getNode();if($isRootNode(n))return  false;const r=yt$1(n);return r.getIndent()>0&&(r.is(n)||n.is(r.getFirstDescendant()))}(e))return t.preventDefault(),n.dispatchCommand(OUTDENT_CONTENT_COMMAND,void 0);if(xt&&"ko-KR"===navigator.language)return  false}else if(!$isNodeSelection(e))return  false;return t.preventDefault(),n.dispatchCommand(DELETE_CHARACTER_COMMAND,true)},COMMAND_PRIORITY_EDITOR),n.registerCommand(KEY_DELETE_COMMAND,t=>{if(Kt(t.target))return  false;const e=$getSelection();return !(!$isRangeSelection(e)&&!$isNodeSelection(e))&&(t.preventDefault(),n.dispatchCommand(DELETE_CHARACTER_COMMAND,false))},COMMAND_PRIORITY_EDITOR),n.registerCommand(KEY_ENTER_COMMAND,t=>{const e=$getSelection();if(!$isRangeSelection(e))return  false;if(kt(e),null!==t){if((xt||yt||Nt)&&Ct)return  false;if(t.preventDefault(),t.shiftKey)return n.dispatchCommand(INSERT_LINE_BREAK_COMMAND,false)}return n.dispatchCommand(INSERT_PARAGRAPH_COMMAND,void 0)},COMMAND_PRIORITY_EDITOR),n.registerCommand(KEY_ESCAPE_COMMAND,()=>{const t=$getSelection();return !!$isRangeSelection(t)&&(n.blur(),true)},COMMAND_PRIORITY_EDITOR),n.registerCommand(DROP_COMMAND,t=>{const[,e]=Mt(t);if(e.length>0){const r=gt(t.clientX,t.clientY);if(null!==r){const{offset:t,node:o}=r,i=$getNearestNodeFromDOMNode(o);if(null!==i){const e=$createRangeSelection();if($isTextNode(i))e.anchor.set(i.getKey(),t,"text"),e.focus.set(i.getKey(),t,"text");else {const t=i.getParentOrThrow().getKey(),n=i.getIndexWithinParent()+1;e.anchor.set(t,n,"element"),e.focus.set(t,n,"element");}const n=$normalizeSelection__EXPERIMENTAL(e);$setSelection(n);}n.dispatchCommand(wt,e);}return t.preventDefault(),true}const r=$getSelection();return !!$isRangeSelection(r)},COMMAND_PRIORITY_EDITOR),n.registerCommand(DRAGSTART_COMMAND,t=>{const[e]=Mt(t),n=$getSelection();return !(e&&!$isRangeSelection(n))},COMMAND_PRIORITY_EDITOR),n.registerCommand(DRAGOVER_COMMAND,t=>{const[e]=Mt(t),n=$getSelection();if(e&&!$isRangeSelection(n))return  false;const r=gt(t.clientX,t.clientY);if(null!==r){const e=$getNearestNodeFromDOMNode(r.node);$isDecoratorNode(e)&&t.preventDefault();}return  true},COMMAND_PRIORITY_EDITOR),n.registerCommand(SELECT_ALL_COMMAND,()=>($selectAll(),true),COMMAND_PRIORITY_EDITOR),n.registerCommand(COPY_COMMAND,t=>(F$1(n,At$2(t,ClipboardEvent)?t:null),true),COMMAND_PRIORITY_EDITOR),n.registerCommand(CUT_COMMAND,t=>(async function(t,n){await F$1(n,At$2(t,ClipboardEvent)?t:null),n.update(()=>{const t=$getSelection();$isRangeSelection(t)?t.removeText():$isNodeSelection(t)&&t.getNodes().forEach(t=>t.remove());});}(t,n),true),COMMAND_PRIORITY_EDITOR),n.registerCommand(PASTE_COMMAND,e=>{const[,r,o]=Mt(e);if(r.length>0&&!o)return n.dispatchCommand(wt,r),true;if(isDOMNode(e.target)&&isSelectionCapturedInDecoratorInput(e.target))return  false;return null!==$getSelection()&&(function(e,n){e.preventDefault(),n.update(()=>{const r=$getSelection(),o=At$2(e,InputEvent)||At$2(e,KeyboardEvent)?null:e.clipboardData;null!=o&&null!==r&&R(o,r,n);},{tag:PASTE_TAG});}(e,n),true)},COMMAND_PRIORITY_EDITOR),n.registerCommand(KEY_SPACE_COMMAND,t=>{const e=$getSelection();return $isRangeSelection(e)&&kt(e),false},COMMAND_PRIORITY_EDITOR),n.registerCommand(KEY_TAB_COMMAND,t=>{const e=$getSelection();return $isRangeSelection(e)&&kt(e),false},COMMAND_PRIORITY_EDITOR))}defineExtension({conflictsWith:["@lexical/plain-text"],dependencies:[d],name:"@lexical/rich-text",nodes:()=>[Pt,Et],register:Jt});
 
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+class n extends ElementNode{$config(){return this.config("overflow",{$transform(e){e.isEmpty()&&e.remove();},extends:ElementNode})}createDOM(e){const t=document.createElement("span"),r=e.theme.characterLimit;return "string"==typeof r&&(t.className=r),t}updateDOM(e,t){return  false}insertNewAfter(e,t=true){return this.getParentOrThrow().insertNewAfter(e,t)}excludeFromCopy(){return  true}}defineExtension({name:"@lexical/overflow",nodes:()=>[n]});
+
 const useEditorStyles = makeStyles()((theme, { hasFocus, hasContent, readOnly, hasCustomToolbar }) => ({
     root: {
         position: 'relative',
@@ -8596,7 +8610,7 @@ const useEditorStyles = makeStyles()((theme, { hasFocus, hasContent, readOnly, h
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-function StyleWrapperPlugin({ showCharcount, helperText, readOnly, classes, label, children, autoFocus, toolbarAnchor, hasCustomToolbar, }) {
+function StyleWrapperPlugin({ showCharcount, maxChars, helperText, readOnly, classes, label, children, autoFocus, toolbarAnchor, hasCustomToolbar, }) {
     const [editor] = useLexicalComposerContext();
     const [hasFocus, setFocused] = useState(() => {
         return editor.getRootElement() === document.activeElement;
@@ -8644,7 +8658,9 @@ function StyleWrapperPlugin({ showCharcount, helperText, readOnly, classes, labe
         label && (React__default.createElement("label", { className: clsx(styles.label, classes?.label) }, label)),
         React__default.createElement(Box, { className: clsx(styles.editor, classes?.editor) }, children),
         (showCharcount || helperText) && (React__default.createElement(Box, { sx: { margin: '.5rem' } },
-            showCharcount && (React__default.createElement(FormHelperText, { className: styles.charcount }, `Antall tegn: ${charCount}`)),
+            showCharcount && (React__default.createElement(FormHelperText, { className: styles.charcount }, maxChars
+                ? `Antall tegn: ${charCount} / ${maxChars}`
+                : `Antall tegn: ${charCount}`)),
             helperText && (React__default.createElement(FormHelperText, { className: styles.helpertext }, helperText))))));
 }
 
@@ -8780,8 +8796,10 @@ var ButtonType;
 (function (ButtonType) {
     ButtonType["bold"] = "bold";
     ButtonType["italic"] = "italic";
+    ButtonType["superscript"] = "superscript";
+    ButtonType["subscript"] = "subscript";
 })(ButtonType || (ButtonType = {}));
-const createButton = (style) => {
+const createButton = (style = 'bold') => {
     switch (style) {
         case 'bold':
             return {
@@ -8793,6 +8811,16 @@ const createButton = (style) => {
                 type: ButtonType[style],
                 children: React__default.createElement(FormatItalic, { fontSize: "small" }),
             };
+        case 'superscript':
+            return {
+                type: ButtonType[style],
+                children: React__default.createElement(FormatSuperscript, { fontSize: "small" }),
+            };
+        case 'subscript':
+            return {
+                type: ButtonType[style],
+                children: React__default.createElement(FormatSubscript, { fontSize: "small" }),
+            };
     }
 };
 
@@ -8867,6 +8895,42 @@ function getSelectedNode(selection) {
     }
 }
 
+var ToolbarActionKind;
+(function (ToolbarActionKind) {
+    ToolbarActionKind["updateFormat"] = "UPDATE_FORMAT";
+    ToolbarActionKind["updateBoolean"] = "UPDATE_BOOLEAN";
+    ToolbarActionKind["reset"] = "RESET";
+})(ToolbarActionKind || (ToolbarActionKind = {}));
+const ToolbarInitialState = {
+    isText: false,
+    format: new Set(),
+};
+const modifySet = (set, toModify, add) => {
+    if (add) {
+        return set.add(toModify);
+    }
+    else {
+        set.delete(toModify);
+        return set;
+    }
+};
+// This is a local state reducer
+function ToolbarReducer(state, action) {
+    switch (action.type) {
+        case ToolbarActionKind.reset:
+            return action.payload ? { ...action.payload } : ToolbarInitialState;
+        case ToolbarActionKind.updateBoolean:
+            return { ...state, [action.field]: action.payload };
+        case ToolbarActionKind.updateFormat:
+            return {
+                ...state,
+                format: modifySet(state.format, action.field, action.payload),
+            };
+        default:
+            return state;
+    }
+}
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -8874,7 +8938,7 @@ function getSelectedNode(selection) {
  * LICENSE file in the root directory of this source tree.
  *
  */
-function TextFormatFloatingToolbar({ editor, anchorElem, isBold, isItalic, buttons, }) {
+function TextFormatFloatingToolbar({ editor, anchorElem, formats, buttons, }) {
     const { classes } = useButtonStyles();
     const popupCharStylesEditorRef = useRef(null);
     function mouseMoveListener(e) {
@@ -8963,14 +9027,12 @@ function TextFormatFloatingToolbar({ editor, anchorElem, isBold, isItalic, butto
             top: 0,
             left: 0,
             zIndex: 1,
-        } }, buttons?.map(({ type, children }, key) => (React.createElement(ToggleButton, { classes: { root: classes.btn, selected: classes.btnSelected }, value: type, selected: type === 'italic' ? isItalic : isBold, size: "small", key: key, onClick: () => {
+        } }, buttons?.map(({ type, children }) => (React.createElement(ToggleButton, { classes: { root: classes.btn, selected: classes.btnSelected }, value: type, selected: formats.has(type), size: "small", key: type, onClick: () => {
             editor.dispatchCommand(FORMAT_TEXT_COMMAND, type);
         }, "aria-label": `format text as ${type.toLowerCase}` }, children)))))));
 }
 function useFloatingTextFormatToolbar(editor, anchorElem, buttons, CustomToolbar) {
-    const [isText, setIsText] = useState(false);
-    const [isBold, setIsBold] = useState(false);
-    const [isItalic, setIsItalic] = useState(false);
+    const [state, dispatch] = React.useReducer(ToolbarReducer, ToolbarInitialState);
     const updatePopup = useCallback(() => {
         editor.getEditorState().read(() => {
             // Should not pop up the floating toolbar when using IME input
@@ -8984,7 +9046,11 @@ function useFloatingTextFormatToolbar(editor, anchorElem, buttons, CustomToolbar
                 (!$isRangeSelection(selection) ||
                     rootElement === null ||
                     !rootElement.contains(nativeSelection.anchorNode))) {
-                setIsText(false);
+                dispatch({
+                    type: ToolbarActionKind.updateBoolean,
+                    field: 'isText',
+                    payload: false,
+                });
                 return;
             }
             if (!$isRangeSelection(selection)) {
@@ -8992,17 +9058,47 @@ function useFloatingTextFormatToolbar(editor, anchorElem, buttons, CustomToolbar
             }
             const node = getSelectedNode(selection);
             // Update text format
-            setIsBold(selection.hasFormat('bold'));
-            setIsItalic(selection.hasFormat('italic'));
+            dispatch({
+                type: ToolbarActionKind.updateFormat,
+                field: 'bold',
+                payload: selection.hasFormat('bold'),
+            });
+            dispatch({
+                type: ToolbarActionKind.updateFormat,
+                field: 'italic',
+                payload: selection.hasFormat('italic'),
+            });
+            dispatch({
+                type: ToolbarActionKind.updateFormat,
+                field: 'superscript',
+                payload: selection.hasFormat('superscript'),
+            });
+            dispatch({
+                type: ToolbarActionKind.updateFormat,
+                field: 'subscript',
+                payload: selection.hasFormat('subscript'),
+            });
             if (selection.getTextContent() !== '') {
-                setIsText($isTextNode(node) || $isParagraphNode(node));
+                dispatch({
+                    type: ToolbarActionKind.updateBoolean,
+                    field: 'isText',
+                    payload: $isTextNode(node) || $isParagraphNode(node),
+                });
             }
             else {
-                setIsText(false);
+                dispatch({
+                    type: ToolbarActionKind.updateBoolean,
+                    field: 'isText',
+                    payload: false,
+                });
             }
             const rawTextContent = selection.getTextContent().replace(/\n/g, '');
             if (!selection.isCollapsed() && rawTextContent === '') {
-                setIsText(false);
+                dispatch({
+                    type: ToolbarActionKind.updateBoolean,
+                    field: 'isText',
+                    payload: false,
+                });
                 return;
             }
         });
@@ -9018,7 +9114,11 @@ function useFloatingTextFormatToolbar(editor, anchorElem, buttons, CustomToolbar
             updatePopup();
         }), editor.registerRootListener(() => {
             if (editor.getRootElement() === null) {
-                setIsText(false);
+                dispatch({
+                    type: ToolbarActionKind.updateBoolean,
+                    field: 'isText',
+                    payload: false,
+                });
             }
         }));
     }, [editor, updatePopup]);
@@ -9029,12 +9129,12 @@ function useFloatingTextFormatToolbar(editor, anchorElem, buttons, CustomToolbar
                 left: '1em',
                 zIndex: 1,
             } },
-            React.createElement(CustomToolbar, { buttons: buttons, editor: editor, isSelected: [isBold, isItalic] })), anchorElem);
+            React.createElement(CustomToolbar, { buttons: buttons, editor: editor, formats: state.format })), anchorElem);
     }
-    if (!isText) {
+    if (!state.isText) {
         return null;
     }
-    return createPortal(React.createElement(TextFormatFloatingToolbar, { editor: editor, anchorElem: anchorElem, isBold: isBold, isItalic: isItalic, buttons: buttons }), anchorElem);
+    return createPortal(React.createElement(TextFormatFloatingToolbar, { editor: editor, anchorElem: anchorElem, formats: state.format, buttons: buttons }), anchorElem);
 }
 function FloatingTextFormatToolbarPlugin({ anchorElem, buttons, CustomToolbar, }) {
     const [editor] = useLexicalComposerContext();
@@ -9087,126 +9187,159 @@ function HeadingPlugin({ html }) {
     return null;
 }
 
-const allowBoldItalic = (node) => {
-    if (node.hasFormat('italic') &&
-        node.hasFormat('bold') &&
-        (node.hasFormat('code') ||
-            node.hasFormat('highlight') ||
-            node.hasFormat('strikethrough') ||
-            node.hasFormat('subscript') ||
-            node.hasFormat('superscript') ||
-            node.hasFormat('underline'))) {
-        node.setFormat(0); // setFormat only sets one specific format. Therefore toggle is used to have both applied.
-        node.toggleFormat('bold');
-        node.toggleFormat('italic');
+const RESTRICTED_FORMATS = [
+    'code',
+    'highlight',
+    'strikethrough',
+    'underline',
+];
+const hasAnyFormat = (node, formats) => {
+    return formats.some((format) => node.hasFormat(format));
+};
+const applyAllowedFormats = (node, allowedFormats) => {
+    const hasBold = node.hasFormat('bold');
+    const hasItalic = node.hasFormat('italic');
+    const hasSuperscript = node.hasFormat('superscript');
+    const hasSubscript = node.hasFormat('subscript');
+    const keepBold = allowedFormats.includes('bold') && hasBold;
+    const keepItalic = allowedFormats.includes('italic') && hasItalic;
+    const keepSuperscript = allowedFormats.includes('superscript') && hasSuperscript;
+    const keepSubscript = allowedFormats.includes('subscript') && hasSubscript;
+    if (!keepBold && !keepItalic && !keepSuperscript && !keepSubscript) {
+        return;
     }
-    else if (node.hasFormat('italic') && node.hasFormat('bold')) {
-        return; // Need to set as italic to ensure format is only italic.
-    }
-    else if (node.hasFormat('bold') &&
-        (node.hasFormat('code') ||
-            node.hasFormat('highlight') ||
-            node.hasFormat('strikethrough') ||
-            node.hasFormat('subscript') ||
-            node.hasFormat('superscript') ||
-            node.hasFormat('underline'))) {
-        node.setFormat('bold');
-    }
-    else if (node.hasFormat('italic') &&
-        (node.hasFormat('code') ||
-            node.hasFormat('highlight') ||
-            node.hasFormat('strikethrough') ||
-            node.hasFormat('subscript') ||
-            node.hasFormat('superscript') ||
-            node.hasFormat('underline'))) {
-        node.setFormat('italic');
-    }
-    else if (node.hasFormat('code') ||
-        node.hasFormat('highlight') ||
-        node.hasFormat('strikethrough') ||
-        node.hasFormat('subscript') ||
-        node.hasFormat('superscript') ||
-        node.hasFormat('underline')) {
-        node.setFormat(0); // Sets format to none.
+    const hasDisallowedFormatting = hasAnyFormat(node, RESTRICTED_FORMATS);
+    if (!hasDisallowedFormatting) {
+        if (keepBold || keepItalic || keepSuperscript || keepSubscript) {
+            return;
+        }
     }
-};
-const allowBold = (node) => {
-    if (node.hasFormat('bold') &&
-        (node.hasFormat('code') ||
-            node.hasFormat('highlight') ||
-            node.hasFormat('strikethrough') ||
-            node.hasFormat('subscript') ||
-            node.hasFormat('superscript') ||
-            node.hasFormat('underline'))) {
-        node.setFormat('bold');
-    }
-    else if (node.hasFormat('italic') ||
-        node.hasFormat('code') ||
-        node.hasFormat('highlight') ||
-        node.hasFormat('strikethrough') ||
-        node.hasFormat('subscript') ||
-        node.hasFormat('superscript') ||
-        node.hasFormat('underline')) {
-        node.setFormat(0); // Sets format to none.
+    if (keepBold) {
+        node.toggleFormat('bold');
     }
-};
-const allowItalic = (node) => {
-    if (node.hasFormat('italic') &&
-        (node.hasFormat('code') ||
-            node.hasFormat('highlight') ||
-            node.hasFormat('strikethrough') ||
-            node.hasFormat('subscript') ||
-            node.hasFormat('superscript') ||
-            node.hasFormat('underline'))) {
-        node.setFormat('italic');
-    }
-    else if (node.hasFormat('bold') ||
-        node.hasFormat('code') ||
-        node.hasFormat('highlight') ||
-        node.hasFormat('strikethrough') ||
-        node.hasFormat('subscript') ||
-        node.hasFormat('superscript') ||
-        node.hasFormat('underline')) {
-        node.setFormat(0); // Sets format to none.
+    if (keepItalic) {
+        node.toggleFormat('italic');
     }
-};
-const disallowAll = (node) => {
-    if (node.hasFormat('bold') ||
-        node.hasFormat('italic') ||
-        node.hasFormat('code') ||
-        node.hasFormat('highlight') ||
-        node.hasFormat('strikethrough') ||
-        node.hasFormat('subscript') ||
-        node.hasFormat('superscript') ||
-        node.hasFormat('underline')) {
-        node.setFormat(0); // Sets format to none.
+    if (keepSuperscript) {
+        node.toggleFormat('superscript');
+    }
+    if (keepSubscript) {
+        node.toggleFormat('subscript');
     }
 };
 function TextNodeStylingPlugin({ allowedStyles, }) {
     const [editor] = useLexicalComposerContext();
     useEffect(() => {
         return editor.registerNodeTransform(TextNode, (node) => {
+            const allowedFormats = allowedStyles ?? [];
             if (allowedStyles === undefined) {
-                allowBoldItalic(node);
+                allowedFormats.push('bold', 'italic', 'superscript', 'subscript');
             }
-            else if (allowedStyles.includes(ButtonType.bold) &&
-                allowedStyles.includes(ButtonType.italic)) {
-                allowBoldItalic(node);
-            }
-            else if (allowedStyles.includes(ButtonType.bold)) {
-                allowBold(node);
-            }
-            else if (allowedStyles.includes(ButtonType.italic)) {
-                allowItalic(node);
-            }
-            else {
-                disallowAll(node);
+            applyAllowedFormats(node, allowedFormats);
+        });
+    }, [editor, allowedStyles]);
+    return null;
+}
+
+function ReadModePlugin({ readOnly }) {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        editor.setEditable(readOnly ?? true);
+    }, [editor, readOnly]);
+    return null;
+}
+
+//** This works together with the characterLimitPlugin from lexical.
+// Lexical's plugin marks the overflowing characters as overflowNodes, and this plugin removes them. */
+function RemoveOverflowPlugin({ maxChars }) {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        editor.registerTextContentListener((content) => {
+            // For some reason a newline "Enter" inserts two \n characters.
+            if (maxChars) {
+                const count = content.replaceAll('\n\n', '\n').length;
+                if (count > maxChars) {
+                    mergeRegister(editor.registerNodeTransform(n, (node) => {
+                        node.remove();
+                    }));
+                }
             }
         });
-    }, [editor]);
+    }, [editor, maxChars]);
     return null;
 }
 
+const PLACEHOLDER_CLASS_NAME = 'lexicalEditor-placeholder';
+const getAllLexicalChildren = (editor) => {
+    const childrenKeys = editor
+        .getEditorState()
+        .read(() => $getRoot().getChildrenKeys());
+    return childrenKeys.map((key) => ({
+        key: key,
+        node: $getNodeByKey(key),
+        htmlElement: editor.getElementByKey(key),
+    }));
+};
+const setPlaceholderOnSelection = ({ selection, editor, placeholder, }) => {
+    /**
+     * 1. Get all lexical nodes as HTML elements
+     */
+    const children = getAllLexicalChildren(editor);
+    /**
+     * 2. Remove "placeholder" class if it was added before
+     */
+    children.forEach(({ htmlElement }) => {
+        if (!htmlElement) {
+            return;
+        }
+        const classList = htmlElement.classList;
+        if (classList.length && classList.contains(PLACEHOLDER_CLASS_NAME)) {
+            classList.remove(PLACEHOLDER_CLASS_NAME);
+        }
+    });
+    /**
+     * 3. Do nothing if there is more than one lexical child,
+     * since we only apply one placeholder in total.
+     */
+    if (children.length > 1) {
+        return;
+    }
+    /**
+     * 4. Get "PointType" object, that contain Nodes data
+     */
+    const anchor = selection.anchor;
+    placeholder = DOMPurify.sanitize(placeholder?.replace(/<[^>]+>/g, ''));
+    if (placeholder) {
+        const selectedHtmlElement = editor.getElementByKey(anchor.key);
+        selectedHtmlElement?.classList.add(PLACEHOLDER_CLASS_NAME);
+        selectedHtmlElement?.setAttribute('data-placeholder', placeholder);
+    }
+};
+const setNodePlaceholderFromSelection = (editor, placeholder) => {
+    editor.getEditorState().read(() => {
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection)) {
+            // Do nothing if user selected node's content
+            return;
+        }
+        setPlaceholderOnSelection({ selection, editor, placeholder });
+    });
+};
+const AddPlaceholderPlugin = ({ placeholder, }) => {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (placeholder) {
+            return editor.registerUpdateListener(() => {
+                setNodePlaceholderFromSelection(editor, placeholder ?? '');
+            });
+        }
+        else {
+            return;
+        }
+    }, [editor, placeholder]);
+    return null;
+};
+
 // Classes here are added to the relevant tags i.e.(<strong>)
 const theme = {
     text: {
@@ -9220,16 +9353,18 @@ function onError(error) {
 const createDefaultButtons = () => [
     createButton('bold'),
     createButton('italic'),
+    createButton('superscript'),
+    createButton('subscript'),
 ];
 /* This allows interaction with the editor outside of the LexicalComposer */
 // export const editorRef = useRef<LexicalEditor>(null);
-function Editor({ html, label, classes, autoFocus, helperText, showCharCount, allowedStyles, blockPasting, disableNewlines, onContentChange, editorRef, stripPastedStyles, readOnly, Toolbar, }) {
+function Editor({ html, label, classes, autoFocus, helperText, showCharCount, allowedStyles, blockPasting, disableNewlines, onContentChange, editorRef, stripPastedStyles, readOnly, Toolbar, maxChars, placeholder, }) {
     const initialConfig = {
         namespace: 'GrepEditor',
         theme,
         editable: !readOnly,
         onError,
-        nodes: [Pt],
+        nodes: [Pt, n],
         html: {
             export: htmlExportMap,
         },
@@ -9248,7 +9383,7 @@ function Editor({ html, label, classes, autoFocus, helperText, showCharCount, al
         : allowedStyles.map(createButton);
     return (React__default.createElement(LexicalComposer, { initialConfig: initialConfig },
         React__default.createElement(EditorRefPlugin, { editorRef: editorRef }),
-        React__default.createElement(StyleWrapperPlugin, { helperText: helperText, showCharcount: showCharCount, readOnly: readOnly, classes: classes, label: label, autoFocus: autoFocus, toolbarAnchor: onRef, hasCustomToolbar: Toolbar !== undefined },
+        React__default.createElement(StyleWrapperPlugin, { helperText: helperText, showCharcount: showCharCount, maxChars: maxChars, readOnly: readOnly, classes: classes, label: label, autoFocus: autoFocus, toolbarAnchor: onRef, hasCustomToolbar: Toolbar !== undefined },
             canStyle && floatingAnchorElem && (React__default.createElement(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, buttons: buttons, CustomToolbar: Toolbar })),
             React__default.createElement(RichTextPlugin, { contentEditable: React__default.createElement(ContentEditable, { spellCheck: false, className: "GrepEditor", style: { outline: 'none' } }), placeholder: null, ErrorBoundary: LexicalErrorBoundary }),
             React__default.createElement(HistoryPlugin, null),
@@ -9257,7 +9392,12 @@ function Editor({ html, label, classes, autoFocus, helperText, showCharCount, al
             React__default.createElement(HeadingPlugin, { html: html }),
             React__default.createElement(ModifyPastePlugin, { blockPasting: blockPasting, stripPastedStyles: stripPastedStyles }),
             React__default.createElement(PreventNewlinesPlugin, { disableNewlines: disableNewlines }),
-            React__default.createElement(TextNodeStylingPlugin, { allowedStyles: allowedStyles }))));
+            React__default.createElement(TextNodeStylingPlugin, { allowedStyles: allowedStyles }),
+            React__default.createElement(ReadModePlugin, { readOnly: !readOnly }),
+            maxChars && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(RemoveOverflowPlugin, { maxChars: maxChars }),
+                React__default.createElement(CharacterLimitPlugin, { charset: "UTF-16", maxLength: maxChars, renderer: () => React__default.createElement(React__default.Fragment, null) })))),
+        React__default.createElement(AddPlaceholderPlugin, { placeholder: placeholder })));
 }
 
 /* To have both italic and bold styles apply, css rules need to be added as per: https://lexical.dev/docs/getting-started/theming */