showing GridEditModal

packages/app/src/components/Page.tsx

@@ -6,6 +6,8 @@ import React, {
 import dynamic from 'next/dynamic';
 // import { debounce } from 'throttle-debounce';
 
+import { HtmlElementNode } from 'rehype-toc';
+
 import { blinkSectionHeaderAtBoot } from '~/client/util/blink-section-header';
 // import { getOptionsToSave } from '~/client/util/editor';
 import {
@@ -22,7 +24,6 @@ import {
 import loggerFactory from '~/utils/logger';
 
 import RevisionRenderer from './Page/RevisionRenderer';
-import { HtmlElementNode } from 'rehype-toc';
 
 // TODO: import dynamically
 // import MarkdownTable from '~/client/models/MarkdownTable';
@@ -166,7 +167,7 @@ class PageSubstance extends React.Component<PageSubstanceProps> {
     const { _id: revisionId, body: markdown } = page.revision;
 
     // const DrawioModal = dynamic(() => import('./PageEditor/DrawioModal'), { ssr: false });
-    // const GridEditModal = dynamic(() => import('./PageEditor/GridEditModal'), { ssr: false });
+    const GridEditModal = dynamic(() => import('./PageEditor/GridEditModal'), { ssr: false });
     // const HandsontableModal = dynamic(() => import('./PageEditor/HandsontableModal'), { ssr: false });
     // const LinkEditModal = dynamic(() => import('./PageEditor/LinkEditModal'), { ssr: false });
 
@@ -179,7 +180,7 @@ class PageSubstance extends React.Component<PageSubstanceProps> {
 
         { !isGuestUser && (
           <>
-            {/* <GridEditModal ref={this.gridEditModal} /> */}
+            <GridEditModal ref={this.gridEditModal} />
             {/* <LinkEditModal ref={this.LinkEditModal} /> */}
             {/* <HandsontableModal ref={this.handsontableModal} onSave={this.saveHandlerForHandsontableModal} /> */}
             {/* <DrawioModal ref={this.drawioModal} onSave={this.saveHandlerForDrawioModal} /> */}

packages/app/src/components/PageEditor/CodeMirrorEditor.jsx

@@ -20,7 +20,7 @@ import CommentMentionHelper from './CommentMentionHelper';
 import EditorIcon from './EditorIcon';
 import EmojiPicker from './EmojiPicker';
 import EmojiPickerHelper from './EmojiPickerHelper';
-// import GridEditModal from './GridEditModal';
+import GridEditModal from './GridEditModal';
 import geu from './GridEditorUtil';
 // import HandsontableModal from './HandsontableModal';
 // import LinkEditModal from './LinkEditModal';
@@ -791,7 +791,7 @@ class CodeMirrorEditor extends AbstractEditor {
   }
 
   showGridEditorHandler() {
-    // this.gridEditModal.current.show(geu.getGridHtml(this.getCodeMirror()));
+    this.gridEditModal.current.show(geu.getGridHtml(this.getCodeMirror()));
   }
 
   showLinkEditHandler() {
@@ -1056,13 +1056,13 @@ class CodeMirrorEditor extends AbstractEditor {
         { this.renderCheatsheetOverlay() }
         { this.renderEmojiPicker() }
 
-        {/* <GridEditModal
+        <GridEditModal
           ref={this.gridEditModal}
           onSave={(grid) => { return geu.replaceGridWithHtmlWithEditor(this.getCodeMirror(), grid) }}
-        /> */}
+        />
         {/* <LinkEditModal
           ref={this.linkEditModal}
-          onSave={(linkText) => { return markdownLinkUtil.replaceFocusedMarkdownLinkWithEditor(this.getCodeMirror(), linkText) }}
+          onSave={(linkTexts) => { return markdownLinkUtil.replaceFocusedMarkdownLinkWithEditor(this.getCodeMirror(), linkText) }}
         />
         <HandsontableModal
           ref={this.handsontableModal}

packages/app/src/components/PageEditor/GridEditModal.jsx

@@ -152,7 +152,9 @@ class GridEditModal extends React.Component {
         <div className="col-lg-2">
           <h4 className="d-block mt-2">{t('phone')}</h4>
           <div className="mobile-preview d-block px-3 py-2">
+            iiii
             {this.renderGridPreview(!isXsSelected)}
+            uuu
           </div>
         </div>
         <div className="col-lg-3">
@@ -182,6 +184,8 @@ class GridEditModal extends React.Component {
         <div key={key} className={`${key} ${className}`}></div>
       );
     });
+
+    console.log({ convertedHTML });
     return (
       <div className="row">{convertedHTML}</div>
     );
@@ -190,7 +194,7 @@ class GridEditModal extends React.Component {
   render() {
     const { t } = this.props;
     return (
-      <Modal isOpen={this.state.show} toggle={this.cancel} size="xl" className={`${styles['grw-grid-edit-modal']}`}>
+      <Modal isOpen={this.state.show} toggle={this.cancel} size="xl" className={`grw-grid-edit-modal ${styles['grw-grid-edit-modal']}`}>
         <ModalHeader tag="h4" toggle={this.cancel} className="bg-primary text-light">
           {t('grid_edit.create_bootstrap_4_grid')}
         </ModalHeader>