Slackのチャット欄とのテキストフォーマットの互換性を保ってほしい

Japanese Forum 製品フィードバック
1

タスクの説明欄とSlackのチャット欄の間でコピー＆ペーストすると、箇条書きや番号付きリストのフォーマットが思いっきり崩れます。
どちらかで書いた内容をコピペしたり、どちらかで下書きしてから貼ったりすることが多いのですが、このフォーマットが崩れる問題が非常に大きな二度手間を発生させています。

おそらく、世界中で同じストレスを感じている人がたくさんいるのでは？！と思ったのですが、English Forumではうまく見つけられませんでした :smiling_face_with_tear:（なぜ

何かうまいワークアラウンドがあるのでしょうか？
あったとしても、デフォルトでそのままコピペできるようになると、とてもありがたいです。

2

@Masa_Hagiwara さん、ご報告ありがとうございます！
確認＆返信が大変遅くなりました。

現状確認:

以下の挙動を確認しました。

  • Asana → Slack: すべてが番号付きリストになり、インデントは解除される
  • Slack → Asana: すべてがプレーンテキストになる (入力欄からコピー) or インデントが消える (投稿済みテキストからコピー)

解決策 (ワークアラウンド)

  • 素直で互換性のあるフォーマットに変えて欲しいと、社内でフィードバックをエスカレートしておきます。
  • Asanaからテキストをコピーする場合は、Chrome以外のブラウザーを使う。
  • Slackからテキストをコピーする場合は、箇条書き・番号付きリストをインデントを含むMarkdownに変換するツールを見つけました: https://clipboard-check-and-slack-message-indenter.glitch.me/ (使い方はこちら)

調べたこと (読み飛ばして構いません)

クリップボードの中身を確認できるツールを使って、各ツールがどのようなHTMLコードをクリップボードに保存するのか調べてみました。

テスト対象文字列:

  • item
  • item
    • item
  1. item
  2. item
    1. item

Asanaのコメント入力欄＆説明:

Screenshot 2024-01-23 at 15.51.37

<meta charset="utf-8">
<ol class="ProsemirrorEditor-list">
    <li class="ProsemirrorEditor-listItem" data-list-indent="1" data-list-type="bulleted" style="margin-left: 32px">
        <p>item</p>
    </li>
    <li class="ProsemirrorEditor-listItem" data-list-indent="1" data-list-type="bulleted" style="margin-left: 32px">
        <p>item</p>
    </li>
    <li class="ProsemirrorEditor-listItem" data-list-indent="2" data-list-type="bulleted" style="margin-left: 64px">
        <p>item</p>
    </li>
</ol>
<p><br></p>
<ol class="ProsemirrorEditor-list" data-pm-slice="0 0 []">
    <li class="ProsemirrorEditor-listItem" data-list-indent="1" data-list-type="numbered" style="margin-left: 32px">
        <p>item</p>
    </li>
    <li class="ProsemirrorEditor-listItem" data-list-indent="1" data-list-type="numbered" style="margin-left: 32px">
        <p>item</p>
    </li>
    <li class="ProsemirrorEditor-listItem" data-list-indent="2" data-list-type="numbered" style="margin-left: 64px">
        <p>item</p>
    </li>
</ol>
  • 箇条書きも ul (unordered list) ではなく ol (ordered list) になっています。data-list-type というカスタム属性で箇条書きが指定されているので、Asana以外に貼り付けると番号付きリストになります。
  • インデントは margin-left で指定されています。これもAsana以外に貼り付けると無視されます。

Asanaの投稿済みコメント:

Screenshot 2024-01-23 at 16.00.40

Asanaの投稿済みコメントからコピーしたデータには追加の書式設定情報が付与されますが、基本的には同じです。

Asanaの投稿済みコメント (Safari):

<ul class="RichTextList-bulleted">
    <li >
        <div class="TypographyPresentation TypographyPresentation--m RichText3-paragraph--withVSpacingNormal RichText3-paragraph">item</div>
    </li>
    <li >
        <div class="TypographyPresentation TypographyPresentation--m RichText3-paragraph--withVSpacingNormal RichText3-paragraph">item</div>
    </li>
    <ul class="RichTextList-bulleted">
        <li >
            <div class="TypographyPresentation TypographyPresentation--m RichText3-paragraph--withVSpacingNormal RichText3-paragraph">item</div>
        </li>
    </ul>
</ul>
<div class="TypographyPresentation TypographyPresentation--m RichText3-paragraph--withVSpacingNormal RichText3-paragraph"><br></div>
<ol class="RichTextList-numbered">
    <li >
        <div class="TypographyPresentation TypographyPresentation--m RichText3-paragraph--withVSpacingNormal RichText3-paragraph">item</div>
    </li>
    <li >
        <div class="TypographyPresentation TypographyPresentation--m RichText3-paragraph--withVSpacingNormal RichText3-paragraph">item</div>
    </li>
    <ol class="RichTextList-numbered">
        <li >
            <div class="TypographyPresentation TypographyPresentation--m RichText3-paragraph--withVSpacingNormal RichText3-paragraph">item</div>
        </li>
    </ol>
</ol>

試しにChrome以外のブラウザーで試してみると、驚きの違いがありました。

  • 箇条書きと番号付きリストがそれぞれ正しく表現されている。
  • インデントも入れ子の ul/ol タグとして正しく表現されている。

Slackの入力欄:

Screenshot 2024-01-23 at 15.47.44

Slack の入力欄からコピーしたデータは、テキスト情報のみになり、箇条書きなどが反映されません。

Slackの投稿済みテキスト:

Screenshot 2024-01-23 at 15.55.38

（style 属性は長いので削除しました）

<meta charset="utf-8">
<ul data-stringify-type="unordered-list" class="p-rich_text_list p-rich_text_list__bullet" data-indent="0" data-border="0">
    <li data-stringify-indent="0" data-stringify-border="0">item</li>
    <li data-stringify-indent="0" data-stringify-border="0">item</li>
</ul>
<ul data-stringify-type="unordered-list" class="p-rich_text_list p-rich_text_list__bullet" data-indent="1" data-border="0">
    <li data-stringify-indent="1" data-stringify-border="0">item</li>
</ul>
<div class="p-rich_text_section"><span aria-label="" class="c-mrkdwn__br" data-stringify-type="paragraph-break"></span></div>
<ol data-stringify-type="ordered-list" class="p-rich_text_list p-rich_text_list__ordered" data-indent="0" data-border="0">
    <li data-stringify-indent="0" data-stringify-border="0">item</li>
    <li data-stringify-indent="0" data-stringify-border="0">item</li>
</ol>
<ol data-stringify-type="ordered-list" class="p-rich_text_list p-rich_text_list__ordered" data-indent="1" data-border="0">
    <li data-stringify-indent="1" data-stringify-border="0">item</li>
</ol>
  • インデントは data-stringify-indent というカスタム属性で指定されているため、Slack以外に貼り付けると無視されます。

フォーラム (Discourse) の投稿済みテキスト:

Screenshot 2024-01-23 at 15.48.12

（style 属性は長いので削除しました）

<meta charset="utf-8">
<ul>
    <li>item</li>
    <li>
    	item
    	<ul>
            <li>item</li>
        </ul>
    </li>
</ul>
<ol>
    <li>item</li>
    <li>
    	item
    	<ol>
            <li>item</li>
        </ol>
    </li>
</ol>
  • 箇条書きと番号付きリストがそれぞれ正しく表現されている。
  • インデントも入れ子の ul/ol タグとして正しく表現されている。

番外編としてフォーラムからコピーしたテキストも調べてみました。AsanaもDiscordのように素直な形式になるといいですね。

3

英語フォーラムでもバグとして報告があがりました。

1 Like