Codemirror-companion-extension NPM

codemirror-companion-extension

This package implements inline suggestions for the CodeMirror code editor. It's a backward-compatible fork of saminzadeh's project that allows the user to display text different than that being accepted, and to instantly trigger the completion function upon accepting the previous completion.

Screenshot

Install

npm install codemirror-companion-extension --save

Usage

import CodeMirror from '@uiw/react-codemirror';
import { inlineSuggestion } from 'codemirror-companion-extension';

const fetchSuggestion = async (state) => {
  // or make an async API call here based on editor state
  return 'hello';
};

function App() {
  return (
    <CodeMirror
      value=""
      height="200px"
      extensions={[
        inlineSuggestion({
          fetchFn: inlineSuggestion,
          delay: 1000,
          continue_suggesting: true,
        }),
      ]}
    />
  );
}

export default App;

Alternatively, you can use forceableInlineSuggestion to trigger the suggestion forcefully:

export default function App() {
  const { extension, force_fetch } = forceableInlineSuggestion({
    fetchFn: () => 'hello',
    delay: 25000,
    continue_suggesting: true,
  });
  return (
    <>
      <CodeMirror extensions={[extension]} />
      <button onClick={force_fetch}>Generate a completion</button>
    </>
  );
}