framework7
Version:
Full featured mobile HTML framework for building iOS & Android apps
167 lines (161 loc) • 9 kB
TypeScript
import { Dom7Array } from 'dom7';
import Framework7, {
CSSSelector,
Framework7EventsClass,
Framework7Plugin,
} from '../app/app-class.js';
export namespace TextEditor {
interface Parameters {
/** Editor element. HTMLElement or string with CSS selector of editor element */
el: HTMLElement | CSSSelector;
/** Text editor mode: Can be "toolbar", "popover" or "keyboard-toolbar" (default "toolbar") */
mode?: string;
/** Default value. Should be HTML string. If not passed then it will treat inner HTML content as default value (default undefined) */
value?: string;
/** Placeholder (default null) */
palceholder?: string;
/** Set of editor toolbar buttons */
buttons?: string[] | Array<string>[];
/** Define custom buttons */
customButtons?: object;
/** Adds visual divider between buttons group (default true) */
dividers?: boolean;
/** Prompt text that appears on image url request (default "Insert image URL") */
imageUrlText?: string;
/** Prompt text that appears on link url request (default "Insert link URL") */
linkUrlText?: string;
/** When enabled it will clear any formatting on paste from clipboard (default true) */
clearFormattingOnPaste?: boolean;
/** Object with events handlers.. */
on?: {
[event in keyof Events]?: Events[event];
};
}
interface TextEditor extends Framework7EventsClass<Events> {
/** Link to global app instance */
app: Framework7;
/** Editor HTML element */
el: HTMLElement;
/** Dom7 instance with editor HTML element */
$el: Dom7Array;
/** Editor contenteditable content element */
contentEl: HTMLElement;
/** Dom7 instance with editor contenteditable content element */
$contentEl: Dom7Array;
/** Current editor value (html string) */
value: string;
/** Editor parameters */
params: Parameters;
/** Returns editor value */
getValue(): number;
/** Set new editor value */
setValue(value: string): TextEditor;
/** Clear editor value */
clearValue(): TextEditor;
/** Returns current selection Range */
getSelectionRange(): Range;
/** Set selection based on passed Range */
setSelectionRange(range: Range): void;
/** Destroy text editor */
destroy(): void;
}
interface Events {
/** Event will be triggered when editor value has been changed. As an argument event handler receives editor instance and value */
change: (editor: TextEditor, value: string) => void;
/** Event will be triggered on editor's content "input" event. As an argument event handler receives editor instance */
input: (editor: TextEditor) => void;
/** Event will be triggered on editor's content focus. As an argument event handler receives editor instance */
focus: (editor: TextEditor) => void;
/** Event will be triggered on editor's content blur. As an argument event handler receives editor instance */
blur: (editor: TextEditor) => void;
/** Event will be triggered on editor button click. As an argument event handler receives editor instance and name of the clicked button, e.g. "bold" */
buttonClick: (editor: TextEditor, button: string) => void;
/** Event will be triggered when editor keyboard toolbar appears. As an argument event handler receives editor instance */
keyboardOpen: (editor: TextEditor) => void;
/** Event will be triggered when editor keyboard toolbar disappears. As an argument event handler receives editor instance */
keyboardClose: (editor: TextEditor) => void;
/** Event will be triggered on editor popover open. As an argument event handler receives editor instance */
popoverOpen: (editor: TextEditor) => void;
/** Event will be triggered on editor popover close. As an argument event handler receives editor instance */
popoverClose: (editor: TextEditor) => void;
/** Event will be triggered on editor init */
init: (editor: TextEditor) => void;
/** Event will be triggered right before Text Editor instance will be destroyed. As an argument event handler receives Text Editor instance */
beforeDestroy: (editor: TextEditor) => void;
/** Event will be triggered on link insert, as second argument it receives user-specified link URL (href) */
insertLink: (editor: TextEditor, url: string) => void;
/** Event will be triggered on image insert, as second argument it receives user-specified image source URL (href) */
insertImage: (editor: TextEditor, url: string) => void;
}
interface DomEvents {
/** Event will be triggered when editor value has been changed. */
'texteditor:change': () => void;
/** Event will be triggered on editor's content "input" event. */
'texteditor:input': () => void;
/** Event will be triggered on editor's content focus.*/
'texteditor:focus': () => void;
/** Event will be triggered on editor's content blur.*/
'texteditor:blur': () => void;
/** Event will be triggered on editor button click. */
'texteditor:buttonclick': () => void;
/** Event will be triggered when editor keyboard toolbar appears.*/
'texteditor:keyboardopen': () => void;
/** Event will be triggered when editor keyboard toolbar disappears.*/
'texteditor:keyboardclose': () => void;
/** Event will be triggered on editor popover open.*/
'texteditor:popoveropen': () => void;
/** Event will be triggered on editor popover close.*/
'texteditor:popoverclose': () => void;
/** Event will be triggered on editor init */
'texteditor:init': () => void;
/** Event will be triggered right before Text Editor instance will be destroyed.*/
'texteditor:beforedestroy': () => void;
/** Event will be triggered on link insert, as second argument it receives user-specified link URL (href) */
'texteditor:insertlink': (editor: TextEditor, url: string) => void;
/** Event will be triggered on image insert, as second argument it receives user-specified image source URL (href) */
'texteditor:insertimage': (editor: TextEditor, url: string) => void;
}
interface AppMethods {
textEditor: {
/** create Text Editor instance */
create(parameters: Parameters): TextEditor;
/** get Text Editor instance by HTML element */
get(el: HTMLElement | CSSSelector | TextEditor): TextEditor;
/** destroy Text Editor instance */
destroy(el: HTMLElement | CSSSelector | TextEditor): void;
};
}
interface AppParams {
textEditor?: Parameters | undefined;
}
interface AppEvents {
/** Event will be triggered when editor value has been changed. As an argument event handler receives editor instance and value */
textEditorChange: (editor: TextEditor, value: string) => void;
/** Event will be triggered on editor's content "input" event. As an argument event handler receives editor instance */
textEditorInput: (editor: TextEditor) => void;
/** Event will be triggered on editor's content focus. As an argument event handler receives editor instance */
textEditorFocus: (editor: TextEditor) => void;
/** Event will be triggered on editor's content blur. As an argument event handler receives editor instance */
textEditorBlur: (editor: TextEditor) => void;
/** Event will be triggered on editor button click. As an argument event handler receives editor instance and name of the clicked button, e.g. "bold" */
textEditorButtonClick: (editor: TextEditor, button: string) => void;
/** Event will be triggered when editor keyboard toolbar appears. As an argument event handler receives editor instance */
textEditorKeyboardOpen: (editor: TextEditor) => void;
/** Event will be triggered when editor keyboard toolbar disappears. As an argument event handler receives editor instance */
textEditorKeyboardClose: (editor: TextEditor) => void;
/** Event will be triggered on editor popover open. As an argument event handler receives editor instance */
textEditorPopoverOpen: (editor: TextEditor) => void;
/** Event will be triggered on editor popover close. As an argument event handler receives editor instance */
textEditorPopoverClose: (editor: TextEditor) => void;
/** Event will be triggered on editor init */
textEditorInit: (editor: TextEditor) => void;
/** Event will be triggered right before Text Editor instance will be destroyed. As an argument event handler receives Text Editor instance */
textEditorBeforeDestroy: (editor: TextEditor) => void;
/** Event will be triggered on link insert, as second argument it receives user-specified link URL (href) */
textEditorInsertLink: (editor: TextEditor, url: string) => void;
/** Event will be triggered on image insert, as second argument it receives user-specified image source URL (href) */
textEditorInsertImage: (editor: TextEditor, url: string) => void;
}
}
declare const TextEditorComponent: Framework7Plugin;
export default TextEditorComponent;