@collabchron/notiq 0.3.0 → 1.0.1

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

@@ -1,127 +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 {LexicalCommand, LexicalEditor, RangeSelection} from 'lexical';
-
-import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {
-  $getSelection,
-  $isRangeSelection,
-  COMMAND_PRIORITY_EDITOR,
-  createCommand,
-  REDO_COMMAND,
-  UNDO_COMMAND,
-} from 'lexical';
-import {useEffect, useRef, useState} from 'react';
-import useReport from '../../hooks/useReport';
-
-
-export const SPEECH_TO_TEXT_COMMAND: LexicalCommand<boolean> = createCommand(
-  'SPEECH_TO_TEXT_COMMAND',
-);
-
-const VOICE_COMMANDS: Readonly<
-  Record<
-    string,
-    (arg0: {editor: LexicalEditor; selection: RangeSelection}) => void
-  >
-> = {
-  '\n': ({selection}) => {
-    selection.insertParagraph();
-  },
-  redo: ({editor}) => {
-    editor.dispatchCommand(REDO_COMMAND, undefined);
-  },
-  undo: ({editor}) => {
-    editor.dispatchCommand(UNDO_COMMAND, undefined);
-  },
-};
-
-export const SUPPORT_SPEECH_RECOGNITION: boolean =
-  typeof window !== "undefined" &&
-  ("SpeechRecognition" in window || "webkitSpeechRecognition" in window);
-
-
-function SpeechToTextPlugin(): null {
-  const [editor] = useLexicalComposerContext();
-  const [isEnabled, setIsEnabled] = useState<boolean>(false);
-  const SpeechRecognition =
-    // @ts-expect-error missing type
-    window.SpeechRecognition || window.webkitSpeechRecognition;
-  const recognition = useRef<typeof SpeechRecognition | null>(null);
-  const report = useReport();
-
-  useEffect(() => {
-    if (isEnabled && recognition.current === null) {
-      recognition.current = new SpeechRecognition();
-      recognition.current.continuous = true;
-      recognition.current.interimResults = true;
-      recognition.current.addEventListener(
-        'result',
-        (event: typeof SpeechRecognition) => {
-          const resultItem = event.results.item(event.resultIndex);
-          const {transcript} = resultItem.item(0);
-          report(transcript);
-
-          if (!resultItem.isFinal) {
-            return;
-          }
-
-          editor.update(() => {
-            const selection = $getSelection();
-
-            if ($isRangeSelection(selection)) {
-              const command = VOICE_COMMANDS[transcript.toLowerCase().trim()];
-
-              if (command) {
-                command({
-                  editor,
-                  selection,
-                });
-              } else if (transcript.match(/\s*\n\s*/)) {
-                selection.insertParagraph();
-              } else {
-                selection.insertText(transcript);
-              }
-            }
-          });
-        },
-      );
-    }
-
-    if (recognition.current) {
-      if (isEnabled) {
-        recognition.current.start();
-      } else {
-        recognition.current.stop();
-      }
-    }
-
-    return () => {
-      if (recognition.current !== null) {
-        recognition.current.stop();
-      }
-    };
-  }, [SpeechRecognition, editor, isEnabled, report]);
-  useEffect(() => {
-    return editor.registerCommand(
-      SPEECH_TO_TEXT_COMMAND,
-      (_isEnabled: boolean) => {
-        setIsEnabled(_isEnabled);
-        return true;
-      },
-      COMMAND_PRIORITY_EDITOR,
-    );
-  }, [editor]);
-
-  return null;
-}
-
-export default (SUPPORT_SPEECH_RECOGNITION
-  ? SpeechToTextPlugin
-  : () => null) as () => null;

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

@@ -1,58 +0,0 @@
-
-import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {
-  $getSelection,
-  $isRangeSelection,
-  $setSelection,
-  FOCUS_COMMAND,
-} from 'lexical';
-import {useEffect} from 'react';
-
-const COMMAND_PRIORITY_LOW = 1;
-const TAB_TO_FOCUS_INTERVAL = 100;
-
-let lastTabKeyDownTimestamp = 0;
-let hasRegisteredKeyDownListener = false;
-
-function registerKeyTimeStampTracker() {
-  window.addEventListener(
-    'keydown',
-    (event: KeyboardEvent) => {
-      // Tab
-      if (event.key === 'Tab') {
-        lastTabKeyDownTimestamp = event.timeStamp;
-      }
-    },
-    true,
-  );
-}
-
-export default function TabFocusPlugin(): null {
-  const [editor] = useLexicalComposerContext();
-
-  useEffect(() => {
-    if (!hasRegisteredKeyDownListener) {
-      registerKeyTimeStampTracker();
-      hasRegisteredKeyDownListener = true;
-    }
-
-    return editor.registerCommand(
-      FOCUS_COMMAND,
-      (event: FocusEvent) => {
-        const selection = $getSelection();
-        if ($isRangeSelection(selection)) {
-          if (
-            lastTabKeyDownTimestamp + TAB_TO_FOCUS_INTERVAL >
-            event.timeStamp
-          ) {
-            $setSelection(selection.clone());
-          }
-        }
-        return false;
-      },
-      COMMAND_PRIORITY_LOW,
-    );
-  }, [editor]);
-
-  return null;
-}

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

@@ -1,438 +0,0 @@
-import type {TableCellNode, TableDOMCell, TableMapType} from '@lexical/table';
-import type {LexicalEditor} from 'lexical';
-
-
-import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {useLexicalEditable} from '@lexical/react/useLexicalEditable';
-import {
-  $computeTableMapSkipCellCheck,
-  $getTableNodeFromLexicalNodeOrThrow,
-  $getTableRowIndexFromTableCellNode,
-  $isTableCellNode,
-  $isTableRowNode,
-  getDOMCellFromTarget,
-  getTableElement,
-  TableNode,
-} from '@lexical/table';
-import {calculateZoomLevel} from '@lexical/utils';
-import {$getNearestNodeFromDOMNode, isHTMLElement} from 'lexical';
-import * as React from 'react';
-import {
-  MouseEventHandler,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import {createPortal} from 'react-dom';
-
-type MousePosition = {
-  x: number;
-  y: number;
-};
-
-type MouseDraggingDirection = 'right' | 'bottom';
-
-const MIN_ROW_HEIGHT = 33;
-const MIN_COLUMN_WIDTH = 92;
-
-function TableCellResizer({editor}: {editor: LexicalEditor}): React.JSX.Element {
-  const targetRef = useRef<HTMLElement | null>(null);
-  const resizerRef = useRef<HTMLDivElement | null>(null);
-  const tableRectRef = useRef<ClientRect | null>(null);
-
-  const mouseStartPosRef = useRef<MousePosition | null>(null);
-  const [mouseCurrentPos, updateMouseCurrentPos] =
-    useState<MousePosition | null>(null);
-
-  const [activeCell, updateActiveCell] = useState<TableDOMCell | null>(null);
-  const [isMouseDown, updateIsMouseDown] = useState<boolean>(false);
-  const [draggingDirection, updateDraggingDirection] =
-    useState<MouseDraggingDirection | null>(null);
-
-  const resetState = useCallback(() => {
-    updateActiveCell(null);
-    targetRef.current = null;
-    updateDraggingDirection(null);
-    mouseStartPosRef.current = null;
-    tableRectRef.current = null;
-  }, []);
-
-  const isMouseDownOnEvent = (event: MouseEvent) => {
-    return (event.buttons & 1) === 1;
-  };
-
-  useEffect(() => {
-    return editor.registerNodeTransform(TableNode, (tableNode) => {
-      if (tableNode.getColWidths()) {
-        return tableNode;
-      }
-
-      const numColumns = tableNode.getColumnCount();
-      const columnWidth = MIN_COLUMN_WIDTH;
-
-      tableNode.setColWidths(Array(numColumns).fill(columnWidth));
-      return tableNode;
-    });
-  }, [editor]);
-
-  useEffect(() => {
-    const onMouseMove = (event: MouseEvent) => {
-      const target = event.target;
-      if (!isHTMLElement(target)) {
-        return;
-      }
-
-      if (draggingDirection) {
-        updateMouseCurrentPos({
-          x: event.clientX,
-          y: event.clientY,
-        });
-        return;
-      }
-      updateIsMouseDown(isMouseDownOnEvent(event));
-      if (resizerRef.current && resizerRef.current.contains(target)) {
-        return;
-      }
-
-      if (targetRef.current !== target) {
-        targetRef.current = target;
-        const cell = getDOMCellFromTarget(target);
-
-        if (cell && activeCell !== cell) {
-          editor.getEditorState().read(
-            () => {
-              const tableCellNode = $getNearestNodeFromDOMNode(cell.elem);
-              if (!tableCellNode) {
-                throw new Error('TableCellResizer: Table cell node not found.');
-              }
-
-              const tableNode =
-                $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
-              const tableElement = getTableElement(
-                tableNode,
-                editor.getElementByKey(tableNode.getKey()),
-              );
-
-              if (!tableElement) {
-                throw new Error('TableCellResizer: Table element not found.');
-              }
-
-              targetRef.current = target as HTMLElement;
-              tableRectRef.current = tableElement.getBoundingClientRect();
-              updateActiveCell(cell);
-            },
-            {editor},
-          );
-        } else if (cell == null) {
-          resetState();
-        }
-      }
-    };
-
-    const onMouseDown = () => {
-      updateIsMouseDown(true);
-    };
-
-    const onMouseUp = () => {
-      updateIsMouseDown(false);
-    };
-
-    const removeRootListener = editor.registerRootListener(
-      (rootElement, prevRootElement) => {
-        prevRootElement?.removeEventListener('mousemove', onMouseMove);
-        prevRootElement?.removeEventListener('mousedown', onMouseDown);
-        prevRootElement?.removeEventListener('mouseup', onMouseUp);
-        rootElement?.addEventListener('mousemove', onMouseMove);
-        rootElement?.addEventListener('mousedown', onMouseDown);
-        rootElement?.addEventListener('mouseup', onMouseUp);
-      },
-    );
-
-    return () => {
-      removeRootListener();
-    };
-  }, [activeCell, draggingDirection, editor, resetState]);
-
-  const isHeightChanging = (direction: MouseDraggingDirection) => {
-    if (direction === 'bottom') {
-      return true;
-    }
-    return false;
-  };
-
-  const updateRowHeight = useCallback(
-    (heightChange: number) => {
-      if (!activeCell) {
-        throw new Error('TableCellResizer: Expected active cell.');
-      }
-
-      editor.update(
-        () => {
-          const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
-          if (!$isTableCellNode(tableCellNode)) {
-            throw new Error('TableCellResizer: Table cell node not found.');
-          }
-
-          const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
-
-          const tableRowIndex =
-            $getTableRowIndexFromTableCellNode(tableCellNode) +
-            tableCellNode.getRowSpan() -
-            1;
-
-          const tableRows = tableNode.getChildren();
-
-          if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
-            throw new Error('Expected table cell to be inside of table row.');
-          }
-
-          const tableRow = tableRows[tableRowIndex];
-
-          if (!$isTableRowNode(tableRow)) {
-            throw new Error('Expected table row');
-          }
-
-          let height = tableRow.getHeight();
-          if (height === undefined) {
-            const rowCells = tableRow.getChildren<TableCellNode>();
-            height = Math.min(
-              ...rowCells.map(
-                (cell) => getCellNodeHeight(cell, editor) ?? Infinity,
-              ),
-            );
-          }
-
-          const newHeight = Math.max(height + heightChange, MIN_ROW_HEIGHT);
-          tableRow.setHeight(newHeight);
-        },
-        {tag: 'skip-scroll-into-view'},
-      );
-    },
-    [activeCell, editor],
-  );
-
-  const getCellNodeHeight = (
-    cell: TableCellNode,
-    activeEditor: LexicalEditor,
-  ): number | undefined => {
-    const domCellNode = activeEditor.getElementByKey(cell.getKey());
-    return domCellNode?.clientHeight;
-  };
-
-  const getCellColumnIndex = (
-    tableCellNode: TableCellNode,
-    tableMap: TableMapType,
-  ) => {
-    for (let row = 0; row < tableMap.length; row++) {
-      for (let column = 0; column < tableMap[row].length; column++) {
-        if (tableMap[row][column].cell === tableCellNode) {
-          return column;
-        }
-      }
-    }
-  };
-
-  const updateColumnWidth = useCallback(
-    (widthChange: number) => {
-      if (!activeCell) {
-        throw new Error('TableCellResizer: Expected active cell.');
-      }
-      editor.update(
-        () => {
-          const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
-          if (!$isTableCellNode(tableCellNode)) {
-            throw new Error('TableCellResizer: Table cell node not found.');
-          }
-
-          const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
-          const [tableMap] = $computeTableMapSkipCellCheck(
-            tableNode,
-            null,
-            null,
-          );
-          const columnIndex = getCellColumnIndex(tableCellNode, tableMap);
-          if (columnIndex === undefined) {
-            throw new Error('TableCellResizer: Table column not found.');
-          }
-
-          const colWidths = tableNode.getColWidths();
-          if (!colWidths) {
-            return;
-          }
-          const width = colWidths[columnIndex];
-          if (width === undefined) {
-            return;
-          }
-          const newColWidths = [...colWidths];
-          const newWidth = Math.max(width + widthChange, MIN_COLUMN_WIDTH);
-          newColWidths[columnIndex] = newWidth;
-          tableNode.setColWidths(newColWidths);
-        },
-        {tag: 'skip-scroll-into-view'},
-      );
-    },
-    [activeCell, editor],
-  );
-
-  const mouseUpHandler = useCallback(
-    (direction: MouseDraggingDirection) => {
-      const handler = (event: MouseEvent) => {
-        event.preventDefault();
-        event.stopPropagation();
-
-        if (!activeCell) {
-          throw new Error('TableCellResizer: Expected active cell.');
-        }
-
-        if (mouseStartPosRef.current) {
-          const {x, y} = mouseStartPosRef.current;
-
-          if (activeCell === null) {
-            return;
-          }
-          const zoom = calculateZoomLevel(event.target as Element);
-
-          if (isHeightChanging(direction)) {
-            const heightChange = (event.clientY - y) / zoom;
-            updateRowHeight(heightChange);
-          } else {
-            const widthChange = (event.clientX - x) / zoom;
-            updateColumnWidth(widthChange);
-          }
-
-          resetState();
-          document.removeEventListener('mouseup', handler);
-        }
-      };
-      return handler;
-    },
-    [activeCell, resetState, updateColumnWidth, updateRowHeight],
-  );
-
-  const toggleResize = useCallback(
-    (direction: MouseDraggingDirection): MouseEventHandler<HTMLDivElement> =>
-      (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-
-        if (!activeCell) {
-          throw new Error('TableCellResizer: Expected active cell.');
-        }
-
-        mouseStartPosRef.current = {
-          x: event.clientX,
-          y: event.clientY,
-        };
-        updateMouseCurrentPos(mouseStartPosRef.current);
-        updateDraggingDirection(direction);
-
-        document.addEventListener('mouseup', mouseUpHandler(direction));
-      },
-    [activeCell, mouseUpHandler],
-  );
-
-  const getResizers = useCallback(() => {
-    if (activeCell) {
-      const {height, width, top, left} =
-        activeCell.elem.getBoundingClientRect();
-      const zoom = calculateZoomLevel(activeCell.elem);
-      const zoneWidth = 10; // Pixel width of the zone where you can drag the edge
-      const styles = {
-        bottom: {
-          backgroundColor: 'none',
-          "zIndex":"10",
-          cursor: 'row-resize',
-          height: `${zoneWidth}px`,
-          left: `${window.pageXOffset + left}px`,
-          top: `${window.pageYOffset + top + height - zoneWidth / 2}px`,
-          width: `${width}px`,
-        },
-        right: {
-          backgroundColor: 'none',
-          "zIndex":"10",
-          cursor: 'col-resize',
-          height: `${height}px`,
-          left: `${window.pageXOffset + left + width - zoneWidth / 2}px`,
-          top: `${window.pageYOffset + top}px`,
-          width: `${zoneWidth}px`,
-        },
-      };
-
-      const tableRect = tableRectRef.current;
-
-      if (draggingDirection && mouseCurrentPos && tableRect) {
-        if (isHeightChanging(draggingDirection)) {
-          styles[draggingDirection].left = `${
-            window.pageXOffset + tableRect.left
-          }px`;
-          styles[draggingDirection].top = `${
-            window.pageYOffset + mouseCurrentPos.y / zoom
-          }px`;
-          styles[draggingDirection].height = '3px';
-          styles[draggingDirection].width = `${tableRect.width}px`;
-        } else {
-          styles[draggingDirection].top = `${
-            window.pageYOffset + tableRect.top
-          }px`;
-          styles[draggingDirection].left = `${
-            window.pageXOffset + mouseCurrentPos.x / zoom
-          }px`;
-          styles[draggingDirection].width = '3px';
-          styles[draggingDirection].height = `${tableRect.height}px`;
-        }
-
-        styles[draggingDirection].backgroundColor = '#adf';
-      }
-
-      return styles;
-    }
-
-    return {
-      bottom: null,
-      left: null,
-      right: null,
-      top: null,
-    };
-  }, [activeCell, draggingDirection, mouseCurrentPos]);
-
-  const resizerStyles = getResizers();
-
-  
-  
-  return (
-    <div ref={resizerRef}>
-      {activeCell != null && !isMouseDown && (
-        <>
-          <div
-            className=" absolute TableCellResizer__ui"
-            style={resizerStyles.right || undefined}
-            onMouseDown={toggleResize('right')}
-          />
-          <div
-            className="absolute  TableCellResizer__ui"
-            style={resizerStyles.bottom || undefined}
-            onMouseDown={toggleResize('bottom')}
-          />
-        </>
-      )}
-    </div>
-  );
-}
-export default function TableCellResizerPlugin(): null | React.ReactPortal {
-  const [editor] = useLexicalComposerContext();
-  const isEditable = useLexicalEditable();
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  const portal = useMemo(() => {
-    if (!mounted || !isEditable) return null;
-    return createPortal(<TableCellResizer editor={editor} />, document.body);
-  }, [mounted, isEditable, editor]);
-
-  return portal;
-}