- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 | 1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x - - - - - - -1x -1x -1x -1x -1x -1x -1x -1x - - -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x - - - - - -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x - - - - - - - - - - - - - - - - - - -1x -1x -1x -1x -1x -1x -1x - - -1x -1x -1x -1x -1x -1x - - -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x - | import React, { useEffect, useRef, forwardRef, useLayoutEffect } from 'react';
-import type { IJodit } from 'jodit/types/types/jodit';
-import type { Jodit as JoditConstructorType } from 'jodit';
-import type { Config } from 'jodit/config';
-import { Jodit } from './include.jodit';
-
-function usePrevious(value: string): string {
- const ref = useRef<string>('');
- useEffect(() => {
- ref.current = value;
- }, [value]);
- return ref.current;
-}
-
-type DeepPartial<T> = T extends object
- ? {
- [P in keyof T]?: DeepPartial<T[P]>;
- }
- : T;
-
-interface Props<T extends typeof JoditConstructorType = typeof Jodit> {
- JoditConstructor?: T;
- config?: DeepPartial<Config>;
- className?: string;
- id?: string;
- name?: string;
- onBlur?: (value: string, event: MouseEvent) => void;
- onChange?: (value: string) => void;
- tabIndex?: number;
- value?: string;
- editorRef?: (editor: IJodit) => void;
-}
-
-const JoditEditor = forwardRef<IJodit, Props>(
- (
- {
- JoditConstructor = Jodit,
- className,
- config,
- id,
- name,
- onBlur,
- onChange,
- tabIndex,
- value,
- editorRef
- },
- ref
- ) => {
- const textAreaRef = useRef<HTMLTextAreaElement | null>(null);
- const joditRef = useRef<IJodit | null>(null);
-
- useLayoutEffect(() => {
- if (ref) {
- if (typeof ref === 'function') {
- ref(joditRef.current);
- } else {
- ref.current = joditRef.current;
- }
- }
- }, [textAreaRef, ref]);
-
- useEffect(() => {
- const element = textAreaRef.current!;
- const jodit = JoditConstructor.make(element, config);
- joditRef.current = jodit;
-
- if (typeof editorRef === 'function') {
- editorRef(jodit);
- }
-
- return () => {
- if (jodit) {
- jodit.destruct();
- }
- };
- }, [JoditConstructor, config, editorRef]);
-
- const preClassName = usePrevious(className ?? '');
-
- useEffect(() => {
- const classList = joditRef.current?.container?.classList;
-
- if (
- preClassName !== className &&
- typeof preClassName === 'string'
- ) {
- preClassName
- .split(/\s+/)
- .filter(Boolean)
- .forEach(cl => classList?.remove(cl));
- }
-
- if (className && typeof className === 'string') {
- className
- .split(/\s+/)
- .filter(Boolean)
- .forEach(cl => classList?.add(cl));
- }
- }, [className, preClassName]);
-
- useEffect(() => {
- if (joditRef.current?.workplace) {
- joditRef.current.workplace.tabIndex = tabIndex || -1;
- }
- }, [tabIndex]);
-
- useEffect(() => {
- const jodit = joditRef.current;
- if (!jodit?.events || !(onBlur || onChange)) {
- return;
- }
-
- const onBlurHandler = (event: MouseEvent) =>
- onBlur && onBlur(joditRef?.current?.value ?? '', event);
-
- const onChangeHandler = (value: string) =>
- onChange && onChange(value);
-
- // adding event handlers
- jodit.events
- .on('blur', onBlurHandler)
- .on('change', onChangeHandler);
-
- return () => {
- // Remove event handlers
- jodit.events
- ?.off('blur', onBlurHandler)
- .off('change', onChangeHandler);
- };
- }, [onBlur, onChange]);
-
- useEffect(() => {
- const jodit = joditRef.current;
-
- const updateValue = () => {
- if (jodit && value !== undefined && jodit.value !== value) {
- jodit.value = value;
- }
- };
-
- if (jodit) {
- if (jodit.isReady) {
- updateValue();
- } else {
- jodit.waitForReady().then(updateValue);
- }
- }
- }, [value]);
-
- return (
- <div className={'jodit-react-container'}>
- <textarea
- defaultValue={value}
- name={name}
- id={id}
- ref={textAreaRef}
- />
- </div>
- );
- }
-);
-
-JoditEditor.displayName = 'JoditEditor';
-
-export default JoditEditor;
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 | 1x -1x -1x -1x -1x -1x -1x - | // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore - Jodit Editor (https://xdsoft.net/jodit/)
-import { Jodit as JoditES5 } from 'jodit/es5/jodit.fat.min';
-import type { Jodit as JoditConstructorType } from 'jodit';
-import 'jodit/es5/jodit.min.css';
-
-export const Jodit: typeof JoditConstructorType = JoditES5;
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| JoditEditor.tsx | -
-
- |
- 78.91% | -131/166 | -45.83% | -11/24 | -50% | -2/4 | -78.91% | -131/166 | -
| include.jodit.ts | -
-
- |
- 100% | -7/7 | -100% | -0/0 | -100% | -0/0 | -100% | -7/7 | -
| index.ts | -
-
- |
- 100% | -5/5 | -100% | -0/0 | -0% | -0/1 | -100% | -5/5 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 | 1x -1x -1x -1x -1x - | import JoditEditor from './JoditEditor';
-import { Jodit } from './include.jodit';
-
-export default JoditEditor;
-export { Jodit };
- |
+ Hello, world! +
++ Hello, world! +
+Hello, World!
'; + render(Hello, World!
'; + const stamp = render( +Hello!
'; + stamp.rerender(