[Canvas] Markdown element auto-applies text changes. (#133318)

* Added editor argument with auto applying of the text.

* Added comment.

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/editor.tsx

@@ -0,0 +1,86 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useState, useEffect, useCallback, FC } from 'react';
+import { EuiFormRow } from '@elastic/eui';
+import { LangModuleType } from '@kbn/monaco';
+import { CodeEditorField } from '@kbn/kibana-react-plugin/public';
+import usePrevious from 'react-use/lib/usePrevious';
+import { templateFromReactComponent } from '../../../public/lib/template_from_react_component';
+import { ArgumentStrings } from '../../../i18n';
+import { withDebounceArg } from '../../../public/components/with_debounce_arg';
+
+const { Editor: strings } = ArgumentStrings;
+
+interface EditorArgProps {
+  onValueChange: (value: string) => void;
+  argValue: string;
+  typeInstance?: {
+    options: {
+      language: LangModuleType['ID'];
+    };
+  };
+  renderError: (err?: string | Error) => void;
+}
+
+const EditorArg: FC<EditorArgProps> = ({ argValue, typeInstance, onValueChange, renderError }) => {
+  const [value, setValue] = useState(argValue);
+  const prevValue = usePrevious(value);
+
+  const onChange = useCallback((text: string) => setValue(text), [setValue]);
+
+  useEffect(() => {
+    onValueChange(value);
+  }, [onValueChange, value]);
+
+  useEffect(() => {
+    // update editor content, if it has been changed from within the expression.
+    if (prevValue === value && argValue !== value) {
+      setValue(argValue);
+    }
+  }, [argValue, setValue, prevValue, value]);
+
+  if (typeof argValue !== 'string') {
+    renderError();
+    return null;
+  }
+
+  const { language } = typeInstance?.options ?? {};
+
+  return (
+    <EuiFormRow display="rowCompressed">
+      <CodeEditorField
+        languageId={language ?? ''}
+        value={value}
+        onChange={onChange}
+        options={{
+          fontSize: 14,
+          scrollBeyondLastLine: false,
+          quickSuggestions: true,
+          minimap: { enabled: false },
+          wordWrap: 'on',
+          wrappingIndent: 'indent',
+          lineNumbers: 'off',
+          glyphMargin: false,
+          folding: false,
+        }}
+        height="350px"
+        editorDidMount={(editor) => {
+          const model = editor.getModel();
+          model?.updateOptions({ tabSize: 2 });
+        }}
+      />
+    </EuiFormRow>
+  );
+};
+
+export const editor = () => ({
+  name: 'editor',
+  displayName: strings.getDisplayName(),
+  help: strings.getHelp(),
+  template: templateFromReactComponent(withDebounceArg(EditorArg, 250)),
+});

x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/index.ts

@@ -33,6 +33,7 @@ import { textarea } from './textarea';
 import { toggle } from './toggle';
 import { visdimension } from './vis_dimension';
 import { colorPicker } from './color_picker';
+import { editor } from './editor';
 
 import { SetupInitializer } from '../../plugin';
 
@@ -53,6 +54,7 @@ export const args = [
   toggle,
   visdimension,
   colorPicker,
+  editor,
 ];
 
 export const initializers = [dateFormatInitializer, numberFormatInitializer];

x-pack/plugins/canvas/canvas_plugin_src/uis/views/markdown.js

@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { MarkdownLang } from '@kbn/kibana-react-plugin/public';
 import { ViewStrings } from '../../../i18n';
 
 const { Markdown: strings } = ViewStrings;
@@ -20,11 +21,8 @@ export const markdown = () => ({
       name: '_',
       displayName: strings.getContentDisplayName(),
       help: strings.getContentHelp(),
-      argType: 'textarea',
-      default: '""',
-      options: {
-        confirm: 'Apply',
-      },
+      argType: 'editor',
+      options: { language: MarkdownLang },
       multi: true,
     },
     {

x-pack/plugins/canvas/i18n/ui.ts

@@ -348,6 +348,16 @@ export const ArgumentStrings = {
         defaultMessage: 'Provides colors for the values, based on the bounds',
       }),
   },
+  Editor: {
+    getDisplayName: () =>
+      i18n.translate('xpack.canvas.uis.arguments.editorTitle', {
+        defaultMessage: 'Editor',
+      }),
+    getHelp: () =>
+      i18n.translate('xpack.canvas.uis.arguments.editorLabel', {
+        defaultMessage: 'Provides a text area with syntax highlighting',
+      }),
+  },
 };
 
 export const DataSourceStrings = {

x-pack/plugins/canvas/public/components/with_debounce_arg/with_debounce_arg.tsx

@@ -29,6 +29,13 @@ export const withDebounceArg =
       [localArgValue]
     );
 
+    // handle the changed argument from within the expression.
+    useEffect(() => {
+      if (argValue) {
+        setArgValue(argValue);
+      }
+    }, [argValue]);
+
     useEffect(() => {
       return () => {
         cancel();