0
# Text Formatting
1

2
Inline formatting capabilities for text content including emphasis, strong text, links, and inline code. Marks are applied to text ranges and can be combined with each other.
3

4
## Capabilities
5

6
### Emphasis
7

8
Italic text formatting for emphasis.
9

10
```typescript { .api }
11
/**
12
 * HTML attributes for emphasis marks
13
 */
14
const emphasisAttr: $markAttr<'emphasis'>;
15

16
/**
17
 * Schema for emphasis marks with marker attribute
18
 * Stores the original markdown marker (* or _) used
19
 */
20
const emphasisSchema: $markSchema<'emphasis'>;
21

22
/**
23
 * Command to toggle emphasis on current selection
24
 */
25
const toggleEmphasisCommand: $command<'ToggleEmphasis'>;
26

27
/**
28
 * Input rule for creating emphasis using *text* syntax
29
 */
30
const emphasisStarInputRule: $inputRule;
31

32
/**
33
 * Input rule for creating emphasis using _text_ syntax
34
 */
35
const emphasisUnderscoreInputRule: $inputRule;
36

37
/**
38
 * Keyboard shortcuts for emphasis operations
39
 * - Mod-i: Toggle emphasis
40
 */
41
const emphasisKeymap: $useKeymap;
42
```
43

44
**Usage Examples:**
45

46
```typescript
47
import { toggleEmphasisCommand } from "@milkdown/preset-commonmark";
48

49
// Toggle emphasis programmatically
50
editor.action((ctx) => {
51
  const cmd = ctx.get(toggleEmphasisCommand.key);
52
  cmd(); // Toggles emphasis on current selection
53
});
54
```
55

56
### Strong
57

58
Bold text formatting for strong emphasis.
59

60
```typescript { .api }
61
/**
62
 * HTML attributes for strong marks
63
 */
64
const strongAttr: $markAttr<'strong'>;
65

66
/**
67
 * Schema for strong marks with marker attribute
68
 * Stores the original markdown marker (** or __) used
69
 */
70
const strongSchema: $markSchema<'strong'>;
71

72
/**
73
 * Command to toggle strong formatting on current selection
74
 */
75
const toggleStrongCommand: $command<'ToggleStrong'>;
76

77
/**
78
 * Input rule for creating strong text using **text** and __text__ syntax
79
 */
80
const strongInputRule: $inputRule;
81

82
/**
83
 * Keyboard shortcuts for strong formatting operations
84
 * - Mod-b: Toggle strong
85
 */
86
const strongKeymap: $useKeymap;
87
```
88

89
### Inline Code
90

91
Monospace text formatting for code snippets within text.
92

93
```typescript { .api }
94
/**
95
 * HTML attributes for inline code marks
96
 */
97
const inlineCodeAttr: $markAttr<'inlineCode'>;
98

99
/**
100
 * Schema definition for inline code marks
101
 */
102
const inlineCodeSchema: $markSchema<'inlineCode'>;
103

104
/**
105
 * Command to toggle inline code formatting on current selection
106
 */
107
const toggleInlineCodeCommand: $command<'ToggleInlineCode'>;
108

109
/**
110
 * Input rule for creating inline code using `code` syntax
111
 */
112
const inlineCodeInputRule: $inputRule;
113

114
/**
115
 * Keyboard shortcuts for inline code operations
116
 * - Mod-e: Toggle inline code
117
 */
118
const inlineCodeKeymap: $useKeymap;
119
```
120

121
### Links
122

123
Hyperlink formatting with URL and optional title attributes.
124

125
```typescript { .api }
126
/**
127
 * HTML attributes for link marks
128
 */
129
const linkAttr: $markAttr<'link'>;
130

131
/**
132
 * Schema for link marks with href and title attributes
133
 */
134
const linkSchema: $markSchema<'link'>;
135

136
/**
137
 * Command payload interface for link operations
138
 */
139
interface UpdateLinkCommandPayload {
140
  href?: string;
141
  title?: string;
142
}
143

144
/**
145
 * Command to toggle link mark on current selection
146
 * Creates new link or removes existing link
147
 */
148
const toggleLinkCommand: $command<'ToggleLink'>;
149

150
/**
151
 * Command to update properties of existing link
152
 * Updates href and/or title of selected link
153
 */
154
const updateLinkCommand: $command<'UpdateLink'>;
155
```
156

157
**Usage Examples:**
158

159
```typescript
160
import { 
161
  toggleLinkCommand, 
162
  updateLinkCommand,
163
  UpdateLinkCommandPayload 
164
} from "@milkdown/preset-commonmark";
165

166
// Create or toggle link
167
editor.action((ctx) => {
168
  const toggleCmd = ctx.get(toggleLinkCommand.key);
169
  toggleCmd({
170
    href: "https://example.com",
171
    title: "Example Website"
172
  });
173
});
174

175
// Update existing link
176
editor.action((ctx) => {
177
  const updateCmd = ctx.get(updateLinkCommand.key);
178
  updateCmd({
179
    href: "https://newurl.com",
180
    title: "Updated Title"
181
  });
182
});
183
```
184

185
## Mark Combination Examples
186

187
Marks can be combined to create rich text formatting:
188

189
```typescript
190
// Multiple marks can be applied simultaneously
191
// This creates bold italic code text
192
import { 
193
  toggleStrongCommand,
194
  toggleEmphasisCommand,
195
  toggleInlineCodeCommand 
196
} from "@milkdown/preset-commonmark";
197

198
editor.action((ctx) => {
199
  const strongCmd = ctx.get(toggleStrongCommand.key);
200
  const emphasisCmd = ctx.get(toggleEmphasisCommand.key);
201
  const codeCmd = ctx.get(toggleInlineCodeCommand.key);
202
  
203
  // Apply multiple marks to selection
204
  strongCmd();     // Make bold
205
  emphasisCmd();   // Add italic
206
  codeCmd();       // Add code formatting
207
});
208
```
209

210
## Input Rule Behavior
211

212
All marks support automatic conversion from markdown syntax:
213

214
- `*italic*` or `_italic_` → emphasis
215
- `**bold**` or `__bold__` → strong  
216
- `` `code` `` → inline code
217
- `[text](url)` → link (handled by input rules in the broader system)
218

219
The input rules activate when you type the closing marker, automatically converting the preceding text to the appropriate mark.
220

221
## Types
222

223
```typescript { .api }
224
// Mark attribute types
225
type $markAttr<T> = any; // Mark HTML attribute configuration
226
type $markSchema<T> = any; // Mark schema definition
227
type $command<T> = any; // Command type
228
type $inputRule = any; // Input rule type
229
type $useKeymap = any; // Keymap configuration type
230

231
// Link command payload
232
interface UpdateLinkCommandPayload {
233
  href?: string;
234
  title?: string;
235
}
236
```