YAML Editor with ref

Author: upalatucci

frontend/packages/console-dynamic-plugin-sdk/docs/api.md

@@ -1903,6 +1903,7 @@ A basic lazy loaded YAML editor with hover help and completion.
 | `toolbarLinks` | Array of ReactNode rendered on the toolbar links section on top of the editor. |
 | `onChange` | Callback for on code change event. |
 | `onSave` | Callback called when the command CTRL / CMD + S is triggered. |
+| `ref` | React reference to `{ editor?: IStandaloneCodeEditor }`. Using the 'editor' property, you are able to access to all methods to control the editor. For more information, visit https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneCodeEditor.html. |
 
 
 

frontend/packages/console-dynamic-plugin-sdk/src/api/dynamic-core-api.ts

@@ -27,6 +27,7 @@ import {
   UsePrometheusPoll,
   TimestampProps,
   NamespaceBarProps,
+  YAMLEditorRef,
 } from '../extensions/console-types';
 import { StatusPopupSectionProps, StatusPopupItemProps } from '../extensions/dashboard-types';
 
@@ -574,8 +575,9 @@ export { useFlag } from '../utils/flags';
  * @param {YAMLEditorProps['toolbarLinks']} toolbarLinks - Array of ReactNode rendered on the toolbar links section on top of the editor.
  * @param {YAMLEditorProps['onChange']} onChange - Callback for on code change event.
  * @param {YAMLEditorProps['onSave']} onSave - Callback called when the command CTRL / CMD + S is triggered.
+ * @param {YAMLEditorRef} ref - React reference to `{ editor?: IStandaloneCodeEditor }`. Using the 'editor' property, you are able to access to all methods to control the editor. For more information, visit https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneCodeEditor.html.
  */
-export const YAMLEditor: React.FC<YAMLEditorProps> = require('@console/internal/components/AsyncYAMLEditor')
+export const YAMLEditor: React.ForwardRefExoticComponent<YAMLEditorProps & React.RefAttributes<YAMLEditorRef>> = require('@console/internal/components/AsyncYAMLEditor')
   .AsyncYAMLEditor;
 
 /**

frontend/packages/console-dynamic-plugin-sdk/src/extensions/console-types.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ButtonProps } from '@patternfly/react-core';
 import { ICell, OnSelect, SortByDirection, TableGridBreakpoint } from '@patternfly/react-table';
+import MonacoEditor from 'react-monaco-editor/lib/editor';
 import { RouteComponentProps } from 'react-router';
 import {
   ExtensionK8sGroupKindModel,
@@ -623,8 +624,12 @@ export type YAMLEditorProps = {
   minHeight?: string | number;
   showShortcuts?: boolean;
   toolbarLinks?: React.ReactNodeArray;
-  onChange?: (newValue, event) => {};
-  onSave?: () => {};
+  onChange?: (newValue, event) => void;
+  onSave?: () => void;
+};
+
+export type YAMLEditorRef = {
+  editor?: MonacoEditor['editor'];
 };
 
 export type ResourceYAMLEditorProps = {

frontend/public/components/AsyncYAMLEditor.tsx

@@ -1,7 +1,10 @@
 import * as React from 'react';
-import { YAMLEditorProps } from '@console/dynamic-plugin-sdk';
+import { YAMLEditorProps, YAMLEditorRef } from '@console/dynamic-plugin-sdk';
 
-export const AsyncYAMLEditor: React.FC<YAMLEditorProps> = React.lazy(() =>
+export const AsyncYAMLEditor: React.RefForwardingComponent<
+  React.RefAttributes<YAMLEditorRef>,
+  YAMLEditorProps
+> = React.lazy(() =>
   import('@console/shared/src/components/editor/YAMLEditor').then((m) => ({
     default: m.default,
   })),