feat: show background color for direct post to reduce mistake (elk-zone#2732)

Author: shuuji3

components/publish/PublishWidget.vue

@@ -158,6 +158,8 @@ const isExceedingCharacterLimit = computed(() => {
 
 const postLanguageDisplay = computed(() => languagesNameList.find(i => i.code === (draft.value.params.language || preferredLanguage))?.nativeName)
 
+const isDM = computed(() => draft.value.params.visibility === 'direct')
+
 async function handlePaste(evt: ClipboardEvent) {
   const files = evt.clipboardData?.files
   if (!files || files.length === 0)
@@ -281,7 +283,10 @@ onDeactivated(() => {
           <EditorContent
             :editor="editor"
             flex max-w-full
-            :class="shouldExpanded ? 'min-h-30 md:max-h-[calc(100vh-200px)] sm:max-h-[calc(100vh-400px)] max-h-35 of-y-auto overscroll-contain' : ''"
+            :class="{
+              'min-h-30 md:max-h-[calc(100vh-200px)] sm:max-h-[calc(100vh-400px)] max-h-35 of-y-auto overscroll-contain': shouldExpanded,
+              'pt2 pb0.5 px3.5 bg-dm rounded-4 me--1 ms--1 mt--1': isDM,
+            }"
             @keydown="stopQuestionMarkPropagation"
             @keydown.esc.prevent="editor?.commands.blur()"
           />