Skip to content

Commit

Permalink
Adding Typescript Definitions (#429)
Browse files Browse the repository at this point in the history
  • Loading branch information
rlingineni authored May 5, 2022
1 parent ab133ba commit bffbb31
Show file tree
Hide file tree
Showing 2 changed files with 116 additions and 0 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"license": "MIT",
"main": "dist/draftail.cjs.js",
"module": "dist/draftail.esm.js",
"types": "./types/draftail.d.ts",
"keywords": [
"draftjs",
"draft.js",
Expand Down
115 changes: 115 additions & 0 deletions types/draftail.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
declare module 'draftail' {
import { EditorState, RawDraftContentState } from 'draft-js';
import * as React from 'react';

export interface DrafTailEditorProps {
// Initial content of the editor. Use this to edit pre-existing content.
rawContentState: RawDraftContentState | null;
// Called when changes occured. Use this to persist editor content.
onSave: (rawContent: RawDraftContentState | null) => void;
// Content of the editor; when using the editor as a controlled component. Incompatible with `rawContentState` and `onSave`.
editorState: EditorState;
// Called whenever the editor state is updated. Use this to manage the content of a controlled editor. Incompatible with `rawContentState` and `onSave`.
onChange: (editorState: EditorState) => void;
// Called when the editor receives focus.
onFocus: () => {};
// Called when the editor loses focus.
onBlur: () => {};
// Displayed when the editor is empty. Hidden if the user changes styling.
placeholder: string;
// Enable the use of horizontal rules in the editor.
enableHorizontalRule: boolean;
// Enable the use of line breaks in the editor.
enableLineBreak: boolean;
// Show undo control in the toolbar.
showUndoControl: boolean;
// Show redo control in the toolbar.
showRedoControl: boolean;
// Disable copy/paste of rich text in the editor.
stripPastedStyles: boolean;
// Set whether spellcheck is turned on for your editor.
// See https://draftjs.org/docs/api-reference-editor.html#spellcheck.
spellCheck: boolean;
// Set whether the editor should be rendered in readOnly mode.
// See https://draftjs.org/docs/api-reference-editor.html#readonly
readOnly: boolean;
// Optionally set the overriding text alignment for this editor.
// See https://draftjs.org/docs/api-reference-editor.html#textalignment.
textAlignment: 'left' | 'center' | 'right';
// Optionally set the overriding text directionality for this editor.
// See https://draftjs.org/docs/api-reference-editor.html#textdirectionality.
textDirectionality: 'left' | 'center' | 'right';
// Set if auto capitalization is turned on and how it behaves.
// See https://draftjs.org/docs/api-reference-editor.html#autocapitalize-string.
autoCapitalize: boolean;
// Set if auto complete is turned on and how it behaves.
// See https://draftjs.org/docs/api-reference-editor.html#autocomplete-string.
autoComplete: boolean;
// Set if auto correct is turned on and how it behaves.
// See https://draftjs.org/docs/api-reference-editor.html#autocorrect-string.
autoCorrect: boolean;
// See https://draftjs.org/docs/api-reference-editor.html#aria-props.
ariaDescribedBy: null;
// List of the available block types.
blockTypes: any[];
// List of the available inline styles.
inlineStyles: any[];
// List of the available entity types.
entityTypes: any[];
// List of active decorators.
decorators: any[];
// Additional React components to render in the toolbar.
controls: any[];
// List of plugins of the draft-js-plugins architecture.
plugins: any[];
// Optionally override the default Draftail toolbar; removing or replacing it.
topToolbar: Toolbar;
// Optionally add a custom toolbar underneath the editor; e.g. for metrics.
bottomToolbar: Toolbar;
// Max level of nesting for list items. 0 = no nesting. Maximum = 10.
maxListNesting: number;
// Frequency at which to call the save callback (ms).
stateSaveInterval: number;
}

export const BLOCK_TYPE = {
// This is used to represent a normal text block (paragraph).
UNSTYLED: 'unstyled',
HEADER_ONE: 'header-one',
HEADER_TWO: 'header-two',
HEADER_THREE: 'header-three',
HEADER_FOUR: 'header-four',
HEADER_FIVE: 'header-five',
HEADER_SIX: 'header-six',
UNORDERED_LIST_ITEM: 'unordered-list-item',
ORDERED_LIST_ITEM: 'ordered-list-item',
BLOCKQUOTE: 'blockquote',
CODE: 'code-block',
// This represents a "custom" block, not for rich text, with arbitrary content.
ATOMIC: 'atomic',
};
export const ENTITY_TYPE = {
LINK: 'LINK',
IMAGE: 'IMAGE',
HORIZONTAL_RULE: 'HORIZONTAL_RULE',
};

export const INLINE_STYLE = {
BOLD: 'BOLD',
ITALIC: 'ITALIC',
CODE: 'CODE',
UNDERLINE: 'UNDERLINE',
STRIKETHROUGH: 'STRIKETHROUGH',
MARK: 'MARK',
QUOTATION: 'QUOTATION',
SMALL: 'SMALL',
SAMPLE: 'SAMPLE',
INSERT: 'INSERT',
DELETE: 'DELETE',
KEYBOARD: 'KEYBOARD',
SUPERSCRIPT: 'SUPERSCRIPT',
SUBSCRIPT: 'SUBSCRIPT',
};

export class DraftailEditor extends React.PureComponent<Partial<DrafTailEditorProps>> {}
}

0 comments on commit bffbb31

Please sign in to comment.