From b971a46d9f764ff36ad6b6e8b129230f6b3fc30c Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Mon, 15 Jul 2024 16:47:44 +0530 Subject: [PATCH] Integrated latest changes at 07-15-2024 4:30:14 PM --- ej2-react-toc.html | 5 + .../accessibility-cs1/app/index.jsx | 29 ++++ .../accessibility-cs1/app/index.tsx | 37 +++++ .../accessibility-cs1/index.css | 9 ++ .../accessibility-cs1/index.html | 56 +++++++ .../accessibility-cs1/systemjs.config.js | 55 +++++++ .../customize-context-menu-cs1/app/index.jsx | 2 +- .../customize-context-menu-cs1/app/index.tsx | 2 +- .../document-editor/link-cs1/app/index.jsx | 6 +- .../document-editor/link-cs1/app/index.tsx | 6 +- .../document-editor/print-cs2/app/index.jsx | 2 +- .../document-editor/ruler-cs1/app/index.jsx | 9 +- .../document-editor/ruler-cs1/app/index.tsx | 9 +- .../scrolling-zooming-cs1/app/index.jsx | 5 +- .../scrolling-zooming-cs1/app/index.tsx | 6 +- .../scrolling-zooming-cs3/app/index.jsx | 108 ++++++------- .../scrolling-zooming-cs3/app/index.tsx | 146 +++++++++++------- ej2-react/document-editor/accessibility.md | 2 +- .../faq/unsupported-file-format.md | 29 ++++ 19 files changed, 385 insertions(+), 138 deletions(-) create mode 100644 ej2-react/code-snippet/document-editor/accessibility-cs1/app/index.jsx create mode 100644 ej2-react/code-snippet/document-editor/accessibility-cs1/app/index.tsx create mode 100644 ej2-react/code-snippet/document-editor/accessibility-cs1/index.css create mode 100644 ej2-react/code-snippet/document-editor/accessibility-cs1/index.html create mode 100644 ej2-react/code-snippet/document-editor/accessibility-cs1/systemjs.config.js create mode 100644 ej2-react/document-editor/faq/unsupported-file-format.md diff --git a/ej2-react-toc.html b/ej2-react-toc.html index 4ede85ccb..26c75030f 100644 --- a/ej2-react-toc.html +++ b/ej2-react-toc.html @@ -943,6 +943,11 @@
  • Customize color picker in Document Editor component
    • +
  • FAQ + +
  • API Reference
    • diff --git a/ej2-react/code-snippet/document-editor/accessibility-cs1/app/index.jsx b/ej2-react/code-snippet/document-editor/accessibility-cs1/app/index.jsx new file mode 100644 index 000000000..f0297c63e --- /dev/null +++ b/ej2-react/code-snippet/document-editor/accessibility-cs1/app/index.jsx @@ -0,0 +1,29 @@ +{% raw %} +import * as ReactDOM from 'react-dom'; +import * as React from 'react'; +import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor'; +DocumentEditorContainerComponent.Inject(Toolbar); +function App() { + let documenteditorcontainer; + React.useEffect(() => { + componentDidMount(); + }, []); + function created() { + let data ='{"sfdt":"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"}'; + documenteditorcontainer.documentEditor.open(data); + } + function componentDidMount() { + setTimeout(() => { + created(); + }); + } + return (

    Syncfusion Word Processor(a.k.a)Document Editor Component

    + { + documenteditorcontainer = scope; + created(); + }} serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/" enableToolbar={true}/>
    + ); +} +export default App; +ReactDOM.render(, document.getElementById('sample')); +{% endraw %} \ No newline at end of file diff --git a/ej2-react/code-snippet/document-editor/accessibility-cs1/app/index.tsx b/ej2-react/code-snippet/document-editor/accessibility-cs1/app/index.tsx new file mode 100644 index 000000000..7f714e452 --- /dev/null +++ b/ej2-react/code-snippet/document-editor/accessibility-cs1/app/index.tsx @@ -0,0 +1,37 @@ +{% raw %} + + + +import * as ReactDOM from 'react-dom'; +import * as React from 'react'; +import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor'; +DocumentEditorContainerComponent.Inject(Toolbar); +function App() { + let documenteditorcontainer: DocumentEditorContainerComponent; + React.useEffect(() => { + componentDidMount() + }, []); + function created() { + // load your default document here + let data = '{"sfdt":"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"}'; + documenteditorcontainer.documentEditor.open(data); + + } + function componentDidMount() { + setTimeout(() => { + created(); + }); + } + return (

    Syncfusion Word Processor(a.k.a)Document Editor Component

    + { + documenteditorcontainer = scope; + created(); + }} serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/" enableToolbar={true}/>
    + ); +} +export default App; +ReactDOM.render(, document.getElementById('sample')) + + + +{% endraw %} \ No newline at end of file diff --git a/ej2-react/code-snippet/document-editor/accessibility-cs1/index.css b/ej2-react/code-snippet/document-editor/accessibility-cs1/index.css new file mode 100644 index 000000000..1897af8d0 --- /dev/null +++ b/ej2-react/code-snippet/document-editor/accessibility-cs1/index.css @@ -0,0 +1,9 @@ + +#loader { +color: #008cff; +height: 40px; +left: 45%; +position: absolute; +top: 45%; +width: 30%; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/document-editor/accessibility-cs1/index.html b/ej2-react/code-snippet/document-editor/accessibility-cs1/index.html new file mode 100644 index 000000000..6be852083 --- /dev/null +++ b/ej2-react/code-snippet/document-editor/accessibility-cs1/index.html @@ -0,0 +1,56 @@ + + + + + Syncfusion React Button + + + + + + + + + + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + + diff --git a/ej2-react/code-snippet/document-editor/accessibility-cs1/systemjs.config.js b/ej2-react/code-snippet/document-editor/accessibility-cs1/systemjs.config.js new file mode 100644 index 000000000..3a963e15a --- /dev/null +++ b/ej2-react/code-snippet/document-editor/accessibility-cs1/systemjs.config.js @@ -0,0 +1,55 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: "app", + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js", + + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/document-editor/customize-context-menu-cs1/app/index.jsx b/ej2-react/code-snippet/document-editor/customize-context-menu-cs1/app/index.jsx index 07ed4d8f5..788d91efc 100644 --- a/ej2-react/code-snippet/document-editor/customize-context-menu-cs1/app/index.jsx +++ b/ej2-react/code-snippet/document-editor/customize-context-menu-cs1/app/index.jsx @@ -26,7 +26,7 @@ function App() { switch (args.id) { case id + 'search_in_google': let searchContent = container.documentEditor.selection.text; - if (!this.container.documentEditor.selection.isEmpty && /\S/.test(searchContent)) { + if (!container.documentEditor.selection.isEmpty && /\S/.test(searchContent)) { window.open('http://google.com/search?q=' + searchContent); } break; diff --git a/ej2-react/code-snippet/document-editor/customize-context-menu-cs1/app/index.tsx b/ej2-react/code-snippet/document-editor/customize-context-menu-cs1/app/index.tsx index 6eaad4d42..ed88e201c 100644 --- a/ej2-react/code-snippet/document-editor/customize-context-menu-cs1/app/index.tsx +++ b/ej2-react/code-snippet/document-editor/customize-context-menu-cs1/app/index.tsx @@ -33,7 +33,7 @@ function App() { switch (args.id) { case id + 'search_in_google': let searchContent: string = container.documentEditor.selection.text; - if (!this.container.documentEditor.selection.isEmpty && /\S/.test(searchContent)) { + if (!container.documentEditor.selection.isEmpty && /\S/.test(searchContent)) { window.open('http://google.com/search?q=' + searchContent); } break; diff --git a/ej2-react/code-snippet/document-editor/link-cs1/app/index.jsx b/ej2-react/code-snippet/document-editor/link-cs1/app/index.jsx index 8b75347eb..d77f46585 100644 --- a/ej2-react/code-snippet/document-editor/link-cs1/app/index.jsx +++ b/ej2-react/code-snippet/document-editor/link-cs1/app/index.jsx @@ -1,8 +1,8 @@ {% raw %} import * as ReactDOM from 'react-dom'; import * as React from 'react'; -import { DocumentEditorComponent, SfdtExport, Selection } from '@syncfusion/ej2-react-documenteditor'; -DocumentEditorComponent.Inject(Selection, SfdtExport); +import { DocumentEditorComponent, SfdtExport, Selection, Editor } from '@syncfusion/ej2-react-documenteditor'; +DocumentEditorComponent.Inject(Selection, SfdtExport, Editor); function App() { let documenteditor; // Add event listener for requestNavigate event to customize hyperlink navigation functionality @@ -17,7 +17,7 @@ function App() { args.isHandled = true; } }; - return ( { documenteditor = scope; }} enableSelection={true} enableSfdtExport={true} requestNavigate={requestNavigate}/>); + return ( { documenteditor = scope; }} enableSelection={true} enableSfdtExport={true} requestNavigate={requestNavigate} isReadOnly={false} enableEditor={true}/>); } export default App; ReactDOM.render(, document.getElementById('sample')); diff --git a/ej2-react/code-snippet/document-editor/link-cs1/app/index.tsx b/ej2-react/code-snippet/document-editor/link-cs1/app/index.tsx index 325aec18f..cd9527f8b 100644 --- a/ej2-react/code-snippet/document-editor/link-cs1/app/index.tsx +++ b/ej2-react/code-snippet/document-editor/link-cs1/app/index.tsx @@ -4,10 +4,10 @@ import * as ReactDOM from 'react-dom'; import * as React from 'react'; import { - DocumentEditorComponent, SfdtExport, Selection, RequestNavigateEventArgs + DocumentEditorComponent, SfdtExport, Selection, RequestNavigateEventArgs, Editor } from '@syncfusion/ej2-react-documenteditor'; -DocumentEditorComponent.Inject(Selection, SfdtExport); +DocumentEditorComponent.Inject(Selection, SfdtExport, Editor); function App() { let documenteditor: DocumentEditorComponent; @@ -25,7 +25,7 @@ function App() { }; return ( - {documenteditor = scope; }} enableSelection={true} enableSfdtExport={true} requestNavigate={requestNavigate} /> + {documenteditor = scope; }} enableSelection={true} enableSfdtExport={true} requestNavigate={requestNavigate} enableEditor={true} isReadOnly={false} /> ); } diff --git a/ej2-react/code-snippet/document-editor/print-cs2/app/index.jsx b/ej2-react/code-snippet/document-editor/print-cs2/app/index.jsx index 03a5277da..0a9973767 100644 --- a/ej2-react/code-snippet/document-editor/print-cs2/app/index.jsx +++ b/ej2-react/code-snippet/document-editor/print-cs2/app/index.jsx @@ -5,7 +5,7 @@ import { DocumentEditorComponent, Print, Editor, Selection, EditorHistory, Sfdt } from '@syncfusion/ej2-react-documenteditor'; DocumentEditorComponent.Inject(Print, Editor, Selection, SfdtExport, EditorHistory); -let documenteditor: DocumentEditorComponent; +let documenteditor; function App() { return (
    diff --git a/ej2-react/code-snippet/document-editor/ruler-cs1/app/index.jsx b/ej2-react/code-snippet/document-editor/ruler-cs1/app/index.jsx index 5599a7ee8..3bb5426c8 100644 --- a/ej2-react/code-snippet/document-editor/ruler-cs1/app/index.jsx +++ b/ej2-react/code-snippet/document-editor/ruler-cs1/app/index.jsx @@ -1,16 +1,15 @@ {% raw %} import * as ReactDOM from 'react-dom'; import * as React from 'react'; -import { DocumentEditorComponent, Editor } from '@syncfusion/ej2-react-documenteditor'; -DocumentEditorComponent.Inject(Editor); +import { DocumentEditorComponent, Editor, Selection } from '@syncfusion/ej2-react-documenteditor'; +DocumentEditorComponent.Inject(Editor, Selection); function App() { let container; React.useEffect(() => { componentDidMount() }, []); function created() { - container.documentEditorSettings.showRuler = true; - container.enableAllModules(); + container.documentEditorSettings.showRuler = true; } function componentDidMount() { setTimeout(() => { @@ -25,7 +24,7 @@ function App() { { container = scope; created(); - }} + }} enableEditor={true} enableSelection={true} serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/" />
    diff --git a/ej2-react/code-snippet/document-editor/ruler-cs1/app/index.tsx b/ej2-react/code-snippet/document-editor/ruler-cs1/app/index.tsx index d84db872c..6bd6bd729 100644 --- a/ej2-react/code-snippet/document-editor/ruler-cs1/app/index.tsx +++ b/ej2-react/code-snippet/document-editor/ruler-cs1/app/index.tsx @@ -3,8 +3,8 @@ import * as ReactDOM from 'react-dom'; import * as React from 'react'; -import { DocumentEditorComponent, Editor } from '@syncfusion/ej2-react-documenteditor'; -DocumentEditorComponent.Inject(Editor); +import { DocumentEditorComponent, Editor, Selection } from '@syncfusion/ej2-react-documenteditor'; +DocumentEditorComponent.Inject(Editor, Selection); function App() { @@ -14,8 +14,7 @@ function App() { }, []); function created() { - container.documentEditorSettings.showRuler = true; - container.enableAllModules(); + container.documentEditorSettings.showRuler = true; } function componentDidMount() { @@ -33,7 +32,7 @@ function App() { { container = scope; created(); - }} + }} enableEditor={true} enableSelection={true} serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/" /> diff --git a/ej2-react/code-snippet/document-editor/scrolling-zooming-cs1/app/index.jsx b/ej2-react/code-snippet/document-editor/scrolling-zooming-cs1/app/index.jsx index 35ab33379..1e19116c8 100644 --- a/ej2-react/code-snippet/document-editor/scrolling-zooming-cs1/app/index.jsx +++ b/ej2-react/code-snippet/document-editor/scrolling-zooming-cs1/app/index.jsx @@ -1,7 +1,8 @@ {% raw %} import * as ReactDOM from 'react-dom'; import * as React from 'react'; -import { DocumentEditorComponent } from '@syncfusion/ej2-react-documenteditor'; +import { DocumentEditorComponent, Selection, Editor } from '@syncfusion/ej2-react-documenteditor'; +DocumentEditorComponent.Inject(Selection, Editor); function App() { let documenteditor; React.useEffect(() => { @@ -69,7 +70,7 @@ function App() { documenteditor.scrollToPage(2); }); } - return ( { documenteditor = scope; }} isReadOnly={false}/>); + return ( { documenteditor = scope; }} isReadOnly={false} enableEditor={true} />); } export default App; ReactDOM.render(, document.getElementById('sample')); diff --git a/ej2-react/code-snippet/document-editor/scrolling-zooming-cs1/app/index.tsx b/ej2-react/code-snippet/document-editor/scrolling-zooming-cs1/app/index.tsx index 62b94ac0f..a087c67f7 100644 --- a/ej2-react/code-snippet/document-editor/scrolling-zooming-cs1/app/index.tsx +++ b/ej2-react/code-snippet/document-editor/scrolling-zooming-cs1/app/index.tsx @@ -1,8 +1,8 @@ {% raw %} import * as ReactDOM from 'react-dom'; import * as React from 'react'; -import { DocumentEditorComponent } from '@syncfusion/ej2-react-documenteditor'; - +import { DocumentEditorComponent, Selection, Editor } from '@syncfusion/ej2-react-documenteditor'; +DocumentEditorComponent.Inject(Selection, Editor); function App() { let documenteditor: DocumentEditorComponent; React.useEffect(() => { @@ -72,7 +72,7 @@ function App() { }); } return ( - { documenteditor = scope; }} isReadOnly={false} /> + { documenteditor = scope; }} isReadOnly={false} enableEditor={true} /> ); } export default App; diff --git a/ej2-react/code-snippet/document-editor/scrolling-zooming-cs3/app/index.jsx b/ej2-react/code-snippet/document-editor/scrolling-zooming-cs3/app/index.jsx index c9d95784c..7ebbd5f7e 100644 --- a/ej2-react/code-snippet/document-editor/scrolling-zooming-cs3/app/index.jsx +++ b/ej2-react/code-snippet/document-editor/scrolling-zooming-cs3/app/index.jsx @@ -32,15 +32,18 @@ import { } from '@syncfusion/ej2-react-documenteditor'; import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons'; +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); + function App() { - let documenteditor: DocumentEditorComponent; - let pageCount: any; - let editablePageNumber: any; - let editorPageCount: any; - let pageNumberLabel: any; + const documentEditorRef = React.useRef(null); + const pageCountRef = React.useRef(null); + const editablePageNumberRef = React.useRef(null); + const pageNumberLabelRef = React.useRef(null); + const zoomRef = React.useRef(null); let startPage = 1; - let zoom: any; - let items: ItemModel[] = [ + let editorPageCount; + + const items = [ { text: '200%' }, { text: '175%' }, { text: '150%' }, @@ -55,37 +58,25 @@ function App() { ]; React.useEffect(() => { - let instance: any = this; + const documenteditor = documentEditorRef.current; - instance.pageCount = document.getElementById('documenteditor_pagecount'); - instance.editablePageNumber = document.getElementById('editablePageNumber'); - instance.pageNumberLabel = document.getElementById('documenteditor_page_no'); - - updatePageCount(); - updatePageNumber(); + if (documenteditor) { + documenteditor.viewChange = (e) => updatePageNumberOnViewChange(e); + documenteditor.contentChange = () => updatePageCount(); - documenteditor.viewChange = function (e) { - updatePageNumberOnViewChange(e); - }; + if (editablePageNumberRef.current) { + editablePageNumberRef.current.onclick = () => updateDocumentEditorPageNumber(); + editablePageNumberRef.current.onkeydown = (e) => onKeyDown(e); + editablePageNumberRef.current.onblur = () => onBlur(); + } - documenteditor.contentChange = function () { updatePageCount(); - }; - - instance.editablePageNumber.onclick = function () { - updateDocumentEditorPageNumber(); - }; - - instance.editablePageNumber.onkeydown = function (e) { - onKeyDown(e); - }; - - instance.editablePageNumber.onblur = function () { - onBlur(); - }; + updatePageNumber(); + } }, []); - function updatePageNumberOnViewChange(args: any) { + function updatePageNumberOnViewChange(args) { + const documenteditor = documentEditorRef.current; if ( documenteditor.selection && documenteditor.selection.startPage >= args.startPage && @@ -99,6 +90,7 @@ function App() { } function onBlur() { + const editablePageNumber = editablePageNumberRef.current; if ( editablePageNumber.textContent === '' || parseInt(editablePageNumber.textContent, 0) > editorPageCount @@ -108,17 +100,19 @@ function App() { editablePageNumber.contentEditable = 'false'; } - function onKeyDown(e: any) { + function onKeyDown(e) { + const documenteditor = documentEditorRef.current; + const editablePageNumber = editablePageNumberRef.current; if (e.which === 13) { e.preventDefault(); - var pageNumber = parseInt(editablePageNumber.textContent, 0); + const pageNumber = parseInt(editablePageNumber.textContent, 0); if (pageNumber > editorPageCount) { updatePageNumber(); } else { if (documenteditor.selection) { - documenteditor.selection.goToPage(parseInt(editablePageNumber.textContent, 0)); + documenteditor.selection.goToPage(pageNumber); } else { - documenteditor.scrollToPage(parseInt(editablePageNumber.textContent, 0)); + documenteditor.scrollToPage(pageNumber); } } editablePageNumber.contentEditable = 'false'; @@ -131,12 +125,13 @@ function App() { } } - function onZoom(args: any) { + function onZoom(args) { setZoomValue(args.item.text); updateZoomContent(); } - function setZoomValue(text: string) { + function setZoomValue(text) { + const documenteditor = documentEditorRef.current; if (text.match('Fit one page')) { documenteditor.fitPage('FitOnePage'); } else if (text.match('Fit page width')) { @@ -147,23 +142,32 @@ function App() { } function updateZoomContent() { - zoom.content = Math.round(documenteditor.zoomFactor * 100) + '%'; + if (zoomRef.current) { + zoomRef.current.content = Math.round(documentEditorRef.current.zoomFactor * 100) + '%'; + } } function updatePageNumber() { - pageNumberLabel.textContent = startPage.toString(); + if (pageNumberLabelRef.current) { + pageNumberLabelRef.current.textContent = startPage.toString(); + } } function updatePageCount() { + const documenteditor = documentEditorRef.current; editorPageCount = documenteditor.pageCount; - pageCount.textContent = editorPageCount.toString(); + if (pageCountRef.current) { + pageCountRef.current.textContent = editorPageCount.toString(); + } } function updateDocumentEditorPageNumber() { - let editPageNumber = document.getElementById('editablePageNumber'); - editPageNumber.contentEditable = 'true'; - editPageNumber.focus(); - window.getSelection().selectAllChildren(editPageNumber); + const editPageNumber = editablePageNumberRef.current; + if (editPageNumber) { + editPageNumber.contentEditable = 'true'; + editPageNumber.focus(); + window.getSelection().selectAllChildren(editPageNumber); + } } return ( @@ -171,9 +175,7 @@ function App() { { - documenteditor = scope; - }} + ref={documentEditorRef} isReadOnly={false} enablePrint={true} enableSelection={true} @@ -201,15 +203,13 @@ function App() { />
    -
    -