[docs] Rewrite EditableText docs

packages/core/src/components/editable-text/editable-text.md

@@ -1,18 +1,35 @@
 @# 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` 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
 
 <div class="@ns-callout @ns-intent-danger @ns-icon-error @ns-callout-has-body-content">
     <h5 class="@ns-heading">Centering EditableText</h5>
@@ -23,34 +40,40 @@ 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
+<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 `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
+
+@## Select text on focus
+
+Enable `selectAllOnFocus` to automatically select all text when the input is focused.
+
+@reactCodeExample EditableTextSelectExample
+
+@## Interactive Playground
 
-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.
+@reactExample EditableTextPlaygroundExample
 
 @## Props interface
 

packages/docs-app/src/examples/core-examples/editableTextExamples.tsx

@@ -0,0 +1,65 @@
+/* !
+ * (c) Copyright 2024 Palantir Technologies Inc. All rights reserved.
+ */
+
+import dedent from "dedent";
+import * as React from "react";
+
+import { EditableText, Intent, OverlayToaster } 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={...} />`;
+    const toaster = React.useRef<OverlayToaster>(null);
+
+    const handleConfirm = React.useCallback(
+        (value: string) => toaster.current.show({ message: `Confirmed: ${value}`, intent: Intent.SUCCESS }),
+        [],
+    );
+
+    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>
+    );
+};
+
+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>
+    );
+};