@collabchron/notiq 0.2.0

package/src/components/editor/index.tsx

@@ -0,0 +1,39 @@
+"use client"
+import { SharedHistoryContext } from "../providers/SharedHistoryContext";
+import { ToolbarContext } from "../providers/ToolbarContext";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+
+
+import theme from "./themes/editor-theme";
+import Core from "./Core";
+import nodes from "./nodes";
+
+export default function Editor({
+  isEditable = false,
+  content,
+}: {
+  isEditable: boolean;
+  content?: unknown;
+}) {
+  const initialConfig = {
+    namespace: "Bloger editor",
+    theme,
+    // editorState:
+    //   typeof content === "string" ? content : JSON.stringify(content),
+    nodes: [...nodes],
+    onError: (error: Error) => {
+        throw error;
+    },
+    editable: isEditable,
+  };
+
+  return (
+    <LexicalComposer initialConfig={initialConfig}>
+      <SharedHistoryContext>
+        <ToolbarContext>
+            <Core/>
+        </ToolbarContext>
+      </SharedHistoryContext>
+    </LexicalComposer>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,143 @@
+/**
+ * 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

@@ -0,0 +1,170 @@
+/**
+ * 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;
+}