From b33fe530476f89282e1e554aecf0cfe82e6d6edd Mon Sep 17 00:00:00 2001 From: 1STEP621 <86859447+1STEP621@users.noreply.github.com> Date: Thu, 14 Dec 2023 13:11:23 +0900 Subject: [PATCH] =?UTF-8?q?Enhance(frontend):=20MFM=E3=82=84=E7=B5=B5?= =?UTF-8?q?=E6=96=87=E5=AD=97=E3=81=8C=E4=BD=BF=E3=81=88=E3=82=8B=E5=85=A5?= =?UTF-8?q?=E5=8A=9B=E3=83=9C=E3=83=83=E3=82=AF=E3=82=B9=E3=81=A7=E3=82=AA?= =?UTF-8?q?=E3=83=BC=E3=83=88=E3=82=B3=E3=83=B3=E3=83=97=E3=83=AA=E3=83=BC?= =?UTF-8?q?=E3=83=88=E3=82=92=E4=BD=BF=E3=81=88=E3=82=8B=E3=82=88=E3=81=86?= =?UTF-8?q?=E3=81=AB=20(#12643)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * rich autocomplete for use in profiles, announcements, and channel descriptions * implementation omissions * add tab, apply to page editor, and fix something * componentization * fix nyaize doesn't working in profile preview * detach autocomplete instance when unmounted * fix: mismatched camelCase * remove unused / unnecessary styles * update CHANGELOG.md * fix lint * remove dump.rdb * props.richAutocomplete -> autocomplete * Update packages/frontend/src/scripts/autocomplete.ts * clarify namings メンションなども「MFM」に含まれるのか自信がなかったのでrichSyntaxなどとぼかしていましたが、含むようなので変更しました * tweak * Update MkFormDialog.vue * rename --------- Co-authored-by: syuilo --- CHANGELOG.md | 2 ++ .../frontend/src/components/MkFormDialog.vue | 4 +-- packages/frontend/src/components/MkInput.vue | 15 +++++++++- .../frontend/src/components/MkTextarea.vue | 29 ++++++++++++++++++- .../global/MkMisskeyFlavoredMarkdown.ts | 2 +- .../src/pages/admin/announcements.vue | 4 +-- .../frontend/src/pages/channel-editor.vue | 4 +-- packages/frontend/src/pages/clip.vue | 1 + .../frontend/src/pages/my-clips/index.vue | 1 + .../page-editor/els/page-editor.el.text.vue | 16 ++++++++-- .../frontend/src/pages/settings/profile.vue | 7 +++-- packages/frontend/src/scripts/autocomplete.ts | 14 +++++---- 12 files changed, 80 insertions(+), 19 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 84a6ce35e..972c87651 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -37,6 +37,8 @@ - Enhance: データセーバーの適用範囲を個別で設定できるように - 従来のデータセーバーの設定はリセットされます - Enhance: タイムライン上のタブからリスト、アンテナ、チャンネルの管理ページにジャンプできるように +- Enhance: ユーザー名、プロフィール、お知らせ、ページの編集画面でMFMや絵文字のオートコンプリートが使用できるように +- Enhance: プロフィール、お知らせの編集画面でMFMのプレビューを表示できるように - Feat: センシティブと判断されたウェブサイトのサムネイルをぼかすように - ウェブサイトをセンシティブと判断する仕組みが動いていないため、summalyProxyを使用しないと機能しません。 - fix: 「設定のバックアップ」で一部の項目がバックアップに含まれていなかった問題を修正 diff --git a/packages/frontend/src/components/MkFormDialog.vue b/packages/frontend/src/components/MkFormDialog.vue index 24404728c..6f882cfab 100644 --- a/packages/frontend/src/components/MkFormDialog.vue +++ b/packages/frontend/src/components/MkFormDialog.vue @@ -26,11 +26,11 @@ SPDX-License-Identifier: AGPL-3.0-only - + - + diff --git a/packages/frontend/src/components/MkInput.vue b/packages/frontend/src/components/MkInput.vue index 72babfac7..ae797eb7d 100644 --- a/packages/frontend/src/components/MkInput.vue +++ b/packages/frontend/src/components/MkInput.vue @@ -43,11 +43,12 @@ SPDX-License-Identifier: AGPL-3.0-only @@ -194,4 +213,12 @@ onMounted(() => { .save { margin: 8px 0 0 0; } + +.mfmPreview { + padding: 12px; + border-radius: var(--radius); + box-sizing: border-box; + min-height: 130px; + pointer-events: none; +} diff --git a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts index fe599dcea..28293b287 100644 --- a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts +++ b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts @@ -37,7 +37,7 @@ type MfmProps = { isNote?: boolean; emojiUrls?: string[]; rootScale?: number; - nyaize: boolean | 'respect'; + nyaize?: boolean | 'respect'; parsedNodes?: mfm.MfmNode[] | null; enableEmojiMenu?: boolean; enableEmojiMenuReaction?: boolean; diff --git a/packages/frontend/src/pages/admin/announcements.vue b/packages/frontend/src/pages/admin/announcements.vue index 92070dc6c..e4bbe1595 100644 --- a/packages/frontend/src/pages/admin/announcements.vue +++ b/packages/frontend/src/pages/admin/announcements.vue @@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only - + @@ -75,7 +75,6 @@ import { ref, computed } from 'vue'; import XHeader from './_header_.vue'; import MkButton from '@/components/MkButton.vue'; import MkInput from '@/components/MkInput.vue'; -import MkTextarea from '@/components/MkTextarea.vue'; import MkSwitch from '@/components/MkSwitch.vue'; import MkRadios from '@/components/MkRadios.vue'; import MkInfo from '@/components/MkInfo.vue'; @@ -83,6 +82,7 @@ import * as os from '@/os.js'; import { i18n } from '@/i18n.js'; import { definePageMetadata } from '@/scripts/page-metadata.js'; import MkFolder from '@/components/MkFolder.vue'; +import MkTextarea from '@/components/MkTextarea.vue'; const announcements = ref([]); diff --git a/packages/frontend/src/pages/channel-editor.vue b/packages/frontend/src/pages/channel-editor.vue index af382bb13..f16b8709f 100644 --- a/packages/frontend/src/pages/channel-editor.vue +++ b/packages/frontend/src/pages/channel-editor.vue @@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only - + @@ -70,7 +70,6 @@ SPDX-License-Identifier: AGPL-3.0-only