@collabchron/notiq 0.2.0

package/src/components/editor/plugins/InlineImagePlugin/index.tsx

@@ -0,0 +1,351 @@
+/**
+ * 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 '../../nodes/InlineImageNode/InlineImageNode';
+import type {JSX} from 'react';
+
+import '../../nodes/InlineImageNode/InlineImageNode.css';
+
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {$wrapNodeInElement, mergeRegister} from '@lexical/utils';
+import {
+  $createParagraphNode,
+  $createRangeSelection,
+  $getSelection,
+  $insertNodes,
+  $isNodeSelection,
+  $isRootOrShadowRoot,
+  $setSelection,
+  COMMAND_PRIORITY_EDITOR,
+  COMMAND_PRIORITY_HIGH,
+  COMMAND_PRIORITY_LOW,
+  createCommand,
+  DRAGOVER_COMMAND,
+  DRAGSTART_COMMAND,
+  DROP_COMMAND,
+  getDOMSelectionFromTarget,
+  isHTMLElement,
+  LexicalCommand,
+  LexicalEditor,
+} from 'lexical';
+import * as React from 'react';
+import {useEffect, useRef, useState} from 'react';
+
+import {
+  $createInlineImageNode,
+  $isInlineImageNode,
+  InlineImageNode,
+  InlineImagePayload,
+} from '../../nodes/InlineImageNode/InlineImageNode';
+import { Button } from '@/components/ui/button';
+import TextInput from '@/components/ui/TextInput';
+import FileInput from '@/components/ui/FileInput';
+import Select from '@/components/ui/Select';
+import { DialogActions } from '@/components/ui/dialog/Dialog';
+
+export type InsertInlineImagePayload = Readonly<InlineImagePayload>;
+
+export const INSERT_INLINE_IMAGE_COMMAND: LexicalCommand<InlineImagePayload> =
+  createCommand('INSERT_INLINE_IMAGE_COMMAND');
+
+export function InsertInlineImageDialog({
+  activeEditor,
+  onClose,
+}: {
+  activeEditor: LexicalEditor;
+  onClose: () => void;
+}): JSX.Element {
+  const hasModifier = useRef(false);
+
+  const [src, setSrc] = useState('');
+  const [altText, setAltText] = useState('');
+  const [showCaption, setShowCaption] = useState(false);
+  const [position, setPosition] = useState<Position>('left');
+
+  const isDisabled = src === '';
+
+  const handleShowCaptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setShowCaption(e.target.checked);
+  };
+
+  const handlePositionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setPosition(e.target.value as Position);
+  };
+
+  const loadImage = (files: FileList | null) => {
+    const reader = new FileReader();
+    reader.onload = function () {
+      if (typeof reader.result === 'string') {
+        setSrc(reader.result);
+      }
+      return '';
+    };
+    if (files !== null) {
+      reader.readAsDataURL(files[0]);
+    }
+  };
+
+  useEffect(() => {
+    hasModifier.current = false;
+    const handler = (e: KeyboardEvent) => {
+      hasModifier.current = e.altKey;
+    };
+    document.addEventListener('keydown', handler);
+    return () => {
+      document.removeEventListener('keydown', handler);
+    };
+  }, [activeEditor]);
+
+  const handleOnClick = () => {
+    const payload = {altText, position, showCaption, src};
+    activeEditor.dispatchCommand(INSERT_INLINE_IMAGE_COMMAND, payload);
+    onClose();
+  };
+
+  return (
+    <>
+      <div style={{marginBottom: '1em'}}>
+        <FileInput
+          label="Image Upload"
+          onChange={loadImage}
+          accept="image/*"
+          data-test-id="image-modal-file-upload"
+        />
+      </div>
+      <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: '290px'}}
+        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"
+          className="InlineImageNode_Checkbox"
+          type="checkbox"
+          checked={showCaption}
+          onChange={handleShowCaptionChange}
+        />
+        <label htmlFor="caption">Show Caption</label>
+      </div>
+
+      <DialogActions>
+        <Button
+          data-test-id="image-modal-file-upload-btn"
+          disabled={isDisabled}
+          onClick={() => handleOnClick()}>
+          Confirm
+        </Button>
+      </DialogActions>
+    </>
+  );
+}
+
+export default function InlineImagePlugin(): JSX.Element | null {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    if (!editor.hasNodes([InlineImageNode])) {
+      throw new Error('ImagesPlugin: ImageNode not registered on editor');
+    }
+
+    return mergeRegister(
+      editor.registerCommand<InsertInlineImagePayload>(
+        INSERT_INLINE_IMAGE_COMMAND,
+        (payload) => {
+          const imageNode = $createInlineImageNode(payload);
+          $insertNodes([imageNode]);
+          if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
+            $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
+          }
+
+          return true;
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
+      editor.registerCommand<DragEvent>(
+        DRAGSTART_COMMAND,
+        (event) => {
+          return $onDragStart(event);
+        },
+        COMMAND_PRIORITY_HIGH,
+      ),
+      editor.registerCommand<DragEvent>(
+        DRAGOVER_COMMAND,
+        (event) => {
+          return $onDragover(event);
+        },
+        COMMAND_PRIORITY_LOW,
+      ),
+      editor.registerCommand<DragEvent>(
+        DROP_COMMAND,
+        (event) => {
+          return $onDrop(event, editor);
+        },
+        COMMAND_PRIORITY_HIGH,
+      ),
+    );
+  }, [editor]);
+
+  return null;
+}
+
+const TRANSPARENT_IMAGE =
+  'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+
+// Create the transparent image lazily when needed
+function getTransparentImage(): HTMLImageElement {
+  if (typeof document === 'undefined') {
+    // Return a mock object for SSR
+    return {} as HTMLImageElement;
+  }
+  
+  const img = document.createElement('img');
+  img.src = TRANSPARENT_IMAGE;
+  return img;
+}
+
+function $onDragStart(event: DragEvent): boolean {
+  const node = $getImageNodeInSelection();
+  if (!node) {
+    return false;
+  }
+  const dataTransfer = event.dataTransfer;
+  if (!dataTransfer) {
+    return false;
+  }
+  
+  dataTransfer.setData('text/plain', '_');
+  
+  // Only create the image if document is available
+  if (typeof document !== 'undefined') {
+    const img = getTransparentImage();
+    dataTransfer.setDragImage(img, 0, 0);
+  }
+  
+  dataTransfer.setData(
+    'application/x-lexical-drag',
+    JSON.stringify({
+      data: {
+        altText: node.__altText,
+        caption: node.__caption,
+        height: node.__height,
+        key: node.getKey(),
+        showCaption: node.__showCaption,
+        src: node.__src,
+        width: node.__width,
+      },
+      type: 'image',
+    }),
+  );
+
+  return true;
+}
+
+function $onDragover(event: DragEvent): boolean {
+  const node = $getImageNodeInSelection();
+  if (!node) {
+    return false;
+  }
+  if (!canDropImage(event)) {
+    event.preventDefault();
+  }
+  return true;
+}
+
+function $onDrop(event: DragEvent, editor: LexicalEditor): boolean {
+  const node = $getImageNodeInSelection();
+  if (!node) {
+    return false;
+  }
+  const data = getDragImageData(event);
+  if (!data) {
+    return false;
+  }
+  event.preventDefault();
+  if (canDropImage(event)) {
+    const range = getDragSelection(event);
+    node.remove();
+    const rangeSelection = $createRangeSelection();
+    if (range !== null && range !== undefined) {
+      rangeSelection.applyDOMRange(range);
+    }
+    $setSelection(rangeSelection);
+    editor.dispatchCommand(INSERT_INLINE_IMAGE_COMMAND, data);
+  }
+  return true;
+}
+
+function $getImageNodeInSelection(): InlineImageNode | null {
+  const selection = $getSelection();
+  if (!$isNodeSelection(selection)) {
+    return null;
+  }
+  const nodes = selection.getNodes();
+  const node = nodes[0];
+  return $isInlineImageNode(node) ? node : null;
+}
+
+function getDragImageData(event: DragEvent): null | InsertInlineImagePayload {
+  const dragData = event.dataTransfer?.getData('application/x-lexical-drag');
+  if (!dragData) {
+    return null;
+  }
+  const {type, data} = JSON.parse(dragData);
+  if (type !== 'image') {
+    return null;
+  }
+
+  return data;
+}
+
+declare global {
+  interface DragEvent {
+    rangeOffset?: number;
+    rangeParent?: Node;
+  }
+}
+
+function canDropImage(event: DragEvent): boolean {
+  const target = event.target;
+  return !!(
+    isHTMLElement(target) &&
+    !target.closest('code, span.editor-image') &&
+    isHTMLElement(target.parentElement) &&
+    target.parentElement.closest('div.ContentEditable__root')
+  );
+}
+
+function getDragSelection(event: DragEvent): Range | null | undefined {
+  let range;
+  const domSelection = getDOMSelectionFromTarget(event.target);
+  if (document.caretRangeFromPoint) {
+    range = document.caretRangeFromPoint(event.clientX, event.clientY);
+  } else if (event.rangeParent && domSelection !== null) {
+    domSelection.collapse(event.rangeParent, event.rangeOffset || 0);
+    range = domSelection.getRangeAt(0);
+  } else {
+    throw Error('Cannot get the selection when dragging');
+  }
+
+  return range;
+}

package/src/components/editor/plugins/LayoutPlugin/index.tsx

@@ -0,0 +1,238 @@
+/**
+ * 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 {ElementNode, LexicalCommand, LexicalNode, NodeKey} from 'lexical';
+
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {
+  $findMatchingParent,
+  $insertNodeToNearestRoot,
+  mergeRegister,
+} from '@lexical/utils';
+import {
+  $createParagraphNode,
+  $getNodeByKey,
+  $getSelection,
+  $isRangeSelection,
+  COMMAND_PRIORITY_EDITOR,
+  COMMAND_PRIORITY_LOW,
+  createCommand,
+  KEY_ARROW_DOWN_COMMAND,
+  KEY_ARROW_LEFT_COMMAND,
+  KEY_ARROW_RIGHT_COMMAND,
+  KEY_ARROW_UP_COMMAND,
+} from 'lexical';
+import {useEffect} from 'react';
+
+import {
+  $createLayoutContainerNode,
+  $isLayoutContainerNode,
+  LayoutContainerNode,
+} from '../../nodes/LayoutNode/LayoutContainerNode';
+import {
+  $createLayoutItemNode,
+  $isLayoutItemNode,
+  LayoutItemNode,
+} from '../../nodes/LayoutNode/LayoutItemNode';
+
+export const INSERT_LAYOUT_COMMAND: LexicalCommand<string> =
+  createCommand<string>();
+
+export const UPDATE_LAYOUT_COMMAND: LexicalCommand<{
+  template: string;
+  nodeKey: NodeKey;
+}> = createCommand<{template: string; nodeKey: NodeKey}>();
+
+export function LayoutPlugin(): null {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    if (!editor.hasNodes([LayoutContainerNode, LayoutItemNode])) {
+      throw new Error(
+        'LayoutPlugin: LayoutContainerNode, or LayoutItemNode not registered on editor',
+      );
+    }
+
+    const $onEscape = (before: boolean) => {
+      const selection = $getSelection();
+      if (
+        $isRangeSelection(selection) &&
+        selection.isCollapsed() &&
+        selection.anchor.offset === 0
+      ) {
+        const container = $findMatchingParent(
+          selection.anchor.getNode(),
+          $isLayoutContainerNode,
+        );
+
+        if ($isLayoutContainerNode(container)) {
+          const parent = container.getParent<ElementNode>();
+          const child =
+            parent &&
+            (before
+              ? parent.getFirstChild<LexicalNode>()
+              : parent?.getLastChild<LexicalNode>());
+          const descendant = before
+            ? container.getFirstDescendant<LexicalNode>()?.getKey()
+            : container.getLastDescendant<LexicalNode>()?.getKey();
+
+          if (
+            parent !== null &&
+            child === container &&
+            selection.anchor.key === descendant
+          ) {
+            if (before) {
+              container.insertBefore($createParagraphNode());
+            } else {
+              container.insertAfter($createParagraphNode());
+            }
+          }
+        }
+      }
+
+      return false;
+    };
+
+    const $fillLayoutItemIfEmpty = (node: LayoutItemNode) => {
+      if (node.isEmpty()) {
+        node.append($createParagraphNode());
+      }
+    };
+
+    const $removeIsolatedLayoutItem = (node: LayoutItemNode): boolean => {
+      const parent = node.getParent<ElementNode>();
+      if (!$isLayoutContainerNode(parent)) {
+        const children = node.getChildren<LexicalNode>();
+        for (const child of children) {
+          node.insertBefore(child);
+        }
+        node.remove();
+        return true;
+      }
+      return false;
+    };
+
+    return mergeRegister(
+      // When layout is the last child pressing down/right arrow will insert paragraph
+      // below it to allow adding more content. It's similar what $insertBlockNode
+      // (mainly for decorators), except it'll always be possible to continue adding
+      // new content even if trailing paragraph is accidentally deleted
+      editor.registerCommand(
+        KEY_ARROW_DOWN_COMMAND,
+        () => $onEscape(false),
+        COMMAND_PRIORITY_LOW,
+      ),
+      editor.registerCommand(
+        KEY_ARROW_RIGHT_COMMAND,
+        () => $onEscape(false),
+        COMMAND_PRIORITY_LOW,
+      ),
+      // When layout is the first child pressing up/left arrow will insert paragraph
+      // above it to allow adding more content. It's similar what $insertBlockNode
+      // (mainly for decorators), except it'll always be possible to continue adding
+      // new content even if leading paragraph is accidentally deleted
+      editor.registerCommand(
+        KEY_ARROW_UP_COMMAND,
+        () => $onEscape(true),
+        COMMAND_PRIORITY_LOW,
+      ),
+      editor.registerCommand(
+        KEY_ARROW_LEFT_COMMAND,
+        () => $onEscape(true),
+        COMMAND_PRIORITY_LOW,
+      ),
+      editor.registerCommand(
+        INSERT_LAYOUT_COMMAND,
+        (template) => {
+          editor.update(() => {
+            const container = $createLayoutContainerNode(template);
+            const itemsCount = getItemsCountFromTemplate(template);
+
+            for (let i = 0; i < itemsCount; i++) {
+              container.append(
+                $createLayoutItemNode().append($createParagraphNode()),
+              );
+            }
+
+            $insertNodeToNearestRoot(container);
+            container.selectStart();
+          });
+
+          return true;
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
+      editor.registerCommand(
+        UPDATE_LAYOUT_COMMAND,
+        ({template, nodeKey}) => {
+          editor.update(() => {
+            const container = $getNodeByKey<LexicalNode>(nodeKey);
+
+            if (!$isLayoutContainerNode(container)) {
+              return;
+            }
+
+            const itemsCount = getItemsCountFromTemplate(template);
+            const prevItemsCount = getItemsCountFromTemplate(
+              container.getTemplateColumns(),
+            );
+
+            // Add or remove extra columns if new template does not match existing one
+            if (itemsCount > prevItemsCount) {
+              for (let i = prevItemsCount; i < itemsCount; i++) {
+                container.append(
+                  $createLayoutItemNode().append($createParagraphNode()),
+                );
+              }
+            } else if (itemsCount < prevItemsCount) {
+              for (let i = prevItemsCount - 1; i >= itemsCount; i--) {
+                const layoutItem = container.getChildAtIndex<LexicalNode>(i);
+
+                if ($isLayoutItemNode(layoutItem)) {
+                  layoutItem.remove();
+                }
+              }
+            }
+
+            container.setTemplateColumns(template);
+          });
+
+          return true;
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
+
+      editor.registerNodeTransform(LayoutItemNode, (node) => {
+        // Structure enforcing transformers for each node type. In case nesting structure is not
+        // "Container > Item" it'll unwrap nodes and convert it back
+        // to regular content.
+        const isRemoved = $removeIsolatedLayoutItem(node);
+
+        if (!isRemoved) {
+          // Layout item should always have a child. this function will listen
+          // for any empty layout item and fill it with a paragraph node
+          $fillLayoutItemIfEmpty(node);
+        }
+      }),
+      editor.registerNodeTransform(LayoutContainerNode, (node) => {
+        const children = node.getChildren<LexicalNode>();
+        if (!children.every($isLayoutItemNode)) {
+          for (const child of children) {
+            node.insertBefore(child);
+          }
+          node.remove();
+        }
+      }),
+    );
+  }, [editor]);
+
+  return null;
+}
+
+function getItemsCountFromTemplate(template: string): number {
+  return template.trim().split(/\s+/).length;
+}

package/src/components/editor/plugins/LinkPlugin/index.tsx

@@ -0,0 +1,36 @@
+/**
+ * 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 {LinkPlugin as LexicalLinkPlugin} from '@lexical/react/LexicalLinkPlugin';
+import * as React from 'react';
+
+import {validateUrl} from '../../utils/url';
+
+type Props = {
+  hasLinkAttributes?: boolean;
+};
+
+export default function LinkPlugin({
+  hasLinkAttributes = false,
+}: Props): JSX.Element {
+  return (
+    <LexicalLinkPlugin
+      validateUrl={validateUrl}
+      attributes={
+        hasLinkAttributes
+          ? {
+              rel: 'noopener noreferrer',
+              target: '_blank',
+            }
+          : undefined
+      }
+    />
+  );
+}