feat(editor): add basic codemirror autocompletion suggestions

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

frontend/src/extensions/base/app-extension.ts

@@ -6,6 +6,7 @@
 import type { CheatsheetExtension } from '../../components/editor-page/cheatsheet/cheatsheet-extension'
 import type { Linter } from '../../components/editor-page/editor-pane/linter/linter'
 import type { MarkdownRendererExtension } from '../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
+import type { CompletionSource } from '@codemirror/autocomplete'
 import type { EventEmitter2 } from 'eventemitter2'
 import type React from 'react'
 import { Fragment } from 'react'
@@ -27,4 +28,8 @@ export abstract class AppExtension {
   public buildCheatsheetExtensions(): CheatsheetExtension[] {
     return []
   }
+
+  public buildAutocompletion(): CompletionSource[] {
+    return []
+  }
 }

frontend/src/extensions/extra-integrations/abcjs/abcjs-app-extension.ts

@@ -4,9 +4,14 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
+import {
+  basicCompletion,
+  codeFenceRegex
+} from '../../../components/editor-page/editor-pane/autocompletions/basic-completion'
 import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
 import { AppExtension } from '../../base/app-extension'
 import { AbcjsMarkdownExtension } from './abcjs-markdown-extension'
+import type { CompletionSource } from '@codemirror/autocomplete'
 
 export class AbcjsAppExtension extends AppExtension {
   buildMarkdownRendererExtensions(): MarkdownRendererExtension[] {
@@ -16,4 +21,8 @@ export class AbcjsAppExtension extends AppExtension {
   buildCheatsheetExtensions(): CheatsheetExtension[] {
     return [{ i18nKey: 'abcjs', categoryI18nKey: 'charts', readMoreUrl: new URL('https://www.abcjs.net/') }]
   }
+
+  buildAutocompletion(): CompletionSource[] {
+    return [basicCompletion(codeFenceRegex, '```abc\n\n```')]
+  }
 }

frontend/src/extensions/extra-integrations/alert/alert-app-extension.ts

@@ -4,9 +4,14 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
+import { basicCompletion } from '../../../components/editor-page/editor-pane/autocompletions/basic-completion'
 import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
 import { AppExtension } from '../../base/app-extension'
 import { AlertMarkdownExtension } from './alert-markdown-extension'
+import type { CompletionSource } from '@codemirror/autocomplete'
+import { t } from 'i18next'
+
+const alertRegex = /(?:^|\s):(?::|::|::\w+)?/
 
 /**
  * Adds alert boxes to the markdown rendering.
@@ -19,4 +24,13 @@ export class AlertAppExtension extends AppExtension {
   buildCheatsheetExtensions(): CheatsheetExtension[] {
     return [{ i18nKey: 'alert' }]
   }
+
+  buildAutocompletion(): CompletionSource[] {
+    return [
+      basicCompletion(alertRegex, ':::success\n\n:::', t('editor.autocompletions.successBox') ?? undefined),
+      basicCompletion(alertRegex, ':::info\n\n:::', t('editor.autocompletions.infoBox') ?? undefined),
+      basicCompletion(alertRegex, ':::warning\n\n:::', t('editor.autocompletions.warningBox') ?? undefined),
+      basicCompletion(alertRegex, ':::danger\n\n:::', t('editor.autocompletions.errorBox') ?? undefined)
+    ]
+  }
 }

frontend/src/extensions/extra-integrations/blockquote/blockquote-app-extension.ts

@@ -4,9 +4,14 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
+import { basicCompletion } from '../../../components/editor-page/editor-pane/autocompletions/basic-completion'
 import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
 import { AppExtension } from '../../base/app-extension'
 import { BlockquoteExtraTagMarkdownExtension } from './blockquote-extra-tag-markdown-extension'
+import type { CompletionSource } from '@codemirror/autocomplete'
+import { t } from 'i18next'
+
+const blockquoteTagRegex = /(?:^|\s)\[(?:\w+)?/
 
 /**
  * Adds support for generic blockquote extra tags and blockquote color extra tags.
@@ -19,4 +24,12 @@ export class BlockquoteAppExtension extends AppExtension {
   buildCheatsheetExtensions(): CheatsheetExtension[] {
     return [{ i18nKey: 'blockquoteTags', entries: [{ i18nKey: 'name' }, { i18nKey: 'color' }, { i18nKey: 'time' }] }]
   }
+
+  buildAutocompletion(): CompletionSource[] {
+    return [
+      basicCompletion(blockquoteTagRegex, '[name=]', t('editor.autocompletions.tagName') ?? undefined),
+      basicCompletion(blockquoteTagRegex, '[time=]', t('editor.autocompletions.tagTime') ?? undefined),
+      basicCompletion(blockquoteTagRegex, '[color=]', t('editor.autocompletions.tagColor') ?? undefined)
+    ]
+  }
 }

frontend/src/extensions/extra-integrations/csv/csv-table-app-extension.ts

@@ -4,9 +4,14 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
+import {
+  basicCompletion,
+  codeFenceRegex
+} from '../../../components/editor-page/editor-pane/autocompletions/basic-completion'
 import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
 import { AppExtension } from '../../base/app-extension'
 import { CsvTableMarkdownExtension } from './csv-table-markdown-extension'
+import type { CompletionSource } from '@codemirror/autocomplete'
 
 /**
  * Adds support for csv tables to the markdown rendering.
@@ -19,4 +24,8 @@ export class CsvTableAppExtension extends AppExtension {
   buildCheatsheetExtensions(): CheatsheetExtension[] {
     return [{ i18nKey: 'csv', entries: [{ i18nKey: 'table' }, { i18nKey: 'header' }] }]
   }
+
+  buildAutocompletion(): CompletionSource[] {
+    return [basicCompletion(codeFenceRegex, '```csv delimiter=;\n\n```')]
+  }
 }

frontend/src/extensions/extra-integrations/flowchart/flowchart-app-extension.ts

@@ -4,9 +4,14 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
+import {
+  basicCompletion,
+  codeFenceRegex
+} from '../../../components/editor-page/editor-pane/autocompletions/basic-completion'
 import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
 import { AppExtension } from '../../base/app-extension'
 import { FlowchartMarkdownExtension } from './flowchart-markdown-extension'
+import type { CompletionSource } from '@codemirror/autocomplete'
 
 /**
  * Adds support for flow charts to the markdown rendering.
@@ -19,4 +24,8 @@ export class FlowchartAppExtension extends AppExtension {
   buildCheatsheetExtensions(): CheatsheetExtension[] {
     return [{ i18nKey: 'flowchart', categoryI18nKey: 'charts', readMoreUrl: new URL('https://flowchart.js.org/') }]
   }
+
+  buildAutocompletion(): CompletionSource[] {
+    return [basicCompletion(codeFenceRegex, '```flow\n\n```')]
+  }
 }

frontend/src/extensions/extra-integrations/graphviz/graphviz-app-extension.ts

@@ -4,9 +4,14 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
+import {
+  basicCompletion,
+  codeFenceRegex
+} from '../../../components/editor-page/editor-pane/autocompletions/basic-completion'
 import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
 import { AppExtension } from '../../base/app-extension'
 import { GraphvizMarkdownExtension } from './graphviz-markdown-extension'
+import type { CompletionSource } from '@codemirror/autocomplete'
 
 /**
  * Adds support for graphviz to the markdown rendering.
@@ -19,4 +24,8 @@ export class GraphvizAppExtension extends AppExtension {
   buildCheatsheetExtensions(): CheatsheetExtension[] {
     return [{ i18nKey: 'graphviz', categoryI18nKey: 'charts', readMoreUrl: new URL('https://graphviz.org/') }]
   }
+
+  buildAutocompletion(): CompletionSource[] {
+    return [basicCompletion(codeFenceRegex, '```graphviz\n\n```')]
+  }
 }

frontend/src/extensions/extra-integrations/highlighted-code-fence/highlighted-code-fence-app-extension.ts

@@ -4,9 +4,13 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
+import { codeFenceRegex } from '../../../components/editor-page/editor-pane/autocompletions/basic-completion'
 import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
 import { AppExtension } from '../../base/app-extension'
 import { HighlightedCodeMarkdownExtension } from './highlighted-code-markdown-extension'
+import type { CompletionSource } from '@codemirror/autocomplete'
+import type { CompletionContext, CompletionResult } from '@codemirror/autocomplete'
+import { languages } from '@codemirror/language-data'
 
 /**
  * Adds code highlighting to the markdown rendering.
@@ -24,4 +28,22 @@ export class HighlightedCodeFenceAppExtension extends AppExtension {
       }
     ]
   }
+
+  buildAutocompletion(): CompletionSource[] {
+    return [
+      (context: CompletionContext): CompletionResult | null => {
+        const match = context.matchBefore(codeFenceRegex)
+        if (!match || (match.from === match.to && !context.explicit)) {
+          return null
+        }
+        return {
+          from: match.from,
+          options: languages.map((lang) => ({
+            detail: lang.name,
+            label: '```' + lang.alias[0] + '\n\n```'
+          }))
+        }
+      }
+    ]
+  }
 }

frontend/src/extensions/extra-integrations/mermaid/mermaid-app-extension.ts

@@ -4,9 +4,14 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
+import {
+  basicCompletion,
+  codeFenceRegex
+} from '../../../components/editor-page/editor-pane/autocompletions/basic-completion'
 import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
 import { AppExtension } from '../../base/app-extension'
 import { MermaidMarkdownExtension } from './mermaid-markdown-extension'
+import type { CompletionSource } from '@codemirror/autocomplete'
 
 /**
  * Adds support for chart rendering using mermaid to the markdown renderer.
@@ -19,4 +24,8 @@ export class MermaidAppExtension extends AppExtension {
   buildCheatsheetExtensions(): CheatsheetExtension[] {
     return [{ i18nKey: 'mermaid', categoryI18nKey: 'charts', readMoreUrl: new URL('https://mermaid.js.org/') }]
   }
+
+  buildAutocompletion(): CompletionSource[] {
+    return [basicCompletion(codeFenceRegex, '```mermaid\n\n```')]
+  }
 }

frontend/src/extensions/extra-integrations/plantuml/plantuml-app-extension.ts

@@ -4,9 +4,14 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
+import {
+  basicCompletion,
+  codeFenceRegex
+} from '../../../components/editor-page/editor-pane/autocompletions/basic-completion'
 import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
 import { AppExtension } from '../../base/app-extension'
 import { PlantumlMarkdownExtension } from './plantuml-markdown-extension'
+import type { CompletionSource } from '@codemirror/autocomplete'
 
 /**
  * Adds support for chart rendering using plantuml to the markdown renderer.
@@ -21,4 +26,8 @@ export class PlantumlAppExtension extends AppExtension {
   buildCheatsheetExtensions(): CheatsheetExtension[] {
     return [{ i18nKey: 'plantuml', categoryI18nKey: 'charts', readMoreUrl: new URL('https://plantuml.com/') }]
   }
+
+  buildAutocompletion(): CompletionSource[] {
+    return [basicCompletion(codeFenceRegex, '```plantuml\n\n```')]
+  }
 }

frontend/src/extensions/extra-integrations/spoiler/spoiler-app-extension.ts

@@ -4,9 +4,14 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
+import { basicCompletion } from '../../../components/editor-page/editor-pane/autocompletions/basic-completion'
 import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
 import { AppExtension } from '../../base/app-extension'
 import { SpoilerMarkdownExtension } from './spoiler-markdown-extension'
+import type { CompletionSource } from '@codemirror/autocomplete'
+import { t } from 'i18next'
+
+const spoilerRegex = /(?:^|\s):(?::|::|::\w+)?/
 
 /**
  * Adds support for html spoiler tags.
@@ -21,4 +26,10 @@ export class SpoilerAppExtension extends AppExtension {
   buildCheatsheetExtensions(): CheatsheetExtension[] {
     return [{ i18nKey: 'spoiler' }]
   }
+
+  buildAutocompletion(): CompletionSource[] {
+    return [
+      basicCompletion(spoilerRegex, ':::spoiler Label text\n\n:::', t('editor.autocompletions.spoiler') ?? undefined)
+    ]
+  }
 }

frontend/src/extensions/extra-integrations/vega-lite/vega-lite-app-extension.ts

@@ -4,9 +4,14 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
+import {
+  basicCompletion,
+  codeFenceRegex
+} from '../../../components/editor-page/editor-pane/autocompletions/basic-completion'
 import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
 import { AppExtension } from '../../base/app-extension'
 import { VegaLiteMarkdownExtension } from './vega-lite-markdown-extension'
+import type { CompletionSource } from '@codemirror/autocomplete'
 
 /**
  * Adds support for chart rendering using vega lite to the markdown renderer.
@@ -21,4 +26,8 @@ export class VegaLiteAppExtension extends AppExtension {
       { i18nKey: 'vegaLite', categoryI18nKey: 'charts', readMoreUrl: new URL('https://vega.github.io/vega-lite/') }
     ]
   }
+
+  buildAutocompletion(): CompletionSource[] {
+    return [basicCompletion(codeFenceRegex, '```vega-lite\n\n```')]
+  }
 }