@collabchron/notiq 0.3.0 → 1.0.1

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

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

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

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

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

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

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

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

package/src/components/providers/QueryProvider.tsx

@@ -1,15 +0,0 @@
-"use client";
-
-import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
-import { useState } from "react";
-
-interface Props {
-  children: React.ReactNode;
-}
-
-export default function QueryProvider({ children }: Props) {
-  const [queryClient] = useState(() => new QueryClient());
-  return (
-    <QueryClientProvider client={queryClient}> {children} </QueryClientProvider>
-  );
-}

package/src/components/providers/SharedHistoryContext.tsx

@@ -1,28 +0,0 @@
-"use client"
-import type {HistoryState} from '@lexical/react/LexicalHistoryPlugin';
-import {createEmptyHistoryState} from '@lexical/react/LexicalHistoryPlugin';
-
-import * as React from 'react';
-import {createContext, ReactNode, useContext, useMemo} from 'react';
-
-type ContextShape = {
-  historyState?: HistoryState;
-};
-
-const Context: React.Context<ContextShape> = createContext({});
-
-export const SharedHistoryContext = ({
-  children,
-}: {
-  children: ReactNode;
-}) => {
-  const historyContext = useMemo(
-    () => ({historyState: createEmptyHistoryState()}),
-    [],
-  );
-  return <Context.Provider value={historyContext}>{children}</Context.Provider>;
-};
-
-export const useSharedHistoryContext = (): ContextShape => {
-  return useContext(Context);
-};

package/src/components/providers/ToolbarContext.tsx

@@ -1,123 +0,0 @@
-"use client"
-import {ElementFormatType} from 'lexical';
-import React, {
-  createContext,
-  ReactNode,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-
-export const MIN_ALLOWED_FONT_SIZE = 8;
-export const MAX_ALLOWED_FONT_SIZE = 72;
-export const DEFAULT_FONT_SIZE = 15;
-
-const rootTypeToRootName = {
-  root: 'Root',
-  table: 'Table',
-};
-
-export const blockTypeToBlockName = {
-  bullet: 'Bulleted List',
-  check: 'Check List',
-  code: 'Code Block',
-  h1: 'Heading 1',
-  h2: 'Heading 2',
-  h3: 'Heading 3',
-  h4: 'Heading 4',
-  h5: 'Heading 5',
-  h6: 'Heading 6',
-  number: 'Numbered List',
-  paragraph: 'Normal',
-  quote: 'Quote',
-};
-
-const INITIAL_TOOLBAR_STATE = {
-  bgColor: '#fff',
-  blockType: 'paragraph' as keyof typeof blockTypeToBlockName,
-  canRedo: false,
-  canUndo: false,
-  codeLanguage: '',
-  elementFormat: 'left' as ElementFormatType,
-  fontColor: '#000',
-  fontFamily: 'Arial',
-  // Current font size in px
-  fontSize: `${DEFAULT_FONT_SIZE}px`,
-  // Font size input value - for controlled input
-  fontSizeInputValue: `${DEFAULT_FONT_SIZE}`,
-  isBold: false,
-  isCode: false,
-  isImageCaption: false,
-  isItalic: false,
-  isLink: false,
-  isRTL: false,
-  isStrikethrough: false,
-  isSubscript: false,
-  isSuperscript: false,
-  isUnderline: false,
-  isLowercase: false,
-  isUppercase: false,
-  isCapitalize: false,
-  rootType: 'root' as keyof typeof rootTypeToRootName,
-};
-
-type ToolbarState = typeof INITIAL_TOOLBAR_STATE;
-
-// Utility type to get keys and infer value types
-type ToolbarStateKey = keyof ToolbarState;
-type ToolbarStateValue<Key extends ToolbarStateKey> = ToolbarState[Key];
-
-export type ContextShape = {
-  toolbarState: ToolbarState;
-  updateToolbarState<Key extends ToolbarStateKey>(
-    key: Key,
-    value: ToolbarStateValue<Key>,
-  ): void;
-};
-
-
-const Context = createContext<ContextShape | undefined>(undefined);
-
-export const ToolbarContext = ({
-  children,
-}: {
-  children: ReactNode;
-}) => {
-  const [toolbarState, setToolbarState] = useState(INITIAL_TOOLBAR_STATE);
-  const selectionFontSize = toolbarState.fontSize;
-
-  const updateToolbarState = useCallback(
-    <Key extends ToolbarStateKey>(key: Key, value: ToolbarStateValue<Key>) => {
-      setToolbarState((prev) => ({
-        ...prev,
-        [key]: value,
-      }));
-    },
-    [],
-  );
-
-  useEffect(() => {
-    updateToolbarState('fontSizeInputValue', selectionFontSize.slice(0, -2));
-  }, [selectionFontSize, updateToolbarState]);
-
-  const contextValue = useMemo(() => {
-    return {
-      toolbarState,
-      updateToolbarState,
-    };
-  }, [toolbarState, updateToolbarState]);
-
-  return <Context.Provider value={contextValue}>{children}</Context.Provider>;
-};
-
-export const useToolbarState = () => {
-  const context = useContext(Context);
-
-  if (context === undefined) {
-    throw new Error('useToolbarState must be used within a ToolbarProvider');
-  }
-
-  return context;
-};

package/src/components/providers/theme-provider.tsx

@@ -1,11 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { ThemeProvider as NextThemesProvider } from "next-themes"
-
-export function ThemeProvider({
-  children,
-  ...props
-}: React.ComponentProps<typeof NextThemesProvider>) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
-}

package/src/components/theme/ModeToggle.tsx

@@ -1,40 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Moon, Sun } from "lucide-react"
-import { useTheme } from "next-themes"
-
-import { Button } from "@/components/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-
-export function ModeToggle() {
-  const { setTheme } = useTheme()
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant={"outline"} size={"Toolbar"} type="button" className="border-none">
-          <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
-          <span className="sr-only">Toggle theme</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme("light")}>
-          Light
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>
-          Dark
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")}>
-          System
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}

package/src/components/ui/FileInput.tsx

@@ -1,40 +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 './Input.css';
-
-import * as React from 'react';
-
-type Props = Readonly<{
-  'data-test-id'?: string;
-  accept?: string;
-  label: string;
-  onChange: (files: FileList | null) => void;
-}>;
-
-export default function FileInput({
-  accept,
-  label,
-  onChange,
-  'data-test-id': dataTestId,
-}: Props): JSX.Element {
-  return (
-    <div className="Input__wrapper">
-      <label className="Input__label">{label}</label>
-      <input
-        type="file"
-        accept={accept}
-        className="Input__input"
-        onChange={(e) => onChange(e.target.files)}
-        data-test-id={dataTestId}
-      />
-    </div>
-  );
-}

package/src/components/ui/Input.css

@@ -1,32 +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.
- *
- *
- */
-
-.Input__wrapper {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-bottom: 10px;
-}
-.Input__label {
-  display: flex;
-  flex: 1;
-  color: #666;
-}
-.Input__input {
-  display: flex;
-  flex: 2;
-  border: 1px solid #999;
-  padding-top: 7px;
-  padding-bottom: 7px;
-  padding-left: 10px;
-  padding-right: 10px;
-  font-size: 16px;
-  border-radius: 5px;
-  min-width: 0;
-}

package/src/components/ui/Select.css

@@ -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.
- *
- */
-
-select {
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  background-color: transparent;
-  border: none;
-  padding: 0 1em 0 0;
-  margin: 0;
-  font-family: inherit;
-  font-size: inherit;
-  cursor: inherit;
-  line-height: inherit;
-
-  z-index: 1;
-  outline: none;
-}
-
-:root {
-  --select-border: #393939;
-  --select-focus: #101484;
-  --select-arrow: var(--select-border);
-}
-
-.select {
-  min-width: 160px;
-  max-width: 290px;
-  border: 1px solid var(--select-border);
-  border-radius: 0.25em;
-  padding: 0.25em 0.5em;
-  font-size: 1rem;
-  cursor: pointer;
-  line-height: 1.4;
-  background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
-}