はい、@satonotdead さん、このトピックは少し脱線してしまったと思います… このトピックは、フローティング編集/引用ポップアップにハイライトボタンを追加することに限定されるかもしれません。
そこで、作曲者のツールバーのボタンをクリックして \u003cmark\u003ethis\u003c/mark\u003e を挿入するための、非常に特定かつ限定的な目的のテーマコンポーネント Highlighter Composer Button を作成しました。また、利便性のためにキーボードショートカット \u003ckbd\u003eCtrl-H\u003c/kbd\u003e も追加しました。
オンザフライでコードを挿入してテキストの背景色とテキスト色を追加できるようにする、他の2つの異なる作曲者ボタンコンポーネントがあります。これら2つは、私にとって次の2つの理由であまり迅速かつ便利ではありませんでした。
-
機能させるには、挿入されたコード内で色を手動で入力する必要があります。
-
スクロール可能なコンテンツボックスのような、投稿で使用する他の要素と常にうまく連携するとは限りません。
「いいね！」 2
Jagster
(Jakke Lehtonen)
49
あのスクロール可能なボックスはどうやって作ったのか、少し教えてくれませんか 
はい、@Jagster さん、このテーマコンポーネントです…
ボックスは次のようにスタイル設定しています…
/* スクロール可能なコンテンツボックスの影 */
.scrollable-content {
border-left: none !important;
background-color: var(--secondary) !important;
padding: 1em 0.5em 1em 1em !important;
box-shadow: 0 1.36px 8.896px #c4b59d, 0 0 1px !important;
border-radius: 4px !important;
margin: 0 8.896px !important;
}
.scrollable-content-inner {
padding-right: 15px !important;
}
.scrollable-content-inner h1,
.scrollable-content-inner h2,
.scrollable-content-inner h3,
.scrollable-content-inner h4,
.scrollable-content-inner h5,
.scrollable-content-inner h6 {
margin-top: 0 !important;
margin-bottom: 0.5rem !important;
}
「いいね！」 3
@satonotdead すみません！コンポーザーを改善する方法について、ここでいくつかアイデアを出してみました。個人的には、読んでいる投稿のテキストを選択したときに、引用やクイック編集と並んでハイライトオプションを追加するという元の投稿の提案には納得していません。私の意見では、この機能はコンポーザーに配置する方が理にかなっています。
また、Markdownを使用して現在テキストをフォーマットできるさまざまな方法や、長年にわたって作成されたさまざまなテーマコンポーネントに関する一般的な提案もあります。
興味深いですね。では、ハイライトされたテキストはユーザーにのみ表示されるのか、それとも全員に表示されるのか、ということですか？後者の場合、全員のハイライトされたテキストが一部の人に見えるということになりますか？私には、後者は混沌としていてあまり役に立たないように感じます。前者は実装するのが現実的ではないと思います。
Discourse Shared Edits は、このようなものを使用できる可能性があります。これにより、複数の人が編集している場合に、誰がどのテキストに貢献したかが明確になります。しかし、これも価値は限定的であり、混沌とする可能性もあると思います。
素晴らしいです！個人のサイトにインストールしましたが、うまく機能します。よくできました！
「いいね！」 3
まさにその通りです、@tobiaseigen！私たちは、テキストの一部を素早くハイライトしたいときに読んでいるときにハイライターペンを使います。
これは、ミニ編集ウィンドウで、編集したい選択したテキストの周りに<mark>some text</mark>のようなタグを入力できる高速編集機能を使っているときと同じように考えています…
<mark>some text</mark>
ハイライターテーマコンポーネントのコピーを作成し、api-setup.js のコードを変更して、ハイライターボタン（または h キーを押す）を PluginOutlet に配置すると機能すると思いますか？
quote-button-after
api-setup.js コード
import { apiInitializer } from "discourse/lib/api";
import loadScript from "discourse/lib/load-script";
import I18n from "I18n";
async function applyHighlight(element) {
const highlights = element.querySelectorAll("mark");
if (!highlights.length) {
return;
}
}
export default apiInitializer("0.11.1", (api) => {
const { iconNode } = require("discourse-common/lib/icon-library");
let icon = iconNode("highlighter");
const currentLocale = I18n.currentLocale();
// I18n.translations[currentLocale].js.highlight_button_title = I18n.t(themePrefix("composer_highlight_button_title"));
// I18n.translations[currentLocale].js.composer.highlight_button_text = I18n.t(themePrefix("composer_highlight_button_text"));
I18n.translations[currentLocale].js.highlight_button_title = "Highlight Text";
I18n.translations[currentLocale].js.composer.this = "this";
// I18n.translations[currentLocale].js.composer.highlight_button_text = "Highlight Text";
api.modifyClass("controller:composer", {
pluginId: "highlight",
actions: {
highlightButton() {
this.get("toolbarEvent").applySurround("\n" + `<mark>` + "\n</mark>\n");
},
},
});
// add button to the toolbar
api.onToolbarCreate((toolbar) => {
toolbar.addButton({
id: "composer_highlight_button",
group: "extras",
icon: "highlighter",
shortcut: "H",
preventFocus: true,
trimLeading: true,
title: "highlight_button_title",
// perform: e => e.applySurround('[wrap=highlight]', '[/wrap]', 'this')
perform: (e) => e.applySurround("<mark>", "</mark>", "this"),
});
});
api.decorateCookedElement(
async (elem, helper) => {
const id = helper ? `post_${helper.getModel().id}` : "composer";
applyHighlight(elem, id);
},
{ id: "wrap-mark" }
);
});
それとも、徒労に終わるのでしょうか！？
なるほど、何をしようとしているのか理解しました。
テーマコンポーネントで実現できるのであれば、どうぞ進めてください。私はプログラマーではないので、どのように実現するのか分かりません。
「いいね！」 2
両方とも insert と delete
両方とも <ins>insert</ins> と <del>delete</del>
さて、@Lilly が言うように、「ガジェットはクール！」という理由だけで、これらを Composer Button Theme Components に組み込む必要があります。
おい！ HTML Formatting Tags
これは、より正確なブックマークの一形態になり得ると私は考えています。
ブックマークシステムを拡張して、テキストのハイライト部分を記憶するようにすることは可能でしょうか？
「いいね！」 2
