Fix issue apache#32252: solved the issue for switching preview and ed…

…it mode on click
notHuman9504 · Feb 20, 2025 · 5c53b6b · 5c53b6b
1 parent f9a4392
commit 5c53b6b
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 8 deletions.
diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json
diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
@@ -135,6 +135,7 @@ const StyledContent = styled.div<{
 const DashboardContentWrapper = styled.div`
   ${({ theme }) => css`
     &.dashboard {
+      padding-top: 30px;
       position: relative;
       flex-grow: 1;
       display: flex;
@@ -651,6 +652,7 @@ const DashboardBuilder = () => {
           {renderDraggableContent}
         </Droppable>
       </StyledHeader>
+
       <StyledContent fullSizeChartId={fullSizeChartId}>
         {!editMode &&
           !topLevelTabs &&
@@ -715,6 +717,7 @@ const DashboardBuilder = () => {
           </StyledDashboardContent>
         </DashboardContentWrapper>
       </StyledContent>
+
       {dashboardIsSaving && (
         <Loading
           css={css`

diff --git a/superset-frontend/src/dashboard/components/gridComponents/Markdown.jsx b/superset-frontend/src/dashboard/components/gridComponents/Markdown.jsx
@@ -123,6 +123,7 @@ class Markdown extends PureComponent {
       markdownSource: props.component.meta.code,
       editor: null,
       editorMode: 'preview',
+      isEditing: false,
       undoLength: props.undoLength,
       redoLength: props.redoLength,
     };
@@ -215,17 +216,32 @@ class Markdown extends PureComponent {
   }
 
   handleChangeFocus(nextFocus) {
+    if(this.state.isEditing){
     const nextFocused = !!nextFocus;
     const nextEditMode = nextFocused ? 'edit' : 'preview';
     this.setState(() => ({ isFocused: nextFocused }));
-    this.handleChangeEditorMode(nextEditMode);
+    this.handleChangeEditorMode(nextEditMode);}
   }
 
   handleChangeEditorMode(mode) {
-    const nextState = {
+    let nextState = {
       ...this.state,
       editorMode: mode,
+      isEditing: mode === 'edit',
     };
+
+    if(mode == 'edit') {
+      nextState = {
+        ...this.state,
+        editorMode: 'edit',
+        isEditing: true,
+      };
+      console.log('here');
+    }
+
+    console.log('is editing', mode == 'edit');
+    console.log('editor mode', mode);
+
     if (mode === 'preview') {
       this.updateMarkdownContent();
       nextState.hasError = false;
@@ -308,7 +324,7 @@ class Markdown extends PureComponent {
   }
 
   render() {
-    const { isFocused, editorMode } = this.state;
+    const { isFocused, editorMode, isEditing } = this.state;
 
     const {
       component,
@@ -329,8 +345,6 @@ class Markdown extends PureComponent {
         ? parentComponent.meta.width || GRID_MIN_COLUMN_COUNT
         : component.meta.width || GRID_MIN_COLUMN_COUNT;
 
-    const isEditing = editorMode === 'edit';
-
     return (
       <Draggable
         component={component}
@@ -382,6 +396,17 @@ class Markdown extends PureComponent {
                   ref={dragSourceRef}
                   className="dashboard-component dashboard-component-chart-holder"
                   data-test="dashboard-component-chart-holder"
+                  onClick={() => {
+                    // Only trigger edit mode if we're in editMode but not yet editing
+
+
+                    console.log('clicky');
+                    if (editMode && !isEditing) {
+                      console.log('clicked got performed');
+                      this.handleChangeFocus(true);
+                      // this.handleChangeEditorMode('edit');
+                    }
+                  }}
                 >
                   {editMode && (
                     <HoverMenu position="top">
@@ -390,7 +415,8 @@ class Markdown extends PureComponent {
                       />
                     </HoverMenu>
                   )}
-                  {editMode && isEditing
+                  {/* {this.renderPreviewMode()} */}
+                  {isEditing
                     ? this.renderEditMode()
                     : this.renderPreviewMode()}
                 </div>

diff --git a/superset-frontend/src/dashboard/components/menu/WithPopoverMenu.tsx b/superset-frontend/src/dashboard/components/menu/WithPopoverMenu.tsx
@@ -83,7 +83,7 @@ const PopoverMenuStyles = styled.div`
       )};
     font-size: ${theme.typography.sizes.m}px;
     cursor: default;
-    z-index: 3000;
+    z-index: 100000;
 
     &,
     .menu-item {