HTML5の「button」タグはエディタプレビューではレンダリングされますが、レンダリングされた投稿ではレンダリングされません

rokejulianlockhart · 2025 年 3 月 25 日午後 6:39

問題

投稿の内容を保存した後、レンダリングされた投稿で約4ミリ秒表示され、その後2ミリ秒ローディングサークルが表示されて消えます。

解決策

プレビューでのレンダリングが偶然であり、私が知らないセキュリティ上の懸念からレンダリングされた投稿で削除されることが意図的な場合、少なくとも<button>を<button disabled>に置き換えることはできませんか？

特にチュートリアルや再現手順で、<code>や<kbd>の誤用が多く見られますが、意味論的には<button>が適切であるため、このように質問します。

Arkshine · 2025 年 3 月 25 日午後 9:21

厳密にはバグではないと思います。混乱されているのも理解できます。

HTMLタグや属性/クラス名をフィルタリングから除外しないようにするには、Discourseコアまたはプラグインで明示的に許可する必要があります。

例えば、デフォルトのリストはここで見ることができます。

github.com/discourse/discourse

app/assets/javascripts/pretty-text/addon/allow-lister.js

main


      
              return this._allowedHrefSchemes;
            }
          
            getAllowedIframes() {
              return this._allowedIframes;
            }
          }
          
          // Only add to `default` when you always want your allowlist to occur. In other words,
          // don't change this for a plugin or a feature that can be disabled
          export const DEFAULT_LIST = [
            "a.anchor",
            "a.attachment",
            "a.hashtag",
            "a.mention",
            "a.mention-group",
            "a.onebox",
            `a.inline-onebox`,
            `a.inline-onebox-loading`,
            "a[data-bbcode]",
            "a[data-word]",

プレビューのみタグを許可することも可能です。例えば、画像コントロールにはいくつかのタグ/クラス名/属性の組み合わせがあります。

github.com/discourse/discourse

app/assets/javascripts/discourse-markdown-it/src/features/image-controls.js

main


      
              buildScaleButton(selectedScale, scale)
            ).join("");
            result += `</span>`;
            result += buildImageDeleteButton();
          
            // Get upload URL from token for conditional button rendering
            const origSrcIndex = token.attrIndex("data-orig-src");
            const uploadUrl =
              origSrcIndex !== -1 ? token.attrs[origSrcIndex][1] : null;
          
            // Add API extra buttons with optional conditions
            apiExtraButton.forEach((button) => {
              if (!button.condition || button.condition(uploadUrl)) {
                result += button.markup;
              }
            });
          
            result += "</span></span>";
          
            return result;
          } else {

ここで許可されているタグの副作用として、プレビューでボタンが表示されているのがわかります。
ただし、disabled属性は定義されていないため無視されます。

github.com/discourse/discourse

app/assets/javascripts/discourse-markdown-it/src/features/image-controls.js

main


      
          
          export function setup(helper) {
            const opts = helper.getOptions();
            if (opts.previewing) {
              helper.allowList([
                "span.image-wrapper",
                "span.button-wrapper",
                "span[class=scale-btn-container]",
                "span[class=scale-btn]",
                "span[class=scale-btn active]",
                "span.separator",
                "span.scale-btn[data-scale]",
                "span.button-wrapper[data-image-index]",
                "span[aria-label]",
                "span[class=delete-image-button]",
                "span.alt-text-container",
                "span.alt-text-readonly-container",
                "span.alt-text-readonly-container.alt-text",
                "span.alt-text-readonly-container.alt-text-edit-btn",
                "svg[class=fa d-icon d-icon-pencil svg-icon svg-string]",
                "use[href=#pencil]",

許可リストがどのように解析されるか確認していませんが、期待通りの動作なのか疑問です。現在、タグは属性に関係なく許可されているようです。例えば、\u003cbutton class=\"alt-text-edit-ok btn btn-primary\"\u003eを正確に使用しない限り、ボタンはレンダリングされないと予想していました。

投稿レンダリング時に\u003cbutton\u003eを許可するプラグインを作成できます。お手伝いが必要な場合はお知らせください。

rokejulianlockhart · 2025 年 3 月 25 日午後 11:29

@Arkshine、ありがとうございます。しかし、私はインスタンスオペレーターではありません。コンテンツを作成しているときに、これに気づいただけです。

これは、プレビューアでのHTML5およびCSS3の表現が最終的なレンダリングと異なる多くのインスタンスの1つであり、Discourseのコンテンツ作成が困難になる可能性があります。これは、編集が無効になっているか、インスタンス全体で非常に短い期間に制限されている場合に特に当てはまります。

Arkshine · 2025 年 3 月 26 日午前 3:25

承知いたしました。理にかなっていますね！それは良い経験ではないことに同意します。

もしよろしければ、disabled属性を持つ<button>を許可する小さなプラグインを作成しました。GitHub - Arkshine/discourse-markdown-allowlist

残念ながら、この状況では設定を行うことができないため、別のタグを追加したい場合は、私のリポジトリをフォークして、ご自身で追加する必要があります。こちらをご覧ください。

rokejulianlockhart · 2025 年 3 月 26 日午前 8:52

@Arkshine、それはアップストリームできませんか？これは私が使用するすべてのインスタンスに影響するため、それらすべてにそのような些細なことのパッチを組み込むように依頼するのは非現実的だろうと私は尋ねます。

通常、関連するGitHubリポジトリでこのような問題についてイシューを作成しますが、Discourseのイシューセクションは無効になっています。

Jagster · 2025 年 3 月 26 日午前 9:03

GitHub の代わりに Feature を使用しますか？ Bug ではないためです。

rokejulianlockhart · 2025 年 3 月 26 日午前 9:32

@Jagster、このタグが単に利用できないだけであれば、そうします。しかし、プレビューアがプレビューアとして機能しないのは#バグです。

これを機能としてどのように分類しますか？これを実証するためにタイトルをどのように書き直しますか？

Jagster · 2025 年 3 月 26 日午前 9:45

Feature は、機能不足のカテゴリです。Bug はエラー用であり、これはエラーではありません。

GitHub の issue セクションとまったく同じように使用したいということでしょうか？

david · 2025 年 3 月 26 日午前 9:59

プレビューとレンダリングされた投稿との間の不整合は、Bug として検討するに値すると考えられます。

おそらく、プレビューでもブロックされるようになるでしょう。これは、「投稿に <button> のサポートを追加する」ことが、将来の Feature リクエストとして有効になることを意味します

rokejulianlockhart · 2025 年 3 月 26 日午前 10:09

おっしゃる通りです、@david。これらは分けておくべきでした。

申し訳ありません、そしてありがとうございます。

トピック		返信	表示
Render `<button disabled>` in markdown Feature	0	45	2025 年 3 月 26 日
Is it just HTML in the editor making the official plugin Buttons? Support calendar-and-event	3	238	2023 年 8 月 17 日
Post Preview not working because of events plugin Support	14	1567	2022 年 8 月 11 日
Strangely ordered markdown + HTML is shown differently in post vs. preview Support	7	628	2023 年 2 月 2 日
Markdown preview and result differ Bug composer	7	1020	2023 年 6 月 22 日

HTML5の「button」タグはエディタプレビューではレンダリングされますが、レンダリングされた投稿ではレンダリングされません

問題

解決策

関連トピック