fix: コピペでシーケンサでのペーストの場合はノート情報・一般ペーストの場合は歌詞のみにする #2615

romot-co · 2025-03-15T11:10:21Z

内容

ソングにおいて以下の形で
ノートをコピーしてからシーケンサ以外にペーストするとノートのJSONが貼り付けられてしまう問題を修正します。

ノートコピー時にカスタムMIMEタイプweb application/vnd.voicevox.song-notes`でノート構造(JSON)をコピーします
ノートコピー時にtext/plain形式で歌詞のみをコピーします
シーケンサへのノートペースト時はweb application/vnd.voicevox.song-notesを利用します
ノート歌詞入力など一般のペースト時にはtext/plain側が利用されます

スクリーンショット・動画など

その他

クリップボードAPIの制限
https://developer.mozilla.org/ja/docs/Web/API/Clipboard_API#%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3%E3%81%AE%E8%80%83%E6%85%AE

Chrome 104以降でカスタムMIMEタイプが使えるAsync Clipboard API
https://developer.chrome.com/blog/web-custom-formats-for-the-async-clipboard-api?hl=ja

voicevox-preview-pages · 2025-03-15T11:14:19Z

🚀 プレビュー用ページを作成しました 🚀

更新時点でのコミットハッシュ：5c39b4a

Hiroshiba · 2025-03-18T17:57:01Z

PRありがとうございます！！

もしよければ @terapotan さんもコメントいただけると！！
（プルリクエストをcheckoutするか、こちらのブラウザ版で動作確認できると思います）

Pull Request Overview

This PR fixes an issue where copying notes from a song resulted in pasting the entire note JSON when pasted outside of the sequencer, by separating out the data formats for sequencer paste (note JSON) and general paste (lyrics text only). Key changes include:

Serializing notes as JSON and combining lyric text for the clipboard.
Using a custom MIME type "web application/vnd.voicevox.song-notes" for sequencer paste while providing a plain text fallback.
Implementing a fallback mechanism for browsers that do not support custom MIME types.

Comments suppressed due to low confidence (1)

src/store/singing.ts:3289

Consider adding a feature detection or fallback for navigator.clipboard.read to improve compatibility with browsers that do not support this asynchronous Clipboard API method.

const clipboardItems = await navigator.clipboard.read();

Hiroshiba

ははーーーーーー　なるほど、webのクリップボードはこういう感じになってるんですねぇ！！！！
たまに変な挙動するな〜と感じることがあるのですが、こりゃしょうがないわって気持ちになりました！！！　ややこしすぎる！！！

主にコード整理周りでコメントしました！

Hiroshiba · 2025-03-18T18:46:38Z

src/store/singing.ts

@@ -3228,12 +3228,47 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
          const { id, ...noteWithoutId } = note;


（この行に関係ないコメントです、議論を分けたかったので）

ちょっと提案なのですが、クリップボード周りの処理を関数に切り出してファイルをまとめるのはどうでしょうか 👀
コンテキストが特殊なのと、定数などがいっぱいあるので少なくとも外に出したほうがメンテしやすそうだな〜と。

storeは関数抜き出しするの面倒だったのですが、同名のディレクトリ以下に配置すれば綺麗に移行できることに気付きました！
やることは単純で、

新しくstore/singing/ディレクトリを作って、

store/singing.tsをstore/singing/index.tsに移動して

切り出した関数をstore/singing/clipboard.tsなどに配置する

感じです！実例だとこんな感じ！
切り出した関数は第１引数でcontext: ActionContextを受け取って、こんな感じで渡すとか･･･！
（もちろんstateとかactionsとかだけ渡すのもOKだと思います）

説明テキストとか、MIME Type定数とか、移してまとめられると思うのでキレイになるんじゃないかな〜みたいな！

型とかだいぶパズルになっててややこしいと思うのでなんでも聞いて下さい！
なんなら残しといていただければこっちでちゃちゃっとやっちゃいます 🙏
もしよかったら！！

Hiroshiba · 2025-03-18T18:49:57Z

src/store/singing.ts

+        // ノートコピー＆ペースト用のカスタムMIMEタイプ
+        const customMimeType = "web application/vnd.voicevox.song-notes";


これはペースト時も共通だから外に出したいかも

Hiroshiba · 2025-03-18T18:52:11Z

src/store/singing.ts

+        try {
+          await navigator.clipboard.writeText(serializedNotes);
+          logger.info("Fallback to plain text.", e);
+          logger.info("Copied to clipboard as plain text", serializedNotes);


これ最近気づいたのですが、エラーになる処理の前にロガー書かないと表示されないんですよね 😇
なのでこうかも？

Suggested change

try {

await navigator.clipboard.writeText(serializedNotes);

logger.info("Fallback to plain text.", e);

logger.info("Copied to clipboard as plain text", serializedNotes);

try {

logger.info("Fallback to plain text.", e);

await navigator.clipboard.writeText(serializedNotes);

logger.info("Copied to clipboard as plain text", serializedNotes);

Hiroshiba · 2025-03-18T18:59:59Z

src/store/singing.ts

+        for (const item of clipboardItems) {
+          if (item.types.includes(customMimeType)) {
+            const blob = await item.getType(customMimeType);
+            clipboardText = await blob.text();
+            break;
+          }
+        }
+
+        // カスタムMIMEタイプが見つからない場合は通常のテキストを試す
+        if (!clipboardText) {
+          for (const item of clipboardItems) {
+            if (item.types.includes("text/plain")) {
+              const blob = await item.getType("text/plain");
+              clipboardText = await blob.text();
+              break;
+            }
+          }
+        }


（ただのコメントです）

処理がにてるから関数切り出しできそう！！

terapotan · 2025-03-20T02:37:20Z

@romot-co
PRありがとうございます！　動作を見た感じ良さそうでした！！
一点軽くコメントしたので、そちらだけご確認いただければ！

terapotan · 2025-03-20T02:38:43Z

src/store/singing.ts

+        // カスタムMIMEタイプのデータを読み込む
+        const customMimeType = "web application/vnd.voicevox.song-notes";
+        // クリップボードアイテムからカスタムMIMEタイプのデータを探す
+        for (const item of clipboardItems) {


以下のような感じで、メソッドチェインにしてあげると分かりやすいかも？
（好みの問題な気もしますが）

const clipboardText = await Promise.any( clipboardItems .filter(item => item.types.includes("text/plain")) .map(item => item.getType("text/plain").then(blob => blob.text())) ) || null;

…ustom_mimetype-2591

…thub.com/romot-co/voicevox into fix/copy_paste_with_custom_mimetype-2591

Copilot

Pull Request Overview

This PR fixes an issue where, when pasting notes into non‐sequencer contexts, the wrong clipboard data would be pasted. Key changes include adding new clipboard helper functions to copy and read notes with custom MIME types, refactoring the store actions to use these helper functions, and adjusting import paths for consistency.

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
src/store/singing/clipboardHelper.ts	New helper functions to handle note copying and pasting with custom MIME types
src/store/singing/index.ts	Refactored clipboard actions to delegate to the new helper functions and updated import paths

Copilot · 2025-03-26T15:16:20Z

src/store/singing/clipboardHelper.ts

+  } catch {
+    // カスタムMIMEタイプを利用してのコピーが失敗した場合、クリップボードに通常のテキスト形式で書き込みを試みる
+    try {
+      await navigator.clipboard.writeText(jsonVoicevoxNotes);


When custom MIME type write fails, the fallback writes the JSON note structure instead of plain text lyrics. This may cause unexpected behavior for general paste actions; consider using plainTextLyric as the fallback value.

Suggested change

await navigator.clipboard.writeText(jsonVoicevoxNotes);

await navigator.clipboard.writeText(plainTextLyric);

コピーをカスタムMIMEタイプで振り分け、シーケンサでのペーストの場合はノート情報・一般ペーストの場合は歌詞のみにする

4c07bdc

romot-co requested a review from a team as a code owner March 15, 2025 11:10

romot-co requested review from Hiroshiba and removed request for a team March 15, 2025 11:10

フォールバック動作を修正

63a8655

Merge branch 'main' into fix/copy_paste_with_custom_mimetype-2591

5c39b4a

Hiroshiba requested review from sevenc-nanashi and Copilot March 18, 2025 17:57

Copilot AI reviewed Mar 18, 2025

View reviewed changes

Hiroshiba requested a review from sigprogramming March 18, 2025 17:58

Hiroshiba reviewed Mar 18, 2025

View reviewed changes

terapotan reviewed Mar 20, 2025

View reviewed changes

romot-co added 4 commits March 26, 2025 21:51

Merge remote-tracking branch 'origin/main' into fix/copy_paste_with_c…

e27ae0e

…ustom_mimetype-2591

クリップボードへの書き込み・読み込みをclipboardHelperに移管

a218d66

noteSchemeでのバリデーション

933a7b7

Merge branch 'fix/copy_paste_with_custom_mimetype-2591' of https://gi…

fdb29c5

…thub.com/romot-co/voicevox into fix/copy_paste_with_custom_mimetype-2591

romot-co requested a review from Copilot March 26, 2025 15:15

Copilot AI reviewed Mar 26, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: コピペでシーケンサでのペーストの場合はノート情報・一般ペーストの場合は歌詞のみにする #2615

fix: コピペでシーケンサでのペーストの場合はノート情報・一般ペーストの場合は歌詞のみにする #2615

romot-co commented Mar 15, 2025

voicevox-preview-pages bot commented Mar 15, 2025 •

edited

Loading

Hiroshiba commented Mar 18, 2025

Hiroshiba left a comment •

edited

Loading

Hiroshiba Mar 18, 2025

Hiroshiba Mar 18, 2025

Hiroshiba Mar 18, 2025

Hiroshiba Mar 18, 2025

terapotan commented Mar 20, 2025

terapotan Mar 20, 2025 •

edited

Loading

Copilot AI left a comment

Copilot AI Mar 26, 2025

Provide additional feedback

Please help us improve GitHub Copilot by sharing more details about this comment.

		@@ -3228,12 +3228,47 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
		const { id, ...noteWithoutId } = note;

		// ノートコピー＆ペースト用のカスタムMIMEタイプ
		const customMimeType = "web application/vnd.voicevox.song-notes";

	await navigator.clipboard.writeText(jsonVoicevoxNotes);
	await navigator.clipboard.writeText(plainTextLyric);

fix: コピペでシーケンサでのペーストの場合はノート情報・一般ペーストの場合は歌詞のみにする #2615

Are you sure you want to change the base?

fix: コピペでシーケンサでのペーストの場合はノート情報・一般ペーストの場合は歌詞のみにする #2615

Conversation

romot-co commented Mar 15, 2025

内容

関連 Issue

スクリーンショット・動画など

その他

voicevox-preview-pages bot commented Mar 15, 2025 • edited Loading

Hiroshiba commented Mar 18, 2025

Choose a reason for hiding this comment

Pull Request Overview

Hiroshiba left a comment • edited Loading

Choose a reason for hiding this comment

Hiroshiba Mar 18, 2025

Choose a reason for hiding this comment

Hiroshiba Mar 18, 2025

Choose a reason for hiding this comment

Hiroshiba Mar 18, 2025

Choose a reason for hiding this comment

Hiroshiba Mar 18, 2025

Choose a reason for hiding this comment

terapotan commented Mar 20, 2025

terapotan Mar 20, 2025 • edited Loading

Choose a reason for hiding this comment

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Copilot AI Mar 26, 2025

Choose a reason for hiding this comment

voicevox-preview-pages bot commented Mar 15, 2025 •

edited

Loading

Hiroshiba left a comment •

edited

Loading

terapotan Mar 20, 2025 •

edited

Loading