5htp-core 0.4.8 → 0.4.9

package/src/client/components/inputv3/Rte/nodes/ImageNode.tsx

@@ -0,0 +1,266 @@
+/**
+ * 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,
+  DOMExportOutput,
+  EditorConfig,
+  LexicalEditor,
+  LexicalNode,
+  NodeKey,
+  SerializedEditor,
+  SerializedLexicalNode,
+  Spread,
+} from 'lexical';
+
+import {$applyNodeReplacement, createEditor, DecoratorNode} from 'lexical';
+import * as React from 'react';
+import {Suspense} from 'react';
+
+const ImageComponent = React.lazy(() => import('./ImageComponent'));
+
+export interface ImagePayload {
+  altText: string;
+  caption?: LexicalEditor;
+  height?: number;
+  key?: NodeKey;
+  maxWidth?: number;
+  showCaption?: boolean;
+  src: string;
+  width?: number;
+  captionsEnabled?: boolean;
+}
+
+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});
+  return {node};
+}
+
+export type SerializedImageNode = Spread<
+  {
+    altText: string;
+    caption: SerializedEditor;
+    height?: number;
+    maxWidth: number;
+    showCaption: boolean;
+    src: string;
+    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;
+  // Captions cannot yet be used within editor cells
+  __captionsEnabled: boolean;
+
+  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,
+    );
+  }
+
+  static importJSON(serializedNode: SerializedImageNode): ImageNode {
+    const {altText, height, width, maxWidth, caption, src, showCaption} =
+      serializedNode;
+    const node = $createImageNode({
+      altText,
+      height,
+      maxWidth,
+      showCaption,
+      src,
+      width,
+    });
+    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: (node: Node) => ({
+        conversion: $convertImageElement,
+        priority: 0,
+      }),
+    };
+  }
+
+  constructor(
+    src: string,
+    altText: string,
+    maxWidth: number,
+    width?: 'inherit' | number,
+    height?: 'inherit' | number,
+    showCaption?: boolean,
+    caption?: LexicalEditor,
+    captionsEnabled?: boolean,
+    key?: NodeKey,
+  ) {
+    super(key);
+    this.__src = src;
+    this.__altText = altText;
+    this.__maxWidth = maxWidth;
+    this.__width = width || 'inherit';
+    this.__height = height || 'inherit';
+    this.__showCaption = showCaption || false;
+    this.__caption =
+      caption ||
+      createEditor({
+        nodes: [],
+      });
+    this.__captionsEnabled = captionsEnabled || captionsEnabled === undefined;
+  }
+
+  exportJSON(): SerializedImageNode {
+    return {
+      altText: this.getAltText(),
+      caption: this.__caption.toJSON(),
+      height: this.__height === 'inherit' ? 0 : this.__height,
+      maxWidth: this.__maxWidth,
+      showCaption: this.__showCaption,
+      src: this.getSrc(),
+      type: 'image',
+      version: 1,
+      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;
+  }
+
+  // View
+
+  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}>
+        <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}
+        />
+      </Suspense>
+    );
+  }
+}
+
+export function $createImageNode({
+  altText,
+  height,
+  maxWidth = 500,
+  captionsEnabled,
+  src,
+  width,
+  showCaption,
+  caption,
+  key,
+}: ImagePayload): ImageNode {
+  return $applyNodeReplacement(
+    new ImageNode(
+      src,
+      altText,
+      maxWidth,
+      width,
+      height,
+      showCaption,
+      caption,
+      captionsEnabled,
+      key,
+    ),
+  );
+}
+
+export function $isImageNode(
+  node: LexicalNode | null | undefined,
+): node is ImageNode {
+  return node instanceof ImageNode;
+}

package/src/client/components/inputv3/Rte/nodes/InlineImageNode/InlineImageComponent.tsx

@@ -0,0 +1,402 @@
+/**
+ * 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 './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_BACKSPACE_COMMAND,
+    KEY_DELETE_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';
+
+// Core
+import useContext from '@/client/context';
+import Select, { Choice } from '@client/components/Select';
+import Button from '@client/components/button';
+import Input from '@client/components/inputv3';
+
+import LinkPlugin from '../../plugins/LinkPlugin';
+import ContentEditable from '../../ui/ContentEditable';
+import { $isInlineImageNode, InlineImageNode } from './InlineImageNode';
+
+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;
+}): React.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,
+    close,
+}: {
+    activeEditor: LexicalEditor;
+    nodeKey: NodeKey;
+    close: () => void;
+}): React.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 = (choice: Choice) => {
+        setPosition( choice.value as Position );
+    };
+
+    const handleOnConfirm = () => {
+        const payload = { altText, position, showCaption };
+        if (node) {
+            activeEditor.update(() => {
+                node.update(payload);
+            });
+        }
+        close();
+    };
+
+    return (
+        <>
+            <Input
+                title="Alt Text"
+                placeholder="Descriptive alternative text"
+                onChange={setAltText}
+                value={altText}
+            />
+
+            <Select
+                style={{ marginBottom: '1em', width: '208px' }}
+                value={position}
+                title="Position"
+                onChange={handlePositionChange} choices={[
+                { value: 'left', label: 'Left' },
+                { value: 'right', label: 'Right' },
+                { value: 'full', label: 'Full Width' },
+            ]} />
+
+            <div className="Input__wrapper">
+                <input
+                    id="caption"
+                    type="checkbox"
+                    checked={showCaption}
+                    onChange={handleShowCaptionChange}
+                />
+                <label htmlFor="caption">Show Caption</label>
+            </div>
+
+            <Button type='primary'
+                onClick={() => handleOnConfirm()}>
+                Confirm
+            </Button>
+        </>
+    );
+}
+
+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;
+}): React.JSX.Element {
+
+    const { modal } = useContext();
+
+    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 $onDelete = useCallback(
+        (payload: KeyboardEvent) => {
+            const deleteSelection = $getSelection();
+            if (isSelected && $isNodeSelection(deleteSelection)) {
+                const event: KeyboardEvent = payload;
+                event.preventDefault();
+                if (isSelected && $isNodeSelection(deleteSelection)) {
+                    editor.update(() => {
+                        deleteSelection.getNodes().forEach((node) => {
+                            if ($isInlineImageNode(node)) {
+                                node.remove();
+                            }
+                        });
+                    });
+                }
+            }
+            return false;
+        },
+        [editor, isSelected],
+    );
+
+    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_DELETE_COMMAND,
+                $onDelete,
+                COMMAND_PRIORITY_LOW,
+            ),
+            editor.registerCommand(
+                KEY_BACKSPACE_COMMAND,
+                $onDelete,
+                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,
+        $onDelete,
+        $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={() => {
+                                modal.show('Update Inline Image', UpdateInlineImageDialog, { editor, nodeKey });
+                            }}>
+                            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>
+                )}
+            </>
+        </Suspense>
+    );
+}