Skip to content

Commit bb9760e

Browse files
suriyaprakasamrsuriyaprakasamr
committed
1056866: Added SharePoint integration sample for TypeScript DOCX Editor
1 parent 011ba72 commit bb9760e

23 files changed

Lines changed: 513 additions & 0 deletions

‎sharepoint-integration/.gitignore‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
6+
# Dependency directories
7+
node_modules
8+
9+
# Build generated files
10+
dist
11+
lib
12+
lib-dts
13+
lib-commonjs
14+
lib-esm
15+
jest-output
16+
release
17+
solution
18+
temp
19+
*.sppkg
20+
.heft
21+
22+
# Coverage directory used by tools like istanbul
23+
coverage
24+
25+
# OSX
26+
.DS_Store
27+
28+
# Visual Studio files
29+
.ntvs_analysis.dat
30+
.vs
31+
bin
32+
obj
33+
34+
# Resx Generated Code
35+
*.resx.ts
36+
37+
# Styles Generated Code
38+
*.scss.ts

‎sharepoint-integration/.npmignore‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# Ignore everything by default
2+
**
3+
4+
# Use negative patterns to bring back the specific things we want to publish
5+
!/bin/**
6+
!/dist/**
7+
!/EULA/**
8+
!/lib/**
9+
!ThirdPartyNotice.txt
10+
11+
# Ignore certain files in the above folders
12+
/dist/*.stats.*
13+
/dist/**/*.js.map
14+
/lib/**/*.js.map
15+
/lib/**/test/**
16+
17+
# NOTE: These don't need to be specified, because NPM includes them automatically.
18+
#
19+
# package.json
20+
# README (and its variants)
21+
# CHANGELOG (and its variants)
22+
# LICENSE / LICENCE

‎sharepoint-integration/.yo-rc.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"@microsoft/generator-sharepoint": {
3+
"useGulp": false,
4+
"plusBeta": false,
5+
"isCreatingSolution": true,
6+
"nodeVersion": "22.23.3",
7+
"sdksVersions": {},
8+
"version": "1.23.2",
9+
"libraryName": "docx-editor-sp-fx",
10+
"libraryId": "7a537e50-ce5c-40c6-89fe-11ffd128299d",
11+
"environment": "spo",
12+
"packageManager": "npm",
13+
"solutionName": "DOCXEditorSPFx",
14+
"solutionShortDescription": "DOCXEditorSPFx description",
15+
"skipFeatureDeployment": true,
16+
"isDomainIsolated": false,
17+
"componentType": "webpart"
18+
}
19+
}

‎sharepoint-integration/README.md‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
# Getting Started with Integrating Syncfusion TypeScript DOCX Editor in SharePoint
2+
3+
## Description
4+
5+
This repository provides a complete example of how to integrate the Syncfusion [TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor?utm_source=github&utm_medium=listing&utm_campaign=javascript-docx-editor-github-samples) component into a SharePoint Framework (SPFx) web part using the modern Heft-based build toolchain introduced in SPFx v1.22+. SharePoint Framework enables fully client‑side solutions that run seamlessly within SharePoint Online pages.
6+
7+
## Prerequisites
8+
9+
- Use Node Version 22 (supported by SPFx 1.22)
10+
- A valid Microsoft 365 tenant
11+
12+
## Application Setup & Running the Project (Clone & Run)
13+
14+
1. **Clone the repository to your local machine and navigate to the project folder.**
15+
```bash
16+
git clone <repo>
17+
cd <repo>
18+
```
19+
20+
2. **Install project dependencies:**
21+
```bash
22+
npm install
23+
```
24+
25+
3. **Update Tenant Domain in `config/serve.json`:**
26+
```json
27+
"initialPage": "https://<your-tenant>.sharepoint.com/_layouts/15/workbench.aspx"
28+
```
29+
**Note:** Replace `<your-tenant>` with your actual SharePoint Online tenant name.
30+
31+
4. **Trust the SPFx Dev Certificate:**
32+
```bash
33+
heft trust-dev-cert
34+
```
35+
Or simply trust when prompted during first run.
36+
37+
5. **Start the application:**
38+
```bash
39+
npm start
40+
```
41+
42+
6. **Allow debug scripts?**
43+
From the browser opened in step 5, allow debug scripts by clicking `Load debug scripts`.
44+
45+
7. **Viewing Syncfusion Schedule Component**
46+
- Click the + (Add a web part in column one) icon in the browser window (SharePoint).
47+
- Select 'App' from the options shown.
48+
- Finally, you can see the Syncfusion Document Editor rendered in SharePoint.
49+
50+
## Output Preview
51+
52+
**Syncfusion TypeScript DOCX Editor**
53+
54+
![TypeScript DOCX Editor in SharePoint](./typescript-docx-editor-sharepoint.png)
55+
56+
*Image illustrating the Syncfusion TypeScript DOCX Editor in SharePoint*

‎sharepoint-integration/config/config.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
3+
"version": "2.0",
4+
"bundles": {
5+
"docx-editor-web-part": {
6+
"components": [
7+
{
8+
"entrypoint": "./lib/webparts/docxEditor/DocxEditorWebPart.js",
9+
"manifest": "./src/webparts/docxEditor/DocxEditorWebPart.manifest.json"
10+
}
11+
]
12+
}
13+
},
14+
"externals": {},
15+
"localizedResources": {
16+
"DocxEditorWebPartStrings": "lib/webparts/docxEditor/loc/{locale}.js"
17+
}
18+
}

‎sharepoint-integration/config/deploy-azure-storage.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
3+
"workingDir": "./release/assets/",
4+
"account": "<!-- STORAGE ACCOUNT NAME -->",
5+
"container": "docx-editor-sp-fx",
6+
"accessKey": "<!-- ACCESS KEY -->"
7+
}

‎sharepoint-integration/config/package-solution.json‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
3+
"solution": {
4+
"name": "docx-editor-sp-fx-client-side-solution",
5+
"id": "7a537e50-ce5c-40c6-89fe-11ffd128299d",
6+
"version": "1.0.0.0",
7+
"includeClientSideAssets": true,
8+
"skipFeatureDeployment": true,
9+
"isDomainIsolated": false,
10+
"developer": {
11+
"name": "",
12+
"websiteUrl": "",
13+
"privacyUrl": "",
14+
"termsOfUseUrl": "",
15+
"mpnId": "Undefined-1.23.2"
16+
},
17+
"metadata": {
18+
"shortDescription": {
19+
"default": "DOCXEditorSPFx description"
20+
},
21+
"longDescription": {
22+
"default": "DOCXEditorSPFx description"
23+
},
24+
"screenshotPaths": [],
25+
"videoUrl": "",
26+
"categories": []
27+
},
28+
"features": [
29+
{
30+
"title": "docx-editor-sp-fx Feature",
31+
"description": "The feature that activates elements of the docx-editor-sp-fx solution.",
32+
"id": "9a5de981-4c76-4981-9dd2-594082d52d8b",
33+
"version": "1.0.0.0"
34+
}
35+
]
36+
},
37+
"paths": {
38+
"zippedPackage": "solution/docx-editor-sp-fx.sppkg"
39+
}
40+
}

‎sharepoint-integration/config/rig.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
// The "rig.json" file directs tools to look for their config files in an external package.
3+
// Documentation for this system: https://www.npmjs.com/package/@rushstack/rig-package
4+
"$schema": "https://developer.microsoft.com/json-schemas/rig-package/rig.schema.json",
5+
6+
"rigPackageName": "@microsoft/spfx-web-build-rig"
7+
}

‎sharepoint-integration/config/sass.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/heft/v0/heft-sass-plugin.schema.json",
3+
4+
"extends": "@microsoft/spfx-web-build-rig/profiles/default/config/sass.json"
5+
}

‎sharepoint-integration/config/serve.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
3+
"port": 4321,
4+
"https": true,
5+
"initialPage": "https://<your-tenant>.sharepoint.com/_layouts/15/workbench.aspx"
6+
}

0 commit comments

Comments
 (0)