fix: Cannot update existing table data with handson table modal #10551

miya · 2025-11-28T02:30:39Z

Task

https://redmine.weseek.co.jp/issues/174842

miya · 2025-11-28T02:31:25Z

apps/app/src/client/components/PageEditor/HandsontableModal/HandsontableModal.tsx

+
+  if (!isOpened) {
+    return <></>;
+  }


dynamic import 後の HandsontableModalSubstance の不要な rerender 対策

今のままだとモーダルの fade エフェクトがなくなったりするという微妙なデメリットがある

ちゃんとやるなら他のモーダル (ShortcutsModal など) を参考に、一番外側の <Modal> は Container component (lightweight, always rendered) に含むように改修することになる

HandsontableModalSubstance は view / editor の場合分けなしに両対応するとして、
それをラップする HandsontableModal 側で場合分けすべきかなと思う

ちなみに DrawioModal も同じかもしれない

ShortcutsModal を参考に修正しました。
View / Editor の場合分けは HandsontableModal で行い HandsontableModalSubstance では意識しなくて良いようにしました

miya · 2025-11-28T02:31:33Z

apps/app/src/client/components/PageEditor/HandsontableModal/HandsontableModal.tsx


-export const HandsontableModalSubstance = (): JSX.Element => {
-
+const HandsontableModalSubstance = (): JSX.Element => {


不要な export の削除

miya · 2025-11-28T03:23:38Z

apps/app/src/client/components/PageEditor/HandsontableModal/HandsontableModal.tsx


  // Memoize modal open handler
  const handleModalOpen = useCallback(() => {
-    const markdownTableState = table == null && editor != null ? getMarkdownTable(editor) : table;


バグの原因

エディターからモーダルを開く際に、関係のない "table" という変数を見ていたから。"table" は2回目にモーダルを開く時に必ず not null になる。

変数 table について

"table" は useHandsontableModalStatus 由来のもの

growi/apps/app/src/client/components/PageEditor/HandsontableModal/HandsontableModal.tsx

Lines 38 to 40 in 05bc1d5

const handsontableModalData = useHandsontableModalStatus();

const isOpened = handsontableModalData.isOpened;

const table = handsontableModalData?.table;

modal を閉じる際に呼ばれる close メソッドで closeHandsontableModal() が呼ばれる

growi/apps/app/src/client/components/PageEditor/HandsontableModal/HandsontableModal.tsx

Lines 166 to 171 in 05bc1d5

const cancel = () => {

closeHandsontableModal();

closeHandsontableModalForEditor();

setIsDataImportAreaExpanded(false);

setIsWindowExpanded(false);

};

closeHandsontableModal() によって useHandsontableModalStatus の table が defaultMarkdownTable になる

growi/apps/app/src/states/ui/modal/handsontable.ts

Lines 16 to 67 in 05bc1d5

const defaultMarkdownTable = () => {

return new MarkdownTable(

[

['col1', 'col2', 'col3'],

['', '', ''],

['', '', ''],

],

{

align: ['', '', ''],

},

);

};

// Atom definition

const handsontableModalAtom = atom<HandsontableModalState>({

isOpened: false,

});

// Read-only hook

export const useHandsontableModalStatus = () => {

const [state] = useAtom(handsontableModalAtom);

return state;

};

// Actions-only hook

export const useHandsontableModalActions = () => {

const setState = useSetAtom(handsontableModalAtom);

const open = (

table: MarkdownTable,

autoFormatMarkdownTable?: boolean,

onSave?: HandsontableModalSaveHandler,

) => {

setState({

isOpened: true,

table,

autoFormatMarkdownTable,

onSave,

});

};

const close = () => {

setState({

isOpened: false,

table: defaultMarkdownTable(),

autoFormatMarkdownTable: false,

onSave: undefined,

});

};

return { open, close };

};

miya · 2025-11-28T03:25:47Z

apps/app/src/client/components/PageEditor/HandsontableModal/HandsontableModal.tsx

+  const { close: closeHandsontableModalForEditor } = useHandsontableModalForEditorActions();
+  const handsontableModalForEditorData = useHandsontableModalForEditorStatus();
+  const isOpendInEditor = handsontableModalForEditorData.isOpened;
+  const editor = handsontableModalForEditorData?.editor;


どの hook 由来の変数か追いにくかったため view で使うものと editor で使うものを分けた

.isOpened については jotai 化したタイミング nullable ではなくなったためオプショナルチェーンを外した

miya · 2025-11-28T03:27:14Z

apps/app/src/client/components/PageEditor/HandsontableModal/HandsontableModal.tsx

+    }
+    else {
+      markdownTableState = table;
+    }


View で開く場合と Editor で開く場合で処理を分けた

isOpenedInEditor じゃないかな (e が足りない)

修正しました

yuki-takei · 2025-11-28T08:53:21Z

apps/app/src/client/components/PageEditor/HandsontableModal/HandsontableModal.tsx

+
+  if (!isOpened) {
+    return <></>;
+  }


今のままだとモーダルの fade エフェクトがなくなったりするという微妙なデメリットがある

ちゃんとやるなら他のモーダル (ShortcutsModal など) を参考に、一番外側の <Modal> は Container component (lightweight, always rendered) に含むように改修することになる

HandsontableModalSubstance は view / editor の場合分けなしに両対応するとして、
それをラップする HandsontableModal 側で場合分けすべきかなと思う

ちなみに DrawioModal も同じかもしれない

yuki-takei · 2025-11-28T10:04:38Z

apps/app/src/client/components/PageEditor/HandsontableModal/HandsontableModal.tsx

+    }
+    else {
+      markdownTableState = table;
+    }


isOpenedInEditor じゃないかな (e が足りない)

miya · 2025-12-01T07:38:39Z

packages/editor/src/client/components-internal/CodeMirrorEditor/Toolbar/TableButton.tsx

      onClick={onClickTableButton}
    >
-      <span className="material-symbols-outlined fs-5">table_chart</span>
+      <span className="material-symbols-outlined fs-5">table</span>


HandsontableModal を呼び出すボタンのアイコンを変更しました

Before

After

miya · 2025-12-01T07:40:02Z

apps/app/src/client/components/PageEditor/HandsontableModal/HandsontableModal.tsx

+    }
+    else {
+      markdownTableState = table;
+    }


修正しました

miya · 2025-12-01T07:41:28Z

apps/app/src/client/components/PageEditor/HandsontableModal/HandsontableModal.tsx

+
+  if (!isOpened) {
+    return <></>;
+  }


ShortcutsModal を参考に修正しました。
View / Editor の場合分けは HandsontableModal で行い HandsontableModalSubstance では意識しなくて良いようにしました

miya added 2 commits November 27, 2025 09:10

Remove unnecessary exports

05a3a5e

fix: prevent rendering of HandsontableModal when not opened

4963fb0

miya requested a review from yuki-takei November 28, 2025 02:30

miya self-assigned this Nov 28, 2025

github-actions bot added the type/bug label Nov 28, 2025

miya added 2 commits November 28, 2025 03:10

fix: improve markdown table state handling in HandsontableModal

d314435

clean code

05bc1d5

miya commented Nov 28, 2025

View reviewed changes

yuki-takei requested changes Nov 28, 2025

View reviewed changes

miya added 2 commits December 1, 2025 07:24

refactor HandsontableModal

737d0f6

table_chart -> table

e3137fc

miya commented Dec 1, 2025

View reviewed changes

yuki-takei merged commit 6035e94 into dev/7.4.x Dec 3, 2025
16 checks passed

yuki-takei deleted the fix/174842-cannot-update-existing-table-data-with-handson-table-modal branch December 3, 2025 09:47

github-actions bot mentioned this pull request Dec 3, 2025

Release v7.4.0 #10473

Open


		export const HandsontableModalSubstance = (): JSX.Element => {

		const HandsontableModalSubstance = (): JSX.Element => {

	const handsontableModalData = useHandsontableModalStatus();
	const isOpened = handsontableModalData.isOpened;
	const table = handsontableModalData?.table;

	const cancel = () => {
	closeHandsontableModal();
	closeHandsontableModalForEditor();
	setIsDataImportAreaExpanded(false);
	setIsWindowExpanded(false);
	};

	const defaultMarkdownTable = () => {
	return new MarkdownTable(
	[
	['col1', 'col2', 'col3'],
	['', '', ''],
	['', '', ''],
	],
	{
	align: ['', '', ''],
	},
	);
	};

	// Atom definition
	const handsontableModalAtom = atom<HandsontableModalState>({
	isOpened: false,
	});

	// Read-only hook
	export const useHandsontableModalStatus = () => {
	const [state] = useAtom(handsontableModalAtom);
	return state;
	};

	// Actions-only hook
	export const useHandsontableModalActions = () => {
	const setState = useSetAtom(handsontableModalAtom);

	const open = (
	table: MarkdownTable,
	autoFormatMarkdownTable?: boolean,
	onSave?: HandsontableModalSaveHandler,
	) => {
	setState({
	isOpened: true,
	table,
	autoFormatMarkdownTable,
	onSave,
	});
	};

	const close = () => {
	setState({
	isOpened: false,
	table: defaultMarkdownTable(),
	autoFormatMarkdownTable: false,
	onSave: undefined,
	});
	};

	return { open, close };
	};

fix: Cannot update existing table data with handson table modal #10551

fix: Cannot update existing table data with handson table modal #10551

Uh oh!

Conversation

miya commented Nov 28, 2025

Task

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

バグの原因

変数 table について

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Before

After

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants