@collabchron/notiq 0.2.0

package/src/components/editor/plugins/FloatingTextFormatToolbarPlugin/index.tsx

@@ -0,0 +1,275 @@
+  import {  $isCodeHighlightNode } from "@lexical/code";
+  import { $isLinkNode } from "@lexical/link";
+  import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+  import {
+
+    $findMatchingParent,
+    $getNearestNodeOfType,
+    mergeRegister,
+  } from "@lexical/utils";
+  import {
+    $getSelection,
+    $isParagraphNode,
+    $isRangeSelection,
+    $isRootOrShadowRoot,
+    $isTextNode,
+    getDOMSelection,
+    LexicalEditor,
+  } from "lexical";
+  import { Dispatch, useCallback, useEffect, useState } from "react";
+  import * as React from "react";
+  import { createPortal } from "react-dom";
+
+  import { getSelectedNode } from "../../utils/getSelectedNode";
+
+  import { blockTypeToBlockName } from "@/components/providers/ToolbarContext";
+  // import TextFormatFloatingToolbar from "@/components/ui/floting-text/write/text-format-floting-toolbar";
+  import {
+    $getSelectionStyleValueForProperty,
+  } from "@lexical/selection";
+
+  import { useRef } from "react";
+  import { $isTableNode } from "@lexical/table";
+  import { $isListNode, ListNode } from "@lexical/list";
+  import { $isHeadingNode } from "@lexical/rich-text";
+import TextFormatFloatingToolbar from "@/components/ui/write/text-format-floting-toolbar";
+
+  function useFloatingTextFormatToolbar(
+    editor: LexicalEditor,
+    anchorElem: HTMLElement,
+    setIsLinkEditMode: Dispatch<boolean>
+  ): React.JSX.Element | null {
+    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 [isCode, setIsCode] = useState(false);
+    const [fontColor, setFontColor] = useState<string>("#000000");
+    const [bgColor, setBgColor] = useState<string>("#ffffff");
+    const [fontFamily, setFontFamily] = useState<string>("Arial");
+    const [blockType, setBlockType] =useState<keyof typeof blockTypeToBlockName>("paragraph");
+    const [isUppercase, setIsUppercase] = useState(false);
+    const [isLowercase, setIsLowercase] = useState(false);
+    const [isCapitalize, setIsCapitalize] = useState(false);
+    const [isSubscript, setIsSubscript] = useState(false);
+    const [isSuperscript, setIsSuperscript] = useState(false);
+    const [rootType, setRootType] = useState<"root" | "table">("root");
+    const [textAlign, setTextAlign] = useState<
+      "left" | "center" | "right" | "justify" | null
+    >(null);
+    const [fontSize, setFontSize] = useState<string>("16px");
+
+    const toolbarRef = useRef<HTMLDivElement>(null);
+
+    const updatePopup = useCallback(() => {
+      editor.getEditorState().read(() => {
+        if (editor.isComposing()) {
+          return;
+        }
+        const selection = $getSelection();
+        const nativeSelection = getDOMSelection(editor._window);
+        const rootElement = editor.getRootElement();
+        const aiElement = document.querySelector(".AI-format");
+    
+
+
+      
+        
+        
+        if (
+          nativeSelection &&
+          nativeSelection.anchorNode instanceof HTMLElement &&
+          nativeSelection.anchorNode.closest(".dropdown-portal")
+        ) {
+          return;
+        }
+        
+        if (
+          nativeSelection !== null &&
+          (!$isRangeSelection(selection) ||
+            rootElement === null ||
+            !rootElement.contains(nativeSelection.anchorNode)) && 
+            !toolbarRef?.current?.contains(nativeSelection.anchorNode) && !(aiElement && aiElement.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'));
+        setIsLowercase(selection.hasFormat('lowercase'));
+        setIsUppercase(selection.hasFormat('uppercase'));
+        setIsCapitalize(selection.hasFormat('capitalize'));
+        setIsSubscript(selection.hasFormat('subscript'));
+        setIsSuperscript(selection.hasFormat('superscript'));
+
+        setIsCode(selection.hasFormat('code'));
+        const size = $getSelectionStyleValueForProperty(
+          selection,
+          "font-size",
+          "16px"
+        );
+        setFontSize(size);
+        const alignment = $getSelectionStyleValueForProperty(
+          selection,
+          "text-align",
+          "left"
+        );
+        setTextAlign(alignment as "left" | "center" | "right" | "justify" | null);
+
+        // 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) || $isParagraphNode(node));
+        } else {
+          setIsText(false);
+        }
+
+        const rawTextContent = selection.getTextContent().replace(/\n/g, '');
+        if (!selection.isCollapsed() && rawTextContent === '') {
+          setIsText(false);
+          return;
+        }
+        setFontFamily(
+          $getSelectionStyleValueForProperty(selection, "font-family", "Arial")
+        );
+        setFontColor($getSelectionStyleValueForProperty(selection, "color"));
+        setBgColor(
+          $getSelectionStyleValueForProperty(selection, "background-color")
+        );
+        const tableNode = $findMatchingParent(node, $isTableNode);
+        if ($isTableNode(tableNode)) {
+          setRootType("table");
+        } else {
+          setRootType("root");
+        }
+
+        const anchorNode = selection.anchor.getNode();
+        let element =
+          anchorNode.getKey() === "root"
+            ? anchorNode
+            : $findMatchingParent(anchorNode, (e) => {
+                const parent = e.getParent();
+                return parent !== null && $isRootOrShadowRoot(parent);
+              });
+        if ($isListNode(element)) {
+          const parentList = $getNearestNodeOfType<ListNode>(
+            anchorNode,
+            ListNode
+          );
+
+          const type = parentList
+            ? parentList.getListType()
+            : element.getListType();
+          setBlockType(type);
+        } else {
+          const type = $isHeadingNode(element)
+            ? element.getTag()
+            : // @ts-ignore
+              element.getType();
+          setBlockType(type as keyof typeof blockTypeToBlockName);
+        }
+      });
+    }, [editor]);
+
+    useEffect(() => {
+      const handleSelectionChange = () => {
+        if (toolbarRef.current && toolbarRef.current.contains(document.activeElement)) {
+          return;
+        }
+        updatePopup();
+      };
+
+      document.addEventListener('selectionchange', handleSelectionChange);
+      return () => {
+        document.removeEventListener('selectionchange', handleSelectionChange);
+      };
+    }, [updatePopup]);
+
+    useEffect(() => {
+      return mergeRegister(
+        editor.registerUpdateListener(() => {
+          updatePopup();
+        }),
+        editor.registerRootListener(() => {
+          if (editor.getRootElement() === null) {
+            setIsText(false);
+          }
+        })
+      );
+    }, [editor, updatePopup]);
+
+    
+    
+    if (!isText) {
+      return null;
+    }
+
+    return createPortal(
+      <div ref={toolbarRef}>
+        <TextFormatFloatingToolbar
+          editor={editor}
+          anchorElem={anchorElem}
+          isLink={isLink}
+          isBold={isBold}
+          isItalic={isItalic}
+          isStrikethrough={isStrikethrough}
+          isUnderline={isUnderline}
+          isCode={isCode}
+          fontColor={fontColor}
+          bgColor={bgColor}
+          blockType={blockType}
+          fontFamily={fontFamily}
+          setIsLinkEditMode={setIsLinkEditMode}
+          isUppercase={isUppercase}
+          rootType={rootType}
+          textAlign={textAlign}
+          isLowercase={isLowercase}
+          isCapitalize={isCapitalize}
+          isSubscript={isSubscript}
+          fontSize={fontSize}
+          isSuperscript={isSuperscript}
+          />
+      </div>,
+      anchorElem
+    );
+  }
+
+
+  export default function FloatingTextFormatToolbarPlugin({
+    anchorElem = document.body,
+    setIsLinkEditMode,
+  }: {
+    anchorElem?: HTMLElement;
+    setIsLinkEditMode: Dispatch<boolean>;
+  }): React.JSX.Element | null {
+    const [editor] = useLexicalComposerContext();
+ 
+    return useFloatingTextFormatToolbar(editor, anchorElem, setIsLinkEditMode);
+
+    // if (editor.isEditable())
+    //   return useFloatingTextFormatToolbar(editor, anchorElem, setIsLinkEditMode);
+    // else return useFloatingTextReadMode(editor, anchorElem);
+  }

package/src/components/editor/plugins/ImagesPlugin/index.tsx

@@ -0,0 +1,222 @@
+
+import type { JSX } from "react";
+
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $wrapNodeInElement, mergeRegister } from "@lexical/utils";
+import {
+  $createParagraphNode,
+  $createRangeSelection,
+  $getSelection,
+  $insertNodes,
+  $isNodeSelection,
+  $isRootOrShadowRoot,
+  $setSelection,
+  COMMAND_PRIORITY_EDITOR,
+  COMMAND_PRIORITY_HIGH,
+  COMMAND_PRIORITY_LOW,
+  createCommand,
+  DRAGOVER_COMMAND,
+  DRAGSTART_COMMAND,
+  DROP_COMMAND,
+  getDOMSelectionFromTarget,
+  isHTMLElement,
+  LexicalCommand,
+  LexicalEditor,
+} from "lexical";
+import { useEffect} from "react";
+
+
+import {
+  $createImageNode,
+  $isImageNode,
+  ImageNode,
+  ImagePayload,
+} from "../../nodes/ImageNode";
+
+export type InsertImagePayload = Readonly<ImagePayload>;
+
+export const INSERT_IMAGE_COMMAND: LexicalCommand<InsertImagePayload> =
+  createCommand("INSERT_IMAGE_COMMAND");
+
+
+
+export default function ImagesPlugin({
+  captionsEnabled,
+}: {
+  captionsEnabled?: boolean;
+}): JSX.Element | null {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    if (!editor.hasNodes([ImageNode])) {
+      throw new Error("ImagesPlugin: ImageNode not registered on editor");
+    }
+
+    return mergeRegister(
+      editor.registerCommand<InsertImagePayload>(
+        INSERT_IMAGE_COMMAND,
+        (payload) => {
+          const imageNode = $createImageNode(payload);
+          $insertNodes([imageNode]);
+          if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
+            $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
+          }
+
+          return true;
+        },
+        COMMAND_PRIORITY_EDITOR
+      ),
+      editor.registerCommand<DragEvent>(
+        DRAGSTART_COMMAND,
+        (event) => {
+          return $onDragStart(event);
+        },
+        COMMAND_PRIORITY_HIGH
+      ),
+      editor.registerCommand<DragEvent>(
+        DRAGOVER_COMMAND,
+        (event) => {
+          return $onDragover(event);
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand<DragEvent>(
+        DROP_COMMAND,
+        (event) => {
+          return $onDrop(event, editor);
+        },
+        COMMAND_PRIORITY_HIGH
+      )
+    );
+  }, [captionsEnabled, editor]);
+
+  return null;
+}
+
+const TRANSPARENT_IMAGE =
+  "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+let img: HTMLImageElement | null = null;
+if (typeof window !== "undefined") {
+  img = document.createElement("img");
+  img.src = TRANSPARENT_IMAGE;
+}
+
+function $onDragStart(event: DragEvent): boolean {
+  const node = $getImageNodeInSelection();
+  if (!node) {
+    return false;
+  }
+  const dataTransfer = event.dataTransfer;
+  if (!dataTransfer) {
+    return false;
+  }
+  dataTransfer.setData("text/plain", "_");
+  dataTransfer.setDragImage(img!, 0, 0);
+  dataTransfer.setData(
+    "application/x-lexical-drag",
+    JSON.stringify({
+      data: {
+        altText: node.__altText,
+        caption: node.__caption,
+        height: node.__height,
+        key: node.getKey(),
+        maxWidth: node.__maxWidth,
+        showCaption: node.__showCaption,
+        src: node.__src,
+        width: node.__width,
+      },
+      type: "image",
+    })
+  );
+
+  return true;
+}
+
+function $onDragover(event: DragEvent): boolean {
+  const node = $getImageNodeInSelection();
+  if (!node) {
+    return false;
+  }
+  if (!canDropImage(event)) {
+    event.preventDefault();
+  }
+  return true;
+}
+
+function $onDrop(event: DragEvent, editor: LexicalEditor): boolean {
+  const node = $getImageNodeInSelection();
+  if (!node) {
+    return false;
+  }
+  const data = getDragImageData(event);
+  if (!data) {
+    return false;
+  }
+  event.preventDefault();
+  if (canDropImage(event)) {
+    const range = getDragSelection(event);
+    node.remove();
+    const rangeSelection = $createRangeSelection();
+    if (range !== null && range !== undefined) {
+      rangeSelection.applyDOMRange(range);
+    }
+    $setSelection(rangeSelection);
+    editor.dispatchCommand(INSERT_IMAGE_COMMAND, data);
+  }
+  return true;
+}
+
+function $getImageNodeInSelection(): ImageNode | null {
+  const selection = $getSelection();
+  if (!$isNodeSelection(selection)) {
+    return null;
+  }
+  const nodes = selection.getNodes();
+  const node = nodes[0];
+  return $isImageNode(node) ? node : null;
+}
+
+function getDragImageData(event: DragEvent): null | InsertImagePayload {
+  const dragData = event.dataTransfer?.getData("application/x-lexical-drag");
+  if (!dragData) {
+    return null;
+  }
+  const { type, data } = JSON.parse(dragData);
+  if (type !== "image") {
+    return null;
+  }
+
+  return data;
+}
+
+declare global {
+  interface DragEvent {
+    rangeOffset?: number;
+    rangeParent?: Node;
+  }
+}
+
+function canDropImage(event: DragEvent): boolean {
+  const target = event.target;
+  return !!(
+    isHTMLElement(target) &&
+    !target.closest("code, span.editor-image") &&
+    isHTMLElement(target.parentElement) &&
+    target.parentElement.closest("div.ContentEditable__root")
+  );
+}
+
+function getDragSelection(event: DragEvent): Range | null | undefined {
+  let range;
+  const domSelection = getDOMSelectionFromTarget(event.target);
+  if (document.caretRangeFromPoint) {
+    range = document.caretRangeFromPoint(event.clientX, event.clientY);
+  } else if (event.rangeParent && domSelection !== null) {
+    domSelection.collapse(event.rangeParent, event.rangeOffset || 0);
+    range = domSelection.getRangeAt(0);
+  } else {
+    throw Error(`Cannot get the selection when dragging`);
+  }
+
+  return range;
+}