Autocomplete

import { createEditor } from '@synclineapi/editor';
import type { CompletionItem } from '@synclineapi/editor';

const editor = createEditor(container, {
  language: 'typescript',

  // Extra symbols highlighted and surfaced in the autocomplete popup
  extraKeywords: ['emit', 'stage', 'pipeline'],
  extraTypes:    ['Observable', 'Subject', 'BehaviorSubject'],

  // Unified completions — keywords, symbols, and snippets in one array
  completions: [
    {
      label:       'fetchUser',
      kind:        'fn',
      detail:      '(id: string) => Promise<User>',
      description: 'Fetch a user by ID from the REST API.',
    },
    {
      label:       'UserStatus',
      kind:        'typ',
      detail:      'enum',
      description: 'Represents the current state of a user account.

`active` | `suspended` | `pending`',
    },
    {
      label:       'rcomp',
      kind:        'snip',
      detail:      'React component scaffold',
      body:        'export function $1({ $2 }: $1Props) {
  return (
    <div>
      $3
    </div>
  );
}',
      language:    ['typescript'],
    },
  ],
});

import { createEditor, type CompletionContext, type CompletionItem } from '@synclineapi/editor';

const editor = createEditor(container, {
  language: 'typescript',

  // Called every time the popup opens.
  // ctx.prefix  — characters typed before the cursor
  // ctx.line    — zero-based cursor row
  // ctx.col     — zero-based cursor column
  // ctx.doc     — full document as string[]
  // Return null to fall through to built-in completions.
  provideCompletions(ctx: CompletionContext): CompletionItem[] | null {
    const { prefix, line: row, doc } = ctx;

    // Suggest modules inside import statements
    const importLine = doc[row];
    if (importLine.startsWith('import ') && prefix.length >= 1) {
      return [
        { label: '@myorg/utils',    kind: 'cls', detail: 'npm package' },
        { label: '@myorg/api-keys', kind: 'cls', detail: 'npm package' },
      ];
    }

    // Hook completions when the prefix starts with 'use'
    if (prefix.startsWith('use')) {
      return [
        { label: 'useMyContext', kind: 'fn', detail: '() => MyContext', description: 'Returns the shared context.' },
        { label: 'useMyStore',   kind: 'fn', detail: '() => MyStore',   description: 'Zustand store hook.' },
      ];
    }

    return null; // let built-ins handle it
  },
});

import { createEditor, type HoverContext, type HoverDoc } from '@synclineapi/editor';

const editor = createEditor(container, {
  provideHover(ctx: HoverContext): HoverDoc | null {
    const { word } = ctx;

    const docs: Record<string, HoverDoc> = {
      UUID:    { title: 'UUID', body: 'Universally unique identifier (RFC 4122).' },
      API_URL: { title: 'API_URL', body: 'Base URL injected at build time via VITE_API_URL.' },
    };

    return docs[word] ?? null;
  },
});

import type { CompletionItem } from '@synclineapi/editor';

// TypeScript / JavaScript built-in snippets
// arrowfn  →  const name = (params): ReturnType => { }
// asyncfn  →  async function name(params): Promise<T> { }
// classdef →  class Name { constructor(params) { } }
// trycatch →  try { } catch (err: unknown) { console.error(err); }
// forof    →  for (const item of iterable) { }
// iife     →  (function() { })();

// Custom snippet via completions array
const snippets: CompletionItem[] = [
  {
    label:       'mycomp',
    kind:        'snip',
    detail:      'React component',
    description: 'Scaffolds a typed React functional component.',
    body:        'export function $1({ $2 }: $1Props) {
  return (
    <div>
      $3
    </div>
  );
}',
    language:    ['typescript'],
  },
  {
    label:  'clog',
    kind:   'snip',
    detail: 'console.log with label',
    body:   "console.log('$1:', $2);",
  },
];

editor.updateConfig({ completions: snippets });

// HTML Emmet abbreviations — expand with Tab
// -------------------------------------------
// div.container    →  <div class="container"></div>
// ul>li*3          →  <ul><li></li><li></li><li></li></ul>
// a[href=#]        →  <a href="#"></a>
// h1{Hello}        →  <h1>Hello</h1>
// section>h2+p     →  <section><h2></h2><p></p></section>
// input[type=text] →  <input type="text">

// Disable Emmet
createEditor(container, { emmet: false });