This library was generated with Nx.
Video Demo: https://s11.gifyu.com/images/SW2R8.gif
import {RichTextInput} from '@tonz/react-draft-wysiwyg-input'
import '@tonz/react-draft-wysiwyg-input/style.css';
You can import css from @tonz/react-draft-wysiwyg-input/style.css
or from react-draft-wysiwyg/dist/react-draft-wysiwyg.css
When you using react-draft-wysiwyg
in your form, you cannot handle it as uncontrolled input.
With react-hook-form
, you only using react-draft-wysiwyg
with Controller because react-draft-wysiwyg
have properties is difference primitive input props {value, onChange, onBlur, name, ref}
This libray port react-draft-wysiwyg
to the interface similar with primitive input with {value, onChange, onBlur, name, ref}
Therefore, we can using it as uncontrolled input
import {RichTextInput} from '@tonz/react-draft-wysiwyg-input'
import '@tonz/react-draft-wysiwyg-input/style.css';
<RichTextInput disabled={disabled} {...register('desc')} />
"use client";
import { classValidatorResolver } from '@hookform/resolvers/class-validator';
import { useForm } from "react-hook-form";
import { RichTextInput } from '@tonz/react-draft-wysiwyg-input';
import '@tonz/react-draft-wysiwyg-input/style.css';
....
const resolver = classValidatorResolver(SignupFormModel);
export default function SignupForm() {
const router = useRouter();
const {
register,
handleSubmit,
formState: { errors },
} = useForm<SignupFormModel>({ resolver });
const { data: successData, isFetching, callApi } = useCallApiLazy({
fn: async (data: SignupFormModel) => {
const response = await fetch('/api/user/register', {
method: 'POST',
body: JSON.stringify({
username: data.username,
password: data.password,
})
});
return response;
},
onSuccess: () => {
toast('Register success', {
type: 'success', onClose: () => {
router.push('/api/auth/signin');
},
autoClose: 2000,
});
},
onError: (error) => {
toast(error || 'Register fail', { type: 'error' });
}
})
const submitForm = useCallback(async (data: SignupFormModel) => {
console.log('>>>>>>> data:', data);
}, []);
const disabled = isFetching || !!successData;
return (
<div className="flex items-center justify-center w-full">
<form
onSubmit={handleSubmit(submitForm)}
className="px-8 pt-6 pb-8 mb-4 bg-white rounded-md shadow-md w-96"
>
<div className="mb-4">
<Label className="block mb-2 ">Username</Label>
<Input disabled={disabled} className="w-full" placeholder="Username" {...register('username')} />
{errors.username && <ErrorHint data-testid="usernameError">{errors.username.message}</ErrorHint>}
</div>
...
<div className="mb-6">
<Label className="block mb-2 ">Desc</Label>
<RichTextInput disabled={disabled} {...register('desc')} />
{errors.desc && <ErrorHint data-testid="confirmPasswordError">{errors.desc.message}</ErrorHint>}
</div>
<div className="flex items-center space-x-2">
<PrimaryButton disabled={disabled} loading={isFetching} type="submit">Signup</PrimaryButton>
<SecondaryButton disabled={disabled}>Cancel</SecondaryButton>
</div>
</form>
</div>
);
}
import {
RichTextIsNotEmpty,
ContentHtmlMinLength,
ContentHtmlMaxLength,
} from '@tonz/react-draft-wysiwyg-input/validators';
Using for check should not empty value
Using for check minLength of value (process include convert value to html string, then check min length of html string)
Using for check maxLength of value (process include convert value to html string, then check max length of html string)
import { Length, IsNotEmpty } from 'class-validator';
import { Match } from '../validator';
import {
RichTextIsNotEmpty,
ContentHtmlMinLength,
ContentHtmlMaxLength,
} from '@tonz/react-draft-wysiwyg-input/validators';
class SignupFormModel {
@Length(4, 30)
@IsNotEmpty()
username: string;
@Length(6, 30)
@IsNotEmpty()
password: string;
@Length(6, 30)
@IsNotEmpty()
@Match('password')
confirmPassword: RawDraftContentState;
@RichTextIsNotEmpty()
@ContentHtmlMinLength(30)
@ContentHtmlMaxLength(60)
desc: RawDraftContentState;
}
Generate empty data for input with type RawDraftContentState (https://github.com/facebookarchive/draft-js/blob/main/src/model/encoding/RawDraftContentState.js)
import { genEmptyContent } from '@tonz/react-draft-wysiwyg-input/utils'
const initContent = genEmptyContent()
Convert value from RawDraftContentState to html string;
import { valueToHtml } from '@tonz/react-draft-wysiwyg-input/utils'
const htmlStr = valueToHtml()
You can read code in this library, and you can port any complex component in React-Select, Antd, MUI to uncontrolled component like primitive input.