1056866: Added SharePoint integration sample for TypeScript DOCX Editor

sharepoint-integration/.gitignore

@@ -0,0 +1,38 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Dependency directories
+node_modules
+
+# Build generated files
+dist
+lib
+lib-dts
+lib-commonjs
+lib-esm
+jest-output
+release
+solution
+temp
+*.sppkg
+.heft
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# OSX
+.DS_Store
+
+# Visual Studio files
+.ntvs_analysis.dat
+.vs
+bin
+obj
+
+# Resx Generated Code
+*.resx.ts
+
+# Styles Generated Code
+*.scss.ts

sharepoint-integration/.npmignore

@@ -0,0 +1,22 @@
+# Ignore everything by default
+**
+
+# Use negative patterns to bring back the specific things we want to publish
+!/bin/**
+!/dist/**
+!/EULA/**
+!/lib/**
+!ThirdPartyNotice.txt
+
+# Ignore certain files in the above folders
+/dist/*.stats.*
+/dist/**/*.js.map
+/lib/**/*.js.map
+/lib/**/test/**
+
+# NOTE: These don't need to be specified, because NPM includes them automatically.
+#
+# package.json
+# README (and its variants)
+# CHANGELOG (and its variants)
+# LICENSE / LICENCE

sharepoint-integration/.yo-rc.json

@@ -0,0 +1,19 @@
+{
+  "@microsoft/generator-sharepoint": {
+    "useGulp": false,
+    "plusBeta": false,
+    "isCreatingSolution": true,
+    "nodeVersion": "22.23.3",
+    "sdksVersions": {},
+    "version": "1.23.2",
+    "libraryName": "docx-editor-sp-fx",
+    "libraryId": "7a537e50-ce5c-40c6-89fe-11ffd128299d",
+    "environment": "spo",
+    "packageManager": "npm",
+    "solutionName": "DOCXEditorSPFx",
+    "solutionShortDescription": "DOCXEditorSPFx description",
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false,
+    "componentType": "webpart"
+  }
+}

sharepoint-integration/README.md

@@ -0,0 +1,56 @@
+# Getting Started with Integrating Syncfusion TypeScript DOCX Editor in SharePoint
+
+## Description
+
+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.
+
+## Prerequisites
+
+- Use Node Version 22 (supported by SPFx 1.22)
+- A valid Microsoft 365 tenant
+
+## Application Setup & Running the Project (Clone & Run)
+
+1. **Clone the repository to your local machine and navigate to the project folder.**
+   ```bash
+   git clone <repo>
+   cd <repo>
+   ```
+
+2. **Install project dependencies:**
+   ```bash
+   npm install
+   ```
+
+3. **Update Tenant Domain in `config/serve.json`:**
+   ```json
+   "initialPage": "https://<your-tenant>.sharepoint.com/_layouts/15/workbench.aspx"
+   ```
+   **Note:** Replace `<your-tenant>` with your actual SharePoint Online tenant name.
+
+4. **Trust the SPFx Dev Certificate:**
+   ```bash
+   heft trust-dev-cert
+   ```
+   Or simply trust when prompted during first run.
+
+5. **Start the application:**
+   ```bash
+   npm start
+   ```
+
+6. **Allow debug scripts?**  
+   From the browser opened in step 5, allow debug scripts by clicking `Load debug scripts`.
+
+7. **Viewing Syncfusion Schedule Component**
+   - Click the + (Add a web part in column one) icon in the browser window (SharePoint).
+   - Select 'App' from the options shown.
+   - Finally, you can see the Syncfusion Document Editor rendered in SharePoint.
+
+## Output Preview
+
+**Syncfusion TypeScript DOCX Editor**
+
+![TypeScript DOCX Editor in SharePoint](./typescript-docx-editor-sharepoint.png)
+
+*Image illustrating the Syncfusion TypeScript DOCX Editor in SharePoint*

sharepoint-integration/config/config.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
+  "version": "2.0",
+  "bundles": {
+    "docx-editor-web-part": {
+      "components": [
+        {
+          "entrypoint": "./lib/webparts/docxEditor/DocxEditorWebPart.js",
+          "manifest": "./src/webparts/docxEditor/DocxEditorWebPart.manifest.json"
+        }
+      ]
+    }
+  },
+  "externals": {},
+  "localizedResources": {
+    "DocxEditorWebPartStrings": "lib/webparts/docxEditor/loc/{locale}.js"
+  }
+}

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

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
+  "workingDir": "./release/assets/",
+  "account": "<!-- STORAGE ACCOUNT NAME -->",
+  "container": "docx-editor-sp-fx",
+  "accessKey": "<!-- ACCESS KEY -->"
+}

sharepoint-integration/config/package-solution.json

@@ -0,0 +1,40 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
+  "solution": {
+    "name": "docx-editor-sp-fx-client-side-solution",
+    "id": "7a537e50-ce5c-40c6-89fe-11ffd128299d",
+    "version": "1.0.0.0",
+    "includeClientSideAssets": true,
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false,
+    "developer": {
+      "name": "",
+      "websiteUrl": "",
+      "privacyUrl": "",
+      "termsOfUseUrl": "",
+      "mpnId": "Undefined-1.23.2"
+    },
+    "metadata": {
+      "shortDescription": {
+        "default": "DOCXEditorSPFx description"
+      },
+      "longDescription": {
+        "default": "DOCXEditorSPFx description"
+      },
+      "screenshotPaths": [],
+      "videoUrl": "",
+      "categories": []
+    },
+    "features": [
+      {
+        "title": "docx-editor-sp-fx Feature",
+        "description": "The feature that activates elements of the docx-editor-sp-fx solution.",
+        "id": "9a5de981-4c76-4981-9dd2-594082d52d8b",
+        "version": "1.0.0.0"
+      }
+    ]
+  },
+  "paths": {
+    "zippedPackage": "solution/docx-editor-sp-fx.sppkg"
+  }
+}

sharepoint-integration/config/rig.json

@@ -0,0 +1,7 @@
+{
+  // The "rig.json" file directs tools to look for their config files in an external package.
+  // Documentation for this system: https://www.npmjs.com/package/@rushstack/rig-package
+  "$schema": "https://developer.microsoft.com/json-schemas/rig-package/rig.schema.json",
+
+  "rigPackageName": "@microsoft/spfx-web-build-rig"
+}

sharepoint-integration/config/sass.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/heft/v0/heft-sass-plugin.schema.json",
+
+  "extends": "@microsoft/spfx-web-build-rig/profiles/default/config/sass.json"
+}

sharepoint-integration/config/serve.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
+  "port": 4321,
+  "https": true,
+  "initialPage": "https://<your-tenant>.sharepoint.com/_layouts/15/workbench.aspx"
+}

sharepoint-integration/config/typescript.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@microsoft/spfx-web-build-rig/profiles/default/config/typescript.json",
+
+  "staticAssetsToCopy": {
+    "fileExtensions": [".resx", ".jpg", ".png", ".woff", ".eot", ".ttf", ".svg", ".gif"],
+
+    "includeGlobs": ["webparts/*/loc/*.js"]
+  }
+}

sharepoint-integration/config/write-manifests.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
+  "cdnBasePath": "<!-- PATH TO CDN -->"
+}

sharepoint-integration/eslint.config.js

@@ -0,0 +1,14 @@
+const spfxProfile = require('@microsoft/eslint-config-spfx/lib/flat-profiles/default');
+
+module.exports = [
+  ...spfxProfile,
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    languageOptions: {
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+        project: './tsconfig.json'
+      }
+    }
+  }
+];

sharepoint-integration/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "docx-editor-sp-fx",
+  "version": "0.0.1",
+  "private": true,
+  "engines": {
+    "node": ">=22.14.0 < 23.0.0"
+  },
+  "scripts": {
+    "build": "heft test --clean --production && heft package-solution --production",
+    "clean": "heft clean",
+    "eject-webpack": "heft eject-webpack",
+    "start": "heft start --clean"
+  },
+  "dependencies": {
+    "@microsoft/sp-component-base": "1.23.2",
+    "@microsoft/sp-core-library": "1.23.2",
+    "@microsoft/sp-lodash-subset": "1.23.2",
+    "@microsoft/sp-office-ui-fabric-core": "1.23.2",
+    "@microsoft/sp-property-pane": "1.23.2",
+    "@microsoft/sp-webpart-base": "1.23.2",
+    "@syncfusion/ej2-documenteditor": "^34.2.8",
+    "@syncfusion/ej2-tailwind3-theme": "^34.2.8",
+    "gulp": "^5.0.1",
+    "tslib": "2.3.1"
+  },
+  "devDependencies": {
+    "@fluentui/react": "^8.106.4",
+    "@microsoft/eslint-config-spfx": "1.23.2",
+    "@microsoft/eslint-plugin-spfx": "1.23.2",
+    "@microsoft/sp-module-interfaces": "1.23.2",
+    "@microsoft/spfx-heft-plugins": "1.23.2",
+    "@microsoft/spfx-web-build-rig": "1.23.2",
+    "@rushstack/heft": "1.2.17",
+    "@types/jest": "30.0.0",
+    "@types/webpack-env": "~1.15.2",
+    "css-loader": "~7.1.2",
+    "eslint": "9.37.0",
+    "typescript": "~5.8.0"
+  },
+  "overrides": {
+    "@rushstack/heft": "1.2.17"
+  }
+}

sharepoint-integration/src/webparts/docxEditor/DocxEditorWebPart.manifest.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+  "id": "d6275826-8cf5-4874-89e0-40e428ca4313",
+  "alias": "DocxEditorWebPart",
+  "componentType": "WebPart",
+
+  // The "*" signifies that the version should be taken from the package.json
+  "version": "*",
+  "manifestVersion": 2,
+
+  // If true, the component can only be installed on sites where Custom Script is allowed.
+  // Components that allow authors to embed arbitrary script code should set this to true.
+  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
+  "requiresCustomScript": false,
+  "supportedHosts": ["SharePointWebPart", "TeamsPersonalApp", "TeamsTab", "SharePointFullPage"],
+  "supportsThemeVariants": true,
+
+  "preconfiguredEntries": [{
+    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Advanced
+    "group": { "default": "Advanced" },
+    "title": { "default": "DOCXEditor" },
+    "description": { "default": "DOCXEditor description" },
+    "officeFabricIconFontName": "Page",
+    "properties": {
+      "description": "DOCXEditor"
+    }
+  }]
+}

sharepoint-integration/src/webparts/docxEditor/DocxEditorWebPart.module.scss

@@ -0,0 +1,29 @@
+.docxEditor {
+  overflow: hidden;
+  padding: 1em;
+  color: "[theme:bodyText, default: #323130]";
+  color: var(--bodyText);
+}
+
+.welcome {
+  text-align: center;
+}
+
+.welcomeImage {
+  width: 100%;
+  max-width: 420px;
+}
+
+.links {
+  a {
+    text-decoration: none;
+    color: "[theme:link, default:#03787c]";
+    color: var(--link); // note: CSS Custom Properties support is limited to modern browsers only
+
+    &:hover {
+      text-decoration: underline;
+      color: "[theme:linkHovered, default: #014446]";
+      color: var(--linkHovered); // note: CSS Custom Properties support is limited to modern browsers only
+    }
+  }
+}