@collabchron/notiq 0.2.0

package/src/components/editor/plugins/CollapsiblePlugin/index.ts

@@ -0,0 +1,228 @@
+import "./Collapsible.css";
+
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $findMatchingParent, mergeRegister } from "@lexical/utils";
+import {
+  $createParagraphNode,
+  $getNodeByKey,
+  $getPreviousSelection,
+  $getSelection,
+  $isElementNode,
+  $isRangeSelection,
+  $setSelection,
+  COMMAND_PRIORITY_EDITOR,
+  COMMAND_PRIORITY_LOW,
+  createCommand,
+  DELETE_CHARACTER_COMMAND,
+  INSERT_PARAGRAPH_COMMAND,
+  KEY_ARROW_DOWN_COMMAND,
+  NodeKey
+} from "lexical";
+import { JSX, useEffect } from "react";
+
+import {
+  $createCollapsibleContainerNode,
+  $isCollapsibleContainerNode,
+  CollapsibleContainerNode
+} from "../../nodes/CollapsibleNode/CollapsibleContainerNode";
+import {
+  $createCollapsibleContentNode,
+  $isCollapsibleContentNode,
+  CollapsibleContentNode
+} from "../../nodes/CollapsibleNode/CollapsibleContentNode";
+import {
+  $createCollapsibleTitleNode,
+  $isCollapsibleTitleNode,
+  CollapsibleTitleNode
+} from "../../nodes/CollapsibleNode/CollapsibleTitleNode";
+
+export const INSERT_COLLAPSIBLE_COMMAND = createCommand<void>();
+export const TOGGLE_COLLAPSIBLE_COMMAND = createCommand<NodeKey>();
+
+export default function CollapsiblePlugin(): JSX.Element | null {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    if (
+      !editor.hasNodes([
+        CollapsibleContainerNode,
+        CollapsibleTitleNode,
+        CollapsibleContentNode
+      ])
+    ) {
+      throw new Error(
+        "CollapsiblePlugin: CollapsibleContainerNode, CollapsibleTitleNode, or CollapsibleContentNode not registered on editor"
+      );
+    }
+
+    return mergeRegister(
+      // Structure enforcing transformers for each node type. In case nesting structure is not
+      // "Container > Title + Content" it'll unwrap nodes and convert it back
+      // to regular content.
+      editor.registerNodeTransform(CollapsibleContentNode, (node) => {
+        const parent = node.getParent();
+        if (!$isCollapsibleContainerNode(parent)) {
+          const children = node.getChildren();
+          for (const child of children) {
+            node.insertAfter(child);
+          }
+          node.remove();
+        }
+      }),
+      editor.registerNodeTransform(CollapsibleTitleNode, (node) => {
+        const parent = node.getParent();
+        if (!$isCollapsibleContainerNode(parent)) {
+          node.replace($createParagraphNode().append(...node.getChildren()));
+        }
+      }),
+      editor.registerNodeTransform(CollapsibleContainerNode, (node) => {
+        const children = node.getChildren();
+        if (
+          children.length !== 2 ||
+          !$isCollapsibleTitleNode(children[0]) ||
+          !$isCollapsibleContentNode(children[1])
+        ) {
+          for (const child of children) {
+            node.insertAfter(child);
+          }
+          node.remove();
+        }
+      }),
+      // This handles the case when container is collapsed and we delete its previous sibling
+      // into it, it would cause collapsed content deleted (since it's display: none, and selection
+      // swallows it when deletes single char). Instead we expand container, which is although
+      // not perfect, but avoids bigger problem
+      editor.registerCommand(
+        DELETE_CHARACTER_COMMAND,
+        () => {
+          const selection = $getSelection();
+          if (
+            !$isRangeSelection(selection) ||
+            !selection.isCollapsed() ||
+            selection.anchor.offset !== 0
+          ) {
+            return false;
+          }
+
+          const anchorNode = selection.anchor.getNode();
+          const topLevelElement = anchorNode.getTopLevelElement();
+          if (topLevelElement === null) {
+            return false;
+          }
+
+          const container = topLevelElement.getPreviousSibling();
+          if (!$isCollapsibleContainerNode(container) || container.getOpen()) {
+            return false;
+          }
+
+          container.setOpen(true);
+          return true;
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      // When collapsible is the last child pressing down arrow will insert paragraph
+      // below it to allow adding more content. It's similar what $insertBlockNode
+      // (mainly for decorators), except it'll always be possible to continue adding
+      // new content even if trailing paragraph is accidentally deleted
+      editor.registerCommand(
+        KEY_ARROW_DOWN_COMMAND,
+        () => {
+          const selection = $getSelection();
+          if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+            return false;
+          }
+
+          const container = $findMatchingParent(
+            selection.anchor.getNode(),
+            $isCollapsibleContainerNode
+          );
+
+          if (container === null) {
+            return false;
+          }
+
+          const parent = container.getParent();
+          if (parent !== null && parent.getLastChild() === container) {
+            parent.append($createParagraphNode());
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      // Handling CMD+Enter to toggle collapsible element collapsed state
+      editor.registerCommand(
+        INSERT_PARAGRAPH_COMMAND,
+        () => {
+          // @ts-ignore
+          const windowEvent: KeyboardEvent | undefined = editor._window?.event;
+
+          if (
+            windowEvent &&
+            (windowEvent.ctrlKey || windowEvent.metaKey) &&
+            windowEvent.key === "Enter"
+          ) {
+            const selection = $getPreviousSelection();
+            if ($isRangeSelection(selection) && selection.isCollapsed()) {
+              const parent = $findMatchingParent(
+                selection.anchor.getNode(),
+                (node) => $isElementNode(node) && !node.isInline()
+              );
+
+              if ($isCollapsibleTitleNode(parent)) {
+                const container = parent.getParent();
+                if ($isCollapsibleContainerNode(container)) {
+                  container.toggleOpen();
+                  $setSelection(selection.clone());
+                  return true;
+                }
+              }
+            }
+          }
+
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(
+        INSERT_COLLAPSIBLE_COMMAND,
+        () => {
+          editor.update(() => {
+            const selection = $getSelection();
+
+            if (!$isRangeSelection(selection)) {
+              return;
+            }
+
+            const title = $createCollapsibleTitleNode();
+            const content = $createCollapsibleContentNode().append(
+              $createParagraphNode()
+            );
+            const container = $createCollapsibleContainerNode().append(
+              title,
+              content
+            );
+            selection.insertNodes([container]);
+            title.selectStart();
+          });
+
+          return true;
+        },
+        COMMAND_PRIORITY_EDITOR
+      ),
+      editor.registerCommand(
+        TOGGLE_COLLAPSIBLE_COMMAND,
+        (key: NodeKey) => {
+          editor.update(() => {
+            const containerNode = $getNodeByKey(key);
+            if ($isCollapsibleContainerNode(containerNode)) {
+              containerNode.toggleOpen();
+            }
+          });
+
+          return true;
+        },
+        COMMAND_PRIORITY_EDITOR
+      )
+    );
+  }, [editor]);
+  return null;
+}

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

@@ -0,0 +1,44 @@
+
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {DRAG_DROP_PASTE} from '@lexical/rich-text';
+import {isMimeType, mediaFileReader} from '@lexical/utils';
+import {COMMAND_PRIORITY_LOW} from 'lexical';
+import {useEffect} from 'react';
+
+import {INSERT_IMAGE_COMMAND} from '../ImagesPlugin';
+
+const ACCEPTABLE_IMAGE_TYPES = [
+  'image/',
+  'image/heic',
+  'image/heif',
+  'image/gif',
+  'image/webp',
+];
+
+export default function DragDropPaste(): null {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    return editor.registerCommand(
+      DRAG_DROP_PASTE,
+      (files) => {
+        (async () => {
+          const filesResult = await mediaFileReader(
+            files,
+            [ACCEPTABLE_IMAGE_TYPES].flatMap((x) => x),
+          );
+          for (const {file, result} of filesResult) {
+            if (isMimeType(file, ACCEPTABLE_IMAGE_TYPES)) {
+              editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
+                altText: file.name,
+                src: result,
+              });
+            }
+          }
+        })();
+        return true;
+      },
+      COMMAND_PRIORITY_LOW,
+    );
+  }, [editor]);
+  return null;
+}

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

@@ -0,0 +1,52 @@
+import { cn } from '@/lib/utils';
+import {DraggableBlockPlugin_EXPERIMENTAL} from '@lexical/react/LexicalDraggableBlockPlugin';
+import { JSX, useRef} from 'react';
+
+const DRAGGABLE_BLOCK_MENU_CLASSNAME = 'draggable-block-menu';
+
+export default function DraggableBlockPlugin({
+  anchorElem = document.body,
+  className
+}: {
+  anchorElem?: HTMLElement;
+  className?:string
+}): JSX.Element {
+  const menuRef = useRef<any>(null);
+  const targetLineRef = useRef<any>(null);
+
+  const isOnMenu = (element: HTMLElement): boolean => {
+ 
+    return !!element.closest(`.${DRAGGABLE_BLOCK_MENU_CLASSNAME}`);
+  };
+
+  
+  return (
+    <DraggableBlockPlugin_EXPERIMENTAL
+      anchorElem={anchorElem}
+      menuRef={menuRef}
+      targetLineRef={targetLineRef}
+      menuComponent={
+        <div ref={menuRef} className={
+          cn("draggable-block-menu  transition-all  z-50 absolute top-0 -left-4",className)
+        }>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="w-4 cursor-move rounded-sm h-4 z-50"
+            data-name="Layer 1"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+          >
+            <path stroke="currentColor" d="M8.5 10a2 2 0 1 0 2 2 2 2 0 0 0-2-2Zm0 7a2 2 0 1 0 2 2 2 2 0 0 0-2-2Zm7-10a2 2 0 1 0-2-2 2 2 0 0 0 2 2Zm-7-4a2 2 0 1 0 2 2 2 2 0 0 0-2-2Zm7 14a2 2 0 1 0 2 2 2 2 0 0 0-2-2Zm0-7a2 2 0 1 0 2 2 2 2 0 0 0-2-2Z" />
+          </svg>
+        </div>
+      }
+      targetLineComponent={
+        <div
+          ref={targetLineRef}
+          className="cursor-none bg-sky-600 h-1 absolute left-0 top-0 opacity-0 will-change-transform"
+        />
+      }
+      isOnMenu={isOnMenu}
+    />
+  );
+}

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

@@ -0,0 +1,85 @@
+/**
+ * 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

@@ -0,0 +1,98 @@
+/**
+ * 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

@@ -0,0 +1,42 @@
+/**
+ * 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;
+}