feat: ui.editor

plugins/ui/src/deephaven/ui/components/__init__.py

@@ -13,6 +13,7 @@
 from .contextual_help import contextual_help
 from .dashboard import dashboard
 from .date_picker import date_picker
+from .editor import editor
 from .flex import flex
 from .form import form
 from .fragment import fragment
@@ -67,6 +68,7 @@
     "contextual_help",
     "dashboard",
     "date_picker",
+    "editor",
     "flex",
     "form",
     "fragment",

plugins/ui/src/deephaven/ui/components/editor.py

@@ -0,0 +1,33 @@
+from __future__ import annotations
+from typing import Any, Callable, Dict
+
+
+from .basic import component_element
+from ..elements import Element
+
+
+def editor(
+    language: str | None = "python",
+    default_value: str | None = None,
+    on_change: Callable[[str], None] | None = None,
+    settings: Dict[str, Any] | None = None,
+) -> Element:
+    """
+    Editors are multiline text inputs with syntax highlighting and autocomplete, useful for cases where users have code to enter.
+
+    Args:
+        language: The language to use for syntax highlighting
+        default_value: The default value of the input
+        on_change: Function called when the input value changes
+
+    Returns:
+        The element representing the text area
+    """
+
+    return component_element(
+        "Editor",
+        language=language,
+        default_value=default_value,
+        on_change=on_change,
+        settings=settings,
+    )

plugins/ui/src/deephaven/ui/components/radio.py

@@ -16,7 +16,7 @@
 
 
 def radio(
-    *children,
+    *children: Any,
     value: str | None = None,
     is_disabled: bool | None = None,
     auto_focus: bool | None = None,

plugins/ui/src/js/package.json

@@ -43,6 +43,7 @@
   "dependencies": {
     "@deephaven/chart": "^0.87.0",
     "@deephaven/components": "^0.87.0",
+    "@deephaven/console": "^0.87.0",
     "@deephaven/dashboard": "^0.86.0",
     "@deephaven/dashboard-core-plugins": "^0.86.1",
     "@deephaven/golden-layout": "^0.87.0",

plugins/ui/src/js/src/elements/Editor.tsx

@@ -0,0 +1,72 @@
+import { useCallback, useMemo } from 'react';
+import { Editor as DHCEditor } from '@deephaven/console';
+import { EMPTY_FUNCTION } from '@deephaven/utils';
+import useDebouncedOnChange from './hooks/useDebouncedOnChange';
+
+type EditorProps = {
+  language: string;
+
+  /** The initial value of the model. */
+  defaultValue?: string;
+
+  /** The current value of the model. */
+  value?: string;
+
+  /** Additional settings for the editor. */
+  settings?: Record<string, unknown>;
+
+  /**
+   * Triggered when the model has been updated.
+   * TODO: This should probably use document diffs to save bandwidth. Not that big a deal for now.
+   */
+  onChange?: (value: string) => Promise<void>;
+};
+
+export function Editor(props: EditorProps): JSX.Element {
+  const {
+    defaultValue = '',
+    language,
+    settings: propSettings,
+    value: propValue,
+    onChange: propOnChange = EMPTY_FUNCTION,
+    ...otherProps
+  } = props;
+
+  const [value, onChange] = useDebouncedOnChange(
+    propValue ?? defaultValue,
+    propOnChange
+  );
+
+  const settings = useMemo(
+    () => ({
+      ...propSettings,
+      value,
+      language,
+    }),
+    [language, propSettings, value]
+  );
+
+  const handleEditorInitialized = useCallback(
+    (editor: any) => {
+      editor.onDidChangeModelContent((change: any) => {
+        const newValue = editor.getModel().getValue();
+        console.log('Editor change event', editor, change, newValue);
+        onChange(newValue);
+      });
+    },
+    [onChange]
+  );
+
+  return (
+    <DHCEditor
+      settings={settings}
+      onEditorInitialized={handleEditorInitialized}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...otherProps}
+    />
+  );
+}
+
+Editor.displayName = 'Editor';
+
+export default Editor;

plugins/ui/src/js/src/elements/index.ts

@@ -3,6 +3,7 @@ export * from './ActionGroup';
 export * from './Button';
 export * from './ComboBox';
 export * from './DatePicker';
+export * from './Editor';
 export * from './Form';
 export * from './hooks';
 export * from './HTMLElementView';

plugins/ui/src/js/src/elements/model/ElementConstants.ts

@@ -33,6 +33,7 @@ export const ELEMENT_NAME = {
   content: uiComponentName('Content'),
   contextualHelp: uiComponentName('ContextualHelp'),
   datePicker: uiComponentName('DatePicker'),
+  editor: uiComponentName('Editor'),
   flex: uiComponentName('Flex'),
   form: uiComponentName('Form'),
   fragment: uiComponentName('Fragment'),

plugins/ui/src/js/src/widget/WidgetUtils.tsx

@@ -52,6 +52,7 @@ import {
   Button,
   ComboBox,
   DatePicker,
+  Editor,
   Form,
   IllustratedMessage,
   Image,
@@ -105,6 +106,7 @@ export const elementComponentMap = {
   [ELEMENT_NAME.content]: Content,
   [ELEMENT_NAME.contextualHelp]: ContextualHelp,
   [ELEMENT_NAME.datePicker]: DatePicker,
+  [ELEMENT_NAME.editor]: Editor,
   [ELEMENT_NAME.flex]: Flex,
   [ELEMENT_NAME.form]: Form,
   [ELEMENT_NAME.fragment]: React.Fragment,

plugins/ui/src/js/vite.config.ts

@@ -19,6 +19,7 @@ export default defineConfig(({ mode }) => ({
         'react-redux',
         '@deephaven/chart',
         '@deephaven/components',
+        '@deephaven/console',
         '@deephaven/dashboard',
         '@deephaven/icons',
         '@deephaven/iris-grid',