# 編集するにはクリック
**URL:** https://meta.discourse.org/t/click-to-edit/321054
**Category:** Plugin
**Created:** [2024 年 8 月 10 日午後 7:22 UTC](https://meta.discourse.org/t/click-to-edit/321054 "2024-08-10T19:22:25Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@pipkin](https://meta.discourse.org/u/pipkin)
#### Post date: [2024 年 8 月 10 日午後 7:22 UTC](https://meta.discourse.org/t/click-to-edit/321054/1 "2024-08-10T19:22:25Z")
| | | |
| --- | --- | --- |
| ℹ | **概要** | コンポーザーのテキストエリアをクリックすると、プレビューペインの対応する行が選択され、その逆も同様です。 |
| 🛠 | **リポジトリリンク** | \u003chttps://github.com/thijsbrilleman/discourse-click-to-edit\u003e |
| 📖 | **インストールガイド** | [Discourseにプラグインをインストールする方法](https://meta.discourse.org/t/install-plugins-in-discourse/19157) |
### 特徴
コンポーザーのテキストエリアをクリックすると、プレビューペインの対応する行が選択され、その逆も同様です。
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [2024 年 8 月 10 日午後 10:39 UTC](https://meta.discourse.org/t/click-to-edit/321054/3 "2024-08-10T22:39:05Z")
それは歓迎されるべきことのように思えますが、私には何も言う権利がありません。
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [2024 年 8 月 11 日午前 3:59 UTC](https://meta.discourse.org/t/click-to-edit/321054/5 "2024-08-11T03:59:56Z")
こんにちは 👋 ありがとうございます、これは本当にクールですね 🎉 テーマコンポーネントにできたら最高だと思います。🙂
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [2024 年 8 月 11 日午前 6:51 UTC](https://meta.discourse.org/t/click-to-edit/321054/6 "2024-08-11T06:51:41Z")
iPadではあまりうまく機能しません。なぜなら、書いているときにテキスト全体が選択されてしまうからです。見た目が非常に奇妙です。
---
### Author:  [@pipkin](https://meta.discourse.org/u/pipkin)
#### Post date: [2024 年 8 月 11 日午前 10:15 UTC](https://meta.discourse.org/t/click-to-edit/321054/7 "2024-08-11T10:15:03Z")
> [@Don](#):
>
> こんにちは 👋 ありがとう、これは本当にクールです 🎉 テーマコンポーネントとして作成できれば最高だと思います。 🙂
ありがとうございます。私もそう思います。時間がある限り、検討します。プルリクエストを提出していただくこともいつでも歓迎します。
> [@Jagster](#):
>
> iPadでは、入力時にテキスト全体が選択されてしまうため、あまりうまく機能しません。非常に奇妙に見えます。
>
> 
これは現在の意図した動作ですが、もちろんより良いアイデアがあれば検討します。どのような視覚的な手がかりをお勧めしますか？
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [2024 年 8 月 11 日午前 10:52 UTC](https://meta.discourse.org/t/click-to-edit/321054/8 "2024-08-11T10:52:25Z")
選択されたものが実際には選択されていないのに、貼り付けられたテキストとして表示されることがあります。その後、アクションと応答が発生します。
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2024 年 8 月 12 日午前 4:53 UTC](https://meta.discourse.org/t/click-to-edit/321054/10 "2024-08-12T04:53:04Z")
不思議なのですが、これはテーマコンポーネントではなくプラグインなのですか？ トークンはすべてクライアントサイドで生成できるのではないでしょうか？
ところで、素晴らしい出来栄えです。マークダウンエンジンによって挿入される行番号を活用している点が気に入っています。
---
### Author:  [@pipkin](https://meta.discourse.org/u/pipkin)
#### Post date: [2024 年 8 月 12 日午前 8:08 UTC](https://meta.discourse.org/t/click-to-edit/321054/11 "2024-08-12T08:08:46Z")
サムさん、ありがとうございます。
お気づきかもしれませんが、`data-ln` 属性は、サーバーで生成および保存される調理済み HTML にも存在します。
これは、後でプラグインを拡張して、トピック表示ページからフラグメントの信頼性の高い挿入/編集を可能にするために実装しました。これは、以下に示す編集ボタンに相当しますが、もう少し堅牢です。
1 年前に書いたものですが、記憶が正しければ、そのために `plugin.rb` の次の行が必要です。
`register_asset "vendor/javascripts/markdown-it-line-numbers.js", :vendored_pretty_text`
これは、HTML を調理する際に MarkdownIt 拡張機能がサーバー側でも実行されることを保証するために必要です。
ただし、拡張編集機能を実装する時間がありませんでした。そのため、その要件が削除された場合は、コンポーネントに変換できると思います。
---
### Author:  [@pipkin](https://meta.discourse.org/u/pipkin)
#### Post date: [2024 年 8 月 12 日午後 2:28 UTC](https://meta.discourse.org/t/click-to-edit/321054/12 "2024-08-12T14:28:22Z")
@sam それをテーマコンポーネントに変換しようとしていますが、markdownit プラグインのコンテキストでこのコードを実行する方法がわかりません。
```javascript
// javascripts/lib/discourse-markdown/initialize_markdownit_plugin.js:
export function setup(helper) {
helper.registerPlugin(markdownitLineNumbers); // markdownitLineNumbers はすでに利用可能です
}
```
以前に書いたプラグインの行が、クライアントサイドのマジックも散りばめているのではないかと疑っています。
```ruby
# plugin.rb
register_asset "vendor/javascripts/markdown-it-line-numbers.js", :vendored_pretty_text
```
何か心当たりはありますか？
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2024 年 8 月 12 日午後 11:50 UTC](https://meta.discourse.org/t/click-to-edit/321054/13 "2024-08-12T23:50:19Z")
わかりません。チームに連絡します。
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [2024 年 8 月 13 日午前 1:21 UTC](https://meta.discourse.org/t/click-to-edit/321054/15 "2024-08-13T01:21:15Z")
これは、現在プラグインスコープのみに制限されているためだと思います。このチェックがなければ機能するはずです。_(このコードは、この[コミット](https://github.com/discourse/discourse/commit/9a1695ccc1bcfb8bcbdc0512fff28a83500029e0)で導入されました)_
[https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/static/markdown-it/features.js#L5](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/static/markdown-it/features.js#L5)
別のコンポーネントのために行番号を統合したかったのですが、プラグインにしたくなかったので諦めました。マークダウン機能がテーマコンポーネントでサポートされるようになると、非常に素晴らしいと思います！
ちなみに、ここで提案された素晴らしい機能ですね。とても良いです。👍 🚀
---
### Author:  [@pipkin](https://meta.discourse.org/u/pipkin)
#### Post date: [2024 年 8 月 13 日午後 1:00 UTC](https://meta.discourse.org/t/click-to-edit/321054/16 "2024-08-13T13:00:39Z")
> [@Arkshine](#):
>
> ```javascript
> if (moduleName.startsWith("discourse/plugins/")) {
> ...
> }
>
> ```
ああ、これで明確になりました。
このコードを見ると、実行時にテーマコンポーネントからマークダウンプラグインを手動で注入できるかもしれませんが、これはかなりハッキーな方法になります。実装を試みる前に、コアチームからの評決を待ちます。
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [2024 年 8 月 13 日午後 2:00 UTC](https://meta.discourse.org/t/click-to-edit/321054/17 "2024-08-13T14:00:32Z")
プレビュー用にはクライアント、投稿のHTMLを事前レンダリングするためにサーバーの両方でマークダウンパイプラインを実行しています。そのため、プラグインのみを対象として設計されています。サーバーサイドでコードを挿入できるのはプラグインだけです。
今回のケースは、拡張機能がサーバーではなくコンポーザーでのみ必要とされるため、非常に珍しいです。そのため、テーマコンポーネントから行うことは可能でしょう。
> [@pipkin](#):
>
> テーマコンポーネントから実行時に手動でマークダウンプラグインを挿入できる可能性がある
何か特別な戦略を考えていましたか？
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [2024 年 8 月 13 日午後 5:17 UTC](https://meta.discourse.org/t/click-to-edit/321054/18 "2024-08-13T17:17:08Z")
これは幅広い層にアピールするもののように思えます。長い投稿の中で自分の居場所を見つけるのは難しいことがあります。#pr-welcome でしょうか？
---
### Author:  [@pipkin](https://meta.discourse.org/u/pipkin)
#### Post date: [2024 年 8 月 13 日午後 6:19 UTC](https://meta.discourse.org/t/click-to-edit/321054/19 "2024-08-13T18:19:40Z")
> [@david](#):
>
> このための特定の戦略がありましたか？
元のコードベースでこの関数をオーバーライドします。
```javascript
// discourse/app/assets/javascripts/discourse/app/components/d-editor.js
async cachedCookAsync(text, options) {
this._cachedCookFunction ||= await generateCookFunction(options || {});
return await this._cachedCookFunction(text);
}
```
テーマコンポーネントイニシャライザーでオーバーライドします。
```javascript
export default {
name: "d-editor-cached-cook-async-override",
initialize() {
const dEditor = require("discourse/components/d-editor").default;
dEditor.reopen({
cachedCookAsync(text, options) {
// ここにコードを重複させて、変更されたcook関数を返す
},
});
},
};
```
これは、たとえ機能したとしても、かなりのコードの重複を意味します。汚い、汚い。
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [2024 年 8 月 13 日午後 6:51 UTC](https://meta.discourse.org/t/click-to-edit/321054/20 "2024-08-13T18:51:24Z")
うーん、そうですね、同意します。理想的ではありません。markdown-it モジュールは非同期でロードされ、テーマ/プラグインが直接アクセスできる amd モジュールシステムの一部ではないため、コードを複製することさえできない可能性があります。🤔
テーマがクライアントサイド専用の md 変換を提供できるシステムを構築することはクールかもしれませんが、ユースケースはかなり限られています。ほとんどの場合、人々は md 変換がサーバーサイドでも適用されることを望んでいます。
そのため、現時点ではプラグインにとどまるのが最善のアプローチだと思われます。
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2024 年 8 月 14 日午前 5:56 UTC](https://meta.discourse.org/t/click-to-edit/321054/21 "2024-08-14T05:56:26Z")
それなら、この種の装飾は適用されるべきでしょうか？
例：
`.....
`
追加のdata属性は、コードブロック内にいる場合にオートコンプリートを表示しない、引用やクイック編集を容易にするなど、多くの内部実装に役立ちます。
些細な実装はほとんど追加の負荷をかけませんが、ソースコードの山を削除することを可能にします。
>
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [2024 年 8 月 14 日午前 10:26 UTC](https://meta.discourse.org/t/click-to-edit/321054/22 "2024-08-14T10:26:36Z")
過去にも（フラグの後ろで）ありましたが、[このコミット](https://github.com/discourse/discourse/commit/60851037d8770e5d5699d5aeec58a88585fec6f4)で削除されました。その機能に関する内部議論で見つけたスクリーンショットがあります。
つまり、パフォーマンスの問題は行番号の挿入ではなく、スクロール同期のコードにあったということです 👌
ですから、プレビューでのみ追加される限り、データソース行の挿入をコアに追加することに反対はありません。@pipkin さん、PRを作成していただけますか？
---
### Author:  [@pipkin](https://meta.discourse.org/u/pipkin)
#### Post date: [2024 年 8 月 14 日午後 1:32 UTC](https://meta.discourse.org/t/click-to-edit/321054/23 "2024-08-14T13:32:05Z")
> [@david](#):
>
> コアへの data-source-line インジェクションの追加には反対しません。プレビューでのみ追加される限りは。@pipkin、これはあなたが PR を作成することに興味があるものですか？
喜んで！皆さんに何かお返しができることを嬉しく思います。
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [2024 年 8 月 30 日午後 10:07 UTC](https://meta.discourse.org/t/click-to-edit/321054/24 "2024-08-30T22:07:56Z")
> [@pipkin](#):
>
> この動作を実装したのは、後でプラグインを拡張して、トピック表示ページから信頼性の高いフラグメントの挿入/編集を可能にするためです。これは、以下に示す編集ボタンと同等ですが、もう少し堅牢です。
>
> 
> [@pfaffman](#):
>
> これは広くアピールすると思われるものです。長い投稿で自分の場所を見つけるのは難しいことがあります。
全く同感です 👾 👍 🙏
昨年、同様の機能リクエストを提出しました…
> [@Fast Edit - Please Show Selected Portion as Selected Whenever the Composer Opens](https://meta.discourse.org/t/fast-edit-please-show-selected-portion-as-selected-whenever-the-composer-opens/281044):
>
> When I select a portion of text to “Fast Edit”, and then the Composer opens, I expect that the text I have selected will already be selected in the Composer. At this point, the cursor often does not even appear anywhere near my selected text, and often even arrives in the Title. It is cumbersome and confusing to have to visually locate the resulting position of the cursor, and also to have to then use the mouse to re-position the cursor and re-select the portion I already had selected for edit…
[次のページ](https://meta.discourse.org/t/click-to-edit/321054.md?page=2)