@collabchron/notiq 0.2.0

package/src/components/editor/nodes/index.ts

@@ -0,0 +1,81 @@
+
+import type {Klass, LexicalNode} from 'lexical';
+
+import {CodeHighlightNode, CodeNode} from '@lexical/code';
+import {HashtagNode} from '@lexical/hashtag';
+import {AutoLinkNode, LinkNode} from '@lexical/link';
+import {ListItemNode, ListNode} from '@lexical/list';
+import {MarkNode} from '@lexical/mark';
+import {OverflowNode} from '@lexical/overflow';
+import {HorizontalRuleNode} from '@lexical/react/LexicalHorizontalRuleNode';
+import {HeadingNode, QuoteNode} from '@lexical/rich-text';
+import {TableCellNode, TableNode, TableRowNode} from '@lexical/table';
+import { ImageNode } from './ImageNode';
+import { PollNode } from './PollNode';
+import { LayoutItemNode } from './LayoutNode/LayoutItemNode';
+import { LayoutContainerNode } from './LayoutNode/LayoutContainerNode';
+import { CollapsibleContainerNode } from './CollapsibleNode/CollapsibleContainerNode';
+import { CollapsibleContentNode } from './CollapsibleNode/CollapsibleContentNode';
+import { CollapsibleTitleNode } from './CollapsibleNode/CollapsibleTitleNode';
+import { LinkWithMetaDataNode } from '../plugins/LinkWithMetaData';
+import { TweetNode } from './TweetNode';
+import { YouTubeNode } from '../plugins/YouTubeNode';
+import { Hint } from './Hint';
+import { StepperNode } from './Stepper';
+import { InlineImageNode } from './InlineImageNode/InlineImageNode';
+import { ExcalidrawNode } from './ExcalidrawNode';
+import { FigmaNode } from './FigmaNode/FigmaNode';
+import { EquationNode } from './EquationNode/EquationNode';
+
+
+
+const nodes: Array<Klass<LexicalNode>> = [
+  HeadingNode,
+  ListNode,
+  ListItemNode,
+  QuoteNode,
+  CodeNode,
+  TableNode,
+  TableCellNode,
+  TableRowNode,
+  CodeHighlightNode,
+  StepperNode,
+  AutoLinkNode,
+  YouTubeNode,
+  Hint,
+  TweetNode,
+  LinkNode,
+  OverflowNode,
+  HorizontalRuleNode,
+  MarkNode,
+  ImageNode,
+  PollNode,
+  LayoutItemNode,
+  LayoutContainerNode,
+  CollapsibleContainerNode,
+  CollapsibleContentNode,
+  CollapsibleTitleNode,
+  LinkWithMetaDataNode,
+  InlineImageNode,
+  ExcalidrawNode,
+  FigmaNode,
+  EquationNode,
+];
+
+export  const nestedNodes: Array<Klass<LexicalNode>>=[
+  HeadingNode,
+  ListNode,
+  ListItemNode,
+  LinkNode,
+  CodeHighlightNode,
+  QuoteNode,
+  CodeNode,
+  StepperNode,
+  LinkWithMetaDataNode,
+  ImageNode,
+  InlineImageNode,
+  ExcalidrawNode,
+  FigmaNode,
+  EquationNode,
+]
+export default nodes

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

@@ -0,0 +1,350 @@
+
+
+import type {LexicalEditor} from 'lexical';
+
+import {
+  AutoEmbedOption,
+  EmbedConfig,
+  EmbedMatchResult,
+  LexicalAutoEmbedPlugin,
+  URL_MATCHER,
+} from '@lexical/react/LexicalAutoEmbedPlugin';
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {useMemo, useState} from 'react';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import {INSERT_FIGMA_COMMAND} from '../FigmaPlugin';
+import { INSERT_YOUTUBE_COMMAND } from '../YouTubePlugin';
+import { INSERT_TWEET_COMMAND } from '../TwitterPlugin';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Twitter, Youtube, Figma } from 'lucide-react';
+import useModal from '@/components/ui/models/use-model';
+
+interface PlaygroundEmbedConfig extends EmbedConfig {
+  // Human readable name of the embeded content e.g. Tweet or Google Map.
+  contentName: string;
+
+  // Icon for display.
+  icon?: React.JSX.Element;
+
+  // An example of a matching url https://twitter.com/jack/status/20
+  exampleUrl: string;
+
+  // For extra searching.
+  keywords: Array<string>;
+
+  // Embed a Figma Project.
+  description?: string;
+}
+
+export const YoutubeEmbedConfig: PlaygroundEmbedConfig = {
+  contentName: 'Youtube Video',
+
+  exampleUrl: 'https://www.youtube.com/watch?v=jNQXAC9IVRw',
+
+  // Icon for display.
+  icon: <Youtube className="h-4 w-4" />,
+
+  insertNode: (editor: LexicalEditor, result: EmbedMatchResult) => {
+    editor.dispatchCommand(INSERT_YOUTUBE_COMMAND, result.id);
+  },
+
+  keywords: ['youtube', 'video'],
+
+  // Determine if a given URL is a match and return url data.
+  parseUrl: async (url: string) => {
+    const match =
+      /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/.exec(url);
+
+    const id = match ? (match?.[2].length === 11 ? match[2] : null) : null;
+
+    if (id != null) {
+      return {
+        id,
+        url,
+      };
+    }
+
+    return null;
+  },
+
+  type: 'youtube-video',
+};
+
+export const TwitterEmbedConfig: PlaygroundEmbedConfig = {
+  // e.g. Tweet or Google Map.
+  contentName: 'Tweet',
+
+  exampleUrl: 'https://twitter.com/jack/status/20',
+
+  // Icon for display.
+  icon: <Twitter className="h-4 w-4" />,
+
+  // Create the Lexical embed node from the url data.
+  insertNode: (editor: LexicalEditor, result: EmbedMatchResult) => {
+    editor.dispatchCommand(INSERT_TWEET_COMMAND, result.id);
+  },
+
+  // For extra searching.
+  keywords: ['tweet', 'twitter'],
+
+  // Determine if a given URL is a match and return url data.
+  parseUrl: (text: string) => {
+    const match =
+      /^https:\/\/(twitter|x)\.com\/(#!\/)?(\w+)\/status(es)*\/(\d+)/.exec(
+        text,
+      );
+
+    if (match != null) {
+      return {
+        id: match[5],
+        url: match[1],
+      };
+    }
+
+    return null;
+  },
+
+  type: 'tweet',
+};
+
+export const FigmaEmbedConfig: PlaygroundEmbedConfig = {
+  contentName: 'Figma Document',
+
+  exampleUrl: 'https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File',
+
+  icon: <Figma className="h-4 w-4" />,
+
+  insertNode: (editor: LexicalEditor, result: EmbedMatchResult) => {
+    editor.dispatchCommand(INSERT_FIGMA_COMMAND, result.id);
+  },
+
+  keywords: ['figma', 'figma.com', 'mock-up'],
+
+  // Determine if a given URL is a match and return url data.
+  parseUrl: (text: string) => {
+    const match =
+      /https:\/\/([\w.-]+\.)?figma.com\/(file|proto)\/([0-9a-zA-Z]{22,128})(?:\/.*)?$/.exec(
+        text,
+      );
+
+    if (match != null) {
+      return {
+        id: match[3],
+        url: match[0],
+      };
+    }
+
+    return null;
+  },
+
+  type: 'figma',
+};
+
+export const EmbedConfigs = [
+  TwitterEmbedConfig,
+  YoutubeEmbedConfig,
+  FigmaEmbedConfig,
+];
+
+function AutoEmbedMenuItem({
+  index,
+  isSelected,
+  onClick,
+  onMouseEnter,
+  option,
+}: {
+  index: number;
+  isSelected: boolean;
+  onClick: () => void;
+  onMouseEnter: () => void;
+  option: AutoEmbedOption;
+}) {
+  let className = 'item';
+  if (isSelected) {
+    className += ' selected';
+  }
+  return (
+    <li
+      key={option.key}
+      tabIndex={-1}
+      className={className}
+      ref={option.setRefElement}
+      role="option"
+      aria-selected={isSelected}
+      id={'typeahead-item-' + index}
+      onMouseEnter={onMouseEnter}
+      onClick={onClick}>
+      <span className="text">{option.title}</span>
+    </li>
+  );
+}
+
+function AutoEmbedMenu({
+  options,
+  selectedItemIndex,
+  onOptionClick,
+  onOptionMouseEnter,
+}: {
+  selectedItemIndex: number | null;
+  onOptionClick: (option: AutoEmbedOption, index: number) => void;
+  onOptionMouseEnter: (index: number) => void;
+  options: Array<AutoEmbedOption>;
+}) {
+  return (
+    <div className="typeahead-popover">
+      <ul>
+        {options.map((option: AutoEmbedOption, i: number) => (
+          <AutoEmbedMenuItem
+            index={i}
+            isSelected={selectedItemIndex === i}
+            onClick={() => onOptionClick(option, i)}
+            onMouseEnter={() => onOptionMouseEnter(i)}
+            key={option.key}
+            option={option}
+          />
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+const debounce = (callback: (text: string) => void, delay: number) => {
+  let timeoutId: number;
+  return (text: string) => {
+    window.clearTimeout(timeoutId);
+    timeoutId = window.setTimeout(() => {
+      callback(text);
+    }, delay);
+  };
+};
+
+export function AutoEmbedDialog({
+  embedConfig,
+  onClose,
+}: {
+  embedConfig: PlaygroundEmbedConfig;
+  onClose: () => void;
+}): React.JSX.Element {
+  const [text, setText] = useState('');
+  const [editor] = useLexicalComposerContext();
+  const [embedResult, setEmbedResult] = useState<EmbedMatchResult | null>(null);
+
+  const validateText = useMemo(
+    () =>
+      debounce((inputText: string) => {
+        const urlMatch = URL_MATCHER.exec(inputText);
+        if (embedConfig != null && inputText != null && urlMatch != null) {
+          Promise.resolve(embedConfig.parseUrl(inputText)).then(
+            (parseResult) => {
+              setEmbedResult(parseResult);
+            },
+          );
+        } else if (embedResult != null) {
+          setEmbedResult(null);
+        }
+      }, 200),
+    [embedConfig, embedResult],
+  );
+
+  const onClick = () => {
+    if (embedResult != null) {
+      embedConfig.insertNode(editor, embedResult);
+      onClose();
+    }
+  };
+
+  return (
+    <div className='flex items-center justify-center flex-col space-y-3'>
+      <div >
+        <Input
+          type="text"
+          className="Input__input"
+          placeholder={embedConfig.exampleUrl}
+          value={text}
+          data-test-id={`${embedConfig.type}-embed-modal-url`}
+          onChange={(e) => {
+            const {value} = e.target;
+            setText(value);
+            validateText(value);
+          }}
+        />
+      </div>
+        <Button
+          disabled={!embedResult}
+          onClick={onClick}
+          data-test-id={`${embedConfig.type}-embed-modal-submit-btn`}>
+          Embed
+        </Button>
+    </div>
+  );
+}
+
+export default function AutoEmbedPlugin(): React.JSX.Element {
+  const [modal, showModal] = useModal();
+
+  const openEmbedModal = (embedConfig: PlaygroundEmbedConfig) => {
+    
+    showModal(`Embed ${embedConfig.contentName}`,"type the url", (onClose) => (
+      <AutoEmbedDialog embedConfig={embedConfig} onClose={onClose} />
+    ));
+  };
+
+  const getMenuOptions = (
+    activeEmbedConfig: PlaygroundEmbedConfig,
+    embedFn: () => void,
+    dismissFn: () => void,
+  ) => {
+    return [
+      new AutoEmbedOption('Dismiss', {
+        onSelect: dismissFn,
+      }),
+      new AutoEmbedOption(`Embed ${activeEmbedConfig.contentName}`, {
+        onSelect: embedFn,
+      }),
+    ];
+  };
+
+  return (
+    <>
+      {modal}
+      <LexicalAutoEmbedPlugin<PlaygroundEmbedConfig>
+        embedConfigs={EmbedConfigs}
+        onOpenEmbedModalForConfig={openEmbedModal}
+        getMenuOptions={getMenuOptions}
+        menuRenderFn={(
+          anchorElementRef,
+          {selectedIndex, options, selectOptionAndCleanUp, setHighlightedIndex},
+        ) =>
+          anchorElementRef.current
+            ? ReactDOM.createPortal(
+                <div
+                  className="typeahead-popover flex items-center auto-embed-menu"
+                  style={{
+                    marginLeft: `${Math.max(
+                      parseFloat(anchorElementRef.current.style.width) - 200,
+                      0,
+                    )}px`,
+                    width: 200,
+                  }}>
+                  <AutoEmbedMenu
+                    options={options}
+                    selectedItemIndex={selectedIndex}
+                    onOptionClick={(option: AutoEmbedOption, index: number) => {
+                      setHighlightedIndex(index);
+                      selectOptionAndCleanUp(option);
+                    }}
+                    onOptionMouseEnter={(index: number) => {
+                      setHighlightedIndex(index);
+                    }}
+                  />
+                </div>,
+                anchorElementRef.current,
+              )
+            : null
+        }
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,56 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useEffect } from 'react';
+import { TOGGLE_LINK_COMMAND_LinkWithMetaDataNode } from '../LinkWithMetaData';
+import {  $getSelection, $isRangeSelection, } from 'lexical';
+import { $isCodeHighlightNode } from "@lexical/code";
+
+const URL_REGEX =
+  /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)(?<![-.+():%])/;
+
+export default function LexicalAutoLinkPlugin(): null {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    const handlePaste = (event: ClipboardEvent) => {
+      const pastedText = event.clipboardData?.getData('text/plain');
+      if (pastedText && URL_REGEX.test(pastedText)) {
+
+        
+        event.preventDefault();
+        pastedText.split(" ").map((TEXT)=>{          
+          if(URL_REGEX.test(TEXT)){
+            editor.update(() => {
+              const selection = $getSelection();
+              if ($isRangeSelection(selection)) {
+                 const node = selection.anchor.getNode();
+
+                 
+                 if(!$isCodeHighlightNode(node)){
+                  if (node && node.getTextContent() === TEXT) {
+                      node.remove();
+                  }
+                  
+                  editor.dispatchCommand(TOGGLE_LINK_COMMAND_LinkWithMetaDataNode, TEXT);
+                }
+               
+              }
+            });
+          }
+        })
+      
+      }
+    };
+
+    const rootElement = editor.getRootElement();
+    if (rootElement) {
+      rootElement.addEventListener('paste', handlePaste);
+    }
+
+    return () => {
+      if (rootElement) {
+        rootElement.removeEventListener('paste', handlePaste);
+      }
+    };
+  }, [editor]);
+
+  return null; 
+}

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

@@ -0,0 +1,70 @@
+import { $isCodeNode } from "@lexical/code";
+import {
+  $getNearestNodeFromDOMNode,
+  $getSelection,
+  $setSelection,
+  LexicalEditor,
+} from "lexical";
+import * as React from "react";
+import { useState } from "react";
+import { Copy, Check } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface Props {
+  editor: LexicalEditor;
+  getCodeDOMNode: () => HTMLElement | null;
+}
+
+export function CopyButton({ editor, getCodeDOMNode }: Props) {
+  const [isCopyCompleted, setCopyCompleted] = useState<boolean>(false);
+
+  const copyToClipboard = async () => {
+    const codeDOMNode = getCodeDOMNode();
+
+    if (!codeDOMNode) {
+      return;
+    }
+
+    let content = "";
+
+    editor.update(() => {
+      const codeNode = $getNearestNodeFromDOMNode(codeDOMNode);
+
+      if ($isCodeNode(codeNode)) {
+        content = codeNode.getTextContent();
+      }
+
+      const selection = $getSelection();
+      $setSelection(selection);
+    });
+
+    try {
+      await navigator.clipboard.writeText(content);
+      setCopyCompleted(true);
+      setTimeout(() => setCopyCompleted(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy: ", err);
+    }
+  };
+  return (
+    <Button
+      variant="outline"
+      size={"Toolbar"}
+      className="relative rounded-md"
+      onClick={copyToClipboard}
+      aria-label={isCopyCompleted ? "Copied" : "Copy to clipboard"}
+    >
+      <span className="sr-only">{isCopyCompleted ? "Copied" : "Copy"}</span>
+      <Copy
+        className={`h-4 w-4 transition-all duration-300 ${
+          isCopyCompleted ? "scale-0" : "scale-100"
+        }`}
+      />
+      <Check
+        className={`absolute inset-0 m-auto h-4 w-4 transition-all duration-300 ${
+          isCopyCompleted ? "scale-100" : "scale-0"
+        }`}
+      />
+    </Button>
+  );
+}