@crystallize/design-system 1.4.0 → 1.4.1

package/src/rich-text-editor/plugins/DraggableBlockPlugin/index.tsx

@@ -0,0 +1,368 @@
+/**
+ * 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 './index.css';
+
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {eventFiles} from '@lexical/rich-text';
+import {mergeRegister} from '@lexical/utils';
+import {
+  $getNearestNodeFromDOMNode,
+  $getNodeByKey,
+  $getRoot,
+  COMMAND_PRIORITY_HIGH,
+  COMMAND_PRIORITY_LOW,
+  DRAGOVER_COMMAND,
+  DROP_COMMAND,
+  LexicalEditor,
+} from 'lexical';
+import * as React from 'react';
+import {DragEvent as ReactDragEvent, useEffect, useRef, useState} from 'react';
+import {createPortal} from 'react-dom';
+
+import {isHTMLElement} from '../../utils/guard';
+import {Point} from '../../utils/point';
+import {Rect} from '../../utils/rect';
+
+const SPACE = 4;
+const TARGET_LINE_HALF_HEIGHT = 2;
+const DRAGGABLE_BLOCK_MENU_CLASSNAME = 'draggable-block-menu';
+const DRAG_DATA_FORMAT = 'application/x-lexical-drag-block';
+const TEXT_BOX_HORIZONTAL_PADDING = 28;
+
+const Downward = 1;
+const Upward = -1;
+const Indeterminate = 0;
+
+let prevIndex = Infinity;
+
+function getCurrentIndex(keysLength: number): number {
+  if (keysLength === 0) {
+    return Infinity;
+  }
+  if (prevIndex >= 0 && prevIndex < keysLength) {
+    return prevIndex;
+  }
+
+  return Math.floor(keysLength / 2);
+}
+
+function getTopLevelNodeKeys(editor: LexicalEditor): string[] {
+  return editor.getEditorState().read(() => $getRoot().getChildrenKeys());
+}
+
+function getBlockElement(
+  anchorElem: HTMLElement,
+  editor: LexicalEditor,
+  event: MouseEvent,
+): HTMLElement | null {
+  const anchorElementRect = anchorElem.getBoundingClientRect();
+  const topLevelNodeKeys = getTopLevelNodeKeys(editor);
+
+  let blockElem: HTMLElement | null = null;
+
+  editor.getEditorState().read(() => {
+    let index = getCurrentIndex(topLevelNodeKeys.length);
+    let direction = Indeterminate;
+
+    while (index >= 0 && index < topLevelNodeKeys.length) {
+      const key = topLevelNodeKeys[index];
+      const elem = editor.getElementByKey(key);
+      if (elem === null) {
+        break;
+      }
+      const point = new Point(event.x, event.y);
+      const domRect = Rect.fromDOM(elem);
+      const {marginTop, marginBottom} = window.getComputedStyle(elem);
+
+      const rect = domRect.generateNewRect({
+        bottom: domRect.bottom + parseFloat(marginBottom),
+        left: anchorElementRect.left,
+        right: anchorElementRect.right,
+        top: domRect.top - parseFloat(marginTop),
+      });
+
+      const {
+        result,
+        reason: {isOnTopSide, isOnBottomSide},
+      } = rect.contains(point);
+
+      if (result) {
+        blockElem = elem;
+        prevIndex = index;
+        break;
+      }
+
+      if (direction === Indeterminate) {
+        if (isOnTopSide) {
+          direction = Upward;
+        } else if (isOnBottomSide) {
+          direction = Downward;
+        } else {
+          // stop search block element
+          direction = Infinity;
+        }
+      }
+
+      index += direction;
+    }
+  });
+
+  return blockElem;
+}
+
+function isOnMenu(element: HTMLElement): boolean {
+  return !!element.closest(`.${DRAGGABLE_BLOCK_MENU_CLASSNAME}`);
+}
+
+function setMenuPosition(
+  targetElem: HTMLElement | null,
+  floatingElem: HTMLElement,
+  anchorElem: HTMLElement,
+) {
+  if (!targetElem) {
+    floatingElem.style.opacity = '0';
+    floatingElem.style.transform = 'translate(-10000px, -10000px)';
+    return;
+  }
+
+  const targetRect = targetElem.getBoundingClientRect();
+  const targetStyle = window.getComputedStyle(targetElem);
+  const floatingElemRect = floatingElem.getBoundingClientRect();
+  const anchorElementRect = anchorElem.getBoundingClientRect();
+
+  const top =
+    targetRect.top +
+    (parseInt(targetStyle.lineHeight, 10) - floatingElemRect.height) / 2 -
+    anchorElementRect.top;
+
+  const left = SPACE;
+
+  floatingElem.style.opacity = '1';
+  floatingElem.style.transform = `translate(${left}px, ${top}px)`;
+}
+
+function setDragImage(
+  dataTransfer: DataTransfer,
+  draggableBlockElem: HTMLElement,
+) {
+  const {transform} = draggableBlockElem.style;
+
+  // Remove dragImage borders
+  draggableBlockElem.style.transform = 'translateZ(0)';
+  dataTransfer.setDragImage(draggableBlockElem, 0, 0);
+
+  setTimeout(() => {
+    draggableBlockElem.style.transform = transform;
+  });
+}
+
+function setTargetLine(
+  targetLineElem: HTMLElement,
+  targetBlockElem: HTMLElement,
+  mouseY: number,
+  anchorElem: HTMLElement,
+) {
+  const targetStyle = window.getComputedStyle(targetBlockElem);
+  const {top: targetBlockElemTop, height: targetBlockElemHeight} =
+    targetBlockElem.getBoundingClientRect();
+  const {top: anchorTop, width: anchorWidth} =
+    anchorElem.getBoundingClientRect();
+
+  let lineTop = targetBlockElemTop;
+  // At the bottom of the target
+  if (mouseY - targetBlockElemTop > targetBlockElemHeight / 2) {
+    lineTop += targetBlockElemHeight + parseFloat(targetStyle.marginBottom);
+  } else {
+    lineTop -= parseFloat(targetStyle.marginTop);
+  }
+
+  const top = lineTop - anchorTop - TARGET_LINE_HALF_HEIGHT;
+  const left = TEXT_BOX_HORIZONTAL_PADDING - SPACE;
+
+  targetLineElem.style.transform = `translate(${left}px, ${top}px)`;
+  targetLineElem.style.width = `${
+    anchorWidth - (TEXT_BOX_HORIZONTAL_PADDING - SPACE) * 2
+  }px`;
+  targetLineElem.style.opacity = '.4';
+}
+
+function hideTargetLine(targetLineElem: HTMLElement | null) {
+  if (targetLineElem) {
+    targetLineElem.style.opacity = '0';
+    targetLineElem.style.transform = 'translate(-10000px, -10000px)';
+  }
+}
+
+function useDraggableBlockMenu(
+  editor: LexicalEditor,
+  anchorElem: HTMLElement,
+  isEditable: boolean,
+): JSX.Element {
+  const scrollerElem = anchorElem.parentElement;
+
+  const menuRef = useRef<HTMLDivElement>(null);
+  const targetLineRef = useRef<HTMLDivElement>(null);
+  const [draggableBlockElem, setDraggableBlockElem] =
+    useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    function onMouseMove(event: MouseEvent) {
+      const target = event.target;
+      if (!isHTMLElement(target)) {
+        setDraggableBlockElem(null);
+        return;
+      }
+
+      if (isOnMenu(target)) {
+        return;
+      }
+
+      const _draggableBlockElem = getBlockElement(anchorElem, editor, event);
+
+      setDraggableBlockElem(_draggableBlockElem);
+    }
+
+    function onMouseLeave() {
+      setDraggableBlockElem(null);
+    }
+
+    scrollerElem?.addEventListener('mousemove', onMouseMove);
+    scrollerElem?.addEventListener('mouseleave', onMouseLeave);
+
+    return () => {
+      scrollerElem?.removeEventListener('mousemove', onMouseMove);
+      scrollerElem?.removeEventListener('mouseleave', onMouseLeave);
+    };
+  }, [scrollerElem, anchorElem, editor]);
+
+  useEffect(() => {
+    if (menuRef.current) {
+      setMenuPosition(draggableBlockElem, menuRef.current, anchorElem);
+    }
+  }, [anchorElem, draggableBlockElem]);
+
+  useEffect(() => {
+    function onDragover(event: DragEvent): boolean {
+      const [isFileTransfer] = eventFiles(event);
+      if (isFileTransfer) {
+        return false;
+      }
+      const {pageY, target} = event;
+      if (!isHTMLElement(target)) {
+        return false;
+      }
+      const targetBlockElem = getBlockElement(anchorElem, editor, event);
+      const targetLineElem = targetLineRef.current;
+      if (targetBlockElem === null || targetLineElem === null) {
+        return false;
+      }
+      setTargetLine(targetLineElem, targetBlockElem, pageY, anchorElem);
+      // Prevent default event to be able to trigger onDrop events
+      event.preventDefault();
+      return true;
+    }
+
+    function onDrop(event: DragEvent): boolean {
+      const [isFileTransfer] = eventFiles(event);
+      if (isFileTransfer) {
+        return false;
+      }
+      const {target, dataTransfer, pageY} = event;
+      const dragData = dataTransfer?.getData(DRAG_DATA_FORMAT) || '';
+      const draggedNode = $getNodeByKey(dragData);
+      if (!draggedNode) {
+        return false;
+      }
+      if (!isHTMLElement(target)) {
+        return false;
+      }
+      const targetBlockElem = getBlockElement(anchorElem, editor, event);
+      if (!targetBlockElem) {
+        return false;
+      }
+      const targetNode = $getNearestNodeFromDOMNode(targetBlockElem);
+      if (!targetNode) {
+        return false;
+      }
+      if (targetNode === draggedNode) {
+        return true;
+      }
+      const {top, height} = targetBlockElem.getBoundingClientRect();
+      const shouldInsertAfter = pageY - top > height / 2;
+      if (shouldInsertAfter) {
+        targetNode.insertAfter(draggedNode);
+      } else {
+        targetNode.insertBefore(draggedNode);
+      }
+      setDraggableBlockElem(null);
+
+      return true;
+    }
+
+    return mergeRegister(
+      editor.registerCommand(
+        DRAGOVER_COMMAND,
+        (event) => {
+          return onDragover(event);
+        },
+        COMMAND_PRIORITY_LOW,
+      ),
+      editor.registerCommand(
+        DROP_COMMAND,
+        (event) => {
+          return onDrop(event);
+        },
+        COMMAND_PRIORITY_HIGH,
+      ),
+    );
+  }, [anchorElem, editor]);
+
+  function onDragStart(event: ReactDragEvent<HTMLDivElement>): void {
+    const dataTransfer = event.dataTransfer;
+    if (!dataTransfer || !draggableBlockElem) {
+      return;
+    }
+    setDragImage(dataTransfer, draggableBlockElem);
+    let nodeKey = '';
+    editor.update(() => {
+      const node = $getNearestNodeFromDOMNode(draggableBlockElem);
+      if (node) {
+        nodeKey = node.getKey();
+      }
+    });
+    dataTransfer.setData(DRAG_DATA_FORMAT, nodeKey);
+  }
+
+  function onDragEnd(): void {
+    hideTargetLine(targetLineRef.current);
+  }
+
+  return createPortal(
+    <>
+      <div
+        className="icon draggable-block-menu"
+        ref={menuRef}
+        draggable={true}
+        onDragStart={onDragStart}
+        onDragEnd={onDragEnd}>
+        <div className={isEditable ? 'icon' : ''} />
+      </div>
+      <div className="draggable-block-target-line" ref={targetLineRef} />
+    </>,
+    anchorElem,
+  );
+}
+
+export default function DraggableBlockPlugin({
+  anchorElem = document.body,
+}: {
+  anchorElem?: HTMLElement;
+}): JSX.Element {
+  const [editor] = useLexicalComposerContext();
+  return useDraggableBlockMenu(editor, anchorElem, editor._editable);
+}

package/src/rich-text-editor/plugins/FloatingLinkEditorPlugin/index.css

@@ -0,0 +1,40 @@
+.link-editor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  max-width: 400px;
+  width: 100%;
+  opacity: 0;
+  background-color: #fff;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+  border-radius: 8px;
+  transition: opacity 0.5s;
+  will-change: transform;
+}
+
+.link-editor .button {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  padding: 6px;
+  border-radius: 8px;
+  cursor: pointer;
+  margin: 0 2px;
+}
+
+.link-editor .button.hovered {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  background-color: #eee;
+}
+
+.link-editor .button i,
+.actions i {
+  background-size: contain;
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  vertical-align: -0.25em;
+}

package/src/rich-text-editor/plugins/FloatingLinkEditorPlugin/index.tsx

@@ -0,0 +1,305 @@
+/**
+ * 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 './index.css';
+import { Dispatch, useCallback, useEffect, useRef, useState } from 'react';
+import * as React from 'react';
+import {
+  $getSelection,
+  $isRangeSelection,
+  COMMAND_PRIORITY_CRITICAL,
+  COMMAND_PRIORITY_HIGH,
+  COMMAND_PRIORITY_LOW,
+  GridSelection,
+  KEY_ESCAPE_COMMAND,
+  LexicalEditor,
+  NodeSelection,
+  RangeSelection,
+  SELECTION_CHANGE_COMMAND,
+} from 'lexical';
+import { createPortal } from 'react-dom';
+import { $isAutoLinkNode, $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $findMatchingParent, mergeRegister } from '@lexical/utils';
+
+import { Button } from '../../../button';
+import { IconButton } from '../../../icon-button';
+import { Icon } from '../../../iconography';
+import { InputWithLabel } from '../../../input-with-label';
+import LinkPreview from '../../ui/LinkPreview';
+import { getSelectedNode } from '../../utils/getSelectedNode';
+import { setFloatingElemPosition } from '../../utils/setFloatingElemPosition';
+import { sanitizeUrl } from '../../utils/url';
+
+function FloatingLinkEditor({
+  editor,
+  isLink,
+  setIsLink,
+  anchorElem,
+}: {
+  editor: LexicalEditor;
+  isLink: boolean;
+  setIsLink: Dispatch<boolean>;
+  anchorElem: HTMLElement;
+}): JSX.Element {
+  const editorRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [linkUrl, setLinkUrl] = useState('');
+  const [rel, setRel] = useState<string | null>(null);
+  const [target, setTarget] = useState<string | null>(null);
+  const [isEditMode, setEditMode] = useState(false);
+  const [lastSelection, setLastSelection] = useState<RangeSelection | GridSelection | NodeSelection | null>(null);
+
+  const updateLinkEditor = useCallback(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      const node = getSelectedNode(selection);
+      const parent = node.getParent();
+      if ($isLinkNode(parent)) {
+        setLinkUrl(parent.getURL());
+        setRel(parent.getRel());
+        setTarget(parent.getTarget());
+      } else if ($isLinkNode(node)) {
+        setLinkUrl(node.getURL());
+        setRel(node.getRel());
+        setRel(node.getTarget());
+      } else {
+        setLinkUrl('');
+        setRel(null);
+        setTarget(null);
+      }
+    }
+    const editorElem = editorRef.current;
+    const nativeSelection = window.getSelection();
+    const activeElement = document.activeElement;
+
+    if (editorElem === null) {
+      return;
+    }
+
+    const rootElement = editor.getRootElement();
+
+    if (
+      selection !== null &&
+      nativeSelection !== null &&
+      rootElement !== null &&
+      rootElement.contains(nativeSelection.anchorNode) &&
+      editor.isEditable()
+    ) {
+      const domRange = nativeSelection.getRangeAt(0);
+      let rect;
+      if (nativeSelection.anchorNode === rootElement) {
+        let inner = rootElement;
+        while (inner.firstElementChild != null) {
+          inner = inner.firstElementChild as HTMLElement;
+        }
+        rect = inner.getBoundingClientRect();
+      } else {
+        rect = domRange.getBoundingClientRect();
+      }
+
+      setFloatingElemPosition(rect, editorElem, anchorElem);
+      setLastSelection(selection);
+    } else if (!activeElement || activeElement.className !== 'link-input') {
+      if (rootElement !== null) {
+        setFloatingElemPosition(null, editorElem, anchorElem);
+      }
+      setLastSelection(null);
+      setEditMode(false);
+      setLinkUrl('');
+    }
+
+    return true;
+  }, [anchorElem, editor]);
+
+  useEffect(() => {
+    const scrollerElem = anchorElem.parentElement;
+
+    const update = () => {
+      editor.getEditorState().read(() => {
+        updateLinkEditor();
+      });
+    };
+
+    window.addEventListener('resize', update);
+
+    if (scrollerElem) {
+      scrollerElem.addEventListener('scroll', update);
+    }
+
+    return () => {
+      window.removeEventListener('resize', update);
+
+      if (scrollerElem) {
+        scrollerElem.removeEventListener('scroll', update);
+      }
+    };
+  }, [anchorElem.parentElement, editor, updateLinkEditor]);
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          updateLinkEditor();
+        });
+      }),
+
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        () => {
+          updateLinkEditor();
+          return true;
+        },
+        COMMAND_PRIORITY_LOW,
+      ),
+      editor.registerCommand(
+        KEY_ESCAPE_COMMAND,
+        () => {
+          if (isLink) {
+            setIsLink(false);
+            return true;
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_HIGH,
+      ),
+    );
+  }, [editor, updateLinkEditor, setIsLink, isLink]);
+
+  useEffect(() => {
+    editor.getEditorState().read(() => {
+      updateLinkEditor();
+    });
+  }, [editor, updateLinkEditor]);
+
+  useEffect(() => {
+    if (isEditMode && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isEditMode]);
+
+  return (
+    <div ref={editorRef} className="link-editor">
+      {isEditMode ? (
+        <div>
+          <div className="border-0 border-b border-gray-100-800 border-solid px-3">
+            <InputWithLabel label="Link" type="text" value={linkUrl} onChange={e => setLinkUrl(e.target.value)} />
+          </div>
+
+          <div className="border-0 border-b border-gray-100-800 border-solid px-3">
+            <InputWithLabel label="Rel" type="text" value={rel ?? ''} onChange={e => setRel(e.target.value)} />
+          </div>
+          <div className="border-0 border-b border-gray-100-800 border-solid px-3">
+            <InputWithLabel label="Target" type="text" value={target ?? ''} onChange={e => setTarget(e.target.value)} />
+          </div>
+          <div className="flex px-6 py-2 justify-end">
+            <Button
+              onClick={() => {
+                if (lastSelection !== null) {
+                  if (linkUrl !== '') {
+                    editor.dispatchCommand(TOGGLE_LINK_COMMAND, {
+                      url: sanitizeUrl(linkUrl),
+                      rel,
+                      target,
+                    });
+                  }
+                  setEditMode(false);
+                }
+              }}
+            >
+              Done
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <>
+          <div className="link-input !flex flex-nowrap justify-between items-center max-w-full ">
+            <div className=" grid">
+              <a href={linkUrl} target="_blank" rel="noopener noreferrer">
+                {linkUrl}
+              </a>
+              {rel || target ? (
+                <div className="flex mt-1 gap-1">
+                  {rel && (
+                    <div className="text-[10px] text-gray-600-300 px-1 bg-purple-50-900 rounded-md py-0.5">{rel}</div>
+                  )}
+                  {target && (
+                    <div className="text-[10px] text-gray-600-300 px-1 bg-purple-50-900  rounded-md py-0.5">
+                      {target}
+                    </div>
+                  )}
+                </div>
+              ) : null}
+            </div>
+            <div>
+              <IconButton
+                size="sm"
+                tabIndex={0}
+                onMouseDown={event => event.preventDefault()}
+                onClick={() => setEditMode(true)}
+              >
+                <Icon.Edit />
+              </IconButton>
+            </div>
+          </div>
+          <div>
+            <LinkPreview url={linkUrl} />
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+function useFloatingLinkEditorToolbar(editor: LexicalEditor, anchorElem: HTMLElement): JSX.Element | null {
+  const [activeEditor, setActiveEditor] = useState(editor);
+  const [isLink, setIsLink] = useState(false);
+
+  const updateToolbar = useCallback(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      const node = getSelectedNode(selection);
+      const linkParent = $findMatchingParent(node, $isLinkNode);
+      const autoLinkParent = $findMatchingParent(node, $isAutoLinkNode);
+
+      // We don't want this menu to open for auto links.
+      if (linkParent != null && autoLinkParent == null) {
+        setIsLink(true);
+      } else {
+        setIsLink(false);
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    return editor.registerCommand(
+      SELECTION_CHANGE_COMMAND,
+      (_payload, newEditor) => {
+        updateToolbar();
+        setActiveEditor(newEditor);
+        return false;
+      },
+      COMMAND_PRIORITY_CRITICAL,
+    );
+  }, [editor, updateToolbar]);
+
+  return isLink
+    ? createPortal(
+        <FloatingLinkEditor editor={activeEditor} isLink={isLink} anchorElem={anchorElem} setIsLink={setIsLink} />,
+        anchorElem,
+      )
+    : null;
+}
+
+export default function FloatingLinkEditorPlugin({
+  anchorElem = document.body,
+}: {
+  anchorElem?: HTMLElement;
+}): JSX.Element | null {
+  const [editor] = useLexicalComposerContext();
+  return useFloatingLinkEditorToolbar(editor, anchorElem);
+}