@arcgis/coding-components
Version:
ArcGIS Coding Components
76 lines (74 loc) • 2.7 kB
TypeScript
/// <reference path="../../index.d.ts" />
import type { PublicLitElement as LitElement } from "@arcgis/lumina";
/**
* A code viewer component for displaying code snippets.
* Supports syntax highlighting for various programming languages, include arcade and arcgis-sql-expression.
*
* @example
* ```tsx
* <arcgis-code-viewer language="javascript">
* function greet() {
* console.log("Hello, World!");
* }
* </arcgis-code-viewer>
* ```
* @example
* HTML snippets (preserve markup)
* ```tsx
* <arcgis-code-viewer language="html">
* <template>
* <div class="greeting"><span>Hello</span> World!</div>
* </template>
* </arcgis-code-viewer>
* ```
* When `language="html"`, the component will attempt to preserve your original markup instead of reducing it
* to plain text. For safety and to prevent the markup from rendering in-page, wrap the snippet in a `<template>`.
* If no `<template>` is provided, the component falls back to concatenating the `outerHTML` of element nodes and the
* raw text of text nodes. Script contents are treated as inert string data; they are never executed.
* @example
* Monaco-style line numbers
* ```tsx
* <arcgis-code-viewer language="typescript" lineNumbers="on">
* const answer = 42;
* console.log(answer);
* </arcgis-code-viewer>
* ```
* @example
* Custom line numbers using Monaco's formatter pattern
* ```ts
* const viewer = document.querySelector("arcgis-code-viewer");
* viewer.lineNumbers = (lineNumber) => String(lineNumber + 40);
* ```
* @internal
*/
export abstract class ArcgisCodeViewer extends LitElement {
/**
* The language for the component.
* Currently supported language: arcade, arcgis-sql-expression, plus all the following languages found in monaco-editor's repo:
* https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages.
*
* Note: The number of supported languages is limited in cdn builds to reduce package size. In cdn builds,
* only the following languages are supported: css, html, javascript, typescript, and arcade, arcgis-sql-expression.
*
* @default "arcade"
*/
accessor language: string;
/**
* Controls line number rendering using Monaco's `lineNumbers` paradigm.
*
* - `"off"`: hide the gutter
* - `"on"`: render 1-based line numbers
* - `(lineNumber) => string`: render custom labels, such as offset line numbers
*
* @default "off"
*/
accessor lineNumbers: ArcgisCodeViewerLineNumbers;
/**
* When `true`, adds a round style to the component.
*
* @default false
*/
accessor round: boolean;
}
/** @internal */
export type ArcgisCodeViewerLineNumbers = "off" | "on" | ((lineNumber: number) => string);