2023-03-01 12:25:48 +00:00
|
|
|
/**
|
|
|
|
*
|
|
|
|
* Editor groups a collection of contents in tabs.
|
|
|
|
*
|
|
|
|
* [Live Demo](https://www.primevue.org/editor/)
|
|
|
|
*
|
|
|
|
* @module editor
|
|
|
|
*
|
|
|
|
*/
|
2022-09-06 12:03:37 +00:00
|
|
|
import { VNode } from 'vue';
|
|
|
|
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
|
|
|
|
|
2023-03-01 12:25:48 +00:00
|
|
|
/**
|
|
|
|
* Custom text change event.
|
2023-03-06 20:35:39 +00:00
|
|
|
* @see {@link EditorEmits['text-change']}
|
2023-03-01 12:25:48 +00:00
|
|
|
*/
|
2022-09-06 12:03:37 +00:00
|
|
|
export interface EditorTextChangeEvent {
|
|
|
|
/**
|
|
|
|
* Current value as html.
|
|
|
|
*/
|
|
|
|
htmlValue: string;
|
|
|
|
/**
|
|
|
|
* Current value as text.
|
|
|
|
*/
|
|
|
|
textValue: any;
|
|
|
|
/**
|
|
|
|
* Representation of the change.
|
|
|
|
*/
|
|
|
|
delta: any;
|
|
|
|
/**
|
|
|
|
* Source of change. Will be either 'user' or 'api'.
|
|
|
|
*/
|
|
|
|
source: string;
|
|
|
|
/**
|
|
|
|
* Text editor instance.
|
|
|
|
*/
|
|
|
|
instance: any;
|
|
|
|
}
|
2023-03-01 12:25:48 +00:00
|
|
|
/**
|
|
|
|
* Custom selection change event.
|
2023-03-06 20:35:39 +00:00
|
|
|
* @see {@link EditorEmits['selection-change']}
|
2023-03-01 12:25:48 +00:00
|
|
|
*/
|
2022-09-06 12:03:37 +00:00
|
|
|
export interface EditorSelectionChangeEvent {
|
|
|
|
/**
|
|
|
|
* Current value as html.
|
|
|
|
*/
|
|
|
|
htmlValue: string;
|
|
|
|
/**
|
|
|
|
* Current value as text.
|
|
|
|
*/
|
|
|
|
textValue: any;
|
|
|
|
/**
|
|
|
|
* Representation of the selection boundaries.
|
|
|
|
*/
|
|
|
|
range: any;
|
|
|
|
/**
|
|
|
|
* Representation of the previous selection boundaries.
|
|
|
|
*/
|
|
|
|
oldRange: any;
|
|
|
|
/**
|
|
|
|
* Source of change. Will be either 'user' or 'api'.
|
|
|
|
*/
|
|
|
|
source: string;
|
|
|
|
/**
|
|
|
|
* Text editor instance.
|
|
|
|
*/
|
|
|
|
instance: any;
|
|
|
|
}
|
2023-03-01 12:25:48 +00:00
|
|
|
/**
|
|
|
|
* Custom load event.
|
2023-03-06 20:35:39 +00:00
|
|
|
* @see {@link EditorEmits.load}
|
2023-03-01 12:25:48 +00:00
|
|
|
*/
|
2022-09-14 11:26:01 +00:00
|
|
|
export interface EditorLoadEvent {
|
|
|
|
/**
|
|
|
|
* Text editor instance.
|
|
|
|
*/
|
|
|
|
instance: any;
|
|
|
|
}
|
|
|
|
|
2023-03-01 12:25:48 +00:00
|
|
|
/**
|
|
|
|
* Defines valid properties in Editor component.
|
|
|
|
*/
|
2022-09-06 12:03:37 +00:00
|
|
|
export interface EditorProps {
|
|
|
|
/**
|
|
|
|
* Value of the content.
|
|
|
|
*/
|
|
|
|
modelValue?: string | undefined;
|
|
|
|
/**
|
|
|
|
* Placeholder text to show when editor is empty.
|
|
|
|
*/
|
|
|
|
placeholder?: string | undefined;
|
|
|
|
/**
|
|
|
|
* Whether to instantiate the editor to readonly mode.
|
2023-03-10 14:00:58 +00:00
|
|
|
* @defaultValue false
|
2022-09-06 12:03:37 +00:00
|
|
|
*/
|
|
|
|
readonly?: boolean | undefined;
|
|
|
|
/**
|
|
|
|
* Whitelist of formats to display, see [here](https://quilljs.com/docs/formats/) for available options.
|
|
|
|
*/
|
|
|
|
formats?: any[];
|
|
|
|
/**
|
|
|
|
* Inline style of the container.
|
|
|
|
*/
|
|
|
|
editorStyle?: any;
|
2022-09-14 11:26:01 +00:00
|
|
|
/**
|
|
|
|
* Modules configuration, see [here](https://quilljs.com/docs/modules/) for available options.
|
|
|
|
*/
|
|
|
|
modules?: any;
|
2022-09-06 12:03:37 +00:00
|
|
|
}
|
|
|
|
|
2023-03-01 12:25:48 +00:00
|
|
|
/**
|
|
|
|
* Defines valid slots in Editor slots.
|
|
|
|
*/
|
2022-09-06 12:03:37 +00:00
|
|
|
export interface EditorSlots {
|
|
|
|
/**
|
|
|
|
* Custom toolbar template.
|
|
|
|
*/
|
|
|
|
toolbar: () => VNode[];
|
|
|
|
}
|
|
|
|
|
2023-03-01 12:25:48 +00:00
|
|
|
/**
|
|
|
|
* Defines valid emits in Editor component.
|
|
|
|
*/
|
|
|
|
export interface EditorEmits {
|
2022-09-06 12:03:37 +00:00
|
|
|
/**
|
|
|
|
* Emitted when the value changes.
|
|
|
|
* @param {string} value - New value.
|
|
|
|
*/
|
2023-03-01 12:25:48 +00:00
|
|
|
'update:modelValue'(value: string): void;
|
2022-09-06 12:03:37 +00:00
|
|
|
/**
|
|
|
|
* Callback to invoke when text of editor changes.
|
|
|
|
* @param {EditorTextChangeEvent} event - Custom text change event.
|
|
|
|
*/
|
2023-03-01 12:25:48 +00:00
|
|
|
'text-change'(event: EditorTextChangeEvent): void;
|
2022-09-06 12:03:37 +00:00
|
|
|
/**
|
|
|
|
* Callback to invoke when selection of the text changes.
|
|
|
|
* @param {EditorSelectionChangeEvent} event - Custom selection change event.
|
|
|
|
*/
|
2023-03-01 12:25:48 +00:00
|
|
|
'selection-change'(event: EditorSelectionChangeEvent): void;
|
2022-09-14 11:26:01 +00:00
|
|
|
/**
|
|
|
|
* Callback to invoke when the quill modules are loaded.
|
|
|
|
* @param {EditorLoadEvent} event - Custom load event.
|
|
|
|
*/
|
2023-03-01 12:25:48 +00:00
|
|
|
load(event: EditorLoadEvent): void;
|
|
|
|
}
|
2022-09-06 12:03:37 +00:00
|
|
|
|
2023-03-01 12:25:48 +00:00
|
|
|
/**
|
|
|
|
* **PrimeVue - Editor**
|
|
|
|
*
|
|
|
|
* _Editor groups a collection of contents in tabs._
|
|
|
|
*
|
|
|
|
* [Live Demo](https://www.primevue.org/editor/)
|
|
|
|
* --- ---
|
2023-03-03 10:55:20 +00:00
|
|
|
* ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
|
2023-03-01 12:25:48 +00:00
|
|
|
*
|
|
|
|
* @group Component
|
|
|
|
*
|
|
|
|
*/
|
2022-09-14 11:26:01 +00:00
|
|
|
declare class Editor extends ClassComponent<EditorProps, EditorSlots, EditorEmits> {}
|
2022-09-06 12:03:37 +00:00
|
|
|
|
|
|
|
declare module '@vue/runtime-core' {
|
|
|
|
interface GlobalComponents {
|
2022-09-14 11:26:01 +00:00
|
|
|
Editor: GlobalComponentConstructor<Editor>;
|
2022-09-06 12:03:37 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Editor;
|