@collabchron/notiq 0.2.0

package/src/components/editor/nodes/Hint/index.tsx

@@ -0,0 +1,190 @@
+import {
+    createCommand,
+    createEditor,
+    DecoratorNode,
+    LexicalCommand,
+    LexicalEditor,
+    LexicalNode,
+    NodeKey,
+    SerializedEditor,
+    SerializedLexicalNode,
+    Spread,
+    $getSelection,
+    $isRangeSelection,
+    COMMAND_PRIORITY_LOW,
+} from "lexical";
+import React, { Suspense, useEffect } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+const HintComponent = React.lazy(() => import("./HintComponet"));
+
+export type HintType = "success" | "warning" | "info" | "error" | "hint";
+
+
+export type SerializedHint = Spread<
+  {
+    type: "hint"; 
+    variant: HintType;
+    caption: SerializedEditor;
+  },
+  SerializedLexicalNode
+>;
+
+export class Hint extends DecoratorNode<React.ReactElement> {
+  __variant: HintType;
+  __caption: LexicalEditor;
+
+  constructor(variant: HintType, caption?: LexicalEditor, key?: NodeKey) {
+    super(key);
+    this.__variant = variant;
+    if (!caption) {
+      const initialEditorState = {
+        root: {
+          children: [
+            {
+              children: [
+                {
+                  detail: 0,
+                  format: 0,
+                  mode: "normal",
+                  style: "",
+                  text: " ",
+                  type: "text",
+                  version: 1,
+                },
+              ],
+              direction: null,
+              format: "",
+              indent: 0,
+              type: "paragraph",
+              version: 1,
+              textFormat: 0,
+              textStyle: "",
+            },
+          ],
+          direction: null,
+          format: "",
+          indent: 0,
+          type: "root",
+          version: 1,
+        },
+      };
+
+      const newEditor = createEditor();
+      const parsedEditorState = newEditor.parseEditorState(JSON.stringify(initialEditorState));
+      newEditor.setEditorState(parsedEditorState);
+
+      this.__caption = newEditor;
+    } else {
+      this.__caption = caption;
+    }
+  }
+
+  static getType(): string {
+    return "hint";
+  }
+
+  static clone(node: Hint): Hint {
+    return new Hint(node.__variant, node.__caption, node.__key);
+  }
+  static importJSON(serializedNode: SerializedHint): Hint {
+    return new Hint(
+      serializedNode.variant, // Change from type to variant
+      undefined
+    ).updateFromJSON(serializedNode);
+  }
+
+
+  setVariant(variant: HintType) {
+    const self = this.getWritable(); // Get mutable instance
+    self.__variant = variant;
+    return self;
+  }
+
+  createDOM(): HTMLElement {
+    const element = document.createElement("div");
+    element.className = `hint-${this.__type}`;
+    return element;
+  }
+
+  updateFromJSON(serializedNode: SerializedHint): this {
+    super.updateFromJSON(serializedNode);
+    const nestedEditor = this.__caption;
+    const editorState = nestedEditor.parseEditorState(serializedNode.caption.editorState);
+    if (!editorState.isEmpty()) {
+      nestedEditor.setEditorState(editorState);
+    }
+    return this;
+  }
+
+  exportJSON(): SerializedHint {
+    return {
+      ...super.exportJSON(),
+      variant: this.__variant,
+      type: "hint", 
+      caption: this.__caption.toJSON(),
+    };
+  }
+
+  updateDOM(): false {
+    return false;
+  }
+
+  decorate(): React.ReactElement {
+    return (
+      <Suspense fallback={null}>
+        <HintComponent
+          type={this.__variant}
+          captionEditor={this.__caption}
+          nodeKey={this.getKey()}
+        />
+      </Suspense>
+    );
+  }
+}
+
+export function $isHintNode(
+  node: LexicalNode | null | undefined
+): node is Hint {
+  return node instanceof Hint;
+}
+
+export function $createHintNode(
+  type: HintType,
+): Hint {
+  return new Hint(type);
+}
+
+export const INSERT_HINT_COMMAND: LexicalCommand<HintType> = createCommand();
+
+export function $insertHintNode(type: HintType) {
+  const selection = $getSelection();
+  if ($isRangeSelection(selection)) {
+    const hintNode = $createHintNode(type);
+    selection.insertNodes([hintNode]);
+  }
+}
+
+
+
+export default function HintPlugin() {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    if (!editor.hasNodes([Hint])) {
+      throw new Error("Hint: Hint not registered on editor");
+    }
+  }, [editor]);
+  useEffect(() => {
+    return editor.registerCommand(
+      INSERT_HINT_COMMAND,
+      (payload: HintType, editor: LexicalEditor) => {
+        editor.update(() => {
+          $insertHintNode(payload);
+        });
+        return true;
+      },
+      COMMAND_PRIORITY_LOW
+    );
+  }, [editor]);
+
+  return null;
+}

package/src/components/editor/nodes/ImageNode/index.tsx

@@ -0,0 +1,328 @@
+import type {
+  DOMConversionMap,
+  DOMConversionOutput,
+  DOMExportOutput,
+  EditorConfig,
+  LexicalEditor,
+  LexicalNode,
+  LexicalUpdateJSON,
+  NodeKey,
+  SerializedEditor,
+  SerializedLexicalNode,
+  Spread,
+} from "lexical";
+import type { JSX } from "react";
+
+import { $applyNodeReplacement, createEditor, DecoratorNode } from "lexical";
+import * as React from "react";
+import { Suspense } from "react";
+
+const ImageComponent = React.lazy(() => import("@/components/ui/image"));
+export type alignmentType =
+  | "center"
+  | "left"
+  | "right"
+  | "bottom"
+  | "end"
+  | "start";
+
+export interface ImagePayload {
+  altText: string;
+  caption?: LexicalEditor;
+  height?: number;
+  key?: NodeKey;
+  maxWidth?: number;
+  showCaption?: boolean;
+  src: string;
+  captionsEnabled?: boolean;
+  alignment?: alignmentType;
+  width?: number;
+  rounded?: number;
+}
+
+function isGoogleDocCheckboxImg(img: HTMLImageElement): boolean {
+  return (
+    img.parentElement != null &&
+    img.parentElement.tagName === "LI" &&
+    img.previousSibling === null &&
+    img.getAttribute("aria-roledescription") === "checkbox"
+  );
+}
+
+function $convertImageElement(domNode: Node): null | DOMConversionOutput {
+  const img = domNode as HTMLImageElement;
+  if (img.src.startsWith("file:///") || isGoogleDocCheckboxImg(img)) {
+    return null;
+  }
+  const { alt: altText, src, width, height } = img;
+  const node = $createImageNode({
+    altText,
+    height,
+    src,
+    width,
+    alignment: "center",
+    rounded: 0,
+  });
+  return { node };
+}
+
+export type SerializedImageNode = Spread<
+  {
+    altText: string;
+    caption: SerializedEditor;
+    height?: number;
+    maxWidth: number;
+    showCaption: boolean;
+    src: string;
+    rounded?: number;
+    alignment: alignmentType;
+    width?: number;
+  },
+  SerializedLexicalNode
+>;
+
+export class ImageNode extends DecoratorNode<JSX.Element> {
+  __src: string;
+  __altText: string;
+  __width: "inherit" | number;
+  __height: "inherit" | number;
+  __maxWidth: number;
+  __showCaption: boolean;
+  __caption: LexicalEditor;
+  __captionsEnabled: boolean;
+  __rounded: number;
+  __alignment: alignmentType;
+
+  static getType(): string {
+    return "image";
+  }
+
+  static clone(node: ImageNode): ImageNode {
+    return new ImageNode(
+      node.__src,
+      node.__altText,
+      node.__maxWidth,
+      node.__width,
+      node.__height,
+      node.__showCaption,
+      node.__caption,
+      node.__captionsEnabled,
+      node.__key,
+      node.__rounded,
+      node.__alignment
+    );
+  }
+
+  static importJSON(serializedNode: SerializedImageNode): ImageNode {
+    const {
+      altText,
+      height,
+      width,
+      maxWidth,
+      src,
+      showCaption,
+      alignment,
+      rounded,
+    } = serializedNode;
+    return $createImageNode({
+      altText,
+      height,
+      maxWidth,
+      showCaption,
+      src,
+      width,
+      rounded,
+      alignment,
+    }).updateFromJSON(serializedNode);
+  }
+  setAlignment(newAlignment: alignmentType) {
+    const writable = this.getWritable();
+    writable.__alignment = newAlignment;
+  }
+  getWidth(): number | "inherit" {
+    return this.__width;
+  }
+  getHeight(): number | "inherit" {
+    return this.__height;
+  }
+  setRounded(rounded: number): void {
+    const writable = this.getWritable();
+    writable.__rounded = rounded;
+  }
+  updateFromJSON(serializedNode: LexicalUpdateJSON<SerializedImageNode>): this {
+    const node = super.updateFromJSON(serializedNode);
+    const { caption } = serializedNode;
+
+    const nestedEditor = node.__caption;
+    const editorState = nestedEditor.parseEditorState(caption.editorState);
+    if (!editorState.isEmpty()) {
+      nestedEditor.setEditorState(editorState);
+    }
+    return node;
+  }
+
+  exportDOM(): DOMExportOutput {
+    const element = document.createElement("img");
+    element.setAttribute("src", this.__src);
+    element.setAttribute("alt", this.__altText);
+    element.setAttribute("width", this.__width.toString());
+    element.setAttribute("height", this.__height.toString());
+    return { element };
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {
+      img: () => ({
+        conversion: $convertImageElement,
+        priority: 0,
+      }),
+    };
+  }
+  setSrc(src: string) {
+    const self = this.getWritable();
+    self.__src = src;
+  }
+
+  constructor(
+    src: string,
+    altText: string,
+    maxWidth: number,
+    width?: "inherit" | number,
+    height?: "inherit" | number,
+    showCaption?: boolean,
+    caption?: LexicalEditor,
+    captionsEnabled?: boolean,
+    key?: NodeKey,
+    rounded: number = 0,
+    alignment: alignmentType = "center"
+  ) {
+    super(key);
+    this.__src = src;
+    this.__altText = altText;
+    this.__maxWidth = maxWidth;
+    this.__width = width || "inherit";
+    this.__height = height || "inherit";
+    this.__showCaption = showCaption || false;
+    this.__alignment = alignment;
+    this.__rounded = rounded;
+    this.__caption =
+      caption ||
+      createEditor({
+        nodes: [],
+      });
+    this.__captionsEnabled = captionsEnabled || captionsEnabled === undefined;
+  }
+
+  exportJSON(): SerializedImageNode {
+    return {
+      ...super.exportJSON(),
+      altText: this.getAltText(),
+      caption: this.__caption.toJSON(),
+      height: this.__height === "inherit" ? 0 : this.__height,
+      maxWidth: this.__maxWidth,
+      showCaption: this.__showCaption,
+      rounded: this.__rounded,
+      alignment: this.__alignment,
+      src: this.getSrc(),
+      width: this.__width === "inherit" ? 0 : this.__width,
+    };
+  }
+
+  setWidthAndHeight(
+    width: "inherit" | number,
+    height: "inherit" | number
+  ): void {
+    const writable = this.getWritable();
+    writable.__width = width;
+    writable.__height = height;
+  }
+
+  setShowCaption(showCaption: boolean): void {
+    const writable = this.getWritable();
+    writable.__showCaption = showCaption;
+  }
+
+  createDOM(config: EditorConfig): HTMLElement {
+    const span = document.createElement("span");
+    const theme = config.theme;
+    const className = theme.image;
+    if (className !== undefined) {
+      span.className = className;
+    }
+    return span;
+  }
+
+  updateDOM(): false {
+    return false;
+  }
+
+  getSrc(): string {
+    return this.__src;
+  }
+
+  getAltText(): string {
+    return this.__altText;
+  }
+
+  decorate(): JSX.Element {
+    return (
+      <Suspense fallback={null}>
+        <div
+          style={{
+            textAlign: this.__alignment as React.CSSProperties["textAlign"],
+          }}
+        >
+          <ImageComponent
+            src={this.__src}
+            altText={this.__altText}
+            width={this.__width}
+            height={this.__height}
+            maxWidth={this.__maxWidth}
+            nodeKey={this.getKey()}
+            showCaption={this.__showCaption}
+            caption={this.__caption}
+            captionsEnabled={this.__captionsEnabled}
+            resizable={true}
+            rounded={this.__rounded}
+          />
+        </div>
+      </Suspense>
+    );
+  }
+}
+
+export function $createImageNode({
+  altText,
+  height,
+  maxWidth = 500,
+  captionsEnabled,
+  src,
+  width,
+  showCaption,
+  caption,
+  key,
+  rounded,
+  alignment,
+}: ImagePayload): ImageNode {
+  return $applyNodeReplacement(
+    new ImageNode(
+      src,
+      altText,
+      maxWidth,
+      width,
+      height,
+      showCaption,
+      caption,
+      captionsEnabled,
+      key,
+      rounded,
+      alignment
+    )
+  );
+}
+
+export function $isImageNode(
+  node: LexicalNode | null | undefined
+): node is ImageNode {
+  return node instanceof ImageNode;
+}