diff --git a/changelog.d/quote-by-url.add b/changelog.d/quote-by-url.add new file mode 100644 index 000000000..ef401f93c --- /dev/null +++ b/changelog.d/quote-by-url.add @@ -0,0 +1 @@ +Add quoting by URL and in replies diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue index dfd197e56..cedbdce69 100644 --- a/src/components/chat/chat.vue +++ b/src/components/chat/chat.vue @@ -73,6 +73,7 @@ :disable-notice="true" :disable-lock-warning="true" :disable-polls="true" + :disable-quotes="true" :disable-sensitivity-checkbox="true" :disable-submit="errorLoadingChat || !currentChat" :disable-preview="true" diff --git a/src/components/draft/draft.js b/src/components/draft/draft.js index 971a75b10..4f0d8cbee 100644 --- a/src/components/draft/draft.js +++ b/src/components/draft/draft.js @@ -43,7 +43,12 @@ const Draft = { } }, safeToSave() { - return this.draft.status || this.draft.files?.length || this.draft.hasPoll + return ( + this.draft.status || + this.draft.files?.length || + this.draft.hasPoll || + this.draft.hasQuote + ) }, postStatusFormProps() { return { diff --git a/src/components/edit_status_form/edit_status_form.vue b/src/components/edit_status_form/edit_status_form.vue index 0a7ec760a..1452be422 100644 --- a/src/components/edit_status_form/edit_status_form.vue +++ b/src/components/edit_status_form/edit_status_form.vue @@ -4,6 +4,7 @@ v-bind="params" :post-handler="doEditStatus" :disable-polls="true" + :disable-quotes="true" :disable-visibility-selector="true" /> diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index 507d12f6c..049183575 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -15,6 +15,7 @@ import EmojiInput from '../emoji_input/emoji_input.vue' import suggestor from '../emoji_input/suggestor.js' import MediaUpload from '../media_upload/media_upload.vue' import PollForm from '../poll/poll_form.vue' +import QuoteForm from '../quote/quote_form.vue' import ScopeSelector from '../scope_selector/scope_selector.vue' import Select from '../select/select.vue' import StatusContent from '../status_content/status_content.vue' @@ -35,6 +36,7 @@ import { faChevronRight, faCircleNotch, faPollH, + faQuoteRight, faSmileBeam, faTimes, faUpload, @@ -44,6 +46,7 @@ library.add( faSmileBeam, faPollH, faUpload, + faQuoteRight, faBan, faTimes, faCircleNotch, @@ -105,6 +108,7 @@ const PostStatusForm = { 'disableNotice', 'disableLockWarning', 'disablePolls', + 'disableQuotes', 'disableSensitivityCheckbox', 'disableSubmit', 'disablePreview', @@ -136,6 +140,7 @@ const PostStatusForm = { MediaUpload, EmojiInput, PollForm, + QuoteForm, ScopeSelector, Checkbox, Select, @@ -145,6 +150,9 @@ const PostStatusForm = { DraftCloser, Popover, }, + created() { + this.initQuote() + }, mounted() { this.updateIdempotencyKey() this.resize(this.$refs.textarea) @@ -203,6 +211,8 @@ const PostStatusForm = { files: [], poll: {}, hasPoll: false, + hasQuote: false, + quote: {}, mediaDescriptions: {}, visibility: scope, contentType, @@ -220,6 +230,8 @@ const PostStatusForm = { files: this.statusFiles || [], poll: this.statusPoll || {}, hasPoll: false, + hasQuote: false, + quote: {}, mediaDescriptions: this.statusMediaDescriptions || {}, visibility: this.statusScope || scope, contentType: statusContentType, @@ -345,12 +357,28 @@ const PostStatusForm = { isEdit() { return typeof this.statusId !== 'undefined' && this.statusId.trim() !== '' }, - quotable() { + quotingAvailable() { if (!useInstanceCapabilitiesStore().quotingAvailable) { return false } - if (!this.replyTo) { + return this.disableQuotes !== true + }, + isReply() { + return this.newStatus.type === 'reply' + }, + quotable() { + return this.quotingAvailable && this.replyTo + }, + quoteThreadToggled() { + return this.newStatus.hasQuote && this.newStatus.quote.thread + }, + defaultQuotable() { + if ( + !this.quotingAvailable || + !this.isReply || + !this.$store.getters.mergedConfig.quoteReply + ) { return false } @@ -372,12 +400,25 @@ const PostStatusForm = { return false }, + inReplyStatusId() { + return !this.newStatus.hasQuote || + !this.newStatus.quote.thread || + !this.newStatus.quote.id + ? this.replyTo + : undefined + }, + quoteId() { + return this.newStatus.hasQuote ? this.newStatus.quote.id : undefined + }, debouncedMaybeAutoSaveDraft() { return debounce(this.maybeAutoSaveDraft, 3000) }, pollFormVisible() { return this.newStatus.hasPoll }, + quoteFormVisible() { + return this.newStatus.hasQuote && !this.newStatus.quote.thread + }, shouldAutoSaveDraft() { return this.$store.getters.mergedConfig.autoSaveDraft }, @@ -395,7 +436,8 @@ const PostStatusForm = { (this.newStatus.status || this.newStatus.spoilerText || this.newStatus.files?.length || - this.newStatus.hasPoll) && + this.newStatus.hasPoll || + this.newStatus.hasQuote) && this.saveable ) }, @@ -406,7 +448,8 @@ const PostStatusForm = { this.newStatus.status || this.newStatus.spoilerText || this.newStatus.files?.length || - this.newStatus.hasPoll + this.newStatus.hasPoll || + this.newStatus.hasQuote ) ) }, @@ -456,11 +499,13 @@ const PostStatusForm = { contentType: newStatus.contentType, poll: {}, hasPoll: false, + hasQuote: false, + quote: {}, mediaDescriptions: {}, - quoting: false, } this.$refs.mediaUpload && this.$refs.mediaUpload.clearFile() this.clearPollForm() + this.clearQuoteForm() if (this.preserveFocus) { this.$nextTick(() => { this.$refs.textarea.focus() @@ -500,9 +545,7 @@ const PostStatusForm = { return } - const poll = this.newStatus.hasPoll - ? pollFormToMasto(this.newStatus.poll) - : {} + const poll = newStatus.hasPoll ? pollFormToMasto(newStatus.poll) : {} if (this.pollContentError) { this.error = this.pollContentError return @@ -518,10 +561,6 @@ const PostStatusForm = { return } - const replyOrQuoteAttr = newStatus.quoting - ? 'quoteId' - : 'inReplyToStatusId' - const postingOptions = { status: newStatus.status, spoilerText: newStatus.spoilerText || null, @@ -529,7 +568,8 @@ const PostStatusForm = { sensitive: newStatus.nsfw, media: newStatus.files, store: this.$store, - [replyOrQuoteAttr]: this.replyTo, + inReplyToStatusId: this.inReplyStatusId, + quoteId: this.quoteId, contentType: newStatus.contentType, poll, idempotencyKey: this.idempotencyKey, @@ -558,9 +598,7 @@ const PostStatusForm = { } const newStatus = this.newStatus this.previewLoading = true - const replyOrQuoteAttr = newStatus.quoting - ? 'quoteId' - : 'inReplyToStatusId' + statusPoster .postStatus({ status: newStatus.status, @@ -569,7 +607,8 @@ const PostStatusForm = { sensitive: newStatus.nsfw, media: [], store: this.$store, - [replyOrQuoteAttr]: this.replyTo, + inReplyToStatusId: this.inReplyStatusId, + quoteId: this.quoteId, contentType: newStatus.contentType, poll: {}, preview: true, @@ -813,6 +852,32 @@ const PostStatusForm = { this.$refs.pollForm.clear() } }, + initQuote() { + const quote = this.newStatus.quote + + if (Object.keys(quote).length > 0) { + return + } + + const quotable = this.defaultQuotable + + quote.id = quotable ? this.replyTo : '' + quote.url = '' + quote.thread = quotable + }, + setQuoteThread(v) { + this.newStatus.hasQuote = v + this.newStatus.quote.thread = v + this.newStatus.quote.id = v ? this.replyTo : '' + }, + clearQuoteForm() { + if (this.$refs.quoteForm) { + this.$refs.quoteForm.clear() + } + }, + toggleQuoteForm() { + this.newStatus.hasQuote = !this.newStatus.hasQuote + }, dismissScopeNotice() { this.$store.dispatch('setOption', { name: 'hideScopeNotice', diff --git a/src/components/post_status_form/post_status_form.scss b/src/components/post_status_form/post_status_form.scss index 641dc6dac..976a23f0a 100644 --- a/src/components/post_status_form/post_status_form.scss +++ b/src/components/post_status_form/post_status_form.scss @@ -137,11 +137,17 @@ .poll-icon { order: 3; + justify-content: center; + } + + .quote-icon { + order: 4; justify-content: right; } .media-upload-icon, .poll-icon, + .quote-icon, .emoji-icon { font-size: 1.85em; line-height: 1.1; diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index f661a980d..0eedea360 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -111,24 +111,26 @@ {{ $t('post_status.reply_option') }} {{ $t('post_status.quote_option') }} @@ -266,6 +268,13 @@ :visible="pollFormVisible" :params="newStatus.poll" /> + + + + import('../status/status.vue')), + }, + name: 'Quote', + props: { + visible: { + type: Boolean, + }, + loading: { + type: Boolean, + }, + statusId: { + type: String, + }, + statusUrl: { + type: String, + }, + statusVisible: { + type: Boolean, + }, + initiallyExpanded: { + type: Boolean, + }, + }, + data() { + return { + displayQuote: this.initiallyExpanded, + fetchAttempted: false, + fetching: false, + error: null, + } + }, + created() { + this.maybeFetchStatus() + }, + watch: { + statusId() { + this.maybeFetchStatus() + }, + }, + computed: { + quotedStatus() { + return this.statusId + ? this.$store.state.statuses.allStatusesObject[this.statusId] + : undefined + }, + shouldDisplayQuote() { + return this.displayQuote && this.quotedStatus + }, + hasVisibleQuote() { + return ( + this.statusUrl && + this.statusVisible && + (this.showSpinner || this.quotedStatus) + ) + }, + hasInvisibleQuote() { + return this.statusUrl && !this.statusVisible + }, + showSpinner() { + return this.loading || this.fetching + }, + }, + methods: { + toggleDisplayQuote() { + this.displayQuote = !this.displayQuote + this.maybeFetchStatus() + }, + maybeFetchStatus() { + if (this.statusId && this.displayQuote && !this.quotedStatus) { + this.fetchStatus() + } + }, + fetchStatus() { + this.fetchAttempted = true + this.fetching = true + this.$emit('loading', true) + this.$store + .dispatch('fetchStatus', this.statusId) + .then(() => { + this.displayQuote = true + }) + .catch((error) => { + this.error = error + this.$emit('error', error) + }) + .finally(() => { + this.fetching = false + this.$emit('loading', false) + }) + }, + }, +} diff --git a/src/components/quote/quote.vue b/src/components/quote/quote.vue new file mode 100644 index 000000000..f518db7ab --- /dev/null +++ b/src/components/quote/quote.vue @@ -0,0 +1,82 @@ + + + + {{ shouldDisplayQuote ? $t('status.hide_quote') : $t('status.display_quote') }} + + + + + + + + + + + + + {{ statusUrl }} + + + {{ statusUrl }} + + + + + + + + + + diff --git a/src/components/quote/quote_form.js b/src/components/quote/quote_form.js new file mode 100644 index 000000000..401211724 --- /dev/null +++ b/src/components/quote/quote_form.js @@ -0,0 +1,118 @@ +import { debounce } from 'lodash' + +import Checkbox from '../checkbox/checkbox.vue' +import Quote from './quote.vue' + +import { useInstanceStore } from 'src/stores/instance.js' + +export default { + components: { + Quote, + Checkbox, + }, + name: 'QuoteForm', + props: { + visible: { + type: Boolean, + }, + reply: { + type: Boolean, + }, + params: { + type: Object, + required: true, + }, + }, + data() { + return { + text: this.params.url, + loading: false, + error: false, + debounceSetQuote: debounce((value) => { + this.fetchStatus(value) + }, 1000), + } + }, + created() { + if (this.params.url && !this.params.id) { + this.fetchStatus(this.params.url) + } else if (this.params.id) { + this.text = + window.location.protocol + + '//' + + this.instanceHost + + '/notice/' + + this.params.id + this.params.url = this.text + } + }, + computed: { + instanceHost() { + return new URL(useInstanceStore().server).host + }, + noticeRegex() { + return new RegExp( + `^([^/:]*:?//|)(${window.location.host}|${this.instanceHost})/notice/(.*)$`, + ) + }, + quoteVisible() { + return (!!this.params.id || this.loading) && !this.error + }, + }, + watch: { + text(value) { + this.debounceSetQuote(value) + }, + visible(value) { + if (value && this.params.url) { + this.fetchStatus(this.params.url) + } + }, + }, + methods: { + clear() { + this.text = this.params.url + this.loading = false + this.error = false + }, + setLoading(value) { + this.loading = value + }, + handleError(error) { + this.params.id = null + this.error = !!error + }, + fetchStatus(value) { + this.params.url = value + this.error = false + + const notice = this.noticeRegex.exec(value) + if (notice && notice.length === 4) { + this.params.id = notice[3] + } else if (value) { + this.loading = true + this.$store + .dispatch('search', { + q: value, + resolve: true, + offset: 0, + limit: 1, + type: 'statuses', + }) + .then((data) => { + if (data && data.statuses && data.statuses.length === 1) { + this.params.id = data.statuses[0].id + } else { + this.handleError(true) + } + }) + .catch(this.handleError) + .finally(() => { + this.loading = false + }) + } else { + this.params.id = null + } + }, + }, +} diff --git a/src/components/quote/quote_form.vue b/src/components/quote/quote_form.vue new file mode 100644 index 000000000..b0b277a2b --- /dev/null +++ b/src/components/quote/quote_form.vue @@ -0,0 +1,55 @@ + + + + + + + + + + + + diff --git a/src/components/status/status.js b/src/components/status/status.js index fbea34b4b..ddc49b851 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -12,6 +12,7 @@ import { import AvatarList from '../avatar_list/avatar_list.vue' import EmojiReactions from '../emoji_reactions/emoji_reactions.vue' import PostStatusForm from '../post_status_form/post_status_form.vue' +import Quote from '../quote/quote.vue' import StatusContent from '../status_content/status_content.vue' import StatusPopover from '../status_popover/status_popover.vue' import Timeago from '../timeago/timeago.vue' @@ -127,6 +128,7 @@ const Status = { MentionsLine, UserPopover, UserLink, + Quote, StatusActionButtons, }, props: [ @@ -172,7 +174,6 @@ const Status = { suspendable: true, error: null, headTailLinks: null, - displayQuote: !this.inQuote, } }, computed: { @@ -500,19 +501,17 @@ const Status = { editingAvailable() { return useInstanceCapabilitiesStore().editingAvailable }, - hasVisibleQuote() { - return this.status.quote_url && this.status.quote_visible - }, - hasInvisibleQuote() { - return this.status.quote_url && !this.status.quote_visible - }, - quotedStatus() { + quoteId() { return this.status.quote_id - ? this.$store.state.statuses.allStatusesObject[this.status.quote_id] - : undefined }, - shouldDisplayQuote() { - return this.quotedStatus && this.displayQuote + quoteUrl() { + return this.status.quote_url + }, + quoteVisible() { + return this.status.quote_visible + }, + quoteExpanded() { + return !this.inQuote }, scrobblePresent() { if (this.mergedConfig.hideScrobbles) return false @@ -632,17 +631,6 @@ const Status = { } } }, - toggleDisplayQuote() { - if (this.shouldDisplayQuote) { - this.displayQuote = false - } else if (!this.quotedStatus) { - this.$store.dispatch('fetchStatus', this.status.quote_id).then(() => { - this.displayQuote = true - }) - } else { - this.displayQuote = true - } - }, }, watch: { highlight: function (id) { diff --git a/src/components/status/status.scss b/src/components/status/status.scss index 897730a07..2a40f0dde 100644 --- a/src/components/status/status.scss +++ b/src/components/status/status.scss @@ -388,22 +388,4 @@ } } } - - .quoted-status { - margin-top: 0.5em; - border: 1px solid var(--border); - border-radius: var(--roundness); - - &.-unavailable-prompt { - padding: 0.5em; - } - } - - .display-quoted-status-button { - margin: 0.5em; - - &-icon { - color: inherit; - } - } } diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 8c78fddc1..1b65b453a 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -419,47 +419,12 @@ @parse-ready="setHeadTailLinks" /> - - - {{ shouldDisplayQuote ? $t('status.hide_quote') : $t('status.display_quote') }} - - - - - - - - - - {{ status.quote_url }} - - - - - + { if (data.ok) { return data } - throw new Error('Error fetching timeline', data) + throw new Error('Error fetching timeline', { cause: data }) }) .then((data) => data.json()) .then((data) => parseStatus(data)) @@ -706,7 +706,7 @@ const fetchStatusSource = ({ id, credentials }) => { if (data.ok) { return data } - throw new Error('Error fetching source', data) + throw new Error('Error fetching source', { cause: data }) }) .then((data) => data.json()) .then((data) => parseSource(data)) diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js index 62d7fa855..909a014ce 100644 --- a/src/services/entity_normalizer/entity_normalizer.service.js +++ b/src/services/entity_normalizer/entity_normalizer.service.js @@ -383,7 +383,7 @@ export const parseStatus = (data) => { } output.summary_raw_html = escapeHtml(data.spoiler_text) - output.external_url = data.url + output.external_url = data.uri || data.url output.poll = data.poll if (output.poll) { output.poll.options = (output.poll.options || []).map((field) => ({
+ + + + + {{ statusUrl }} + + + {{ statusUrl }} + + + + +
- - - - - {{ status.quote_url }} - - - - -