@collabchron/notiq 0.2.0

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

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

package/src/components/editor/nodes/InlineImageNode/InlineImageNode.css

@@ -0,0 +1,94 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+.InlineImageNode__contentEditable {
+  min-height: 20px;
+  border: 0px;
+  resize: none;
+  cursor: text;
+  caret-color: rgb(5, 5, 5);
+  display: block;
+  position: relative;
+  tab-size: 1;
+  outline: 0px;
+  padding: 10px;
+  user-select: text;
+  font-size: 14px;
+  line-height: 1.4em;
+  width: calc(100% - 20px);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.InlineImageNode__placeholder {
+  font-size: 12px;
+  color: #888;
+  overflow: hidden;
+  position: absolute;
+  text-overflow: ellipsis;
+  bottom: 10px;
+  left: 10px;
+  user-select: none;
+  white-space: nowrap;
+  display: inline-block;
+  pointer-events: none;
+}
+
+.InlineImageNode_Checkbox:checked,
+.InlineImageNode_Checkbox:not(:checked) {
+  position: absolute;
+  left: -9999px;
+}
+
+.InlineImageNode_Checkbox:checked + label,
+.InlineImageNode_Checkbox:not(:checked) + label {
+  position: absolute;
+  padding-right: 55px;
+  cursor: pointer;
+  line-height: 20px;
+  display: inline-block;
+  color: #666;
+}
+
+.InlineImageNode_Checkbox:checked + label:before,
+.InlineImageNode_Checkbox:not(:checked) + label:before {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 18px;
+  height: 18px;
+  border: 1px solid #666;
+  background: #fff;
+}
+
+.InlineImageNode_Checkbox:checked + label:after,
+.InlineImageNode_Checkbox:not(:checked) + label:after {
+  content: '';
+  width: 8px;
+  height: 8px;
+  background: #222222;
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+}
+
+.InlineImageNode_Checkbox:not(:checked) + label:after {
+  opacity: 0;
+  -webkit-transform: scale(0);
+  transform: scale(0);
+}
+
+.InlineImageNode_Checkbox:checked + label:after {
+  opacity: 1;
+  -webkit-transform: scale(1);
+  transform: scale(1);
+}