0
# React Integration
1

2
The LinkPlugin extends BaseLinkPlugin with React-specific functionality including floating UI, state management, keyboard shortcuts, and component integration.
3

4
## Capabilities
5

6
### LinkPlugin
7

8
React-enhanced plugin that provides floating link editing interface and advanced state management.
9

10
```typescript { .api }
11
/**
12
 * React-enhanced link plugin with floating UI and state management
13
 */
14
const LinkPlugin: PlatePlugin<LinkConfig>;
15

16
type LinkConfig = ExtendConfig<BaseLinkConfig, {
17
  /** Whether currently in editing mode */
18
  isEditing: boolean;
19
  /** Current floating link mode */
20
  mode: FloatingLinkMode;
21
  /** Mouse down state for UI interaction */
22
  mouseDown: boolean;
23
  /** Whether link should open in new tab */
24
  newTab: boolean;
25
  /** ID of editor with open floating UI */
26
  openEditorId: string | null;
27
  /** Current text content */
28
  text: string;
29
  /** Whether form has been updated */
30
  updated: boolean;
31
  /** Current URL value */
32
  url: string;
33
  /** Keyboard shortcut override */
34
  triggerFloatingLinkHotkeys?: string;
35
}, {
36
  floatingLink: {
37
    hide: () => void;
38
    reset: () => void;
39
    show: (mode: FloatingLinkMode, editorId: string) => void;
40
  };
41
  link: {
42
    getAttributes: (link: TLinkElement) => React.AnchorHTMLAttributes<HTMLAnchorElement>;
43
  };
44
}, {}, {
45
  isOpen?: (editorId: string) => boolean;
46
}>;
47

48
type FloatingLinkMode = '' | 'edit' | 'insert';
49
```
50

51
**Usage Examples:**
52

53
```typescript
54
import { createPlateEditor } from "@udecode/plate/react";
55
import { LinkPlugin } from "@udecode/plate-link/react";
56

57
// Basic React setup
58
const editor = createPlateEditor({
59
  plugins: [LinkPlugin]
60
});
61

62
// Access plugin API
63
const { api } = editor;
64

65
// Show floating link in insert mode
66
api.floatingLink.show('insert', editor.id);
67

68
// Hide floating link
69
api.floatingLink.hide();
70

71
// Check if floating link is open
72
const isOpen = api.isOpen?.(editor.id);
73
```
74

75
### Plugin API Methods
76

77
#### Floating Link Control
78

79
Methods for controlling the floating link interface state.
80

81
```typescript { .api }
82
interface FloatingLinkAPI {
83
  /** Hide the floating link interface */
84
  hide(): void;
85
  /** Reset floating link state without hiding */
86
  reset(): void;
87
  /** Show floating link interface in specified mode */
88
  show(mode: FloatingLinkMode, editorId: string): void;
89
}
90
```
91

92
#### Link Utilities
93

94
Helper methods for working with link elements.
95

96
```typescript { .api }
97
interface LinkAPI {
98
  /** Get HTML attributes for a link element */
99
  getAttributes(link: TLinkElement): React.AnchorHTMLAttributes<HTMLAnchorElement>;
100
}
101
```
102

103
### Floating Link Modes
104

105
The floating link interface operates in different modes for various user interactions.
106

107
```typescript { .api }
108
type FloatingLinkMode = '' | 'edit' | 'insert';
109
```
110

111
**Mode Descriptions:**
112

113
- `''` (empty): Interface is hidden
114
- `'insert'`: Interface is in link insertion mode for new links
115
- `'edit'`: Interface is in edit mode for existing links
116

117
### State Management
118

119
#### Link State Properties
120

121
```typescript { .api }
122
interface LinkState {
123
  /** Whether currently in editing mode */
124
  isEditing: boolean;
125
  /** Current floating link mode */
126
  mode: FloatingLinkMode;
127
  /** Mouse interaction state */
128
  mouseDown: boolean;
129
  /** New tab checkbox state */
130
  newTab: boolean;
131
  /** ID of editor with active floating UI */
132
  openEditorId: string | null;
133
  /** Current link text content */
134
  text: string;
135
  /** Whether form values have been modified */
136
  updated: boolean;
137
  /** Current URL input value */
138
  url: string;
139
}
140
```
141

142
### Keyboard Shortcuts
143

144
Default keyboard shortcuts for triggering floating link interface.
145

146
```typescript
147
LinkPlugin.configure({
148
  options: {
149
    triggerFloatingLinkHotkeys: 'meta+k, ctrl+k'
150
  }
151
});
152
```
153

154
**Custom Shortcuts:**
155

156
```typescript
157
LinkPlugin.configure({
158
  options: {
159
    triggerFloatingLinkHotkeys: ['mod+shift+l', 'alt+l']
160
  }
161
});
162
```
163

164
### Plugin Selectors
165

166
Selector functions for querying plugin state.
167

168
```typescript { .api }
169
interface LinkSelectors {
170
  /** Check if floating link is open for specific editor */
171
  isOpen?: (editorId: string) => boolean;
172
}
173
```
174

175
**Usage Examples:**
176

177
```typescript
178
import { useEditorPlugin } from '@udecode/plate/react';
179
import { LinkPlugin } from '@udecode/plate-link/react';
180

181
function LinkComponent() {
182
  const { editor, api } = useEditorPlugin(LinkPlugin);
183
  
184
  const isFloatingOpen = api.isOpen?.(editor.id);
185
  
186
  const handleShowFloating = () => {
187
    api.floatingLink.show('insert', editor.id);
188
  };
189
  
190
  const handleHideFloating = () => {
191
    api.floatingLink.hide();
192
  };
193
  
194
  return (
195
    <div>
196
      <button onClick={handleShowFloating}>
197
        Add Link
198
      </button>
199
      {isFloatingOpen && (
200
        <button onClick={handleHideFloating}>
201
          Cancel
202
        </button>
203
      )}
204
    </div>
205
  );
206
}
207
```