6496588bbc
X bills a post containing a URL at a much higher rate than a plain post, and its algorithm demotes link posts. The X version of a post now rewrites every URL non-clickable (https://example.com/post becomes example(.)com/post): scheme and www. dropped, every dot of the host replaced with (.). Leaving a single dot intact would still leave a resolvable domain for X to detect, so all of them are broken. A scheme or www. proves a token is a URL on its own; a bare host only counts when its last label is a delegated TLD, which is the one thing telling acme.com apart from Node.js. That check runs against App\Support\LinkTlds, generated from the whole IANA root zone in every form a TLD can appear in a post -- ASCII, punycode and the Unicode it decodes to -- because whatever X links is what X bills, so a hand-picked subset would leave us paying for its gaps. If the regex engine bails out on pathological input the original content is returned instead of crashing the publisher. The transform lives in the Platform::X arm of ContentSanitizer, so it reaches publishing and the app/API/MCP previews from one place and cannot touch any other network. Off by default; opt in with X_DEFUSE_LINKS. The editor counts characters and renders its preview client-side and cannot ask the server on every keystroke, so the rewrite is mirrored in TypeScript. PHP stays the source of truth: a parity test fails if the two TLD sets drift, and a browser test drives the real editor so the mirror is covered rather than assumed. Without it the composer promised text the network never receives. Character limits now measure the text a reader will see: sanitized, then with markup resolved away. Measuring the raw draft blocked saving posts that publish fine and let through posts the network rejects, and counted the editor's HTML toward the limit. Measuring the sanitized form alone would have counted Telegram's escaped entities, rejecting messages Telegram accepts. Empty content is handled once inside the sanitizer instead of by a guard repeated at every call site.
107 lines
3.2 KiB
Vue
107 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
|
|
import { getPlatformLabel } from '@/composables/usePlatformLogo';
|
|
import { useXLinkDefuser } from '@/composables/useXLinkDefuser';
|
|
import type { MediaItem } from '@/types/media';
|
|
|
|
import BlueskyPreview from './BlueskyPreview.vue';
|
|
import DiscordPreview from './DiscordPreview.vue';
|
|
import FacebookPreview from './FacebookPreview.vue';
|
|
import InstagramPreview from './InstagramPreview.vue';
|
|
import LinkedInPreview from './LinkedInPreview.vue';
|
|
import MastodonPreview from './MastodonPreview.vue';
|
|
import PinterestPreview from './PinterestPreview.vue';
|
|
import TelegramPreview from './TelegramPreview.vue';
|
|
import ThreadsPreview from './ThreadsPreview.vue';
|
|
import TikTokPreview from './TikTokPreview.vue';
|
|
import XPreview from './XPreview.vue';
|
|
import YouTubePreview from './YouTubePreview.vue';
|
|
|
|
interface SocialAccount {
|
|
id: string;
|
|
platform: string;
|
|
display_name: string;
|
|
username: string;
|
|
display_label: string;
|
|
handle_label: string;
|
|
avatar_url: string | null;
|
|
}
|
|
|
|
interface Props {
|
|
platform: string;
|
|
socialAccount: SocialAccount | null | undefined;
|
|
content: string;
|
|
media: MediaItem[];
|
|
contentType?: string;
|
|
meta?: Record<string, any>;
|
|
/** Local scheduled datetime (datetime-local); falls back to now in previews. */
|
|
postedAt?: string | null;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const { contentFor } = useXLinkDefuser();
|
|
|
|
/**
|
|
* X publishes links defused (`acme(.)com`), so the preview has to show that or it
|
|
* promises text the network never receives. Every preview goes through here, which
|
|
* keeps the rewrite in one place on the client just as it is on the server.
|
|
*/
|
|
const previewContent = computed((): string => contentFor(props.content, props.platform));
|
|
|
|
const resolvedSocialAccount = computed((): SocialAccount => props.socialAccount ?? {
|
|
id: '',
|
|
platform: props.platform,
|
|
display_name: '',
|
|
username: '',
|
|
display_label: getPlatformLabel(props.platform),
|
|
handle_label: getPlatformLabel(props.platform),
|
|
avatar_url: null,
|
|
});
|
|
|
|
const previewComponent = computed(() => {
|
|
switch (props.platform) {
|
|
case 'linkedin':
|
|
case 'linkedin-page':
|
|
return LinkedInPreview;
|
|
case 'x':
|
|
return XPreview;
|
|
case 'facebook':
|
|
return FacebookPreview;
|
|
case 'instagram':
|
|
case 'instagram-facebook':
|
|
return InstagramPreview;
|
|
case 'threads':
|
|
return ThreadsPreview;
|
|
case 'tiktok':
|
|
return TikTokPreview;
|
|
case 'youtube':
|
|
return YouTubePreview;
|
|
case 'pinterest':
|
|
return PinterestPreview;
|
|
case 'bluesky':
|
|
return BlueskyPreview;
|
|
case 'mastodon':
|
|
return MastodonPreview;
|
|
case 'telegram':
|
|
return TelegramPreview;
|
|
case 'discord':
|
|
return DiscordPreview;
|
|
default:
|
|
return LinkedInPreview;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<component
|
|
:is="previewComponent"
|
|
:social-account="resolvedSocialAccount"
|
|
:content="previewContent"
|
|
:media="media"
|
|
:content-type="contentType"
|
|
:meta="meta"
|
|
:posted-at="postedAt"
|
|
/>
|
|
</template>
|