@churchapps/apphelper 0.3.16 → 0.3.18

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);
+}

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

@@ -0,0 +1,17 @@
+export function getDOMRangeRect(nativeSelection: any, rootElement: any) {
+	const domRange = nativeSelection.getRangeAt(0);
+
+	let rect;
+
+	if (nativeSelection.anchorNode === rootElement) {
+		let inner = rootElement;
+		while (inner.firstElementChild != null) {
+			inner = inner.firstElementChild;
+		}
+		rect = inner.getBoundingClientRect();
+	} else {
+		rect = domRange.getBoundingClientRect();
+	}
+
+	return rect;
+}

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

@@ -0,0 +1,17 @@
+import { $isAtNodeEnd } from "@lexical/selection";
+
+export function getSelectedNode(selection: any) {
+  const anchor = selection.anchor;
+  const focus = selection.focus;
+  const anchorNode = selection.anchor.getNode();
+  const focusNode = selection.focus.getNode();
+  if (anchorNode === focusNode) {
+    return anchorNode;
+  }
+  const isBackward = selection.isBackward();
+  if (isBackward) {
+    return $isAtNodeEnd(focus) ? anchorNode : focusNode;
+  } else {
+    return $isAtNodeEnd(anchor) ? anchorNode : focusNode;
+  }
+}

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

@@ -0,0 +1,33 @@
+const VERTICAL_GAP = 10;
+const HORIZONTAL_OFFSET = 5;
+
+export function setFloatingElemPosition( targetRect: any, floatingElem: any, anchorElem: any, 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)`;
+}

package/src/components/markdownEditor/plugins/MarkdownTransformers.ts

@@ -61,7 +61,7 @@ export type TextMatchTransformer = Readonly<{
 export const UNDERLINE: TextFormatTransformer = {
   format: ["underline"],
   intraword: false,
-  tag: "_",
+  tag: "__",
   type: "text-format"
 };
 /*
@@ -96,11 +96,11 @@ export const UNDERLINE: TextMatchTransformer = {
 const modifiedTextTransformers = [EMOJI_NODE_MARKDOWN_TRANSFORM];
 
 export const PLAYGROUND_TRANSFORMERS: Array<Transformer> = [
-  UNDERLINE,
   ...modifiedTextTransformers,
   HR,
   ...ELEMENT_TRANSFORMERS,
 
   CUSTOM_LINK_NODE_TRANSFORMER,
   ...TRANSFORMERS.splice(0, 13),
+  UNDERLINE,
 ];

package/src/components/markdownEditor/plugins/customLink/CustomLinkNode.tsx

@@ -42,6 +42,13 @@ export class CustomLinkNode extends LinkNode {
     return $applyNodeReplacement(newLinkNode);
   }
 
+  addClassNamesToElement = (element: HTMLElement, classNames: string) => {
+    if (classNames) {
+      const classes = classNames.split(' ').filter(className => className.trim().length > 0);
+      element.classList.add(...classes);
+    }
+  };
+
   createDOM() {
     const link = document.createElement("a");
 
@@ -49,7 +56,8 @@ export class CustomLinkNode extends LinkNode {
 
     link.setAttribute("target", this.__target || "_blank");
 
-    utils.addClassNamesToElement(link, (this.__classNames || []).join(" "));
+    // utils.addClassNamesToElement(link, (this.__classNames || []).join(" "));
+    this.addClassNamesToElement(link, (this.__classNames || []).join(" "));
 
     return link;
   }

package/src/components/markdownEditor/plugins/customLink/FloatingLinkEditor.tsx

@@ -15,15 +15,27 @@ const positionEditorElement = (editor: HTMLElement, rect: DOMRect | null) => {
     editor.style.left = "-1000px";
   } else {
     editor.style.opacity = "1";
-    editor.style.top = `${rect.top + rect.height + 10}px`;
-    editor.style.left = `${
-      rect.left + window.pageXOffset - editor.offsetWidth / 2 + rect.width / 2 < 0
-        ? 0
-        : rect.left
-          + window.pageXOffset
-          - editor.offsetWidth / 2
-          + rect.width / 2
-    }px`;
+    // Add viewport height check
+    const editorHeight = editor.offsetHeight;
+    const viewportHeight = window.innerHeight;
+    let topPosition = rect.top + rect.height + 10;
+    
+    // If editor would go off bottom of screen, position it above the selection instead
+    if (topPosition + editorHeight > viewportHeight) {
+      topPosition = rect.top - editorHeight - 10;
+    }
+    
+    editor.style.top = `${topPosition}px`;
+    
+    // Ensure editor stays within horizontal bounds
+    const leftPosition = Math.max(
+      0,
+      Math.min(
+        rect.left + window.pageXOffset - editor.offsetWidth / 2 + rect.width / 2,
+        window.innerWidth - editor.offsetWidth
+      )
+    );
+    editor.style.left = `${leftPosition}px`;
   }
 };
 

package/src/components/markdownEditor/plugins/emoji/EmojisPlugin.tsx

@@ -23,6 +23,11 @@ function useEmojis(editor: LexicalEditor): void {
       throw new Error('EmojisPlugin: EmojiNode not registered on editor');
     }
 
+    if (!materialIcons || !Array.isArray(materialIcons)) {
+      return;
+      // throw new Error('EmojisPlugin: materialIcons not properly loaded');
+    }
+
     return editor.registerNodeTransform(TextNode, (textNode) => {
       if (EMOJI_NODE_MARKDOWN_REGEX.test(textNode.getTextContent()) || materialIcons.map((materialIcon : string) => ':' + materialIcon + ':').some((materialIcon : string) => textNode.getTextContent().includes(materialIcon))) {