@churchapps/apphelper 0.3.15 → 0.3.17

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/pageComponents/components/SelectChurchSearch.tsx

@@ -8,64 +8,64 @@ import { SelectableChurch } from "./SelectableChurch";
 import { SelectChurchRegister } from "./SelectChurchRegister";
 
 interface Props {
-  selectChurch: (churchId: string) => void,
-  registeredChurchCallback?: (church: ChurchInterface) => void,
-  appName: string
+	selectChurch: (churchId: string) => void,
+	registeredChurchCallback?: (church: ChurchInterface) => void,
+	appName: string
 }
 
 export const SelectChurchSearch: React.FC<Props> = (props) => {
-  const [searchText, setSearchText] = React.useState("");
-  const [churches, setChurches] = React.useState<ChurchInterface[]>(null);
-  const [showRegister, setShowRegister] = React.useState(false);
+	const [searchText, setSearchText] = React.useState("");
+	const [churches, setChurches] = React.useState<ChurchInterface[]>(null);
+	const [showRegister, setShowRegister] = React.useState(false);
 
-  const handleSubmit = (e: React.MouseEvent) => {
-    if (e !== null) e.preventDefault();
-    let term = escape(searchText.trim());
-    ApiHelper.post("/churches/search", { name: term }, "MembershipApi").then(data => setChurches(data));
-  }
+	const handleSubmit = (e: React.MouseEvent) => {
+		if (e !== null) e.preventDefault();
+		let term = searchText.trim();
+		ApiHelper.post("/churches/search", { name: term }, "MembershipApi").then(data => setChurches(data));
+	}
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => setSearchText(e.currentTarget.value);
+	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => setSearchText(e.currentTarget.value);
 
-  const handleKeyDown = (e: React.KeyboardEvent<any>) => { if (e.key === "Enter") { e.preventDefault(); handleSubmit(null); } }
+	const handleKeyDown = (e: React.KeyboardEvent<any>) => { if (e.key === "Enter") { e.preventDefault(); handleSubmit(null); } }
 
-  const handleRegisterClick = (e: React.MouseEvent) => {
-    e.preventDefault();
-    if (window.confirm(Locale.label("selectChurch.confirmRegister"))) {
-      setShowRegister(true);
-    }
-  }
+	const handleRegisterClick = (e: React.MouseEvent) => {
+		e.preventDefault();
+		if (window.confirm(Locale.label("selectChurch.confirmRegister"))) {
+			setShowRegister(true);
+		}
+	}
 
-  const getRegisterLink = () => (
-    <div>
-      <a style={{ display: "block", textAlign: "center" }} href="about:blank" onClick={handleRegisterClick}>
-        {Locale.label("selectChurch.register")}
-      </a>
-    </div>
-  )
+	const getRegisterLink = () => (
+		<div>
+			<a style={{ display: "block", textAlign: "center" }} href="about:blank" onClick={handleRegisterClick}>
+				{Locale.label("selectChurch.register")}
+			</a>
+		</div>
+	)
 
-  const getChurches = () => {
-    const result: JSX.Element[] = [];
-    churches.forEach(church => {
-      result.push(<SelectableChurch church={church} selectChurch={props.selectChurch} />);
-    });
-    result.push(getRegisterLink());
-    return result;
-  }
+	const getChurches = () => {
+		const result: JSX.Element[] = [];
+		churches.forEach(church => {
+			result.push(<SelectableChurch church={church} selectChurch={props.selectChurch} />);
+		});
+		result.push(getRegisterLink());
+		return result;
+	}
 
-  const getResults = () => {
-    if (churches === null) return;
-    else if (churches.length === 0) return <><p>{Locale.label("selectChurch.noMatches")}</p>{getRegisterLink()}</>
-    else return getChurches();
-  }
+	const getResults = () => {
+		if (churches === null) return;
+		else if (churches.length === 0) return <><p>{Locale.label("selectChurch.noMatches")}</p>{getRegisterLink()}</>
+		else return getChurches();
+	}
 
-  if (showRegister) return (<SelectChurchRegister selectChurch={props.selectChurch} registeredChurchCallback={props.registeredChurchCallback} appName={props.appName} initialChurchName={searchText} />)
-  else return (
-    <>
-      <TextField fullWidth name="searchText" label="Name" value={searchText} onChange={handleChange} onKeyDown={handleKeyDown}
-        InputProps={{ endAdornment: <Button variant="contained" id="searchButton" data-cy="search-button" onClick={handleSubmit}>{Locale.label("common.search")}</Button> }}
-      />
-      {getResults()}
-    </>
+	if (showRegister) return (<SelectChurchRegister selectChurch={props.selectChurch} registeredChurchCallback={props.registeredChurchCallback} appName={props.appName} initialChurchName={searchText} />)
+	else return (
+		<>
+			<TextField fullWidth name="searchText" label="Name" value={searchText} onChange={handleChange} onKeyDown={handleKeyDown}
+				InputProps={{ endAdornment: <Button variant="contained" id="searchButton" data-cy="search-button" onClick={handleSubmit}>{Locale.label("common.search")}</Button> }}
+			/>
+			{getResults()}
+		</>
 
-  );
+	);
 };