@collabchron/notiq 0.2.0 → 1.0.0

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

@@ -1,275 +0,0 @@
-  import {  $isCodeHighlightNode } from "@lexical/code";
-  import { $isLinkNode } from "@lexical/link";
-  import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-  import {
-
-    $findMatchingParent,
-    $getNearestNodeOfType,
-    mergeRegister,
-  } from "@lexical/utils";
-  import {
-    $getSelection,
-    $isParagraphNode,
-    $isRangeSelection,
-    $isRootOrShadowRoot,
-    $isTextNode,
-    getDOMSelection,
-    LexicalEditor,
-  } from "lexical";
-  import { Dispatch, useCallback, useEffect, useState } from "react";
-  import * as React from "react";
-  import { createPortal } from "react-dom";
-
-  import { getSelectedNode } from "../../utils/getSelectedNode";
-
-  import { blockTypeToBlockName } from "@/components/providers/ToolbarContext";
-  // import TextFormatFloatingToolbar from "@/components/ui/floting-text/write/text-format-floting-toolbar";
-  import {
-    $getSelectionStyleValueForProperty,
-  } from "@lexical/selection";
-
-  import { useRef } from "react";
-  import { $isTableNode } from "@lexical/table";
-  import { $isListNode, ListNode } from "@lexical/list";
-  import { $isHeadingNode } from "@lexical/rich-text";
-import TextFormatFloatingToolbar from "@/components/ui/write/text-format-floting-toolbar";
-
-  function useFloatingTextFormatToolbar(
-    editor: LexicalEditor,
-    anchorElem: HTMLElement,
-    setIsLinkEditMode: Dispatch<boolean>
-  ): React.JSX.Element | null {
-    const [isText, setIsText] = useState(false);
-    const [isLink, setIsLink] = useState(false);
-    const [isBold, setIsBold] = useState(false);
-    const [isItalic, setIsItalic] = useState(false);
-    const [isUnderline, setIsUnderline] = useState(false);
-    const [isStrikethrough, setIsStrikethrough] = useState(false);
-    const [isCode, setIsCode] = useState(false);
-    const [fontColor, setFontColor] = useState<string>("#000000");
-    const [bgColor, setBgColor] = useState<string>("#ffffff");
-    const [fontFamily, setFontFamily] = useState<string>("Arial");
-    const [blockType, setBlockType] =useState<keyof typeof blockTypeToBlockName>("paragraph");
-    const [isUppercase, setIsUppercase] = useState(false);
-    const [isLowercase, setIsLowercase] = useState(false);
-    const [isCapitalize, setIsCapitalize] = useState(false);
-    const [isSubscript, setIsSubscript] = useState(false);
-    const [isSuperscript, setIsSuperscript] = useState(false);
-    const [rootType, setRootType] = useState<"root" | "table">("root");
-    const [textAlign, setTextAlign] = useState<
-      "left" | "center" | "right" | "justify" | null
-    >(null);
-    const [fontSize, setFontSize] = useState<string>("16px");
-
-    const toolbarRef = useRef<HTMLDivElement>(null);
-
-    const updatePopup = useCallback(() => {
-      editor.getEditorState().read(() => {
-        if (editor.isComposing()) {
-          return;
-        }
-        const selection = $getSelection();
-        const nativeSelection = getDOMSelection(editor._window);
-        const rootElement = editor.getRootElement();
-        const aiElement = document.querySelector(".AI-format");
-    
-
-
-      
-        
-        
-        if (
-          nativeSelection &&
-          nativeSelection.anchorNode instanceof HTMLElement &&
-          nativeSelection.anchorNode.closest(".dropdown-portal")
-        ) {
-          return;
-        }
-        
-        if (
-          nativeSelection !== null &&
-          (!$isRangeSelection(selection) ||
-            rootElement === null ||
-            !rootElement.contains(nativeSelection.anchorNode)) && 
-            !toolbarRef?.current?.contains(nativeSelection.anchorNode) && !(aiElement && aiElement.contains(nativeSelection.anchorNode))
-
-        ) {
-          setIsText(false);
-          return;
-        }
-
-        if (!$isRangeSelection(selection)) {
-          return;
-        }
-
-        const node = getSelectedNode(selection);
-
-        // Update text format
-        setIsBold(selection.hasFormat('bold'));
-        setIsItalic(selection.hasFormat('italic'));
-        setIsUnderline(selection.hasFormat('underline'));
-        setIsStrikethrough(selection.hasFormat('strikethrough'));
-        setIsSubscript(selection.hasFormat('subscript'));
-        setIsLowercase(selection.hasFormat('lowercase'));
-        setIsUppercase(selection.hasFormat('uppercase'));
-        setIsCapitalize(selection.hasFormat('capitalize'));
-        setIsSubscript(selection.hasFormat('subscript'));
-        setIsSuperscript(selection.hasFormat('superscript'));
-
-        setIsCode(selection.hasFormat('code'));
-        const size = $getSelectionStyleValueForProperty(
-          selection,
-          "font-size",
-          "16px"
-        );
-        setFontSize(size);
-        const alignment = $getSelectionStyleValueForProperty(
-          selection,
-          "text-align",
-          "left"
-        );
-        setTextAlign(alignment as "left" | "center" | "right" | "justify" | null);
-
-        // Update links
-        const parent = node.getParent();
-        if ($isLinkNode(parent) || $isLinkNode(node)) {
-          setIsLink(true);
-        } else {
-          setIsLink(false);
-        }
-
-        if (
-          !$isCodeHighlightNode(selection.anchor.getNode()) &&
-          selection.getTextContent() !== ''
-        ) {
-          setIsText($isTextNode(node) || $isParagraphNode(node));
-        } else {
-          setIsText(false);
-        }
-
-        const rawTextContent = selection.getTextContent().replace(/\n/g, '');
-        if (!selection.isCollapsed() && rawTextContent === '') {
-          setIsText(false);
-          return;
-        }
-        setFontFamily(
-          $getSelectionStyleValueForProperty(selection, "font-family", "Arial")
-        );
-        setFontColor($getSelectionStyleValueForProperty(selection, "color"));
-        setBgColor(
-          $getSelectionStyleValueForProperty(selection, "background-color")
-        );
-        const tableNode = $findMatchingParent(node, $isTableNode);
-        if ($isTableNode(tableNode)) {
-          setRootType("table");
-        } else {
-          setRootType("root");
-        }
-
-        const anchorNode = selection.anchor.getNode();
-        let element =
-          anchorNode.getKey() === "root"
-            ? anchorNode
-            : $findMatchingParent(anchorNode, (e) => {
-                const parent = e.getParent();
-                return parent !== null && $isRootOrShadowRoot(parent);
-              });
-        if ($isListNode(element)) {
-          const parentList = $getNearestNodeOfType<ListNode>(
-            anchorNode,
-            ListNode
-          );
-
-          const type = parentList
-            ? parentList.getListType()
-            : element.getListType();
-          setBlockType(type);
-        } else {
-          const type = $isHeadingNode(element)
-            ? element.getTag()
-            : // @ts-ignore
-              element.getType();
-          setBlockType(type as keyof typeof blockTypeToBlockName);
-        }
-      });
-    }, [editor]);
-
-    useEffect(() => {
-      const handleSelectionChange = () => {
-        if (toolbarRef.current && toolbarRef.current.contains(document.activeElement)) {
-          return;
-        }
-        updatePopup();
-      };
-
-      document.addEventListener('selectionchange', handleSelectionChange);
-      return () => {
-        document.removeEventListener('selectionchange', handleSelectionChange);
-      };
-    }, [updatePopup]);
-
-    useEffect(() => {
-      return mergeRegister(
-        editor.registerUpdateListener(() => {
-          updatePopup();
-        }),
-        editor.registerRootListener(() => {
-          if (editor.getRootElement() === null) {
-            setIsText(false);
-          }
-        })
-      );
-    }, [editor, updatePopup]);
-
-    
-    
-    if (!isText) {
-      return null;
-    }
-
-    return createPortal(
-      <div ref={toolbarRef}>
-        <TextFormatFloatingToolbar
-          editor={editor}
-          anchorElem={anchorElem}
-          isLink={isLink}
-          isBold={isBold}
-          isItalic={isItalic}
-          isStrikethrough={isStrikethrough}
-          isUnderline={isUnderline}
-          isCode={isCode}
-          fontColor={fontColor}
-          bgColor={bgColor}
-          blockType={blockType}
-          fontFamily={fontFamily}
-          setIsLinkEditMode={setIsLinkEditMode}
-          isUppercase={isUppercase}
-          rootType={rootType}
-          textAlign={textAlign}
-          isLowercase={isLowercase}
-          isCapitalize={isCapitalize}
-          isSubscript={isSubscript}
-          fontSize={fontSize}
-          isSuperscript={isSuperscript}
-          />
-      </div>,
-      anchorElem
-    );
-  }
-
-
-  export default function FloatingTextFormatToolbarPlugin({
-    anchorElem = document.body,
-    setIsLinkEditMode,
-  }: {
-    anchorElem?: HTMLElement;
-    setIsLinkEditMode: Dispatch<boolean>;
-  }): React.JSX.Element | null {
-    const [editor] = useLexicalComposerContext();
- 
-    return useFloatingTextFormatToolbar(editor, anchorElem, setIsLinkEditMode);
-
-    // if (editor.isEditable())
-    //   return useFloatingTextFormatToolbar(editor, anchorElem, setIsLinkEditMode);
-    // else return useFloatingTextReadMode(editor, anchorElem);
-  }

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

@@ -1,351 +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 {Position} from '../../nodes/InlineImageNode/InlineImageNode';
-import type {JSX} from 'react';
-
-import '../../nodes/InlineImageNode/InlineImageNode.css';
-
-import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {$wrapNodeInElement, mergeRegister} from '@lexical/utils';
-import {
-  $createParagraphNode,
-  $createRangeSelection,
-  $getSelection,
-  $insertNodes,
-  $isNodeSelection,
-  $isRootOrShadowRoot,
-  $setSelection,
-  COMMAND_PRIORITY_EDITOR,
-  COMMAND_PRIORITY_HIGH,
-  COMMAND_PRIORITY_LOW,
-  createCommand,
-  DRAGOVER_COMMAND,
-  DRAGSTART_COMMAND,
-  DROP_COMMAND,
-  getDOMSelectionFromTarget,
-  isHTMLElement,
-  LexicalCommand,
-  LexicalEditor,
-} from 'lexical';
-import * as React from 'react';
-import {useEffect, useRef, useState} from 'react';
-
-import {
-  $createInlineImageNode,
-  $isInlineImageNode,
-  InlineImageNode,
-  InlineImagePayload,
-} from '../../nodes/InlineImageNode/InlineImageNode';
-import { Button } from '@/components/ui/button';
-import TextInput from '@/components/ui/TextInput';
-import FileInput from '@/components/ui/FileInput';
-import Select from '@/components/ui/Select';
-import { DialogActions } from '@/components/ui/dialog/Dialog';
-
-export type InsertInlineImagePayload = Readonly<InlineImagePayload>;
-
-export const INSERT_INLINE_IMAGE_COMMAND: LexicalCommand<InlineImagePayload> =
-  createCommand('INSERT_INLINE_IMAGE_COMMAND');
-
-export function InsertInlineImageDialog({
-  activeEditor,
-  onClose,
-}: {
-  activeEditor: LexicalEditor;
-  onClose: () => void;
-}): JSX.Element {
-  const hasModifier = useRef(false);
-
-  const [src, setSrc] = useState('');
-  const [altText, setAltText] = useState('');
-  const [showCaption, setShowCaption] = useState(false);
-  const [position, setPosition] = useState<Position>('left');
-
-  const isDisabled = src === '';
-
-  const handleShowCaptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setShowCaption(e.target.checked);
-  };
-
-  const handlePositionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setPosition(e.target.value as Position);
-  };
-
-  const loadImage = (files: FileList | null) => {
-    const reader = new FileReader();
-    reader.onload = function () {
-      if (typeof reader.result === 'string') {
-        setSrc(reader.result);
-      }
-      return '';
-    };
-    if (files !== null) {
-      reader.readAsDataURL(files[0]);
-    }
-  };
-
-  useEffect(() => {
-    hasModifier.current = false;
-    const handler = (e: KeyboardEvent) => {
-      hasModifier.current = e.altKey;
-    };
-    document.addEventListener('keydown', handler);
-    return () => {
-      document.removeEventListener('keydown', handler);
-    };
-  }, [activeEditor]);
-
-  const handleOnClick = () => {
-    const payload = {altText, position, showCaption, src};
-    activeEditor.dispatchCommand(INSERT_INLINE_IMAGE_COMMAND, payload);
-    onClose();
-  };
-
-  return (
-    <>
-      <div style={{marginBottom: '1em'}}>
-        <FileInput
-          label="Image Upload"
-          onChange={loadImage}
-          accept="image/*"
-          data-test-id="image-modal-file-upload"
-        />
-      </div>
-      <div style={{marginBottom: '1em'}}>
-        <TextInput
-          label="Alt Text"
-          placeholder="Descriptive alternative text"
-          onChange={setAltText}
-          value={altText}
-          data-test-id="image-modal-alt-text-input"
-        />
-      </div>
-
-      <Select
-        style={{marginBottom: '1em', width: '290px'}}
-        label="Position"
-        name="position"
-        id="position-select"
-        onChange={handlePositionChange}>
-        <option value="left">Left</option>
-        <option value="right">Right</option>
-        <option value="full">Full Width</option>
-      </Select>
-
-      <div className="Input__wrapper">
-        <input
-          id="caption"
-          className="InlineImageNode_Checkbox"
-          type="checkbox"
-          checked={showCaption}
-          onChange={handleShowCaptionChange}
-        />
-        <label htmlFor="caption">Show Caption</label>
-      </div>
-
-      <DialogActions>
-        <Button
-          data-test-id="image-modal-file-upload-btn"
-          disabled={isDisabled}
-          onClick={() => handleOnClick()}>
-          Confirm
-        </Button>
-      </DialogActions>
-    </>
-  );
-}
-
-export default function InlineImagePlugin(): JSX.Element | null {
-  const [editor] = useLexicalComposerContext();
-
-  useEffect(() => {
-    if (!editor.hasNodes([InlineImageNode])) {
-      throw new Error('ImagesPlugin: ImageNode not registered on editor');
-    }
-
-    return mergeRegister(
-      editor.registerCommand<InsertInlineImagePayload>(
-        INSERT_INLINE_IMAGE_COMMAND,
-        (payload) => {
-          const imageNode = $createInlineImageNode(payload);
-          $insertNodes([imageNode]);
-          if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
-            $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
-          }
-
-          return true;
-        },
-        COMMAND_PRIORITY_EDITOR,
-      ),
-      editor.registerCommand<DragEvent>(
-        DRAGSTART_COMMAND,
-        (event) => {
-          return $onDragStart(event);
-        },
-        COMMAND_PRIORITY_HIGH,
-      ),
-      editor.registerCommand<DragEvent>(
-        DRAGOVER_COMMAND,
-        (event) => {
-          return $onDragover(event);
-        },
-        COMMAND_PRIORITY_LOW,
-      ),
-      editor.registerCommand<DragEvent>(
-        DROP_COMMAND,
-        (event) => {
-          return $onDrop(event, editor);
-        },
-        COMMAND_PRIORITY_HIGH,
-      ),
-    );
-  }, [editor]);
-
-  return null;
-}
-
-const TRANSPARENT_IMAGE =
-  'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
-
-// Create the transparent image lazily when needed
-function getTransparentImage(): HTMLImageElement {
-  if (typeof document === 'undefined') {
-    // Return a mock object for SSR
-    return {} as HTMLImageElement;
-  }
-  
-  const img = document.createElement('img');
-  img.src = TRANSPARENT_IMAGE;
-  return img;
-}
-
-function $onDragStart(event: DragEvent): boolean {
-  const node = $getImageNodeInSelection();
-  if (!node) {
-    return false;
-  }
-  const dataTransfer = event.dataTransfer;
-  if (!dataTransfer) {
-    return false;
-  }
-  
-  dataTransfer.setData('text/plain', '_');
-  
-  // Only create the image if document is available
-  if (typeof document !== 'undefined') {
-    const img = getTransparentImage();
-    dataTransfer.setDragImage(img, 0, 0);
-  }
-  
-  dataTransfer.setData(
-    'application/x-lexical-drag',
-    JSON.stringify({
-      data: {
-        altText: node.__altText,
-        caption: node.__caption,
-        height: node.__height,
-        key: node.getKey(),
-        showCaption: node.__showCaption,
-        src: node.__src,
-        width: node.__width,
-      },
-      type: 'image',
-    }),
-  );
-
-  return true;
-}
-
-function $onDragover(event: DragEvent): boolean {
-  const node = $getImageNodeInSelection();
-  if (!node) {
-    return false;
-  }
-  if (!canDropImage(event)) {
-    event.preventDefault();
-  }
-  return true;
-}
-
-function $onDrop(event: DragEvent, editor: LexicalEditor): boolean {
-  const node = $getImageNodeInSelection();
-  if (!node) {
-    return false;
-  }
-  const data = getDragImageData(event);
-  if (!data) {
-    return false;
-  }
-  event.preventDefault();
-  if (canDropImage(event)) {
-    const range = getDragSelection(event);
-    node.remove();
-    const rangeSelection = $createRangeSelection();
-    if (range !== null && range !== undefined) {
-      rangeSelection.applyDOMRange(range);
-    }
-    $setSelection(rangeSelection);
-    editor.dispatchCommand(INSERT_INLINE_IMAGE_COMMAND, data);
-  }
-  return true;
-}
-
-function $getImageNodeInSelection(): InlineImageNode | null {
-  const selection = $getSelection();
-  if (!$isNodeSelection(selection)) {
-    return null;
-  }
-  const nodes = selection.getNodes();
-  const node = nodes[0];
-  return $isInlineImageNode(node) ? node : null;
-}
-
-function getDragImageData(event: DragEvent): null | InsertInlineImagePayload {
-  const dragData = event.dataTransfer?.getData('application/x-lexical-drag');
-  if (!dragData) {
-    return null;
-  }
-  const {type, data} = JSON.parse(dragData);
-  if (type !== 'image') {
-    return null;
-  }
-
-  return data;
-}
-
-declare global {
-  interface DragEvent {
-    rangeOffset?: number;
-    rangeParent?: Node;
-  }
-}
-
-function canDropImage(event: DragEvent): boolean {
-  const target = event.target;
-  return !!(
-    isHTMLElement(target) &&
-    !target.closest('code, span.editor-image') &&
-    isHTMLElement(target.parentElement) &&
-    target.parentElement.closest('div.ContentEditable__root')
-  );
-}
-
-function getDragSelection(event: DragEvent): Range | null | undefined {
-  let range;
-  const domSelection = getDOMSelectionFromTarget(event.target);
-  if (document.caretRangeFromPoint) {
-    range = document.caretRangeFromPoint(event.clientX, event.clientY);
-  } else if (event.rangeParent && domSelection !== null) {
-    domSelection.collapse(event.rangeParent, event.rangeOffset || 0);
-    range = domSelection.getRangeAt(0);
-  } else {
-    throw Error('Cannot get the selection when dragging');
-  }
-
-  return range;
-}