UNPKG

@fsegurai/ngx-codemirror

Version:

Angular library that uses codemirror to create a code editor

112 lines (111 loc) 6.77 kB
import { OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core'; import { ControlValueAccessor } from '@angular/forms'; import { DiffConfig, MergeView } from '@codemirror/merge'; import { Extension } from '@codemirror/state'; import { Setup, Theme } from 'ngx-codemirror'; import * as i0 from "@angular/core"; export type Orientation = 'a-b' | 'b-a'; export type RevertControls = 'a-to-b' | 'b-to-a'; export type RenderRevertControl = () => HTMLElement; export interface DiffEditorModel { original: string; modified: string; } export declare class CodeDiffEditorComponent implements OnChanges, OnInit, OnDestroy, ControlValueAccessor { private _elementRef; /** The editor's theme. */ readonly theme: import("@angular/core").InputSignal<Theme>; /** * The editor's built-in setup. The value can be set to * [`basic`](https://codemirror.net/docs/ref/#codemirror.basicSetup), * [`minimal`](https://codemirror.net/docs/ref/#codemirror.minimalSetup) or `null`. * * Don't support change dynamically! */ readonly setup: import("@angular/core").InputSignal<Setup>; /** The diff-editor's original value. */ originalValue: string; /** * The MergeView original config's * [extensions](https://codemirror.net/docs/ref/#state.EditorStateConfig.extensions). * * Don't support change dynamically! */ readonly originalExtensions: import("@angular/core").InputSignal<Extension[]>; /** The diff-editor's modified value. */ modifiedValue: string; /** * The MergeView modified config's * [extensions](https://codemirror.net/docs/ref/#state.EditorStateConfig.extensions). */ readonly modifiedExtensions: import("@angular/core").InputSignal<Extension[]>; /** Controls whether editor A or editor B is shown first. Defaults to `"a-b"`. */ readonly orientation: import("@angular/core").InputSignal<Orientation | undefined>; /** Controls whether revert controls are shown between changed chunks. */ readonly revertControls: import("@angular/core").InputSignal<RevertControls | undefined>; /** When given, this function is called to render the button to revert a chunk. */ readonly renderRevertControl: import("@angular/core").InputSignal<RenderRevertControl | undefined>; /** * By default, the merge view will mark inserted and deleted text * in changed chunks. Set this to false in order to turn that off. */ readonly highlightChanges: import("@angular/core").InputSignalWithTransform<boolean, unknown>; /** Controls whether a gutter marker is shown next to changed lines. */ readonly gutter: import("@angular/core").InputSignalWithTransform<boolean, unknown>; /** Whether the diff-editor is disabled. */ disabled: boolean; /** * When given, long stretches of unchanged text are collapsed. * `margin` gives the number of lines to leave visible after/before * a change (default is 3), and `minSize` gives the minimum amount * of collapsible lines that need to be present (defaults to 4). */ readonly collapseUnchanged: import("@angular/core").InputSignal<{ margin?: number; minSize?: number; } | undefined>; /** Pass options to the diff algorithm. */ readonly diffConfig: import("@angular/core").InputSignal<DiffConfig | undefined>; /** Event emitted when the editor's original value changes. */ readonly originalValueChange: import("@angular/core").OutputEmitterRef<string>; /** Event emitted when focus on the original editor. */ readonly originalFocus: import("@angular/core").OutputEmitterRef<void>; /** Event emitted when blur on the original editor. */ readonly originalBlur: import("@angular/core").OutputEmitterRef<void>; /** Event emitted when the editor's modified value changes. */ readonly modifiedValueChange: import("@angular/core").OutputEmitterRef<string>; /** Event emitted when focus on the modified editor. */ readonly modifiedFocus: import("@angular/core").OutputEmitterRef<void>; /** Event emitted when blur on the modified editor. */ readonly modifiedBlur: import("@angular/core").OutputEmitterRef<void>; private _onChange; private _onTouched; /** The merge view instance. */ mergeView?: MergeView; private _updateListener; private _editableConf; private _themeConf; private _getAllExtensions; ngOnChanges(changes: SimpleChanges): void; ngOnInit(): void; ngOnDestroy(): void; writeValue(value: DiffEditorModel): void; registerOnChange(fn: (value: DiffEditorModel) => void): void; registerOnTouched(fn: () => void): void; setDisabledState(isDisabled: boolean): void; /** Sets diff-editor's value. */ private setValue; /** Sets editor's editable state. */ private setEditable; /** Sets editor's theme. */ private setTheme; /** Sets the root extensions of the editor state. */ private setExtensions; private _dispatchEffects; private initializeMergeView; private addEventListeners; private reconfigureMergeView; static ɵfac: i0.ɵɵFactoryDeclaration<CodeDiffEditorComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<CodeDiffEditorComponent, "ngx-code-diff-editor, code-diff-editor, [diff-editor]", never, { "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "setup": { "alias": "setup"; "required": false; "isSignal": true; }; "originalValue": { "alias": "originalValue"; "required": false; }; "originalExtensions": { "alias": "originalExtensions"; "required": false; "isSignal": true; }; "modifiedValue": { "alias": "modifiedValue"; "required": false; }; "modifiedExtensions": { "alias": "modifiedExtensions"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "revertControls": { "alias": "revertControls"; "required": false; "isSignal": true; }; "renderRevertControl": { "alias": "renderRevertControl"; "required": false; "isSignal": true; }; "highlightChanges": { "alias": "highlightChanges"; "required": false; "isSignal": true; }; "gutter": { "alias": "gutter"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; }; "collapseUnchanged": { "alias": "collapseUnchanged"; "required": false; "isSignal": true; }; "diffConfig": { "alias": "diffConfig"; "required": false; "isSignal": true; }; }, { "originalValueChange": "originalValueChange"; "originalFocus": "originalFocus"; "originalBlur": "originalBlur"; "modifiedValueChange": "modifiedValueChange"; "modifiedFocus": "modifiedFocus"; "modifiedBlur": "modifiedBlur"; }, never, never, true, never>; static ngAcceptInputType_disabled: unknown; }