@collabchron/notiq 0.2.0

package/src/components/editor/utils/extract-data.ts

@@ -0,0 +1,166 @@
+import { $getRoot, ElementNode, LexicalEditor, ParagraphNode, TextNode } from "lexical";
+import {ListItemNode, ListNode} from "@lexical/list"
+import {HeadingNode,QuoteNode} from "@lexical/rich-text"
+import {TableNode} from "@lexical/table"
+import {CodeNode} from "@lexical/code"
+import { CollapsibleContainerNode } from "../nodes/CollapsibleNode/CollapsibleContainerNode";
+import { CollapsibleTitleNode } from "../nodes/CollapsibleNode/CollapsibleTitleNode";
+export  type BlockType = "Table"|'heading'|"CollapsibleContent" | 'paragraph' |"Collapsible"| 'text' | 'list' | 'list-item' | 'quote' | 'code' | "Hint"
+
+export type ExtractedBlock = {
+  blockType: BlockType;
+  content: string;
+  children?: ExtractedBlock[];
+}
+
+function extractChildrenContent(nodes: any[]): string {
+  return nodes
+    .filter(node => node instanceof TextNode)
+    .map(node => node.getTextContent())
+    .join(' ');
+}
+
+function processListItem(listItem: ListItemNode): ExtractedBlock {
+  let textContent = '';
+  const children: ExtractedBlock[] = [];
+
+  listItem.getChildren().forEach(child => {
+    if (child instanceof TextNode) {
+      textContent += child.getTextContent();
+    } else if (child instanceof ElementNode) {
+      textContent += extractChildrenContent(child.getChildren());
+    }
+    
+    if (child instanceof ListNode) {
+      children.push(...processList(child));
+    }
+  });
+
+  return {
+    blockType: 'list-item',
+    content: textContent.trim(),
+    children: children.length > 0 ? children : undefined
+  };
+}
+
+function processList(listNode: ListNode): ExtractedBlock[] {
+  const listType = listNode.getListType();
+  return listNode.getChildren().map(child => ({
+    ...processListItem(child as ListItemNode),
+    attributes: { listType }
+  }));
+}
+
+function processHeading(headingNode: HeadingNode): ExtractedBlock {
+  return {
+    blockType: 'heading',
+    content: headingNode.getTextContent(),
+  };
+}
+// should i make better json?
+function processTable(TableNode:TableNode): ExtractedBlock {
+    return {
+      blockType: 'Table',
+      content: TableNode.getTextContent(),
+    };
+}
+function processCodeBlock(codeNode: CodeNode): ExtractedBlock {
+  return {
+    blockType: 'code',
+    content: codeNode.getTextContent(),
+  };
+}
+
+export function ExtractData(editor: LexicalEditor):string {
+  const blocks: ExtractedBlock[] = [];
+
+  editor.update(() => {
+    const root = $getRoot();
+    
+    root.getChildren().forEach(node => {
+      try {
+    
+        if (node instanceof HeadingNode) {
+          blocks.push(processHeading(node));
+        } 
+        else if(node instanceof TableNode){          
+          blocks.push(processTable(node));
+        }
+        
+        else if (node instanceof ListNode) {
+          blocks.push({
+            blockType: 'list',
+            content: '',
+            children: processList(node)
+          });
+        }
+        else if (node instanceof CollapsibleContainerNode || node instanceof CollapsibleTitleNode) {
+            let title = "";
+            let content = "";
+          
+            if (node instanceof CollapsibleTitleNode) {
+              title = node.getTextContent();
+            }
+          
+            if (node instanceof CollapsibleContainerNode) {
+              const children = node.getChildren();
+              const titleNode = children.find(child => child instanceof CollapsibleTitleNode);
+              if (titleNode) {
+                title = titleNode.getTextContent();
+              }
+              content = children
+                .filter(child => !(child instanceof CollapsibleTitleNode))
+                .map(child => child.getTextContent())
+                .join("\n");
+            }
+        
+          
+            blocks.push({
+              blockType: "Collapsible",
+              content: title, // The collapsible title.
+              children: [
+                {
+                  blockType: "CollapsibleContent",
+                  content: content, // The collapsible content.
+                },
+              ],
+            });
+        }  
+        else if (node instanceof ParagraphNode) {
+          if(node.getTextContent() == "") return;
+          blocks.push({
+            blockType: 'paragraph',
+            content: node.getTextContent()
+          });
+        }
+        else if (node instanceof CodeNode) {
+          blocks.push(processCodeBlock(node));
+        }
+        else if (node instanceof QuoteNode) {
+          
+          blocks.push({
+            blockType: 'quote',
+            content: node.getTextContent(),
+            children: node.getChildren().length>=2 ?node.getChildren().map(child => ({
+              blockType: 'text',
+              content: child.getTextContent()
+            })):undefined
+          });
+        }
+        else if (node instanceof TextNode) {
+          blocks.push({
+            blockType: 'text',
+            content: node.getTextContent()
+          });
+        }
+       
+      } catch (error) {
+        console.warn('Error processing node:', error);
+      }
+    });
+  });
+
+
+  
+  return JSON.stringify(blocks);
+}

package/src/components/editor/utils/getAllLexicalChildren.ts

@@ -0,0 +1,13 @@
+import { $getNodeByKey, $getRoot, LexicalEditor } from 'lexical';
+
+export const getAllLexicalChildren = (editor: LexicalEditor) => {
+   const childrenKeys = editor
+      .getEditorState()
+      .read(() => $getRoot().getChildrenKeys());
+
+   return childrenKeys.map((key) => ({
+      key: key,
+      node: $getNodeByKey(key),
+      htmlElement: editor.getElementByKey(key),
+   }));
+};

package/src/components/editor/utils/getDOMRangeRect.ts

@@ -0,0 +1,27 @@
+/**
+ * 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.
+ *
+ */
+export function getDOMRangeRect(
+    nativeSelection: Selection,
+    rootElement: HTMLElement,
+  ): DOMRect {
+    const domRange = nativeSelection.getRangeAt(0);
+  
+    let rect;
+  
+    if (nativeSelection.anchorNode === rootElement) {
+      let inner = rootElement;
+      while (inner.firstElementChild != null) {
+        inner = inner.firstElementChild as HTMLElement;
+      }
+      rect = inner.getBoundingClientRect();
+    } else {
+      rect = domRange.getBoundingClientRect();
+    }
+  
+    return rect;
+  }

package/src/components/editor/utils/getSelectedNode.ts

@@ -0,0 +1,27 @@
+/**
+ * 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 {$isAtNodeEnd} from '@lexical/selection';
+import {ElementNode, RangeSelection, TextNode} from 'lexical';
+
+export function getSelectedNode(
+  selection: RangeSelection,
+): TextNode | ElementNode {
+  const anchor = selection.anchor;
+  const focus = selection.focus;
+  const anchorNode = selection.anchor.getNode();
+  const focusNode = selection.focus.getNode();
+  if (anchorNode === focusNode) {
+    return anchorNode;
+  }
+  const isBackward = selection.isBackward();
+  if (isBackward) {
+    return $isAtNodeEnd(focus) ? anchorNode : focusNode;
+  } else {
+    return $isAtNodeEnd(anchor) ? anchorNode : focusNode;
+  }
+}

package/src/components/editor/utils/gif.ts

@@ -0,0 +1,29 @@
+
+const API_KEY = process.env.NEXT_PUBLIC_TENOR_API_KEY;
+
+const fetchGifs = async ({ q = "trending" }: {  q?: string }) => {
+  const params = new URLSearchParams({
+    key: API_KEY || '',
+    q,
+    limit: "200",
+    media_filter: 'minimal',
+  });
+
+  const response = await fetch(`https://tenor.googleapis.com/v2/search?${params.toString()}`);
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! Status: ${response.status}`);
+  }
+
+  const data = await response.json();
+
+  const gifs = data.results.map((gif: any) => ({
+    id: gif.id,
+    url: gif.media_formats.gif.url,
+    alt_text: gif.content_description,
+  }));
+
+  return { gifs, next: data.next };
+};
+
+export default fetchGifs;

package/src/components/editor/utils/invariant.ts

@@ -0,0 +1,15 @@
+
+export default function invariant(
+    cond?: boolean,
+    message?: string,
+  ): asserts cond {
+    if (cond) {
+      return;
+    }
+  
+    throw new Error(
+      'Internal Lexical error: invariant() is meant to be replaced at compile ' +
+        'time. There is no runtime version. Error: ' +
+        message,
+    );
+  }

package/src/components/editor/utils/setFloatingElemPosition.ts

@@ -0,0 +1,51 @@
+const VERTICAL_GAP = 10;
+const HORIZONTAL_OFFSET = 5;
+
+export function setFloatingElemPosition(
+  targetRect: DOMRect | null,
+  floatingElem: HTMLElement,
+  anchorElem: HTMLElement,
+  verticalGap: number = VERTICAL_GAP,
+  horizontalOffset: number = HORIZONTAL_OFFSET,
+): void {
+  const scrollerElem = anchorElem.parentElement;
+
+  if (targetRect === null || !scrollerElem) {
+    floatingElem.style.opacity = '0';
+    floatingElem.style.transform = 'translate(-10000px, -10000px)';
+    return;
+  }
+
+  const floatingElemRect = floatingElem.getBoundingClientRect();
+  const anchorElementRect = anchorElem.getBoundingClientRect();
+  const editorScrollerRect = scrollerElem.getBoundingClientRect();
+
+  // Calculate initial top and left positions
+  let top = targetRect.bottom + verticalGap; 
+  let left = targetRect.left + horizontalOffset;
+
+  // Ensure the floating element stays within the editor's bounds
+  if (top + floatingElemRect.height > editorScrollerRect.bottom) {
+    // If it overflows at the bottom, position it above the selection
+    top = targetRect.top - floatingElemRect.height - verticalGap;
+  }
+
+  if (left + floatingElemRect.width > editorScrollerRect.right) {
+    // If it overflows on the right, align it with the right edge of the editor
+    left = editorScrollerRect.right - floatingElemRect.width - horizontalOffset;
+  }
+
+  if (left < editorScrollerRect.left) {
+    // If it overflows on the left, align it with the left edge of the editor
+    left = editorScrollerRect.left + horizontalOffset;
+  }
+
+  // Adjust for the anchor element's position
+  top -= anchorElementRect.top;
+  left -= anchorElementRect.left;
+
+  // Apply smooth transition and positioning
+  floatingElem.style.transition = 'transform 0.2s ease-in-out, opacity 0.2s ease-in-out';
+  floatingElem.style.opacity = '1';
+  floatingElem.style.transform = `translate(${left}px, ${top}px)`;
+}

package/src/components/editor/utils/setFloatingElemPositionForLinkEditor.ts

@@ -0,0 +1,40 @@
+
+const VERTICAL_GAP = 10;
+const HORIZONTAL_OFFSET = 5;
+
+export function setFloatingElemPositionForLinkEditor(
+  targetRect: DOMRect | null,
+  floatingElem: HTMLElement,
+  anchorElem: HTMLElement,
+  verticalGap: number = VERTICAL_GAP,
+  horizontalOffset: number = HORIZONTAL_OFFSET,
+): void {
+  const scrollerElem = anchorElem.parentElement;
+
+  if (targetRect === null || !scrollerElem) {
+    floatingElem.style.opacity = '0';
+    floatingElem.style.transform = 'translate(-10000px, -10000px)';
+    return;
+  }
+
+  const floatingElemRect = floatingElem.getBoundingClientRect();
+  const anchorElementRect = anchorElem.getBoundingClientRect();
+  const editorScrollerRect = scrollerElem.getBoundingClientRect();
+
+  let top = targetRect.top - verticalGap;
+  let left = targetRect.left - horizontalOffset;
+
+  if (top < editorScrollerRect.top) {
+    top += floatingElemRect.height + targetRect.height + verticalGap * 2;
+  }
+
+  if (left + floatingElemRect.width > editorScrollerRect.right) {
+    left = editorScrollerRect.right - floatingElemRect.width - horizontalOffset;
+  }
+
+  top -= anchorElementRect.top;
+  left -= anchorElementRect.left;
+
+  floatingElem.style.opacity = '1';
+  floatingElem.style.transform = `translate(${left}px, ${top}px)`;
+}

package/src/components/editor/utils/setNodePlaceholderFromSelection/getNodePlaceholder.ts

@@ -0,0 +1,51 @@
+import { $isParagraphNode, LexicalNode } from 'lexical';
+import { $isHeadingNode, $isQuoteNode } from '@lexical/rich-text';
+import {$isListItemNode} from "@lexical/list"
+export const getNodePlaceholder = (lexicalNode: LexicalNode) => {
+   let placeholder;
+
+   
+   if ($isHeadingNode(lexicalNode)) {
+      const tag = lexicalNode.getTag();
+      placeholder = 'Heading'
+      switch (tag) {
+         case 'h1': {
+            placeholder += ' 1';
+            break;
+         }
+         case 'h2': {
+            placeholder += ' 2';
+            break;
+         }
+         case 'h3': {
+            placeholder += ' 3';
+            break;
+         }
+         case 'h4': {
+            placeholder += ' 4';
+            break;
+         }
+         case 'h5': {
+            placeholder += '5';
+            break;
+         }
+         case 'h6': {
+            placeholder += '6';
+            break;
+         }
+      }
+   }
+   if($isListItemNode(lexicalNode)){     
+      placeholder = "list"
+   }
+   if($isQuoteNode(lexicalNode)){
+      placeholder = "Quote"
+   }
+   
+   if ($isParagraphNode(lexicalNode)) {
+      
+      placeholder = "Press '/' for command";
+   }
+
+   return placeholder;
+};

package/src/components/editor/utils/setNodePlaceholderFromSelection/setNodePlaceholderFromSelection.ts

@@ -0,0 +1,15 @@
+
+import { $getSelection, $isRangeSelection, LexicalEditor } from 'lexical';
+import { setPlaceholderOnSelection } from './setPlaceholderOnSelection';
+
+export const setNodePlaceholderFromSelection = (
+   editor: LexicalEditor,
+): void => {
+   editor.getEditorState().read(() => {
+      const selection = $getSelection();
+      if (!$isRangeSelection(selection)) {
+         return;
+      }
+      setPlaceholderOnSelection({ selection, editor });
+   });
+};

package/src/components/editor/utils/setNodePlaceholderFromSelection/setPlaceholderOnSelection.ts

@@ -0,0 +1,114 @@
+import { LexicalEditor, PointType, RangeSelection } from 'lexical';
+import { getAllLexicalChildren } from '../getAllLexicalChildren';
+import { getNodePlaceholder } from './getNodePlaceholder';
+
+import './styles.css';
+import { $isCollapsibleContainerNode } from '../../nodes/CollapsibleNode/CollapsibleContainerNode';
+import { $isCollapsibleContentNode } from '../../nodes/CollapsibleNode/CollapsibleContentNode';
+
+const PLACEHOLDER_CLASS_NAME = 'node-placeholder';
+
+const isHtmlHeadingElement = (el: HTMLElement): el is HTMLHeadingElement => {
+   return el instanceof HTMLHeadingElement;
+};
+
+export const setPlaceholderOnSelection = ({
+   selection,
+   editor,
+}: {
+   selection: RangeSelection;
+   editor: LexicalEditor;
+}): void => {
+   /**
+    * 1. Get all lexical nodes as HTML elements
+    */
+   const children = getAllLexicalChildren(editor);
+   
+   
+   /**
+    * 2. Remove "placeholder" class if it was added before
+    */
+   const removePlaceholderClass = (element: HTMLElement) => {
+      if (!element) return;
+   
+      // Remove the placeholder class from the current element
+      if (element.classList.contains(PLACEHOLDER_CLASS_NAME)) {
+         element.classList.remove(PLACEHOLDER_CLASS_NAME);
+         element.removeAttribute('data-placeholder');
+      }
+   
+      // Recursively process child elements
+      Array.from(element.children).forEach(child => {
+         if (child instanceof HTMLElement) {
+            removePlaceholderClass(child);
+         }
+      });
+   };
+   
+   children.forEach(({ htmlElement,node  }:any) => {
+      if (!htmlElement) {
+         return;
+      }
+
+      if (isHtmlHeadingElement(htmlElement)) {         
+         return;
+      }
+    
+      
+      
+      const classList = htmlElement.classList;
+      if (node.__type === 'collapsible-container') {
+         removePlaceholderClass(htmlElement);
+         return;
+      }
+      if (node.__type === 'table') {
+         removePlaceholderClass(htmlElement);
+         return;
+      }
+      if(node.__type==="layout-container"){
+         removePlaceholderClass(htmlElement);
+      }
+      if (classList.length && classList.contains(PLACEHOLDER_CLASS_NAME)) {         
+         classList.remove(PLACEHOLDER_CLASS_NAME);
+         htmlElement.removeAttribute('data-placeholder');
+
+      }
+   });
+
+   /**
+    * 3. Do nothing if there is only one lexical child,
+    *  because we already have a placeholder
+    *  in <RichTextPlugin/> component
+    *  With on exception: If we converted default node to the "Heading"
+    */
+   if (
+      children.length === 1 &&
+      children[0].htmlElement &&
+      !isHtmlHeadingElement(children[0].htmlElement) 
+   ) {
+      return;
+   }
+
+   /**
+    * 4. Get "PointType" object, that contain Nodes data
+    * (that is selected)
+    * {
+    *    key: "5", <- Node's key
+    *    offset: 7,
+    *    type: "text"
+    * }
+    */
+   const anchor: PointType = selection.anchor;
+
+   /**
+    * 5. Get placeholder for type ('heading'/'paragraph'/etc...)
+    */
+   const placeholder = getNodePlaceholder(anchor.getNode());
+
+   if (placeholder) {
+      const selectedHtmlElement = editor.getElementByKey(anchor.key);
+      
+      selectedHtmlElement?.classList.add(PLACEHOLDER_CLASS_NAME);
+      selectedHtmlElement?.setAttribute('data-placeholder', placeholder);
+   }
+};

package/src/components/editor/utils/setNodePlaceholderFromSelection/styles.css

@@ -0,0 +1,6 @@
+.node-placeholder:has(br):not(:has(span))::before {
+    position: absolute;
+    content: attr(data-placeholder);
+    color: rgba(136, 136, 136, 0.6);
+    
+}

package/src/components/editor/utils/url.ts

@@ -0,0 +1,109 @@
+
+
+const SUPPORTED_URL_PROTOCOLS = new Set([
+    'http:',
+    'https:',
+    'mailto:',
+    'sms:',
+    'tel:',
+    'ftp:',
+  ]);
+  
+  export function sanitizeUrl(url: string): string {
+    try {
+      const parsedUrl = new URL(url);
+      // eslint-disable-next-line no-script-url
+      if (!SUPPORTED_URL_PROTOCOLS.has(parsedUrl.protocol)) {
+        return 'about:blank';
+      }
+    } catch {
+      return url;
+    }
+    return url;
+  }
+  
+  // Source: https://stackoverflow.com/a/8234912/2013580
+  const urlRegExp = new RegExp(
+    /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)/,
+  );
+  export function validateUrl(url: string): boolean {
+    // TODO Fix UI for link insertion; it should never default to an invalid URL such as https://.
+    // Maybe show a dialog where they user can type the URL before inserting it.
+    return url === 'https://' || urlRegExp.test(url);
+}
+interface Metadata{
+  title:string,
+  description:string,
+  image:string | undefined
+  website:string,
+  logo:string
+
+}
+
+export async function fetchMetadata(url: string): Promise<Metadata> {
+  try {
+    const proxyUrl = "https://api.allorigins.win/get?url=";
+    const response = await fetch(`${proxyUrl}${encodeURIComponent(url)}`);
+    const data = await response.json();
+
+    // Extract the HTML content from the proxy response
+    const html = data.contents;
+
+    // Parse the HTML using DOMParser
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, "text/html");
+
+    // Helper function to extract meta tag content
+    const getMetaTagContent = (property: string) => {
+      const element =
+        doc.querySelector(`meta[property="${property}"]`) ||
+        doc.querySelector(`meta[name="${property}"]`);
+      return element ? element.getAttribute("content") : null;
+    };
+
+    // Helper function to extract favicon or logo
+    const getFavicon = () => {
+      // Check for common favicon locations
+      const favicon =
+        doc.querySelector('link[rel="icon"]') ||
+        doc.querySelector('link[rel="shortcut icon"]') ||
+        doc.querySelector('link[rel="apple-touch-icon"]');
+
+      if (favicon) {
+        const href = favicon.getAttribute("href");
+        if (href) {
+          // Resolve relative URLs to absolute URLs
+          return new URL(href, url).toString();
+        }
+      }
+
+      // Fallback to default favicon location
+      return new URL("/favicon.ico", url).toString();
+    };
+
+    // Extract metadata
+    const metadata = {
+      title:
+        doc.querySelector("title")?.textContent ||
+        getMetaTagContent("og:title") ||
+        "No title",
+      description:
+        getMetaTagContent("og:description") ||
+        getMetaTagContent("description") ||
+        "No description",
+      image: getMetaTagContent("og:image") || undefined, // Use a valid fallback image URL
+      website: getMetaTagContent("og:site_name") || new URL(url).hostname, // Use hostname as fallback
+      logo: getFavicon(), // Extract favicon or logo
+    };
+
+    return metadata;
+  } catch (error) {
+    return {
+      title: "No title",
+      description: "No description",
+      image: undefined,
+      website: new URL(url).hostname,
+      logo: new URL("/favicon.ico", url).toString(), // Fallback to default favicon
+    };
+  }
+}

package/src/components/editor/utils/useLayoutEffect.ts

@@ -0,0 +1,13 @@
+
+
+import {useEffect, useLayoutEffect} from 'react';
+import { CAN_USE_DOM } from './canUseDOM';
+
+// This workaround is no longer necessary in React 19,
+// but we currently support React >=17.x
+// https://github.com/facebook/react/pull/26395
+const useLayoutEffectImpl: typeof useLayoutEffect = CAN_USE_DOM
+  ? useLayoutEffect
+  : useEffect;
+
+export default useLayoutEffectImpl;