@api-client/ui 0.5.11 → 0.5.13

package/src/elements/code-editor/internals/PlaceholderWidget.ts

@@ -0,0 +1,50 @@
+import { EditorView, WidgetType } from '@codemirror/view'
+import type { Suggestion } from './types.js'
+import '../../../md/chip/ui-chip.js'
+
+/**
+ * A widget that represents a placeholder in the code editor,
+ * specifically for suggestions that are replaced with chips.
+ *
+ * This widget is used to create a visual representation of a suggestion
+ * in the code editor, allowing users to see and interact with suggestions
+ * as chips. When a chip is removed, the corresponding text in the editor
+ * is also removed.
+ */
+export class ChipWidget extends WidgetType {
+  constructor(public suggestion: Suggestion) {
+    super()
+  }
+
+  override eq(other: WidgetType): boolean {
+    return this.suggestion.id == (other as ChipWidget).suggestion.id
+  }
+
+  toDOM(view: EditorView): HTMLElement {
+    const wrapper = document.createElement('span')
+    wrapper.className = 'mention-chip'
+    wrapper.setAttribute('data-mention-id', this.suggestion.id)
+
+    const chip = document.createElement('ui-chip')
+    chip.setAttribute('type', 'input')
+    chip.setAttribute('removable', 'true')
+    chip.textContent = this.suggestion.label
+    chip.addEventListener('remove', () => {
+      const pos = view.posAtDOM(wrapper)
+      if (pos === null) return
+
+      const originalText = `{{${this.suggestion.label}}}`
+      view.dispatch({
+        changes: { from: pos, to: pos + originalText.length, insert: '' },
+      })
+      view.focus()
+    })
+
+    wrapper.appendChild(chip)
+    return wrapper
+  }
+
+  override ignoreEvent(): boolean {
+    return false
+  }
+}

package/src/elements/code-editor/internals/SuggestionMatchDecorator.ts

@@ -0,0 +1,36 @@
+import { MatchDecorator, Decoration } from '@codemirror/view'
+import type { Suggestion } from './types.js'
+import { ChipWidget } from './PlaceholderWidget.js'
+
+/**
+ * A class that specializes in creating and managing decorations for suggestion matches in a code editor.
+ */
+export class SuggestionMatchDecorator extends MatchDecorator {
+  /**
+   * Creates a new instance of SuggestionMatchDecorator.
+   * @param regexp - The regular expression used to match suggestions in the code.
+   * @param suggestions - An array of suggestions that will be used to create decorations.
+   * Each suggestion should have a unique `id` and a `label` that will be displayed in the editor.
+   */
+  constructor(
+    regexp: RegExp,
+    public suggestions: Suggestion[]
+  ) {
+    super({
+      regexp,
+      decoration: (match) => this.#decoration(match),
+    })
+  }
+
+  #decoration(match: RegExpExecArray): Decoration {
+    const label = match[1]
+    const suggestion = this.suggestions.find((s) => s.label === label)
+
+    // If no suggestion is found, create a default one
+    const suggestionData: Suggestion = suggestion || { id: label, label }
+
+    return Decoration.replace({
+      widget: new ChipWidget(suggestionData),
+    })
+  }
+}

package/src/elements/code-editor/internals/types.ts

@@ -0,0 +1,54 @@
+export interface FunctionSchema {
+  /** Unique identifier for the function */
+  id: string
+  /** Function name */
+  name: string
+  /** Function description */
+  description?: string
+  /** Function parameters */
+  parameters?: FunctionParameter[]
+  /** Return type description */
+  returns?: string
+  /** Additional metadata */
+  metadata?: Record<string, unknown>
+}
+
+export interface FunctionParameter {
+  /** Parameter name */
+  name: string
+  /** Parameter type */
+  type: string
+  /** Parameter description */
+  description?: string
+  /** Whether parameter is required */
+  required?: boolean
+  /** Default value */
+  defaultValue?: unknown
+}
+
+export interface Suggestion {
+  /** Unique identifier for the suggestion */
+  id: string
+  /** Main label displayed */
+  label: string
+  /** Supporting description text */
+  description?: string
+  /** Suffix text (e.g., type, category) */
+  suffix?: string
+  /** Additional data associated with the suggestion */
+  data?: Record<string, unknown>
+}
+
+export interface FunctionInsertEvent {
+  /** The inserted function schema */
+  functionSchema: FunctionSchema
+  /** The position where the function was inserted */
+  position: number
+}
+
+export interface SuggestionInsertEvent {
+  /** The inserted suggestion */
+  suggestion: Suggestion
+  /** The position where the suggestion was inserted */
+  position: number
+}

package/src/index.ts

@@ -4,6 +4,16 @@ export { default as MarkedHighlightElement } from './elements/highlight/MarkedHi
 export { default as PrismHighlightElement } from './elements/highlight/PrismHighlight.js'
 export { default as HarViewerElement } from './elements/har/HarViewer.js'
 
+// Code Editor
+export { default as CodeEditorElement } from './elements/code-editor/code-editor.js'
+export type {
+  FunctionSchema,
+  FunctionParameter,
+  Suggestion,
+  FunctionInsertEvent,
+  SuggestionInsertEvent,
+} from './elements/code-editor/code-editor.js'
+
 // Menu Components
 export { default as Menu } from './md/menu/internal/Menu.js'
 export { default as MenuItem } from './md/menu/internal/MenuItem.js'

package/src/md/chip/internals/Chip.styles.ts

@@ -34,6 +34,7 @@ export default css`
     --_icon-size: 18px;
 
     height: 32px;
+    box-sizing: border-box;
     border-radius: var(--md-sys-shape-corner-small);
     box-shadow: var(--_shadow);
     border: var(--_outline-size) solid var(--_outline-color);