[PR #10712] [CLOSED] feat: New 'Copy Formatted' button to preserve formatting when copied to the clipboard #38213

New Issue

GiteaMirror · 2026-04-25T11:19:37-05:00

GiteaMirror commented

2026-04-25 11:19:37 -05:00

📋 Pull Request Information

Original PR: https://github.com/open-webui/open-webui/pull/10712
Author: @MacJedi42
Created: 2/24/2025
Status: ❌ Closed

Base: dev ← Head: feature/copy-formatted-button

📝 Commits (10+)

74b29c0 Added 'Copy Formatted' button to preserve markdown formatting when copying AI responses to Microsoft Word or other Rich Text Applications
905b94f Update ResponseMessage.svelte
ec2cd58 Merge branch 'open-webui:main' into feature/copy-formatted-button
2ed4545 Merge branch 'open-webui:main' into feature/copy-formatted-button
a402a41 Merge branch 'open-webui:main' into feature/copy-formatted-button
3b70cd6 Merge pull request #11257 from open-webui/dev
79e9039 Merge branch 'open-webui:main' into feature/copy-formatted-button
dc78d2f Update bug_report.yaml
67cd4f2 Create config.yaml
d7bfa39 refac

📊 Changes

3 files changed (+128 additions, -4 deletions)

View changed files

📝 .github/ISSUE_TEMPLATE/bug_report.yaml (+5 -3)
➕ .github/ISSUE_TEMPLATE/config.yml (+1 -0)
📝 src/lib/components/chat/Messages/ResponseMessage.svelte (+122 -1)

📄 Description

feat: Added 'Copy Formatted' button for preserving formatting when copying AI responses to Microsoft Word or other Rich Text Applications

Pull Request Checklist

Target branch: This pull request targets the dev branch.
Description: Added a new "Copy Formatted" button that preserves markdown formatting when copying AI responses to the clipboard, making it easier to paste into rich text applications.
Changelog: Changelog entry has been added below following the Keep a Changelog format.
Documentation: No documentation updates needed as this is a self-explanatory UI feature.
Dependencies: No new dependencies added - using existing marked library already in the project.
Testing: Tested across Chrome, Firefox, and Safari, and output into Microsoft Word to ensure compatibility.
Code review: Performed self-review of code to ensure it follows project standards.
Prefix: Using "feat" prefix as this introduces a new feature to the codebase.

Changelog Entry

Description

This PR adds a new "Copy Formatted" button next to the existing copy button in AI responses. When clicked, it converts the markdown to HTML with proper formatting and copies it to the clipboard, allowing users to paste formatted content into applications that support rich text (like Microsoft Word, Google Docs, email clients, etc.).

Added

Added a new "Copy Formatted" button in the ResponseMessage.svelte component
Implemented copyFormattedToClipboard function that uses marked to convert markdown to HTML
Added syntax highlighting for code blocks in the formatted output
Added CSS styling to make the pasted content look better in rich text editors
Added fallback to plain text for browsers that don't support the Clipboard API

Changed

No existing functionality was changed

Deprecated

None

Removed

None

Fixed

None

Security

None

Breaking Changes

None

Additional Information

This feature enhances the user experience by preserving formatting when copying AI responses. It's particularly useful for:

Preserving tables, lists, and other structured content
Maintaining headings and text formatting, meaning less time removing markdown syntax and rebuilding tables, and making it easier to change formatting to suit a template.

The implementation uses the existing marked library that's already a dependency in the project, along with the highlight.js library for code syntax highlighting.

Screenshots

Screenshot showing the new Copy Formatted button next to the existing copy button

https://github.com/user-attachments/assets/4cd06186-fbb2-4c99-9abb-fea06695041f
Video Example of formatted content pasted into Microsoft Word, showing preserved formatting

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/open-webui/open-webui/pull/10712 **Author:** [@MacJedi42](https://github.com/MacJedi42) **Created:** 2/24/2025 **Status:** ❌ Closed **Base:** `dev` ← **Head:** `feature/copy-formatted-button` --- ### 📝 Commits (10+) - [`74b29c0`](https://github.com/open-webui/open-webui/commit/74b29c07118bad39e1cca25ceef34ce61f79537c) Added 'Copy Formatted' button to preserve markdown formatting when copying AI responses to Microsoft Word or other Rich Text Applications - [`905b94f`](https://github.com/open-webui/open-webui/commit/905b94fc012040524e19cf9478d81c9607631e0c) Update ResponseMessage.svelte - [`ec2cd58`](https://github.com/open-webui/open-webui/commit/ec2cd58b490db72cf02ae47367f3fe3a3006212f) Merge branch 'open-webui:main' into feature/copy-formatted-button - [`2ed4545`](https://github.com/open-webui/open-webui/commit/2ed45455dad8e5bccf757fd4b77bf0d94d4a1787) Merge branch 'open-webui:main' into feature/copy-formatted-button - [`a402a41`](https://github.com/open-webui/open-webui/commit/a402a41e0f40c73ebcee1b3604138163df91e25f) Merge branch 'open-webui:main' into feature/copy-formatted-button - [`3b70cd6`](https://github.com/open-webui/open-webui/commit/3b70cd64d7fa6902e8c79cf8dcbf3c7e84cf704b) Merge pull request #11257 from open-webui/dev - [`79e9039`](https://github.com/open-webui/open-webui/commit/79e90390a899dce7349f3b9fc988f6762ed8492e) Merge branch 'open-webui:main' into feature/copy-formatted-button - [`dc78d2f`](https://github.com/open-webui/open-webui/commit/dc78d2f7586ec2681ca56a5a6b387dea6836a6b6) Update bug_report.yaml - [`67cd4f2`](https://github.com/open-webui/open-webui/commit/67cd4f2ab101662cf124fcb4ef45293245bebec0) Create config.yaml - [`d7bfa39`](https://github.com/open-webui/open-webui/commit/d7bfa395b0672a21a41fb6706a4275673d339762) refac ### 📊 Changes **3 files changed** (+128 additions, -4 deletions) <details> <summary>View changed files</summary> 📝 `.github/ISSUE_TEMPLATE/bug_report.yaml` (+5 -3) ➕ `.github/ISSUE_TEMPLATE/config.yml` (+1 -0) 📝 `src/lib/components/chat/Messages/ResponseMessage.svelte` (+122 -1) </details> ### 📄 Description # feat: Added 'Copy Formatted' button for preserving formatting when copying AI responses to Microsoft Word or other Rich Text Applications ## Pull Request Checklist - [x] **Target branch:** This pull request targets the `dev` branch. - [x] **Description:** Added a new "Copy Formatted" button that preserves markdown formatting when copying AI responses to the clipboard, making it easier to paste into rich text applications. - [x] **Changelog:** Changelog entry has been added below following the Keep a Changelog format. - [x] **Documentation:** No documentation updates needed as this is a self-explanatory UI feature. - [x] **Dependencies:** No new dependencies added - using existing marked library already in the project. - [x] **Testing:** Tested across Chrome, Firefox, and Safari, and output into Microsoft Word to ensure compatibility. - [x] **Code review:** Performed self-review of code to ensure it follows project standards. - [x] **Prefix:** Using "feat" prefix as this introduces a new feature to the codebase. ## Changelog Entry ### Description This PR adds a new "Copy Formatted" button next to the existing copy button in AI responses. When clicked, it converts the markdown to HTML with proper formatting and copies it to the clipboard, allowing users to paste formatted content into applications that support rich text (like Microsoft Word, Google Docs, email clients, etc.). ### Added - Added a new "Copy Formatted" button in the ResponseMessage.svelte component - Implemented `copyFormattedToClipboard` function that uses marked to convert markdown to HTML - Added syntax highlighting for code blocks in the formatted output - Added CSS styling to make the pasted content look better in rich text editors - Added fallback to plain text for browsers that don't support the Clipboard API ### Changed - No existing functionality was changed ### Deprecated - None ### Removed - None ### Fixed - None ### Security - None ### Breaking Changes - None --- ### Additional Information This feature enhances the user experience by preserving formatting when copying AI responses. It's particularly useful for: - Preserving tables, lists, and other structured content - Maintaining headings and text formatting, meaning less time removing markdown syntax and rebuilding tables, and making it easier to change formatting to suit a template. The implementation uses the existing marked library that's already a dependency in the project, along with the highlight.js library for code syntax highlighting. ### Screenshots ![Screenshot 2025-02-25 at 12 43 54 PM](https://github.com/user-attachments/assets/0d015e4e-3b64-4e40-8eb3-a3a5c04e7fca) *Screenshot showing the new Copy Formatted button next to the existing copy button* https://github.com/user-attachments/assets/4cd06186-fbb2-4c99-9abb-fea06695041f *Video Example of formatted content pasted into Microsoft Word, showing preserved formatting* --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

GiteaMirror added the pull-request label 2026-04-25 11:19:37 -05:00

GiteaMirror closed this issue

2026-04-25 11:19:39 -05:00

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/open-webui#38213