Skip to content

Commit 48d75ee

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 07-01-2025 7:30:29 PM
1 parent 52d268d commit 48d75ee

File tree

15 files changed

+436
-44
lines changed

15 files changed

+436
-44
lines changed

‎ej2-react-toc.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2427,6 +2427,7 @@
24272427
</li>
24282428
<li><a href="/ej2-react/rich-text-editor/link">Link Manipulation</a></li>
24292429
<li><a href="/ej2-react/rich-text-editor/table">Table Manipulation</a></li>
2430+
<li><a href="/ej2-react/rich-text-editor/code-block">Code Block</a></li>
24302431
<li><a href="/ej2-react/rich-text-editor/paste-cleanup">Paste Clean-up</a></li>
24312432
<li><a href="/ej2-react/rich-text-editor/enter-key-configuration">Enter Key Configuration</a></li>
24322433
<li><a href="/ej2-react/rich-text-editor/undo-redo">Undo and Redo</a></li>

‎ej2-react/code-snippet/image-editor/default-cs62/app/app.jsx

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,7 @@ import './index.css';
77

88
export default class App extends React.Component {
99
imgObj;
10-
state = {
11-
isTextInserted: false
12-
};
10+
isTextInserted = false;
1311
imageEditorCreated() {
1412
if (Browser.isDevice) {
1513
this.imgObj.open('https://ej2.syncfusion.com/react/documentation/image-editor/images/flower.jpeg');
@@ -20,8 +18,8 @@ export default class App extends React.Component {
2018
}
2119

2220
addText() {
23-
if (!this.state.isTextInserted) {
24-
this.setState({ isTextInserted: true });
21+
if (!this.isTextInserted) {
22+
this.isTextInserted = true;
2523
let dimension = this.imgObj.getImageDimension();
2624
this.imgObj.drawText(dimension.x, dimension.y, 'Syncfusion');
2725
}
@@ -30,7 +28,7 @@ export default class App extends React.Component {
3028
bold() {
3129
const shapes = this.imgObj.getShapeSettings();
3230
if (shapes && shapes[0]) {
33-
if (shapes[0].fontStyle?.includes('bold')) {
31+
if (shapes[0].fontStyle.includes('bold')) {
3432
shapes[0].fontStyle = shapes[0].fontStyle.filter(item => item !== 'bold');
3533
} else {
3634
shapes[0].fontStyle.push('bold');
@@ -42,7 +40,7 @@ export default class App extends React.Component {
4240
italic() {
4341
const shapes = this.imgObj.getShapeSettings();
4442
if (shapes && shapes[0]) {
45-
if (shapes[0].fontStyle?.includes('italic')) {
43+
if (shapes[0].fontStyle.includes('italic')) {
4644
shapes[0].fontStyle = shapes[0].fontStyle.filter(item => item !== 'italic');
4745
} else {
4846
shapes[0].fontStyle.push('italic');
@@ -54,7 +52,7 @@ export default class App extends React.Component {
5452
underline() {
5553
const shapes = this.imgObj.getShapeSettings();
5654
if (shapes && shapes[0]) {
57-
if (shapes[0].fontStyle?.includes('underline')) {
55+
if (shapes[0].fontStyle.includes('underline')) {
5856
shapes[0].fontStyle = shapes[0].fontStyle.filter(item => item !== 'underline');
5957
} else {
6058
shapes[0].fontStyle.push('underline');
@@ -66,7 +64,7 @@ export default class App extends React.Component {
6664
strikethrough() {
6765
const shapes = this.imgObj.getShapeSettings();
6866
if (shapes && shapes[0]) {
69-
if (shapes[0].fontStyle?.includes('strikethrough')) {
67+
if (shapes[0].fontStyle.includes('strikethrough')) {
7068
shapes[0].fontStyle = shapes[0].fontStyle.filter(item => item !== 'strikethrough');
7169
} else {
7270
shapes[0].fontStyle.push('strikethrough');
@@ -78,24 +76,24 @@ export default class App extends React.Component {
7876
render() {
7977
return (
8078
<div className='e-img-editor-sample'><ImageEditorComponent ref={(img) => { this.imgObj = img; }} height="350px" width="550px" showQuickAccessToolbar={false} created={this.imageEditorCreated.bind(this)} toolbar={[]} />
81-
<div class="button-group" >
82-
<button id="text" disabled={this.state.isTextInserted} class="e-btn e-primary" onClick={this.addText.bind(this)} >Add Text</button>
83-
<div class="e-btn-group">
79+
<div className="button-group" >
80+
<button id="text" disabled={this.isTextInserted} className="e-btn e-primary" onClick={this.addText.bind(this)} >Add Text</button>
81+
<div className="e-btn-group">
8482
<input type="checkbox" id="bold" value="bold" onClick={this.bold.bind(this)} />
85-
<label class="e-btn" for="bold">
86-
<span class="e-icons e-bold"></span>Bold
83+
<label className="e-btn" for="bold">
84+
<span className="e-icons e-bold"></span>Bold
8785
</label>
8886
<input type="checkbox" id="italic" value="italic" onClick={this.italic.bind(this)} />
89-
<label class="e-btn" for="italic">
90-
<span class="e-icons e-italic"></span>Italic
87+
<label className="e-btn" for="italic">
88+
<span className="e-icons e-italic"></span>Italic
9189
</label>
9290
<input type="checkbox" id="underline" value="underline" onClick={this.underline.bind(this)} />
93-
<label class="e-btn" for="underline">
94-
<span class="e-icons e-underline"></span>Underline
91+
<label className="e-btn" for="underline">
92+
<span className="e-icons e-underline"></span>Underline
9593
</label>
9694
<input type="checkbox" id="strikethrough" value="strikethrough" onClick={this.strikethrough.bind(this)} />
97-
<label class="e-btn" for="strikethrough">
98-
<span class="e-icons e-strikethrough"></span>Strikethrough
95+
<label className="e-btn" for="strikethrough">
96+
<span className="e-icons e-strikethrough"></span>Strikethrough
9997
</label>
10098
</div>
10199
</div>

‎ej2-react/code-snippet/image-editor/default-cs62/app/app.tsx

Lines changed: 23 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,8 @@ import './index.css';
77

88
function App() {
99
let imgObj: ImageEditorComponent;
10-
let state: any = {
11-
isTextInserted: false
12-
};
10+
let isTextInserted: boolean = false;
11+
1312
function imageEditorCreated(): void {
1413
if (Browser.isDevice) {
1514
imgObj.open('https://ej2.syncfusion.com/react/documentation/image-editor/images/flower.jpeg');
@@ -19,8 +18,8 @@ function App() {
1918
}
2019

2120
function addText(): void {
22-
if (!state.isTextInserted) {
23-
this.setState({ isTextInserted: true });
21+
if (!isTextInserted) {
22+
isTextInserted = true;
2423
let dimension: any = imgObj.getImageDimension();
2524
imgObj.drawText(dimension.x, dimension.y, 'Syncfusion');
2625
}
@@ -29,8 +28,8 @@ function App() {
2928
function bold(): void {
3029
const shapes: any = imgObj.getShapeSettings();
3130
if (shapes && shapes[0]) {
32-
if (shapes[0].fontStyle?.includes('bold')) {
33-
shapes[0].fontStyle = shapes[0].fontStyle.filter(item => item !== 'bold');
31+
if (shapes[0].fontStyle.includes('bold')) {
32+
shapes[0].fontStyle = shapes[0].fontStyle.filter((item: string) => item !== 'bold');
3433
} else {
3534
shapes[0].fontStyle.push('bold');
3635
}
@@ -41,8 +40,8 @@ function App() {
4140
function italic(): void {
4241
const shapes: any = imgObj.getShapeSettings();
4342
if (shapes && shapes[0]) {
44-
if (shapes[0].fontStyle?.includes('italic')) {
45-
shapes[0].fontStyle = shapes[0].fontStyle.filter(item => item !== 'italic');
43+
if (shapes[0].fontStyle.includes('italic')) {
44+
shapes[0].fontStyle = shapes[0].fontStyle.filter((item: string) => item !== 'italic');
4645
} else {
4746
shapes[0].fontStyle.push('italic');
4847
}
@@ -53,8 +52,8 @@ function App() {
5352
function underline(): void {
5453
const shapes: any = imgObj.getShapeSettings();
5554
if (shapes && shapes[0]) {
56-
if (shapes[0].fontStyle?.includes('underline')) {
57-
shapes[0].fontStyle = shapes[0].fontStyle.filter(item => item !== 'underline');
55+
if (shapes[0].fontStyle.includes('underline')) {
56+
shapes[0].fontStyle = shapes[0].fontStyle.filter((item: string) => item !== 'underline');
5857
} else {
5958
shapes[0].fontStyle.push('underline');
6059
}
@@ -65,8 +64,8 @@ function App() {
6564
function strikethrough(): void {
6665
const shapes: any = imgObj.getShapeSettings();
6766
if (shapes && shapes[0]) {
68-
if (shapes[0].fontStyle?.includes('strikethrough')) {
69-
shapes[0].fontStyle = shapes[0].fontStyle.filter(item => item !== 'strikethrough');
67+
if (shapes[0].fontStyle.includes('strikethrough')) {
68+
shapes[0].fontStyle = shapes[0].fontStyle.filter((item: string) => item !== 'strikethrough');
7069
} else {
7170
shapes[0].fontStyle.push('strikethrough');
7271
}
@@ -76,24 +75,24 @@ function App() {
7675

7776
return (
7877
<div className='e-img-editor-sample'><ImageEditorComponent ref={(img) => { imgObj = img; }} height="350px" width="550px" showQuickAccessToolbar={false} created={imageEditorCreated} toolbar={[]} />
79-
<div class="button-group" >
80-
<button id="text" disabled={state.isTextInserted} class="e-btn e-primary" onClick={addText} >Add Text</button>
81-
<div class="e-btn-group">
78+
<div className="button-group" >
79+
<button id="text" disabled={isTextInserted} className="e-btn e-primary" onClick={addText} >Add Text</button>
80+
<div className="e-btn-group">
8281
<input type="checkbox" id="bold" value="bold" onClick={bold} />
83-
<label class="e-btn" for="bold">
84-
<span class="e-icons e-bold"></span>Bold
82+
<label className="e-btn" for="bold">
83+
<span className="e-icons e-bold"></span>Bold
8584
</label>
8685
<input type="checkbox" id="italic" value="italic" onClick={italic} />
87-
<label class="e-btn" for="italic">
88-
<span class="e-icons e-italic"></span>Italic
86+
<label className="e-btn" for="italic">
87+
<span className="e-icons e-italic"></span>Italic
8988
</label>
9089
<input type="checkbox" id="underline" value="underline" onClick={underline} />
91-
<label class="e-btn" for="underline">
92-
<span class="e-icons e-underline"></span>Underline
90+
<label className="e-btn" for="underline">
91+
<span className="e-icons e-underline"></span>Underline
9392
</label>
9493
<input type="checkbox" id="strikethrough" value="strikethrough" onClick={strikethrough} />
95-
<label class="e-btn" for="strikethrough">
96-
<span class="e-icons e-strikethrough"></span>Strikethrough
94+
<label className="e-btn" for="strikethrough">
95+
<span className="e-icons e-strikethrough"></span>Strikethrough
9796
</label>
9897
</div>
9998
</div>

‎ej2-react/code-snippet/image-editor/default-cs63/systemjs.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ System.config({
3434
"@syncfusion/ej2-image-editor": "syncfusion:ej2-image-editor/dist/ej2-image-editor.umd.min.js",
3535
"@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
3636
"@syncfusion/ej2-react-image-editor": "syncfusion:ej2-react-image-editor/dist/ej2-react-image-editor.umd.min.js",
37+
"@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
3738
"react-dom": "https://unpkg.com/react-dom@15.5.4/dist/react-dom.min.js",
3839
"react": "https://unpkg.com/react@15.5.4/dist/react.min.js",
3940

‎ej2-react/code-snippet/rich-text-editor/code-block-cs1/app/App.jsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Table, Toolbar, CodeBlock } from '@syncfusion/ej2-react-richtexteditor';
2+
import * as React from 'react';
3+
4+
class App extends React.Component {
5+
toolbarSettings = {
6+
items: ['Undo', 'Redo', '|', 'CodeBlock', '|', 'Bold', 'Italic', 'Underline', 'StrikeThrough', 'InlineCode', '|', 'CreateLink', 'Image', 'CreateTable', 'Blockquote', '|', 'BulletFormatList', 'NumberFormatList', '|', 'Formats', 'Alignments', '|', 'Outdent', 'Indent', '|',
7+
'FontColor', 'BackgroundColor', 'FontName', 'FontSize', '|', 'LowerCase', 'UpperCase', '|', 'EmojiPicker', '|', 'SourceCode']
8+
};
9+
codeBlockSettings = {
10+
languages: [
11+
{ label: "HTML", language: "html" },
12+
{ label: "JavaScript", language: "javascript" },
13+
{ label: "CSS", language: "css" },
14+
{ label: "Plain Text", language: "plaintext" }
15+
],
16+
defaultLanguage: "plaintext"
17+
};
18+
placeholder = 'Type something...';
19+
20+
render() {
21+
return (<RichTextEditorComponent height={450} toolbarSettings={this.toolbarSettings} codeBlockSettings={this.codeBlockSettings} placeholder={this.placeholder}>
22+
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, Table, CodeBlock]}/>
23+
</RichTextEditorComponent>);
24+
}
25+
}
26+
export default App;

‎ej2-react/code-snippet/rich-text-editor/code-block-cs1/app/App.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Table, Toolbar, CodeBlock} from '@syncfusion/ej2-react-richtexteditor';
2+
import * as React from 'react';
3+
4+
class App extends React.Component<{},{}> {
5+
private toolbarSettings: object = {
6+
items: ['Undo', 'Redo', '|', 'CodeBlock', '|', 'Bold', 'Italic', 'Underline', 'StrikeThrough', 'InlineCode', '|', 'CreateLink', 'Image', 'CreateTable', 'Blockquote', '|', 'BulletFormatList', 'NumberFormatList', '|', 'Formats', 'Alignments', '|', 'Outdent', 'Indent', '|',
7+
'FontColor', 'BackgroundColor', 'FontName', 'FontSize', '|', 'LowerCase', 'UpperCase', '|', 'EmojiPicker', '|', 'SourceCode']
8+
};
9+
private codeBlockSettings: object = {
10+
languages: [
11+
{ label: "HTML", language: "html" },
12+
{ label: "JavaScript", language: "javascript" },
13+
{ label: "CSS", language: "css" },
14+
{ label: "Plain Text", language: "plaintext" }
15+
],
16+
defaultLanguage: "plaintext"
17+
};
18+
private placeholder = 'Type something...';
19+
20+
public render() {
21+
return (
22+
<RichTextEditorComponent height={450} toolbarSettings={this.toolbarSettings} codeBlockSettings={this.codeBlockSettings} placeholder={this.placeholder}>
23+
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, Table, CodeBlock]} />
24+
</RichTextEditorComponent>
25+
);
26+
}
27+
}
28+
29+
export default App;

‎ej2-react/code-snippet/rich-text-editor/code-block-cs1/app/index.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import * as React from 'react';
2+
import * as ReactDOM from 'react-dom';
3+
import App from './App';
4+
5+
ReactDOM.render(<App />, document.getElementById('sample'));

‎ej2-react/code-snippet/rich-text-editor/code-block-cs1/index.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title> Syncfusion React Rich Text Editor </title>
6+
<meta charset="utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<meta name="description" content="Essential JS 2 for React Components" />
9+
<meta name="author" content="Syncfusion" />
10+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
11+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-icons/styles/material.css" rel="stylesheet" />
12+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
13+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
14+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
15+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/material.css" rel="stylesheet" />
16+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
17+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
18+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
19+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-richtexteditor/styles/material.css" rel="stylesheet" />
20+
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
21+
<script src="systemjs.config.js"></script>
22+
<style>
23+
#loader {
24+
color: #008cff;
25+
height: 40px;
26+
left: 45%;
27+
position: absolute;
28+
top: 45%;
29+
width: 30%;
30+
}
31+
</style>
32+
</head>
33+
34+
<body>
35+
<div id='sample' style="margin: 20px auto 0;">
36+
<div id='loader'>Loading....</div>
37+
</div>
38+
</body>
39+
40+
</html>

‎ej2-react/code-snippet/rich-text-editor/code-block-cs1/systemjs.config.js

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
System.config({
2+
transpiler: "ts",
3+
typescriptOptions: {
4+
target: "es5",
5+
module: "commonjs",
6+
moduleResolution: "node",
7+
emitDecoratorMetadata: true,
8+
experimentalDecorators: true,
9+
"jsx": "react"
10+
},
11+
meta: {
12+
'typescript': {
13+
"exports": "ts"
14+
}
15+
},
16+
paths: {
17+
"syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
18+
},
19+
map: {
20+
app: 'app',
21+
ts: "https://unpkg.com/plugin-typescript@8.0.0/lib/plugin.js",
22+
typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
23+
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
24+
"@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
25+
"@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
26+
"@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
27+
"@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
28+
"@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
29+
"@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
30+
"@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
31+
"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
32+
"@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
33+
"@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
34+
"@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
35+
"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
36+
"@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
37+
"@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
38+
"@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
39+
"@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
40+
"@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
41+
"@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
42+
43+
"@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
44+
"@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
45+
"@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
46+
"@syncfusion/ej2-react-richtexteditor": "syncfusion:ej2-react-richtexteditor/dist/ej2-react-richtexteditor.umd.min.js",
47+
"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
48+
"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
49+
},
50+
packages: {
51+
'app': { main: 'index', defaultExtension: 'tsx' },
52+
}
53+
54+
});
55+
56+
System.import('app');

0 commit comments

Comments
 (0)