From 72523f171f42a190429be5467e807a39869b7026 Mon Sep 17 00:00:00 2001 From: Andy Wilson Date: Fri, 3 May 2024 10:35:41 +0100 Subject: [PATCH] fix: update table stuffs --- packages/lexical/package.json | 7 +- packages/lexical/src/index.tsx | 37 +-- .../src/plugins/TableActionMenuPlugin.tsx | 298 +++++++++--------- packages/lexical/src/plugins/TablePlugin.tsx | 5 + yarn.lock | 55 +++- 5 files changed, 234 insertions(+), 168 deletions(-) diff --git a/packages/lexical/package.json b/packages/lexical/package.json index 69cb7536c..058bd6654 100644 --- a/packages/lexical/package.json +++ b/packages/lexical/package.json @@ -13,15 +13,18 @@ "dependencies": { "@lexical/react": "0.14.2", "@techstack/react-feather": "workspace:*", - "lexical": "0.14.2", + "lexical": "0.14.5", "react": "18.2.0", + "react-dom": "18.2.0", "styled-components": "6.1.1", "typescript": "5.4.5" }, "devDependencies": { "@techstack/tcm-cli": "workspace:*", + "@types/react": "18.2.64", + "@types/react-dom": "18.2.21", "prop-types": "15.8.1", - "react-dom": "18.2.0", + "react-dom": "18.3.1", "storybook": "7.6.17" }, "main": "./dist/esm/index.js", diff --git a/packages/lexical/src/index.tsx b/packages/lexical/src/index.tsx index f1fc8925b..630e40e3f 100644 --- a/packages/lexical/src/index.tsx +++ b/packages/lexical/src/index.tsx @@ -75,26 +75,25 @@ function EditorContainer({ value, onChange, name }: EditorProps) { useState(false); useEffect(() => { - if (typeof window === 'undefined' || !window?.matchMedia) return; - const updateViewPortWidth = () => { - const isNextSmallWidthViewport = window.matchMedia( - '(max-width: 1025px)' - ).matches; - - if (isNextSmallWidthViewport !== isSmallWidthViewport) { - setIsSmallWidthViewport(isNextSmallWidthViewport); - } - }; - updateViewPortWidth(); - window.addEventListener('resize', updateViewPortWidth); - - return () => { - window.removeEventListener('resize', updateViewPortWidth); - }; + if (typeof window !== 'undefined' && window?.matchMedia) { + const updateViewPortWidth = () => { + const isNextSmallWidthViewport = window.matchMedia( + '(max-width: 1025px)' + ).matches; + + if (isNextSmallWidthViewport !== isSmallWidthViewport) { + setIsSmallWidthViewport(isNextSmallWidthViewport); + } + }; + updateViewPortWidth(); + window.addEventListener('resize', updateViewPortWidth); + + return () => { + window.removeEventListener('resize', updateViewPortWidth); + }; + } }, [isSmallWidthViewport, window]); - if (typeof window === 'undefined') return null; - const onChangeFn = (v: string) => { onChange(v); }; @@ -121,6 +120,8 @@ function EditorContainer({ value, onChange, name }: EditorProps) { }); }; + if (typeof window === 'undefined') return null; + return ( { - e.stopPropagation(); - }} - > - {mergeCellButton} - -
- - -
- - -
- - - -
- - - , - document.body + return ( + <> + {createPortal( +
{ + e.stopPropagation(); + }} + > + {mergeCellButton} + +
+ + +
+ + +
+ + + +
+ + +
, + document.body + )} + ); } @@ -764,15 +775,18 @@ function TableCellActionMenuContainer({ {colorPickerModal} - {isMenuOpen && - TableActionMenu({ - contextRef: menuRootRef, - onClose: () => setIsMenuOpen(false), - setIsMenuOpen, - showColorPickerModal, - tableCellNode, - cellMerge, - })} + {isMenuOpen && ( + <> + setIsMenuOpen(false)} + setIsMenuOpen={setIsMenuOpen} + showColorPickerModal={showColorPickerModal} + tableCellNode={tableCellNode} + cellMerge={cellMerge} + /> + + )} )} diff --git a/packages/lexical/src/plugins/TablePlugin.tsx b/packages/lexical/src/plugins/TablePlugin.tsx index 82198fe9c..ac6e1e429 100644 --- a/packages/lexical/src/plugins/TablePlugin.tsx +++ b/packages/lexical/src/plugins/TablePlugin.tsx @@ -10,6 +10,7 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext import { $createTableNodeWithDimensions, INSERT_TABLE_COMMAND, + TableNode, } from '@lexical/table'; import { $insertNodes, @@ -163,6 +164,10 @@ export function TablePlugin({ const cellContext = useContext(CellContext); useEffect(() => { + if (!editor.hasNodes([TableNode])) { + throw new Error('TablePlugin: TableNode is not registered on editor'); + } + cellContext.set(cellEditorConfig, children); return editor.registerCommand( diff --git a/yarn.lock b/yarn.lock index d8504f114..4b414f579 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6214,10 +6214,12 @@ __metadata: "@lexical/react": "npm:0.14.2" "@techstack/react-feather": "workspace:*" "@techstack/tcm-cli": "workspace:*" - lexical: "npm:0.14.2" + "@types/react": "npm:18.2.64" + "@types/react-dom": "npm:18.2.21" + lexical: "npm:0.14.5" prop-types: "npm:15.8.1" react: "npm:18.2.0" - react-dom: "npm:18.2.0" + react-dom: "npm:18.3.1" storybook: "npm:7.6.17" styled-components: "npm:6.1.1" typescript: "npm:5.4.5" @@ -7177,6 +7179,15 @@ __metadata: languageName: node linkType: hard +"@types/react-dom@npm:18.2.21": + version: 18.2.21 + resolution: "@types/react-dom@npm:18.2.21" + dependencies: + "@types/react": "npm:*" + checksum: 10c0/a887b4b647071df48173f054854713b68fdacfceeba7fa14f64ba26688d7d43574d7dc88a2a346e28f2e667eeab1b9bdbcad8a54353869835e52638607f61ff5 + languageName: node + linkType: hard + "@types/react-dom@npm:18.2.22": version: 18.2.22 resolution: "@types/react-dom@npm:18.2.22" @@ -7206,6 +7217,17 @@ __metadata: languageName: node linkType: hard +"@types/react@npm:18.2.64": + version: 18.2.64 + resolution: "@types/react@npm:18.2.64" + dependencies: + "@types/prop-types": "npm:*" + "@types/scheduler": "npm:*" + csstype: "npm:^3.0.2" + checksum: 10c0/ab3ba9597990d08ffd419a5ad28fd22393c7a9a241ae455fb1d5d193d209471aa1909fa7ad016fd8d161eab6d0babba77b013b56a5170bedf78833085b9ee424 + languageName: node + linkType: hard + "@types/react@npm:18.2.69": version: 18.2.69 resolution: "@types/react@npm:18.2.69" @@ -17718,10 +17740,10 @@ __metadata: languageName: node linkType: hard -"lexical@npm:0.14.2": - version: 0.14.2 - resolution: "lexical@npm:0.14.2" - checksum: 10c0/4060d1751f42fb95583605955d1da4588e374c7937314be504a0578d513d897398ac7e4ee7fbf837095aaaf2556c71458f61d4006e91eb52b724a0d3d052a8f1 +"lexical@npm:0.14.5": + version: 0.14.5 + resolution: "lexical@npm:0.14.5" + checksum: 10c0/4477194246fd7f57589eb2285476ba2ead5ee827df0c53c1edfcb261757a359b287d9c670754874b7a58629b852ab63a51e0277b3edab486d4942c6a5c3495dc languageName: node linkType: hard @@ -21653,6 +21675,18 @@ __metadata: languageName: node linkType: hard +"react-dom@npm:18.3.1": + version: 18.3.1 + resolution: "react-dom@npm:18.3.1" + dependencies: + loose-envify: "npm:^1.1.0" + scheduler: "npm:^0.23.2" + peerDependencies: + react: ^18.3.1 + checksum: 10c0/a752496c1941f958f2e8ac56239172296fcddce1365ce45222d04a1947e0cc5547df3e8447f855a81d6d39f008d7c32eab43db3712077f09e3f67c4874973e85 + languageName: node + linkType: hard + "react-element-to-jsx-string@npm:^15.0.0": version: 15.0.0 resolution: "react-element-to-jsx-string@npm:15.0.0" @@ -22678,6 +22712,15 @@ __metadata: languageName: node linkType: hard +"scheduler@npm:^0.23.2": + version: 0.23.2 + resolution: "scheduler@npm:0.23.2" + dependencies: + loose-envify: "npm:^1.1.0" + checksum: 10c0/26383305e249651d4c58e6705d5f8425f153211aef95f15161c151f7b8de885f24751b377e4a0b3dd42cce09aad3f87a61dab7636859c0d89b7daf1a1e2a5c78 + languageName: node + linkType: hard + "schema-utils@npm:^4.0.0, schema-utils@npm:^4.2.0": version: 4.2.0 resolution: "schema-utils@npm:4.2.0"