diff --git a/force-app/main/default/lwc/inlineRichTextEditor/README.md b/force-app/main/default/lwc/inlineRichTextEditor/README.md
new file mode 100644
index 000000000..40730ea05
--- /dev/null
+++ b/force-app/main/default/lwc/inlineRichTextEditor/README.md
@@ -0,0 +1,27 @@
+# Inline Rich Text Editor
+
+## Description
+
+The `inlineRichTextEditor` is a Lightning Web Component designed for use in Salesforce Screen Flows. It provides a clean, inline editing experience for rich text fields, mimicking the look and feel of a standard Salesforce record detail page.
+
+When a user sees the component, it displays the rich text content. Clicking on the text or an adjacent pencil icon switches the component to an edit mode, revealing a rich text input field. The component saves automatically when the user clicks away (on blur), providing a seamless experience.
+
+## Features
+
+- **Inline Editing**: View and edit rich text directly within a flow screen.
+- **Seamless Save**: Changes are saved automatically when the user clicks out of the editor.
+- **Clean UI**: The formatting toolbar is hidden to maintain a simple, clean interface. Keyboard shortcuts for formatting (bold, italics, etc.) are still supported.
+- **Flow Ready**: Designed to be used as a screen component in flows, with a `value` property to pass the text content in and out.
+- **Default Value**: Supports a default value, with pre-loaded sample text if no value is provided.
+
+## Setup
+
+1. Add the `inlineRichTextEditor` to your flow screen.
+2. In the component properties, you can set the `value` attribute:
+ - **Input**: Pass a flow variable containing rich text into the `value` property to set the initial text.
+ - **Output**: The component's output `value` will contain the edited rich text. You can map this to a flow variable to use the updated text later in your flow.
+
+## Known Limitations
+
+- **Toolbar Visibility**: The rich text editor's formatting toolbar is intentionally hidden to provide a cleaner UI. All formatting must be done via standard keyboard shortcuts (e.g., Cmd/Ctrl+B for bold).
+- **Top Border**: Due to the Salesforce Lightning Web Components' Shadow DOM encapsulation, a thin border may appear at the top of the rich text editor when in edit mode. Standard CSS cannot remove this, and it is a known limitation of the underlying `lightning-input-rich-text` component.
\ No newline at end of file
diff --git a/force-app/main/default/lwc/inlineRichTextEditor/inlineRichTextEditor.css b/force-app/main/default/lwc/inlineRichTextEditor/inlineRichTextEditor.css
new file mode 100644
index 000000000..094524d0b
--- /dev/null
+++ b/force-app/main/default/lwc/inlineRichTextEditor/inlineRichTextEditor.css
@@ -0,0 +1,4 @@
+.slds-form-element__static {
+ width: 100%;
+ cursor: pointer;
+}
\ No newline at end of file
diff --git a/force-app/main/default/lwc/inlineRichTextEditor/inlineRichTextEditor.html b/force-app/main/default/lwc/inlineRichTextEditor/inlineRichTextEditor.html
new file mode 100644
index 000000000..3a8e79d25
--- /dev/null
+++ b/force-app/main/default/lwc/inlineRichTextEditor/inlineRichTextEditor.html
@@ -0,0 +1,29 @@
+
+
Default Title
Default description
Bullet 1
Bullet 2
Click the pencil to edit
'; + } + + handleEdit() { + this.isEditing = true; + this._focusOnRender = true; + } + + handleSave() { + this.isEditing = false; + const valueChangeEvent = new CustomEvent('valuechange', { + detail: { + value: this._value + } + }); + this.dispatchEvent(valueChangeEvent); + } + + handleChange(event) { + this._value = event.target.value; + } +} \ No newline at end of file diff --git a/force-app/main/default/lwc/inlineRichTextEditor/inlineRichTextEditor.js-meta.xml b/force-app/main/default/lwc/inlineRichTextEditor/inlineRichTextEditor.js-meta.xml new file mode 100644 index 000000000..b3ceed2de --- /dev/null +++ b/force-app/main/default/lwc/inlineRichTextEditor/inlineRichTextEditor.js-meta.xml @@ -0,0 +1,13 @@ + +