raonkeditor-react
Version:
React component for RAON K Editor
265 lines (264 loc) • 8.5 kB
TypeScript
/**
* @license Copyright (c) 2003-2022, RAONWIZ DevTeam. All rights reserved.
*/
import * as PropTypes from 'prop-types';
import RaonkEditor from './RaonkEditor';
import { events, namespaceEvents } from './events';
/**
* Event names associated with `component` events.
*/
export declare type ComponentEventName = typeof events[number];
/**
* Event names associated with `namespace` events.
*/
export declare type ComponentNamespaceEventName = typeof namespaceEvents[number];
/**
* Combined `component` and `namespace` events.
*/
export declare type ComponentDefaultEvent = ComponentEventName | ComponentNamespaceEventName;
/**
* Payload passed to `component` event handlers.
*/
export interface ComponentEventPayload<EventName> {
/**
* Additional event data.
*/
data?: Record<string, unknown> | null;
/**
* component instance that holds the event sender.
*/
component?: ComponentInstance | null;
/**
* Extra data appended during listener registration.
*/
eventInfo?: any;
/**
* Event name.
*/
name: EventName;
/**
* Object that publishes event.
*/
sender: Record<string, unknown>;
/**
* Cancels event (if cancelable).
*/
cancel?: () => void | null;
/**
* Removes current listener.
*/
removeListener?: () => void | null;
/**
* No listeners will be called afterwards.
*/
stop?: () => void | null;
}
/**
* Signature of `component` event handler.
*/
export declare type ComponentEventHandler<EventName> = (evt: ComponentEventPayload<EventName>) => void;
/**
* Signature of `namespace` event handler.
*/
export declare type ComponentNamespaceHandler = (namespace: ComponentNamespace) => void;
/**
* Component instance.
*/
export declare type ComponentInstance = any;
/**
* Component configuration object.
*/
export declare type ComponentConfig = Record<string, any>;
/**
* Namespace object.
*/
export declare type ComponentNamespace = any;
/**
* `useRaonkEditor` hook arguments.
*/
export interface ComponentHookProps<EventName extends string> {
/**
* Config object passed to component's constructor.
*
* A new instance of component will be created everytime a new instance of `config` is provided.
* If this is not expected behavior then ensure referential equality of `config` between renders.
*/
config?: ComponentConfig | null;
/**
* Toggles debugging. Logs info related to component lifecycle events.
*/
debug?: boolean | null;
/**
* Dispatches `component` / `namespace` events.
*/
dispatchEvent?: ComponentEventDispatcher;
/**
* List of component events that will be dispatched. Omit if all events are to be dispatched.
*/
subscribeTo?: readonly EventName[];
/**
* Url with component's source code.
*/
componentUrl?: string | null;
/**
* DOM element to which component will be bound.
*/
element: HTMLElement | null;
/**
* Initializes component in either `html5` or `agent` mode.
*/
runtimes?: ComponentRuntimes | null;
}
/**
* Arguments passed to event registeration helper.
*/
export interface ComponentRegisterEventArgs<EventName> {
/**
* Toggles debugging. Logs info related to component lifecycle events.
*/
debug?: boolean | null;
/**
* Component instance.
*/
component: ComponentInstance;
/**
* Event handler to register.
*/
handler: ComponentEventHandler<EventName>;
/**
* Component's event name.
*/
evtName: EventName;
/**
* Custom data passed to listener.
*/
eventInfo?: any;
}
export interface ComponentHookResult {
/**
* Instance of component.
*/
component?: ComponentInstance;
/**
* Status of component's instance. Equivalent of `component.status`.
*/
status?: ComponentStatus;
/**
* Indicates if an error occurred. This is a non-recoverable state. Hook must be remounted.
*/
error?: boolean;
/**
* Indicates if loading of RaonkEditor is in progress.
*/
loading?: boolean;
}
/**
* Dispatcher of component events.
*/
export declare type ComponentEventDispatcher = ({ type, payload }: {
type: string;
payload: any;
}) => void;
/**
* Possible types of component.
*/
export declare type ComponentRuntimes = 'html5' | 'agent';
/**
* Possible mode of component.
*/
export declare type ComponentMode = 'edit' | 'view';
/**
* Possible mode of component.
*/
export declare type ComponentReadOnly = true | false;
/**
* Component status.
*/
export declare type ComponentStatus = 'unloaded' | 'loaded' | 'ready' | 'destroyed';
/**
* Props of `RaonkEditor` component.
*
* Some prop types are overriden to provide better typings than `PropTypes.InferProps` has to offer.
*/
export declare type ComponentProps<EventHandlerProp> = PropTypes.InferProps<Omit<typeof RaonkEditor.propTypes, 'config' | keyof ComponentEventHandlerProp>> & {
config?: ComponentConfig | null;
} & Partial<ComponentEventHandlerProp> & EventHandlerProp;
/**
* Event handler props.
*/
export interface ComponentEventHandlerProp {
/**
* Namespace events.
*/
onBeforeLoad: ComponentNamespaceHandler;
onNamespaceLoaded: ComponentNamespaceHandler;
/**
* RAON K Editor events.
*/
onLoaded: ComponentEventHandler<'loaded'>;
onCreationComplete: ComponentEventHandler<'creationComplete'>;
onDestroy: ComponentEventHandler<'destroy'>;
onAfterChangeMode: ComponentEventHandler<'afterChangeMode'>;
onOnError: ComponentEventHandler<'onError'>;
onOnLanguageDefinition: ComponentEventHandler<'onLanguageDefinition'>;
onAfterPopupShow: ComponentEventHandler<'afterPopupShow'>;
onAgentInstall: ComponentEventHandler<'agentInstall'>;
onBeforeInsertUrl: ComponentEventHandler<'beforeInsertUrl'>;
onMouse: ComponentEventHandler<'mouse'>;
onCommand: ComponentEventHandler<'command'>;
onKey: ComponentEventHandler<'key'>;
onResized: ComponentEventHandler<'resized'>;
onDocumentEditComplete: ComponentEventHandler<'documentEditComplete'>;
onPasteImage: ComponentEventHandler<'pasteImage'>;
onWordCount: ComponentEventHandler<'wordCount'>;
onBeforePaste: ComponentEventHandler<'beforePaste'>;
onCustomAction: ComponentEventHandler<'customAction'>;
onFullScreen: ComponentEventHandler<'fullScreen'>;
onSetComplete: ComponentEventHandler<'setComplete'>;
onSetInsertComplete: ComponentEventHandler<'setInsertComplete'>;
onCloseInstallPopup: ComponentEventHandler<'closeInstallPopup'>;
onSetForbiddenWordComplete: ComponentEventHandler<'setForbiddenWordComplete'>;
onDrag: ComponentEventHandler<'drag'>;
onFocus: ComponentEventHandler<'focus'>;
onDialogLoaded: ComponentEventHandler<'dialogLoaded'>;
onBeforeInsertHyperlink: ComponentEventHandler<'beforeInsertHyperlink'>;
}
/**
* Event action types.
*/
export interface ComponentAction {
/**
* Namespace events.
*/
beforeLoad: '__RKE__beforeLoad';
namespaceLoaded: '__RKE__namespaceLoaded';
/**
* RAON K Editor events.
*/
loaded: '__RKE__loaded';
creationComplete: '__RKE__creationComplete';
destroy: '__RKE__destroy';
afterChangeMode: '__RKE__afterChangeMode';
onError: '__RKE__onError';
afterPopupShow: '__RKE__afterPopupShow';
agentInstall: '__RKE__agentInstall';
beforeInsertUrl: '__RKE__beforeInsertUrl';
mouse: '__RKE__mouse';
command: '__RKE__command';
key: '__RKE__key';
resized: '__RKE__resized';
documentEditComplete: '__RKE__documentEditComplete';
pasteImage: '__RKE__pasteImage';
wordCount: '__RKE__wordCount';
beforePaste: '__RKE__beforePaste';
customAction: '__RKE__customAction';
fullScreen: '__RKE__fullScreen';
setComplete: '__RKE__setComplete';
setInsertComplete: '__RKE__setInsertComplete';
setForbiddenWordComplete: '__RKE__setForbiddenWordComplete';
closeInstallPopup: '__RKE__closeInstallPopup';
drag: '__RKE__drag';
focus: '__RKE__focus';
dialogLoaded: '__RKE__dialogLoaded';
beforeInsertHyperlink: '__RKE__beforeInsertHyperlink';
}