@churchapps/apphelper 0.0.8 → 0.0.10

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

@@ -1,65 +1,65 @@
-/**
- * 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.
- *
- */
-
-import type {LexicalEditor} from 'lexical';
-import 'material-symbols';
-import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {$createTextNode, TextNode} from 'lexical';
-import {useEffect} from 'react';
-import materialIcons from '../../../material/iconPicker/IconNamesList';
-
-import {$createEmojiNode, EmojiNode} from './EmojiNode';
-import { EMOJI_NODE_MARKDOWN_REGEX } from './EmojiNodeTransform';
-
-
-function useEmojis(editor: LexicalEditor): void {
-  useEffect(() => {
-    if (!editor.hasNodes([EmojiNode, TextNode])) {
-      throw new Error('EmojisPlugin: EmojiNode not registered on editor');
-    }
-
-    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))) {
-
-        const materialIconToInsert = materialIcons.find((materialIcon : string) => textNode.getTextContent().replaceAll(':', '').includes(materialIcon));
-
-        if (!materialIconToInsert) return;
-
-        const initialTextInput = textNode.getTextContent();
-        const emojiNode = $createEmojiNode(materialIconToInsert);
-
-        const leftoverTextNodes : Array<TextNode> = [];
-
-        initialTextInput?.split(':').forEach((leftoverTextString : string, index : number) => {
-          if (materialIcons.includes(leftoverTextString)) {
-            const emojiNode = $createEmojiNode(leftoverTextString);
-
-            leftoverTextNodes.push(emojiNode);
-            return;
-          }
-          leftoverTextNodes.push($createTextNode(leftoverTextString));
-        });
-
-        textNode.setTextContent('');
-
-
-        textNode.getParent().splice(textNode.getIndexWithinParent(), 1, leftoverTextNodes);
-
-        (leftoverTextNodes.find((node : TextNode) => materialIcons.includes(node.__text)) || leftoverTextNodes[leftoverTextNodes.length - 1]).select();
-
-        textNode.remove();
-      }
-    });
-  }, [editor]);
-}
-
-export default function EmojisPlugin(): JSX.Element | null {
-  const [editor] = useLexicalComposerContext();
-  useEmojis(editor);
-  return null;
-}
+/**
+ * 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.
+ *
+ */
+
+import type {LexicalEditor} from 'lexical';
+import 'material-symbols';
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {$createTextNode, TextNode} from 'lexical';
+import {useEffect} from 'react';
+import materialIcons from '../../../material/iconPicker/IconNamesList';
+
+import {$createEmojiNode, EmojiNode} from './EmojiNode';
+import { EMOJI_NODE_MARKDOWN_REGEX } from './EmojiNodeTransform';
+
+
+function useEmojis(editor: LexicalEditor): void {
+  useEffect(() => {
+    if (!editor.hasNodes([EmojiNode, TextNode])) {
+      throw new Error('EmojisPlugin: EmojiNode not registered on editor');
+    }
+
+    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))) {
+
+        const materialIconToInsert = materialIcons.find((materialIcon : string) => textNode.getTextContent().replaceAll(':', '').includes(materialIcon));
+
+        if (!materialIconToInsert) return;
+
+        const initialTextInput = textNode.getTextContent();
+        const emojiNode = $createEmojiNode(materialIconToInsert);
+
+        const leftoverTextNodes : Array<TextNode> = [];
+
+        initialTextInput?.split(':').forEach((leftoverTextString : string, index : number) => {
+          if (materialIcons.includes(leftoverTextString)) {
+            const emojiNode = $createEmojiNode(leftoverTextString);
+
+            leftoverTextNodes.push(emojiNode);
+            return;
+          }
+          leftoverTextNodes.push($createTextNode(leftoverTextString));
+        });
+
+        textNode.setTextContent('');
+
+
+        textNode.getParent().splice(textNode.getIndexWithinParent(), 1, leftoverTextNodes);
+
+        (leftoverTextNodes.find((node : TextNode) => materialIcons.includes(node.__text)) || leftoverTextNodes[leftoverTextNodes.length - 1]).select();
+
+        textNode.remove();
+      }
+    });
+  }, [editor]);
+}
+
+export default function EmojisPlugin(): JSX.Element | null {
+  const [editor] = useLexicalComposerContext();
+  useEmojis(editor);
+  return null;
+}

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

@@ -1,6 +1,6 @@
-export { ToolbarPlugin } from "./ToolbarPlugin";
-export { CustomAutoLinkPlugin } from "./AutoLinkPlugin";
-export { ListMaxIndentLevelPlugin } from "./ListMaxIndentLevelPlugin";
-export { PLAYGROUND_TRANSFORMERS } from "./MarkdownTransformers";
-export { ReadOnlyPlugin } from "./ReadOnlyPlugin";
-export { ControlledEditorPlugin } from "./ControlledEditorPlugin";
+export { ToolbarPlugin } from "./ToolbarPlugin";
+export { CustomAutoLinkPlugin } from "./AutoLinkPlugin";
+export { ListMaxIndentLevelPlugin } from "./ListMaxIndentLevelPlugin";
+export { PLAYGROUND_TRANSFORMERS } from "./MarkdownTransformers";
+export { ReadOnlyPlugin } from "./ReadOnlyPlugin";
+export { ControlledEditorPlugin } from "./ControlledEditorPlugin";

package/src/components/markdownEditor/theme.ts

@@ -1,65 +1,65 @@
-export const theme = {
-  placeholder: "editor-placeholder",
-  paragraph: "editor-paragraph",
-  quote: "editor-quote",
-  heading: {
-    h1: "editor-heading-h1",
-    h2: "editor-heading-h2",
-    h3: "editor-heading-h3",
-    h4: "editor-heading-h4",
-    h5: "editor-heading-h5"
-  },
-  list: {
-    nested: {
-      listitem: "editor-nested-listitem"
-    },
-    ol: "editor-list-ol",
-    ul: "editor-list-ul",
-    listitem: "editor-listitem"
-  },
-  image: "editor-image",
-  link: "editor-link",
-  text: {
-    bold: "editor-text-bold",
-    italic: "editor-text-italic",
-    overflowed: "editor-text-overflowed",
-    hashtag: "editor-text-hashtag",
-    underline: "editor-text-underline",
-    strikethrough: "editor-text-strikethrough",
-    underlineStrikethrough: "editor-text-underlineStrikethrough",
-    code: "editor-text-code"
-  },
-  code: "editor-code",
-  codeHighlight: {
-    atrule: "editor-tokenAttr",
-    attr: "editor-tokenAttr",
-    boolean: "editor-tokenProperty",
-    builtin: "editor-tokenSelector",
-    cdata: "editor-tokenComment",
-    char: "editor-tokenSelector",
-    class: "editor-tokenFunction",
-    "class-name": "editor-tokenFunction",
-    comment: "editor-tokenComment",
-    constant: "editor-tokenProperty",
-    deleted: "editor-tokenProperty",
-    doctype: "editor-tokenComment",
-    entity: "editor-tokenOperator",
-    function: "editor-tokenFunction",
-    important: "editor-tokenVariable",
-    inserted: "editor-tokenSelector",
-    keyword: "editor-tokenAttr",
-    namespace: "editor-tokenVariable",
-    number: "editor-tokenProperty",
-    operator: "editor-tokenOperator",
-    prolog: "editor-tokenComment",
-    property: "editor-tokenProperty",
-    punctuation: "editor-tokenPunctuation",
-    regex: "editor-tokenVariable",
-    selector: "editor-tokenSelector",
-    string: "editor-tokenSelector",
-    symbol: "editor-tokenProperty",
-    tag: "editor-tokenProperty",
-    url: "editor-tokenOperator",
-    variable: "editor-tokenVariable"
-  }
-};
+export const theme = {
+  placeholder: "editor-placeholder",
+  paragraph: "editor-paragraph",
+  quote: "editor-quote",
+  heading: {
+    h1: "editor-heading-h1",
+    h2: "editor-heading-h2",
+    h3: "editor-heading-h3",
+    h4: "editor-heading-h4",
+    h5: "editor-heading-h5"
+  },
+  list: {
+    nested: {
+      listitem: "editor-nested-listitem"
+    },
+    ol: "editor-list-ol",
+    ul: "editor-list-ul",
+    listitem: "editor-listitem"
+  },
+  image: "editor-image",
+  link: "editor-link",
+  text: {
+    bold: "editor-text-bold",
+    italic: "editor-text-italic",
+    overflowed: "editor-text-overflowed",
+    hashtag: "editor-text-hashtag",
+    underline: "editor-text-underline",
+    strikethrough: "editor-text-strikethrough",
+    underlineStrikethrough: "editor-text-underlineStrikethrough",
+    code: "editor-text-code"
+  },
+  code: "editor-code",
+  codeHighlight: {
+    atrule: "editor-tokenAttr",
+    attr: "editor-tokenAttr",
+    boolean: "editor-tokenProperty",
+    builtin: "editor-tokenSelector",
+    cdata: "editor-tokenComment",
+    char: "editor-tokenSelector",
+    class: "editor-tokenFunction",
+    "class-name": "editor-tokenFunction",
+    comment: "editor-tokenComment",
+    constant: "editor-tokenProperty",
+    deleted: "editor-tokenProperty",
+    doctype: "editor-tokenComment",
+    entity: "editor-tokenOperator",
+    function: "editor-tokenFunction",
+    important: "editor-tokenVariable",
+    inserted: "editor-tokenSelector",
+    keyword: "editor-tokenAttr",
+    namespace: "editor-tokenVariable",
+    number: "editor-tokenProperty",
+    operator: "editor-tokenOperator",
+    prolog: "editor-tokenComment",
+    property: "editor-tokenProperty",
+    punctuation: "editor-tokenPunctuation",
+    regex: "editor-tokenVariable",
+    selector: "editor-tokenSelector",
+    string: "editor-tokenSelector",
+    symbol: "editor-tokenProperty",
+    tag: "editor-tokenProperty",
+    url: "editor-tokenOperator",
+    variable: "editor-tokenVariable"
+  }
+};

package/src/components/material/AppList.tsx

@@ -1,20 +1,20 @@
-import React from "react";
-import { ApiHelper } from "../../helpers/ApiHelper";
-import { UserHelper } from "../../helpers/UserHelper";
-import { NavItem } from "./NavItem";
-import { CommonEnvironmentHelper } from "../../helpers/CommonEnvironmentHelper";
-import { LoginUserChurchInterface } from "../../interfaces";
-
-export interface Props { appName: string; currentUserChurch: LoginUserChurchInterface; router?: any; }
-
-export const AppList: React.FC<Props> = props => {
-  const jwt = ApiHelper.getConfig("MembershipApi").jwt;
-  const churchId = UserHelper.currentUserChurch.church.id;
-  return (
-    <>
-      <NavItem url={`${CommonEnvironmentHelper.ChumsRoot}/login?jwt=${jwt}&churchId=${churchId}`} selected={props.appName === "CHUMS"} external={true} label="Chums" icon="logout" router={props.router} />
-      <NavItem url={`${CommonEnvironmentHelper.B1Root.replace("{key}", props.currentUserChurch.church.subDomain)}/login?jwt=${jwt}&churchId=${churchId}`} selected={props.appName === "B1.church"} external={true} label="B1.Church" icon="logout" router={props.router} />
-      <NavItem url={`${CommonEnvironmentHelper.LessonsRoot}/login?jwt=${jwt}&churchId=${churchId}`} selected={props.appName === "Lessons.church"} external={true} label="Lessons.church" icon="logout" router={props.router} />
-    </>
-  );
-}
+import React from "react";
+import { ApiHelper } from "../../helpers/ApiHelper";
+import { UserHelper } from "../../helpers/UserHelper";
+import { NavItem } from "./NavItem";
+import { CommonEnvironmentHelper } from "../../helpers/CommonEnvironmentHelper";
+import { LoginUserChurchInterface } from "../../interfaces";
+
+export interface Props { appName: string; currentUserChurch: LoginUserChurchInterface; router?: any; }
+
+export const AppList: React.FC<Props> = props => {
+  const jwt = ApiHelper.getConfig("MembershipApi").jwt;
+  const churchId = UserHelper.currentUserChurch.church.id;
+  return (
+    <>
+      <NavItem url={`${CommonEnvironmentHelper.ChumsRoot}/login?jwt=${jwt}&churchId=${churchId}`} selected={props.appName === "CHUMS"} external={true} label="Chums" icon="logout" router={props.router} />
+      <NavItem url={`${CommonEnvironmentHelper.B1Root.replace("{key}", props.currentUserChurch.church.subDomain)}/login?jwt=${jwt}&churchId=${churchId}`} selected={props.appName === "B1.church"} external={true} label="B1.Church" icon="logout" router={props.router} />
+      <NavItem url={`${CommonEnvironmentHelper.LessonsRoot}/login?jwt=${jwt}&churchId=${churchId}`} selected={props.appName === "Lessons.church"} external={true} label="Lessons.church" icon="logout" router={props.router} />
+    </>
+  );
+}

package/src/components/material/ChurchList.tsx

@@ -1,22 +1,22 @@
-import React from "react";
-import { LoginUserChurchInterface, UserContextInterface } from "../../interfaces";
-import { UserHelper } from "../../helpers/UserHelper";
-import { NavItem } from "./NavItem";
-
-export interface Props { userChurches: LoginUserChurchInterface[], currentUserChurch: LoginUserChurchInterface, context: UserContextInterface }
-
-export const ChurchList: React.FC<Props> = props => {
-
-  if (props.userChurches.length < 2) return <></>;
-  else {
-    let result: JSX.Element[] = [];
-    const userChurches = props.userChurches.filter(uc => uc.apis.length > 0)
-    userChurches.forEach(uc => {
-      const userChurch = uc;
-      const churchName = uc.church.name;
-      result.push(<NavItem key={userChurch.church.id} selected={(uc.church.id === props.currentUserChurch.church.id) && true} onClick={() => UserHelper.selectChurch(props.context, userChurch.church.id, null)} label={churchName} icon="church" />);
-    });
-
-    return <>{result}</>;
-  }
-};
+import React from "react";
+import { LoginUserChurchInterface, UserContextInterface } from "../../interfaces";
+import { UserHelper } from "../../helpers/UserHelper";
+import { NavItem } from "./NavItem";
+
+export interface Props { userChurches: LoginUserChurchInterface[], currentUserChurch: LoginUserChurchInterface, context: UserContextInterface }
+
+export const ChurchList: React.FC<Props> = props => {
+
+  if (props.userChurches.length < 2) return <></>;
+  else {
+    let result: JSX.Element[] = [];
+    const userChurches = props.userChurches.filter(uc => uc.apis.length > 0)
+    userChurches.forEach(uc => {
+      const userChurch = uc;
+      const churchName = uc.church.name;
+      result.push(<NavItem key={userChurch.church.id} selected={(uc.church.id === props.currentUserChurch.church.id) && true} onClick={() => UserHelper.selectChurch(props.context, userChurch.church.id, null)} label={churchName} icon="church" />);
+    });
+
+    return <>{result}</>;
+  }
+};

package/src/components/material/NavItem.tsx

@@ -1,41 +1,41 @@
-import React from "react";
-import { Icon, ListItemButton, ListItemIcon, ListItemText, styled, Tooltip } from "@mui/material";
-import { NavLink, useLocation } from "react-router-dom";
-
-interface Props {
-  url?: string;
-  target?: string;
-  label: string;
-  icon: string;
-  onClick?: () => void;
-  router?: any;
-  external?: boolean;
-  selected?: boolean;
-}
-
-const StyledNavLink = styled(NavLink)({
-  textDecoration: "none",
-  "&:hover": { textDecoration: "none" },
-  "& .MuiListItemIcon-root": { minWidth: 40 }
-});
-
-export const NavItem: React.FC<Props> = (props) => {
-  let isReact = false;
-  try {
-    const a = typeof useLocation();
-    if (a !== null) isReact = true;
-  } catch { }
-
-  const getIcon = () => <Icon>{props.icon}</Icon>
-
-  const getLinkContents = () => (<ListItemButton>
-    <Tooltip title={props.label || ""} arrow placement="right">
-      <ListItemIcon sx={{ minWidth: "40px" }}>{getIcon()}</ListItemIcon>
-    </Tooltip>
-    <ListItemText primary={props.label} />
-  </ListItemButton>)
-
-  if (props.router) return (<a href={props.url} target={props.target} onClick={(e) => { e.preventDefault(); props.onClick ? props.onClick() : props.router.push(props.url) }} className={(props.selected) ? "selected" : ""}>{getLinkContents()}</a>)
-  else if (props.external || !isReact) return (<a href={props.url} target={props.target} rel="noreferrer" style={{ textDecoration: "none" }} className={(props.selected) ? "selected" : ""} onClick={(e) => { e.preventDefault(); props.onClick ? props.onClick() : window.location.href = props.url }}>{getLinkContents()}</a>)
-  else return (<StyledNavLink to={props.url || "about:blank"} target={props.target} className={(props.selected) ? "selected" : ""} onClick={props.onClick ? (e) => { e.preventDefault(); props.onClick() } : null}>{getLinkContents()}</StyledNavLink>)
-};
+import React from "react";
+import { Icon, ListItemButton, ListItemIcon, ListItemText, styled, Tooltip } from "@mui/material";
+import { NavLink, useLocation } from "react-router-dom";
+
+interface Props {
+  url?: string;
+  target?: string;
+  label: string;
+  icon: string;
+  onClick?: () => void;
+  router?: any;
+  external?: boolean;
+  selected?: boolean;
+}
+
+const StyledNavLink = styled(NavLink)({
+  textDecoration: "none",
+  "&:hover": { textDecoration: "none" },
+  "& .MuiListItemIcon-root": { minWidth: 40 }
+});
+
+export const NavItem: React.FC<Props> = (props) => {
+  let isReact = false;
+  try {
+    const a = typeof useLocation();
+    if (a !== null) isReact = true;
+  } catch { }
+
+  const getIcon = () => <Icon>{props.icon}</Icon>
+
+  const getLinkContents = () => (<ListItemButton>
+    <Tooltip title={props.label || ""} arrow placement="right">
+      <ListItemIcon sx={{ minWidth: "40px" }}>{getIcon()}</ListItemIcon>
+    </Tooltip>
+    <ListItemText primary={props.label} />
+  </ListItemButton>)
+
+  if (props.router) return (<a href={props.url} target={props.target} onClick={(e) => { e.preventDefault(); props.onClick ? props.onClick() : props.router.push(props.url) }} className={(props.selected) ? "selected" : ""}>{getLinkContents()}</a>)
+  else if (props.external || !isReact) return (<a href={props.url} target={props.target} rel="noreferrer" style={{ textDecoration: "none" }} className={(props.selected) ? "selected" : ""} onClick={(e) => { e.preventDefault(); props.onClick ? props.onClick() : window.location.href = props.url }}>{getLinkContents()}</a>)
+  else return (<StyledNavLink to={props.url || "about:blank"} target={props.target} className={(props.selected) ? "selected" : ""} onClick={props.onClick ? (e) => { e.preventDefault(); props.onClick() } : null}>{getLinkContents()}</StyledNavLink>)
+};