mirror of https://github.com/apache/superset.git
fix: keeping Markdown content while resizing window on Dashboard (#11392)
* Fix: keeping markup content while resizing it * Added bind and fixed linter * Added resize case in Markdown editor to cypress test
This commit is contained in:
parent
ba314c0f6f
commit
604a519d8b
|
@ -45,3 +45,14 @@ export function drag(selector: string, content: string | number | RegExp) {
|
|||
},
|
||||
};
|
||||
}
|
||||
|
||||
export function resize(selector: string) {
|
||||
return {
|
||||
to(cordX: number, cordY: number) {
|
||||
cy.get(selector)
|
||||
.trigger('mousedown', { which: 1 })
|
||||
.trigger('mousemove', { which: 1, cordX, cordY, force: true })
|
||||
.trigger('mouseup', { which: 1, force: true });
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { TABBED_DASHBOARD, drag } from './dashboard.helper';
|
||||
import { TABBED_DASHBOARD, drag, resize } from './dashboard.helper';
|
||||
|
||||
describe('Dashboard edit markdown', () => {
|
||||
beforeEach(() => {
|
||||
|
@ -56,10 +56,21 @@ describe('Dashboard edit markdown', () => {
|
|||
'✨Markdown✨Markdown✨MarkdownClick here to edit markdown',
|
||||
)
|
||||
.click();
|
||||
|
||||
cy.get('[data-test="dashboard-component-chart-holder"]')
|
||||
.find('.ace_content')
|
||||
.contains('Click here to edit [markdown](https://bit.ly/1dQOfRK)');
|
||||
|
||||
cy.get('[data-test="dashboard-markdown-editor"]')
|
||||
.click()
|
||||
.type('Test resize');
|
||||
|
||||
resize(
|
||||
'[data-test="dashboard-markdown-editor"] .resizable-container span div',
|
||||
).to(500, 600);
|
||||
|
||||
cy.get('[data-test="dashboard-markdown-editor"]').contains('Test resize');
|
||||
|
||||
// entering edit mode does not add new scripts
|
||||
// (though scripts may still be removed by others)
|
||||
cy.get('script').then(nodes => {
|
||||
|
|
|
@ -105,6 +105,7 @@ class Markdown extends React.PureComponent {
|
|||
this.handleChangeEditorMode = this.handleChangeEditorMode.bind(this);
|
||||
this.handleMarkdownChange = this.handleMarkdownChange.bind(this);
|
||||
this.handleDeleteComponent = this.handleDeleteComponent.bind(this);
|
||||
this.handleResizeStart = this.handleResizeStart.bind(this);
|
||||
this.setEditor = this.setEditor.bind(this);
|
||||
}
|
||||
|
||||
|
@ -203,26 +204,29 @@ class Markdown extends React.PureComponent {
|
|||
...this.state,
|
||||
editorMode: mode,
|
||||
};
|
||||
|
||||
if (mode === 'preview') {
|
||||
const { updateComponents, component } = this.props;
|
||||
if (component.meta.code !== this.state.markdownSource) {
|
||||
updateComponents({
|
||||
[component.id]: {
|
||||
...component,
|
||||
meta: {
|
||||
...component.meta,
|
||||
code: this.state.markdownSource,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
this.updateMarkdownContent();
|
||||
nextState.hasError = false;
|
||||
}
|
||||
|
||||
this.setState(nextState);
|
||||
}
|
||||
|
||||
updateMarkdownContent() {
|
||||
const { updateComponents, component } = this.props;
|
||||
if (component.meta.code !== this.state.markdownSource) {
|
||||
updateComponents({
|
||||
[component.id]: {
|
||||
...component,
|
||||
meta: {
|
||||
...component.meta,
|
||||
code: this.state.markdownSource,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
handleMarkdownChange(nextValue) {
|
||||
this.setState({
|
||||
markdownSource: nextValue,
|
||||
|
@ -234,6 +238,16 @@ class Markdown extends React.PureComponent {
|
|||
deleteComponent(id, parentId);
|
||||
}
|
||||
|
||||
handleResizeStart(e) {
|
||||
const { editorMode } = this.state;
|
||||
const { editMode, onResizeStart } = this.props;
|
||||
const isEditing = editorMode === 'edit';
|
||||
onResizeStart(e);
|
||||
if (editMode && isEditing) {
|
||||
this.updateMarkdownContent();
|
||||
}
|
||||
}
|
||||
|
||||
renderEditMode() {
|
||||
return (
|
||||
<MarkdownEditor
|
||||
|
@ -286,7 +300,6 @@ class Markdown extends React.PureComponent {
|
|||
depth,
|
||||
availableColumnCount,
|
||||
columnWidth,
|
||||
onResizeStart,
|
||||
onResize,
|
||||
onResizeStop,
|
||||
handleComponentDrop,
|
||||
|
@ -343,11 +356,9 @@ class Markdown extends React.PureComponent {
|
|||
minWidthMultiple={GRID_MIN_COLUMN_COUNT}
|
||||
minHeightMultiple={GRID_MIN_ROW_UNITS}
|
||||
maxWidthMultiple={availableColumnCount + widthMultiple}
|
||||
onResizeStart={onResizeStart}
|
||||
onResizeStart={this.handleResizeStart}
|
||||
onResize={onResize}
|
||||
onResizeStop={onResizeStop}
|
||||
// disable resize when editing because if state is not synced
|
||||
// with props it will reset the editor text to whatever props is
|
||||
editMode={isFocused ? false : editMode}
|
||||
>
|
||||
<div
|
||||
|
|
Loading…
Reference in New Issue