@fsegurai/ngx-codemirror
Version:
Angular library that uses codemirror to create a code editor
112 lines (111 loc) • 6.77 kB
TypeScript
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;
}