@collabchron/notiq 0.2.0 → 1.0.0

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

@@ -1,217 +0,0 @@
-import {
-  $isCodeNode,
-  CodeNode,
-  getLanguageFriendlyName,
-  normalizeCodeLang,
-} from "@lexical/code";
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import {
-  $getNearestNodeFromDOMNode,
-  $getNodeByKey,
-  isHTMLElement,
-  NodeKey,
-} from "lexical";
-import { useEffect, useRef, useState } from "react";
-import * as React from "react";
-import { createPortal } from "react-dom";
-
-import { CopyButton } from "./components/CopyButton";
-import { canBePrettier, PrettierButton } from "./components/PrettierButton";
-import { useDebounce } from "./utils";
-import CodeList from "@/components/ui/drop-downs/code";
-
-const CODE_PADDING = 8;
-
-interface Position {
-  top: string;
-  right: string;
-}
-
-function CodeActionMenuContainer({
-  anchorElem,
-}: {
-  anchorElem: HTMLElement;
-}): React.JSX.Element {
-  const [editor] = useLexicalComposerContext();
-
-  const [lang, setLang] = useState("");
-  const [isShown, setShown] = useState<boolean>(false);
-  const [selectedElementKey, setSelectedElementKey] = useState<NodeKey | null>(
-    null
-  );
-  const [shouldListenMouseMove, setShouldListenMouseMove] =
-    useState<boolean>(false);
-  const [position, setPosition] = useState<Position>({
-    right: "0",
-    top: "0",
-  });
-  const codeSetRef = useRef<Set<string>>(new Set());
-  const codeDOMNodeRef = useRef<HTMLElement | null>(null);
-
-  function getCodeDOMNode(): HTMLElement | null {
-    return codeDOMNodeRef.current;
-  }
-
-  const debouncedOnMouseMove = useDebounce(
-    (event: MouseEvent) => {
-      const { codeDOMNode, isOutside } = getMouseInfo(event);
-      if (isOutside) {
-        setShown(false);
-        return;
-      }
-
-      if (!codeDOMNode) {
-        return;
-      }
-
-      codeDOMNodeRef.current = codeDOMNode;
-
-      let codeNode: CodeNode | null = null;
-      let _lang = "";
-
-      editor.update(() => {
-        const maybeCodeNode = $getNearestNodeFromDOMNode(codeDOMNode);
-
-        if ($isCodeNode(maybeCodeNode)) {
-          codeNode = maybeCodeNode;
-          _lang = codeNode.getLanguage() || "";
-          setSelectedElementKey(codeNode.getKey()); // Set the selectedElementKey
-        }
-      });
-
-      if (codeNode) {
-        const { y: editorElemY, right: editorElemRight } =
-          anchorElem.getBoundingClientRect();
-        const { y, right } = codeDOMNode.getBoundingClientRect();
-        setLang(_lang);
-        setShown(true);
-        setPosition({
-          right: `${editorElemRight - right  + CODE_PADDING}px`,
-          top: `${y - editorElemY}px`,
-        });
-      }
-    },
-    1000,
-    500
-  );
-
-  useEffect(() => {
-    if (!shouldListenMouseMove) {
-      return;
-    }
-
-    document.addEventListener("mousemove", debouncedOnMouseMove);
-
-    return () => {
-      setShown(false);
-      debouncedOnMouseMove.cancel();
-      document.removeEventListener("mousemove", debouncedOnMouseMove);
-    };
-  }, [shouldListenMouseMove, debouncedOnMouseMove]);
-
-  useEffect(() => {
-    return editor.registerMutationListener(
-      CodeNode,
-      (mutations) => {
-        editor.getEditorState().read(() => {
-          for (const [key, type] of mutations) {
-            switch (type) {
-              case "created":
-                codeSetRef.current.add(key);
-                break;
-
-              case "destroyed":
-                codeSetRef.current.delete(key);
-                break;
-
-              default:
-                break;
-            }
-          }
-        });
-        setShouldListenMouseMove(codeSetRef.current.size > 0);
-      },
-      { skipInitialization: false }
-    );
-  }, [editor]);
-
-  const normalizedLang = normalizeCodeLang(lang);
-  const codeFriendlyName = getLanguageFriendlyName(lang);
-
-  const onCodeLanguageSelect = React.useCallback(
-    (value: string) => {
-      editor.update(() => {
-        if (selectedElementKey !== null) {
-          const node = $getNodeByKey(selectedElementKey);
-          if ($isCodeNode(node)) {
-            node.setLanguage(value);
-            setLang(value);
-          }
-        }
-      });
-    },
-    [editor, selectedElementKey]
-  );
-
-  
-  return (
-    <div>
-      {isShown ? (
-        <div
-          className="code-action-menu-container   flex flex-row items-center gap-x-2 p-2 absolute "
-          style={{ ...position }}
-        >
-          <div>
-            <CodeList
-              codeLanguage={codeFriendlyName}
-              disabled={!editor.isEditable()}
-              onCodeLanguageSelect={onCodeLanguageSelect}
-            />
-          </div>
-          <CopyButton editor={editor} getCodeDOMNode={getCodeDOMNode} />
-          {canBePrettier(normalizedLang) ? (
-            <PrettierButton
-              editor={editor}
-              getCodeDOMNode={getCodeDOMNode}
-              lang={normalizedLang}
-            />
-          ) : null}
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
-function getMouseInfo(event: MouseEvent): {
-  codeDOMNode: HTMLElement | null;
-  isOutside: boolean;
-} {
-  const target = event.target;
-
-  if (isHTMLElement(target)) {
-    const codeDOMNode = target.closest<HTMLElement>(
-      "code.line-code"
-    );
-    const isOutside = !(
-      codeDOMNode ||
-      target.closest<HTMLElement>("div.code-action-menu-container") ||
-      target.closest<HTMLElement>("div.code-selector") ||
-      target.closest<HTMLElement>("code.line-code")
-    );
-
-    return { codeDOMNode, isOutside };
-  } else {
-    return { codeDOMNode: null, isOutside: true };
-  }
-}
-
-export default function CodeActionMenuPlugin({
-  anchorElem = document.body,
-}: {
-  anchorElem?: HTMLElement;
-}): React.ReactPortal | null {
-  return createPortal(
-    <CodeActionMenuContainer anchorElem={anchorElem} />,
-    anchorElem
-  );
-}

package/src/components/editor/plugins/CodeActionMenuPlugin/utils.ts

@@ -1,26 +0,0 @@
-
-import {debounce} from 'lodash-es';
-import {useMemo, useRef} from 'react';
-
-export function useDebounce<T extends (...args: never[]) => void>(
-  fn: T,
-  ms: number,
-  maxWait?: number,
-) {
-  const funcRef = useRef<T | null>(null);
-  funcRef.current = fn;
-
-  return useMemo(
-    () =>
-      debounce(
-        (...args: Parameters<T>) => {
-          if (funcRef.current) {
-            funcRef.current(...args);
-          }
-        },
-        ms,
-        {maxWait},
-      ),
-    [ms, maxWait],
-  );
-}

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

@@ -1,21 +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 {registerCodeHighlighting} from '@lexical/code';
-import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {useEffect} from 'react';
-
-export default function CodeHighlightPlugin(): JSX.Element | null {
-  const [editor] = useLexicalComposerContext();
-
-  useEffect(() => {
-    return registerCodeHighlighting(editor);
-  }, [editor]);
-
-  return null;
-}

package/src/components/editor/plugins/CollapsiblePlugin/Collapsible.css

@@ -1,76 +0,0 @@
-.Collapsible__container {
-  margin-bottom: 8px;
-  
-}
-
-.Collapsible__title {
-  cursor: pointer;
-  padding: 5px 5px 5px 20px;
-  position: relative;
-  font-weight: bold;
-  list-style: none;
-  outline: none;
-  
-}
-
-
-.Collapsible__title::marker,
-.Collapsible__title::-webkit-details-marker {
-  display: none;
-  
-}
-
-
-
-
-
-.dark .Collapsible__title:before {
-  border-style: solid;
-  border-color: transparent;
-  border-width: 5px;
-  border-left-color: white;
-  display: block;
-  content: '';
-  position: absolute;
-  left: 7px;
-  top: 50%;
-  transform: translateY(-50%);
-}
-.Collapsible__title:before {
-  border-style: solid;
-  border-color: transparent;
-  border-width: 5px;
-  border-left-color: #000;
-  display: block;
-  content: '';
-  position: absolute;
-  left: 7px;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.dark .Collapsible__container[open] > .Collapsible__title:before {
-  border-color: transparent;
-  border-width: 6px 4px 0 4px;
-  border-top-color: white;
-
-  
-}
-
-.Collapsible__container[open] > .Collapsible__title:before {
-  border-color: transparent;
-  border-width: 6px 4px 0 4px;
-  border-top-color: #000;
-
-
-
-}
-
-.Collapsible__content {
-  padding: 0 5px 5px 20px;
-}
-
-.Collapsible__collapsed .Collapsible__content {
-  display: none;
-  user-select: none;
-}

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

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

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

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