テーマ内のBBcodeカラータグ

開発
1

Discourse BBCode color からの議論の続き

これはテーマコンポーネントとして提供できますか？これにより、マネージドインスタンスのお客様がインストールできるようになります。また、カラーピッカーのような、テキストの色を選択するためのより直感的な方法があるべきだと思います。

2

サムに詳しく説明してもらいますが、プラグインだと考えられます。なぜなら：

  • サーバーはバックエンドで生の投稿を処理する必要があり、これはアセットがV8で処理するためにバックエンドにロードされている場合にのみ可能だからです（プラグインが必要です）。
  • プラグインには新しいルールをテストするための仕様を含めることができます。

ただし、別の回避策もあります。たとえば：

投稿、例：

[wrap=colorme color=red]Hello there[/wrap]
[wrap=colorme color=blue]Hi there![/wrap]

CSS：


div.d-wrap[data-wrap="colorme"], span.d-wrap[data-wrap="colorme"] {

  &[data-color="red"] {
    color: red;
  }

  &[data-color="blue"] {
    color: blue;
  }

  &[data-color="yellow"] {
    color: yellow;
  }

  &[data-color="green"] {
    color: green;
  }
}

CSSを追加するだけで、上記の動作はネイティブです。

結果はBBCodeよりも柔軟性や堅牢性に欠けるように見えますが、多くのユースケースで十分に実用的です。（同じ行に複数の異なる色を持たせるには、最初の文字は色付けされていない必要があると思いますか？）

以下に基づいています：

3

それは素晴らしいですね。指摘していただきありがとうございます。この実装で問題だと感じる唯一の点は、エンドユーザーにとっても、この機能を使用したいチームにとっても、非常に制限が多いことです。

より良く、より柔軟な実装は、CSS変数経由で行うことだと思います。その場合、生成されるコードはこのようになります。

[wrap=colorme color=blue]Hi there![/wrap]

から

<div class="d-wrap" data-wrap="colorme" data-color="blue" style="--custom-colorme: blue">
    Bla
</div>

そして、基盤となるCSSは、1つのステートメントでこのようになり、すべての可能な色をCSSで宣言する代わりに、エンドユーザーに色の自由を残すことができます。ユーザーはhsl、rgbaなど、あらゆる種類の色の形式を使用できます。

div.d-wrap[data-wrap="colorme"] {
  &[data-color] {
    color: var(--custom-colorme);
  }
}

これにより、開発者は完全に自由になります。

このようにカスタムCSSをサポートすることは、後方互換性もあり、私の見る限り何も壊れることはありません。また、JSとのより良い連携（例えばカラーピッカー経由）も可能になります。

4

このプラグインが作成されてから、テーマは大幅に改善されました。非標準のBBCodeで問題なければ、すでに投稿デコレーターでこれを行うことができます。

common > header

<script type="text/discourse-plugin" version="0.8">
  const hasAlpha = /(.,){3}|\//;
  const MAX_LENGTH = 25;

  const getVariable = value => {
    const color = value.replace(/\\s/g, "");
    return hasAlpha.test(color) || color.length > MAX_LENGTH ? "" : color;
  };

  api.decorateCookedElement(
    post => {
      post
        .querySelectorAll("[data-color]")
        .forEach(i =>
          i.style.setProperty("--color", getVariable(i.dataset.color))
        );

      post
        .querySelectorAll("[data-bgcolor]")
        .forEach(i =>
          i.style.setProperty("--bgcolor", getVariable(i.dataset.bgcolor))
        );
    },
    { id: "wrap-colors" }
  );
</script>

common > css

.cooked,
.d-editor-preview {
  [data-color] {
    color: var(--color);
  }

  [data-bgcolor] {
    background-color: var(--bgcolor);
  }
}

有効なCSSカラー（カラー名、16進数、RGB、HSL）を受け付けます。alpha値を設定するRGBAまたはHSLAカラーは受け付けません。

コンポーザーでは、次のように追加します。

色のみ
[wrap=color color=yellow]こんにちは！[/wrap] ようこそ！

背景のみ
[wrap=color bgcolor=red]こんにちは！[/wrap] ようこそ！

色と背景
[wrap=color color=#ff0000 bgcolor=white]こんにちは！[/wrap] ようこそ！

そして、色を好きなように変更できます。

HSLまたはRGBを使用したい場合は、次のように引用符で囲む必要があることに注意してください。

bgcolor="rgba(0,0,0)"

Discourseはすでに[wrap]タグをエスケープしており、CSPもあるため、これはユーザー入力とXSSに関して安全です。しかし…

5

それはかなりクールですね。ありがとう。

カラーブロックのような新しいツールバーボタンを追加することで、さらに簡略化することを考えています。
それをクリックすると、あらかじめ選択された色のシンプルなレイヤーが開きます。

image
image271×303 3.78 KB

そこに色をクリックすると、選択したテキストの周りに次のようなコードを追加する通常のwrapWithコンポーザーメソッドが実行されます。

[wrap=colorme color=blue]Hi there![/wrap]

その後、上記のdecorateCookedElement()のコードが機能し、それに応じてレンダリングされます。

これは、人々が色を取得するために難解なコードを書く必要がない、直感的なアプローチだと思います。
テーマコンポーネントでこれをまとめることができると思います。

6

すでにテーマコンポーネントにレスポンスを組み込んでいたので、Johani の改善を追加しました。

こちらから見つけられます。

merefield/discourse-tc-coloured-text: 公式の BBCode 投稿カラーリングプラグインのシンプルなテーマコンポーネントの代替 (github.com)

パレットの PR を歓迎します @Sören_Geier （そして著者に追加してください）。

7

背景色が指定されている場合に、背景にコントラストを与えるためのスペースとして、わずかなパディングを追加しました。IMPROVE: give background colours room · merefield/discourse-tc-coloured-text@438916c (github.com)

8

皆さんのこれまでの仕事に基づいて、何かまとまったものがあると思います。
週末にPRを投稿します。まだバグや修正すべき点があります。

qKJ3Qt2RpY

9

Sörenさん、こんにちは！あのPRは投稿しましたか？Robertさんのテーマコンポーネントを試してみたのですが、あなたの素敵なカラーパレットが見当たりません！

10

5ヶ月後、イエス、時が経つのは早いですね。まだ追加していません。ローカルバージョンの作業中のものがあります。まだ望むような状態ではありません。

11

インストールリンクや、私とコミュニティのために行ったカスタマイズを共有していただけますか？

12

@Sören_Geier なんですって？ これは素晴らしいですね。これに関するコード（たとえ一部でも）を投稿したことはありますか？

13

プルリクエスト、ドラフトでもいいので、まだ待っています！:zzz: :slight_smile: