report_template.vue, report_template_modal.vueをreactに対応させる #5139
Comments
|
このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。 |
komagata
changed the title
|
このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。 |
|
このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。 |
|
このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。 |
|
このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。 |
|
このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。 |
|
このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。 |
|
このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。 |
|
お疲れ様です。 聞きたいこと現状の「編集を保存せずにモーダルを閉じて、もう一度編集モーダルを開くと、先ほど編集をしていた文面がセットされている」という挙動は、維持したほうがいいでしょうか？ 挙動のスクショ
現状の仕様現状のVueでは、下記のような処理で上記の動きを行っています。
子のモーダルを閉じる 考えたこと現在これをReactで書き換えていますが、これを実現するには、親のコンポーネントで // ReportTemlateコンポーネント
export default function ReportTemplate({ templateDescription, templateId }) {
// ...
const [editingTemplate, setEditingTemplate] = useState(registeredTemplate)
// ...
{showModal && (
<ReportTemplateModal
// ...
editingTemplate={editingTemplate}
setEditingTemplate={setEditingTemplate}
closeModal={closeModal}
/>
)}// ReportTemplateModalコンポーネント
<textarea
// ...
value={editingTemplate} // 初期値にstateで保存している最新のテンプレートの下書きを設定
onChange={(e) => setEditingTemplate(e.target.value)}></textarea>いったんこのような形で作業を進めました。 しかしこの場合、子のモーダルでテンプレートの編集の入力をするたびに、stateを管理する親のボタンのコンポーネントまで再レンダリングされるので、パフォーマンス的に微妙なのではないか、と考えました。 また、あくまで個人の感覚ではあるのですが、そもそもこのモーダルを開いた時は、前回にモーダルを開いていたときの編集内容ではなく、編集のベースとなる「そのときに登録されているテンプレート」が常にセットされる方が自然なのではないかとも考えました。 #3391 考えてみた提案内容
上記の動作イメージが下です。
編集内容はモーダルを閉じても維持すべきかどうか以外に、
以上はあくまで例ですが、このようなアドバイスがもしあればご教示いただけるとありがたいです🙏 |
維持しなくて良いです。
気にしなくて良いです。 |
|
@komagata それでは、「編集を保存せずにモーダルを閉じて、もう一度編集モーダルを開くと、先ほど編集をしていた文面がセットされている」という挙動は維持せず、
こちらで提案させていただいた内容でまずは実装し、メンバー・komagataさんにレビューいただくように進めさせていただきます。 また再レンダリングを気にする温度感的なものもシェアいただきありがとうございます。こちらは今後の参考にさせていただきます！ |
|
@komagata @machida 編集内容が登録内容と同じ場合、「変更」ボタンが押せないように変更変更前は、既存のテンプレートから無編集の状態でも「変更」ボタンを押してAPIを叩けていましたが、このシナリオでボタンを押せないように修正する予定です。
「新規登録 -> ページを更新せず再度をモーダルを開き、再編集してテンプレート変更する」というシナリオで、
|
|
@junohm410 共有ありがとうございますー🙏 |
|
@komagata React化に際して、処理で変更できる点現状編集中のテンプレートのマークダウンプレビューは、 変更できる点編集中のテンプレートのマークダウンプレビューは、 確認いただきたい点上の「変更できる点」で進めて問題ないか、ご判断いただきたいです。 変更できる理由の説明現行のVueでは、編集中のテンプレートのマークダウンプレビューは、下記のように // app/javascript/report_template_modal.vue
// 中略
.a-markdown-input.js-markdown-parent
.a-markdown-input__inner.js-tabs__content(
v-bind:class='{ "is-active": isActive("template") }')
textarea.a-text-input.a-markdown-input__textare.has-max-height(
:id='`js-template-content`',
:data-preview='`#js-template-preview`', // textareaMarkdownによるプレビュー実装
v-model='editingTemplate',
name='report_template[description]')
.a-markdown-input__inner.js-tabs__content.a-long-text.is-md.a-markdown-input__preview(
v-bind:class='{ "is-active": isActive("preview") }',
v-html='markdownDescription') // MarkdownInitializer#renderによるプレビュー実装
#js-template-preview // textareaMarkdownによるプレビュー実装
// 中略
markdownDescription() {
const markdownInitializer = new MarkdownInitializer()
return markdownInitializer.render(this.editingTemplate) // MarkdownInitializer#renderによるプレビュー実装
}現状のVueにマークダウンプレビューの処理が2つある理由↓こちらのコミットで、マークダウンプレビューがモーダルを開いたタイミングから反映されるようにするために、 問題点しかし、 React化でできることReactでは最初の描画時にpropsの （Vueの場合、 また、他の箇所のマークダウンの表示の実装を見てみると、
というように使い分けられているようだったので、React化にあたり |
|
@junohm410 回答の前に一点質問させてください。（この前提が違うとその後の議論が無意味になるため） textareaMarkdown gemというのはnpmの間違いですかね？ |
|
@komagata |
|
@junohm410 なるほどです〜。
|
|
@komagata
この方法でもFBCのMD独自機能は使えると判断しています。 // app/javascript/textarea-initializer.js
export default class {
static initialize(selector) {
const textareas = document.querySelectorAll(selector)
if (!textareas.length) return
// 中略
// markdown
Array.from(textareas).forEach((textarea) => {
/* eslint-disable no-new */
new TextareaMarkdown(textarea, {
endPoint: '/api/image.json',
paramName: 'file',
responseKey: 'url',
csrfToken: CSRF.getToken(),
placeholder: '%filenameをアップロード中...',
afterPreview: () => {
autosize.update(textarea)
const event = new Event('input', {
bubbles: true,
cancelable: true
})
textarea.dispatchEvent(event)
},
plugins: [
MarkdownItEmoji,
MarkdownItMention,
MarkdownItUserIcon,
MarkdownItTaskLists,
MarkDownItContainerMessage,
MarkDownItContainerDetails,
MarkDownItLinkAttributes,
MarkDownItContainerSpeak
],
markdownOptions: MarkdownOption
})
/* eslint-enable no-new */
})
// user-icon
new UserIconRenderer().render(selector)
// Convert selected text to markdown link on URL paste
new TextareaMarkdownLinkify().linkify(selector)
}ここで独自機能用のプラグインやユーザーアイコンの設定を行なっているため、今回の日報テンプレートの入力・プレビューにおいてもFBC独自機能が使えます。
なので、いったんこの内容で進めさせていただければと思います。 |
|
本番環境での動作確認ができましたので、本IssueはCloseさせていただきます。 |
下記を参考にしてreactに変える。
The text was updated successfully, but these errors were encountered: