Skip to content

Commit 215fcf0

Browse files
MohanaselvamJothiMohanaselvamJothi
authored
Merge pull request #2607 from syncfusion-content/822330-Preview-sample
822330: Resolved script error in react preview
2 parents 80d99b0 + 4256913 commit 215fcf0

5 files changed

Lines changed: 41 additions & 54 deletions

File tree

‎Document-Processing/code-snippet/document-editor/react/base-cs2/app/index.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { createRoot } from 'react-dom/client';
21
import * as React from 'react';
2+
import { createRoot } from 'react-dom/client';
33
import { DocumentEditorComponent, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog } from '@syncfusion/ej2-react-documenteditor';
44
DocumentEditorComponent.Inject(Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog);
55
function Default() {
66
return (<DocumentEditorComponent id="container" height={'330px'} serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" isReadOnly={false} enablePrint={true} enableSelection={true} enableEditor={true} enableEditorHistory={true} enableContextMenu={true} enableSearch={true} enableOptionsPane={true} enableBookmarkDialog={true} enableBordersAndShadingDialog={true} enableFontDialog={true} enableTableDialog={true} enableParagraphDialog={true} enableHyperlinkDialog={true} enableImageResizer={true} enableListDialog={true} enablePageSetupDialog={true} enableSfdtExport={true} enableStyleDialog={true} enableTableOfContentsDialog={true} enableTableOptionsDialog={true} enableTablePropertiesDialog={true} enableTextExport={true} enableWordExport={true}/>);
77
}
88
export default Default;
9-
const root = ReactDOM.createRoot(document.getElementById('sample'));
9+
const root = createRoot(document.getElementById('sample'));
1010
root.render(<Default />);

‎Document-Processing/code-snippet/document-editor/react/base-cs2/app/index.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import { createRoot } from 'react-dom/client';
21
import * as React from 'react';
3-
2+
import { createRoot } from 'react-dom/client';
43
import {
54
DocumentEditorComponent, DocumentEditor, RequestNavigateEventArgs, ViewChangeEventArgs,
65
Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory,
@@ -24,7 +23,7 @@ function Default() {
2423
);
2524
}
2625
export default Default
27-
const root = ReactDOM.createRoot(document.getElementById('sample'));
26+
const root = createRoot(document.getElementById('sample'));
2827
root.render(<Default />);
2928

3029

‎Document-Processing/code-snippet/document-editor/react/base-cs3/app/index.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { createRoot } from 'react-dom/client';
21
import * as React from 'react';
2+
import { createRoot } from 'react-dom/client';
33
import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor';
44
DocumentEditorContainerComponent.Inject(Toolbar);
55
function Default() {
66
return (<DocumentEditorContainerComponent id="container" height={'590px'} serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" enableToolbar={true}/>);
77
}
88
export default Default;
9-
const root = ReactDOM.createRoot(document.getElementById('sample'));
9+
const root = createRoot(document.getElementById('sample'));
1010
root.render(<Default />);

‎Document-Processing/code-snippet/document-editor/react/base-cs3/app/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { createRoot } from 'react-dom/client';
21
import * as React from 'react';
2+
import { createRoot } from 'react-dom/client';
33
import {
44
DocumentEditorContainerComponent, Toolbar
55
} from '@syncfusion/ej2-react-documenteditor';
@@ -10,7 +10,7 @@ function Default() {
1010
<DocumentEditorContainerComponent id="container" height={'590px'} serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" enableToolbar={true} />);
1111
}
1212
export default Default
13-
const root = ReactDOM.createRoot(document.getElementById('sample'));
13+
const root = createRoot(document.getElementById('sample'));
1414
root.render(<Default />);
1515

1616

‎Document-Processing/code-snippet/document-editor/react/scrolling-zooming-cs3/app/index.tsx‎

Lines changed: 33 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ import {
3131
StylesDialog,
3232
} from '@syncfusion/ej2-react-documenteditor';
3333
import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';
34-
3534
DocumentEditorComponent.Inject(
3635
Print,
3736
SfdtExport,
@@ -60,16 +59,14 @@ DocumentEditorComponent.Inject(
6059
CellOptionsDialog,
6160
StylesDialog
6261
);
63-
6462
function App() {
65-
const documentEditorRef: DocumentEditorComponent = React.useRef(null);
66-
const pageCountRef:any = React.useRef(null);
67-
const editablePageNumberRef: any = React.useRef(null);
68-
const pageNumberLabelRef: any = React.useRef(null);
69-
const zoomRef: any = React.useRef(null);
63+
const documentEditorRef = React.useRef<DocumentEditorComponent | null>(null);
64+
const pageCountRef = React.useRef<HTMLLabelElement | null>(null);
65+
const editablePageNumberRef = React.useRef<HTMLDivElement | null>(null);
66+
const pageNumberLabelRef = React.useRef<HTMLLabelElement | null>(null);
67+
const zoomRef = React.useRef<DropDownButtonComponent | null>(null);
7068
let startPage = 1;
71-
let editorPageCount: any;
72-
69+
let editorPageCount: number;
7370
const items: ItemModel[] = [
7471
{ text: '200%' },
7572
{ text: '175%' },
@@ -83,29 +80,24 @@ function App() {
8380
{ text: 'Fit one page' },
8481
{ text: 'Fit page width' },
8582
];
86-
8783
React.useEffect(() => {
8884
const documenteditor = documentEditorRef.current;
89-
9085
if (documenteditor) {
91-
documenteditor.viewChange = (e) => updatePageNumberOnViewChange(e);
86+
documenteditor.viewChange = (e: any) => updatePageNumberOnViewChange(e);
9287
documenteditor.contentChange = () => updatePageCount();
93-
9488
if (editablePageNumberRef.current) {
9589
editablePageNumberRef.current.onclick = () => updateDocumentEditorPageNumber();
96-
editablePageNumberRef.current.onkeydown = (e) => onKeyDown(e);
90+
editablePageNumberRef.current.onkeydown = (e: any) => onKeyDown(e);
9791
editablePageNumberRef.current.onblur = () => onBlur();
9892
}
99-
10093
updatePageCount();
10194
updatePageNumber();
10295
}
10396
}, []);
104-
10597
function updatePageNumberOnViewChange(args: any) {
10698
const documenteditor = documentEditorRef.current;
10799
if (
108-
documenteditor?.selection &&
100+
documenteditor && documenteditor.selection &&
109101
documenteditor.selection.startPage >= args.startPage &&
110102
documenteditor.selection.startPage <= args.endPage
111103
) {
@@ -115,93 +107,93 @@ function App() {
115107
}
116108
updatePageNumber();
117109
}
118-
110+
119111
function onBlur() {
120112
const editablePageNumber = editablePageNumberRef.current;
121113
if (
122-
editablePageNumber?.textContent === '' ||
123-
parseInt(editablePageNumber.textContent, 0) > editorPageCount
114+
editablePageNumber &&
115+
(
116+
editablePageNumber.textContent === '' ||
117+
parseInt(editablePageNumber.textContent || '0', 10) > editorPageCount
118+
)
124119
) {
125120
updatePageNumber();
126121
}
127-
if (editablePageNumber) editablePageNumber.contentEditable = 'false';
122+
if (editablePageNumber) {
123+
editablePageNumber.contentEditable = 'false';
124+
}
128125
}
129126

130127
function onKeyDown(e: any) {
131128
const documenteditor = documentEditorRef.current;
132129
const editablePageNumber = editablePageNumberRef.current;
133130
if (e.which === 13) {
134131
e.preventDefault();
135-
const pageNumber = parseInt(editablePageNumber?.textContent || '0', 0);
132+
const pageNumber = parseInt(editablePageNumber ? (editablePageNumber.textContent || '0') : '0', 0);
136133
if (pageNumber > editorPageCount) {
137134
updatePageNumber();
138135
} else {
139-
if (documenteditor?.selection) {
136+
if (documenteditor && documenteditor.selection) {
140137
documenteditor.selection.goToPage(pageNumber);
141138
} else {
142-
documenteditor?.scrollToPage(pageNumber);
139+
if (documenteditor) { documenteditor.scrollToPage(pageNumber); }
143140
}
144141
}
145142
if (editablePageNumber) editablePageNumber.contentEditable = 'false';
146-
if (editablePageNumber?.textContent === '') {
143+
if (editablePageNumber && editablePageNumber.textContent === '') {
147144
updatePageNumber();
148145
}
149146
}
150147
if (e.which > 64) {
151148
e.preventDefault();
152149
}
153150
}
154-
155151
function onZoom(args: any) {
156152
setZoomValue(args.item.text);
157153
updateZoomContent();
158154
}
159-
160155
function setZoomValue(text: string) {
161156
const documenteditor = documentEditorRef.current;
162157
if (text.match('Fit one page')) {
163-
documenteditor?.fitPage('FitOnePage');
158+
if (documenteditor) { documenteditor.fitPage('FitOnePage'); }
164159
} else if (text.match('Fit page width')) {
165-
documenteditor?.fitPage('FitPageWidth');
166-
} else {
160+
if (documenteditor) { documenteditor.fitPage('FitPageWidth'); }
161+
} else if (documenteditor) {
167162
documenteditor.zoomFactor = parseInt(text, 0) / 100;
168163
}
169164
}
170-
171165
function updateZoomContent() {
172-
if (zoomRef.current) {
173-
zoomRef.current.content = Math.round(documentEditorRef.current?.zoomFactor * 100) + '%';
166+
if (zoomRef.current && documentEditorRef.current) {
167+
zoomRef.current.content =
168+
Math.round(documentEditorRef.current.zoomFactor * 100) + '%';
174169
}
175170
}
176-
177171
function updatePageNumber() {
178172
if (pageNumberLabelRef.current) {
179173
pageNumberLabelRef.current.textContent = startPage.toString();
180174
}
181175
}
182-
183176
function updatePageCount() {
184177
const documenteditor = documentEditorRef.current;
185-
editorPageCount = documenteditor?.pageCount || 0;
178+
editorPageCount = documenteditor ? documenteditor.pageCount : 0;
186179
if (pageCountRef.current) {
187180
pageCountRef.current.textContent = editorPageCount.toString();
188181
}
189182
}
190-
191183
function updateDocumentEditorPageNumber() {
192184
const editPageNumber = editablePageNumberRef.current;
193185
if (editPageNumber) {
194186
editPageNumber.contentEditable = 'true';
195187
editPageNumber.focus();
196-
window.getSelection()?.selectAllChildren(editPageNumber);
188+
const selection = window.getSelection();
189+
if (selection) { selection.selectAllChildren(editPageNumber); }
197190
}
198191
}
199-
200192
return (
201193
<div>
202194
<DocumentEditorComponent
203195
id="container"
204-
height={'330px'}
196+
height="330px"
205197
ref={documentEditorRef}
206198
isReadOnly={false}
207199
enablePrint={true}
@@ -229,7 +221,7 @@ function App() {
229221
enableWordExport={true}
230222
/>
231223
<div id="page-fit-type-div">
232-
<label id="page"> Page </label>
224+
<label id="page">Page </label>
233225
<div id="editablePageNumber" ref={editablePageNumberRef}>
234226
<label id="documenteditor_page_no" ref={pageNumberLabelRef} />
235227
</div>
@@ -247,9 +239,5 @@ function App() {
247239
</div>
248240
);
249241
}
250-
251242
export default App;
252-
253243
ReactDOM.render(<App />, document.getElementById('sample'));
254-
255-

0 commit comments

Comments
 (0)