feat: Add inlineRichTextEditor LWC

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. 

force-app/main/default/lwc/inlineRichTextEditor/inlineRichTextEditor.css

@@ -0,0 +1,4 @@
+.slds-form-element__static {
+    width: 100%;
+    cursor: pointer;
+} 

force-app/main/default/lwc/inlineRichTextEditor/inlineRichTextEditor.html

@@ -0,0 +1,29 @@
+<template>
+    <div class="slds-form-element slds-form-element_edit slds-grow">
+        <div class="slds-form-element__control slds-grid">
+            <template if:false={isEditing}>
+                <div class="slds-form-element__static" onclick={handleEdit}>
+                    <lightning-formatted-rich-text value={displayValue}></lightning-formatted-rich-text>
+                </div>
+                <lightning-button-icon
+                    icon-name="utility:edit"
+                    variant="bare"
+                    alternative-text="Edit"
+                    class="slds-m-left_x-small"
+                    onclick={handleEdit}
+                ></lightning-button-icon>
+            </template>
+            <template if:true={isEditing}>
+                <div class="slds-rich-text-editor slds-form-element__control slds-grow">
+                    <lightning-input-rich-text
+                        value={_value}
+                        onchange={handleChange}
+                        onblur={handleSave}
+                        formats="[]"
+                    >
+                    </lightning-input-rich-text>
+                </div>
+            </template>
+        </div>
+    </div>
+</template> 

force-app/main/default/lwc/inlineRichTextEditor/inlineRichTextEditor.js

@@ -0,0 +1,53 @@
+import { LightningElement, api, track } from 'lwc';
+
+export default class InlineRichTextEditor extends LightningElement {
+    @api
+    get value() {
+        return this._value;
+    }
+    set value(val) {
+        if (val && !this._initialValueSet) {
+            this._value = val;
+            this._initialValueSet = true;
+        }
+    }
+
+    @track _value = '<p><b>Default Title</b></p><p><i>Default description</i></p><ul><li><p>Bullet 1</p></li><li><p>Bullet 2</p></li></ul>';
+    @track isEditing = false;
+
+    _initialValueSet = false;
+    _focusOnRender = false;
+
+    renderedCallback() {
+        if (this._focusOnRender) {
+            this._focusOnRender = false;
+            const input = this.template.querySelector('lightning-input-rich-text');
+            if (input) {
+                input.focus();
+            }
+        }
+    }
+
+    get displayValue() {
+        return this._value || '<p>Click the pencil to edit</p>';
+    }
+
+    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;
+    }
+} 

force-app/main/default/lwc/inlineRichTextEditor/inlineRichTextEditor.js-meta.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>58.0</apiVersion>
+    <isExposed>true</isExposed>
+    <targets>
+        <target>lightning__FlowScreen</target>
+    </targets>
+    <targetConfigs>
+        <targetConfig targets="lightning__FlowScreen">
+            <property name="value" type="String" label="Rich Text Value" description="The rich text value to display and edit."/>
+        </targetConfig>
+    </targetConfigs>
+</LightningComponentBundle>