[SIEM] [Case] Insert timeline into case textarea

x-pack/legacy/plugins/siem/public/components/markdown_editor/form.tsx

@@ -8,23 +8,27 @@ import { EuiFormRow } from '@elastic/eui';
 import React, { useCallback } from 'react';
 
 import { FieldHook, getFieldValidityAndErrorMessage } from '../../shared_imports';
-import { MarkdownEditor } from '.';
+import { CursorPosition, MarkdownEditor } from '.';
 
 interface IMarkdownEditorForm {
   dataTestSubj: string;
   field: FieldHook;
+  bottomRightContent?: React.ReactNode;
+  topRightContent?: React.ReactNode;
   idAria: string;
   isDisabled: boolean;
   placeholder?: string;
-  footerContentRight?: React.ReactNode;
+  onCursorPositionUpdate?: (cursorPosition: CursorPosition) => void;
 }
 export const MarkdownEditorForm = ({
+  bottomRightContent,
   dataTestSubj,
   field,
   idAria,
   isDisabled = false,
+  onCursorPositionUpdate,
   placeholder,
-  footerContentRight,
+  topRightContent,
 }: IMarkdownEditorForm) => {
   const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
 
@@ -37,19 +41,21 @@ export const MarkdownEditorForm = ({
 
   return (
     <EuiFormRow
-      label={field.label}
-      labelAppend={field.labelAppend}
-      helpText={field.helpText}
-      error={errorMessage}
-      isInvalid={isInvalid}
-      fullWidth
       data-test-subj={dataTestSubj}
       describedByIds={idAria ? [idAria] : undefined}
+      error={errorMessage}
+      fullWidth
+      helpText={field.helpText}
+      isInvalid={isInvalid}
+      label={field.label}
+      labelAppend={field.labelAppend}
     >
       <MarkdownEditor
+        onCursorPositionUpdate={onCursorPositionUpdate}
+        bottomRightContent={bottomRightContent}
+        topRightContent={topRightContent}
         initialContent={field.value as string}
         isDisabled={isDisabled}
-        footerContentRight={footerContentRight}
         onChange={handleContentChange}
         placeholder={placeholder}
       />

x-pack/legacy/plugins/siem/public/components/markdown_editor/index.tsx

@@ -12,7 +12,7 @@ import {
   EuiTabbedContent,
   EuiTextArea,
 } from '@elastic/eui';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import styled, { css } from 'styled-components';
 
 import { Markdown } from '../markdown';
@@ -28,9 +28,25 @@ const Container = styled(EuiPanel)`
     padding: 0;
     background: ${theme.eui.euiColorLightestShade};
     position: relative;
+    .markdown-tabs-header {
+      position: absolute;
+      top: ${theme.eui.euiSizeS};
+      right: ${theme.eui.euiSizeS};
+      z-index: ${theme.eui.euiZContentMenu};
+    }
     .euiTab {
       padding: 10px;
     }
+    .markdown-tabs {
+      width: 100%;
+    }
+    .markdown-tabs-footer {
+      height: 41px;
+      padding: 0 ${theme.eui.euiSizeM};
+      .euiLink {
+        font-size: ${theme.eui.euiSizeM};
+      }
+    }
     .euiFormRow__labelWrapper {
       position: absolute;
       top: -${theme.eui.euiSizeL};
@@ -41,81 +57,116 @@ const Container = styled(EuiPanel)`
   `}
 `;
 
-const Tabs = styled(EuiTabbedContent)`
-  width: 100%;
-`;
-
-const Footer = styled(EuiFlexGroup)`
-  ${({ theme }) => css`
-    height: 41px;
-    padding: 0 ${theme.eui.euiSizeM};
-    .euiLink {
-      font-size: ${theme.eui.euiSizeM};
-    }
-  `}
-`;
-
 const MarkdownContainer = styled(EuiPanel)`
   min-height: 150px;
   overflow: auto;
 `;
 
+export interface CursorPosition {
+  start: number;
+  end: number;
+}
+
 /** An input for entering a new case description  */
 export const MarkdownEditor = React.memo<{
-  placeholder?: string;
-  footerContentRight?: React.ReactNode;
+  bottomRightContent?: React.ReactNode;
+  topRightContent?: React.ReactNode;
   initialContent: string;
   isDisabled?: boolean;
   onChange: (description: string) => void;
-}>(({ placeholder, footerContentRight, initialContent, isDisabled = false, onChange }) => {
-  const [content, setContent] = useState(initialContent);
-  useEffect(() => {
-    onChange(content);
-  }, [content]);
-  const tabs = useMemo(
-    () => [
-      {
-        id: 'comment',
-        name: i18n.MARKDOWN,
-        content: (
-          <TextArea
-            onChange={e => {
-              setContent(e.target.value);
-            }}
-            aria-label={`markdown-editor-comment`}
-            fullWidth={true}
-            disabled={isDisabled}
-            placeholder={placeholder ?? ''}
-            spellCheck={false}
-            value={content}
-          />
-        ),
-      },
-      {
-        id: 'preview',
-        name: i18n.PREVIEW,
-        content: (
-          <MarkdownContainer data-test-subj="markdown-container" paddingSize="s">
-            <Markdown raw={content} />
-          </MarkdownContainer>
-        ),
-      },
-    ],
-    [content, isDisabled, placeholder]
-  );
-  return (
-    <Container>
-      <Tabs data-test-subj={`markdown-tabs`} size="s" tabs={tabs} initialSelectedTab={tabs[0]} />
-      <Footer alignItems="center" gutterSize="none" justifyContent="spaceBetween">
-        <EuiFlexItem grow={false}>
-          <EuiLink href={MARKDOWN_HELP_LINK} external target="_blank">
-            {i18n.MARKDOWN_SYNTAX_HELP}
-          </EuiLink>
-        </EuiFlexItem>
-        {footerContentRight && <EuiFlexItem grow={false}>{footerContentRight}</EuiFlexItem>}
-      </Footer>
-    </Container>
-  );
-});
+  onCursorPositionUpdate?: (cursorPosition: CursorPosition) => void;
+  placeholder?: string;
+}>(
+  ({
+    bottomRightContent,
+    topRightContent,
+    initialContent,
+    isDisabled = false,
+    onChange,
+    placeholder,
+    onCursorPositionUpdate,
+  }) => {
+    const [content, setContent] = useState(initialContent);
+    useEffect(() => {
+      onChange(content);
+    }, [content]);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const setCursorPosition = useCallback((e: any) => {
+      if (onCursorPositionUpdate) {
+        onCursorPositionUpdate({
+          start: e!.target!.selectionStart ?? 0,
+          end: e!.target!.selectionEnd ?? 0,
+        });
+      }
+    }, []);
+
+    useEffect(() => {
+      setContent(initialContent);
+    }, [initialContent]);
+
+    const tabs = useMemo(
+      () => [
+        {
+          id: 'comment',
+          name: i18n.MARKDOWN,
+          content: (
+            <TextArea
+              onChange={e => {
+                setContent(e.target.value);
+              }}
+              inputRef={x => {
+                if (x != null) {
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  x.addEventListener('blur', setCursorPosition);
+                }
+              }}
+              aria-label={`markdown-editor-comment`}
+              fullWidth={true}
+              disabled={isDisabled}
+              placeholder={placeholder ?? ''}
+              spellCheck={false}
+              value={content}
+            />
+          ),
+        },
+        {
+          id: 'preview',
+          name: i18n.PREVIEW,
+          content: (
+            <MarkdownContainer data-test-subj="markdown-container" paddingSize="s">
+              <Markdown raw={content} />
+            </MarkdownContainer>
+          ),
+        },
+      ],
+      [content, isDisabled, placeholder]
+    );
+    return (
+      <Container>
+        {topRightContent && <div className={`markdown-tabs-header`}>{topRightContent}</div>}
+        <EuiTabbedContent
+          className={`markdown-tabs`}
+          data-test-subj={`markdown-tabs`}
+          size="s"
+          tabs={tabs}
+          initialSelectedTab={tabs[0]}
+        />
+        <EuiFlexGroup
+          className={`markdown-tabs-footer`}
+          alignItems="center"
+          gutterSize="none"
+          justifyContent="spaceBetween"
+        >
+          <EuiFlexItem grow={false}>
+            <EuiLink href={MARKDOWN_HELP_LINK} external target="_blank">
+              {i18n.MARKDOWN_SYNTAX_HELP}
+            </EuiLink>
+          </EuiFlexItem>
+          {bottomRightContent && <EuiFlexItem grow={false}>{bottomRightContent}</EuiFlexItem>}
+        </EuiFlexGroup>
+      </Container>
+    );
+  }
+);
 
 MarkdownEditor.displayName = 'MarkdownEditor';

x-pack/legacy/plugins/siem/public/components/timeline/insert_timeline_popover/index.tsx

@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { InsertTimelinePopover } from './popover';
+export { useInsertTimeline } from './use_insert_timeline';