react-hook-quill
Version:
React Hook Quill is a lightweight wrapper for Quill, the rich text editor that does not interfere with the design of either React or Quill.
86 lines (85 loc) • 4.01 kB
TypeScript
import Quill, { Delta, QuillOptions } from 'quill';
import { RefObject } from 'react';
export interface SafeQuillOptions<ModuleOption> extends QuillOptions {
modules?: Record<string, ModuleOption>;
}
export type Setting<ModuleOption = unknown> = {
/**
* A div element to attach a Quill Editor to
*/
containerRef: RefObject<HTMLDivElement | null>;
/**
* Options for initializing a Quill instance
* See: https://quilljs.com/docs/configuration#options
*/
options?: SafeQuillOptions<ModuleOption>;
/**
* This function is executed only once when Quill is mounted.
* A common use case is setting up synchronization of the Delta stored on the React side when the Quill side changes.
* You can read or write a ref object inside.
*/
setup?: (quill: Quill) => void;
/**
* This function is executed only once when Quill is unmounted.
* You can read or write a ref object inside.
*/
cleanup?: (quill: Quill) => void;
};
interface UseQuill {
setting: Setting;
}
/**
* A lightweight wrapper for using Quill with Hooks.
*
* ----
* Quill is used as an external system because it modifies HTML elements outside of the React lifecycle.
*
* Note that the returned value, which refers to the Quill object, is instantiated **in** the effect lifecycle.
*
* ----
* This hook's responsibilities are as follows.
* - Initialize Quill in the effect lifecycle and return a reference.
* In some cases, you need to setup via `setting.setup` to sync the Delta stored on the React side when the Quill side changes.
* - In the same way as `useEffect` behaves, it *always* cleans up Quill, including all edits, when the React component that holds it is unmounted.
*
* @param useQuillParam Parameters for initializing Quill.
* @param useQuillParam.setting Settings for setup and cleanup functions, and more.
* @returns A ref to the Quill instance. See the pitfall of [useRef](https://react.dev/reference/react/useRef) before using this value.
*/
export declare const useQuill: ({ setting }: UseQuill) => import("react").MutableRefObject<Quill | null>;
/**
* This hook prevents tracking of user edits on the React side but retains changes on the Quill side even when the parent component re-renders.
*
* @param setting Settings for setup and cleanup functions, and more.
* @param [initialDelta] an initial value of `Delta`
* @returns obj
* @returns obj.persistentDeltaSetting the new setting, which is composed of the setting passing by
* @returns obj.updateSetting the function for updating settings
*/
export declare const usePersistentDelta: (setting: Setting, initialDelta?: Delta) => {
persistentDeltaSetting: Setting<unknown>;
updateSetting: (setting: Setting) => void;
};
/**
*
* This hook automatically sets up the state of Delta with React.
*
* Note that you may not really need to sync Delta with React in your application. Syncing Delta triggers a re-render with every user's edit and it may become an overhead in some cases.
*
* @param setting Settings for setup and cleanup functions, and more.
* @param [initialDelta] an initial value of `Delta`
* @returns obj
* @returns obj.delta A state of Delta on the React side. User edits are automatically synced.
* @returns obj.setDelta Minor use cases. Note that it changes the state of Delta only on the React side. Use syncDelta if you update both sides.
* @returns obj.syncDelta Change the Delta both on the React and Quill sides at once.
* @returns obj.syncDeltaSetting the new setting, which is composed of the setting passing by
* @returns obj.updateSetting the function for updating settings
*/
export declare const useSyncDelta: (setting: Setting, initialDelta?: Delta) => {
delta: Delta;
setDelta: import("react").Dispatch<import("react").SetStateAction<Delta>>;
syncDelta: (quill: Quill | null, delta: Delta) => void;
syncDeltaSetting: Setting<unknown>;
updateSetting: (setting: Setting) => void;
};
export {};