@churchapps/apphelper 0.3.16 → 0.3.17

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,
 ];