Clickable external links to docs from dev console

src/platform/packages/shared/kbn-monaco/src/monaco_imports.ts

@@ -23,6 +23,7 @@ import 'monaco-editor/esm/vs/editor/contrib/suggest/browser/suggestController.js
 import 'monaco-editor/esm/vs/editor/contrib/hover/browser/hover.js'; // Needed for hover
 import 'monaco-editor/esm/vs/editor/contrib/parameterHints/browser/parameterHints.js'; // Needed for signature
 import 'monaco-editor/esm/vs/editor/contrib/bracketMatching/browser/bracketMatching.js'; // Needed for brackets matching highlight
+import 'monaco-editor/esm/vs/editor/contrib/links/browser/links.js'; // Needed for clickable links with Cmd/Ctrl+Click
 
 import 'monaco-editor/esm/vs/editor/contrib/codeAction/browser/codeAction.js';
 import 'monaco-editor/esm/vs/editor/contrib/codeAction/browser/codeActionCommands.js';

src/platform/packages/shared/shared-ux/code_editor/impl/code_editor.tsx

@@ -197,6 +197,12 @@ export interface CodeEditorProps {
    */
   htmlId?: string;
 
+  /**
+   * Enables clickable links in the editor. URLs will be underlined and can be opened
+   * in a new tab using Cmd/Ctrl+Click. Disabled by default.
+   */
+  links?: boolean;
+
   /**
    * Callbacks for when editor is focused/blurred
    */
@@ -239,6 +245,7 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
   enableCustomContextMenu = false,
   customContextMenuActions = [],
   htmlId,
+  links = false,
   onFocus,
   onBlur,
 }) => {
@@ -649,6 +656,8 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
                 // @ts-expect-error, see https://github.com/microsoft/monaco-editor/issues/3829
                 'bracketPairColorization.enabled': false,
                 ...options,
+                // Explicit links prop always takes precedence over any value passed in options
+                links,
               }}
             />
           </UseBug223981FixRepositionSuggestWidget>

src/platform/plugins/shared/console/public/application/containers/editor/monaco_editor.tsx

@@ -300,6 +300,7 @@ export const MonacoEditor = ({
         accessibilityOverlayEnabled={settings.isAccessibilityOverlayEnabled}
         editorDidMount={editorDidMountCallback}
         editorWillUnmount={editorWillUnmountCallback}
+        links={true}
         options={{
           fontSize: settings.fontSize,
           wordWrap: settings.wrapMode === true ? 'on' : 'off',

src/platform/test/functional/apps/console/_misc_console_behavior.ts

@@ -18,6 +18,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const retry = getService('retry');
   const browser = getService('browser');
   const PageObjects = getPageObjects(['common', 'console', 'header']);
+  const testSubjects = getService('testSubjects');
   const toasts = getService('toasts');
 
   describe('misc console behavior', function testMiscConsoleBehavior() {
@@ -261,6 +262,65 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       });
     });
 
+    describe('clickable links', () => {
+      let initialWindowHandles: string[];
+
+      beforeEach(async () => {
+        initialWindowHandles = await browser.getAllWindowHandles();
+      });
+
+      afterEach(async () => {
+        // Close any new tabs that were opened
+        const currentHandles = await browser.getAllWindowHandles();
+        if (currentHandles.length > initialWindowHandles.length) {
+          // Close all new tabs
+          for (let i = initialWindowHandles.length; i < currentHandles.length; i++) {
+            await browser.switchToWindow(currentHandles[i]);
+            await browser.closeCurrentWindow();
+          }
+          // Switch back to the original tab
+          await browser.switchToWindow(initialWindowHandles[0]);
+        }
+      });
+
+      it('should open URL in new tab when clicking on a link in the input editor', async () => {
+        await PageObjects.console.clearEditorText();
+        await PageObjects.console.enterText('# https://www.elastic.co');
+
+        // Wait for Monaco to detect and decorate the link
+        await retry.waitFor('link to be detected by Monaco', async () => {
+          const inputEditor = await testSubjects.find('consoleMonacoEditor');
+          const detectedLinks = await inputEditor.findAllByCssSelector('.detected-link');
+          return detectedLinks.length > 0;
+        });
+
+        const inputEditor = await testSubjects.find('consoleMonacoEditor');
+        const detectedLink = await inputEditor.findByCssSelector('.detected-link');
+
+        // Perform Cmd/Ctrl+Click on the detected link
+        const modifierKey = browser.keys[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'];
+        await browser
+          .getActions()
+          .keyDown(modifierKey)
+          .click(detectedLink._webElement)
+          .keyUp(modifierKey)
+          .perform();
+
+        // Wait for a new tab to open
+        await retry.waitFor('new tab to open after clicking link', async () => {
+          const handles = await browser.getAllWindowHandles();
+          return handles.length > initialWindowHandles.length;
+        });
+
+        const windowHandles = await browser.getAllWindowHandles();
+        expect(windowHandles.length).to.be.greaterThan(initialWindowHandles.length);
+
+        await browser.switchToWindow(windowHandles[windowHandles.length - 1]);
+        const currentUrl = await browser.getCurrentUrl();
+        expect(currentUrl).to.contain('elastic.co');
+      });
+    });
+
     it('should work fine with a large content', async () => {
       await PageObjects.console.clearEditorText();