Decrease the npm package sizes for @syncfusion\ej2-react-documenteditor

[Naren]

Hi Team, 

After installing the @syncfusion\ej2-react-documenteditor using npm, it has installed following packages in the node_modules. After running the npm it has created more than 13MB built file because of these. I have tried removing the unused files directly and its giving the dependency issues in npm run.

 

Is there a way to decrease or remove the unusable components from the following.

[Suriya Murugan]

Hi Narendra, 

 

Thank you for contacting the Syncfusion support. 

 

DocumentEditor Component depends on the installed packages. If you remove any of the component in install packages, it will throw dependency error.

You have to maintain all the installed packages to run DocumentEditor Component without any error. 

 

Regards, 

Suriya M. 

[Naren]

Any update on the package size issue ?.This package size should be minimized after building/npm run... for the build release.

Increased size will surely  increase the web page size and we cannot use this EDITOR control further if your team doesn't minimize or decrease the size. 

[Harini Chellappa]

Hi Narendra, 

From the screen shot we can able to see all the needed dependencies are installed and it’s not possible to reduce the dependencies further. 

But we need clarification on your type of using DocumentEditor in your application. Please find the comparison between the components listed below. 

	DocumentEditorContainer Component	DocumentEditor Component
Description	Includes all the modules and comes with predefined toolbar, property pane & status bar.	A plain editor which requires needed functionality to be injected on the required modules you are about to view/edit using DocumentEditor
Modules	All modules are enabled by default. So we cannot reduce the dependent files size further.	All the needed dependencies are installed but only injected modules script will be loaded in the browser make it light weight.

 

1. Are you using DocumentEditorContainer or DocumentEditor?
2. Can you please share your complete use case scenario on how you are going to deploy the DocumentEditor and what is the constraints and your environment?

We will check the feasibility based on your requirement and update you the details on it. 

Regards, 

Harini C 

[Naren]

1) We are using DocumentEditorContainer. Following is the code,
<DocumentEditorContainerComponent id="container" ref={(scope) => { this.documenteditor = scope; }} style={{ 'height': '800px' }} enablePrint={true} enableWordExport={true} enableSelection={false} enableToolbar={true} />

2) We are using React and c# MVC to create a common page by extending component for the editor template. Using this as form control in entire application.  Enclosing the component (Few lines of code removed for security reasons).
    

Use case in my application:

- Creating a common form control or page for saving and showing the documents.

- Need to save the uploaded document  in both JSON and as HTML formats in the database.HTML format used for sending emails.
                            
Is there any possiblity of converting to HTML in UI side?
 

Can you share a sample code with above requirements and reduced size will be highly appreciated.

Regards

Narendra

Attachment: EditorView_aa18ce8b.rar

[Harini Chellappa]

Hi Narendra, 

Thank you for sharing the details. 

In the provided source code, DocumentEditorContainer component doesn’t have the property like “enableWordExport”,”enableSelection”. 

These properties come under DocumentEditor Component, which have the ability to inject required modules. 

And you have the following properties like 

enableSelection to false	Editor module is dependent on selection module. If you disable selection and enable editor, then selection will be injected by default in editor module.
enableToolbar={true}	Inbuilt toolbar has showcased with all supporting feature options. If you disable any of the modules, then options in toolbar which are depended on disabled modules will not work.  Note: We cannot remove or add any options in toolbar. currently document editor container doesn’t provide support to customize toolbar.
enableWordExport={true}	Word export is dependent on SFDT export module. Hence injecting this alone will not work.

 

 

We have prepared a simple sample with following options 

1. File opening.
2. Editing.
3. Export (word, SFDT).
4. Print.

Sample Link 

https://stackblitz.com/edit/react-p11jvd-3jpfpt?file=index.js 

Sample Code 

import { DocumentEditorComponent, Print, Selection, Editor, WordExport, SfdtExport } from '@syncfusion/ej2-react-documenteditor'; 

import { DocumentLoader } from './document-loader'; 

import { TitleBar } from './title-bar'; 

import { StatusBar } from './status-bar'; 

 

DocumentEditorComponent.Inject(Print, Editor, WordExport, SfdtExport); 

 

  <DocumentEditorComponent id="container" ref={(scope) => { this.documenteditor = scope; }} enablePrint={true} enableEditor={true} isReadOnly={false} enableWordExport={true} enableSfdtExport={true} style={{ width: '100%', height: '100%' }}/> 

 

 

 

In the above code, we have enabled print, editor, export. Likewise required modules can be enabled in document editor component, which will the reduce the script weightage. But inbuilt toolbar and properties pane will not be available in DocumentEditor component. This has to be managed independently via sample.  

You can also create the customized toolbar on your own. Please refer the following documentation for more details on it. 

https://ej2.syncfusion.com/react/documentation/document-editor/text-format/?no-cache=1#toolbar-with-options-for-text-formatting 

https://ej2.syncfusion.com/react/documentation/document-editor/paragraph-format/#toolbar-with-paragraph-formatting-options 

If your requirement is on specific modules, then you can go with document editor component, where you can reduce the script weightage. 

Else if you need all the modules, then its dependencies cannot be reduced further. 

Please let us know if you need any further assistance 

###Regarding converting to HTML in UI side 

 

Currently document editor doesn’t provide support for converting to html in client side. This can be achieved with the help of DOCIO or Word Editor in server side.  

1. using DocIO

 

You can pass the document content as blob from client side and send this to server.  

 

Please refer the below documentation, which explains how to send the document blob to server side and saving it as RTF.  

 

wordDocument.Save(stream, FormatType.Rtf); 

 

 

 

Here instead of RTF, you can set formatType to html.  

wordDocument.Save(stream, FormatType.Html);

 

 

https://ej2.syncfusion.com/react/documentation/document-editor/export/#export-as-blob 

2. using word editor package

you can serialize the document content as SFDT and then pass it to server side for saving. 

 

Please refer the below documentation. 

 

https://ej2.syncfusion.com/documentation/document-editor/server-side-export/?no-cache=1#sfdt-to-docx-export 

 

you can change the format type from docx to html for html export. 

 

Please check the above documentations for html conversion and let us know if this helps you. 

Regards, 

Harini C 

[Naren]

Hi Harini. Thanks for the response. 

While converting the sfdt to HTML using following line of code, an error is triggering. (Using the latest nuget packages)


wordDocument.Save(stream, FormatType.Html);

Following is the service implementation code for converting to html.
public string GetHTML(HttpPostedFile file, int id)
{
    try
    {
        int index = file.FileName.LastIndexOf('.');
        string doctype = index > -1 && index < file.FileName.Length - 1 ?
            file.FileName.Substring(index) : ".docx";
        Stream stream = file.InputStream;             

        stream.Position = 0;
        Syncfusion.DocIO.DLS.WordDocument wordDocument = new Syncfusion.DocIO.DLS.WordDocument(stream, Syncfusion.DocIO.FormatType.Html);                
        wordDocument.Save(stream, Syncfusion.DocIO.FormatType.Html);              
        stream.Position = 0;
        //Now, converting the stream to string 
        StreamReader reader = new StreamReader(stream);
        //wordDocument.Close();
        string text = reader.ReadToEnd();
        // Now, you set this html string to email body
        return text;                 
    }
    catch (Exception ex)
    {

        throw ex;
    }
}

ERROR: Specified method is not supported.

  at System.Web.HttpInputStream.SetLength(Int64 length)
   at Syncfusion.DocIO.DLS.WordDocument.SaveInternal(Stream stream, FormatType formatType)
   at Delasoft.ROWMS.BusinessServices.DataServices.SyncEditorServices.GetHTML(HttpPostedFile file, Int32 id)

[Harini Chellappa]

Hi Narendra, 

We have checked your provided source code. You have used the same stream for reading the word document and saving in html format. This causes the exception. 

To resolve this error, you can create new stream for saving the content in html format. Since stream has already read. 

Please refer the below sample code snippet. 

  System.Web.HttpPostedFile data = HttpContext.Current.Request.Files[0]; 

            //Opens document stream 

            WordDocument wordDocument = new WordDocument(data.InputStream); 

            MemoryStream stream = new MemoryStream(); 

            //Converts document stream as HTML 

            wordDocument.Save(stream, FormatType.Html); 

            wordDocument.Close(); 

            stream.Position = 0; 

            StreamReader reader = new StreamReader(stream); 

            //wordDocument.Close(); 

            string text = reader.ReadToEnd(); 

            // Now, you set this html string to email body 

            return text; 

 

Please check the above and let us know if this helps you. 

Regards, 

Harini C