From 9b4879e5044a0c095db9579af5a362ed6b17ebaf Mon Sep 17 00:00:00 2001
From: Gregory Douglas <gdouglas@palantir.com>
Date: Thu, 21 Nov 2024 18:03:23 -0500
Subject: [PATCH 1/9] Update EditableTextExample

---
 .../core-examples/editableTextExample.tsx     | 181 ++++++++----------
 1 file changed, 80 insertions(+), 101 deletions(-)

diff --git a/packages/docs-app/src/examples/core-examples/editableTextExample.tsx b/packages/docs-app/src/examples/core-examples/editableTextExample.tsx
index ade67e3272..99a3e8bdf9 100644
--- a/packages/docs-app/src/examples/core-examples/editableTextExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/editableTextExample.tsx
@@ -1,5 +1,5 @@
 /*
- * Copyright 2016 Palantir Technologies, Inc. All rights reserved.
+ * Copyright 2024 Palantir Technologies, Inc. All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,109 +23,88 @@ import { IntentSelect } from "./common/intentSelect";
 
 const INPUT_ID = "EditableTextExample-max-length";
 
-export interface EditableTextExampleState {
-    alwaysRenderInput?: boolean;
-    confirmOnEnterKey?: boolean;
-    disabled?: boolean;
-    intent?: Intent;
-    maxLength?: number;
-    report?: string;
-    selectAllOnFocus?: boolean;
-}
+export const EditableTextExample: React.FC<ExampleProps> = props => {
+    const [alwaysRenderInput, setAlwaysRenderInput] = React.useState(false);
+    const [confirmOnEnterKey, setConfirmOnEnterKey] = React.useState(false);
+    const [disabled, setDisabled] = React.useState(false);
+    const [intent, setIntent] = React.useState<Intent | undefined>(undefined);
+    const [maxLength, setMaxLength] = React.useState<number | undefined>(undefined);
+    const [report, setReport] = React.useState("");
+    const [selectAllOnFocus, setSelectAllOnFocus] = React.useState(false);
 
-export class EditableTextExample extends React.PureComponent<ExampleProps, EditableTextExampleState> {
-    public state: EditableTextExampleState = {
-        alwaysRenderInput: false,
-        confirmOnEnterKey: false,
-        disabled: false,
-        report: "",
-        selectAllOnFocus: false,
-    };
+    const handleMaxLengthChange = React.useCallback(
+        (value: number) => {
+            if (maxLength === 0) {
+                setMaxLength(undefined);
+            } else {
+                setMaxLength(value);
+                setReport(report.slice(0, value));
+            }
+        },
+        [maxLength, report],
+    );
 
-    private toggleDisabled = handleBooleanChange((disabled: boolean) => this.setState({ disabled }));
+    const handleReportChange = React.useCallback((value: string) => setReport(value), []);
 
-    private handleIntentChange = (intent: Intent) => this.setState({ intent });
-
-    private toggleSelectAll = handleBooleanChange(selectAllOnFocus => this.setState({ selectAllOnFocus }));
-
-    private toggleSwap = handleBooleanChange(confirmOnEnterKey => this.setState({ confirmOnEnterKey }));
-
-    private toggleAlwaysRenderInput = handleBooleanChange(alwaysRenderInput => this.setState({ alwaysRenderInput }));
-
-    public render() {
-        return (
-            <Example options={this.renderOptions()} {...this.props}>
-                <H1>
-                    <EditableText
-                        alwaysRenderInput={this.state.alwaysRenderInput}
-                        disabled={this.state.disabled}
-                        intent={this.state.intent}
-                        maxLength={this.state.maxLength}
-                        placeholder="Edit title..."
-                        selectAllOnFocus={this.state.selectAllOnFocus}
-                    />
-                </H1>
-                <EditableText
-                    alwaysRenderInput={this.state.alwaysRenderInput}
-                    disabled={this.state.disabled}
-                    intent={this.state.intent}
-                    maxLength={this.state.maxLength}
-                    maxLines={12}
-                    minLines={3}
-                    multiline={true}
-                    placeholder="Edit report... (controlled, multiline)"
-                    selectAllOnFocus={this.state.selectAllOnFocus}
-                    confirmOnEnterKey={this.state.confirmOnEnterKey}
-                    value={this.state.report}
-                    onChange={this.handleReportChange}
+    const options = (
+        <>
+            <H5>Props</H5>
+            <IntentSelect intent={intent} onChange={setIntent} />
+            <FormGroup label="Max length" labelFor={INPUT_ID}>
+                <NumericInput
+                    className={Classes.FORM_CONTENT}
+                    fill={true}
+                    id={INPUT_ID}
+                    max={300}
+                    min={0}
+                    onValueChange={handleMaxLengthChange}
+                    placeholder="Unlimited"
+                    value={maxLength || ""}
                 />
-            </Example>
-        );
-    }
+            </FormGroup>
+            <Switch checked={disabled} label="Disabled" onChange={handleBooleanChange(setDisabled)} />
+            <Switch
+                checked={selectAllOnFocus}
+                label="Select all on focus"
+                onChange={handleBooleanChange(setSelectAllOnFocus)}
+            />
+            <Switch checked={confirmOnEnterKey} onChange={handleBooleanChange(setConfirmOnEnterKey)}>
+                Swap keypress for confirm and newline (multiline only)
+            </Switch>
+            <Switch
+                checked={alwaysRenderInput}
+                label="Always render input"
+                onChange={handleBooleanChange(setAlwaysRenderInput)}
+            />
+        </>
+    );
 
-    private renderOptions() {
-        return (
-            <>
-                <H5>Props</H5>
-                <IntentSelect intent={this.state.intent} onChange={this.handleIntentChange} />
-                <FormGroup label="Max length" labelFor={INPUT_ID}>
-                    <NumericInput
-                        className={Classes.FORM_CONTENT}
-                        fill={true}
-                        id={INPUT_ID}
-                        max={300}
-                        min={0}
-                        onValueChange={this.handleMaxLengthChange}
-                        placeholder="Unlimited"
-                        value={this.state.maxLength || ""}
-                    />
-                </FormGroup>
-                <Switch checked={this.state.disabled} label="Disabled" onChange={this.toggleDisabled} />
-                <Switch
-                    checked={this.state.selectAllOnFocus}
-                    label="Select all on focus"
-                    onChange={this.toggleSelectAll}
-                />
-                <Switch checked={this.state.confirmOnEnterKey} onChange={this.toggleSwap}>
-                    Swap keypress for confirm and newline (multiline only)
-                </Switch>
-                <Switch
-                    checked={this.state.alwaysRenderInput}
-                    label="Always render input"
-                    onChange={this.toggleAlwaysRenderInput}
+    return (
+        <Example options={options} {...props}>
+            <H1>
+                <EditableText
+                    alwaysRenderInput={alwaysRenderInput}
+                    disabled={disabled}
+                    intent={intent}
+                    maxLength={maxLength}
+                    placeholder="Edit title..."
+                    selectAllOnFocus={selectAllOnFocus}
                 />
-            </>
-        );
-    }
-
-    private handleReportChange = (report: string) => this.setState({ report });
-
-    private handleMaxLengthChange = (maxLength: number) => {
-        if (maxLength === 0) {
-            this.setState({ maxLength: undefined });
-        } else {
-            const report = this.state.report.slice(0, maxLength);
-            this.setState({ maxLength, report });
-        }
-    };
-}
+            </H1>
+            <EditableText
+                alwaysRenderInput={alwaysRenderInput}
+                disabled={disabled}
+                intent={intent}
+                maxLength={maxLength}
+                maxLines={12}
+                minLines={3}
+                multiline={true}
+                placeholder="Edit report... (controlled, multiline)"
+                selectAllOnFocus={selectAllOnFocus}
+                confirmOnEnterKey={confirmOnEnterKey}
+                value={report}
+                onChange={handleReportChange}
+            />
+        </Example>
+    );
+};

From f3629fb21fd27b329143e5e34d412073bb6eec26 Mon Sep 17 00:00:00 2001
From: Greg Douglas <GWShark0@gmail.com>
Date: Thu, 12 Dec 2024 13:59:21 -0500
Subject: [PATCH 2/9] Rewrite EditableText docs

---
 .../components/editable-text/editable-text.md | 74 +++++++++++--------
 .../core-examples/editableTextExamples.tsx    | 58 +++++++++++++++
 .../src/examples/core-examples/index.ts       |  1 +
 3 files changed, 104 insertions(+), 29 deletions(-)
 create mode 100644 packages/docs-app/src/examples/core-examples/editableTextExamples.tsx

diff --git a/packages/core/src/components/editable-text/editable-text.md b/packages/core/src/components/editable-text/editable-text.md
index 1f593bd14f..67efe0f4fe 100644
--- a/packages/core/src/components/editable-text/editable-text.md
+++ b/packages/core/src/components/editable-text/editable-text.md
@@ -1,18 +1,34 @@
 @# Editable text
 
-__EditableText__ is an interactive component which appears as normal UI text. It transforms into an interactive
-text input field when a user hovers and/or focuses on it.
+**EditableText** is an interactive component that displays as static text but
+visually resembles an input field on hover. When clicked or focused,
+it transforms into a text input, allowing for inline text editing.
 
-The text input inherits all font styling from its ancestors, making for a seamless transition between reading and
-editing text.
+The text input inherits font styling from its parent elements, making for a
+seamless transition between reading and editing text. **EditableText** is ideal
+for inline renaming, editable descriptions, or simple text updates. You should
+not use **EditableText** when a more static, always-editable [**InputGroup**](#core/components/input-group)
+or [**TextArea**](#core/components/text-area) component would suffice.
 
-You might use this component for inline renaming, or for an
-[editable multiline description](#core/components/editable-text.multiline-mode).
-You should not use __EditableText__ when a more static, always-editable
-[__InputGroup__](#core/components/input-group) or [__TextArea__](#core/components/text-area)
-component would suffice.
+@## Import
 
-@reactExample EditableTextExample
+```tsx
+import { EditableText } from "@blueprintjs/core";
+```
+
+@## Usage
+
+**EditableText** can be used in both controlled and uncontrolled modes, similar
+to a standard React [`<input>` element](https://react.dev/reference/react-dom/components/input).
+Use the `value` prop for controlled usage, and `defaultValue` for uncontrolled usage. Use `onChange` to listen to
+ongoing updates and use `onConfirm` and `onCancel` to listen only to completed or canceled edits.
+
+The `onConfirm` and `onCancel` callbacks are invoked based on user interaction. The user presses <kbd>Enter</kbd>
+(or <kbd>Command + Enter</kbd> when multiline) or blurs the input to confirm the current value, or presses
+<kbd>Escape</kbd> to cancel. Canceling resets the field to the last confirmed value. Neither callback is invoked if the
+value is unchanged.
+
+@reactCodeExample EditableTextBasicExample
 
 <div class="@ns-callout @ns-intent-danger @ns-icon-error @ns-callout-has-body-content">
     <h5 class="@ns-heading">Centering EditableText</h5>
@@ -23,34 +39,34 @@ you should center the component via flexbox or with `position` and `transform: t
 
 </div>
 
-
 @## Multiline mode
 
-By default, __EditableText__ supports _exactly one line of text_ and will grow or shrink horizontally based on the
-length of text.
-
-You may enable the `multiline` prop to use a `<textarea>` which spans multiple lines instead of a single-line
-`<input type="text">`. Multiline mode always appears at 100% width and adjusts _vertically_ based on length of text.
-Use the `minLines` and `maxLines` props to constrain the height of the component.
-
-```tsx
-<EditableText multiline={true} minLines={3} maxLines={12} {...props} />
-```
+By default, **EditableText** supports a single line of text and resizes horizontally as needed.
+Enabling the `multiline` prop transforms it into a `<textarea>`, which grows and shrinks vertically
+as content changes. Use the `minLines` and `maxLines` props to constrain the height of the component.
 
 Users may confirm text in multiline mode by pressing <kbd>Ctrl + Enter</kbd> or <kbd>Command + Enter</kbd> rather than
 <kbd>Enter</kbd>. (Pressing the <kbd>Enter</kbd> key by itself moves the cursor to the next line.) This behavior
 can be inverted with the `confirmOnEnterKey` prop.
 
-@## Usage
+@reactCodeExample EditableTextMultilineExample
 
-__EditableText__ is used like an [`<input>` element](https://facebook.github.io/react/docs/forms.html) and supports
-controlled or uncontrolled usage through the `value` or `defaultValue` props, respectively. Use `onChange` to listen to
-ongoing updates and use `onConfirm` and `onCancel` to listen only to completed or canceled edits.
+@## Intent
 
-The `onConfirm` and `onCancel` callbacks are invoked based on user interaction. The user presses <kbd>Enter</kbd>
-(or <kbd>Command + Enter</kbd> when multiline) or blurs the input to confirm the current value, or presses
-<kbd>Escape</kbd> to cancel. Canceling resets the field to the last confirmed value. Neither callback is invoked if the
-value is unchanged.
+The `intent` prop controls the visual appearance of **EditableText**, similar to
+[**InputGroup**](#core/components/input-group) and [**TextArea**](#core/components/text-area).
+
+@reactCodeExample EditableTextIntentExample
+
+@## Select text on focus
+
+Enable `selectAllOnFocus` to automatically select all text when the input is focused.
+
+@reactCodeExample EditableTextSelectExample
+
+@## Interactive Playground
+
+@reactExample EditableTextExample
 
 @## Props interface
 
diff --git a/packages/docs-app/src/examples/core-examples/editableTextExamples.tsx b/packages/docs-app/src/examples/core-examples/editableTextExamples.tsx
new file mode 100644
index 0000000000..41a0831306
--- /dev/null
+++ b/packages/docs-app/src/examples/core-examples/editableTextExamples.tsx
@@ -0,0 +1,58 @@
+/* !
+ * (c) Copyright 2024 Palantir Technologies Inc. All rights reserved.
+ */
+
+import dedent from "dedent";
+import * as React from "react";
+
+import { EditableText } from "@blueprintjs/core";
+import { CodeExample, type ExampleProps } from "@blueprintjs/docs-theme";
+
+export const EditableTextBasicExample: React.FC<ExampleProps> = props => {
+    const code = `<EditableText placeholder="Click to edit..." onConfirm={...} onCancel={...} />`;
+    return (
+        <CodeExample code={code} {...props}>
+            <EditableText
+                placeholder="Click to edit..."
+                // eslint-disable-next-line no-console
+                onConfirm={value => console.log("Confirmed:", value)}
+                // eslint-disable-next-line no-console
+                onCancel={() => console.log("Edit canceled")}
+            />
+        </CodeExample>
+    );
+};
+
+export const EditableTextMultilineExample: React.FC<ExampleProps> = props => {
+    const code = `<EditableText multiline={true} minLines={3} maxLines={5} placeholder="Click to edit multiple lines..." />`;
+    return (
+        <CodeExample code={code} {...props}>
+            <EditableText multiline={true} minLines={3} maxLines={5} placeholder="Click to edit multiple lines..." />
+        </CodeExample>
+    );
+};
+
+export const EditableTextIntentExample: React.FC<ExampleProps> = props => {
+    const code = dedent`
+        <EditableText intent="primary" placeholder="Primary editable text..." />
+        <EditableText intent="success" placeholder="Success editable text..." />
+        <EditableText intent="warning" placeholder="Warning editable text..." />
+        <EditableText intent="danger" placeholder="Danger editable text..." />`;
+    return (
+        <CodeExample code={code} {...props}>
+            <EditableText intent="primary" placeholder="Primary editable text..." />
+            <EditableText intent="success" placeholder="Success editable text..." />
+            <EditableText intent="warning" placeholder="Warning editable text..." />
+            <EditableText intent="danger" placeholder="Danger editable text..." />
+        </CodeExample>
+    );
+};
+
+export const EditableTextSelectExample: React.FC<ExampleProps> = props => {
+    const code = `<EditableText selectAllOnFocus={true} value="Click to select this text." />`;
+    return (
+        <CodeExample code={code} {...props}>
+            <EditableText selectAllOnFocus={true} value="Click to select this text." />
+        </CodeExample>
+    );
+};
diff --git a/packages/docs-app/src/examples/core-examples/index.ts b/packages/docs-app/src/examples/core-examples/index.ts
index 4c5d86b45d..2f9a7c1d4e 100644
--- a/packages/docs-app/src/examples/core-examples/index.ts
+++ b/packages/docs-app/src/examples/core-examples/index.ts
@@ -43,6 +43,7 @@ export * from "./dividerPlaygroundExample";
 export * from "./drawerExample";
 export * from "./dropdownMenuExample";
 export * from "./editableTextExample";
+export * from "./editableTextExamples";
 export * from "./entityTitleExample";
 export * from "./fileInputExample";
 export * from "./focusExample";

From eb171c03d58a67e4bfa96ba5123211574fd53abd Mon Sep 17 00:00:00 2001
From: Greg Douglas <GWShark0@gmail.com>
Date: Thu, 12 Dec 2024 14:41:39 -0500
Subject: [PATCH 3/9] Rename EditableText to EditableTextPlayground

---
 packages/core/src/components/editable-text/editable-text.md     | 2 +-
 ...ditableTextExample.tsx => editableTextPlaygroundExample.tsx} | 2 +-
 packages/docs-app/src/examples/core-examples/index.ts           | 2 +-
 packages/docs-app/src/styles/_examples.scss                     | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)
 rename packages/docs-app/src/examples/core-examples/{editableTextExample.tsx => editableTextPlaygroundExample.tsx} (98%)

diff --git a/packages/core/src/components/editable-text/editable-text.md b/packages/core/src/components/editable-text/editable-text.md
index 67efe0f4fe..2e80490c62 100644
--- a/packages/core/src/components/editable-text/editable-text.md
+++ b/packages/core/src/components/editable-text/editable-text.md
@@ -66,7 +66,7 @@ Enable `selectAllOnFocus` to automatically select all text when the input is foc
 
 @## Interactive Playground
 
-@reactExample EditableTextExample
+@reactExample EditableTextPlaygroundExample
 
 @## Props interface
 
diff --git a/packages/docs-app/src/examples/core-examples/editableTextExample.tsx b/packages/docs-app/src/examples/core-examples/editableTextPlaygroundExample.tsx
similarity index 98%
rename from packages/docs-app/src/examples/core-examples/editableTextExample.tsx
rename to packages/docs-app/src/examples/core-examples/editableTextPlaygroundExample.tsx
index 99a3e8bdf9..76db8eb8ef 100644
--- a/packages/docs-app/src/examples/core-examples/editableTextExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/editableTextPlaygroundExample.tsx
@@ -23,7 +23,7 @@ import { IntentSelect } from "./common/intentSelect";
 
 const INPUT_ID = "EditableTextExample-max-length";
 
-export const EditableTextExample: React.FC<ExampleProps> = props => {
+export const EditableTextPlaygroundExample: React.FC<ExampleProps> = props => {
     const [alwaysRenderInput, setAlwaysRenderInput] = React.useState(false);
     const [confirmOnEnterKey, setConfirmOnEnterKey] = React.useState(false);
     const [disabled, setDisabled] = React.useState(false);
diff --git a/packages/docs-app/src/examples/core-examples/index.ts b/packages/docs-app/src/examples/core-examples/index.ts
index 2f9a7c1d4e..fd6bf2c8e7 100644
--- a/packages/docs-app/src/examples/core-examples/index.ts
+++ b/packages/docs-app/src/examples/core-examples/index.ts
@@ -42,8 +42,8 @@ export * from "./dividerExamples";
 export * from "./dividerPlaygroundExample";
 export * from "./drawerExample";
 export * from "./dropdownMenuExample";
-export * from "./editableTextExample";
 export * from "./editableTextExamples";
+export * from "./editableTextPlaygroundExample";
 export * from "./entityTitleExample";
 export * from "./fileInputExample";
 export * from "./focusExample";
diff --git a/packages/docs-app/src/styles/_examples.scss b/packages/docs-app/src/styles/_examples.scss
index eed9430555..b7195f3499 100644
--- a/packages/docs-app/src/styles/_examples.scss
+++ b/packages/docs-app/src/styles/_examples.scss
@@ -269,7 +269,7 @@
   }
 }
 
-#{example("EditableText")} {
+#{example("EditableTextPlayground")} {
   .docs-example {
     display: block;
   }

From 7a4d02a3174a6db935d9bc2cb4bf987aae51f2e4 Mon Sep 17 00:00:00 2001
From: Greg Douglas <GWShark0@gmail.com>
Date: Thu, 12 Dec 2024 14:42:05 -0500
Subject: [PATCH 4/9] Update styles of other examples

---
 packages/docs-app/src/styles/_examples.scss | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/packages/docs-app/src/styles/_examples.scss b/packages/docs-app/src/styles/_examples.scss
index b7195f3499..f777e9cd23 100644
--- a/packages/docs-app/src/styles/_examples.scss
+++ b/packages/docs-app/src/styles/_examples.scss
@@ -269,6 +269,23 @@
   }
 }
 
+#{example("EditableTextBasic")},
+#{example("EditableTextMultiline")},
+#{example("EditableTextIntent")},
+#{example("EditableTextSelect")} {
+  .#{$ns}-editable-text {
+    width: 100%;
+    max-width: 200px;
+  }
+}
+
+#{example("EditableTextIntent")} {
+  .docs-code-example {
+    flex-direction: column;
+    gap: $pt-grid-size;
+  }
+}
+
 #{example("EditableTextPlayground")} {
   .docs-example {
     display: block;

From e36c82cfe462628c31c87bbbf439a3dc198f0d03 Mon Sep 17 00:00:00 2001
From: Greg Douglas <GWShark0@gmail.com>
Date: Thu, 12 Dec 2024 14:44:15 -0500
Subject: [PATCH 5/9] Use less platform-specific language

---
 packages/core/src/components/editable-text/editable-text.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/components/editable-text/editable-text.md b/packages/core/src/components/editable-text/editable-text.md
index 2e80490c62..9c97aa6ea3 100644
--- a/packages/core/src/components/editable-text/editable-text.md
+++ b/packages/core/src/components/editable-text/editable-text.md
@@ -24,7 +24,7 @@ Use the `value` prop for controlled usage, and `defaultValue` for uncontrolled u
 ongoing updates and use `onConfirm` and `onCancel` to listen only to completed or canceled edits.
 
 The `onConfirm` and `onCancel` callbacks are invoked based on user interaction. The user presses <kbd>Enter</kbd>
-(or <kbd>Command + Enter</kbd> when multiline) or blurs the input to confirm the current value, or presses
+(or <kbd>Mod + Enter</kbd> when multiline) or blurs the input to confirm the current value, or presses
 <kbd>Escape</kbd> to cancel. Canceling resets the field to the last confirmed value. Neither callback is invoked if the
 value is unchanged.
 

From 135c874bd8e80cd3b7ebfa6578aa04a2d2368a3f Mon Sep 17 00:00:00 2001
From: Greg Douglas <GWShark0@gmail.com>
Date: Thu, 12 Dec 2024 15:00:38 -0500
Subject: [PATCH 6/9] Lint

---
 packages/docs-app/src/styles/_examples.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docs-app/src/styles/_examples.scss b/packages/docs-app/src/styles/_examples.scss
index f777e9cd23..dfed9e584a 100644
--- a/packages/docs-app/src/styles/_examples.scss
+++ b/packages/docs-app/src/styles/_examples.scss
@@ -274,8 +274,8 @@
 #{example("EditableTextIntent")},
 #{example("EditableTextSelect")} {
   .#{$ns}-editable-text {
-    width: 100%;
     max-width: 200px;
+    width: 100%;
   }
 }
 

From b7fbdefe8cf35e0204b322060f0bac5a753f2780 Mon Sep 17 00:00:00 2001
From: Greg Douglas <GWShark0@gmail.com>
Date: Thu, 12 Dec 2024 15:52:41 -0500
Subject: [PATCH 7/9] Copy changes

---
 .../components/editable-text/editable-text.md   | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/components/editable-text/editable-text.md b/packages/core/src/components/editable-text/editable-text.md
index 9c97aa6ea3..3cadb0ab39 100644
--- a/packages/core/src/components/editable-text/editable-text.md
+++ b/packages/core/src/components/editable-text/editable-text.md
@@ -23,10 +23,11 @@ to a standard React [`<input>` element](https://react.dev/reference/react-dom/co
 Use the `value` prop for controlled usage, and `defaultValue` for uncontrolled usage. Use `onChange` to listen to
 ongoing updates and use `onConfirm` and `onCancel` to listen only to completed or canceled edits.
 
-The `onConfirm` and `onCancel` callbacks are invoked based on user interaction. The user presses <kbd>Enter</kbd>
-(or <kbd>Mod + Enter</kbd> when multiline) or blurs the input to confirm the current value, or presses
-<kbd>Escape</kbd> to cancel. Canceling resets the field to the last confirmed value. Neither callback is invoked if the
-value is unchanged.
+The `onConfirm` callback is invoked when a user presses <kbd>Enter</kbd>
+(or <kbd>Mod + Enter</kbd> when multiline) or when the user blurs the input.
+The `onCancel` callback is invoked when user presses <kbd>Escape</kbd>.
+Canceling resets the field to the last confirmed value. Neither callback is
+invoked if the value is unchanged.
 
 @reactCodeExample EditableTextBasicExample
 
@@ -46,7 +47,7 @@ Enabling the `multiline` prop transforms it into a `<textarea>`, which grows and
 as content changes. Use the `minLines` and `maxLines` props to constrain the height of the component.
 
 Users may confirm text in multiline mode by pressing <kbd>Ctrl + Enter</kbd> or <kbd>Command + Enter</kbd> rather than
-<kbd>Enter</kbd>. (Pressing the <kbd>Enter</kbd> key by itself moves the cursor to the next line.) This behavior
+<kbd>Enter</kbd>. Pressing the <kbd>Enter</kbd> key by itself moves the cursor to the next line. This behavior
 can be inverted with the `confirmOnEnterKey` prop.
 
 @reactCodeExample EditableTextMultilineExample
@@ -55,6 +56,12 @@ can be inverted with the `confirmOnEnterKey` prop.
 
 The `intent` prop controls the visual appearance of **EditableText**, similar to
 [**InputGroup**](#core/components/input-group) and [**TextArea**](#core/components/text-area).
+This prop is useful for highlighting states like success, warnings, or errors.
+
+-   **Primary** – Indicates primary action or highlight.
+-   **Success** – Represents a positive outcome or confirmation.
+-   **Warning** – Warns about potential issues.
+-   **Danger** – Highlights an error or critical issue.
 
 @reactCodeExample EditableTextIntentExample
 

From b12eedf5e42525cb6f4f5e812368c10f0845c00c Mon Sep 17 00:00:00 2001
From: Greg Douglas <GWShark0@gmail.com>
Date: Thu, 12 Dec 2024 16:51:03 -0500
Subject: [PATCH 8/9] Use toasts to demonstrate onConfirm/onCancel

---
 .../core-examples/editableTextExamples.tsx     | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/docs-app/src/examples/core-examples/editableTextExamples.tsx b/packages/docs-app/src/examples/core-examples/editableTextExamples.tsx
index 41a0831306..b0706a1593 100644
--- a/packages/docs-app/src/examples/core-examples/editableTextExamples.tsx
+++ b/packages/docs-app/src/examples/core-examples/editableTextExamples.tsx
@@ -5,20 +5,22 @@
 import dedent from "dedent";
 import * as React from "react";
 
-import { EditableText } from "@blueprintjs/core";
+import { EditableText, Intent, OverlayToaster } from "@blueprintjs/core";
 import { CodeExample, type ExampleProps } from "@blueprintjs/docs-theme";
 
+const toaster = OverlayToaster.createAsync();
+
 export const EditableTextBasicExample: React.FC<ExampleProps> = props => {
     const code = `<EditableText placeholder="Click to edit..." onConfirm={...} onCancel={...} />`;
+
+    const handleConfirm = async (value: string) =>
+        (await toaster).show({ message: `Confirmed: ${value}`, intent: Intent.SUCCESS });
+
+    const handleCancel = async () => (await toaster).show({ message: "Edit canceled" });
+
     return (
         <CodeExample code={code} {...props}>
-            <EditableText
-                placeholder="Click to edit..."
-                // eslint-disable-next-line no-console
-                onConfirm={value => console.log("Confirmed:", value)}
-                // eslint-disable-next-line no-console
-                onCancel={() => console.log("Edit canceled")}
-            />
+            <EditableText placeholder="Click to edit..." onConfirm={handleConfirm} onCancel={handleCancel} />
         </CodeExample>
     );
 };

From 2f97df674ae0db4680948912732ef9257ae8a9bc Mon Sep 17 00:00:00 2001
From: Greg Douglas <GWShark0@gmail.com>
Date: Thu, 12 Dec 2024 21:06:32 -0500
Subject: [PATCH 9/9] Use OverlayToaster component so that toasts show properly
 on scroll

---
 .../core-examples/editableTextExamples.tsx        | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/docs-app/src/examples/core-examples/editableTextExamples.tsx b/packages/docs-app/src/examples/core-examples/editableTextExamples.tsx
index b0706a1593..fe673dc69e 100644
--- a/packages/docs-app/src/examples/core-examples/editableTextExamples.tsx
+++ b/packages/docs-app/src/examples/core-examples/editableTextExamples.tsx
@@ -8,19 +8,24 @@ import * as React from "react";
 import { EditableText, Intent, OverlayToaster } from "@blueprintjs/core";
 import { CodeExample, type ExampleProps } from "@blueprintjs/docs-theme";
 
-const toaster = OverlayToaster.createAsync();
-
 export const EditableTextBasicExample: React.FC<ExampleProps> = props => {
     const code = `<EditableText placeholder="Click to edit..." onConfirm={...} onCancel={...} />`;
+    const toaster = React.useRef<OverlayToaster>(null);
 
-    const handleConfirm = async (value: string) =>
-        (await toaster).show({ message: `Confirmed: ${value}`, intent: Intent.SUCCESS });
+    const handleConfirm = React.useCallback(
+        (value: string) => toaster.current.show({ message: `Confirmed: ${value}`, intent: Intent.SUCCESS }),
+        [],
+    );
 
-    const handleCancel = async () => (await toaster).show({ message: "Edit canceled" });
+    const handleCancel = React.useCallback(
+        () => toaster.current.show({ message: "Canceled", intent: Intent.DANGER }),
+        [],
+    );
 
     return (
         <CodeExample code={code} {...props}>
             <EditableText placeholder="Click to edit..." onConfirm={handleConfirm} onCancel={handleCancel} />
+            <OverlayToaster ref={toaster} />
         </CodeExample>
     );
 };