Skip to content

Commit 3f632c3

Browse files
ChrisUserChrisUser
committed
chore: update project to v1.2.0
1 parent 4d30195 commit 3f632c3

10 files changed

Lines changed: 2120 additions & 1496 deletions

File tree

‎.github/workflows/ci.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ on:
77
branches: [main]
88

99
env:
10-
NODE_VERSION: "20"
10+
NODE_VERSION: "22"
1111

1212
jobs:
1313
full-code-check:

‎.github/workflows/docs.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ name: Docs build and deploy
22
on: push
33

44
env:
5-
NODE_VERSION: "20"
5+
NODE_VERSION: "22"
66

77
jobs:
88
build-and-deploy:

‎README.md‎

Lines changed: 68 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -47,32 +47,81 @@ const App = () => {
4747
export default App
4848
```
4949

50+
### Ref & Imperative API
51+
52+
The component supports `forwardRef` to expose an imperative handle for programmatic control.
53+
54+
```typescript
55+
import { useRef } from "react"
56+
import ContentEditable from "react-basic-contenteditable"
57+
import type { ContentEditableHandle } from "react-basic-contenteditable"
58+
59+
const App = () => {
60+
const editorRef = useRef<ContentEditableHandle>(null)
61+
62+
return (
63+
<>
64+
<ContentEditable ref={editorRef} placeholder="Type here" />
65+
<button onClick={() => editorRef.current?.focus()}>Focus</button>
66+
<button onClick={() => editorRef.current?.insertAtCaret("👋")}>
67+
Insert emoji
68+
</button>
69+
<button onClick={() => editorRef.current?.clear()}>Clear</button>
70+
</>
71+
)
72+
}
73+
```
74+
75+
**Available methods:**
76+
77+
| Method | Return | Description |
78+
| ------------------ | -------- | ---------------------------------------- |
79+
| `focus()` | `void` | Focuses the editable element |
80+
| `blur()` | `void` | Removes focus from the editable element |
81+
| `insertAtCaret(text)` | `void` | Inserts text at the current cursor position |
82+
| `clear()` | `void` | Clears all content |
83+
| `getCaretPosition()` | `number` | Returns the current cursor offset |
84+
5085
### Props
5186
5287
> All props are optional, that's how you can **fully customize** it!
5388
54-
| Name | Optional | Type | Description |
55-
| ------------------------ | -------- | ------------------- | --------------------------------------------------------------------------- |
56-
| containerClassName | ✔️ | `string` | Custom classes for the wrapper div |
57-
| contentEditableClassName | ✔️ | `string` | Custom classes for the input element |
58-
| placeholderClassName | ✔️ | `string` | Custom classes for the placeholder text |
59-
| charsCounterClassName | ✔️ | `string` | Custom classes for the character counter text (if `maxLength` is specified) |
60-
| placeholder | ✔️ | `string` | Input placeholder text |
61-
| disabled | ✔️ | `boolean` | Flag that disables the input element |
62-
| maxLength | ✔️ | `number` | Indicates the maximum number of characters a user can enter |
63-
| autoFocus | ✔️ | `boolean` | Flag to automatically focus the input element on mount |
64-
| updatedContent | ✔️ | `string` | Text injected from parent element into the input as the current value |
65-
| onContentExternalUpdate | ✔️ | `(content) => void` | Method that emits the injected content by the `updatedContent` prop |
66-
| onChange | ✔️ | `(content) => void` | Method that emits the current content as a string |
67-
| onKeyUp | ✔️ | `(e) => void` | Method that emits the keyUp keyboard event |
68-
| onKeyDown | ✔️ | `(e) => void` | Method that emits the keyDown keyboard event |
69-
| onFocus | ✔️ | `(e) => void` | Method that emits the focus event |
70-
| onBlur | ✔️ | `(e) => void` | Method that emits the blur event |
89+
| Name | Optional | Type | Description |
90+
| ------------------------ | -------- | --------------------------------- | --------------------------------------------------------------------------- |
91+
| containerClassName | ✔️ | `string` | Custom classes for the wrapper div |
92+
| contentEditableClassName | ✔️ | `string` | Custom classes for the input element |
93+
| placeholderClassName | ✔️ | `string` | Custom classes for the placeholder text |
94+
| charsCounterClassName | ✔️ | `string` | Custom classes for the character counter text (if `maxLength` is specified) |
95+
| placeholder | ✔️ | `string` | Input placeholder text |
96+
| disabled | ✔️ | `boolean` | Flag that disables the input element |
97+
| maxLength | ✔️ | `number` | Indicates the maximum number of characters a user can enter |
98+
| autoFocus | ✔️ | `boolean` | Flag to automatically focus the input element on mount |
99+
| tagName | ✔️ | `string` | HTML tag for the editable element (default: `"div"`) |
100+
| multiLine | ✔️ | `boolean` | Allow multi-line input (default: `true`). Set to `false` for single-line |
101+
| sanitize | ✔️ | `(content: string) => string` | Callback to sanitize content before `onChange` fires |
102+
| updatedContent | ✔️ | `string` | Text injected from parent element into the input as the current value |
103+
| onContentExternalUpdate | ✔️ | `(content) => void` | Method that emits the injected content by the `updatedContent` prop |
104+
| onChange | ✔️ | `(content, meta?) => void` | Emits current content and optional `{ caretPosition }` metadata |
105+
| onKeyUp | ✔️ | `(e) => void` | Method that emits the keyUp keyboard event |
106+
| onKeyDown | ✔️ | `(e) => void` | Method that emits the keyDown keyboard event |
107+
| onFocus | ✔️ | `(e) => void` | Method that emits the focus event |
108+
| onBlur | ✔️ | `(e) => void` | Method that emits the blur event |
109+
| onPaste | ✔️ | `(e) => void` | Method that emits the paste event |
110+
111+
The component also accepts any standard HTML attribute (`id`, `data-*`, `tabIndex`, `spellCheck`, `style`, `className`, etc.) which will be forwarded to the editable element.
112+
113+
### Types
114+
115+
The package exports the following TypeScript types:
116+
117+
```typescript
118+
import type { ContentEditableHandle, ContentEditableProps } from "react-basic-contenteditable"
119+
```
71120
72121
### Keyboard shortcuts
73122
74-
- Undo: `Ctrl + Z`
75-
- Redo: `Ctrl + Y` / `Ctrl + Shift + Z`
123+
- Undo: `Ctrl + Z` (Windows/Linux) / `Cmd + Z` (macOS)
124+
- Redo: `Ctrl + Y` / `Ctrl + Shift + Z` (Windows/Linux) / `Cmd + Shift + Z` (macOS)
76125
77126
## Contribution
78127

0 commit comments

Comments
 (0)