feat(Editor): enable AI code completion for codemirror

package.json

@@ -92,6 +92,7 @@
     "@replit/codemirror-vscode-keymap": "6.0.2",
     "@snackbar/core": "1.7.0",
     "@types/deep-diff": "1.0.1",
+    "@valtown/codemirror-codeium": "0.2.3",
     "codejar": "4.1.1",
     "codemirror": "6.0.1",
     "deep-diff": "1.0.2",

scripts/vendors.js

@@ -89,6 +89,7 @@ const buildVendors = () => {
       'codemirror-vim.ts',
       'codemirror-emacs.ts',
       'codemirror-emmet.ts',
+      'codemirror-codeium.ts',
       'languages/codemirror-lang-json.ts',
       'languages/codemirror-lang-markdown.ts',
       'languages/codemirror-lang-python.ts',

src/livecodes/editor/codemirror/codemirror-codeium.ts

@@ -0,0 +1,24 @@
+import { copilotPlugin, codeiumOtherDocumentsConfig, Language } from '@valtown/codemirror-codeium';
+import type { CodeiumEditor } from './codemirror';
+
+const EDITOR_API_KEY = 'd49954eb-cfba-4992-980f-d8fb37f0e942';
+
+export const codeium = (editors: CodeiumEditor[], mapLanguage: (lang: string) => string) => [
+  codeiumOtherDocumentsConfig.of({
+    override: () =>
+      editors.map((editor) => {
+        const language = editor.getLanguage();
+        return {
+          absolutePath: `https://livecodes.io/v/${editor.editorId}/${language}`,
+          text: editor.getValue(),
+          language:
+            Language[mapLanguage(language).toUpperCase() as keyof typeof Language] ||
+            Language.TYPESCRIPT,
+          editorLanguage: mapLanguage(language),
+        };
+      }),
+  }),
+  copilotPlugin({
+    apiKey: EDITOR_API_KEY,
+  }),
+];

src/livecodes/editor/codemirror/codemirror.ts

@@ -35,6 +35,11 @@ import { editorLanguages } from './editor-languages';
 import { colorPicker, indentationMarkers, vscodeKeymap } from './extras';
 import { codemirrorThemes, customThemes } from './codemirror-themes';
 
+export type CodeiumEditor = Pick<CodeEditor, 'getLanguage' | 'getValue'> & {
+  editorId: EditorOptions['editorId'];
+};
+const editors: CodeiumEditor[] = [];
+
 export const createEditor = async (options: EditorOptions): Promise<CodeEditor> => {
   const { container, readonly, isEmbed, editorId, getFormatterConfig, getFontFamily } = options;
   let editorSettings: EditorConfig = { ...options };
@@ -78,16 +83,21 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
   let vim: (() => Extension) | undefined;
   let emacs: (() => Extension) | undefined;
   let emmet: Extension | undefined;
+  let codeium:
+    | ((editors: CodeiumEditor[], mapLanguage: (lang: Language) => Language) => Extension)
+    | undefined;
 
   const loadExtensions = async (opt: EditorConfig) => {
     const modules = {
       vim: `./vendor/codemirror/${process.env.codemirrorVersion}/codemirror-vim.js`,
       emacs: `./vendor/codemirror/${process.env.codemirrorVersion}/codemirror-emacs.js`,
       emmet: `./vendor/codemirror/${process.env.codemirrorVersion}/codemirror-emmet.js`,
+      codeium: `./vendor/codemirror/${process.env.codemirrorVersion}/codemirror-codeium.js`,
     };
     vim = opt.editorMode === 'vim' ? (await import(modules.vim)).vim : undefined;
     emacs = opt.editorMode === 'emacs' ? (await import(modules.emacs)).emacs : undefined;
     emmet = opt.emmet ? (await import(modules.emmet)).emmet : undefined;
+    codeium = opt.enableAI ? (await import(modules.codeium)).codeium : undefined;
   };
 
   await loadExtensions(options);
@@ -107,6 +117,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     const useTabs = settings.useTabs ?? editorSettings.useTabs;
     const wordWrap = settings.wordWrap ?? editorSettings.wordWrap;
     const enableEmmet = settings.emmet ?? editorSettings.emmet;
+    const enableAI = settings.enableAI ?? editorSettings.enableAI;
     const editorMode = settings.editorMode ?? editorSettings.editorMode;
 
     return [
@@ -115,6 +126,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
       ...(wordWrap ? [EditorView.lineWrapping] : []),
       ...(editorMode === 'vim' && vim ? [vim()] : editorMode === 'emacs' && emacs ? [emacs()] : []),
       ...(enableEmmet && emmet ? [emmet] : []),
+      ...(enableAI && codeium ? [codeium(editors, mapLanguage)] : []),
       EditorView.theme({
         '&': {
           height: '100%',
@@ -217,6 +229,8 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
       setValue(value);
     }
   };
+  const codeiumEditor: CodeiumEditor = { editorId, getLanguage, getValue };
+  editors.push(codeiumEditor);
 
   const onContentChanged = (fn: Listener) => {
     listeners.push(fn);
@@ -339,6 +353,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     keyBindings.length = 0;
     view.destroy();
     container.innerHTML = '';
+    editors.splice(editors.indexOf(codeiumEditor), 1);
   };
 
   return {

src/livecodes/styles/app.scss

@@ -3268,6 +3268,18 @@ i.arrow {
   }
 }
 
+// CodeMirror Codeium
+.cm-ghostText,
+.cm-ghostText * {
+  opacity: 0.6;
+  filter: grayscale(20%);
+  cursor: pointer;
+}
+
+.cm-ghostText:hover {
+  background: #eee;
+}
+
 /* Prism JS */
 
 .prism {

src/livecodes/templates/starter/react-starter.ts

@@ -25,7 +25,7 @@ export const reactStarter: Template = {
   script: {
     language: 'jsx',
     content: `
-import { useState } from "react"
+import { useState } from "react";
 
 function Counter(props) {
   const [count, setCount] = useState(0);