react-smart-editor
Version:
React rich text editor with track changes functionality
84 lines • 2.31 kB
TypeScript
import { BaseEditor, Descendant } from 'slate';
import { ReactEditor } from 'slate-react';
import { HistoryEditor } from 'slate-history';
export type CustomEditor = BaseEditor & ReactEditor & HistoryEditor;
export type ParagraphElement = {
type: 'paragraph';
children: CustomText[];
};
export type HeadingElement = {
type: 'heading-one' | 'heading-two' | 'heading-three';
children: CustomText[];
};
export type ListItemElement = {
type: 'list-item';
children: CustomText[];
};
export type ListElement = {
type: 'bulleted-list' | 'numbered-list';
children: CustomText[];
};
export type CustomElement = ParagraphElement | HeadingElement | ListElement | ListItemElement;
export type FormattedText = {
text: string;
bold?: boolean;
italic?: boolean;
underline?: boolean;
color?: string;
changeId?: string;
};
export type CustomText = FormattedText;
export type ChangeType = 'insert' | 'delete';
export type ChangeStatus = 'pending' | 'accepted' | 'rejected';
export interface ChangeMetadata {
id: string;
userId: string;
userName: string;
userColor: string;
userRole: 'editor' | 'owner';
date: string;
type: ChangeType;
description: string;
content: string;
status: ChangeStatus;
}
export interface Document {
content: Descendant[];
changes: ChangeMetadata[];
hasOwnerChanges: boolean;
}
export interface User {
id: string;
name: string;
color: string;
role: 'editor' | 'owner';
}
export interface ReactSmartEditorProps {
initialContent: Document;
user: User;
disabled?: boolean;
onChange?: (document: Document) => void;
onAutoSave?: (document: Document) => void;
onApprove?: (changeId: string) => void;
onReject?: (changeId: string) => void;
onFocus?: () => void;
onBlur?: () => void;
formattingToolbarTop?: number;
hideFormattingToolbarActions?: boolean;
autoHeight?: boolean;
showOwnerChanges?: boolean;
}
export interface SerializedDocument {
content: string;
changes: ChangeMetadata[];
version: string;
hasOwnerChanges: boolean;
}
declare module 'slate' {
interface CustomTypes {
Editor: CustomEditor;
Element: CustomElement;
Text: CustomText;
}
}
//# sourceMappingURL=types.d.ts.map