elk/components/publish/PublishWidget.vue

382 lines
14 KiB
Vue
Raw Normal View History

2022-11-21 06:55:31 +00:00
<script setup lang="ts">
import { EditorContent } from '@tiptap/vue-3'
2023-01-19 10:27:08 +00:00
import stringLength from 'string-length'
import type { mastodon } from 'masto'
2022-12-13 14:03:30 +00:00
import type { Draft } from '~/types'
2022-11-21 06:55:31 +00:00
const {
draftKey,
initial = getDefaultDraft,
expanded = false,
2022-11-30 04:50:29 +00:00
placeholder,
dialogLabelledBy,
2022-11-21 06:55:31 +00:00
} = defineProps<{
2023-01-05 15:42:36 +00:00
draftKey?: string
initial?: () => Draft
2022-11-21 06:55:31 +00:00
placeholder?: string
inReplyToId?: string
2023-01-08 06:21:09 +00:00
inReplyToVisibility?: mastodon.v1.StatusVisibility
expanded?: boolean
dialogLabelledBy?: string
2022-11-21 06:55:31 +00:00
}>()
const emit = defineEmits<{
2023-01-08 06:21:09 +00:00
(evt: 'published', status: mastodon.v1.Status): void
}>()
2022-12-01 07:24:35 +00:00
2022-11-30 04:50:29 +00:00
const { t } = useI18n()
2023-01-09 10:04:18 +00:00
const draftState = useDraft(draftKey, initial)
2023-02-12 15:15:29 +00:00
const { draft } = $(draftState)
const {
isExceedingAttachmentLimit, isUploading, failedAttachments, isOverDropZone,
uploadAttachments, pickAttachments, setDescription, removeAttachment,
dropZoneRef,
} = $(useUploadMediaAttachment($$(draft)))
let { shouldExpanded, isExpanded, isSending, isPublishDisabled, publishDraft, failedMessages, preferredLanguage, publishSpoilerText } = $(usePublish(
{
draftState,
...$$({ expanded, isUploading, initialDraft: initial }),
},
))
2022-11-24 06:54:54 +00:00
const { editor } = useTiptap({
2022-11-25 18:10:17 +00:00
content: computed({
get: () => draft.params.status,
2023-01-05 15:42:36 +00:00
set: (newVal) => {
draft.params.status = newVal
draft.lastUpdated = Date.now()
},
2022-11-25 18:10:17 +00:00
}),
placeholder: computed(() => placeholder ?? draft.params.inReplyToId ? t('placeholder.replying') : t('placeholder.default_1')),
2022-11-29 11:57:05 +00:00
autofocus: shouldExpanded,
2022-11-25 14:07:31 +00:00
onSubmit: publish,
onFocus() {
if (!isExpanded && draft.initialText) {
editor.value?.chain().insertContent(`${draft.initialText} `).focus('end').run()
draft.initialText = ''
}
isExpanded = true
},
onPaste: handlePaste,
})
2023-01-30 11:09:04 +00:00
const characterCount = $computed(() => {
const text = htmlToText(editor.value?.getHTML() || '')
let length = stringLength(text)
// taken from https://github.com/mastodon/mastodon/blob/07f8b4d1b19f734d04e69daeb4c3421ef9767aac/app/lib/text_formatter.rb
const linkRegex = /(https?:\/\/(www\.)?|xmpp:)\S+/g
// taken from https://github.com/mastodon/mastodon/blob/af578e/app/javascript/mastodon/features/compose/util/counter.js
const countableMentionRegex = /(^|[^/\w])@(([a-z0-9_]+)@[a-z0-9.-]+[a-z0-9]+)/ig
// maximum of 23 chars per link
// https://github.com/elk-zone/elk/issues/1651
const maxLength = 23
for (const [fullMatch] of text.matchAll(linkRegex))
length -= fullMatch.length - Math.min(maxLength, fullMatch.length)
2023-03-19 12:12:20 +00:00
for (const [fullMatch, before, _handle, username] of text.matchAll(countableMentionRegex))
length -= fullMatch.length - (before + username).length - 1 // - 1 for the @
if (draft.mentions) {
// + 1 is needed as mentions always need a space seperator at the end
length += draft.mentions.map((mention) => {
const [handle] = mention.split('@')
return `@${handle}`
}).join(' ').length + 1
}
length += stringLength(publishSpoilerText)
return length
})
2022-11-23 17:17:54 +00:00
const isExceedingCharacterLimit = $computed(() => {
return characterCount > characterLimit.value
})
const postLanguageDisplay = $computed(() => languagesNameList.find(i => i.code === (draft.params.language || preferredLanguage))?.nativeName)
2023-01-30 11:09:04 +00:00
2022-11-23 17:17:54 +00:00
async function handlePaste(evt: ClipboardEvent) {
const files = evt.clipboardData?.files
2022-11-24 08:20:21 +00:00
if (!files || files.length === 0)
2022-11-23 17:17:54 +00:00
return
2022-11-24 04:05:13 +00:00
evt.preventDefault()
2022-11-23 17:17:54 +00:00
await uploadAttachments(Array.from(files))
}
2022-12-27 19:13:50 +00:00
function insertEmoji(name: string) {
editor.value?.chain().focus().insertEmoji(name).run()
2022-12-23 19:15:19 +00:00
}
2022-12-27 19:13:50 +00:00
function insertCustomEmoji(image: any) {
editor.value?.chain().focus().insertCustomEmoji(image).run()
}
2022-12-23 19:15:19 +00:00
async function toggleSensitive() {
draft.params.sensitive = !draft.params.sensitive
}
2022-11-21 06:55:31 +00:00
async function publish() {
const status = await publishDraft()
if (status)
emit('published', status)
2022-11-21 06:55:31 +00:00
}
useWebShareTarget(async ({ data: { data, action } }: any) => {
if (action !== 'compose-with-shared-data')
return
editor.value?.commands.focus('end')
for (const text of data.textParts) {
for (const line of text.split('\n')) {
editor.value?.commands.insertContent({
type: 'paragraph',
content: [{ type: 'text', text: line }],
})
}
}
if (data.files.length !== 0)
await uploadAttachments(data.files)
})
defineExpose({
focusEditor: () => {
editor.value?.commands?.focus?.()
},
})
onDeactivated(() => {
clearEmptyDrafts()
})
2022-11-21 06:55:31 +00:00
</script>
<template>
2023-03-07 19:32:21 +00:00
<div v-if="isHydrated && currentUser" flex="~ col gap-4" py3 px2 sm:px4 aria-roledescription="publish-widget">
2022-11-24 11:35:26 +00:00
<template v-if="draft.editingStatus">
<div flex="~ col gap-1">
<div id="state-editing" text-secondary self-center>
2022-11-29 06:57:32 +00:00
{{ $t('state.editing') }}
2022-11-24 11:35:26 +00:00
</div>
2023-02-15 10:34:23 +00:00
<StatusCard :status="draft.editingStatus" :actions="false" :hover="false" is-preview px-0 />
2022-11-24 07:53:27 +00:00
</div>
2022-11-24 11:35:26 +00:00
<div border="b dashed gray/40" />
</template>
2022-11-24 14:32:20 +00:00
2022-12-27 19:13:50 +00:00
<div flex gap-3 flex-1>
<NuxtLink :to="getAccountRoute(currentUser.account)">
<AccountBigAvatar :account="currentUser.account" square />
2022-11-24 15:19:18 +00:00
</NuxtLink>
<!-- This `w-0` style is used to avoid overflow problems in flex layoutsso don't remove it unless you know what you're doing -->
2022-11-24 11:35:26 +00:00
<div
ref="dropZoneRef"
flex w-0 flex-col gap-3 flex-1
border="2 dashed transparent"
2022-11-25 09:31:32 +00:00
:class="[isSending ? 'pointer-events-none' : '', isOverDropZone ? '!border-primary' : '']"
2022-11-24 11:35:26 +00:00
>
<ContentMentionGroup v-if="draft.mentions?.length && shouldExpanded" replying>
2023-01-16 05:10:33 +00:00
<button v-for="m, i of draft.mentions" :key="m" text-primary hover:color-red @click="draft.mentions?.splice(i, 1)">
{{ accountToShortHandle(m) }}
2023-01-16 05:10:33 +00:00
</button>
</ContentMentionGroup>
<div v-if="draft.params.sensitive">
<input
v-model="publishSpoilerText"
type="text"
:placeholder="$t('placeholder.content_warning')"
p2 border-rounded w-full bg-transparent
outline-none border="~ base"
>
</div>
<CommonErrorMessage v-if="failedMessages.length > 0" described-by="publish-failed">
<header id="publish-failed" flex justify-between>
<div flex items-center gap-x-2 font-bold>
<div aria-hidden="true" i-ri:error-warning-fill />
<p>{{ $t('state.publish_failed') }}</p>
</div>
<CommonTooltip placement="bottom" :content="$t('action.clear_publish_failed')">
<button
flex rounded-4 p1 hover:bg-active cursor-pointer transition-100 :aria-label="$t('action.clear_publish_failed')"
@click="failedMessages = []"
>
<span aria-hidden="true" w="1.75em" h="1.75em" i-ri:close-line />
</button>
</CommonTooltip>
</header>
<ol ps-2 sm:ps-1>
<li v-for="(error, i) in failedMessages" :key="i" flex="~ col sm:row" gap-y-1 sm:gap-x-2>
<strong>{{ i + 1 }}.</strong>
<span>{{ error }}</span>
</li>
</ol>
</CommonErrorMessage>
<div relative flex-1 flex flex-col>
2022-11-25 13:29:42 +00:00
<EditorContent
:editor="editor"
2022-12-14 13:22:35 +00:00
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' : ''"
2022-11-25 13:29:42 +00:00
/>
</div>
2022-11-24 07:53:27 +00:00
<div v-if="isUploading" flex gap-1 items-center text-sm p1 text-primary>
<div animate-spin preserve-3d>
<div i-ri:loader-2-fill />
</div>
2022-11-29 06:57:32 +00:00
{{ $t('state.uploading') }}
</div>
<CommonErrorMessage
v-else-if="failedAttachments.length > 0"
:described-by="isExceedingAttachmentLimit ? 'upload-failed uploads-per-post' : 'upload-failed'"
>
<header id="upload-failed" flex justify-between>
<div flex items-center gap-x-2 font-bold>
<div aria-hidden="true" i-ri:error-warning-fill />
<p>{{ $t('state.upload_failed') }}</p>
</div>
<CommonTooltip placement="bottom" :content="$t('action.clear_upload_failed')">
<button
flex rounded-4 p1 hover:bg-active cursor-pointer transition-100
:aria-label="$t('action.clear_upload_failed')" @click="failedAttachments = []"
>
<span aria-hidden="true" w="1.75em" h="1.75em" i-ri:close-line />
</button>
</CommonTooltip>
</header>
<div v-if="isExceedingAttachmentLimit" id="uploads-per-post" ps-2 sm:ps-1 text-small>
{{ $t('state.attachments_exceed_server_limit') }}
</div>
<ol ps-2 sm:ps-1>
<li v-for="error in failedAttachments" :key="error[0]" flex="~ col sm:row" gap-y-1 sm:gap-x-2>
<strong>{{ error[1] }}:</strong>
<span>{{ error[0] }}</span>
</li>
</ol>
</CommonErrorMessage>
<div v-if="draft.attachments.length" flex="~ col gap-2" overflow-auto>
2022-11-24 11:35:26 +00:00
<PublishAttachment
v-for="(att, idx) in draft.attachments" :key="att.id"
:attachment="att"
2023-01-05 16:48:20 +00:00
:dialog-labelled-by="dialogLabelledBy ?? (draft.editingStatus ? 'state-editing' : undefined)"
2022-11-24 11:35:26 +00:00
@remove="removeAttachment(idx)"
2022-12-14 23:30:54 +00:00
@set-description="setDescription(att, $event)"
2022-11-24 11:35:26 +00:00
/>
</div>
2022-12-02 07:02:44 +00:00
</div>
</div>
<div flex gap-4>
<div w-12 h-full sm:block hidden />
<div
v-if="shouldExpanded" flex="~ gap-1 1 wrap" m="s--1" pt-2 justify="end" max-w-full
2022-12-02 07:02:44 +00:00
border="t base"
>
2022-12-27 19:13:50 +00:00
<PublishEmojiPicker
@select="insertEmoji"
@select-custom="insertCustomEmoji"
2023-01-04 10:41:19 +00:00
>
<button btn-action-icon :title="$t('tooltip.emoji')">
<div i-ri:emotion-line />
</button>
</PublishEmojiPicker>
2022-12-23 19:15:19 +00:00
2023-01-04 10:41:19 +00:00
<CommonTooltip placement="top" :content="$t('tooltip.add_media')">
2022-12-02 07:02:44 +00:00
<button btn-action-icon :aria-label="$t('tooltip.add_media')" @click="pickAttachments">
<div i-ri:image-add-line />
</button>
</CommonTooltip>
<PublishEditorTools v-if="editor" :editor="editor" />
2022-11-24 09:15:58 +00:00
2022-12-02 07:02:44 +00:00
<div flex-auto />
<PublishCharacterCounter :max="characterLimit" :length="characterCount" />
<CommonTooltip placement="top" :content="$t('tooltip.change_language')">
<CommonDropdown placement="bottom" auto-boundary-max-size>
2023-01-30 11:09:04 +00:00
<button btn-action-icon :aria-label="$t('tooltip.change_language')" w-max mr1>
<span v-if="postLanguageDisplay" text-secondary text-sm ml1>{{ postLanguageDisplay }}</span>
<div v-else i-ri:translate-2 />
<div i-ri:arrow-down-s-line text-sm text-secondary me--1 />
</button>
<template #popper>
<PublishLanguagePicker v-model="draft.params.language" min-w-80 />
</template>
</CommonDropdown>
</CommonTooltip>
2023-01-30 11:09:04 +00:00
<CommonTooltip placement="top" :content="$t('tooltip.add_content_warning')">
<button btn-action-icon :aria-label="$t('tooltip.add_content_warning')" @click="toggleSensitive">
<div v-if="draft.params.sensitive" i-ri:alarm-warning-fill text-orange />
<div v-else i-ri:alarm-warning-line />
</button>
</CommonTooltip>
2023-01-04 10:41:19 +00:00
<PublishVisibilityPicker v-model="draft.params.visibility" :editing="!!draft.editingStatus">
<template #default="{ visibility }">
<button :disabled="!!draft.editingStatus" :aria-label="$t('tooltip.change_content_visibility')" btn-action-icon :class="{ 'w-12': !draft.editingStatus }">
2023-01-04 10:41:19 +00:00
<div :class="visibility.icon" />
<div v-if="!draft.editingStatus" i-ri:arrow-down-s-line text-sm text-secondary me--1 />
</button>
2023-01-04 10:41:19 +00:00
</template>
</PublishVisibilityPicker>
2022-12-02 07:02:44 +00:00
<CommonTooltip v-if="failedMessages.length > 0" id="publish-failed-tooltip" placement="top" :content="$t('tooltip.publish_failed')">
<button
btn-danger rounded-3 text-sm w-full flex="~ gap1" items-center md:w-fit aria-describedby="publish-failed-tooltip"
>
<span block>
<div block i-carbon:face-dizzy-filled />
</span>
<span>{{ $t('state.publish_failed') }}</span>
</button>
</CommonTooltip>
<CommonTooltip v-else id="publish-tooltip" placement="top" :content="$t('tooltip.add_publishable_content')" :disabled="!(isPublishDisabled || isExceedingCharacterLimit)">
<button
btn-solid rounded-3 text-sm w-full flex="~ gap1" items-center
md:w-fit
class="publish-button"
:aria-disabled="isPublishDisabled || isExceedingCharacterLimit"
aria-describedby="publish-tooltip"
@click="publish"
>
<span v-if="isSending" block animate-spin preserve-3d>
<div block i-ri:loader-2-fill />
</span>
<span v-if="failedMessages.length" block>
<div block i-carbon:face-dizzy-filled />
</span>
<span v-if="draft.editingStatus">{{ $t('action.save_changes') }}</span>
<span v-else-if="draft.params.inReplyToId">{{ $t('action.reply') }}</span>
<span v-else>{{ !isSending ? $t('action.publish') : $t('state.publishing') }}</span>
</button>
</CommonTooltip>
2022-11-24 07:53:27 +00:00
</div>
2022-11-21 06:55:31 +00:00
</div>
</div>
</template>
<style scoped>
.publish-button[aria-disabled=true] {
cursor: not-allowed;
background-color: var(--c-bg-btn-disabled);
color: var(--c-text-btn-disabled);
}
.publish-button[aria-disabled=true]:hover {
background-color: var(--c-bg-btn-disabled);
color: var(--c-text-btn-disabled);
}
</style>