5htp-core 0.4.8-3 → 0.4.9-1

package/src/client/components/inputv3/Rte/plugins/TableHoverActionsPlugin/index.tsx

@@ -0,0 +1,287 @@
+/**
+ * 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 Button from '@client/components/button';
+
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {useLexicalEditable} from '@lexical/react/useLexicalEditable';
+import {
+  $getTableColumnIndexFromTableCellNode,
+  $getTableRowIndexFromTableCellNode,
+  $insertTableColumn__EXPERIMENTAL,
+  $insertTableRow__EXPERIMENTAL,
+  $isTableCellNode,
+  $isTableNode,
+  TableCellNode,
+  TableNode,
+  TableRowNode,
+} from '@lexical/table';
+import {$findMatchingParent, mergeRegister} from '@lexical/utils';
+import {$getNearestNodeFromDOMNode, NodeKey} from 'lexical';
+import {useEffect, useMemo, useRef, useState} from 'react';
+import * as React from 'react';
+import {createPortal} from 'react-dom';
+
+import {useDebounce} from '../CodeActionMenuPlugin/utils';
+
+const BUTTON_WIDTH_PX = 20;
+
+function TableHoverActionsContainer({
+  anchorElem,
+}: {
+  anchorElem: HTMLElement;
+}): JSX.Element | null {
+  const [editor] = useLexicalComposerContext();
+  const isEditable = useLexicalEditable();
+  const [isShownRow, setShownRow] = useState<boolean>(false);
+  const [isShownColumn, setShownColumn] = useState<boolean>(false);
+  const [shouldListenMouseMove, setShouldListenMouseMove] =
+    useState<boolean>(false);
+  const [position, setPosition] = useState({});
+  const tableSetRef = useRef<Set<NodeKey>>(new Set());
+  const tableCellDOMNodeRef = useRef<HTMLElement | null>(null);
+
+  const debouncedOnMouseMove = useDebounce(
+    (event: MouseEvent) => {
+      const {isOutside, tableDOMNode} = getMouseInfo(event);
+
+      if (isOutside) {
+        setShownRow(false);
+        setShownColumn(false);
+        return;
+      }
+
+      if (!tableDOMNode) {
+        return;
+      }
+
+      tableCellDOMNodeRef.current = tableDOMNode;
+
+      let hoveredRowNode: TableCellNode | null = null;
+      let hoveredColumnNode: TableCellNode | null = null;
+      let tableDOMElement: HTMLElement | null = null;
+
+      editor.update(() => {
+        const maybeTableCell = $getNearestNodeFromDOMNode(tableDOMNode);
+
+        if ($isTableCellNode(maybeTableCell)) {
+          const table = $findMatchingParent(maybeTableCell, (node) =>
+            $isTableNode(node),
+          );
+          if (!$isTableNode(table)) {
+            return;
+          }
+
+          tableDOMElement = editor.getElementByKey(table?.getKey());
+
+          if (tableDOMElement) {
+            const rowCount = table.getChildrenSize();
+            const colCount = (
+              (table as TableNode).getChildAtIndex(0) as TableRowNode
+            )?.getChildrenSize();
+
+            const rowIndex = $getTableRowIndexFromTableCellNode(maybeTableCell);
+            const colIndex =
+              $getTableColumnIndexFromTableCellNode(maybeTableCell);
+
+            if (rowIndex === rowCount - 1) {
+              hoveredRowNode = maybeTableCell;
+            } else if (colIndex === colCount - 1) {
+              hoveredColumnNode = maybeTableCell;
+            }
+          }
+        }
+      });
+
+      if (tableDOMElement) {
+        const {
+          width: tableElemWidth,
+          y: tableElemY,
+          right: tableElemRight,
+          left: tableElemLeft,
+          bottom: tableElemBottom,
+          height: tableElemHeight,
+        } = (tableDOMElement as HTMLTableElement).getBoundingClientRect();
+
+        const {y: editorElemY, left: editorElemLeft} =
+          anchorElem.getBoundingClientRect();
+
+        if (hoveredRowNode) {
+          setShownColumn(false);
+          setShownRow(true);
+          setPosition({
+            height: BUTTON_WIDTH_PX,
+            left: tableElemLeft - editorElemLeft,
+            top: tableElemBottom - editorElemY + 5,
+            width: tableElemWidth,
+          });
+        } else if (hoveredColumnNode) {
+          setShownColumn(true);
+          setShownRow(false);
+          setPosition({
+            height: tableElemHeight,
+            left: tableElemRight - editorElemLeft + 5,
+            top: tableElemY - editorElemY,
+            width: BUTTON_WIDTH_PX,
+          });
+        }
+      }
+    },
+    50,
+    250,
+  );
+
+  // Hide the buttons on any table dimensions change to prevent last row cells
+  // overlap behind the 'Add Row' button when text entry changes cell height
+  const tableResizeObserver = useMemo(() => {
+    return new ResizeObserver(() => {
+      setShownRow(false);
+      setShownColumn(false);
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!shouldListenMouseMove) {
+      return;
+    }
+
+    document.addEventListener('mousemove', debouncedOnMouseMove);
+
+    return () => {
+      setShownRow(false);
+      setShownColumn(false);
+      debouncedOnMouseMove.cancel();
+      document.removeEventListener('mousemove', debouncedOnMouseMove);
+    };
+  }, [shouldListenMouseMove, debouncedOnMouseMove]);
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerMutationListener(
+        TableNode,
+        (mutations) => {
+          editor.getEditorState().read(() => {
+            for (const [key, type] of mutations) {
+              const tableDOMElement = editor.getElementByKey(key);
+              switch (type) {
+                case 'created':
+                  tableSetRef.current.add(key);
+                  setShouldListenMouseMove(tableSetRef.current.size > 0);
+                  if (tableDOMElement) {
+                    tableResizeObserver.observe(tableDOMElement);
+                  }
+                  break;
+
+                case 'destroyed':
+                  tableSetRef.current.delete(key);
+                  setShouldListenMouseMove(tableSetRef.current.size > 0);
+                  // Reset resize observers
+                  tableResizeObserver.disconnect();
+                  tableSetRef.current.forEach((tableKey: NodeKey) => {
+                    const tableElement = editor.getElementByKey(tableKey);
+                    if (tableElement) {
+                      tableResizeObserver.observe(tableElement);
+                    }
+                  });
+                  break;
+
+                default:
+                  break;
+              }
+            }
+          });
+        },
+        {skipInitialization: false},
+      ),
+    );
+  }, [editor, tableResizeObserver]);
+
+  const insertAction = (insertRow: boolean) => {
+    editor.update(() => {
+      if (tableCellDOMNodeRef.current) {
+        const maybeTableNode = $getNearestNodeFromDOMNode(
+          tableCellDOMNodeRef.current,
+        );
+        maybeTableNode?.selectEnd();
+        if (insertRow) {
+          $insertTableRow__EXPERIMENTAL();
+          setShownRow(false);
+        } else {
+          $insertTableColumn__EXPERIMENTAL();
+          setShownColumn(false);
+        }
+      }
+    });
+  };
+
+  if (!isEditable) {
+    return null;
+  }
+
+  return (
+    <>
+      {isShownRow && (
+        <Button size="s"
+          icon="plus"
+          style={{...position}}
+          onClick={() => insertAction(true)}
+        />
+      )}
+      {isShownColumn && (
+        <Button size="s"
+          icon="plus"
+          style={{...position}}
+          onClick={() => insertAction(false)}
+        />
+      )}
+    </>
+  );
+}
+
+function getMouseInfo(event: MouseEvent): {
+  tableDOMNode: HTMLElement | null;
+  isOutside: boolean;
+} {
+  const target = event.target;
+
+  if (target && target instanceof HTMLElement) {
+    const tableDOMNode = target.closest<HTMLElement>(
+      'td.PlaygroundEditorTheme__tableCell, th.PlaygroundEditorTheme__tableCell',
+    );
+
+    const isOutside = !(
+      tableDOMNode ||
+      target.closest<HTMLElement>(
+        'button.PlaygroundEditorTheme__tableAddRows',
+      ) ||
+      target.closest<HTMLElement>(
+        'button.PlaygroundEditorTheme__tableAddColumns',
+      ) ||
+      target.closest<HTMLElement>('div.TableCellResizer__resizer')
+    );
+
+    return {isOutside, tableDOMNode};
+  } else {
+    return {isOutside: true, tableDOMNode: null};
+  }
+}
+
+export default function TableHoverActionsPlugin({
+  anchorElem = document.body,
+}: {
+  anchorElem?: HTMLElement;
+}): React.ReactPortal | null {
+  const isEditable = useLexicalEditable();
+
+  return isEditable
+    ? createPortal(
+        <TableHoverActionsContainer anchorElem={anchorElem} />,
+        anchorElem,
+      )
+    : null;
+}

package/src/client/components/inputv3/Rte/plugins/TableOfContentsPlugin/index.css

@@ -0,0 +1,95 @@
+/**
+ * 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.
+ *
+ */
+
+.table-of-contents .heading2 {
+  margin-left: 10px;
+}
+
+.table-of-contents .heading3 {
+  margin-left: 20px;
+}
+
+.selected-heading {
+  color: #3578e5;
+  position: relative;
+}
+
+.selected-heading-wrapper::before {
+  content: ' ';
+  position: absolute;
+  display: inline-block;
+  left: -30px;
+  top: 4px;
+  z-index: 10;
+  height: 4px;
+  width: 4px;
+  background-color: #3578e5;
+  border: solid 4px white;
+  border-radius: 50%;
+}
+
+.normal-heading {
+  cursor: pointer;
+  line-height: 20px;
+  font-size: 16px;
+}
+
+.table-of-contents {
+  color: #65676b;
+  position: fixed;
+  top: 200px;
+  right: -35px;
+  padding: 10px;
+  width: 250px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  z-index: 1;
+  height: 300px;
+}
+
+.first-heading {
+  color: black;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.headings {
+  list-style: none;
+  margin-top: 0;
+  margin-left: 10px;
+  padding: 0;
+  overflow: scroll;
+  width: 200px;
+  height: 220px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.headings::-webkit-scrollbar {
+  display: none;
+}
+
+.headings::before {
+  content: ' ';
+  position: absolute;
+  height: 220px;
+  width: 4px;
+  right: 240px;
+  margin-top: 5px;
+  background-color: #ccd0d5;
+  border-radius: 2px;
+}
+
+.normal-heading-wrapper {
+  margin-left: 32px;
+  position: relative;
+}

package/src/client/components/inputv3/Rte/plugins/TableOfContentsPlugin/index.tsx

@@ -0,0 +1,197 @@
+/**
+ * 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 {TableOfContentsEntry} from '@lexical/react/LexicalTableOfContentsPlugin';
+import type {HeadingTagType} from '@lexical/rich-text';
+import type {NodeKey} from 'lexical';
+
+import './index.css';
+
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {TableOfContentsPlugin as LexicalTableOfContentsPlugin} from '@lexical/react/LexicalTableOfContentsPlugin';
+import {useEffect, useRef, useState} from 'react';
+import * as React from 'react';
+
+const MARGIN_ABOVE_EDITOR = 624;
+const HEADING_WIDTH = 9;
+
+function indent(tagName: HeadingTagType) {
+  if (tagName === 'h2') {
+    return 'heading2';
+  } else if (tagName === 'h3') {
+    return 'heading3';
+  }
+}
+
+function isHeadingAtTheTopOfThePage(element: HTMLElement): boolean {
+  const elementYPosition = element?.getClientRects()[0].y;
+  return (
+    elementYPosition >= MARGIN_ABOVE_EDITOR &&
+    elementYPosition <= MARGIN_ABOVE_EDITOR + HEADING_WIDTH
+  );
+}
+function isHeadingAboveViewport(element: HTMLElement): boolean {
+  const elementYPosition = element?.getClientRects()[0].y;
+  return elementYPosition < MARGIN_ABOVE_EDITOR;
+}
+function isHeadingBelowTheTopOfThePage(element: HTMLElement): boolean {
+  const elementYPosition = element?.getClientRects()[0].y;
+  return elementYPosition >= MARGIN_ABOVE_EDITOR + HEADING_WIDTH;
+}
+
+function TableOfContentsList({
+  tableOfContents,
+}: {
+  tableOfContents: Array<TableOfContentsEntry>;
+}): JSX.Element {
+  const [selectedKey, setSelectedKey] = useState('');
+  const selectedIndex = useRef(0);
+  const [editor] = useLexicalComposerContext();
+
+  function scrollToNode(key: NodeKey, currIndex: number) {
+    editor.getEditorState().read(() => {
+      const domElement = editor.getElementByKey(key);
+      if (domElement !== null) {
+        domElement.scrollIntoView();
+        setSelectedKey(key);
+        selectedIndex.current = currIndex;
+      }
+    });
+  }
+
+  useEffect(() => {
+    function scrollCallback() {
+      if (
+        tableOfContents.length !== 0 &&
+        selectedIndex.current < tableOfContents.length - 1
+      ) {
+        let currentHeading = editor.getElementByKey(
+          tableOfContents[selectedIndex.current][0],
+        );
+        if (currentHeading !== null) {
+          if (isHeadingBelowTheTopOfThePage(currentHeading)) {
+            //On natural scroll, user is scrolling up
+            while (
+              currentHeading !== null &&
+              isHeadingBelowTheTopOfThePage(currentHeading) &&
+              selectedIndex.current > 0
+            ) {
+              const prevHeading = editor.getElementByKey(
+                tableOfContents[selectedIndex.current - 1][0],
+              );
+              if (
+                prevHeading !== null &&
+                (isHeadingAboveViewport(prevHeading) ||
+                  isHeadingBelowTheTopOfThePage(prevHeading))
+              ) {
+                selectedIndex.current--;
+              }
+              currentHeading = prevHeading;
+            }
+            const prevHeadingKey = tableOfContents[selectedIndex.current][0];
+            setSelectedKey(prevHeadingKey);
+          } else if (isHeadingAboveViewport(currentHeading)) {
+            //On natural scroll, user is scrolling down
+            while (
+              currentHeading !== null &&
+              isHeadingAboveViewport(currentHeading) &&
+              selectedIndex.current < tableOfContents.length - 1
+            ) {
+              const nextHeading = editor.getElementByKey(
+                tableOfContents[selectedIndex.current + 1][0],
+              );
+              if (
+                nextHeading !== null &&
+                (isHeadingAtTheTopOfThePage(nextHeading) ||
+                  isHeadingAboveViewport(nextHeading))
+              ) {
+                selectedIndex.current++;
+              }
+              currentHeading = nextHeading;
+            }
+            const nextHeadingKey = tableOfContents[selectedIndex.current][0];
+            setSelectedKey(nextHeadingKey);
+          }
+        }
+      } else {
+        selectedIndex.current = 0;
+      }
+    }
+    let timerId: ReturnType<typeof setTimeout>;
+
+    function debounceFunction(func: () => void, delay: number) {
+      clearTimeout(timerId);
+      timerId = setTimeout(func, delay);
+    }
+
+    function onScroll(): void {
+      debounceFunction(scrollCallback, 10);
+    }
+
+    document.addEventListener('scroll', onScroll);
+    return () => document.removeEventListener('scroll', onScroll);
+  }, [tableOfContents, editor]);
+
+  return (
+    <div className="table-of-contents">
+      <ul className="headings">
+        {tableOfContents.map(([key, text, tag], index) => {
+          if (index === 0) {
+            return (
+              <div className="normal-heading-wrapper" key={key}>
+                <div
+                  className="first-heading"
+                  onClick={() => scrollToNode(key, index)}
+                  role="button"
+                  tabIndex={0}>
+                  {('' + text).length > 20
+                    ? text.substring(0, 20) + '...'
+                    : text}
+                </div>
+                <br />
+              </div>
+            );
+          } else {
+            return (
+              <div
+                className={`normal-heading-wrapper ${
+                  selectedKey === key ? 'selected-heading-wrapper' : ''
+                }`}
+                key={key}>
+                <div
+                  onClick={() => scrollToNode(key, index)}
+                  role="button"
+                  className={indent(tag)}
+                  tabIndex={0}>
+                  <li
+                    className={`normal-heading ${
+                      selectedKey === key ? 'selected-heading' : ''
+                    }
+                    `}>
+                    {('' + text).length > 27
+                      ? text.substring(0, 27) + '...'
+                      : text}
+                  </li>
+                </div>
+              </div>
+            );
+          }
+        })}
+      </ul>
+    </div>
+  );
+}
+
+export default function TableOfContentsPlugin() {
+  return (
+    <LexicalTableOfContentsPlugin>
+      {(tableOfContents) => {
+        return <TableOfContentsList tableOfContents={tableOfContents} />;
+      }}
+    </LexicalTableOfContentsPlugin>
+  );
+}