feat(plugins/plugin-client-common): support execution of markdown code blocks!

Author: starpit

package-lock.json

@@ -121,15 +121,21 @@ export function splitFor(topLevelTab: Tab) {
  * @param incognito Execute the command quietly but do not display the result in the Terminal
  *
  */
-export function pexecInCurrentTab(command: string, topLevelTab?: Tab, isInternalCallpath = false, incognito = false) {
+export function pexecInCurrentTab(
+  command: string,
+  topLevelTab?: Tab,
+  isInternalCallpath = false,
+  incognito = false,
+  execUUID?: string
+) {
   const split = splitFor(topLevelTab)
 
   if (split) {
     const tab = split // "tab" is the old name for the split in the repl/exec code
 
     return isInternalCallpath
-      ? split.REPL.qexec(command, undefined, undefined, { tab }) // "quiet" exec i.e. don't display the fact that we are executing a command
-      : split.REPL.pexec(command, { tab, echo: !incognito, noHistory: true }) // normal exec, display the Input/Output in the UI
+      ? split.REPL.qexec(command, undefined, undefined, { tab, execUUID }) // "quiet" exec i.e. don't display the fact that we are executing a command
+      : split.REPL.pexec(command, { tab, echo: !incognito, noHistory: true, execUUID }) // normal exec, display the Input/Output in the UI
   } else {
     return Promise.reject(
       new Error(

packages/core/src/webapp/tab.ts

@@ -31,6 +31,7 @@
     "react-markdown": "7.1.1",
     "rehype-raw": "6.1.0",
     "rehype-slug": "5.0.0",
+    "remark-code-frontmatter": "1.0.0",
     "remark-collapse": "0.1.2",
     "remark-emoji": "3.0.2",
     "remark-frontmatter": "4.0.1",

plugins/plugin-client-common/package.json

@@ -30,13 +30,7 @@ interface Props {
 export default class LoadingCard extends React.PureComponent<Props> {
   public render() {
     return (
-      <Card
-        titleInHeader
-        bodyInHeader
-        title={strings('Successfully connected to your cluster')}
-        repl={this.props.repl}
-        icon={KuiIcon}
-      >
+      <Card titleInHeader bodyInHeader title={strings('Successfully connected to your cluster')} icon={KuiIcon}>
         {strings('loadingDone:content')}
       </Card>
     )

plugins/plugin-client-common/src/components/Client/LoadingCard.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react'
-import { CommentaryResponse, REPL, i18n } from '@kui-shell/core'
+import { CommentaryResponse, Tab, i18n } from '@kui-shell/core'
 
 import Card from '../spi/Card'
 import Button from '../spi/Button'
@@ -28,11 +28,10 @@ interface State {
   isEdit: boolean
   textValue: string
   lastAppliedTextValue: string
-  repl?: REPL
 }
 
 type Props = CommentaryResponse['props'] & {
-  tabUUID: string
+  tab: Tab
   willUpdateResponse?: (text: string) => void
   willRemove?: () => void
   willUpdateCommand?: (command: string) => void
@@ -221,7 +220,7 @@ export default class Commentary extends React.PureComponent<Props, State> {
     return (
       <React.Suspense fallback={<div />}>
         <SimpleEditor
-          tabUUID={this.props.tabUUID}
+          tabUUID={this.props.tab.uuid}
           content={this.state.textValue}
           className="kui--source-ref-editor kui--commentary-editor"
           readonly={false}

plugins/plugin-client-common/src/components/Content/Commentary.tsx

@@ -34,6 +34,9 @@ type Props = Pick<MonacoOptions, 'fontSize'> & {
   onContentChange?: (content: string) => void
   scrollIntoView?: boolean
 
+  /** Focus on initial render (this is the default for !readonly) */
+  focus?: boolean
+
   /** Font size adjustment factor, based off getKuiFontSize(), i.e. the default font size for the theme and client */
   fontSizeAdjust?: number
 
@@ -85,8 +88,12 @@ export default class SimpleEditor extends React.Component<Props, State> {
   /** Called whenever we have proposed (props,state); we derive a new State */
   public static getDerivedStateFromProps(props: Props, state: State) {
     if (state.editor) {
-      if (state.editor.getValue() !== props.content) {
+      const model = state.editor.getModel()
+      const currentLanguage = model.getLanguageId()
+      const newLanguage = SimpleEditor.language(props.contentType)
+      if (model.getValue() !== props.content || currentLanguage !== newLanguage) {
         state.editor.setValue(props.content)
+        Monaco.setModelLanguage(model, newLanguage)
       }
     }
 
@@ -134,6 +141,10 @@ export default class SimpleEditor extends React.Component<Props, State> {
     }
   }
 
+  private static language(contentType: string): string {
+    return /^(ba)?sh$/.test(contentType) ? 'shell' : contentType
+  }
+
   /** Called when we have a ready wrapper (monaco's init requires an wrapper */
   private initMonaco(props: Props, state: State) {
     const cleaners = []
@@ -144,7 +155,7 @@ export default class SimpleEditor extends React.Component<Props, State> {
         value: props.content,
         readOnly: props.readonly !== undefined ? props.readonly : true,
         fontSize: props.fontSize || getKuiFontSize() * (props.fontSizeAdjust || 1),
-        language: /^(ba)?sh$/.test(props.contentType) ? 'shell' : props.contentType,
+        language: SimpleEditor.language(props.contentType),
         simple: props.simple
       }
       const overrides: Monaco.IStandaloneEditorConstructionOptions = { theme: props.light ? 'vs' : 'vs-dark' }
@@ -158,7 +169,7 @@ export default class SimpleEditor extends React.Component<Props, State> {
 
       this.registerKeyboardShortcuts(editor)
 
-      if (options.readOnly && props.simple) {
+      if (/* options.readOnly && */ props.simple) {
         // if we know 1) the height of the content won't change, and
         // 2) we are running in "simple" mode (this is mostly the case
         // for inline editor components, as opposed to editor
@@ -177,7 +188,7 @@ export default class SimpleEditor extends React.Component<Props, State> {
         editor.onDidChangeModelContent(SimpleEditor.onChange(props, editor))
       }
 
-      if (!options.readOnly) {
+      if (!options.readOnly && this.props.focus !== false) {
         setTimeout(() => editor.focus())
       }
 

plugins/plugin-client-common/src/components/Content/Editor/SimpleEditor.tsx

@@ -39,6 +39,10 @@ export default (options: Options): editor.IEditorConstructionOptions => ({
   fontFamily: 'var(--font-monospace)',
   fontSize: options.fontSize || getKuiFontSize(),
 
+  // don't show those little bits and borders in the scrollbar in "simple" mode
+  overviewRulerBorder: options.simple,
+  overviewRulerLanes: options.simple ? 0 : undefined,
+
   // specifics for readOnly mode
   glyphMargin: !options.readOnly && !options.simple, // needed for error indicators
 

plugins/plugin-client-common/src/components/Content/Editor/lib/defaults.ts

@@ -104,7 +104,6 @@ export default class KuiContent extends React.PureComponent<KuiMMRProps, State>
           return (
             <Markdown
               tab={tab}
-              repl={tab.REPL}
               fullpath={isFile(response) ? response.spec.fullpath : undefined}
               source={mode.content}
             />