@collabchron/notiq 0.2.0 → 1.0.0

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

@@ -1,328 +0,0 @@
-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;
-}

package/src/components/editor/nodes/InlineImageNode/InlineImageComponent.tsx

@@ -1,383 +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 {Position} from './InlineImageNode';
-import type {BaseSelection, LexicalEditor, NodeKey} from 'lexical';
-import type {JSX} from 'react';
-
-import './InlineImageNode.css';
-
-import {AutoFocusPlugin} from '@lexical/react/LexicalAutoFocusPlugin';
-import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
-import {LexicalNestedComposer} from '@lexical/react/LexicalNestedComposer';
-import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
-import {useLexicalEditable} from '@lexical/react/useLexicalEditable';
-import {useLexicalNodeSelection} from '@lexical/react/useLexicalNodeSelection';
-import {mergeRegister} from '@lexical/utils';
-import {
-  $getNodeByKey,
-  $getSelection,
-  $isNodeSelection,
-  $setSelection,
-  CLICK_COMMAND,
-  COMMAND_PRIORITY_LOW,
-  DRAGSTART_COMMAND,
-  KEY_ENTER_COMMAND,
-  KEY_ESCAPE_COMMAND,
-  SELECTION_CHANGE_COMMAND,
-} from 'lexical';
-import * as React from 'react';
-import {Suspense, useCallback, useEffect, useRef, useState} from 'react';
-
-// import useModal from '../../hooks/useModal';
-import LinkPlugin from '../../plugins/LinkPlugin';
-// import ContentEditable from '@/components/ui/ContentEditable';
-import {InlineImageNode} from './InlineImageNode';
-import { Button } from '@/components/ui/button';
-import TextInput from '@/components/ui/TextInput';
-import { ContentEditable } from '@lexical/react/LexicalContentEditable';
-import { DialogActions } from '@/components/ui/dialog/Dialog';
-import Select from '@/components/ui/Select';
-import useModal from '@/components/ui/models/use-model';
-
-const imageCache = new Set();
-
-function useSuspenseImage(src: string) {
-  if (!imageCache.has(src)) {
-    throw new Promise((resolve) => {
-      const img = new Image();
-      img.src = src;
-      img.onload = () => {
-        imageCache.add(src);
-        resolve(null);
-      };
-    });
-  }
-}
-
-function LazyImage({
-  altText,
-  className,
-  imageRef,
-  src,
-  width,
-  height,
-  position,
-}: {
-  altText: string;
-  className: string | null;
-  height: 'inherit' | number;
-  imageRef: {current: null | HTMLImageElement};
-  src: string;
-  width: 'inherit' | number;
-  position: Position;
-}): JSX.Element {
-  useSuspenseImage(src);
-  return (
-    <img
-      className={className || undefined}
-      src={src}
-      alt={altText}
-      ref={imageRef}
-      data-position={position}
-      style={{
-        display: 'block',
-        height,
-        width,
-      }}
-      draggable="false"
-    />
-  );
-}
-
-export function UpdateInlineImageDialog({
-  activeEditor,
-  nodeKey,
-  onClose,
-}: {
-  activeEditor: LexicalEditor;
-  nodeKey: NodeKey;
-  onClose: () => void;
-}): JSX.Element {
-  const editorState = activeEditor.getEditorState();
-  const node = editorState.read(
-    () => $getNodeByKey(nodeKey) as InlineImageNode,
-  );
-  const [altText, setAltText] = useState(node.getAltText());
-  const [showCaption, setShowCaption] = useState(node.getShowCaption());
-  const [position, setPosition] = useState<Position>(node.getPosition());
-
-  const handleShowCaptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setShowCaption(e.target.checked);
-  };
-
-  const handlePositionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setPosition(e.target.value as Position);
-  };
-
-  const handleOnConfirm = () => {
-    const payload = {altText, position, showCaption};
-    if (node) {
-      activeEditor.update(() => {
-        node.update(payload);
-      });
-    }
-    onClose();
-  };
-
-  return (
-    <>
-      <div style={{marginBottom: '1em'}}>
-        <TextInput
-          label="Alt Text"
-          placeholder="Descriptive alternative text"
-          onChange={setAltText}
-          value={altText}
-          data-test-id="image-modal-alt-text-input"
-        />
-      </div>
-
-      <Select
-        style={{marginBottom: '1em', width: '208px'}}
-        value={position}
-        label="Position"
-        name="position"
-        id="position-select"
-        onChange={handlePositionChange}>
-        <option value="left">Left</option>
-        <option value="right">Right</option>
-        <option value="full">Full Width</option>
-      </Select>
-
-      <div className="Input__wrapper">
-        <input
-          id="caption"
-          type="checkbox"
-          checked={showCaption}
-          onChange={handleShowCaptionChange}
-        />
-        <label htmlFor="caption">Show Caption</label>
-      </div>
-
-      <DialogActions>
-        <Button
-          data-test-id="image-modal-file-upload-btn"
-          onClick={() => handleOnConfirm()}>
-          Confirm
-        </Button>
-      </DialogActions>
-    </>
-  );
-}
-
-export default function InlineImageComponent({
-  src,
-  altText,
-  nodeKey,
-  width,
-  height,
-  showCaption,
-  caption,
-  position,
-}: {
-  altText: string;
-  caption: LexicalEditor;
-  height: 'inherit' | number;
-  nodeKey: NodeKey;
-  showCaption: boolean;
-  src: string;
-  width: 'inherit' | number;
-  position: Position;
-}): JSX.Element {
-  const [modal, showModal] = useModal();
-  const imageRef = useRef<null | HTMLImageElement>(null);
-  const buttonRef = useRef<HTMLButtonElement | null>(null);
-  const [isSelected, setSelected, clearSelection] =
-    useLexicalNodeSelection(nodeKey);
-  const [editor] = useLexicalComposerContext();
-  const [selection, setSelection] = useState<BaseSelection | null>(null);
-  const activeEditorRef = useRef<LexicalEditor | null>(null);
-  const isEditable = useLexicalEditable();
-
-  const $onEnter = useCallback(
-    (event: KeyboardEvent) => {
-      const latestSelection = $getSelection();
-      const buttonElem = buttonRef.current;
-      if (
-        isSelected &&
-        $isNodeSelection(latestSelection) &&
-        latestSelection.getNodes().length === 1
-      ) {
-        if (showCaption) {
-          // Move focus into nested editor
-          $setSelection(null);
-          event.preventDefault();
-          caption.focus();
-          return true;
-        } else if (
-          buttonElem !== null &&
-          buttonElem !== document.activeElement
-        ) {
-          event.preventDefault();
-          buttonElem.focus();
-          return true;
-        }
-      }
-      return false;
-    },
-    [caption, isSelected, showCaption],
-  );
-
-  const $onEscape = useCallback(
-    (event: KeyboardEvent) => {
-      if (
-        activeEditorRef.current === caption ||
-        buttonRef.current === event.target
-      ) {
-        $setSelection(null);
-        editor.update(() => {
-          setSelected(true);
-          const parentRootElement = editor.getRootElement();
-          if (parentRootElement !== null) {
-            parentRootElement.focus();
-          }
-        });
-        return true;
-      }
-      return false;
-    },
-    [caption, editor, setSelected],
-  );
-
-  useEffect(() => {
-    let isMounted = true;
-    const unregister = mergeRegister(
-      editor.registerUpdateListener(({editorState}) => {
-        if (isMounted) {
-          setSelection(editorState.read(() => $getSelection()));
-        }
-      }),
-      editor.registerCommand(
-        SELECTION_CHANGE_COMMAND,
-        (_, activeEditor) => {
-          activeEditorRef.current = activeEditor;
-          return false;
-        },
-        COMMAND_PRIORITY_LOW,
-      ),
-      editor.registerCommand<MouseEvent>(
-        CLICK_COMMAND,
-        (payload) => {
-          const event = payload;
-          if (event.target === imageRef.current) {
-            if (event.shiftKey) {
-              setSelected(!isSelected);
-            } else {
-              clearSelection();
-              setSelected(true);
-            }
-            return true;
-          }
-
-          return false;
-        },
-        COMMAND_PRIORITY_LOW,
-      ),
-      editor.registerCommand(
-        DRAGSTART_COMMAND,
-        (event) => {
-          if (event.target === imageRef.current) {
-            // TODO This is just a temporary workaround for FF to behave like other browsers.
-            // Ideally, this handles drag & drop too (and all browsers).
-            event.preventDefault();
-            return true;
-          }
-          return false;
-        },
-        COMMAND_PRIORITY_LOW,
-      ),
-      editor.registerCommand(KEY_ENTER_COMMAND, $onEnter, COMMAND_PRIORITY_LOW),
-      editor.registerCommand(
-        KEY_ESCAPE_COMMAND,
-        $onEscape,
-        COMMAND_PRIORITY_LOW,
-      ),
-    );
-    return () => {
-      isMounted = false;
-      unregister();
-    };
-  }, [
-    clearSelection,
-    editor,
-    isSelected,
-    nodeKey,
-    $onEnter,
-    $onEscape,
-    setSelected,
-  ]);
-
-  const draggable = isSelected && $isNodeSelection(selection);
-  const isFocused = isSelected && isEditable;
-  return (
-    <Suspense fallback={null}>
-      <>
-        <span draggable={draggable}>
-          {isEditable && (
-            <button
-              className="image-edit-button"
-              ref={buttonRef}
-              onClick={() => {
-                showModal('Update Inline Image', (onClose) => (
-                  <UpdateInlineImageDialog
-                    activeEditor={editor}
-                    nodeKey={nodeKey}
-                    onClose={onClose}
-                  />
-                ));
-              }}>
-              Edit
-            </button>
-          )}
-          <LazyImage
-            className={
-              isFocused
-                ? `focused ${$isNodeSelection(selection) ? 'draggable' : ''}`
-                : null
-            }
-            src={src}
-            altText={altText}
-            imageRef={imageRef}
-            width={width}
-            height={height}
-            position={position}
-          />
-        </span>
-        {showCaption && (
-          <span className="image-caption-container">
-            <LexicalNestedComposer initialEditor={caption}>
-              <AutoFocusPlugin />
-              <LinkPlugin />
-              <RichTextPlugin
-                contentEditable={
-                  <ContentEditable
-                    placeholder="Enter a caption..."
-                    placeholderClassName="InlineImageNode__placeholder"
-                    className="InlineImageNode__contentEditable"
-                  />
-                }
-                ErrorBoundary={LexicalErrorBoundary}
-              />
-            </LexicalNestedComposer>
-          </span>
-        )}
-      </>
-      {modal}
-    </Suspense>
-  );
-}