@collabchron/notiq 0.3.0 → 1.0.0

package/src/components/editor/lexical-on-change.tsx

@@ -1,28 +0,0 @@
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import useLayoutEffectImpl from "./utils/useLayoutEffect";
-import { setNodePlaceholderFromSelection } from "./utils/setNodePlaceholderFromSelection/setNodePlaceholderFromSelection";
-
-export function LexicalOnChangePlugin() {
-  const [editor] = useLexicalComposerContext();
-
-  useLayoutEffectImpl(() => {
-    const unregisterListener = editor.registerUpdateListener(
-      ({ editorState, dirtyElements, dirtyLeaves, prevEditorState, tags }) => {
-        if (
-          (dirtyElements.size === 0 && dirtyLeaves.size === 0) ||
-          tags.has("history-merge") ||
-          prevEditorState.isEmpty()
-        ) {
-          return;
-        }
-        setNodePlaceholderFromSelection(editor);
-
-      }
-    );
-
-    return () => {
-      unregisterListener();
-    };
-  }, [editor]);
-  return <></>
-}

package/src/components/editor/nodes/CollapsibleNode/CollapsibleContainerNode.ts

@@ -1,92 +0,0 @@
-import {
-  DOMConversionMap,
-  ElementNode,
-  LexicalNode,
-  NodeKey,
-  SerializedElementNode,
-  Spread
-} from "lexical";
-
-type SerializedCollapsibleContainerNode = Spread<
-  {
-    type: "collapsible-container";
-    version: 1;
-  },
-  SerializedElementNode
->;
-
-export class CollapsibleContainerNode extends ElementNode {
-  __open: boolean;
-
-  constructor(open: boolean, key?: NodeKey) {
-    super(key);
-    this.__open = open;
-  }
-
-  static getType(): string {
-    return "collapsible-container";
-  }
-
-  static clone(node: CollapsibleContainerNode): CollapsibleContainerNode {
-    return new CollapsibleContainerNode(node.__open, node.__key);
-  }
-
-  createDOM(): HTMLElement {
-    const dom = document.createElement("details");
-    dom.classList.add("Collapsible__container");
-    dom.open = this.__open;
-    return dom;
-  }
-
-  updateDOM(
-    prevNode: CollapsibleContainerNode,
-    dom: HTMLDetailsElement
-  ): boolean {
-    if (prevNode.__open !== this.__open) {
-      dom.open = this.__open;
-    }
-
-    return false;
-  }
-
-  static importDOM(): DOMConversionMap | null {
-    return {};
-  }
-
-  static importJSON(
-  ): CollapsibleContainerNode {
-    const node = $createCollapsibleContainerNode();
-    return node;
-  }
-
-  exportJSON(): SerializedCollapsibleContainerNode {
-    return {
-      ...super.exportJSON(),
-      type: "collapsible-container",
-      version: 1
-    };
-  }
-
-  setOpen(open: boolean): void {
-    const writable = this.getWritable();
-    writable.__open = open;
-  }
-
-  getOpen(): boolean {
-    return this.__open;
-  }
-
-  toggleOpen(): void {
-    this.setOpen(!this.getOpen());
-  }
-}
-
-export function $createCollapsibleContainerNode(): CollapsibleContainerNode {
-  return new CollapsibleContainerNode(true);
-}
-
-export function $isCollapsibleContainerNode(
-  node: LexicalNode | null | undefined
-): node is CollapsibleContainerNode {
-  return node instanceof CollapsibleContainerNode;
-}

package/src/components/editor/nodes/CollapsibleNode/CollapsibleContentNode.ts

@@ -1,65 +0,0 @@
-import {
-  DOMConversionMap,
-  ElementNode,
-  LexicalNode,
-  SerializedElementNode,
-  Spread
-} from "lexical";
-
-type SerializedCollapsibleContentNode = Spread<
-  {
-    type: "collapsible-content";
-    version: 1;
-  },
-  SerializedElementNode
->;
-
-export class CollapsibleContentNode extends ElementNode {
-  static getType(): string {
-    return "collapsible-content";
-  }
-
-  static clone(node: CollapsibleContentNode): CollapsibleContentNode {
-    return new CollapsibleContentNode(node.__key);
-  }
-
-  createDOM(): HTMLElement {
-    const dom = document.createElement("div");
-    dom.classList.add("Collapsible__content");
-    return dom;
-  }
-
-  updateDOM(): boolean {
-    return false;
-  }
-
-  static importDOM(): DOMConversionMap | null {
-    return {};
-  }
-
-  static importJSON(  ): CollapsibleContentNode {
-    return $createCollapsibleContentNode();
-  }
-
-  isShadowRoot(): boolean {
-    return true;
-  }
-
-  exportJSON(): SerializedCollapsibleContentNode {
-    return {
-      ...super.exportJSON(),
-      type: "collapsible-content",
-      version: 1
-    };
-  }
-}
-
-export function $createCollapsibleContentNode(): CollapsibleContentNode {
-  return new CollapsibleContentNode();
-}
-
-export function $isCollapsibleContentNode(
-  node: LexicalNode | null | undefined
-): node is CollapsibleContentNode {
-  return node instanceof CollapsibleContentNode;
-}

package/src/components/editor/nodes/CollapsibleNode/CollapsibleTitleNode.ts

@@ -1,105 +0,0 @@
-import {
-  $createParagraphNode,
-  $isElementNode,
-  DOMConversionMap,
-  ElementNode,
-  LexicalNode,
-  RangeSelection,
-  SerializedElementNode,
-  Spread
-} from "lexical";
-
-import { $isCollapsibleContainerNode } from "./CollapsibleContainerNode";
-import { $isCollapsibleContentNode } from "./CollapsibleContentNode";
-
-type SerializedCollapsibleTitleNode = Spread<
-  {
-    type: "collapsible-title";
-    version: 1;
-  },
-  SerializedElementNode
->;
-
-export class CollapsibleTitleNode extends ElementNode {
-  static getType(): string {
-    return "collapsible-title";
-  }
-
-  static clone(node: CollapsibleTitleNode): CollapsibleTitleNode {
-    return new CollapsibleTitleNode(node.__key);
-  }
-
-  createDOM(): HTMLElement {
-    const dom = document.createElement("summary");
-    dom.classList.add("Collapsible__title");
-    return dom;
-  }
-
-  updateDOM(): boolean {
-    return false;
-  }
-
-  static importDOM(): DOMConversionMap | null {
-    return {};
-  }
-
-  static importJSON(
-  ): CollapsibleTitleNode {
-    return $createCollapsibleTitleNode();
-  }
-
-  exportJSON(): SerializedCollapsibleTitleNode {
-    return {
-      ...super.exportJSON(),
-      type: "collapsible-title",
-      version: 1
-    };
-  }
-
-  collapseAtStart(_selection: RangeSelection): boolean {
-    this.getParentOrThrow().insertBefore(this);
-    return true;
-  }
-
-  insertNewAfter(): ElementNode {
-    const containerNode = this.getParentOrThrow();
-
-    if (!$isCollapsibleContainerNode(containerNode)) {
-      throw new Error(
-        "CollapsibleTitleNode expects to be child of CollapsibleContainerNode"
-      );
-    }
-
-    if (containerNode.getOpen()) {
-      const contentNode = this.getNextSibling();
-      if (!$isCollapsibleContentNode(contentNode)) {
-        throw new Error(
-          "CollapsibleTitleNode expects to have CollapsibleContentNode sibling"
-        );
-      }
-
-      const firstChild = contentNode.getFirstChild();
-      if ($isElementNode(firstChild)) {
-        return firstChild;
-      } else {
-        const paragraph = $createParagraphNode();
-        contentNode.append(paragraph);
-        return paragraph;
-      }
-    } else {
-      const paragraph = $createParagraphNode();
-      containerNode.insertAfter(paragraph);
-      return paragraph;
-    }
-  }
-}
-
-export function $createCollapsibleTitleNode(): CollapsibleTitleNode {
-  return new CollapsibleTitleNode();
-}
-
-export function $isCollapsibleTitleNode(
-  node: LexicalNode | null | undefined
-): node is CollapsibleTitleNode {
-  return node instanceof CollapsibleTitleNode;
-}

package/src/components/editor/nodes/EquationNode/EquationComponent.tsx

@@ -1,143 +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 {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {useLexicalEditable} from '@lexical/react/useLexicalEditable';
-import {mergeRegister} from '@lexical/utils';
-import {
-  $getNodeByKey,
-  $getSelection,
-  $isNodeSelection,
-  COMMAND_PRIORITY_HIGH,
-  KEY_ESCAPE_COMMAND,
-  NodeKey,
-  SELECTION_CHANGE_COMMAND,
-} from 'lexical';
-import * as React from 'react';
-import {useCallback, useEffect, useRef, useState} from 'react';
-import {ErrorBoundary} from 'react-error-boundary';
-import { $isEquationNode } from './EquationNode';
-import KatexRenderer from '@/components/ui/equation/KatexRenderer';
-import EquationEditor from '@/components/ui/equation/EquationEditor';
-
-
-type EquationComponentProps = {
-  equation: string;
-  inline: boolean;
-  nodeKey: NodeKey;
-};
-
-export default function EquationComponent({
-  equation,
-  inline,
-  nodeKey,
-}: EquationComponentProps): JSX.Element {
-  const [editor] = useLexicalComposerContext();
-  const isEditable = useLexicalEditable();
-  const [equationValue, setEquationValue] = useState(equation);
-  const [showEquationEditor, setShowEquationEditor] = useState<boolean>(false);
-  const inputRef = useRef<HTMLTextAreaElement | HTMLInputElement>(null);
-
-  const onHide = useCallback(
-    (restoreSelection?: boolean) => {
-      setShowEquationEditor(false);
-      editor.update(() => {
-        const node = $getNodeByKey(nodeKey);
-        if ($isEquationNode(node)) {
-          node.setEquation(equationValue);
-          if (restoreSelection) {
-            node.selectNext(0, 0);
-          }
-        }
-      });
-    },
-    [editor, equationValue, nodeKey],
-  );
-
-  useEffect(() => {
-    if (!showEquationEditor && equationValue !== equation) {
-      setEquationValue(equation);
-    }
-  }, [showEquationEditor, equation, equationValue]);
-
-  useEffect(() => {
-    if (!isEditable) {
-      return;
-    }
-    if (showEquationEditor) {
-      return mergeRegister(
-        editor.registerCommand(
-          SELECTION_CHANGE_COMMAND,
-          (payload) => {
-            const activeElement = document.activeElement;
-            const inputElem = inputRef.current;
-            if (inputElem !== activeElement) {
-              onHide();
-            }
-            return false;
-          },
-          COMMAND_PRIORITY_HIGH,
-        ),
-        editor.registerCommand(
-          KEY_ESCAPE_COMMAND,
-          (payload) => {
-            const activeElement = document.activeElement;
-            const inputElem = inputRef.current;
-            if (inputElem === activeElement) {
-              onHide(true);
-              return true;
-            }
-            return false;
-          },
-          COMMAND_PRIORITY_HIGH,
-        ),
-      );
-    } else {
-      return editor.registerUpdateListener(({editorState}) => {
-        const isSelected = editorState.read(() => {
-          const selection = $getSelection();
-          return (
-            $isNodeSelection(selection) &&
-            selection.has(nodeKey) &&
-            selection.getNodes().length === 1
-          );
-        });
-        if (isSelected) {
-          setShowEquationEditor(true);
-        }
-      });
-    }
-  }, [editor, nodeKey, onHide, showEquationEditor, isEditable]);
-
-  return (
-    <>
-      {showEquationEditor && isEditable ? (
-        <EquationEditor
-          equation={equationValue}
-          setEquation={setEquationValue}
-          inline={inline}
-          ref={inputRef}
-        />
-      ) : (
-        <ErrorBoundary onError={(e) => editor._onError(e)} fallback={null}>
-          <KatexRenderer
-            equation={equationValue}
-            inline={inline}
-            onDoubleClick={() => {
-              if (isEditable) {
-                setShowEquationEditor(true);
-              }
-            }}
-          />
-        </ErrorBoundary>
-      )}
-    </>
-  );
-}

package/src/components/editor/nodes/EquationNode/EquationNode.tsx

@@ -1,170 +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 {
-  DOMConversionMap,
-  DOMConversionOutput,
-  EditorConfig,
-  LexicalNode,
-  NodeKey,
-  SerializedLexicalNode,
-  Spread,
-} from 'lexical';
-import type {JSX} from 'react';
-
-import katex from 'katex';
-import {$applyNodeReplacement, DecoratorNode, DOMExportOutput} from 'lexical';
-import * as React from 'react';
-
-const EquationComponent = React.lazy(() => import('./EquationComponent'));
-
-export type SerializedEquationNode = Spread<
-  {
-    equation: string;
-    inline: boolean;
-  },
-  SerializedLexicalNode
->;
-
-function $convertEquationElement(
-  domNode: HTMLElement,
-): null | DOMConversionOutput {
-  let equation = domNode.getAttribute('data-lexical-equation');
-  const inline = domNode.getAttribute('data-lexical-inline') === 'true';
-  // Decode the equation from base64
-  equation = atob(equation || '');
-  if (equation) {
-    const node = $createEquationNode(equation, inline);
-    return {node};
-  }
-
-  return null;
-}
-
-export class EquationNode extends DecoratorNode<JSX.Element> {
-  __equation: string;
-  __inline: boolean;
-
-  static getType(): string {
-    return 'equation';
-  }
-
-  static clone(node: EquationNode): EquationNode {
-    return new EquationNode(node.__equation, node.__inline, node.__key);
-  }
-
-  constructor(equation: string, inline?: boolean, key?: NodeKey) {
-    super(key);
-    this.__equation = equation;
-    this.__inline = inline ?? false;
-  }
-
-  static importJSON(serializedNode: SerializedEquationNode): EquationNode {
-    return $createEquationNode(
-      serializedNode.equation,
-      serializedNode.inline,
-    ).updateFromJSON(serializedNode);
-  }
-
-  exportJSON(): SerializedEquationNode {
-    return {
-      ...super.exportJSON(),
-      equation: this.getEquation(),
-      inline: this.__inline,
-    };
-  }
-
-  createDOM(_config: EditorConfig): HTMLElement {
-    const element = document.createElement(this.__inline ? 'span' : 'div');
-    // EquationNodes should implement `user-action:none` in their CSS to avoid issues with deletion on Android.
-    element.className = 'editor-equation';
-    return element;
-  }
-
-  exportDOM(): DOMExportOutput {
-    const element = document.createElement(this.__inline ? 'span' : 'div');
-    // Encode the equation as base64 to avoid issues with special characters
-    const equation = btoa(this.__equation);
-    element.setAttribute('data-lexical-equation', equation);
-    element.setAttribute('data-lexical-inline', `${this.__inline}`);
-    katex.render(this.__equation, element, {
-      displayMode: !this.__inline, // true === block display //
-      errorColor: '#cc0000',
-      output: 'html',
-      strict: 'warn',
-      throwOnError: false,
-      trust: false,
-    });
-    return {element};
-  }
-
-  static importDOM(): DOMConversionMap | null {
-    return {
-      div: (domNode: HTMLElement) => {
-        if (!domNode.hasAttribute('data-lexical-equation')) {
-          return null;
-        }
-        return {
-          conversion: $convertEquationElement,
-          priority: 2,
-        };
-      },
-      span: (domNode: HTMLElement) => {
-        if (!domNode.hasAttribute('data-lexical-equation')) {
-          return null;
-        }
-        return {
-          conversion: $convertEquationElement,
-          priority: 1,
-        };
-      },
-    };
-  }
-
-  updateDOM(prevNode: this): boolean {
-    // If the inline property changes, replace the element
-    return this.__inline !== prevNode.__inline;
-  }
-
-  getTextContent(): string {
-    return this.__equation;
-  }
-
-  getEquation(): string {
-    return this.__equation;
-  }
-
-  setEquation(equation: string): void {
-    const writable = this.getWritable();
-    writable.__equation = equation;
-  }
-
-  decorate(): JSX.Element {
-    return (
-      <EquationComponent
-        equation={this.__equation}
-        inline={this.__inline}
-        nodeKey={this.__key}
-      />
-    );
-  }
-}
-
-export function $createEquationNode(
-  equation = '',
-  inline = false,
-): EquationNode {
-  const equationNode = new EquationNode(equation, inline);
-  return $applyNodeReplacement(equationNode);
-}
-
-export function $isEquationNode(
-  node: LexicalNode | null | undefined,
-): node is EquationNode {
-  return node instanceof EquationNode;
-}