Documentation(1027584): Added subscript and superscript details in UG.

Document-Processing/Excel/Spreadsheet/React/text-cell-formatting.md

@@ -44,6 +44,62 @@ You can align text in cells using the following options:
 
 Indentation helps enhance the visual appearance of text in cells by adding space before the text content. You can apply cell text indentation using the [`textIndent`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cellstylemodel#textindent) property.
 
+### Subscript and Superscript
+
+You can apply subscript and superscript formatting to specific parts of the text within a cell to improve readability and presentation.
+
+In the Syncfusion React Spreadsheet, this formatting is achieved using the [`richText`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#richtext) property of the cell model. The `richText` property allows you to define multiple text segments within a single cell, where each segment can be formatted independently.
+
+Each richText segment contains:
+
+`text` – the content of the segment.
+`style` – a [`CellStyleModel`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cellstylemodel) object used to apply formatting. Set `verticalAlign: 'super'` for superscript and `verticalAlign: 'sub'` for subscript.
+
+#### How to Apply Subscript and Superscript
+
+You can apply subscript and superscript formatting in following ways:
+
+1. Select the desired portion of text within a cell, then click the Subscript or Superscript option in the ribbon to apply the formatting.
+
+2. You can define the richText property directly while initializing the Spreadsheet. This is useful when you want the formatting to be applied when the data is loaded.
+
+```
+    cells: [
+        {
+            value: 'H2O',
+            richText: [
+                { text: 'H' },
+                { text: '2', style: { verticalAlign: 'sub' } },
+                { text: 'O' }
+            ]
+        }
+    ]
+```
+
+3. You can also apply subscript and superscript dynamically using the updateCell method.
+
+```
+    spreadsheet.updateCell({ value: 'X2', richText: [
+                    { text: 'X' },
+                    { text: '2', style: { verticalAlign: 'super' } }
+                ] }, 'A5');
+```
+
+The following code example shows the subscript and superscript formatting in cells of the spreadsheet.
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/richtext-format-cs1/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/richtext-format-cs1/app/app.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/react/richtext-format-cs1" %}
+
+> **Note:** Subscript and superscript formatting is applied only to the selected text, and this is supported only in edit mode.
+
 ### Fill Color
 
 Fill color (background color) is used to highlight cells or ranges of cells across the workbook. You can apply background colors to cells using the [`backgroundColor`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cellstylemodel#backgroundcolor) property.

Document-Processing/code-snippet/spreadsheet/react/richtext-format-cs1/app/app.jsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+
+function App() {
+    const spreadsheetRef = React.useRef(null);
+    const sheets = [
+        {
+            columns: [{ width: 200 }],
+            rows: [
+                { cells: [{ value: 'Plain Text' }] },
+                {
+                    cells: [
+                        {
+                            value: 'Mineral Water H2O',
+                            richText: [
+                                { text: 'Mineral Water H' },
+                                { text: '2', style: { verticalAlign: 'sub' } },
+                                { text: 'O' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    cells: [
+                        {
+                            value: 'Energy Supplement C6H12O6',
+                            richText: [
+                                { text: 'Energy Supplement C' },
+                                { text: '6', style: { verticalAlign: 'sub' } },
+                                { text: 'H' },
+                                { text: '12', style: { verticalAlign: 'sub' } },
+                                { text: 'O' },
+                                { text: '6', style: { verticalAlign: 'sub' } }
+                            ]
+                        }
+                    ]
+                },
+                { cells: [{ value: 'H2O' }] },
+            ]
+        }
+    ];
+
+    const onCreated = () => {
+        const spreadsheet = spreadsheetRef.current;
+        if (!spreadsheet) return;
+        spreadsheet.updateCell({ richText: [{text: 'H'},{ text: '2', style: { verticalAlign: 'sub' } }, { text: 'O' }
+        ] }, 'A4');
+        spreadsheet.updateCell({ value: 'X2', richText: [
+                { text: 'X' },
+                { text: '2', style: { verticalAlign: 'super' } }
+            ] }, 'A5');
+    };
+
+    return (
+        <div>
+            <SpreadsheetComponent ref={spreadsheetRef} sheets={sheets} showFormulaBar={false} created={onCreated} >
+            </SpreadsheetComponent>
+        </div>
+    );
+}
+
+export default App;
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);

Document-Processing/code-snippet/spreadsheet/react/richtext-format-cs1/app/app.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent, SheetModel } from '@syncfusion/ej2-react-spreadsheet';
+
+function App(): React.ReactElement {
+    const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
+    const sheets: SheetModel[] = [
+        {
+            columns: [{ width: 200 }],
+            rows: [
+                { cells: [{ value: 'Plain Text' }] },
+                {
+                    cells: [
+                        {
+                            value: 'Mineral Water H2O',
+                            richText: [
+                                { text: 'Mineral Water H' },
+                                { text: '2', style: { verticalAlign: 'sub' } },
+                                { text: 'O' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    cells: [
+                        {
+                            value: 'Energy Supplement C6H12O6',
+                            richText: [
+                                { text: 'Energy Supplement C' },
+                                { text: '6', style: { verticalAlign: 'sub' } },
+                                { text: 'H' },
+                                { text: '12', style: { verticalAlign: 'sub' } },
+                                { text: 'O' },
+                                { text: '6', style: { verticalAlign: 'sub' } }
+                            ]
+                        }
+                    ]
+                },
+                { cells: [{ value: 'H2O' }] },
+            ]
+        }
+    ];
+
+    const onCreated = (): void => {
+        const spreadsheet = spreadsheetRef.current;
+        if (!spreadsheet) return;
+        spreadsheet.updateCell({ richText: [{text: 'H'},{ text: '2', style: { verticalAlign: 'sub' } }, { text: 'O' }
+        ] }, 'A4');
+        spreadsheet.updateCell({ value: 'X2', richText: [
+                { text: 'X' },
+                { text: '2', style: { verticalAlign: 'super' } }
+            ] }, 'A5');
+    };
+
+    return (
+        <div>
+            <SpreadsheetComponent ref={spreadsheetRef} sheets={sheets} showFormulaBar={false} created={onCreated} >
+            </SpreadsheetComponent>
+        </div>
+    );
+}
+
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render(<App />);

Document-Processing/code-snippet/spreadsheet/react/richtext-format-cs1/index.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Spreadsheet</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css" rel="stylesheet" type="text/css" />
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+    <style>
+        #loader {
+            color: #008cff;
+            height: 40px;
+            left: 45%;
+            position: absolute;
+            top: 45%;
+            width: 30%;
+        }
+
+        body {
+            overflow: hidden;
+        }
+    </style>
+</head>
+
+<body>
+    <div id='root'>
+        <div id='loader'>Loading....</div>
+    </div>
+</body>
+
+</html>

Document-Processing/code-snippet/spreadsheet/react/richtext-format-cs1/systemjs.config.js

@@ -0,0 +1,58 @@
+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/33.1.44/"
+    },
+    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",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js",
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+        "@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js",
+        "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.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: 'app', defaultExtension: 'tsx' },
+    }
+
+});
+
+System.import('app');
+
+
+