jodit-react 5.2.40 → 5.3.1

package/examples/app.css

@@ -1,185 +0,0 @@
-html {
-	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-html, body {
-	height: 100%;
-	margin: 0;
-}
-
-body {
-	font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-	font-size: 16px;
-	-webkit-font-smoothing: antialiased;
-	text-rendering: optimizelegibility;
-	line-height: 1.5;
-	font-weight: 300;
-}
-
-body {
-	display: flex;
-	flex-direction: column;
-}
-
-header,
-#main_container {
-	flex: 1 0 auto;
-}
-
-.jodit_wysiwyg {
-	color: #000;
-	padding: 10px;
-	overflow-x: auto;
-	min-height: 40px;
-}
-
-* {
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.table, .p {
-	margin: 0 0 16px 0;
-}
-
-.table {
-	border: 0;
-	border-collapse: collapse;
-	empty-cells: show;
-	max-width: 100%;
-	border-spacing: 0;
-	*border-collapse: collapse;
-}
-
-. table tr {
-	user-select: none;
-	-o-user-select: none;
-	-moz-user-select: none;
-	-khtml-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-}
-
-. table td, . table th {
-	user-select: text;
-	-o-user-select: text;
-	-moz-user-select: text;
-	-khtml-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-}
-
-. table th, . table td {
-	box-sizing: border-box;
-	padding: 2px 5px;
-	vertical-align: top;
-}
-
-.table td, . table th {
-	border: 1px solid #ddd;
-}
-
-.container {
-	width: 1000px;
-	margin: 0 auto;
-}
-
-nav {
-	height: 30px;
-	background: linear-gradient(to left, #28a5f5, #1e87f0);
-	padding: 0;
-	overflow: hidden;
-}
-
-footer nav {
-	background: #f9f9f9;
-	margin-top: 20px;
-}
-
-nav > ul {
-	padding: 0;
-	margin: 0;
-}
-
-nav > ul > li {
-	list-style: none;
-	display: inline-block;
-	padding: 0;
-	margin: 0;
-}
-
-nav > ul > li + li {
-	margin-left: 23px;
-}
-
-nav ul li a {
-	color: #ddd;
-	text-decoration: none;
-	text-transform: uppercase;
-	font-size: 0.625rem;
-	line-height: 30px;
-}
-
-nav ul li a:hover {
-	color: #aaa;
-	text-decoration: underline;
-}
-
-footer nav ul li a {
-	color: #3f3f3f;
-}
-
-nav ul li ul {
-	position: absolute;
-	margin: 0;
-	padding: 0;
-	background-color: #208bf1;
-	display: none;
-}
-
-nav > ul > li:hover > ul {
-	display: block;
-}
-
-nav ul li ul li {
-	list-style: none;
-	display: block;
-	padding: 0;
-	margin: 0;
-}
-
-nav ul li ul li a {
-	padding: 5px;
-}
-
-.layout {
-	display: flex;
-	flex-direction: row;
-}
-
-.layout > * {
-
-}
-
-.leftside {
-	width: 20%;
-	padding: 10px 10px 10px 0;
-}
-
-.rightside {
-	width: 80%;
-	padding: 10px 0 10px 10px;
-
-}
-
-pre {
-	white-space: pre-wrap;
-	background-color: #3f3f3f;
-	color: #fff;
-	padding: 10px;
-}
-
-h1, h2, h3, h4, h5, h6 {
-	font-weight: 500;
-}

package/examples/app.tsx

@@ -1,17 +0,0 @@
-import './app.css';
-
-import React, { StrictMode } from 'react';
-import Form from './components/Form';
-
-// For React < 18
-// import ReactDOM from 'react-dom';
-// ReactDOM.render(<Form />, document.getElementById('editor'));
-
-import { createRoot } from 'react-dom/client';
-const container = document.getElementById('editor')!;
-const root = createRoot(container);
-root.render(
-	<StrictMode>
-		<Form />
-	</StrictMode>
-);

package/examples/components/Form.css

@@ -1,5 +0,0 @@
-.simple-textarea {
-	display: block;
-	width: 100%;
-	min-height: 100px;
-}

package/examples/components/Form.tsx

@@ -1,148 +0,0 @@
-import React, { type ChangeEvent, useCallback, useState } from 'react';
-
-import JoditEditor, { Jodit } from '../../src/';
-import './Form.css';
-import type { IJodit } from 'jodit/types/types/jodit';
-
-/**
- * @param {Jodit} jodit
- */
-function preparePaste(jodit: IJodit) {
-	jodit.e.on(
-		'paste',
-		e => {
-			if (confirm('Change pasted content?')) {
-				jodit.e.stopPropagation('paste');
-				jodit.s.insertHTML(
-					Jodit.modules.Helpers.getDataTransfer(e)!
-						.getData(Jodit.constants.TEXT_HTML)
-						?.replace(/a/g, 'b') ?? ''
-				);
-				return false;
-			}
-		},
-		{ top: true }
-	);
-}
-Jodit.plugins.add('preparePaste', preparePaste);
-
-const Form = () => {
-	const [isSource, setSource] = useState(false);
-
-	const [config, setConfig] = useState({
-		toolbarAdaptive: false,
-		readonly: false,
-		toolbar: true
-	});
-
-	const [textAreaValue, setTextAreaValue] = useState('Test');
-
-	const [inputValue, setInputValue] = useState('');
-
-	const [spin, setSpin] = useState(1);
-
-	const toggleToolbar = useCallback(
-		() =>
-			setConfig(config => ({
-				...config,
-				toolbar: !config.toolbar
-			})),
-		[]
-	);
-
-	const toggleReadOnly = useCallback(
-		() =>
-			setConfig(config => ({
-				...config,
-				readonly: !config.readonly
-			})),
-		[]
-	);
-
-	const handleBlurAreaChange = useCallback(
-		(textAreaValue: string, event: MouseEvent) => {
-			console.log('handleBlurAreaChange', textAreaValue, event);
-		},
-		[]
-	);
-
-	const handleWYSIWYGChange = useCallback((newTextAreaValue: string) => {
-		console.log('handleWYSIWYGChange', newTextAreaValue);
-
-		setTextAreaValue(newTextAreaValue);
-		setInputValue(newTextAreaValue);
-
-		return setTextAreaValue(() => newTextAreaValue);
-	}, []);
-
-	const handleNativeTextAreaChange = useCallback((e: ChangeEvent) => {
-		const value = (e.target as HTMLTextAreaElement).value;
-		console.log('handleNativeTextAreaChange', value);
-		setTextAreaValue(value);
-		setInputValue(value);
-	}, []);
-
-	const handleInputChange = useCallback(
-		(e: ChangeEvent) => {
-			const { value } = e.target as HTMLInputElement;
-			setInputValue(value);
-			handleWYSIWYGChange(value);
-		},
-		[handleWYSIWYGChange]
-	);
-
-	const handleSpin = useCallback(() => setSpin(spin => ++spin), []);
-
-	const onSourceChange = useCallback((e: ChangeEvent) => {
-		setSource((e.target as HTMLInputElement).checked);
-	}, []);
-
-	return (
-		<div>
-			<label>
-				<input
-					type="checkbox"
-					onChange={onSourceChange}
-					checked={isSource}
-				/>{' '}
-				Source
-			</label>
-
-			{!isSource ? (
-				<JoditEditor
-					config={config}
-					onChange={handleWYSIWYGChange}
-					onBlur={handleBlurAreaChange}
-					value={textAreaValue}
-				/>
-			) : (
-				<textarea
-					className={'simple-textarea'}
-					onChange={handleNativeTextAreaChange}
-					value={textAreaValue}
-				/>
-			)}
-
-			<input
-				onChange={handleInputChange}
-				placeholder={'enter some text'}
-				type={'text'}
-				value={inputValue}
-			/>
-
-			<button onClick={toggleReadOnly} type={'button'}>
-				{'Toggle Read-Only'}
-			</button>
-
-			<button onClick={toggleToolbar} type={'button'}>
-				{'Toggle Toolbar'}
-			</button>
-
-			<button type={'button'} onClick={handleSpin}>
-				{`Spin ${spin}`}
-			</button>
-		</div>
-	);
-};
-
-export default Form;

package/examples/index.html

@@ -1,66 +0,0 @@
-<!doctype html>
-<!--
- * Jodit Editor (https://xdsoft.net/jodit/)
- * License https://xdsoft.net/jodit/license.html
- * Copyright 2013-2018 Valeriy Chupurnov https://xdsoft.net
--->
-<html lang="en">
-<head>
-	<meta charset="UTF-8"/>
-	<meta name="viewport"
-				content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
-	<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-	<title>Jodit React Example</title>
-</head>
-<body>
-<header>
-	<nav>
-		<ul class="container">
-			<li><a href="https://xdsoft.net/jodit/">Jodit homepage</a></li>
-			<li><a href="https://xdsoft.net/jodit/docs/">Documentation</a></li>
-			<li><a href="https://github.com/xdan/jodit/">Github</a></li>
-			<li><a href="https://github.com/xdan/jodit/releases">Changelog</a></li>
-			<li style="float:right"><a href="https://github.com/xdan/jodit/releases/latest">Download</a></li>
-		</ul>
-	</nav>
-</header>
-<div id="main_container" class="container">
-	<div id="introduction">
-		<h3>JavaScript</h3>
-		<pre>
-import './app.css';
-
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-
-import JoditEditor from "../src/JoditEditor";
-
-const container = document.getElementById('editor')!;
-const root = createRoot(container);
-root.render(
-	&lt;StrictMode&gt;
-		&lt;Form /&gt;
-	&lt;/StrictMode&gt;
-);
-        </pre>
-	</div>
-	<div class="result">
-		<div id="editor"></div>
-	</div>
-</div>
-<footer>
-	<nav>
-		<ul class="container">
-			<li><a href="https://xdsoft.net/jodit/">Jodit homepage</a></li>
-			<li><a href="https://xdsoft.net/jodit/docs/">Documentation</a></li>
-			<li><a href="https://github.com/xdan/jodit/">Github</a></li>
-			<li><a href="https://github.com/xdan/jodit/releases">Changelog</a></li>
-			<li style="float:right"><a href="https://github.com/xdan/jodit/releases/latest">Download</a></li>
-		</ul>
-	</nav>
-</footer>
-</body>
-<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,700,700i" rel="stylesheet">
-
-<script src="build/app.js"></script>
-</html>

package/index.d.ts

@@ -1,4 +0,0 @@
-import JoditEditor from './build/types/JoditEditor';
-import { Jodit } from './build/types/include.jodit';
-export default JoditEditor;
-export { Jodit };

package/src/JoditEditor.tsx

@@ -1,165 +0,0 @@
-import React, { useEffect, useRef, forwardRef } from 'react';
-import type { IJodit } from 'jodit/esm/types/jodit';
-import type { Jodit as JoditBaseConstructor } from 'jodit/esm/index';
-import type { Config } from 'jodit/esm/config';
-import { Jodit } from './include.jodit';
-import type { DeepPartial } from 'jodit/esm/types';
-
-function usePrevious(value: string): string {
-	const ref = useRef<string>('');
-	useEffect(() => {
-		ref.current = value;
-	}, [value]);
-	return ref.current;
-}
-
-interface Props<T extends typeof JoditBaseConstructor = 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);
-
-		useEffect(() => {
-			const element = textAreaRef.current!;
-			const jodit = JoditConstructor.make(element, config);
-			joditRef.current = jodit;
-
-			if (typeof editorRef === 'function') {
-				editorRef(jodit);
-			}
-
-			return () => {
-				if (jodit.isReady) {
-					jodit.destruct();
-				} else {
-					jodit
-						.waitForReady()
-						.then(joditInstance => joditInstance.destruct());
-				}
-			};
-		}, [JoditConstructor, config, editorRef]);
-
-		useEffect(() => {
-			if (ref) {
-				if (typeof ref === 'function') {
-					ref(joditRef.current);
-				} else {
-					ref.current = joditRef.current;
-				}
-			}
-		}, [textAreaRef, ref, joditRef]);
-
-		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;

package/src/include.jodit.ts

@@ -1,7 +0,0 @@
-import { Jodit as JoditES5 } from 'jodit/esm/index';
-import type { Jodit as JoditConstructorType } from 'jodit/esm/jodit';
-import 'jodit/es2021/jodit.min.css';
-
-import 'jodit/esm/plugins/all';
-
-export const Jodit: typeof JoditConstructorType = JoditES5;

package/src/index.ts

@@ -1,5 +0,0 @@
-import JoditEditor from './JoditEditor';
-import { Jodit } from './include.jodit';
-
-export default JoditEditor;
-export { Jodit };

package/tsconfig.json

@@ -1,20 +0,0 @@
-{
-	"compilerOptions": {
-		"target": "es2015",
-		"module": "ESNext",
-		"outDir": "./build",
-		"declaration": true,
-		"declarationDir": "./build/types",
-		"strict": true,
-		"skipLibCheck": true,
-		"esModuleInterop": true,
-    "moduleDetection": "force",
-    "allowJs": true,
-    "noUncheckedIndexedAccess": true,
-    "allowSyntheticDefaultImports": true,
-		"forceConsistentCasingInFileNames": true,
-		"jsx": "react-jsx",
-		"moduleResolution": "node",
-		"noImplicitAny": true
-	}
-}