fix: Markdown editor cannot bold with shortcut or add images from clipboard #24746

dagadevelop · 2025-10-30T19:31:34Z

Markdown Editor Improvements

What does it do?

This PR fix two issues in the Markdown editor:

1. Keyboard Shortcuts for Text Formatting

Cmd+B / Ctrl+B: Bold
Cmd+I / Ctrl+I: Italic
Cmd+U / Ctrl+U: Underline
Cmd+K / Ctrl+K: Link

The shortcuts work just like the toolbar buttons - wrapping selected text or inserting
markdown with proper cursor positioning.

2. Automatic Upload of Pasted Images

Detects when users paste images from clipboard (Cmd+V / Ctrl+V)
Automatically uploads images to the server via /upload endpoint
Inserts the uploaded images as markdown in the editor
Supports single or multiple images at once
Shows translated notifications with upload progress

Why is it needed?

The Markdown editor previously lacked common keyboard shortcuts and required a manual
workflow for adding images, creating friction in the content editing experience.

How to test it?

Testing Keyboard Shortcuts

Open any content type with a Markdown field
Type some text or select existing text
Press the shortcuts:
- Cmd+B (Mac) or Ctrl+B (Windows/Linux) → Text should be wrapped with
  **bold**
- Cmd+I or Ctrl+I → Text should be wrapped with _italic_
- Cmd+U or Ctrl+U → Text should be wrapped with <u>underline</u>
- Cmd+K or Ctrl+K → Text should be wrapped with [text](link)

Testing Image Paste

Take a screenshot or copy an image from any source
Click inside the Markdown editor
Paste with Cmd+V or Ctrl+V
Verify:
- Notification appears: "Uploading image..."
- Image uploads to the server
- Success notification: "Image uploaded and inserted successfully"
- Image markdown is inserted in the editor: ![alt](url)
Test multiple images:
- Copy multiple images (e.g., from Finder/Explorer)
- Paste in editor
- Verify notification: "Uploading X images..."
- All images should be uploaded and inserted

Related issue(s)/PR(s)

Fix #24742

vercel · 2025-10-30T19:31:40Z

@dagadevelop is attempting to deploy a commit to the Strapi Team on Vercel.

A member of the Team first needs to authorize it.

…board # Markdown Editor Improvements ## What does it do? This PR fix two issues in the Markdown editor: ### 1. Keyboard Shortcuts for Text Formatting - **Cmd+B / Ctrl+B**: Bold - **Cmd+I / Ctrl+I**: Italic - **Cmd+U / Ctrl+U**: Underline - **Cmd+K / Ctrl+K**: Link The shortcuts work just like the toolbar buttons - wrapping selected text or inserting markdown with proper cursor positioning. ### 2. Automatic Upload of Pasted Images - Detects when users paste images from clipboard (Cmd+V / Ctrl+V) - Automatically uploads images to the server via `/upload` endpoint - Inserts the uploaded images as markdown in the editor - Supports single or multiple images at once - Shows translated notifications with upload progress ## Why is it needed? The Markdown editor previously lacked common keyboard shortcuts and required a manual workflow for adding images, creating friction in the content editing experience. ## How to test it? ### Testing Keyboard Shortcuts 1. Open any content type with a Markdown field 2. Type some text or select existing text 3. Press the shortcuts: - **Cmd+B** (Mac) or **Ctrl+B** (Windows/Linux) → Text should be wrapped with `**bold**` - **Cmd+I** or **Ctrl+I** → Text should be wrapped with `_italic_` - **Cmd+U** or **Ctrl+U** → Text should be wrapped with `<u>underline</u>` - **Cmd+K** or **Ctrl+K** → Text should be wrapped with `[text](link)` ### Testing Image Paste 1. Take a screenshot or copy an image from any source 2. Click inside the Markdown editor 3. Paste with **Cmd+V** or **Ctrl+V** 4. Verify: - Notification appears: "Uploading image..." - Image uploads to the server - Success notification: "Image uploaded and inserted successfully" - Image markdown is inserted in the editor: `![alt](url)` 5. Test multiple images: - Copy multiple images (e.g., from Finder/Explorer) - Paste in editor - Verify notification: "Uploading X images..." - All images should be uploaded and inserted ## Related issue(s)/PR(s) Fix [strapi#24742](strapi#24742)

remidej

Thanks a lot for your contribution! I have a couple of minor code style comments, and a bigger one about how to make the upload logic more maintainable in the future. Let me know if you're up for it, if not we could try to handle the images part internally and merge only the keyboard shortcuts part

remidej · 2025-11-05T10:57:21Z

packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/Wysiwyg/Editor.tsx

+      editorRef.current.on('change', changeHandler);
+
+      // Handle paste event to detect images
+      const handlePaste = (_cm: CodeMirror.Editor, event: ClipboardEvent) => {


could you rename _cm to something like editor? we try to have explicit variable names, and CM in strapi generally refers to the content manager

remidej · 2025-11-05T10:59:19Z

packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/Wysiwyg/Editor.tsx

+        // Collect all image files
+        const imageFiles: File[] = [];
+        for (let i = 0; i < items.length; i++) {
+          const item = items[i];
+          if (item.type.indexOf('image') !== -1) {
+            const file = item.getAsFile();
+            if (file) {
+              imageFiles.push(file);
+            }
+          }
+        }


to match our code style better, could you use a combination of Array .filter and .map for this?

remidej · 2025-11-05T11:29:50Z

packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/Wysiwyg/Field.tsx

+
+      try {
+        // Create FormData for the upload
+        const formData = new FormData();


I think this whole block of logic about uploading is too low level for this package. What would be a more viable solution would be to access the useUpload hook that the upload plugin uses internally. Unfortunately it's not currently exported, but you could set that up:

import { useUpload } from '@strapi/upload/strapi-admin' here

add an exports.ts file to upload/admin/src that re-exports useUpload, and would allow us to expose more in the future. Just like it's done in the content-manager

export * from './exports' in upload/admin/src/index

oiorain added source: core:content-manager Source is core/content-manager package pr: fix This PR is fixing a bug community Changes and fixes created by community members labels Oct 30, 2025

dagadevelop force-pushed the fix-for-#24742 branch 2 times, most recently from ecc3043 to 0af5f9e Compare October 31, 2025 15:14

dagadevelop force-pushed the fix-for-#24742 branch from 0af5f9e to 493d8f3 Compare October 31, 2025 15:16

fix: use icu on message format

0b66432

dagadevelop closed this Oct 31, 2025

dagadevelop reopened this Oct 31, 2025

remidej self-assigned this Nov 5, 2025

remidej self-requested a review November 5, 2025 11:10

remidej requested changes Nov 5, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix: Markdown editor cannot bold with shortcut or add images from clipboard #24746

fix: Markdown editor cannot bold with shortcut or add images from clipboard #24746

dagadevelop commented Oct 30, 2025 •

edited

Loading

Uh oh!

vercel bot commented Oct 30, 2025

Uh oh!

remidej left a comment

Uh oh!

remidej Nov 5, 2025

Uh oh!

remidej Nov 5, 2025

Uh oh!

remidej Nov 5, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

fix: Markdown editor cannot bold with shortcut or add images from clipboard #24746

Are you sure you want to change the base?

fix: Markdown editor cannot bold with shortcut or add images from clipboard #24746

Conversation

dagadevelop commented Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Markdown Editor Improvements

What does it do?

1. Keyboard Shortcuts for Text Formatting

2. Automatic Upload of Pasted Images

Why is it needed?

How to test it?

Testing Keyboard Shortcuts

Testing Image Paste

Related issue(s)/PR(s)

Uh oh!

vercel bot commented Oct 30, 2025

Uh oh!

remidej left a comment

Choose a reason for hiding this comment

Uh oh!

remidej Nov 5, 2025

Choose a reason for hiding this comment

Uh oh!

remidej Nov 5, 2025

Choose a reason for hiding this comment

Uh oh!

remidej Nov 5, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

dagadevelop commented Oct 30, 2025 •

edited

Loading