@churchapps/apphelper 0.4.12 → 0.4.17

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

@@ -1,445 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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/ListMaxIndentLevelPlugin.tsx

@@ -1,68 +0,0 @@
-import { $getListDepth, $isListItemNode, $isListNode } from "@lexical/list";
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import {
-  $getSelection,
-  $isElementNode,
-  $isRangeSelection,
-  INDENT_CONTENT_COMMAND,
-  COMMAND_PRIORITY_HIGH
-} from "lexical";
-import { useEffect } from "react";
-
-function getElementNodesInSelection(selection: any) {
-  const nodesInSelection = selection.getNodes();
-
-  if (nodesInSelection.length === 0) {
-    return new Set([
-      selection.anchor.getNode().getParentOrThrow(),
-      selection.focus.getNode().getParentOrThrow()
-    ]);
-  }
-
-  return new Set(
-    nodesInSelection.map((n: any) => ($isElementNode(n) ? n : n.getParentOrThrow()))
-  );
-}
-
-function isIndentPermitted(maxDepth: any) {
-  const selection = $getSelection();
-
-  if (!$isRangeSelection(selection)) {
-    return false;
-  }
-
-  const elementNodesInSelection = getElementNodesInSelection(selection);
-
-  let totalDepth = 0;
-  // @ts-ignore
-  for (const elementNode of elementNodesInSelection) {
-    if ($isListNode(elementNode)) {
-      totalDepth = Math.max($getListDepth(elementNode) + 1, totalDepth);
-    } else if ($isListItemNode(elementNode)) {
-      const parent = elementNode.getParent();
-      if (!$isListNode(parent)) {
-        throw new Error(
-          "ListMaxIndentLevelPlugin: A ListItemNode must have a ListNode for a parent."
-        );
-      }
-
-      totalDepth = Math.max($getListDepth(parent) + 1, totalDepth);
-    }
-  }
-
-  return totalDepth <= maxDepth;
-}
-
-export function ListMaxIndentLevelPlugin(data: any): any {
-  const [editor] = useLexicalComposerContext();
-
-  useEffect(() => (
-    editor.registerCommand(
-      INDENT_CONTENT_COMMAND,
-      () => !isIndentPermitted(data.maxDepth ?? 7),
-      COMMAND_PRIORITY_HIGH
-    )
-  ), [editor, data.maxDepth]);
-
-  return null;
-}

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

@@ -1,106 +0,0 @@
-import type { ElementTransformer, Transformer } from "@lexical/markdown";
-import type { LexicalNode, TextFormatType } from "lexical";
-
-import {
-  ELEMENT_TRANSFORMERS,
-  TEXT_FORMAT_TRANSFORMERS,
-  TRANSFORMERS
-} from "@lexical/markdown";
-import {
-  $createHorizontalRuleNode,
-  $isHorizontalRuleNode,
-  HorizontalRuleNode
-} from "@lexical/react/LexicalHorizontalRuleNode";
-import { CUSTOM_LINK_NODE_TRANSFORMER } from "./customLink/CustomLinkNodeTransformer";
-import { EMOJI_NODE_MARKDOWN_TRANSFORM } from "./emoji/EmojiNodeTransform";
-
-
-export const HR: ElementTransformer = {
-  dependencies: [HorizontalRuleNode],
-  export: (node: LexicalNode) => ($isHorizontalRuleNode(node) ? "***" : null),
-  regExp: /^(---|\*\*\*|___)\s?$/,
-  replace: (parentNode, _1, _2, isImport) => {
-    const line = $createHorizontalRuleNode();
-
-    // TODO: Get rid of isImport flag
-    if (isImport || parentNode.getNextSibling() != null) {
-      parentNode.replace(line);
-    } else {
-      parentNode.insertBefore(line);
-    }
-
-    line.selectNext();
-  },
-  type: "element"
-};
-
-export type TextFormatTransformer = Readonly<{
-  format: ReadonlyArray<TextFormatType>;
-  tag: string;
-  intraword?: boolean;
-  type: "text-format";
-}>;
-/*
-export type TextMatchTransformer = Readonly<{
-  dependencies: Array<Klass<LexicalNode>>;
-  export: (
-    node: LexicalNode,
-    // eslint-disable-next-line no-shadow
-    exportChildren: (node: ElementNode) => string,
-    // eslint-disable-next-line no-shadow
-    exportFormat: (node: TextNode, textContent: string) => string,
-  ) => string | null;
-  importRegExp: RegExp;
-  regExp: RegExp;
-  replace: (node: TextNode, match: RegExpMatchArray) => void;
-  trigger: string;
-  type: 'text-match';
-}>;
-*/
-
-export const UNDERLINE: TextFormatTransformer = {
-  format: ["underline"],
-  intraword: false,
-  tag: "__",
-  type: "text-format"
-};
-/*
-export const UNDERLINE: TextMatchTransformer = {
-  dependencies: [],
-  export: (node, exportChildren, exportFormat) => {
-    const linkContent = `[${node.getTextContent()}](${node.getURL()})`;
-    const firstChild = node.getFirstChild();
-    // Add text styles only if link has single text node inside. If it's more
-    // then one we ignore it as markdown does not support nested styles for links
-    if (node.getChildrenSize() === 1 && $isTextNode(firstChild)) {
-      return exportFormat(firstChild, linkContent);
-    } else {
-      return linkContent;
-    }
-  },
-  importRegExp: /(?:\[([^[]+)\])(?:\(([^()]+)\))/,
-  regExp: /(?:\[([^[]+)\])(?:\(([^()]+)\))$/,
-  replace: (textNode, match) => {
-    const [, linkText, linkUrl] = match;
-    const linkNode = $createLinkNode(linkUrl);
-    const linkTextNode = $createTextNode(linkText);
-    linkTextNode.setFormat(textNode.getFormat());
-    linkNode.append(linkTextNode);
-    textNode.replace(linkNode);
-  },
-  trigger: ')',
-  type: 'text-match',
-};
-*/
-
-const modifiedTextTransformers = [EMOJI_NODE_MARKDOWN_TRANSFORM];
-
-export const PLAYGROUND_TRANSFORMERS: Array<Transformer> = [
-  ...modifiedTextTransformers,
-  HR,
-  ...ELEMENT_TRANSFORMERS,
-
-  CUSTOM_LINK_NODE_TRANSFORMER,
-  ...TRANSFORMERS.splice(0, 13),
-  UNDERLINE,
-];

package/src/components/markdownEditor/plugins/ReadOnlyPlugin.tsx

@@ -1,15 +0,0 @@
-import { useEffect } from "react";
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-
-interface Props {
-  isDisabled?: boolean
-}
-
-// When isDisabled true, set active editor in ReadOnly mode preventing changes
-export function ReadOnlyPlugin(props: Props): any {
-  const [editor] = useLexicalComposerContext();
-
-  useEffect(() => { editor.setEditable(!props.isDisabled); }, [editor, props.isDisabled]);
-
-  return null;
-}