Skip to content

Commit 27505b4

Browse files
BackendExpertBackendExpert
authored
Merge pull request #1 from TeamProjectsReact/v101
V101
2 parents 79e1a68 + 0ebb107 commit 27505b4

File tree

3 files changed

+135
-46
lines changed

3 files changed

+135
-46
lines changed

‎Editor/Editor.jsx‎

Lines changed: 20 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,8 @@
11
import React, { useRef, useState } from 'react'
22

3-
const Editor = () => {
4-
const [inputText, setInputText] = useState('');
5-
const [outputText, setOutputText] = useState('');
3+
const Editor = ({ dataValue, OutputTest }) => {
64
const textareaRef = useRef(null);
75

8-
const handlePreview = () => {
9-
setOutputText(inputText);
10-
};
11-
126
// headle the bold
137
const handleBold = () => {
148
const textarea = textareaRef.current; // get the current selected area in textarea
@@ -17,14 +11,15 @@ const Editor = () => {
1711

1812
if (start === end) return; // No text is selected
1913

20-
const before = inputText.substring(0, start); // get the before string in selection start
21-
const selected = inputText.substring(start, end); // get the selected text
22-
const after = inputText.substring(end); // last sting of the selection
14+
const before = dataValue.substring(0, start); // get the before string in selection start
15+
const selected = dataValue.substring(start, end); // get the selected text
16+
const after = dataValue.substring(end); // last sting of the selection
2317

2418
const newText = `${before}**${selected}**${after}`; // ** use this for bold text
25-
setInputText(newText);
19+
OutputTest(newText);
2620
};
2721

22+
2823
// headle the handleItalic
2924
const handleItalic = () => {
3025
const textarea = textareaRef.current; // get the current selected area in textarea
@@ -33,12 +28,12 @@ const Editor = () => {
3328

3429
if (start === end) return; // No text is selected
3530

36-
const before = inputText.substring(0, start); // get the before string in selection start
37-
const selected = inputText.substring(start, end); // get the selected text
38-
const after = inputText.substring(end); // last sting of the selection
31+
const before = dataValue.substring(0, start); // get the before string in selection start
32+
const selected = dataValue.substring(start, end); // get the selected text
33+
const after = dataValue.substring(end); // last sting of the selection
3934

4035
const newText = `${before}<i>${selected}</i>${after}`; // ** use this for bold text
41-
setInputText(newText);
36+
OutputTest(newText);
4237
};
4338

4439

@@ -50,31 +45,31 @@ const Editor = () => {
5045

5146
if (start === end) return; // No text is selected
5247

53-
const before = inputText.substring(0, start); // get the before string in selection start
54-
const selected = inputText.substring(start, end); // get the selected text
55-
const after = inputText.substring(end); // last sting of the selection
48+
const before = dataValue.substring(0, start); // get the before string in selection start
49+
const selected = dataValue.substring(start, end); // get the selected text
50+
const after = dataValue.substring(end); // last sting of the selection
5651

5752
const newText = `${before}<u>${selected}</u>${after}`; // ** use this for bold text
58-
setInputText(newText);
53+
OutputTest(newText);
5954
};
6055

6156

6257
return (
63-
<div className="min-h-screen bg-gray-100 p-4">
58+
<div className="h-auto bg-gray-100 p-4">
6459
<div className="flex mb-4">
65-
<button
60+
<button type='button'
6661
className="p-2 bg-green-500 text-white font-semibold rounded-md shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500"
6762
onClick={handleBold}
6863
>
6964
Bold
7065
</button>
71-
<button
66+
<button type='button'
7267
className="mx-4 p-2 bg-green-500 text-white font-semibold rounded-md shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500"
7368
onClick={handleItalic}
7469
>
7570
Italic
7671
</button>
77-
<button
72+
<button type='button'
7873
className="mx-4 p-2 bg-green-500 text-white font-semibold rounded-md shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500"
7974
onClick={handleUnderLine}
8075
>
@@ -86,18 +81,9 @@ const Editor = () => {
8681
className="w-full p-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 mb-2"
8782
rows="20"
8883
placeholder="Type something here..."
89-
value={inputText}
90-
onChange={(e) => setInputText(e.target.value)}
84+
value={dataValue}
85+
onChange={(e) => OutputTest(e.target.value)}
9186
></textarea>
92-
<button
93-
className="p-2 mb-4 bg-blue-500 text-white font-semibold rounded-md shadow-sm hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 mr-2"
94-
onClick={handlePreview}
95-
>
96-
Preview
97-
</button>
98-
<div className="w-full p-2 bg-white border border-gray-300 rounded-md shadow-sm">
99-
<div className="whitespace-pre-wrap" dangerouslySetInnerHTML={{ __html: outputText.replace(/\*\*(.*?)\*\*/g, '<b>$1</b>') }}></div>
100-
</div>
10187
</div>
10288
)
10389
}

‎README.md‎

Lines changed: 114 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -29,25 +29,120 @@ import {Editor} from 'js-wysiwyg-editor'
2929
- - Now set the place that you want to use this packge
3030

3131
``` jsx
32-
<div>
33-
<Editor />
34-
</div>
32+
import React, { useState } from 'react'
33+
import { Editor } from 'js-wysiwyg-editor'
34+
const TestingPack = () => {
35+
36+
const [text, setText] = useState('');
37+
38+
return (
39+
<div className='my-8 mx-12'>
40+
<div className="">
41+
<Editor dataValue={text} OutputTest={setText}/>
42+
</div>
43+
<div className="w-full p-2 bg-white border border-gray-300 rounded-md shadow-sm">
44+
<div dangerouslySetInnerHTML={{ __html: text.replace(/\*\*(.*?)\*\*/g, '<b>$1</b>') }} />
45+
</div>
46+
</div>
47+
)
48+
}
49+
50+
export default TestingPack
3551

3652
```
3753

3854
- if you are using this with forms
39-
- change as following
55+
- follow the following exmple
4056

4157
``` jsx
42-
<div>
43-
<Editor onChange={} value={}/>
44-
</div>
58+
import React, { useEffect, useState } from 'react'
59+
import { Editor } from 'js-wysiwyg-editor'
60+
import axios from 'axios'
61+
62+
const TestingPack = () => {
63+
// send backend
64+
const [EditorData, SetEditorData] = useState({
65+
title: '',
66+
})
67+
68+
const [text, setText] = useState('');
69+
70+
// headleSubmit
71+
72+
const headleSubmit = async (e) => {
73+
e.preventDefault()
74+
75+
try{
76+
const res = await axios.post('http://localhost:8081/AddEditorData', {EditorData, text})
77+
.then(res => {
78+
if(res.data.Status === "Success"){
79+
alert("Editor Data Added Successful")
80+
window.location.reload()
81+
}
82+
else{
83+
alert(res.data.Error)
84+
}
85+
})
86+
}
87+
catch (err) {
88+
console.log(err)
89+
}
90+
}
91+
92+
const [GetData, SetGetData] = useState([])
93+
94+
useEffect(() => {
95+
axios.get('http://localhost:8081/DisplayData')
96+
.then(res => SetGetData(res.data.Result))
97+
.catch(err => console.log(err))
98+
}, [])
99+
100+
101+
102+
return (
103+
<div className='my-8 mx-12'>
104+
<form onSubmit={headleSubmit}>
105+
<input type="text" name="" id="" className='h-12 bg-gray-200 rounded'
106+
onChange={e => SetEditorData({...EditorData, title:e.target.value})}/>
107+
108+
109+
<div className="">
110+
<Editor dataValue={text} OutputTest={setText}/>
111+
</div>
112+
113+
114+
<button type="submit" className="py-2 px-8 bg-blue-500 text-white rounded">Submit</button>
115+
</form>
116+
117+
118+
<div className="w-full p-2 bg-white border border-gray-300 rounded-md shadow-sm">
119+
<div dangerouslySetInnerHTML={{ __html: text.replace(/\*\*(.*?)\*\*/g, '<b>$1</b>') }} />
120+
</div>
121+
122+
<div className="my-8">
123+
<div className="bg-gray-200 rounded py-2 px4">
124+
{
125+
GetData.map((Data, index) => {
126+
return (
127+
<div className="">
128+
<h1 className="">{Data.editor_title}</h1>
129+
<p className="">
130+
<div dangerouslySetInnerHTML={{ __html: Data.editor_data.replace(/\*\*(.*?)\*\*/g, '<b>$1</b>') }} />
131+
</p>
132+
</div>
133+
)
134+
})
135+
}
136+
</div>
137+
</div>
138+
</div>
139+
)
140+
}
141+
142+
export default TestingPack
45143

46144
```
47145

48-
- set the `onChange={}` and ` value={}` according to your need
49-
50-
51146
## Releases
52147

53148
### v1.0.0 - 30 May 2024
@@ -58,14 +153,22 @@ import {Editor} from 'js-wysiwyg-editor'
58153
- - italic
59154
- - underLine
60155

156+
### v1.0.1 - 31 May 2024
157+
158+
- 2nd Version
159+
- Updating errors
160+
- - fixing editor data sending to backend
161+
162+
61163

62164

63165

64166
## Releases History
65167

66168
| Version | Release Date |
67169
|------|-----|
68-
| v1.0.0 | 30 May - 2024|
170+
| v1.0.0 | 30 May 2024|
171+
| v1.0.1 | 31 May 2024|
69172

70173

71174
## Developers and Designers

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "js-wysiwyg-editor",
3-
"version": "1.0.0",
3+
"version": "1.0.1",
44
"description": "wysiwyg Editor for ReactJS",
55
"main": "index.js",
66
"scripts": {

0 commit comments

Comments
 (0)