@collabchron/notiq 0.3.0 → 1.0.1

package/src/components/ui/equation/EquationEditor.tsx

@@ -1,56 +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, Ref, RefObject} from 'react';
-
-import './EquationEditor.css';
-
-import {isHTMLElement} from 'lexical';
-import {ChangeEvent, forwardRef} from 'react';
-
-type BaseEquationEditorProps = {
-  equation: string;
-  inline: boolean;
-  setEquation: (equation: string) => void;
-};
-
-function EquationEditor(
-  {equation, setEquation, inline}: BaseEquationEditorProps,
-  forwardedRef: Ref<HTMLInputElement | HTMLTextAreaElement>,
-): JSX.Element {
-  const onChange = (event: ChangeEvent) => {
-    setEquation((event.target as HTMLInputElement).value);
-  };
-
-  return inline && isHTMLElement(forwardedRef) ? (
-    <span className="EquationEditor_inputBackground">
-      <span className="EquationEditor_dollarSign">$</span>
-      <input
-        className="EquationEditor_inlineEditor"
-        value={equation}
-        onChange={onChange}
-        autoFocus={true}
-        ref={forwardedRef as RefObject<HTMLInputElement>}
-      />
-      <span className="EquationEditor_dollarSign">$</span>
-    </span>
-  ) : (
-    <div className="EquationEditor_inputBackground">
-      <span className="EquationEditor_dollarSign">{'$$\n'}</span>
-      <textarea
-        className="EquationEditor_blockEditor"
-        value={equation}
-        onChange={onChange}
-        ref={forwardedRef as RefObject<HTMLTextAreaElement>}
-      />
-      <span className="EquationEditor_dollarSign">{'\n$$'}</span>
-    </div>
-  );
-}
-
-export default forwardRef(EquationEditor);

package/src/components/ui/equation/KatexEquationAlterer.css

@@ -1,41 +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.
- *
- *
- */
-
-.KatexEquationAlterer_defaultRow {
-  display: flex;
-  flex-direction: row;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  justify-content: space-between;
-  overflow: hidden;
-}
-
-.KatexEquationAlterer_dialogActions {
-  display: flex;
-  flex-direction: row;
-  overflow: hidden;
-  margin-top: 20px;
-  margin-bottom: 0;
-  justify-content: right;
-}
-
-.KatexEquationAlterer_centerRow {
-  display: flex;
-  flex-direction: 'row';
-  margin-top: 10px;
-  margin-bottom: 10px;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.KatexEquationAlterer_textArea {
-  width: 100%;
-  resize: none;
-  padding: 7px;
-}

package/src/components/ui/equation/KatexEquationAlterer.tsx

@@ -1,83 +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 './KatexEquationAlterer.css';
-
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import * as React from 'react';
-import { useCallback, useState } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
-
-import KatexRenderer from './KatexRenderer';
-import { Button } from '@/components/ui/button';
-
-type Props = {
-  initialEquation?: string;
-  onConfirm: (equation: string, inline: boolean) => void;
-};
-
-export default function KatexEquationAlterer({
-  onConfirm,
-  initialEquation = '',
-}: Props): JSX.Element {
-  const [editor] = useLexicalComposerContext();
-  const [equation, setEquation] = useState<string>(initialEquation);
-  const [inline, setInline] = useState<boolean>(true);
-
-  const onClick = useCallback(() => {
-    onConfirm(equation, inline);
-  }, [onConfirm, equation, inline]);
-
-  const onCheckboxChange = useCallback(() => {
-    setInline(!inline);
-  }, [setInline, inline]);
-
-  return (
-    <>
-      <div className="KatexEquationAlterer_defaultRow">
-        Inline
-        <input type="checkbox" checked={inline} onChange={onCheckboxChange} />
-      </div>
-      <div className="KatexEquationAlterer_defaultRow">Equation </div>
-      <div className="KatexEquationAlterer_centerRow">
-        {inline ? (
-          <input
-            onChange={(event) => {
-              setEquation(event.target.value);
-            }}
-            value={equation}
-            className="KatexEquationAlterer_textArea"
-          />
-        ) : (
-          <textarea
-            onChange={(event) => {
-              setEquation(event.target.value);
-            }}
-            value={equation}
-            className="KatexEquationAlterer_textArea"
-          />
-        )}
-      </div>
-      <div className="KatexEquationAlterer_defaultRow">Visualization </div>
-      <div className="KatexEquationAlterer_centerRow">
-        <ErrorBoundary onError={(e) => editor._onError(e)} fallback={null}>
-          <KatexRenderer
-            equation={equation}
-            inline={false}
-            onDoubleClick={() => null}
-          />
-        </ErrorBoundary>
-      </div>
-      <div className="KatexEquationAlterer_dialogActions">
-        <Button onClick={onClick}>Confirm</Button>
-      </div>
-    </>
-  );
-}

package/src/components/ui/equation/KatexRenderer.tsx

@@ -1,66 +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 katex from 'katex';
-import * as React from 'react';
-import {useEffect, useRef} from 'react';
-
-export default function KatexRenderer({
-  equation,
-  inline,
-  onDoubleClick,
-}: Readonly<{
-  equation: string;
-  inline: boolean;
-  onDoubleClick: () => void;
-}>): JSX.Element {
-  const katexElementRef = useRef(null);
-
-  useEffect(() => {
-    const katexElement = katexElementRef.current;
-
-    if (katexElement !== null) {
-      katex.render(equation, katexElement, {
-        displayMode: !inline, // true === block display //
-        errorColor: '#cc0000',
-        output: 'html',
-        strict: 'warn',
-        throwOnError: false,
-        trust: false,
-      });
-    }
-  }, [equation, inline]);
-
-  return (
-    // We use an empty image tag either side to ensure Android doesn't try and compose from the
-    // inner text from Katex. There didn't seem to be any other way of making this work,
-    // without having a physical space.
-    <>
-      <img
-        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-        width="0"
-        height="0"
-        alt=""
-      />
-      <span
-        role="button"
-        tabIndex={-1}
-        onDoubleClick={onDoubleClick}
-        ref={katexElementRef}
-      />
-      <img
-        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-        width="0"
-        height="0"
-        alt=""
-      />
-    </>
-  );
-}

package/src/components/ui/excalidraw/ExcalidrawModal.css

@@ -1,64 +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.
- *
- *
- */
-
-.ExcalidrawModal__overlay {
-  display: flex;
-  align-items: center;
-  position: fixed;
-  flex-direction: column;
-  top: 0px;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-  flex-grow: 0px;
-  flex-shrink: 1px;
-  z-index: 100;
-  background-color: rgba(40, 40, 40, 0.6);
-}
-.ExcalidrawModal__actions {
-  text-align: end;
-  position: absolute;
-  right: 5px;
-  top: 5px;
-  z-index: 1;
-}
-.ExcalidrawModal__actions button {
-  background-color: #fff;
-  border-radius: 5px;
-}
-.ExcalidrawModal__row {
-  position: relative;
-  padding: 40px 5px 5px;
-  width: 70vw;
-  height: 70vh;
-  border-radius: 8px;
-  box-shadow:
-    0 12px 28px 0 rgba(0, 0, 0, 0.2),
-    0 2px 4px 0 rgba(0, 0, 0, 0.1),
-    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
-}
-.ExcalidrawModal__row > div {
-  border-radius: 5px;
-}
-.ExcalidrawModal__modal {
-  position: relative;
-  z-index: 10;
-  top: 50px;
-  width: auto;
-  left: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 8px;
-  background-color: #eee;
-}
-.ExcalidrawModal__discardModal {
-  margin-top: 60px;
-  text-align: center;
-}

package/src/components/ui/excalidraw/ExcalidrawModal.tsx

@@ -1,234 +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 {
-  AppState,
-  BinaryFiles,
-  ExcalidrawImperativeAPI,
-  ExcalidrawInitialDataState,
-} from '@excalidraw/excalidraw/types';
-import type {JSX} from 'react';
-
-import './ExcalidrawModal.css';
-
-import {Excalidraw} from '@excalidraw/excalidraw';
-import {isDOMNode} from 'lexical';
-import * as React from 'react';
-import {ReactPortal, useEffect, useLayoutEffect, useRef, useState} from 'react';
-import {createPortal} from 'react-dom';
-import Modal from './Modal';
-import { Button } from '@/components/ui/button';
-
-
-
-export type ExcalidrawInitialElements = ExcalidrawInitialDataState['elements'];
-
-type Props = {
-  closeOnClickOutside?: boolean;
-  /**
-   * The initial set of elements to draw into the scene
-   */
-  initialElements: ExcalidrawInitialElements;
-  /**
-   * The initial set of elements to draw into the scene
-   */
-  initialAppState: AppState;
-  /**
-   * The initial set of elements to draw into the scene
-   */
-  initialFiles: BinaryFiles;
-  /**
-   * Controls the visibility of the modal
-   */
-  isShown?: boolean;
-  /**
-   * Callback when closing and discarding the new changes
-   */
-  onClose: () => void;
-  /**
-   * Completely remove Excalidraw component
-   */
-  onDelete: () => void;
-  /**
-   * Callback when the save button is clicked
-   */
-  onSave: (
-    elements: ExcalidrawInitialElements,
-    appState: Partial<AppState>,
-    files: BinaryFiles,
-  ) => void;
-};
-
-/**
- * @explorer-desc
- * A component which renders a modal with Excalidraw (a painting app)
- * which can be used to export an editable image
- */
-export default function ExcalidrawModal({
-  closeOnClickOutside = false,
-  onSave,
-  initialElements,
-  initialAppState,
-  initialFiles,
-  isShown = false,
-  onDelete,
-  onClose,
-}: Props): ReactPortal | null {
-  const excaliDrawModelRef = useRef<HTMLDivElement | null>(null);
-  const [excalidrawAPI, setExcalidrawAPI] =
-    useState<ExcalidrawImperativeAPI | null>(null);
-  const [discardModalOpen, setDiscardModalOpen] = useState(false);
-  const [elements, setElements] =
-    useState<ExcalidrawInitialElements>(initialElements);
-  const [files, setFiles] = useState<BinaryFiles>(initialFiles);
-
-  useEffect(() => {
-    excaliDrawModelRef.current?.focus();
-  }, []);
-
-  useEffect(() => {
-    let modalOverlayElement: HTMLElement | null = null;
-
-    const clickOutsideHandler = (event: MouseEvent) => {
-      const target = event.target;
-      if (
-        excaliDrawModelRef.current !== null &&
-        isDOMNode(target) &&
-        !excaliDrawModelRef.current.contains(target) &&
-        closeOnClickOutside
-      ) {
-        onDelete();
-      }
-    };
-
-    if (excaliDrawModelRef.current !== null) {
-      modalOverlayElement = excaliDrawModelRef.current?.parentElement;
-      modalOverlayElement?.addEventListener('click', clickOutsideHandler);
-    }
-
-    return () => {
-      modalOverlayElement?.removeEventListener('click', clickOutsideHandler);
-    };
-  }, [closeOnClickOutside, onDelete]);
-
-  useLayoutEffect(() => {
-    const currentModalRef = excaliDrawModelRef.current;
-
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        onDelete();
-      }
-    };
-
-    currentModalRef?.addEventListener('keydown', onKeyDown);
-
-    return () => {
-      currentModalRef?.removeEventListener('keydown', onKeyDown);
-    };
-  }, [elements, files, onDelete]);
-
-  const save = () => {
-    if (elements?.some((el) => !el.isDeleted)) {
-      const appState = excalidrawAPI?.getAppState();
-      // We only need a subset of the state
-      const partialState: Partial<AppState> = {
-        exportBackground: appState?.exportBackground,
-        exportScale: appState?.exportScale,
-        exportWithDarkMode: appState?.theme === 'dark',
-        isBindingEnabled: appState?.isBindingEnabled,
-        isLoading: appState?.isLoading,
-        name: appState?.name,
-        theme: appState?.theme,
-        viewBackgroundColor: appState?.viewBackgroundColor,
-        viewModeEnabled: appState?.viewModeEnabled,
-        zenModeEnabled: appState?.zenModeEnabled,
-        zoom: appState?.zoom,
-      };
-      onSave(elements, partialState, files);
-    } else {
-      // delete node if the scene is clear
-      onDelete();
-    }
-  };
-
-  const discard = () => {
-    setDiscardModalOpen(true);
-  };
-
-  function ShowDiscardDialog(): JSX.Element {
-    return (
-      <Modal
-        title="Discard"
-        onClose={() => {
-          setDiscardModalOpen(false);
-        }}
-        closeOnClickOutside={false}>
-        Are you sure you want to discard the changes?
-        <div className="ExcalidrawModal__discardModal">
-          <Button
-            onClick={() => {
-              setDiscardModalOpen(false);
-              onClose();
-            }}>
-            Discard
-          </Button>{' '}
-          <Button
-            onClick={() => {
-              setDiscardModalOpen(false);
-            }}>
-            Cancel
-          </Button>
-        </div>
-      </Modal>
-    );
-  }
-
-  if (isShown === false) {
-    return null;
-  }
-
-  const onChange = (
-    els: ExcalidrawInitialElements,
-    _: AppState,
-    fls: BinaryFiles,
-  ) => {
-    setElements(els);
-    setFiles(fls);
-  };
-
-  return createPortal(
-    <div className="ExcalidrawModal__overlay" role="dialog">
-      <div
-        className="ExcalidrawModal__modal"
-        ref={excaliDrawModelRef}
-        tabIndex={-1}>
-        <div className="ExcalidrawModal__row">
-          {discardModalOpen && <ShowDiscardDialog />}
-          <Excalidraw
-            onChange={onChange}
-            excalidrawAPI={setExcalidrawAPI}
-            initialData={{
-              appState: initialAppState || {isLoading: false},
-              elements: initialElements,
-              files: initialFiles,
-            }}
-          />
-          <div className="ExcalidrawModal__actions">
-            <button className="action-button" onClick={discard}>
-              Discard
-            </button>
-            <button className="action-button" onClick={save}>
-              Save
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>,
-    document.body,
-  );
-}

package/src/components/ui/excalidraw/Modal.css

@@ -1,62 +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.
- *
- *
- */
-
-.Modal__overlay {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: fixed;
-  flex-direction: column;
-  top: 0px;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-  background-color: rgba(40, 40, 40, 0.6);
-  flex-grow: 0px;
-  flex-shrink: 1px;
-  z-index: 100;
-}
-.Modal__modal {
-  padding: 20px;
-  min-height: 100px;
-  min-width: 300px;
-  display: flex;
-  flex-grow: 0px;
-  background-color: #fff;
-  flex-direction: column;
-  position: relative;
-  box-shadow: 0 0 20px 0 #444;
-  border-radius: 10px;
-}
-.Modal__title {
-  color: #444;
-  margin: 0px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #ccc;
-}
-.Modal__closeButton {
-  border: 0px;
-  position: absolute;
-  right: 20px;
-  border-radius: 20px;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  width: 30px;
-  height: 30px;
-  text-align: center;
-  cursor: pointer;
-  background-color: #eee;
-}
-.Modal__closeButton:hover {
-  background-color: #ddd;
-}
-.Modal__content {
-  padding-top: 20px;
-}