From 339f6bf9002e11797fcb2abb0eae7e3ae7e47617 Mon Sep 17 00:00:00 2001
From: Vi Nguyen <36.tuongvi@gmail.com>
Date: Mon, 14 Sep 2026 13:24:29 -0700
Subject: [PATCH 1/4] Add JSON Beautifier to side pane

---
 demo/scripts/controlsV2/mainPane/MainPane.tsx |  4 +
 .../JsonBeautifier/JsonBeautifierPane.scss    | 17 ++++
 .../JsonBeautifier/JsonBeautifierPane.tsx     | 88 +++++++++++++++++++
 .../JsonBeautifierPanePlugin.ts               | 26 ++++++
 4 files changed, 135 insertions(+)
 create mode 100644 demo/scripts/controlsV2/sidePane/JsonBeautifier/JsonBeautifierPane.scss
 create mode 100644 demo/scripts/controlsV2/sidePane/JsonBeautifier/JsonBeautifierPane.tsx
 create mode 100644 demo/scripts/controlsV2/sidePane/JsonBeautifier/JsonBeautifierPanePlugin.ts

diff --git a/demo/scripts/controlsV2/mainPane/MainPane.tsx b/demo/scripts/controlsV2/mainPane/MainPane.tsx
index e8a3945195a0..926b0f67a0d8 100644
--- a/demo/scripts/controlsV2/mainPane/MainPane.tsx
+++ b/demo/scripts/controlsV2/mainPane/MainPane.tsx
@@ -20,6 +20,7 @@ import { getTabs, tabNames } from '../tabs/getTabs';
 import { getTheme } from '../theme/themes';
 import { MarkdownPanePlugin } from '../sidePane/MarkdownPane/MarkdownPanePlugin';
 import { MarkdownPastePlugin } from 'roosterjs-content-model-markdown';
+import { JsonBeautifierPanePlugin } from '../sidePane/JsonBeautifier/JsonBeautifierPanePlugin';
 import { OptionState, UrlPlaceholder } from '../sidePane/editorOptions/OptionState';
 import { popoutButton } from '../demoButtons/popoutButton';
 import { PresetPlugin } from '../sidePane/presets/PresetPlugin';
@@ -116,6 +117,7 @@ export class MainPane extends React.Component<{}, MainPaneState> {
     private samplePickerPlugin: SamplePickerPlugin;
     private snapshots: Snapshots;
     private markdownPanePlugin: MarkdownPanePlugin;
+    private jsonBeautifierPanePlugin: JsonBeautifierPanePlugin;
     private findReplacePlugin: FindReplacePlugin;
     private findReplaceContext: FindReplaceContext;
     private imageEditPlugin: ImageEditPlugin | undefined;
@@ -157,6 +159,7 @@ export class MainPane extends React.Component<{}, MainPaneState> {
         this.formatPainterPlugin = new FormatPainterPlugin();
         this.samplePickerPlugin = new SamplePickerPlugin();
         this.markdownPanePlugin = new MarkdownPanePlugin();
+        this.jsonBeautifierPanePlugin = new JsonBeautifierPanePlugin();
 
         this.findReplaceContext = createFindReplaceContext();
         this.findReplacePlugin = new FindReplacePlugin(this.findReplaceContext);
@@ -552,6 +555,7 @@ export class MainPane extends React.Component<{}, MainPaneState> {
             this.contentModelPanePlugin,
             this.presetPlugin,
             this.markdownPanePlugin,
+            this.jsonBeautifierPanePlugin,
         ];
     }
 
diff --git a/demo/scripts/controlsV2/sidePane/JsonBeautifier/JsonBeautifierPane.scss b/demo/scripts/controlsV2/sidePane/JsonBeautifier/JsonBeautifierPane.scss
new file mode 100644
index 000000000000..dd23ae3b1262
--- /dev/null
+++ b/demo/scripts/controlsV2/sidePane/JsonBeautifier/JsonBeautifierPane.scss
@@ -0,0 +1,17 @@
+.container {
+    flex-direction: column;
+    display: flex;
+    height: 100%;
+}
+
+.textArea {
+    flex: 1;
+    width: 100%;
+    box-sizing: border-box;
+    resize: none;
+}
+
+.errorMessage {
+    color: #a80000;
+    margin: 4px 0;
+}
diff --git a/demo/scripts/controlsV2/sidePane/JsonBeautifier/JsonBeautifierPane.tsx b/demo/scripts/controlsV2/sidePane/JsonBeautifier/JsonBeautifierPane.tsx
new file mode 100644
index 000000000000..f8e7f6f17fdd
--- /dev/null
+++ b/demo/scripts/controlsV2/sidePane/JsonBeautifier/JsonBeautifierPane.tsx
@@ -0,0 +1,88 @@
+import * as React from 'react';
+import {
+    createEmptyModel,
+    createFormatContainer,
+    createParagraph,
+    createText,
+} from 'roosterjs-content-model-dom';
+import type { JsonBeautifierPaneProps } from './JsonBeautifierPanePlugin';
+
+const styles = require('./JsonBeautifierPane.scss');
+
+interface JsonBeautifierPaneState {
+    errorMessage: string;
+}
+
+export default class JsonBeautifierPane extends React.Component<
+    JsonBeautifierPaneProps,
+    JsonBeautifierPaneState
+> {
+    private json = React.createRef<HTMLTextAreaElement>();
+
+    constructor(props: JsonBeautifierPaneProps) {
+        super(props);
+        this.state = { errorMessage: '' };
+    }
+
+    private beautify = () => {
+        let formattedJson: string;
+
+        try {
+            formattedJson = JSON.stringify(JSON.parse(this.json.current.value), null, 2);
+        } catch (error) {
+            this.setState({
+                errorMessage: error instanceof Error ? error.message : 'Invalid JSON',
+            });
+            return;
+        }
+
+        const container = createFormatContainer('pre');
+        const paragraph = createParagraph(true);
+
+        paragraph.segments.push(createText(formattedJson));
+        container.blocks.push(paragraph);
+        this.props.getEditor().formatContentModel(model => {
+            model.blocks = [container];
+            return true;
+        });
+        this.setState({ errorMessage: '' });
+    };
+
+    private clear = () => {
+        this.json.current.value = '';
+        this.setState({ errorMessage: '' });
+    };
+
+    private clearEditor = () => {
+        const editor = this.props.getEditor();
+        editor.formatContentModel(model => {
+            model.blocks = createEmptyModel().blocks;
+            return true;
+        });
+    };
+
+    render() {
+        return (
+            <div className={styles.container}>
+                <p>Enter JSON to format and display in the editor.</p>
+                <textarea className={styles.textArea} title="JSON input" ref={this.json} />
+                {this.state.errorMessage ? (
+                    <div className={styles.errorMessage} role="alert">
+                        {this.state.errorMessage}
+                    </div>
+                ) : null}
+                <div>
+                    <button type="button" onClick={this.beautify}>
+                        Beautify
+                    </button>
+                    <button type="button" onClick={this.clear}>
+                        Clear
+                    </button>
+                    <button type="button" onClick={this.clearEditor}>
+                        Clear editor
+                    </button>
+                </div>
+            </div>
+        );
+    }
+}
diff --git a/demo/scripts/controlsV2/sidePane/JsonBeautifier/JsonBeautifierPanePlugin.ts b/demo/scripts/controlsV2/sidePane/JsonBeautifier/JsonBeautifierPanePlugin.ts
new file mode 100644
index 000000000000..2ee403c3dae9
--- /dev/null
+++ b/demo/scripts/controlsV2/sidePane/JsonBeautifier/JsonBeautifierPanePlugin.ts
@@ -0,0 +1,26 @@
+import JsonBeautifierPane from './JsonBeautifierPane';
+import { IEditor, PluginEvent } from 'roosterjs-content-model-types';
+import { SidePaneElementProps } from '../SidePaneElement';
+import { SidePanePluginImpl } from '../SidePanePluginImpl';
+
+export interface JsonBeautifierPaneProps extends SidePaneElementProps {
+    getEditor: () => IEditor;
+}
+
+export class JsonBeautifierPanePlugin extends SidePanePluginImpl<
+    JsonBeautifierPane,
+    JsonBeautifierPaneProps
+> {
+    constructor() {
+        super(JsonBeautifierPane, 'jsonBeautifier', 'JSON Beautifier');
+    }
+
+    onPluginEvent(e: PluginEvent) {}
+
+    getComponentProps(base: JsonBeautifierPaneProps) {
+        return {
+            ...base,
+            getEditor: () => this.editor,
+        };
+    }
+}

From eca8e2b4335448cdc853426dea55b1515ceb7e68 Mon Sep 17 00:00:00 2001
From: Vi Nguyen <36.tuongvi@gmail.com>
Date: Mon, 14 Sep 2026 13:35:55 -0700
Subject: [PATCH 2/4] remove unneeded change

---
 .../sidePane/JsonBeautifier/JsonBeautifierPanePlugin.ts       | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/demo/scripts/controlsV2/sidePane/JsonBeautifier/JsonBeautifierPanePlugin.ts b/demo/scripts/controlsV2/sidePane/JsonBeautifier/JsonBeautifierPanePlugin.ts
index 2ee403c3dae9..43664fd5761e 100644
--- a/demo/scripts/controlsV2/sidePane/JsonBeautifier/JsonBeautifierPanePlugin.ts
+++ b/demo/scripts/controlsV2/sidePane/JsonBeautifier/JsonBeautifierPanePlugin.ts
@@ -1,5 +1,5 @@
 import JsonBeautifierPane from './JsonBeautifierPane';
-import { IEditor, PluginEvent } from 'roosterjs-content-model-types';
+import { IEditor } from 'roosterjs-content-model-types';
 import { SidePaneElementProps } from '../SidePaneElement';
 import { SidePanePluginImpl } from '../SidePanePluginImpl';
 
@@ -15,8 +15,6 @@ export class JsonBeautifierPanePlugin extends SidePanePluginImpl<
         super(JsonBeautifierPane, 'jsonBeautifier', 'JSON Beautifier');
     }
 
-    onPluginEvent(e: PluginEvent) {}
-
     getComponentProps(base: JsonBeautifierPaneProps) {
         return {
             ...base,

From 42f4808eb8cbeea1443ed7ea881b22732ecfecab Mon Sep 17 00:00:00 2001
From: Vi Nguyen <36.tuongvi@gmail.com>
Date: Mon, 14 Sep 2026 13:54:34 -0700
Subject: [PATCH 3/4] support encode and decode component

---
 demo/scripts/controlsV2/mainPane/MainPane.tsx |   8 +-
 .../JsonBeautifier/JsonBeautifierPane.tsx     |  88 -------------
 .../JsonBeautifierPanePlugin.ts               |  24 ----
 .../TextUtilitiesPane.scss}                   |   6 +
 .../TextUtilities/TextUtilitiesPane.tsx       | 116 ++++++++++++++++++
 .../TextUtilities/TextUtilitiesPanePlugin.ts  |  24 ++++
 6 files changed, 150 insertions(+), 116 deletions(-)
 delete mode 100644 demo/scripts/controlsV2/sidePane/JsonBeautifier/JsonBeautifierPane.tsx
 delete mode 100644 demo/scripts/controlsV2/sidePane/JsonBeautifier/JsonBeautifierPanePlugin.ts
 rename demo/scripts/controlsV2/sidePane/{JsonBeautifier/JsonBeautifierPane.scss => TextUtilities/TextUtilitiesPane.scss} (77%)
 create mode 100644 demo/scripts/controlsV2/sidePane/TextUtilities/TextUtilitiesPane.tsx
 create mode 100644 demo/scripts/controlsV2/sidePane/TextUtilities/TextUtilitiesPanePlugin.ts

diff --git a/demo/scripts/controlsV2/mainPane/MainPane.tsx b/demo/scripts/controlsV2/mainPane/MainPane.tsx
index 926b0f67a0d8..5a9838f4d4be 100644
--- a/demo/scripts/controlsV2/mainPane/MainPane.tsx
+++ b/demo/scripts/controlsV2/mainPane/MainPane.tsx
@@ -20,7 +20,7 @@ import { getTabs, tabNames } from '../tabs/getTabs';
 import { getTheme } from '../theme/themes';
 import { MarkdownPanePlugin } from '../sidePane/MarkdownPane/MarkdownPanePlugin';
 import { MarkdownPastePlugin } from 'roosterjs-content-model-markdown';
-import { JsonBeautifierPanePlugin } from '../sidePane/JsonBeautifier/JsonBeautifierPanePlugin';
+import { TextUtilitiesPanePlugin } from '../sidePane/TextUtilities/TextUtilitiesPanePlugin';
 import { OptionState, UrlPlaceholder } from '../sidePane/editorOptions/OptionState';
 import { popoutButton } from '../demoButtons/popoutButton';
 import { PresetPlugin } from '../sidePane/presets/PresetPlugin';
@@ -117,7 +117,7 @@ export class MainPane extends React.Component<{}, MainPaneState> {
     private samplePickerPlugin: SamplePickerPlugin;
     private snapshots: Snapshots;
     private markdownPanePlugin: MarkdownPanePlugin;
-    private jsonBeautifierPanePlugin: JsonBeautifierPanePlugin;
+    private textUtilitiesPanePlugin: TextUtilitiesPanePlugin;
     private findReplacePlugin: FindReplacePlugin;
     private findReplaceContext: FindReplaceContext;
     private imageEditPlugin: ImageEditPlugin | undefined;
@@ -159,7 +159,7 @@ export class MainPane extends React.Component<{}, MainPaneState> {
         this.formatPainterPlugin = new FormatPainterPlugin();
         this.samplePickerPlugin = new SamplePickerPlugin();
         this.markdownPanePlugin = new MarkdownPanePlugin();
-        this.jsonBeautifierPanePlugin = new JsonBeautifierPanePlugin();
+        this.textUtilitiesPanePlugin = new TextUtilitiesPanePlugin();
 
         this.findReplaceContext = createFindReplaceContext();
         this.findReplacePlugin = new FindReplacePlugin(this.findReplaceContext);
@@ -555,7 +555,7 @@ export class MainPane extends React.Component<{}, MainPaneState> {
             this.contentModelPanePlugin,
             this.presetPlugin,
             this.markdownPanePlugin,
-            this.jsonBeautifierPanePlugin,
+            this.textUtilitiesPanePlugin,
         ];
     }
 
diff --git a/demo/scripts/controlsV2/sidePane/JsonBeautifier/JsonBeautifierPane.tsx b/demo/scripts/controlsV2/sidePane/JsonBeautifier/JsonBeautifierPane.tsx
deleted file mode 100644
index f8e7f6f17fdd..000000000000
--- a/demo/scripts/controlsV2/sidePane/JsonBeautifier/JsonBeautifierPane.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import * as React from 'react';
-import {
-    createEmptyModel,
-    createFormatContainer,
-    createParagraph,
-    createText,
-} from 'roosterjs-content-model-dom';
-import type { JsonBeautifierPaneProps } from './JsonBeautifierPanePlugin';
-
-const styles = require('./JsonBeautifierPane.scss');
-
-interface JsonBeautifierPaneState {
-    errorMessage: string;
-}
-
-export default class JsonBeautifierPane extends React.Component<
-    JsonBeautifierPaneProps,
-    JsonBeautifierPaneState
-> {
-    private json = React.createRef<HTMLTextAreaElement>();
-
-    constructor(props: JsonBeautifierPaneProps) {
-        super(props);
-        this.state = { errorMessage: '' };
-    }
-
-    private beautify = () => {
-        let formattedJson: string;
-
-        try {
-            formattedJson = JSON.stringify(JSON.parse(this.json.current.value), null, 2);
-        } catch (error) {
-            this.setState({
-                errorMessage: error instanceof Error ? error.message : 'Invalid JSON',
-            });
-            return;
-        }
-
-        const container = createFormatContainer('pre');
-        const paragraph = createParagraph(true);
-
-        paragraph.segments.push(createText(formattedJson));
-        container.blocks.push(paragraph);
-        this.props.getEditor().formatContentModel(model => {
-            model.blocks = [container];
-            return true;
-        });
-        this.setState({ errorMessage: '' });
-    };
-
-    private clear = () => {
-        this.json.current.value = '';
-        this.setState({ errorMessage: '' });
-    };
-
-    private clearEditor = () => {
-        const editor = this.props.getEditor();
-        editor.formatContentModel(model => {
-            model.blocks = createEmptyModel().blocks;
-            return true;
-        });
-    };
-
-    render() {
-        return (
-            <div className={styles.container}>
-                <p>Enter JSON to format and display in the editor.</p>
-                <textarea className={styles.textArea} title="JSON input" ref={this.json} />
-                {this.state.errorMessage ? (
-                    <div className={styles.errorMessage} role="alert">
-                        {this.state.errorMessage}
-                    </div>
-                ) : null}
-                <div>
-                    <button type="button" onClick={this.beautify}>
-                        Beautify
-                    </button>
-                    <button type="button" onClick={this.clear}>
-                        Clear
-                    </button>
-                    <button type="button" onClick={this.clearEditor}>
-                        Clear editor
-                    </button>
-                </div>
-            </div>
-        );
-    }
-}
diff --git a/demo/scripts/controlsV2/sidePane/JsonBeautifier/JsonBeautifierPanePlugin.ts b/demo/scripts/controlsV2/sidePane/JsonBeautifier/JsonBeautifierPanePlugin.ts
deleted file mode 100644
index 43664fd5761e..000000000000
--- a/demo/scripts/controlsV2/sidePane/JsonBeautifier/JsonBeautifierPanePlugin.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import JsonBeautifierPane from './JsonBeautifierPane';
-import { IEditor } from 'roosterjs-content-model-types';
-import { SidePaneElementProps } from '../SidePaneElement';
-import { SidePanePluginImpl } from '../SidePanePluginImpl';
-
-export interface JsonBeautifierPaneProps extends SidePaneElementProps {
-    getEditor: () => IEditor;
-}
-
-export class JsonBeautifierPanePlugin extends SidePanePluginImpl<
-    JsonBeautifierPane,
-    JsonBeautifierPaneProps
-> {
-    constructor() {
-        super(JsonBeautifierPane, 'jsonBeautifier', 'JSON Beautifier');
-    }
-
-    getComponentProps(base: JsonBeautifierPaneProps) {
-        return {
-            ...base,
-            getEditor: () => this.editor,
-        };
-    }
-}
diff --git a/demo/scripts/controlsV2/sidePane/JsonBeautifier/JsonBeautifierPane.scss b/demo/scripts/controlsV2/sidePane/TextUtilities/TextUtilitiesPane.scss
similarity index 77%
rename from demo/scripts/controlsV2/sidePane/JsonBeautifier/JsonBeautifierPane.scss
rename to demo/scripts/controlsV2/sidePane/TextUtilities/TextUtilitiesPane.scss
index dd23ae3b1262..930832506244 100644
--- a/demo/scripts/controlsV2/sidePane/JsonBeautifier/JsonBeautifierPane.scss
+++ b/demo/scripts/controlsV2/sidePane/TextUtilities/TextUtilitiesPane.scss
@@ -15,3 +15,9 @@
     color: #a80000;
     margin: 4px 0;
 }
+
+.buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+}
diff --git a/demo/scripts/controlsV2/sidePane/TextUtilities/TextUtilitiesPane.tsx b/demo/scripts/controlsV2/sidePane/TextUtilities/TextUtilitiesPane.tsx
new file mode 100644
index 000000000000..5856f7eded05
--- /dev/null
+++ b/demo/scripts/controlsV2/sidePane/TextUtilities/TextUtilitiesPane.tsx
@@ -0,0 +1,116 @@
+import * as React from 'react';
+import {
+    createEmptyModel,
+    createFormatContainer,
+    createParagraph,
+    createText,
+} from 'roosterjs-content-model-dom';
+import type { TextUtilitiesPaneProps } from './TextUtilitiesPanePlugin';
+
+const styles = require('./TextUtilitiesPane.scss');
+
+interface TextUtilitiesPaneState {
+    errorMessage: string;
+}
+
+export default class TextUtilitiesPane extends React.Component<
+    TextUtilitiesPaneProps,
+    TextUtilitiesPaneState
+> {
+    private text = React.createRef<HTMLTextAreaElement>();
+
+    constructor(props: TextUtilitiesPaneProps) {
+        super(props);
+        this.state = { errorMessage: '' };
+    }
+
+    private beautifyJson = () => {
+        this.applyTransformation(
+            value => JSON.stringify(JSON.parse(value), null, 2),
+            'Invalid JSON'
+        );
+    };
+
+    private encodeUriComponent = () => {
+        this.applyTransformation(
+            value => encodeURIComponent(value),
+            'Unable to encode URI component'
+        );
+    };
+
+    private decodeUriComponent = () => {
+        this.applyTransformation(value => decodeURIComponent(value), 'Invalid URI component');
+    };
+
+    private applyTransformation = (transform: (value: string) => string, fallbackError: string) => {
+        let result: string;
+
+        try {
+            result = transform(this.text.current.value);
+        } catch (error) {
+            this.setState({
+                errorMessage: error instanceof Error ? error.message : fallbackError,
+            });
+            return;
+        }
+
+        this.setEditorText(result);
+    };
+
+    private setEditorText = (text: string) => {
+        const container = createFormatContainer('pre');
+        const paragraph = createParagraph(true);
+
+        paragraph.segments.push(createText(text));
+        container.blocks.push(paragraph);
+        this.props.getEditor().formatContentModel(model => {
+            model.blocks = [container];
+            return true;
+        });
+        this.setState({ errorMessage: '' });
+    };
+
+    private clear = () => {
+        this.text.current.value = '';
+        this.setState({ errorMessage: '' });
+    };
+
+    private clearEditor = () => {
+        const editor = this.props.getEditor();
+        editor.formatContentModel(model => {
+            model.blocks = createEmptyModel().blocks;
+            return true;
+        });
+    };
+
+    render() {
+        return (
+            <div className={styles.container}>
+                <p>Enter text to transform and display in the editor.</p>
+                <textarea className={styles.textArea} title="Text input" ref={this.text} />
+                {this.state.errorMessage ? (
+                    <div className={styles.errorMessage} role="alert">
+                        {this.state.errorMessage}
+                    </div>
+                ) : null}
+                <div className={styles.buttons}>
+                    <button type="button" onClick={this.beautifyJson}>
+                        Beautify JSON
+                    </button>
+                    <button type="button" onClick={this.encodeUriComponent}>
+                        Encode URI component
+                    </button>
+                    <button type="button" onClick={this.decodeUriComponent}>
+                        Decode URI component
+                    </button>
+                    <button type="button" onClick={this.clear}>
+                        Clear
+                    </button>
+                    <button type="button" onClick={this.clearEditor}>
+                        Clear editor
+                    </button>
+                </div>
+            </div>
+        );
+    }
+}
diff --git a/demo/scripts/controlsV2/sidePane/TextUtilities/TextUtilitiesPanePlugin.ts b/demo/scripts/controlsV2/sidePane/TextUtilities/TextUtilitiesPanePlugin.ts
new file mode 100644
index 000000000000..54ca5fde24eb
--- /dev/null
+++ b/demo/scripts/controlsV2/sidePane/TextUtilities/TextUtilitiesPanePlugin.ts
@@ -0,0 +1,24 @@
+import TextUtilitiesPane from './TextUtilitiesPane';
+import { IEditor } from 'roosterjs-content-model-types';
+import { SidePaneElementProps } from '../SidePaneElement';
+import { SidePanePluginImpl } from '../SidePanePluginImpl';
+
+export interface TextUtilitiesPaneProps extends SidePaneElementProps {
+    getEditor: () => IEditor;
+}
+
+export class TextUtilitiesPanePlugin extends SidePanePluginImpl<
+    TextUtilitiesPane,
+    TextUtilitiesPaneProps
+> {
+    constructor() {
+        super(TextUtilitiesPane, 'textUtilities', 'Text Utilities');
+    }
+
+    getComponentProps(base: TextUtilitiesPaneProps) {
+        return {
+            ...base,
+            getEditor: () => this.editor,
+        };
+    }
+}

From 6d422059559133798df7f8abc77b4e40df47c569 Mon Sep 17 00:00:00 2001
From: Vi Nguyen <36.tuongvi@gmail.com>
Date: Mon, 14 Sep 2026 14:16:55 -0700
Subject: [PATCH 4/4] support encode/decode base64

---
 .../TextUtilities/TextUtilitiesPane.tsx       | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/demo/scripts/controlsV2/sidePane/TextUtilities/TextUtilitiesPane.tsx b/demo/scripts/controlsV2/sidePane/TextUtilities/TextUtilitiesPane.tsx
index 5856f7eded05..5dc61d53e209 100644
--- a/demo/scripts/controlsV2/sidePane/TextUtilities/TextUtilitiesPane.tsx
+++ b/demo/scripts/controlsV2/sidePane/TextUtilities/TextUtilitiesPane.tsx
@@ -42,6 +42,14 @@ export default class TextUtilitiesPane extends React.Component<
         this.applyTransformation(value => decodeURIComponent(value), 'Invalid URI component');
     };
 
+    private encodeBase64 = () => {
+        this.applyTransformation(value => encodeTextToBase64(value), 'Unable to encode Base64');
+    };
+
+    private decodeBase64 = () => {
+        this.applyTransformation(value => decodeBase64ToText(value), 'Invalid Base64');
+    };
+
     private applyTransformation = (transform: (value: string) => string, fallbackError: string) => {
         let result: string;
 
@@ -103,6 +111,12 @@ export default class TextUtilitiesPane extends React.Component<
                     <button type="button" onClick={this.decodeUriComponent}>
                         Decode URI component
                     </button>
+                    <button type="button" onClick={this.encodeBase64}>
+                        Encode as Base64
+                    </button>
+                    <button type="button" onClick={this.decodeBase64}>
+                        Decode from Base64
+                    </button>
                     <button type="button" onClick={this.clear}>
                         Clear
                     </button>
@@ -114,3 +128,30 @@ export default class TextUtilitiesPane extends React.Component<
         );
     }
 }
+
+function encodeTextToBase64(value: string): string {
+    const encodedValue = encodeURIComponent(value);
+    let binaryValue = '';
+
+    for (let i = 0; i < encodedValue.length; i++) {
+        if (encodedValue[i] == '%') {
+            binaryValue += String.fromCharCode(parseInt(encodedValue.substr(i + 1, 2), 16));
+            i += 2;
+        } else {
+            binaryValue += encodedValue[i];
+        }
+    }
+
+    return btoa(binaryValue);
+}
+
+function decodeBase64ToText(value: string): string {
+    const binaryValue = atob(value);
+    let encodedValue = '';
+
+    for (let i = 0; i < binaryValue.length; i++) {
+        encodedValue += '%' + ('0' + binaryValue.charCodeAt(i).toString(16)).slice(-2);
+    }
+
+    return decodeURIComponent(encodedValue);
+}