@collabchron/notiq 0.2.0 → 1.0.0

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

@@ -1,85 +0,0 @@
-/**
- * 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 {JSX} from 'react';
-
-import 'katex/dist/katex.css';
-
-import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {$wrapNodeInElement} from '@lexical/utils';
-import {
-  $createParagraphNode,
-  $insertNodes,
-  $isRootOrShadowRoot,
-  COMMAND_PRIORITY_EDITOR,
-  createCommand,
-  LexicalCommand,
-  LexicalEditor,
-} from 'lexical';
-import {useCallback, useEffect} from 'react';
-import * as React from 'react';
-
-import {$createEquationNode, EquationNode} from '../../nodes/EquationNode/EquationNode';
-import KatexEquationAlterer from '@/components/ui/equation/KatexEquationAlterer';
-
-
-type CommandPayload = {
-  equation: string;
-  inline: boolean;
-};
-
-export const INSERT_EQUATION_COMMAND: LexicalCommand<CommandPayload> =
-  createCommand('INSERT_EQUATION_COMMAND');
-
-export function InsertEquationDialog({
-  activeEditor,
-  onClose,
-}: {
-  activeEditor: LexicalEditor;
-  onClose: () => void;
-}): JSX.Element {
-  const onEquationConfirm = useCallback(
-    (equation: string, inline: boolean) => {
-      activeEditor.dispatchCommand(INSERT_EQUATION_COMMAND, {equation, inline});
-      onClose();
-    },
-    [activeEditor, onClose],
-  );
-
-  return <KatexEquationAlterer onConfirm={onEquationConfirm} />;
-}
-
-export default function EquationsPlugin(): JSX.Element | null {
-  const [editor] = useLexicalComposerContext();
-
-  useEffect(() => {
-    if (!editor.hasNodes([EquationNode])) {
-      throw new Error(
-        'EquationsPlugins: EquationsNode not registered on editor',
-      );
-    }
-
-    return editor.registerCommand<CommandPayload>(
-      INSERT_EQUATION_COMMAND,
-      (payload) => {
-        const {equation, inline} = payload;
-        const equationNode = $createEquationNode(equation, inline);
-
-        $insertNodes([equationNode]);
-        if ($isRootOrShadowRoot(equationNode.getParentOrThrow())) {
-          $wrapNodeInElement(equationNode, $createParagraphNode).selectEnd();
-        }
-
-        return true;
-      },
-      COMMAND_PRIORITY_EDITOR,
-    );
-  }, [editor]);
-
-  return null;
-}

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

@@ -1,98 +0,0 @@
-/**
- * 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 {AppState, BinaryFiles} from '@excalidraw/excalidraw/types';
-import type {JSX} from 'react';
-
-import '@excalidraw/excalidraw/index.css';
-
-import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {$wrapNodeInElement} from '@lexical/utils';
-import {
-  $createParagraphNode,
-  $insertNodes,
-  $isRootOrShadowRoot,
-  COMMAND_PRIORITY_EDITOR,
-  createCommand,
-  LexicalCommand,
-} from 'lexical';
-import {useEffect, useState} from 'react';
-
-import {
-  $createExcalidrawNode,
-  ExcalidrawNode,
-} from '../../nodes/ExcalidrawNode';
-import ExcalidrawModal, { ExcalidrawInitialElements } from '@/components/ui/excalidraw/ExcalidrawModal';
-
-export const INSERT_EXCALIDRAW_COMMAND: LexicalCommand<void> = createCommand(
-  'INSERT_EXCALIDRAW_COMMAND',
-);
-
-export default function ExcalidrawPlugin(): JSX.Element | null {
-  const [editor] = useLexicalComposerContext();
-  const [isModalOpen, setModalOpen] = useState<boolean>(false);
-
-  useEffect(() => {
-    if (!editor.hasNodes([ExcalidrawNode])) {
-      throw new Error(
-        'ExcalidrawPlugin: ExcalidrawNode not registered on editor',
-      );
-    }
-
-    return editor.registerCommand(
-      INSERT_EXCALIDRAW_COMMAND,
-      () => {
-        setModalOpen(true);
-        return true;
-      },
-      COMMAND_PRIORITY_EDITOR,
-    );
-  }, [editor]);
-
-  const onClose = () => {
-    setModalOpen(false);
-  };
-
-  const onDelete = () => {
-    setModalOpen(false);
-  };
-
-  const onSave = (
-    elements: ExcalidrawInitialElements,
-    appState: Partial<AppState>,
-    files: BinaryFiles,
-  ) => {
-    editor.update(() => {
-      const excalidrawNode = $createExcalidrawNode();
-      excalidrawNode.setData(
-        JSON.stringify({
-          appState,
-          elements,
-          files,
-        }),
-      );
-      $insertNodes([excalidrawNode]);
-      if ($isRootOrShadowRoot(excalidrawNode.getParentOrThrow())) {
-        $wrapNodeInElement(excalidrawNode, $createParagraphNode).selectEnd();
-      }
-    });
-    setModalOpen(false);
-  };
-
-  return isModalOpen ? (
-    <ExcalidrawModal
-      initialElements={[]}
-      initialAppState={{} as AppState}
-      initialFiles={{}}
-      isShown={isModalOpen}
-      onDelete={onDelete}
-      onClose={onClose}
-      onSave={onSave}
-      closeOnClickOutside={false}
-    />
-  ) : null;
-}

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

@@ -1,42 +0,0 @@
-/**
- * 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 {JSX} from 'react';
-
-import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {$insertNodeToNearestRoot} from '@lexical/utils';
-import {COMMAND_PRIORITY_EDITOR, createCommand, LexicalCommand} from 'lexical';
-import {useEffect} from 'react';
-
-import {$createFigmaNode, FigmaNode} from '../../nodes/FigmaNode/FigmaNode';
-
-export const INSERT_FIGMA_COMMAND: LexicalCommand<string> = createCommand(
-  'INSERT_FIGMA_COMMAND',
-);
-
-export default function FigmaPlugin(): JSX.Element | null {
-  const [editor] = useLexicalComposerContext();
-
-  useEffect(() => {
-    if (!editor.hasNodes([FigmaNode])) {
-      throw new Error('FigmaPlugin: FigmaNode not registered on editor');
-    }
-
-    return editor.registerCommand<string>(
-      INSERT_FIGMA_COMMAND,
-      (payload) => {
-        const figmaNode = $createFigmaNode(payload);
-        $insertNodeToNearestRoot(figmaNode);
-        return true;
-      },
-      COMMAND_PRIORITY_EDITOR,
-    );
-  }, [editor]);
-
-  return null;
-}

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

@@ -1,445 +0,0 @@
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { Dispatch, JSX, useCallback, useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import { getSelectedNode } from "../../utils/getSelectedNode";
-import {
-  $createLinkNode,
-  $isAutoLinkNode,
-  $isLinkNode,
-  TOGGLE_LINK_COMMAND,
-} from "@lexical/link";
-import { $findMatchingParent, mergeRegister } from "@lexical/utils";
-import {
-  $getSelection,
-  $isLineBreakNode,
-  $isRangeSelection,
-  BaseSelection,
-  CLICK_COMMAND,
-  COMMAND_PRIORITY_CRITICAL,
-  COMMAND_PRIORITY_HIGH,
-  COMMAND_PRIORITY_LOW,
-  getDOMSelection,
-  KEY_ESCAPE_COMMAND,
-  LexicalEditor,
-  SELECTION_CHANGE_COMMAND,
-} from "lexical";
-import {  sanitizeUrl } from "../../utils/url";
-import { setFloatingElemPositionForLinkEditor } from "../../utils/setFloatingElemPositionForLinkEditor";
-import { Input } from "@/components/ui/input";
-import { Check, Edit2Icon, Link, X } from "lucide-react";
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
-
-function preventDefault(
-  event: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLElement>
-): void {
-  event.preventDefault();
-}
-
-function FloatingLinkEditor({
-  editor,
-  isLink,
-  setIsLink,
-  anchorElem,
-  isLinkEditMode,
-  setIsLinkEditMode,
-}: {
-  editor: LexicalEditor;
-  isLink: boolean;
-  setIsLink: Dispatch<boolean>;
-  anchorElem: HTMLElement;
-  isLinkEditMode: boolean;
-  setIsLinkEditMode: Dispatch<boolean>;
-}): JSX.Element {
-  const editorRef = useRef<HTMLDivElement | null>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [linkUrl, setLinkUrl] = useState("");
-  const [editedLinkUrl, setEditedLinkUrl] = useState("https://");
-  const [lastSelection, setLastSelection] = useState<BaseSelection | null>(
-    null
-  );
-
-  const [urlLogo, setUrlLogo] = useState<string | null>(null);
-
-  const $updateLinkEditor = useCallback(() => {
-    const selection = $getSelection();
-    if ($isRangeSelection(selection)) {
-      const node = getSelectedNode(selection);
-      const linkParent = $findMatchingParent(node, $isLinkNode);
-
-      if (linkParent) {
-        setLinkUrl(linkParent.getURL());
-      } else if ($isLinkNode(node)) {
-        setLinkUrl(node.getURL());
-      } else {
-        setLinkUrl("");
-      }
-      if (isLinkEditMode) {
-        setEditedLinkUrl(linkUrl);
-      }
-    }
-    const editorElem = editorRef.current;
-    const nativeSelection = getDOMSelection(editor._window);
-    const activeElement = document.activeElement;
-
-    if (editorElem === null) {
-      return;
-    }
-
-    const rootElement = editor.getRootElement();
-
-    if (
-      selection !== null &&
-      nativeSelection !== null &&
-      rootElement !== null &&
-      rootElement.contains(nativeSelection.anchorNode) &&
-      editor.isEditable()
-    ) {
-      const domRect: DOMRect | undefined =
-        nativeSelection.focusNode?.parentElement?.getBoundingClientRect();
-      if (domRect) {
-        domRect.y += 40;
-        setFloatingElemPositionForLinkEditor(domRect, editorElem, anchorElem);
-      }
-      setLastSelection(selection);
-    } else if (!activeElement || activeElement.className !== "link-input") {
-      if (rootElement !== null) {
-        setFloatingElemPositionForLinkEditor(null, editorElem, anchorElem);
-      }
-      setLastSelection(null);
-      setIsLinkEditMode(false);
-      setLinkUrl("");
-    }
-
-    return true;
-  }, [anchorElem, editor, setIsLinkEditMode, isLinkEditMode, linkUrl]);
-
-  useEffect(() => {
-    const scrollerElem = anchorElem.parentElement;
-
-    const update = () => {
-      editor.getEditorState().read(() => {
-        $updateLinkEditor();
-      });
-    };
-
-    window.addEventListener("resize", update);
-
-    if (scrollerElem) {
-      scrollerElem.addEventListener("scroll", update);
-    }
-
-    return () => {
-      window.removeEventListener("resize", update);
-
-      if (scrollerElem) {
-        scrollerElem.removeEventListener("scroll", update);
-      }
-    };
-  }, [anchorElem.parentElement, editor, $updateLinkEditor]);
-
-  useEffect(() => {
-    return mergeRegister(
-      editor.registerUpdateListener(({ editorState }) => {
-        editorState.read(() => {
-          $updateLinkEditor();
-        });
-      }),
-
-      editor.registerCommand(
-        SELECTION_CHANGE_COMMAND,
-        () => {
-          $updateLinkEditor();
-          return true;
-        },
-        COMMAND_PRIORITY_LOW
-      ),
-      editor.registerCommand(
-        KEY_ESCAPE_COMMAND,
-        () => {
-          if (isLink) {
-            setIsLink(false);
-            return true;
-          }
-          return false;
-        },
-        COMMAND_PRIORITY_HIGH
-      )
-    );
-  }, [editor, $updateLinkEditor, setIsLink, isLink]);
-
-  useEffect(() => {
-    editor.getEditorState().read(() => {
-      $updateLinkEditor();
-    });
-  }, [editor, $updateLinkEditor]);
-
-  useEffect(() => {
-    if (isLinkEditMode && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [isLinkEditMode, isLink]);
-
-  const monitorInputInteraction = (
-    event: React.KeyboardEvent<HTMLInputElement>
-  ) => {
-    if (event.key === "Enter") {
-      handleLinkSubmission(event);
-    } else if (event.key === "Escape") {
-      event.preventDefault();
-      setIsLinkEditMode(false);
-    }
-  };
-
-  const handleLinkSubmission =  (
-    event: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLElement>
-  ) => {
-    event.preventDefault();
-
-    if (lastSelection !== null) {
-      if (linkUrl !== "") {
-        editor.update( () => {
-          editor.dispatchCommand(
-            TOGGLE_LINK_COMMAND,
-            sanitizeUrl(editedLinkUrl)
-          );
-
-          const selection = $getSelection();
-          if ($isRangeSelection(selection)) {
-            const parent = getSelectedNode(selection).getParent();
-            if ($isAutoLinkNode(parent)) {
-              const linkNode = $createLinkNode(parent.getURL(), {
-                rel: parent.__rel,
-                target: parent.__target,
-                title: parent.__title,
-              });
-              parent.replace(linkNode, true);
-            }
-          }
-        });
-      }
-      // Fetch metadata asynchronously AFTER editor update
-      setEditedLinkUrl("https://");
-    
-      setIsLinkEditMode(false);
-    }
-  };
-
-  return (
-    <div
-      ref={editorRef}
-      className=" absolute max-w-96 bg-background max-sm:mx-1 w-full  border-0 top-0 left-0"
-    >
-      {isLinkEditMode ? (
-        <div className=" relative w-full">
-          <Link
-            className={cn(
-              "size-[14px] text-muted-foreground absolute  transition-colors duration-500 transform -translate-x-1/2 -translate-y-1/2 left-4 top-1/2",
-              !!editedLinkUrl && "text-black dark:text-white"
-            )}
-          />
-          <Input
-            placeholder="https://"
-            value={editedLinkUrl}
-            onChange={(event) => {
-              setEditedLinkUrl(event.target.value);
-            }}
-            onKeyDown={(event) => {
-              monitorInputInteraction(event);
-            }}
-            ref={inputRef}
-            className="text-gray-900 pl-7 dark:text-gray-100 rounded-xl placeholder-gray-400 dark:placeholder-gray-500"
-          />
-          <div className=" absolute  bg-background rounded-xl  flex flex-row  gap-x-1 items-center  transition-colors duration-500 transform -translate-y-1/2 right-2 top-1/2">
-            <Button
-              className=" rounded-xl h-6 w-6 flex items-center"
-              role="button"
-              variant={"destructive"}
-              size={"Toolbar"}
-              tip="delete link"
-              tabIndex={0}
-              onMouseDown={preventDefault}
-              onClick={() => {
-                setIsLinkEditMode(false);
-              }}
-            >
-              <X />
-            </Button>
-            <Button
-              className=" rounded-xl h-6 w-6 flex items-center"
-              role="button"
-              tabIndex={0}
-              tip="confirm link"
-              onMouseDown={preventDefault}
-              onClick={handleLinkSubmission}
-              size={"Toolbar"}
-            >
-              <Check />
-            </Button>
-          </div>
-        </div>
-      ) : (
-        <div className="w-full border-input border rounded-xl h-9 flex items-center justify-between px-3 py-1 text-base shadow-sm ">
-          <Link
-            className={cn(
-              "size-[14px] text-muted-foreground absolute  transition-colors duration-500 transform -translate-x-1/2 -translate-y-1/2 left-4 top-1/2",
-              !!editedLinkUrl && "text-black dark:text-white"
-            )}
-          />
-          <a
-            href={sanitizeUrl(linkUrl)}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="pl-4 mb-[1px]"
-          >
-            {linkUrl}
-          </a>
-          <div className=" absolute  bg-background rounded-xl  flex flex-row  gap-x-1 items-center  transition-colors duration-500 transform -translate-y-1/2 right-2 top-1/2">
-            <Button
-              className=" rounded-xl z-50 h-6 w-6 flex items-center"
-              role="button"
-              size={"Toolbar"}
-              tip="edit link"
-              tabIndex={0}
-              onMouseDown={preventDefault}
-              onClick={(event) => {
-                event.preventDefault();
-                setEditedLinkUrl(linkUrl);
-                setIsLinkEditMode(true);
-              }}
-            >
-              <Edit2Icon className="size-4" />
-            </Button>
-            <Button
-              className=" rounded-xl h-6 w-6 flex items-center"
-              role="button"
-              tabIndex={0}
-              variant={"secondary"}
-              tip="delet link"
-              size={"Toolbar"}
-              onMouseDown={preventDefault}
-              onClick={() => {
-                editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
-              }}
-            >
-              <X />
-            </Button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-function useFloatingLinkEditorToolbar(
-  editor: LexicalEditor,
-  anchorElem: HTMLElement,
-  isLinkEditMode: boolean,
-  setIsLinkEditMode: Dispatch<boolean>
-): JSX.Element | null {
-  const [activeEditor, setActiveEditor] = useState(editor);
-  const [isLink, setIsLink] = useState(false);
-
-  useEffect(() => {
-    function $updateToolbar() {
-      const selection = $getSelection();
-      if ($isRangeSelection(selection)) {
-        const focusNode = getSelectedNode(selection);
-        const focusLinkNode = $findMatchingParent(focusNode, $isLinkNode);
-        const focusAutoLinkNode = $findMatchingParent(
-          focusNode,
-          $isAutoLinkNode
-        );
-        if (!(focusLinkNode || focusAutoLinkNode)) {
-          setIsLink(false);
-          return;
-        }
-        const badNode = selection
-          .getNodes()
-          .filter((node) => !$isLineBreakNode(node))
-          .find((node) => {
-            const linkNode = $findMatchingParent(node, $isLinkNode);
-            const autoLinkNode = $findMatchingParent(node, $isAutoLinkNode);
-            return (
-              (focusLinkNode && !focusLinkNode.is(linkNode)) ||
-              (linkNode && !linkNode.is(focusLinkNode)) ||
-              (focusAutoLinkNode && !focusAutoLinkNode.is(autoLinkNode)) ||
-              (autoLinkNode &&
-                (!autoLinkNode.is(focusAutoLinkNode) ||
-                  autoLinkNode.getIsUnlinked()))
-            );
-          });
-        if (!badNode) {
-          setIsLink(true);
-        } else {
-          setIsLink(false);
-        }
-      }
-    }
-    return mergeRegister(
-      editor.registerUpdateListener(({ editorState }) => {
-        editorState.read(() => {
-          $updateToolbar();
-        });
-      }),
-      editor.registerCommand(
-        SELECTION_CHANGE_COMMAND,
-        (_payload, newEditor) => {
-          $updateToolbar();
-          setActiveEditor(newEditor);
-          return false;
-        },
-        COMMAND_PRIORITY_CRITICAL
-      ),
-      editor.registerCommand(
-        CLICK_COMMAND,
-        (payload) => {
-          const selection = $getSelection();
-          if ($isRangeSelection(selection)) {
-            const node = getSelectedNode(selection);
-            const linkNode = $findMatchingParent(node, $isLinkNode);
-            if ($isLinkNode(linkNode) && (payload.metaKey || payload.ctrlKey)) {
-              window.open(linkNode.getURL(), "_blank");
-              return true;
-            }
-          }
-          return false;
-        },
-        COMMAND_PRIORITY_LOW
-      )
-    );
-  }, [editor]);
-
-  if (!isLink) return null;
-
-  return createPortal(
-    <FloatingLinkEditor
-      editor={activeEditor}
-      isLink={isLink}
-      anchorElem={anchorElem}
-      setIsLink={setIsLink}
-      isLinkEditMode={isLinkEditMode}
-      setIsLinkEditMode={setIsLinkEditMode}
-    />,
-    anchorElem
-  );
-}
-
-export default function FloatingLinkEditorPlugin({
-  anchorElem = document.body,
-  isLinkEditMode,
-  setIsLinkEditMode,
-}: {
-  anchorElem?: HTMLElement;
-  isLinkEditMode: boolean;
-  setIsLinkEditMode: Dispatch<boolean>;
-}): JSX.Element | null {
-  const [editor] = useLexicalComposerContext();
-
-  
-  return useFloatingLinkEditorToolbar(
-    editor,
-    anchorElem,
-    isLinkEditMode,
-    setIsLinkEditMode
-  );
-}