rusackas commented on code in PR #37902:
URL: https://github.com/apache/superset/pull/37902#discussion_r2796448903
##########
superset-frontend/src/dashboard/components/gridComponents/Markdown/Markdown.tsx:
##########
@@ -335,126 +333,118 @@ class Markdown extends PureComponent<MarkdownProps,
MarkdownState> {
onReady={(handle: EditorInstance) => {
// The handle provides access to the underlying editor for resize
if (handle && typeof handle.focus === 'function') {
- this.setEditor(handle);
+ setEditor(handle);
}
}}
data-test="editor"
/>
- );
- }
-
- renderPreviewMode(): JSX.Element {
- const { hasError } = this.state;
-
- return (
- <SafeMarkdown
- source={
- hasError
- ? MARKDOWN_ERROR_MESSAGE
- : this.state.markdownSource || MARKDOWN_PLACE_HOLDER
- }
- htmlSanitization={this.props.htmlSanitization}
- htmlSchemaOverrides={this.props.htmlSchemaOverrides}
- />
- );
- }
-
- render() {
- const { isFocused, editorMode } = this.state;
-
- const {
- component,
- parentComponent,
- index,
- depth,
- availableColumnCount,
- columnWidth,
- onResize,
- onResizeStop,
- handleComponentDrop,
- editMode,
- } = this.props;
-
- // inherit the size of parent columns
- const widthMultiple =
- parentComponent.type === COLUMN_TYPE
- ? parentComponent.meta.width || GRID_MIN_COLUMN_COUNT
- : component.meta.width || GRID_MIN_COLUMN_COUNT;
-
- const isEditing = editorMode === 'edit';
-
- return (
- <Draggable
- component={component}
- parentComponent={parentComponent}
- orientation={parentComponent.type === ROW_TYPE ? 'column' : 'row'}
- index={index}
- depth={depth}
- onDrop={handleComponentDrop}
- disableDragDrop={isFocused}
- editMode={editMode}
- >
- {({ dragSourceRef }: DragChildProps) => (
- <WithPopoverMenu
- onChangeFocus={this.handleChangeFocus}
- shouldFocus={this.shouldFocusMarkdown}
- menuItems={[
- <MarkdownModeDropdown
- key={`${component.id}-mode`}
- id={`${component.id}-mode`}
- value={this.state.editorMode}
- onChange={this.handleChangeEditorMode}
- />,
- ]}
- editMode={editMode}
+ ),
+ [id, markdownSource, handleMarkdownChange, setEditor],
+ );
+
+ const renderPreviewMode = useMemo(
+ () => (
+ <ErrorBoundary onError={handleRenderError} showMessage={false}>
Review Comment:
Fixed in 72ed19d325. Added key prop to ErrorBoundary that changes based on
error state, forcing React to remount the boundary and clear its internal error
state when recovering:
```typescript
<ErrorBoundary
key={hasError ? 'markdown-error' : 'markdown-ok'}
onError={handleRenderError}
showMessage={false}
>
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
