@acrodata/code-editor
Version:
CodeMirror 6 wrapper for Angular
105 lines (104 loc) • 5.52 kB
TypeScript
import { ElementRef, EventEmitter, 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 } from './code-editor';
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 DiffEditor implements OnChanges, OnInit, OnDestroy, ControlValueAccessor {
private _elementRef;
/**
* 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!
*/
setup: 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!
*/
originalExtensions: Extension[];
/** The diff-editor's modified value. */
modifiedValue: string;
/**
* The MergeView modified config's
* [extensions](https://codemirror.net/docs/ref/#state.EditorStateConfig.extensions).
*
* Don't support change dynamically!
*/
modifiedExtensions: Extension[];
/** Controls whether editor A or editor B is shown first. Defaults to `"a-b"`. */
orientation?: Orientation;
/** Controls whether revert controls are shown between changed chunks. */
revertControls?: RevertControls;
/** When given, this function is called to render the button to revert a chunk. */
renderRevertControl?: RenderRevertControl;
/**
* By default, the merge view will mark inserted and deleted text
* in changed chunks. Set this to false to turn that off.
*/
highlightChanges: boolean;
/** Controls whether a gutter marker is shown next to changed lines. */
gutter: boolean;
/** 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).
*/
collapseUnchanged?: {
margin?: number;
minSize?: number;
};
/** Pass options to the diff algorithm. */
diffConfig?: DiffConfig;
/** Event emitted when the editor's original value changes. */
originalValueChange: EventEmitter<string>;
/** Event emitted when focus on the original editor. */
originalFocus: EventEmitter<void>;
/** Event emitted when blur on the original editor. */
originalBlur: EventEmitter<void>;
/** Event emitted when the editor's modified value changes. */
modifiedValueChange: EventEmitter<string>;
/** Event emitted when focus on the modified editor. */
modifiedFocus: EventEmitter<void>;
/** Event emitted when blur on the modified editor. */
modifiedBlur: EventEmitter<void>;
private _onChange;
private _onTouched;
constructor(_elementRef: ElementRef<Element>);
/** The merge view instance. */
mergeView?: MergeView;
private _updateListener;
private _editableConf;
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. */
setValue(editor: 'a' | 'b', value: string): void;
/** Sets diff-editor's editable state. */
setEditable(editor: 'a' | 'b', value: boolean): void;
static ɵfac: i0.ɵɵFactoryDeclaration<DiffEditor, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<DiffEditor, "diff-editor", never, { "setup": { "alias": "setup"; "required": false; }; "originalValue": { "alias": "originalValue"; "required": false; }; "originalExtensions": { "alias": "originalExtensions"; "required": false; }; "modifiedValue": { "alias": "modifiedValue"; "required": false; }; "modifiedExtensions": { "alias": "modifiedExtensions"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "revertControls": { "alias": "revertControls"; "required": false; }; "renderRevertControl": { "alias": "renderRevertControl"; "required": false; }; "highlightChanges": { "alias": "highlightChanges"; "required": false; }; "gutter": { "alias": "gutter"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "collapseUnchanged": { "alias": "collapseUnchanged"; "required": false; }; "diffConfig": { "alias": "diffConfig"; "required": false; }; }, { "originalValueChange": "originalValueChange"; "originalFocus": "originalFocus"; "originalBlur": "originalBlur"; "modifiedValueChange": "modifiedValueChange"; "modifiedFocus": "modifiedFocus"; "modifiedBlur": "modifiedBlur"; }, never, never, true, never>;
static ngAcceptInputType_highlightChanges: unknown;
static ngAcceptInputType_gutter: unknown;
static ngAcceptInputType_disabled: unknown;
}