From 78c185a05adb58da92cdb872f95eaaa2113183f7 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 23 Jan 2019 05:20:28 +0900
Subject: [PATCH] [Client] Improve usability

---
 .../app/common/scripts/copy-to-clipboard.ts   | 30 +++++++++++++++----
 .../app/common/views/components/note-menu.vue |  8 +++++
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/client/app/common/scripts/copy-to-clipboard.ts b/src/client/app/common/scripts/copy-to-clipboard.ts
index 3d2741f8d7..ab13cab970 100644
--- a/src/client/app/common/scripts/copy-to-clipboard.ts
+++ b/src/client/app/common/scripts/copy-to-clipboard.ts
@@ -2,12 +2,32 @@
  * Clipboardに値をコピー(TODO: 文字列以外も対応)
  */
 export default val => {
-	const form = document.createElement('textarea');
-	form.textContent = val;
-	document.body.appendChild(form);
-	form.select();
+	// 空div 生成
+	const tmp = document.createElement('div');
+	// 選択用のタグ生成
+	const pre = document.createElement('pre');
+
+	// 親要素のCSSで user-select: none だとコピーできないので書き換える
+	pre.style.webkitUserSelect = 'auto';
+	pre.style.userSelect = 'auto';
+
+	tmp.appendChild(pre).textContent = val;
+
+	// 要素を画面外へ
+	const s = tmp.style;
+	s.position = 'fixed';
+	s.right = '200%';
+
+	// body に追加
+	document.body.appendChild(tmp);
+	// 要素を選択
+	document.getSelection().selectAllChildren(tmp);
+
+	// クリップボードにコピー
 	const result = document.execCommand('copy');
-	document.body.removeChild(form);
+
+	// 要素削除
+	document.body.removeChild(tmp);
 
 	return result;
 };
diff --git a/src/client/app/common/views/components/note-menu.vue b/src/client/app/common/views/components/note-menu.vue
index f7223b962c..750d240e35 100644
--- a/src/client/app/common/views/components/note-menu.vue
+++ b/src/client/app/common/views/components/note-menu.vue
@@ -87,10 +87,18 @@ export default Vue.extend({
 
 		copyContent() {
 			copyToClipboard(this.note.text);
+			this.$root.dialog({
+				type: 'success',
+				splash: true
+			});
 		},
 
 		copyLink() {
 			copyToClipboard(`${url}/notes/${this.note.id}`);
+			this.$root.dialog({
+				type: 'success',
+				splash: true
+			});
 		},
 
 		pin() {