(() => {
+ const [primarySelectedCellID, setPrimarySelectedCellID] = useState(null);
+ const cellEditor = useMemo(() => {
if (cellEditorConfig === null) {
return null;
}
diff --git a/src/pages/Note/Hlexical/nodes/UsefulNodes.jsx b/src/pages/Note/Hlexical/nodes/UsefulNodes.jsx
index 834ede9..dc66910 100644
--- a/src/pages/Note/Hlexical/nodes/UsefulNodes.jsx
+++ b/src/pages/Note/Hlexical/nodes/UsefulNodes.jsx
@@ -1,11 +1,11 @@
import {HeadingNode, QuoteNode} from "@lexical/rich-text";
-import {TableCellNode, TableNode, TableRowNode} from "@lexical/table";
import {ListItemNode, ListNode} from "@lexical/list";
import {CodeHighlightNode, CodeNode, $createCodeNode, $isCodeNode} from "@lexical/code";
import {AutoLinkNode, LinkNode} from "@lexical/link";
import {ImageNode} from "./ImageNode";
import {HorizontalRuleNode} from "@lexical/react/LexicalHorizontalRuleNode";
import {InlineImageNode} from "./InlineImageNode";
+import {TableNode,TableCellNode, TableRowNode} from "@lexical/table";
const UsefulNodes=[
HeadingNode,
diff --git a/src/pages/Note/Hlexical/plugins/Input/ColorPicker/index.jsx b/src/pages/Note/Hlexical/plugins/Input/ColorPicker/index.jsx
new file mode 100644
index 0000000..70d2d1f
--- /dev/null
+++ b/src/pages/Note/Hlexical/plugins/Input/ColorPicker/index.jsx
@@ -0,0 +1,307 @@
+import './index.less';
+
+import {useEffect, useMemo, useRef, useState} from 'react';
+import * as React from 'react';
+
+import TextInput from '../TextInput';
+const basicColors = [
+ '#d0021b',
+ '#f5a623',
+ '#f8e71c',
+ '#8b572a',
+ '#7ed321',
+ '#417505',
+ '#bd10e0',
+ '#9013fe',
+ '#4a90e2',
+ '#50e3c2',
+ '#b8e986',
+ '#000000',
+ '#4a4a4a',
+ '#9b9b9b',
+ '#ffffff',
+];
+
+const WIDTH = 214;
+const HEIGHT = 150;
+
+export default function ColorPicker({
+ color,
+ onChange,
+}) {
+ const [selfColor, setSelfColor] = useState(transformColor('hex', color));
+ const [inputColor, setInputColor] = useState(color);
+ const innerDivRef = useRef(null);
+
+ const saturationPosition = useMemo(
+ () => ({
+ x: (selfColor.hsv.s / 100) * WIDTH,
+ y: ((100 - selfColor.hsv.v) / 100) * HEIGHT,
+ }),
+ [selfColor.hsv.s, selfColor.hsv.v],
+ );
+
+ const huePosition = useMemo(
+ () => ({
+ x: (selfColor.hsv.h / 360) * WIDTH,
+ }),
+ [selfColor.hsv],
+ );
+
+ const onSetHex = (hex) => {
+ setInputColor(hex);
+ if (/^#[0-9A-Fa-f]{6}$/i.test(hex)) {
+ const newColor = transformColor('hex', hex);
+ setSelfColor(newColor);
+ }
+ };
+
+ const onMoveSaturation = ({x, y}) => {
+ const newHsv = {
+ ...selfColor.hsv,
+ s: (x / WIDTH) * 100,
+ v: 100 - (y / HEIGHT) * 100,
+ };
+ const newColor = transformColor('hsv', newHsv);
+ setSelfColor(newColor);
+ setInputColor(newColor.hex);
+ };
+
+ const onMoveHue = ({x}) => {
+ const newHsv = {...selfColor.hsv, h: (x / WIDTH) * 360};
+ const newColor = transformColor('hsv', newHsv);
+
+ setSelfColor(newColor);
+ setInputColor(newColor.hex);
+ };
+
+ useEffect(() => {
+ // Check if the dropdown is actually active
+ if (innerDivRef.current !== null && onChange) {
+ onChange(selfColor.hex);
+ setInputColor(selfColor.hex);
+ }
+ }, [selfColor, onChange]);
+
+ useEffect(() => {
+ if (color === undefined) return;
+ const newColor = transformColor('hex', color);
+ setSelfColor(newColor);
+ setInputColor(newColor.hex);
+ }, [color]);
+
+ return (
+
+
+
+ {basicColors.map((basicColor) => (
+
+
+
+
+
+
+
+
+
+ {children}
+
+ );
+}
+
+function clamp(value, max, min) {
+ return value > max ? max : value < min ? min : value;
+}
+
+export function toHex(value) {
+ if (!value.startsWith('#')) {
+ const ctx = document.createElement('canvas').getContext('2d');
+
+ if (!ctx) {
+ throw new Error('2d context not supported or canvas already initialized');
+ }
+
+ ctx.fillStyle = value;
+
+ return ctx.fillStyle;
+ } else if (value.length === 4 || value.length === 5) {
+ value = value
+ .split('')
+ .map((v, i) => (i ? v + v : '#'))
+ .join('');
+
+ return value;
+ } else if (value.length === 7 || value.length === 9) {
+ return value;
+ }
+
+ return '#000000';
+}
+
+function hex2rgb(hex) {
+ const rbgArr = (
+ hex
+ .replace(
+ /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
+ (m, r, g, b) => '#' + r + r + g + g + b + b,
+ )
+ .substring(1)
+ .match(/.{2}/g) || []
+ ).map((x) => parseInt(x, 16));
+
+ return {
+ b: rbgArr[2],
+ g: rbgArr[1],
+ r: rbgArr[0],
+ };
+}
+
+function rgb2hsv({r, g, b}) {
+ r /= 255;
+ g /= 255;
+ b /= 255;
+
+ const max = Math.max(r, g, b);
+ const d = max - Math.min(r, g, b);
+
+ const h = d
+ ? (max === r
+ ? (g - b) / d + (g < b ? 6 : 0)
+ : max === g
+ ? 2 + (b - r) / d
+ : 4 + (r - g) / d) * 60
+ : 0;
+ const s = max ? (d / max) * 100 : 0;
+ const v = max * 100;
+
+ return {h, s, v};
+}
+
+function hsv2rgb({h, s, v}) {
+ s /= 100;
+ v /= 100;
+
+ const i = ~~(h / 60);
+ const f = h / 60 - i;
+ const p = v * (1 - s);
+ const q = v * (1 - s * f);
+ const t = v * (1 - s * (1 - f));
+ const index = i % 6;
+
+ const r = Math.round([v, q, p, p, t, v][index] * 255);
+ const g = Math.round([t, v, v, q, p, p][index] * 255);
+ const b = Math.round([p, p, t, v, v, q][index] * 255);
+
+ return {b, g, r};
+}
+
+function rgb2hex({b, g, r}) {
+ return '#' + [r, g, b].map((x) => x.toString(16).padStart(2, '0')).join('');
+}
+
+function transformColor(
+ format,
+ color,
+) {
+ let hex = toHex('#121212');
+ let rgb = hex2rgb(hex);
+ let hsv = rgb2hsv(rgb);
+
+ if (format === 'hex') {
+ const value = color;
+
+ hex = toHex(value);
+ rgb = hex2rgb(hex);
+ hsv = rgb2hsv(rgb);
+ } else if (format === 'rgb') {
+ const value = color;
+
+ rgb = value;
+ hex = rgb2hex(rgb);
+ hsv = rgb2hsv(rgb);
+ } else if (format === 'hsv') {
+ const value = color;
+
+ hsv = value;
+ rgb = hsv2rgb(hsv);
+ hex = rgb2hex(rgb);
+ }
+
+ return {hex, hsv, rgb};
+}
diff --git a/src/pages/Note/Hlexical/plugins/Input/ColorPicker/index.less b/src/pages/Note/Hlexical/plugins/Input/ColorPicker/index.less
new file mode 100644
index 0000000..d6e9b0e
--- /dev/null
+++ b/src/pages/Note/Hlexical/plugins/Input/ColorPicker/index.less
@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+.color-picker-wrapper {
+ padding: 20px;
+}
+
+.color-picker-basic-color {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+ margin: 0;
+ padding: 0;
+}
+
+.color-picker-basic-color button {
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ height: 16px;
+ width: 16px;
+ cursor: pointer;
+ list-style-type: none;
+}
+
+.color-picker-basic-color button.active {
+ box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.3);
+}
+
+.color-picker-saturation {
+ width: 100%;
+ position: relative;
+ margin-top: 15px;
+ height: 150px;
+ background-image: linear-gradient(transparent, black),
+ linear-gradient(to right, white, transparent);
+ user-select: none;
+}
+.color-picker-saturation_cursor {
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ border: 2px solid #ffffff;
+ border-radius: 50%;
+ box-shadow: 0 0 15px #00000026;
+ box-sizing: border-box;
+ transform: translate(-10px, -10px);
+}
+.color-picker-hue {
+ width: 100%;
+ position: relative;
+ margin-top: 15px;
+ height: 12px;
+ background-image: linear-gradient(
+ to right,
+ rgb(255, 0, 0),
+ rgb(255, 255, 0),
+ rgb(0, 255, 0),
+ rgb(0, 255, 255),
+ rgb(0, 0, 255),
+ rgb(255, 0, 255),
+ rgb(255, 0, 0)
+ );
+ user-select: none;
+ border-radius: 12px;
+}
+
+.color-picker-hue_cursor {
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ border: 2px solid #ffffff;
+ border-radius: 50%;
+ box-shadow: #0003 0 0 0 0.5px;
+ box-sizing: border-box;
+ transform: translate(-10px, -4px);
+}
+
+.color-picker-color {
+ border: 1px solid #ccc;
+ margin-top: 15px;
+ width: 100%;
+ height: 20px;
+}
diff --git a/src/pages/Note/Hlexical/plugins/TableActionMenuPlugin/index.jsx b/src/pages/Note/Hlexical/plugins/TableActionMenuPlugin/index.jsx
new file mode 100644
index 0000000..7700c94
--- /dev/null
+++ b/src/pages/Note/Hlexical/plugins/TableActionMenuPlugin/index.jsx
@@ -0,0 +1,710 @@
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import useLexicalEditable from '@lexical/react/useLexicalEditable';
+import "./index.less"
+import {
+ $deleteTableColumn__EXPERIMENTAL,
+ $deleteTableRow__EXPERIMENTAL,
+ $getTableCellNodeFromLexicalNode,
+ $getTableColumnIndexFromTableCellNode,
+ $getTableNodeFromLexicalNodeOrThrow,
+ $getTableRowIndexFromTableCellNode,
+ $insertTableColumn__EXPERIMENTAL,
+ $insertTableRow__EXPERIMENTAL,
+ $isTableCellNode,
+ $isTableRowNode,
+ $unmergeCell,
+ getTableSelectionFromTableElement,
+ $isGridSelection,
+ TableCellHeaderStates,
+ TableCellNode,
+} from '@lexical/table';
+import {
+ $createParagraphNode,
+ $getRoot,
+ $getSelection,
+ $isElementNode,
+ $isParagraphNode,
+ $isRangeSelection,
+ $isTextNode,
+ DEPRECATED_$getNodeTriplet,
+ DEPRECATED_$isGridCellNode,
+
+} from 'lexical';
+import * as React from 'react';
+import {ReactPortal, useCallback, useEffect, useRef, useState} from 'react';
+import {createPortal} from 'react-dom';
+import invariant from '../../context/shared/invariant';
+
+import useModal from '../../hook/userModal';
+import ColorPicker from '../../plugins/Input/ColorPicker';
+
+function computeSelectionCount(selection) {
+ const selectionShape = selection.getShape();
+ return {
+ columns: selectionShape.toX - selectionShape.fromX + 1,
+ rows: selectionShape.toY - selectionShape.fromY + 1,
+ };
+}
+
+function isGridSelectionRectangular(selection) {
+ const nodes = selection.getNodes();
+ const currentRows = [];
+ let currentRow = null;
+ let expectedColumns = null;
+ let currentColumns = 0;
+ for (let i = 0; i < nodes.length; i++) {
+ const node = nodes[i];
+ if ($isTableCellNode(node)) {
+ const row = node.getParentOrThrow();
+ invariant(
+ $isTableRowNode(row),
+ 'Expected CellNode to have a RowNode parent',
+ );
+ if (currentRow !== row) {
+ if (expectedColumns !== null && currentColumns !== expectedColumns) {
+ return false;
+ }
+ if (currentRow !== null) {
+ expectedColumns = currentColumns;
+ }
+ currentRow = row;
+ currentColumns = 0;
+ }
+ const colSpan = node.__colSpan;
+ for (let j = 0; j < colSpan; j++) {
+ if (currentRows[currentColumns + j] === undefined) {
+ currentRows[currentColumns + j] = 0;
+ }
+ currentRows[currentColumns + j] += node.__rowSpan;
+ }
+ currentColumns += colSpan;
+ }
+ }
+ return (
+ (expectedColumns === null || currentColumns === expectedColumns) &&
+ currentRows.every((v) => v === currentRows[0])
+ );
+}
+
+function $canUnmerge() {
+ const selection = $getSelection();
+ if (
+ ($isRangeSelection(selection) && !selection.isCollapsed()) ||
+ ($isGridSelection(selection) &&
+ !selection.anchor.is(selection.focus)) ||
+ (!$isRangeSelection(selection) && !$isGridSelection(selection))
+ ) {
+ return false;
+ }
+ const [cell] = DEPRECATED_$getNodeTriplet(selection.anchor);
+ return cell.__colSpan > 1 || cell.__rowSpan > 1;
+}
+
+function $cellContainsEmptyParagraph(cell) {
+ if (cell.getChildrenSize() !== 1) {
+ return false;
+ }
+ const firstChild = cell.getFirstChildOrThrow();
+ if (!$isParagraphNode(firstChild) || !firstChild.isEmpty()) {
+ return false;
+ }
+ return true;
+}
+
+function $selectLastDescendant(node) {
+ const lastDescendant = node.getLastDescendant();
+ if ($isTextNode(lastDescendant)) {
+ lastDescendant.select();
+ } else if ($isElementNode(lastDescendant)) {
+ lastDescendant.selectEnd();
+ } else if (lastDescendant !== null) {
+ lastDescendant.selectNext();
+ }
+}
+
+function currentCellBackgroundColor(editor) {
+ return editor.getEditorState().read(() => {
+ const selection = $getSelection();
+ if (
+ $isRangeSelection(selection) || $isGridSelection(selection)
+ ) {
+ const [cell] = DEPRECATED_$getNodeTriplet(selection.anchor);
+ if ($isTableCellNode(cell)) {
+ return cell.getBackgroundColor();
+ }
+ }
+ return null;
+ });
+}
+
+function TableActionMenu({
+ onClose,
+ tableCellNodeParam,
+ setIsMenuOpen,
+ contextRef,
+ cellMerge,
+ showColorPickerModal,
+}) {
+ const [editor] = useLexicalComposerContext();
+ const dropDownRef = useRef(null);
+ const [tableCellNode, updateTableCellNode] = useState(tableCellNodeParam);
+ const [selectionCounts, updateSelectionCounts] = useState({
+ columns: 1,
+ rows: 1,
+ });
+ const [canMergeCells, setCanMergeCells] = useState(false);
+ const [canUnmergeCell, setCanUnmergeCell] = useState(false);
+ const [backgroundColor, setBackgroundColor] = useState(
+ () => currentCellBackgroundColor(editor) || '',
+ );
+
+ useEffect(() => {
+ return editor.registerMutationListener(TableCellNode, (nodeMutations) => {
+ const nodeUpdated =
+ nodeMutations.get(tableCellNode.getKey()) === 'updated';
+
+ if (nodeUpdated) {
+ editor.getEditorState().read(() => {
+ updateTableCellNode(tableCellNode.getLatest());
+ });
+ setBackgroundColor(currentCellBackgroundColor(editor) || '');
+ }
+ });
+ }, [editor, tableCellNode]);
+
+ useEffect(() => {
+ editor.getEditorState().read(() => {
+ const selection = $getSelection();
+ if ($isGridSelection(selection)) {
+ const currentSelectionCounts = computeSelectionCount(selection);
+ updateSelectionCounts(computeSelectionCount(selection));
+ setCanMergeCells(
+ isGridSelectionRectangular(selection) &&
+ (currentSelectionCounts.columns > 1 ||
+ currentSelectionCounts.rows > 1),
+ );
+ }
+ setCanUnmergeCell($canUnmerge());
+ });
+ }, [editor]);
+
+ useEffect(() => {
+ const menuButtonElement = contextRef.current;
+ const dropDownElement = dropDownRef.current;
+ const rootElement = editor.getRootElement();
+
+ if (
+ menuButtonElement != null &&
+ dropDownElement != null &&
+ rootElement != null
+ ) {
+ const rootEleRect = rootElement.getBoundingClientRect();
+ const menuButtonRect = menuButtonElement.getBoundingClientRect();
+ dropDownElement.style.opacity = '1';
+ const dropDownElementRect = dropDownElement.getBoundingClientRect();
+ const margin = 5;
+ let leftPosition = menuButtonRect.right + margin;
+ if (
+ leftPosition + dropDownElementRect.width > window.innerWidth ||
+ leftPosition + dropDownElementRect.width > rootEleRect.right
+ ) {
+ const position =
+ menuButtonRect.left - dropDownElementRect.width - margin;
+ leftPosition = (position < 0 ? margin : position) + window.pageXOffset;
+ }
+ dropDownElement.style.left = `${leftPosition + window.pageXOffset}px`;
+
+ let topPosition = menuButtonRect.top;
+ if (topPosition + dropDownElementRect.height > window.innerHeight) {
+ const position = menuButtonRect.bottom - dropDownElementRect.height;
+ topPosition = (position < 0 ? margin : position) + window.pageYOffset;
+ }
+ dropDownElement.style.top = `${topPosition + +window.pageYOffset}px`;
+ }
+ }, [contextRef, dropDownRef, editor]);
+
+ useEffect(() => {
+ function handleClickOutside(event) {
+ if (
+ dropDownRef.current != null &&
+ contextRef.current != null &&
+ !dropDownRef.current.contains(event.target) &&
+ !contextRef.current.contains(event.target)
+ ) {
+ setIsMenuOpen(false);
+ }
+ }
+
+ window.addEventListener('click', handleClickOutside);
+
+ return () => window.removeEventListener('click', handleClickOutside);
+ }, [setIsMenuOpen, contextRef]);
+
+ const clearTableSelection = useCallback(() => {
+ editor.update(() => {
+ if (tableCellNode.isAttached()) {
+ const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+ const tableElement = editor.getElementByKey(
+ tableNode.getKey(),
+ );
+
+ if (!tableElement) {
+ throw new Error('Expected to find tableElement in DOM');
+ }
+
+ const tableSelection = getTableSelectionFromTableElement(tableElement);
+ if (tableSelection !== null) {
+ tableSelection.clearHighlight();
+ }
+
+ tableNode.markDirty();
+ updateTableCellNode(tableCellNode.getLatest());
+ }
+
+ const rootNode = $getRoot();
+ rootNode.selectStart();
+ });
+ }, [editor, tableCellNode]);
+
+ const mergeTableCellsAtSelection = () => {
+ editor.update(() => {
+ const selection = $getSelection();
+ if ($isGridSelection(selection)) {
+ const {columns, rows} = computeSelectionCount(selection);
+ const nodes = selection.getNodes();
+ let firstCell = null;
+ for (let i = 0; i < nodes.length; i++) {
+ const node = nodes[i];
+ if (DEPRECATED_$isGridCellNode(node)) {
+ if (firstCell === null) {
+ node.setColSpan(columns).setRowSpan(rows);
+ firstCell = node;
+ const isEmpty = $cellContainsEmptyParagraph(node);
+ let firstChild;
+ if (
+ isEmpty &&
+ $isParagraphNode((firstChild = node.getFirstChild()))
+ ) {
+ firstChild.remove();
+ }
+ } else if (DEPRECATED_$isGridCellNode(firstCell)) {
+ const isEmpty = $cellContainsEmptyParagraph(node);
+ if (!isEmpty) {
+ firstCell.append(...node.getChildren());
+ }
+ node.remove();
+ }
+ }
+ }
+ if (firstCell !== null) {
+ if (firstCell.getChildrenSize() === 0) {
+ firstCell.append($createParagraphNode());
+ }
+ $selectLastDescendant(firstCell);
+ }
+ onClose();
+ }
+ });
+ };
+
+ const unmergeTableCellsAtSelection = () => {
+ editor.update(() => {
+ $unmergeCell();
+ });
+ };
+
+ const insertTableRowAtSelection = useCallback(
+ (shouldInsertAfter) => {
+ editor.update(() => {
+ $insertTableRow__EXPERIMENTAL(shouldInsertAfter);
+ onClose();
+ });
+ },
+ [editor, onClose],
+ );
+
+ const insertTableColumnAtSelection = useCallback(
+ (shouldInsertAfter) => {
+ editor.update(() => {
+ for (let i = 0; i < selectionCounts.columns; i++) {
+ $insertTableColumn__EXPERIMENTAL(shouldInsertAfter);
+ }
+ onClose();
+ });
+ },
+ [editor, onClose, selectionCounts.columns],
+ );
+
+ const deleteTableRowAtSelection = useCallback(() => {
+ editor.update(() => {
+ $deleteTableRow__EXPERIMENTAL();
+ onClose();
+ });
+ }, [editor, onClose]);
+
+ const deleteTableAtSelection = useCallback(() => {
+ editor.update(() => {
+ const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+ tableNode.remove();
+
+ clearTableSelection();
+ onClose();
+ });
+ }, [editor, tableCellNode, clearTableSelection, onClose]);
+
+ const deleteTableColumnAtSelection = useCallback(() => {
+ editor.update(() => {
+ $deleteTableColumn__EXPERIMENTAL();
+ onClose();
+ });
+ }, [editor, onClose]);
+
+ const toggleTableRowIsHeader = useCallback(() => {
+ editor.update(() => {
+ const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+
+ const tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
+
+ const tableRows = tableNode.getChildren();
+
+ if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
+ throw new Error('Expected table cell to be inside of table row.');
+ }
+
+ const tableRow = tableRows[tableRowIndex];
+
+ if (!$isTableRowNode(tableRow)) {
+ throw new Error('Expected table row');
+ }
+
+ tableRow.getChildren().forEach((tableCell) => {
+ if (!$isTableCellNode(tableCell)) {
+ throw new Error('Expected table cell');
+ }
+
+ tableCell.toggleHeaderStyle(TableCellHeaderStates.ROW);
+ });
+
+ clearTableSelection();
+ onClose();
+ });
+ }, [editor, tableCellNode, clearTableSelection, onClose]);
+
+ const toggleTableColumnIsHeader = useCallback(() => {
+ editor.update(() => {
+ const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+
+ const tableColumnIndex =
+ $getTableColumnIndexFromTableCellNode(tableCellNode);
+
+ const tableRows = tableNode.getChildren();
+
+ for (let r = 0; r < tableRows.length; r++) {
+ const tableRow = tableRows[r];
+
+ if (!$isTableRowNode(tableRow)) {
+ throw new Error('Expected table row');
+ }
+
+ const tableCells = tableRow.getChildren();
+
+ if (tableColumnIndex >= tableCells.length || tableColumnIndex < 0) {
+ throw new Error('Expected table cell to be inside of table row.');
+ }
+
+ const tableCell = tableCells[tableColumnIndex];
+
+ if (!$isTableCellNode(tableCell)) {
+ throw new Error('Expected table cell');
+ }
+
+ tableCell.toggleHeaderStyle(TableCellHeaderStates.COLUMN);
+ }
+
+ clearTableSelection();
+ onClose();
+ });
+ }, [editor, tableCellNode, clearTableSelection, onClose]);
+
+ const handleCellBackgroundColor = useCallback(
+ (value) => {
+ editor.update(() => {
+ const selection = $getSelection();
+ if (
+ $isRangeSelection(selection) || $isGridSelection(selection)
+ ) {
+ const [cell] = DEPRECATED_$getNodeTriplet(selection.anchor);
+ if ($isTableCellNode(cell)) {
+ cell.setBackgroundColor(value);
+ }
+ }
+ });
+ },
+ [editor],
+ );
+
+ let mergeCellButton = null;
+ if (cellMerge) {
+ if (canMergeCells) {
+ mergeCellButton = (
+
+ );
+ } else if (canUnmergeCell) {
+ mergeCellButton = (
+
+ );
+ }
+ }
+
+ return createPortal(
+ {
+ e.stopPropagation();
+ }}>
+ {mergeCellButton}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ,
+ document.body,
+ );
+}
+
+function TableCellActionMenuContainer({
+ anchorElem,
+ cellMerge,
+}) {
+ const [editor] = useLexicalComposerContext();
+
+ const menuButtonRef = useRef(null);
+ const menuRootRef = useRef(null);
+ const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+ const [tableCellNode, setTableMenuCellNode] = useState(null,);
+
+ const [colorPickerModal, showColorPickerModal] = useModal();
+
+ const moveMenu = useCallback(() => {
+ const menu = menuButtonRef.current;
+ const selection = $getSelection();
+ const nativeSelection = window.getSelection();
+ const activeElement = document.activeElement;
+
+ if (selection == null || menu == null) {
+ setTableMenuCellNode(null);
+ return;
+ }
+
+ const rootElement = editor.getRootElement();
+
+ if (
+ $isRangeSelection(selection) &&
+ rootElement !== null &&
+ nativeSelection !== null &&
+ rootElement.contains(nativeSelection.anchorNode)
+ ) {
+ const tableCellNodeFromSelection = $getTableCellNodeFromLexicalNode(
+ selection.anchor.getNode(),
+ );
+
+ if (tableCellNodeFromSelection == null) {
+ setTableMenuCellNode(null);
+ return;
+ }
+
+ const tableCellParentNodeDOM = editor.getElementByKey(
+ tableCellNodeFromSelection.getKey(),
+ );
+
+ if (tableCellParentNodeDOM == null) {
+ setTableMenuCellNode(null);
+ return;
+ }
+
+ setTableMenuCellNode(tableCellNodeFromSelection);
+ } else if (!activeElement) {
+ setTableMenuCellNode(null);
+ }
+ }, [editor]);
+
+ useEffect(() => {
+ return editor.registerUpdateListener(() => {
+ editor.getEditorState().read(() => {
+ moveMenu();
+ });
+ });
+ });
+
+ useEffect(() => {
+ const menuButtonDOM = menuButtonRef.current;
+
+ if (menuButtonDOM != null && tableCellNode != null) {
+ const tableCellNodeDOM = editor.getElementByKey(tableCellNode.getKey());
+
+ if (tableCellNodeDOM != null) {
+ const tableCellRect = tableCellNodeDOM.getBoundingClientRect();
+ const menuRect = menuButtonDOM.getBoundingClientRect();
+ const anchorRect = anchorElem.getBoundingClientRect();
+
+ const top = tableCellRect.top - anchorRect.top + 4;
+ const left =
+ tableCellRect.right - menuRect.width - 10 - anchorRect.left;
+
+ menuButtonDOM.style.opacity = '1';
+ menuButtonDOM.style.transform = `translate(${left}px, ${top}px)`;
+ } else {
+ menuButtonDOM.style.opacity = '0';
+ menuButtonDOM.style.transform = 'translate(-10000px, -10000px)';
+ }
+ }
+ }, [menuButtonRef, tableCellNode, editor, anchorElem]);
+
+ const prevTableCellDOM = useRef(tableCellNode);
+
+ useEffect(() => {
+ if (prevTableCellDOM.current !== tableCellNode) {
+ setIsMenuOpen(false);
+ }
+
+ prevTableCellDOM.current = tableCellNode;
+ }, [prevTableCellDOM, tableCellNode]);
+
+ return (
+
+ {tableCellNode != null && (
+ <>
+
+ {colorPickerModal}
+ {isMenuOpen && (
+
setIsMenuOpen(false)}
+ tableCellNodeParam={tableCellNode}
+ cellMerge={cellMerge}
+ showColorPickerModal={showColorPickerModal}
+ />
+ )}
+
+ )}
+
+ {activeCell != null && !isSelectingGrid && (
+ <>
+
+
+
+ )}
+
+
+ {tableOfContents.map(([key, text, tag], index) => {
+ if (index === 0) {
+ return (
+
+
scrollToNode(key, index)}
+ role="button"
+ tabIndex={0}>
+ {('' + text).length > 20
+ ? text.substring(0, 20) + '...'
+ : text}
+
+
+
+
scrollToNode(key, index)}
+ role="button"
+ className={indent(tag)}
+ tabIndex={0}>
+
-
+ {('' + text).length > 27
+ ? text.substring(0, 27) + '...'
+ : text}
+
+
+
+