inital commit

node_modules/jodit-react/examples/app.css

@@ -0,0 +1,185 @@
+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;
+}

node_modules/jodit-react/examples/app.tsx

@@ -0,0 +1,17 @@
+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>
+);

node_modules/jodit-react/examples/components/Form.css

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

node_modules/jodit-react/examples/components/Form.tsx

@@ -0,0 +1,148 @@
+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;

node_modules/jodit-react/examples/index.html

@@ -0,0 +1,66 @@
+<!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>