134432 change props name

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

@@ -189,7 +189,7 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
   const openTableModalHandler = useCallback(() => {
     const editor = codeMirrorEditor?.view;
     const markdownTable = mtu.getMarkdownTable(editor);
-    if (markdownTable == null) {
+    if (markdownTable == null || openHandsontableModal == null) {
       return;
     }
     openHandsontableModal(markdownTable, editor);
@@ -600,7 +600,7 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
             onUpload={uploadHandler}
             indentSize={currentIndentSize ?? defaultIndentSize}
             acceptedFileType={acceptedFileType}
-            openTableModal={openTableModalHandler}
+            onClickTableBtn={openTableModalHandler}
           />
         </div>
         <div className="page-editor-preview-container flex-expand-vert d-none d-lg-flex">

apps/app/src/stores/modal.tsx

@@ -516,7 +516,7 @@ type HandsontableModalStatus = {
 
 type HandsontableModalStatusUtils = {
   open(
-    table?: MarkdownTable,
+    table: MarkdownTable,
     editor?: any,
     autoFormatMarkdownTable?: boolean,
     onSave?: HandsonTableModalSaveHandler

packages/editor/src/components/CodeMirrorEditor/CodeMirrorEditor.tsx

@@ -26,7 +26,7 @@ type Props = {
   onChange?: (value: string) => void,
   onUpload?: (files: File[]) => void,
   indentSize?: number,
-  openTableModal?: () => void,
+  onClickTableBtn: () => void,
 }
 
 export const CodeMirrorEditor = (props: Props): JSX.Element => {
@@ -36,7 +36,7 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
     onChange,
     onUpload,
     indentSize,
-    openTableModal,
+    onClickTableBtn,
   } = props;
 
   const containerRef = useRef(null);
@@ -148,7 +148,7 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
       <div {...getRootProps()} className={`dropzone ${fileUploadState} flex-expand-vert`}>
         <FileDropzoneOverlay isEnabled={isDragActive} />
         <CodeMirrorEditorContainer ref={containerRef} />
-        <Toolbar editorKey={editorKey} onFileOpen={open} acceptedFileType={acceptedFileType} openTableModal={openTableModal} />
+        <Toolbar editorKey={editorKey} onFileOpen={open} acceptedFileType={acceptedFileType} onClickTableBtn={onClickTableBtn} />
       </div>
     </div>
   );

packages/editor/src/components/CodeMirrorEditor/Toolbar/TableButton.tsx

@@ -1,14 +1,11 @@
 type TableButtonProps = {
-  openTableModal?: () => void;
+  onClickTableBtn: () => void;
 }
 
 export const TableButton = (props: TableButtonProps): JSX.Element => {
-  const { openTableModal } = props;
+  const { onClickTableBtn } = props;
   const openTableModalHandler = () => {
-    if (openTableModal == null) {
-      return;
-    }
-    openTableModal();
+    onClickTableBtn();
   };
   return (
     <button type="button" className="btn btn-toolbar-button" onClick={openTableModalHandler}>

packages/editor/src/components/CodeMirrorEditor/Toolbar/Toolbar.tsx

@@ -16,13 +16,13 @@ type Props = {
   editorKey: string,
   onFileOpen: () => void,
   acceptedFileType: AcceptedUploadFileType,
-  openTableModal?: () => void,
+  onClickTableBtn: () => void,
 }
 
 export const Toolbar = memo((props: Props): JSX.Element => {
 
   const {
-    editorKey, onFileOpen, acceptedFileType, openTableModal,
+    editorKey, onFileOpen, acceptedFileType, onClickTableBtn,
   } = props;
 
   return (
@@ -32,7 +32,7 @@ export const Toolbar = memo((props: Props): JSX.Element => {
       <EmojiButton
         editorKey={editorKey}
       />
-      <TableButton openTableModal={openTableModal} />
+      <TableButton onClickTableBtn={onClickTableBtn} />
       <DiagramButton />
       <TemplateButton />
     </div>

packages/editor/src/components/CodeMirrorEditorComment.tsx

@@ -18,11 +18,12 @@ type Props = {
   onChange?: (value: string) => void,
   onComment?: () => void,
   acceptedFileType?: AcceptedUploadFileType,
+  onClickTableBtn: () => void,
 }
 
 export const CodeMirrorEditorComment = (props: Props): JSX.Element => {
   const {
-    onComment, onChange, acceptedFileType,
+    onComment, onChange, acceptedFileType, onClickTableBtn,
   } = props;
 
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.COMMENT);
@@ -63,6 +64,7 @@ export const CodeMirrorEditorComment = (props: Props): JSX.Element => {
       editorKey={GlobalCodeMirrorEditorKey.COMMENT}
       onChange={onChange}
       acceptedFileType={acceptedFileTypeNoOpt}
+      onClickTableBtn={onClickTableBtn}
     />
   );
 };

packages/editor/src/components/CodeMirrorEditorMain.tsx

@@ -19,12 +19,12 @@ type Props = {
   onUpload?: (files: File[]) => void,
   acceptedFileType?: AcceptedUploadFileType,
   indentSize?: number,
-  openTableModal?: () => void,
+  onClickTableBtn: () => void,
 }
 
 export const CodeMirrorEditorMain = (props: Props): JSX.Element => {
   const {
-    onSave, onChange, onUpload, openTableModal, acceptedFileType, indentSize,
+    onSave, onChange, onUpload, onClickTableBtn, acceptedFileType, indentSize,
   } = props;
 
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
@@ -68,7 +68,7 @@ export const CodeMirrorEditorMain = (props: Props): JSX.Element => {
       onUpload={onUpload}
       acceptedFileType={acceptedFileTypeNoOpt}
       indentSize={indentSize}
-      openTableModal={openTableModal}
+      onClickTableBtn={onClickTableBtn}
     />
   );
 };

packages/editor/src/components/playground/Playground.tsx

@@ -48,6 +48,10 @@ export const Playground = (): JSX.Element => {
 
   }, [codeMirrorEditor]);
 
+  const openHandsontableModal = useCallback(() => {
+    console.log('Open Edit Modal');
+  }, []);
+
   return (
     <div className="d-flex flex-column vw-100 flex-expand-vh-100">
       <div className="flex-expand-vert justify-content-center align-items-center bg-dark" style={{ minHeight: '83px' }}>
@@ -61,6 +65,7 @@ export const Playground = (): JSX.Element => {
             onUpload={uploadHandler}
             indentSize={4}
             acceptedFileType={AcceptedUploadFileType.ALL}
+            onClickTableBtn={openHandsontableModal}
           />
         </div>
         <div className="flex-expand-vert d-none d-lg-flex bg-light text-dark border-start border-dark-subtle p-3">