@churchapps/apphelper 0.3.16 → 0.3.17

package/dist/components/markdownEditor/plugins/FloatingTextMenu/getSelectNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getSelectNode.js","sourceRoot":"","sources":["../../../../../src/components/markdownEditor/plugins/FloatingTextMenu/getSelectNode.tsx"],"names":[],"mappings":";;;AAAA,kDAAkD;AAElD,SAAgB,eAAe,CAAC,SAAc;IAC5C,MAAM,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC;IAChC,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC;IAC9B,MAAM,UAAU,GAAG,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;IAC9C,MAAM,SAAS,GAAG,SAAS,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;IAC5C,IAAI,UAAU,KAAK,SAAS,EAAE;QAC5B,OAAO,UAAU,CAAC;KACnB;IACD,MAAM,UAAU,GAAG,SAAS,CAAC,UAAU,EAAE,CAAC;IAC1C,IAAI,UAAU,EAAE;QACd,OAAO,IAAA,wBAAY,EAAC,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC;KACrD;SAAM;QACL,OAAO,IAAA,wBAAY,EAAC,MAAM,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC;KACtD;AACH,CAAC;AAdD,0CAcC"}

package/dist/components/markdownEditor/plugins/FloatingTextMenu/setFloatingElemPosition.d.ts

@@ -0,0 +1,2 @@
+export declare function setFloatingElemPosition(targetRect: any, floatingElem: any, anchorElem: any, verticalGap?: number, horizontalOffset?: number): void;
+//# sourceMappingURL=setFloatingElemPosition.d.ts.map

package/dist/components/markdownEditor/plugins/FloatingTextMenu/setFloatingElemPosition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setFloatingElemPosition.d.ts","sourceRoot":"","sources":["../../../../../src/components/markdownEditor/plugins/FloatingTextMenu/setFloatingElemPosition.tsx"],"names":[],"mappings":"AAGA,wBAAgB,uBAAuB,CAAE,UAAU,EAAE,GAAG,EAAE,YAAY,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,EAAE,WAAW,SAAe,EAAE,gBAAgB,SAAoB,QA6B7J"}

package/dist/components/markdownEditor/plugins/FloatingTextMenu/setFloatingElemPosition.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setFloatingElemPosition = void 0;
+const VERTICAL_GAP = 10;
+const HORIZONTAL_OFFSET = 5;
+function setFloatingElemPosition(targetRect, floatingElem, anchorElem, verticalGap = VERTICAL_GAP, horizontalOffset = HORIZONTAL_OFFSET) {
+    const scrollerElem = anchorElem.parentElement;
+    if (targetRect === null || !scrollerElem) {
+        floatingElem.style.opacity = "0";
+        floatingElem.style.transform = "translate(-10000px, -10000px)";
+        return;
+    }
+    const floatingElemRect = floatingElem.getBoundingClientRect();
+    const anchorElementRect = anchorElem.getBoundingClientRect();
+    const editorScrollerRect = scrollerElem.getBoundingClientRect();
+    let top = targetRect.top - floatingElemRect.height - verticalGap;
+    let left = targetRect.left - horizontalOffset;
+    if (top < editorScrollerRect.top) {
+        top += floatingElemRect.height + targetRect.height + verticalGap * 2;
+    }
+    if (left + floatingElemRect.width > editorScrollerRect.right) {
+        left = editorScrollerRect.right - floatingElemRect.width - horizontalOffset;
+    }
+    top -= anchorElementRect.top;
+    left -= anchorElementRect.left;
+    floatingElem.style.opacity = "1";
+    floatingElem.style.transform = `translate(${left}px, ${top}px)`;
+}
+exports.setFloatingElemPosition = setFloatingElemPosition;
+//# sourceMappingURL=setFloatingElemPosition.js.map

package/dist/components/markdownEditor/plugins/FloatingTextMenu/setFloatingElemPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setFloatingElemPosition.js","sourceRoot":"","sources":["../../../../../src/components/markdownEditor/plugins/FloatingTextMenu/setFloatingElemPosition.tsx"],"names":[],"mappings":";;;AAAA,MAAM,YAAY,GAAG,EAAE,CAAC;AACxB,MAAM,iBAAiB,GAAG,CAAC,CAAC;AAE5B,SAAgB,uBAAuB,CAAE,UAAe,EAAE,YAAiB,EAAE,UAAe,EAAE,WAAW,GAAG,YAAY,EAAE,gBAAgB,GAAG,iBAAiB;IAC5J,MAAM,YAAY,GAAG,UAAU,CAAC,aAAa,CAAC;IAE9C,IAAI,UAAU,KAAK,IAAI,IAAI,CAAC,YAAY,EAAE;QACxC,YAAY,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;QACjC,YAAY,CAAC,KAAK,CAAC,SAAS,GAAG,+BAA+B,CAAC;QAC/D,OAAO;KACR;IAED,MAAM,gBAAgB,GAAG,YAAY,CAAC,qBAAqB,EAAE,CAAC;IAC9D,MAAM,iBAAiB,GAAG,UAAU,CAAC,qBAAqB,EAAE,CAAC;IAC7D,MAAM,kBAAkB,GAAG,YAAY,CAAC,qBAAqB,EAAE,CAAC;IAEhE,IAAI,GAAG,GAAG,UAAU,CAAC,GAAG,GAAG,gBAAgB,CAAC,MAAM,GAAG,WAAW,CAAC;IACjE,IAAI,IAAI,GAAG,UAAU,CAAC,IAAI,GAAG,gBAAgB,CAAC;IAE9C,IAAI,GAAG,GAAG,kBAAkB,CAAC,GAAG,EAAE;QAChC,GAAG,IAAI,gBAAgB,CAAC,MAAM,GAAG,UAAU,CAAC,MAAM,GAAG,WAAW,GAAG,CAAC,CAAC;KACtE;IAED,IAAI,IAAI,GAAG,gBAAgB,CAAC,KAAK,GAAG,kBAAkB,CAAC,KAAK,EAAE;QAC5D,IAAI,GAAG,kBAAkB,CAAC,KAAK,GAAG,gBAAgB,CAAC,KAAK,GAAG,gBAAgB,CAAC;KAC7E;IAED,GAAG,IAAI,iBAAiB,CAAC,GAAG,CAAC;IAC7B,IAAI,IAAI,iBAAiB,CAAC,IAAI,CAAC;IAE/B,YAAY,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;IACjC,YAAY,CAAC,KAAK,CAAC,SAAS,GAAG,aAAa,IAAI,OAAO,GAAG,KAAK,CAAC;AAClE,CAAC;AA7BD,0DA6BC"}

package/dist/components/markdownEditor/plugins/MarkdownTransformers.js

@@ -42,7 +42,7 @@ export type TextMatchTransformer = Readonly<{
 exports.UNDERLINE = {
     format: ["underline"],
     intraword: false,
-    tag: "_",
+    tag: "__",
     type: "text-format"
 };
 /*
@@ -75,11 +75,11 @@ export const UNDERLINE: TextMatchTransformer = {
 */
 const modifiedTextTransformers = [EmojiNodeTransform_1.EMOJI_NODE_MARKDOWN_TRANSFORM];
 exports.PLAYGROUND_TRANSFORMERS = [
-    exports.UNDERLINE,
     ...modifiedTextTransformers,
     exports.HR,
     ...markdown_1.ELEMENT_TRANSFORMERS,
     CustomLinkNodeTransformer_1.CUSTOM_LINK_NODE_TRANSFORMER,
     ...markdown_1.TRANSFORMERS.splice(0, 13),
+    exports.UNDERLINE,
 ];
 //# sourceMappingURL=MarkdownTransformers.js.map

package/dist/components/markdownEditor/plugins/MarkdownTransformers.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownTransformers.js","sourceRoot":"","sources":["../../../../src/components/markdownEditor/plugins/MarkdownTransformers.ts"],"names":[],"mappings":";;;AAGA,gDAI2B;AAC3B,wFAIkD;AAClD,sFAAsF;AACtF,mEAA2E;AAG9D,QAAA,EAAE,GAAuB;IACpC,YAAY,EAAE,CAAC,8CAAkB,CAAC;IAClC,MAAM,EAAE,CAAC,IAAiB,EAAE,EAAE,CAAC,CAAC,IAAA,iDAAqB,EAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAC3E,MAAM,EAAE,uBAAuB;IAC/B,OAAO,EAAE,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE;QACxC,MAAM,IAAI,GAAG,IAAA,qDAAyB,GAAE,CAAC;QAEzC,iCAAiC;QACjC,IAAI,QAAQ,IAAI,UAAU,CAAC,cAAc,EAAE,IAAI,IAAI,EAAE;YACnD,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;SAC1B;aAAM;YACL,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;SAC/B;QAED,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IACD,IAAI,EAAE,SAAS;CAChB,CAAC;AAQF;;;;;;;;;;;;;;;;EAgBE;AAEW,QAAA,SAAS,GAA0B;IAC9C,MAAM,EAAE,CAAC,WAAW,CAAC;IACrB,SAAS,EAAE,KAAK;IAChB,GAAG,EAAE,GAAG;IACR,IAAI,EAAE,aAAa;CACpB,CAAC;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2BE;AAEF,MAAM,wBAAwB,GAAG,CAAC,kDAA6B,CAAC,CAAC;AAEpD,QAAA,uBAAuB,GAAuB;IACzD,iBAAS;IACT,GAAG,wBAAwB;IAC3B,UAAE;IACF,GAAG,+BAAoB;IAEvB,wDAA4B;IAC5B,GAAG,uBAAY,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC;CAC9B,CAAC"}
+{"version":3,"file":"MarkdownTransformers.js","sourceRoot":"","sources":["../../../../src/components/markdownEditor/plugins/MarkdownTransformers.ts"],"names":[],"mappings":";;;AAGA,gDAI2B;AAC3B,wFAIkD;AAClD,sFAAsF;AACtF,mEAA2E;AAG9D,QAAA,EAAE,GAAuB;IACpC,YAAY,EAAE,CAAC,8CAAkB,CAAC;IAClC,MAAM,EAAE,CAAC,IAAiB,EAAE,EAAE,CAAC,CAAC,IAAA,iDAAqB,EAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAC3E,MAAM,EAAE,uBAAuB;IAC/B,OAAO,EAAE,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE;QACxC,MAAM,IAAI,GAAG,IAAA,qDAAyB,GAAE,CAAC;QAEzC,iCAAiC;QACjC,IAAI,QAAQ,IAAI,UAAU,CAAC,cAAc,EAAE,IAAI,IAAI,EAAE;YACnD,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;SAC1B;aAAM;YACL,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;SAC/B;QAED,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IACD,IAAI,EAAE,SAAS;CAChB,CAAC;AAQF;;;;;;;;;;;;;;;;EAgBE;AAEW,QAAA,SAAS,GAA0B;IAC9C,MAAM,EAAE,CAAC,WAAW,CAAC;IACrB,SAAS,EAAE,KAAK;IAChB,GAAG,EAAE,IAAI;IACT,IAAI,EAAE,aAAa;CACpB,CAAC;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2BE;AAEF,MAAM,wBAAwB,GAAG,CAAC,kDAA6B,CAAC,CAAC;AAEpD,QAAA,uBAAuB,GAAuB;IACzD,GAAG,wBAAwB;IAC3B,UAAE;IACF,GAAG,+BAAoB;IAEvB,wDAA4B;IAC5B,GAAG,uBAAY,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC;IAC7B,iBAAS;CACV,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@churchapps/apphelper",
-  "version": "0.3.16",
+  "version": "0.3.17",
   "description": "Library of helper functions for React and NextJS ChurchApps",
   "main": "dist/index.js",
 	"types": "dist/index.d.ts", 

package/src/components/markdownEditor/Editor.tsx

@@ -19,6 +19,7 @@ import { AutoLinkNode, LinkNode } from "@lexical/link";
 import { CodeHighlightNode, CodeNode } from "@lexical/code";
 import { theme } from "./theme";
 import { ToolbarPlugin, CustomAutoLinkPlugin, ListMaxIndentLevelPlugin, PLAYGROUND_TRANSFORMERS, ReadOnlyPlugin, ControlledEditorPlugin } from "./plugins";
+import FloatingTextFormatToolbarPlugin from "./plugins/FloatingTextMenu/FloatingTextFormatToolbarPlugin";
 import { MarkdownModal } from "./MarkdownModal";
 import CustomLinkNodePlugin from "./plugins/customLink/CustomLinkNodePlugin";
 import { CustomLinkNode } from "./plugins/customLink/CustomLinkNode";
@@ -33,9 +34,11 @@ interface Props {
   style?: any;
   textAlign?: "left" | "center" | "right";
   placeholder?: string;
+  element?: any;
+  showFloatingEditor?: boolean;
 }
 
-function Editor({ value, onChange = () => { }, mode = "interactive", textAlign = "left", style, placeholder = "Enter some text..." }: Props) {
+function Editor({ value, onChange = () => {}, mode = "interactive", textAlign = "left", style, placeholder = "Enter some text...", showFloatingEditor = false, ...props }: Props) {
   const [fullScreen, setFullScreen] = React.useState(false);
 
   const handleChange = (editorState: any) => {
@@ -49,7 +52,7 @@ function Editor({ value, onChange = () => { }, mode = "interactive", textAlign =
     console.error(error);
   };
 
-  const handleModalOnChange = (value : string) => {
+  const handleModalOnChange = (value: string) => {
     onChange(value);
   };
 
@@ -81,38 +84,52 @@ function Editor({ value, onChange = () => { }, mode = "interactive", textAlign =
         with: (node: LinkNode) => (
           new CustomLinkNode(node.getURL(), node.getTarget(), [])
         )
-      }
-    ]
+      },
+    ],
+    markdown: { transformers: PLAYGROUND_TRANSFORMERS }
   };
 
-  let textAlignClass = ""
+  let textAlignClass = "";
   switch (textAlign) {
     case "center":
-      textAlignClass = "text-center"
+      textAlignClass = "text-center";
       break;
     case "right":
-      textAlignClass = "text-right"
+      textAlignClass = "text-right";
       break;
     case "left":
     default:
-      textAlignClass = "text-left"
+      textAlignClass = "text-left";
       break;
   }
 
   return (
     <>
       <LexicalComposer initialConfig={initialConfig}>
-        <div className={(mode === "preview") ? `editor-container preview ${textAlignClass}` : `editor-container ${textAlignClass}`} style={Object.assign({ border: mode === "preview" ? "none" : "1px solid lightgray" }, style)}>
-          {mode !== "preview" && <ToolbarPlugin goFullScreen={() => { setFullScreen(true) }} />}
+        <div
+          className={mode === "preview" ? `editor-container preview ${textAlignClass}` : `editor-container ${textAlignClass}`}
+          style={Object.assign({ border: mode === "preview" ? "none" : "1px solid lightgray" }, style)}
+        >
+          {mode !== "preview" && (<ToolbarPlugin goFullScreen={() => { setFullScreen(true); }} />)}
           <div className="editor-inner">
-            {!fullScreen && <RichTextPlugin
-              contentEditable={<ContentEditable className="editor-input" style={{ minHeight: mode === "preview" ? "auto" : "150px" }} />}
-              placeholder={mode !== "preview" ? <div className="editor-placeholder">{placeholder}</div> : null}
-              ErrorBoundary={LexicalErrorBoundary}
-            /> }
+            {!fullScreen && (
+              <RichTextPlugin
+                contentEditable={
+                  <ContentEditable
+                    className="editor-input"
+                    style={{ minHeight: mode === "preview" ? "auto" : "150px" }}
+                    //@ts-ignore
+                    ref={(node) => { if (node) { const editor = node.closest("[data-lexical-editor]") as HTMLElement; if (editor) { editor.dataset.element = JSON.stringify(props.element) } } }} //Store element in dataset
+                  />
+                }
+                placeholder={mode !== "preview" ? (<div className="editor-placeholder">{placeholder}</div>) : null}
+                ErrorBoundary={LexicalErrorBoundary}
+              />
+            )}
             <CustomLinkNodePlugin />
             {mode !== "preview" && <EmojiPickerPlugin />}
             <EmojisPlugin />
+            {showFloatingEditor && <FloatingTextFormatToolbarPlugin />}
             <OnChangePlugin onChange={handleChange} />
             {mode !== "preview" && <AutoFocusPlugin />}
             <HistoryPlugin />
@@ -126,7 +143,7 @@ function Editor({ value, onChange = () => { }, mode = "interactive", textAlign =
           </div>
         </div>
       </LexicalComposer>
-      {fullScreen && <MarkdownModal onChange={handleModalOnChange} value={value} hideModal={handleCloseFullScreen} />}
+      {fullScreen && (<MarkdownModal onChange={handleModalOnChange} value={value} hideModal={handleCloseFullScreen} />)}
     </>
   );
 }

package/src/components/markdownEditor/MarkdownPreview.tsx

@@ -6,11 +6,13 @@ const Editor = lazy(() => import('./Editor'));
 
 interface Props {
   value: string;
-  textAlign?: "left" | "center" | "right"
+  textAlign?: "left" | "center" | "right",
+  element?: any,
+  showFloatingEditor?: boolean
 }
 
-export function MarkdownPreview({ value: markdownString = "", textAlign }: Props) {
+export function MarkdownPreview({ value: markdownString = "", textAlign, showFloatingEditor = false, ...props }: Props) {
   return <Suspense fallback={<div>{markdownString || ""}</div>}>
-    <Editor mode="preview" value={markdownString || ""} textAlign={textAlign} />
+    <Editor mode="preview" value={markdownString || ""} textAlign={textAlign} element={props.element} showFloatingEditor={showFloatingEditor} />
   </Suspense>
 }

package/src/components/markdownEditor/MarkdownPreviewLight.tsx

@@ -42,7 +42,11 @@ export function MarkdownPreviewLight({ value: markdownString = "", textAlign }:
   if (markdownString === null || markdownString === undefined || !markdownString) return <></>;
   else {
     const convertedText = getSpecialLinks(markdownString || "");
-    const html = marked.parse(convertedText || "")
+    let processedMarkdown = convertedText;
+    processedMarkdown = convertedText.replace(/__(.*?)__/g, "<u>$1</u>"); //Replace `__underlined__` with `<u>underlined</u>`
+    processedMarkdown = processedMarkdown.replace(/```([\s\S]+?)```/g, "<pre class='code-block'><code>$1</code></pre>"); //Convert block code ```code``` to <pre><code>code</code></pre>
+    processedMarkdown = processedMarkdown.replace(/`([^`]+)`/g, "<code>$1</code>"); //Convert inline code `code` to <code>code</code>
+    const html = marked.parse(processedMarkdown || "")
     const style = (textAlign) ? {textAlign} : {}
     return <div style={style} dangerouslySetInnerHTML={{__html: html as string}}></div>
   }

package/src/components/markdownEditor/plugins/FloatingTextMenu/FloatingTextFormatToolbarPlugin.tsx

@@ -0,0 +1,445 @@
+import { $isCodeHighlightNode } from "@lexical/code";
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { mergeRegister } from "@lexical/utils";
+import { $convertToMarkdownString } from "@lexical/markdown";
+import { $createParagraphNode, $getSelection, $isRangeSelection, $isTextNode, COMMAND_PRIORITY_LOW, FORMAT_TEXT_COMMAND, SELECTION_CHANGE_COMMAND } from "lexical";
+import { $createHeadingNode, $isHeadingNode } from "@lexical/rich-text";
+import { $wrapNodes } from "@lexical/selection";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Box, styled, IconButton, Icon, Select, MenuItem } from "@mui/material";
+
+import { getDOMRangeRect } from "./getDOMRangeRect";
+import { getSelectedNode } from "./getSelectNode";
+import { setFloatingElemPosition } from "./setFloatingElemPosition";
+import { PLAYGROUND_TRANSFORMERS } from "../MarkdownTransformers";
+import { ApiHelper } from "../../../../helpers";
+
+export const FloatingDivContainer = styled(Box)({
+  display: "flex",
+  background: "#fff",
+  padding: 4,
+  verticalAlign: "middle",
+  position: "absolute",
+  top: 0,
+  left: 0,
+  zIndex: 1400,
+  opacity: 0,
+  backgroundColor: "#fff",
+  boxShadow: "0px 5px 10px rgba(0, 0, 0, 0.3)",
+  borderRadius: 8,
+  transition: "opacity 0.5s",
+  height: 35,
+  willChange: "transform",
+});
+
+function TextFormatFloatingToolbar({ editor, anchorElem, isLink, isBold, isItalic, isUnderline, isCode, isStrikethrough, isSubscript, isSuperscript, blockType, setBlockType }: any) {
+  const popupCharStylesEditorRef = useRef(null);
+
+  const applyFormatting = (command: string) => {
+    editor.dispatchCommand(FORMAT_TEXT_COMMAND, command);
+    saveChanges(editor);
+  }
+
+  const insertLink = useCallback(() => {
+    if (!isLink) {
+      editor.dispatchCommand(TOGGLE_LINK_COMMAND, "https://");
+    } else {
+      editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+    }
+  }, [editor, isLink]);
+
+  function mouseMoveListener(e: any) {
+    if (
+      popupCharStylesEditorRef?.current &&
+      (e.buttons === 1 || e.buttons === 3)
+    ) {
+      popupCharStylesEditorRef.current.style.pointerEvents = "none";
+    }
+  }
+  function mouseUpListener(e: any) {
+    if (popupCharStylesEditorRef?.current) {
+      popupCharStylesEditorRef.current.style.pointerEvents = "auto";
+    }
+  }
+
+  useEffect(() => {
+    if (popupCharStylesEditorRef?.current) {
+      document.addEventListener("mousemove", mouseMoveListener);
+      document.addEventListener("mouseup", mouseUpListener);
+
+      return () => {
+        document.removeEventListener("mousemove", mouseMoveListener);
+        document.removeEventListener("mouseup", mouseUpListener);
+      };
+    }
+  }, [popupCharStylesEditorRef]);
+
+  const updateTextFormatFloatingToolbar = useCallback(() => {
+    const selection = $getSelection();
+
+    const popupCharStylesEditorElem = popupCharStylesEditorRef.current;
+    const nativeSelection = window.getSelection();
+
+    if (popupCharStylesEditorElem === null) {
+      return;
+    }
+
+    const rootElement = editor.getRootElement();
+    if (
+      selection !== null &&
+      nativeSelection !== null &&
+      !nativeSelection.isCollapsed &&
+      rootElement !== null &&
+      rootElement.contains(nativeSelection.anchorNode)
+    ) {
+      const rangeRect = getDOMRangeRect(nativeSelection, rootElement);
+
+      setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem);
+    }
+  }, [editor, anchorElem]);
+
+  useEffect(() => {
+    const scrollerElem = anchorElem.parentElement;
+
+    const update = () => {
+      editor.getEditorState().read(() => {
+        updateTextFormatFloatingToolbar();
+      });
+    };
+
+    window.addEventListener("resize", update);
+    if (scrollerElem) {
+      scrollerElem.addEventListener("scroll", update);
+    }
+
+    return () => {
+      window.removeEventListener("resize", update);
+      if (scrollerElem) {
+        scrollerElem.removeEventListener("scroll", update);
+      }
+    };
+  }, [editor, updateTextFormatFloatingToolbar, anchorElem]);
+
+  useEffect(() => {
+    editor.getEditorState().read(() => {
+      updateTextFormatFloatingToolbar();
+    });
+    return mergeRegister(
+      editor.registerUpdateListener(({ editorState }: any) => {
+        editorState.read(() => {
+          updateTextFormatFloatingToolbar();
+        });
+      }),
+
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        () => {
+          updateTextFormatFloatingToolbar();
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      )
+    );
+  }, [editor, updateTextFormatFloatingToolbar]);
+
+  const formatBlock = (type: string) => {
+    editor.update(() => {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection)) {
+        $wrapNodes(selection, () =>
+          //@ts-ignore
+          type === "paragraph" ? $createParagraphNode() : $createHeadingNode(type)
+        );
+      }
+    });
+    setBlockType(type);
+    saveChanges(editor)
+  };
+
+  return (
+    <FloatingDivContainer ref={popupCharStylesEditorRef}>
+        <>
+          <Select
+            value={blockType}
+            onChange={(e) => formatBlock(e.target.value)}
+            sx={{
+              minWidth: 120,
+              backgroundColor: "#fff",
+              borderRadius: 2,
+              marginRight: 0.3,
+            }}
+          >
+            <MenuItem value="paragraph">Normal</MenuItem>
+            <MenuItem value="h1">Heading 1</MenuItem>
+            <MenuItem value="h2">Heading 2</MenuItem>
+            <MenuItem value="h3">Heading 3</MenuItem>
+            <MenuItem value="h4">Heading 4</MenuItem>
+          </Select>
+          <IconButton
+            onClick={() => {
+              applyFormatting("bold");
+            }}
+            sx={{ backgroundColor: isBold ? "#e0e0e0" : undefined, borderRadius: 2, marginRight: 0.3 }}
+          >
+            <Icon>format_bold_outline</Icon>
+          </IconButton>
+
+          <IconButton
+            onClick={() => {
+              applyFormatting("italic");
+            }}
+            sx={{ backgroundColor: isItalic ? "#e0e0e0" : undefined, borderRadius: 2, marginRight: 0.3 }}
+          >
+            <Icon>format_italic_outline</Icon>
+          </IconButton>
+
+          <IconButton
+            onClick={() => {
+              applyFormatting("underline");
+            }}
+            sx={{ backgroundColor: isUnderline ? "#e0e0e0" : undefined, borderRadius: 2, marginRight: 0.3 }}
+          >
+            <Icon>format_underlined_outline</Icon>
+          </IconButton>
+
+          {/* <IconButton
+            onClick={() => {
+              applyFormatting("strikethrough");
+            }}
+            sx={{ backgroundColor: isStrikethrough ? "#e0e0e0" : undefined, borderRadius: 2, marginRight: 0.3 }}
+          >
+            <Icon>strikethrough_s_outline</Icon>
+          </IconButton> */}
+
+          <IconButton
+            onClick={() => {
+              applyFormatting("code");
+            }}
+            sx={{ backgroundColor: isCode ? "#e0e0e0" : undefined, borderRadius: 2, marginRight: 0.3 }}
+          >
+            <Icon>code</Icon>
+          </IconButton>
+
+          {/* <IconButton
+            onClick={insertLink}
+            sx={{ backgroundColor: isLink ? "#e0e0e0" : undefined, borderRadius: 2 }}
+          >
+            <Icon>insert_link_outline</Icon>
+          </IconButton> */}
+        </>
+    </FloatingDivContainer>
+  );
+}
+
+let lastSavedText = ""; // Track last saved text
+let lastFormattingState = {}; // Track last formatting state
+
+//@ts-ignore
+const getFormattingState = (selection) => {
+  const node = getSelectedNode(selection);
+  let blockType = "paragraph";
+  if ($isHeadingNode(node)) {
+    blockType = node.getTag(); // "h1", "h2", etc.
+  }
+
+  return {
+    isBold: selection.hasFormat("bold"),
+    isItalic: selection.hasFormat("italic"),
+    isUnderline: selection.hasFormat("underline"),
+    // isStrikethrough: selection.hasFormat("strikethrough"),
+    isCode: selection.hasFormat("code"),
+    blockType
+  }
+}
+
+const saveChanges = (editor: any) => {
+  editor.update(() => {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection)) {
+        const text = selection.getTextContent().trim();
+        const newFormattingState = getFormattingState(selection); // Get current formatting
+        
+        // Get the parent block node (ensuring it's not just a text node)
+        const node = getSelectedNode(selection);
+        const parentNode = node.getParent(); // Get the parent block-level node
+        let blockType = "paragraph";
+
+        if ($isHeadingNode(parentNode)) {
+          blockType = parentNode.getTag(); // Get heading type
+        } else if ($isHeadingNode(node)) {
+          blockType = node.getTag();
+        }
+        
+        //@ts-ignore
+        if (JSON.stringify(newFormattingState) !== JSON.stringify(lastFormattingState) || blockType !== lastFormattingState.blockType) {
+          lastSavedText = text;
+          lastFormattingState = { ...newFormattingState, blockType };
+
+          const editorNode = editor.getRootElement();
+          const elementJSON = editorNode?.dataset?.element;
+          if (elementJSON) {
+            const markdown = $convertToMarkdownString(PLAYGROUND_TRANSFORMERS)
+            const element: any = JSON.parse(elementJSON);
+
+            element.answers.text = markdown;
+            element.answersJSON = JSON.stringify(element.answers);
+
+            ApiHelper.post("/elements", [element], "ContentApi");
+          }
+        }
+      }
+  })
+}
+
+const updateFormattingState = (editor: any) => {
+  editor.update(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      lastFormattingState = getFormattingState(selection);
+    }
+  })
+}
+
+function useFloatingTextFormatToolbar(editor: any, anchorElem: any) {
+  const [isText, setIsText] = useState(false);
+  const [isLink, setIsLink] = useState(false);
+  const [isBold, setIsBold] = useState(false);
+  const [isItalic, setIsItalic] = useState(false);
+  const [isUnderline, setIsUnderline] = useState(false);
+  const [isStrikethrough, setIsStrikethrough] = useState(false);
+  const [isSubscript, setIsSubscript] = useState(false);
+  const [isSuperscript, setIsSuperscript] = useState(false);
+  const [isCode, setIsCode] = useState(false);
+  const [blockType, setBlockType] = useState("paragraph");
+
+  const updatePopup = useCallback(() => {
+    editor.getEditorState().read(() => {
+      // Should not to pop up the floating toolbar when using IME input
+      if (editor.isComposing()) {
+        return;
+      }
+      const selection = $getSelection();
+      const nativeSelection = window.getSelection();
+      const rootElement = editor.getRootElement();
+
+      if (
+        nativeSelection !== null &&
+        (!$isRangeSelection(selection) ||
+          rootElement === null ||
+          !rootElement.contains(nativeSelection.anchorNode))
+      ) {
+        setIsText(false);
+        return;
+      }
+
+      if (!$isRangeSelection(selection)) {
+        return;
+      }
+
+      const node = getSelectedNode(selection);
+
+      // Update text format
+      setIsBold(selection.hasFormat("bold"));
+      setIsItalic(selection.hasFormat("italic"));
+      setIsUnderline(selection.hasFormat("underline"));
+      setIsStrikethrough(selection.hasFormat("strikethrough"));
+      setIsSubscript(selection.hasFormat("subscript"));
+      setIsSuperscript(selection.hasFormat("superscript"));
+      setIsCode(selection.hasFormat("code"));
+
+      // Update links
+      const parent = node.getParent();
+      if ($isLinkNode(parent) || $isLinkNode(node)) {
+        setIsLink(true);
+      } else {
+        setIsLink(false);
+      }
+
+      if (
+        !$isCodeHighlightNode(selection.anchor.getNode()) &&
+        selection.getTextContent() !== ""
+      ) {
+        setIsText($isTextNode(node));
+      } else {
+        setIsText(false);
+      }
+
+      const rawTextContent = selection.getTextContent().replace(/\n/g, "");
+      if (!selection.isCollapsed() && rawTextContent === "") {
+        setIsText(false);
+        return;
+      }
+
+      if ($isRangeSelection(selection)) {
+        const text = selection.getTextContent().trim();
+        if (text && JSON.stringify(lastFormattingState === "{}")) {
+          updateFormattingState(editor);
+        }
+      }
+
+      let type = "paragraph";
+      if ($isHeadingNode(parent)) {
+        type = parent.getTag();
+      } else if ($isHeadingNode(node)) {
+        type = node.getTag();
+      }
+      setBlockType(type);
+    });
+
+  }, [editor]);
+
+  useEffect(() => {
+    document.addEventListener("selectionchange", updatePopup);
+    return () => {
+      document.removeEventListener("selectionchange", updatePopup);
+    };
+  }, [updatePopup]);
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerUpdateListener(() => {
+        updatePopup();
+      }),
+      editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+        updatePopup();
+        return false;
+      },COMMAND_PRIORITY_LOW),
+      editor.registerRootListener(() => {
+        if (editor.getRootElement() === null) {
+          setIsText(false);
+        }
+      })
+    );
+  }, [editor, updatePopup]);
+
+  if (!isText || isLink) {
+    return null;
+  }
+
+  return createPortal(
+    <TextFormatFloatingToolbar
+      editor={editor}
+      anchorElem={anchorElem}
+      isLink={isLink}
+      isBold={isBold}
+      isItalic={isItalic}
+      isStrikethrough={isStrikethrough}
+      isSubscript={isSubscript}
+      isSuperscript={isSuperscript}
+      isUnderline={isUnderline}
+      isCode={isCode}
+      blockType={blockType}
+      setBlockType={setBlockType}
+    />,
+    anchorElem
+  );
+}
+
+export default function FloatingTextFormatToolbarPlugin({
+  anchorElem = document.body,
+}) {
+  const [editor] = useLexicalComposerContext();
+  return useFloatingTextFormatToolbar(editor, anchorElem);
+}