cedit/dist/index.d.ts

📝 A simple way to edit content in react.

import styleInject from '../node_modules/style-inject/dist/style-inject.es.js';
import React$1 from 'react';

var css_248z = ".top-start{align-items:flex-start;justify-content:flex-start}.top-start div{text-align:left}.top-center{align-items:center;justify-content:flex-start}.top-center div{text-align:center}.top-center div:empty{text-align:left}.top-end{align-items:flex-end;justify-content:flex-start}.top-end div{text-align:right}.middle-start{align-items:flex-start;justify-content:center}.middle-start div{text-align:left}.middle-center{align-items:center;justify-content:center}.middle-center div{text-align:center}.middle-center div:empty{text-align:left}.middle-end{align-items:flex-end;justify-content:center}.middle-end div{text-align:right}.bottom-start{align-items:flex-start;justify-content:flex-end}.bottom-start div{text-align:left}.bottom-center{align-items:center;justify-content:flex-end}.bottom-center div{text-align:center}.bottom-center div:empty{text-align:left}.bottom-end{align-items:flex-end;justify-content:flex-end}.bottom-end div{text-align:right}.cedit{border:1.5px solid #e5e5ea;border-radius:4px;box-sizing:border-box;display:flex;flex-direction:column;min-height:80px;outline:3px solid transparent;padding:2px 4px;transition:.3s}.cedit:hover{border-color:#70a1ff}.cedit:focus-within{border-color:#79a4f3;outline-color:#a6e9ff}.cedit__content{word-wrap:break-word;border:none!important;font-family:Arial,Helvetica,sans-serif;line-height:1.3;outline:none!important;white-space:pre-line;word-break:break-all}.cedit__content:empty:before{background-color:transparent!important;content:attr(placeholder);opacity:.45;position:relative}";
styleInject(css_248z);

declare const PLACEMENT: {
    readonly topStart: "top-start";
    readonly topCenter: "top-center";
    readonly topEnd: "top-end";
    readonly middleStart: "middle-start";
    readonly middleCenter: "middle-center";
    readonly middleEnd: "middle-end";
    readonly bottomStart: "bottom-start";
    readonly bottomCenter: "bottom-center";
    readonly bottomEnd: "bottom-end";
};

declare type Events = {
    key: React.KeyboardEvent<HTMLDivElement>;
    clip: React.ClipboardEvent<HTMLDivElement>;
    form: React.FormEvent<HTMLDivElement>;
    focus: React.FocusEvent<HTMLDivElement>;
};
declare type Maybe<T extends keyof Events> = {
    text: string;
    html: string;
    event: Events[T];
};
declare type CeditProps = {
    id?: string | number;
    value: string;
    spellCheck?: boolean;
    editable?: boolean;
    multiLine?: boolean;
    className?: string;
    placeholder?: string;
    autoFocus?: boolean;
    placement?: keyof typeof PLACEMENT;
    style?: React.CSSProperties;
    onKeyUp?(data: Maybe<'key'>): void;
    onKeyDown?(data: Maybe<'key'>): void;
    onKeyPress?(data: Maybe<'key'>): void;
    onBlur?(data: Maybe<'focus'>): void;
    onFocus?(data: Maybe<'focus'>): void;
    onChange?(data: Maybe<'form'>): void;
    onPaste?(data: Maybe<'clip'>): void;
};

declare const Cedit: React$1.FC<CeditProps>;

declare const CeditProvider: React$1.FC;

export { Cedit, CeditProps, CeditProvider, Maybe };