FlowyLabs/llink
1
0
Fork 0
Code Issues 71 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: text compose papercuts (#270)

Browse Source 
* make fixes

* cleanup
This commit was merged in pull request #270.
This commit is contained in:
Arjun Patel
2026-06-11 12:08:34 -07:00
committed by GitHub
parent 66d53497c5
commit ca3bbf204e
12 changed files with 220 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/desktop/src/features/compose/attachment-strip.tsx
+9 -7
View File
@@ -4,6 +4,7 @@ import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
import { Skeleton } from '@/components/ui/skeleton';
import { cn } from '@/lib/utils';
import type { LinkPreviewEntry } from '@/hooks/use-link-metadata';
import { domainFromUrl } from '@/lib/link-metadata';
import {
AttachmentLightbox,
getAttachmentHandler,
@@ -114,18 +115,19 @@ function LinkPreviewThumbnail({ entry }: { entry: LinkPreviewEntry }) {
);
}
if (!entry.metadata) return null;
// Metadata fetch can fail; fall back to the bare URL so the link stays usable.
const { metadata } = entry;
const domain = metadata?.domain ?? domainFromUrl(entry.url);
const title = metadata?.title ?? entry.url;
return (
<button
type="button"
onClick={() => platform.link.openExternal(metadata.url)}
onClick={() => platform.link.openExternal(metadata?.url ?? entry.url)}
className="flex h-16 w-28 shrink-0 flex-col justify-center gap-1 overflow-hidden rounded-lg bg-white/10 px-2 py-1.5 text-left transition-colors hover:bg-white/15"
>
<div className="flex items-center gap-1 text-[10px] text-white/40">
{metadata.favicon ? (
{metadata?.favicon ? (
<img
src={metadata.favicon}
alt=""
@@ -137,11 +139,11 @@ function LinkPreviewThumbnail({ entry }: { entry: LinkPreviewEntry }) {
) : (
<Globe className="size-3" />
)}
<span className="truncate">{metadata.domain}</span>
<span className="truncate">{domain}</span>
</div>
{metadata.title && (
{title && (
<p className="line-clamp-2 text-[11px] font-medium leading-tight text-white/80">
{metadata.title}
{title}
</p>
)}
</button>
js/desktop/src/features/compose/markdown-editor.css
+78 -2
View File
@@ -57,6 +57,80 @@
.llink-crepe .milkdown .ProseMirror {
padding: 0;
outline: none;
caret-color: white;
}
/* Crepe's default heading scale (42px h1) is sized for a document editor;
* tighten it to message-card proportions. Applies to compose and read-only
* alike so the editing view matches the posted card. */
.llink-crepe .milkdown .ProseMirror h1 {
font-size: 1.875rem;
line-height: 2.375rem;
font-weight: 600;
margin-top: 24px;
}
.llink-crepe .milkdown .ProseMirror h2 {
font-size: 1.5rem;
line-height: 2rem;
font-weight: 600;
margin-top: 20px;
}
.llink-crepe .milkdown .ProseMirror h3 {
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 600;
margin-top: 16px;
}
.llink-crepe .milkdown .ProseMirror h4 {
font-size: 1.125rem;
line-height: 1.625rem;
font-weight: 600;
margin-top: 12px;
}
.llink-crepe .milkdown .ProseMirror h5 {
font-size: 1rem;
line-height: 1.5rem;
font-weight: 600;
margin-top: 12px;
}
.llink-crepe .milkdown .ProseMirror h6 {
font-size: 0.875rem;
line-height: 1.375rem;
font-weight: 700;
margin-top: 12px;
color: rgb(255 255 255 / 0.7);
}
.llink-crepe .milkdown .ProseMirror > :first-child {
margin-top: 0;
}
/* Images come from URLs only (no stable public upload URL), so hide the
* file uploader — the placeholder then just prompts for a link. */
.llink-crepe
.milkdown
:is(.milkdown-image-block, .milkdown-image-inline)
.placeholder
.uploader {
display: none;
}
/* Read-only renders the image node view with inert editing chrome — hide it. */
.llink-crepe:not(.llink-crepe--fill) .milkdown .milkdown-image-block .operation,
.llink-crepe:not(.llink-crepe--fill)
.milkdown
.milkdown-image-block
.image-resize-handle {
display: none;
}
.llink-crepe .milkdown .milkdown-image-block img {
border-radius: 8px;
}
/* Editing context: fill the compose card and scroll internally so a long
@@ -71,8 +145,10 @@
}
/* Pad the content (not the card) so the slash menu — which Crepe appends to
* .milkdown — can use the full card width/height before clipping. */
* .milkdown — can use the full card width/height before clipping. The shared
* layout variables (globals.css) keep the editor's content column identical
* to the posted card's, and the gutter fits the block drag handle. */
.llink-crepe--fill .milkdown .ProseMirror {
min-height: 100%;
padding: 1.25rem;
padding: var(--message-card-padding) var(--message-editor-gutter);
}
js/desktop/src/features/compose/markdown-editor.tsx
+30 -3
View File
@@ -1,5 +1,7 @@
import { useEffect, useRef } from 'react';
import { Crepe } from '@milkdown/crepe';
import { editorViewCtx } from '@milkdown/kit/core';
import { Selection } from '@milkdown/kit/prose/state';
import '@milkdown/crepe/theme/common/style.css';
import '@milkdown/crepe/theme/frame-dark.css';
import './markdown-editor.css';
@@ -55,13 +57,23 @@ export function MarkdownEditor({
[Crepe.Feature.BlockEdit]: !readOnly,
[Crepe.Feature.Toolbar]: !readOnly,
[Crepe.Feature.Placeholder]: !readOnly,
[Crepe.Feature.ImageBlock]: false,
[Crepe.Feature.ImageBlock]: true,
[Crepe.Feature.Latex]: false,
[Crepe.Feature.TopBar]: false,
[Crepe.Feature.AI]: false,
},
featureConfigs: {
[Crepe.Feature.Placeholder]: { text: placeholder ?? '' },
// Images come from URLs only (e.g. pasted markdown) — there is no
// stable public upload URL, so the file uploader is hidden in CSS and
// onUpload rejects in case a file ever reaches it anyway (the default
// would serialize an ephemeral blob: URL into the message).
[Crepe.Feature.ImageBlock]: {
blockUploadPlaceholderText: 'Paste an image link…',
inlineUploadPlaceholderText: 'paste an image link',
maxHeight: 420,
onUpload: () => Promise.reject(new Error('Image uploads disabled')),
},
},
});
@@ -82,7 +94,18 @@ export function MarkdownEditor({
}
created = crepe;
if (autoFocus && !readOnly) {
root.querySelector<HTMLElement>('.ProseMirror')?.focus();
// Place the caret at the end of the document — the editor often mounts
// mid-typing (immersive → card flip), where start-of-doc would strand
// the user. Selection-only transactions don't echo markdownUpdated.
crepe.editor.action((ctx) => {
const view = ctx.get(editorViewCtx);
view.dispatch(
view.state.tr
.setSelection(Selection.atEnd(view.state.doc))
.scrollIntoView(),
);
view.focus();
});
}
});
@@ -97,7 +120,11 @@ export function MarkdownEditor({
return (
<div
ref={rootRef}
className={cn('llink-crepe', !readOnly && 'llink-crepe--fill', className)}
className={cn(
'llink-crepe',
!readOnly && 'llink-crepe--fill scrollbar-card',
className,
)}
/>
);
}
js/desktop/src/features/compose/text-editor.tsx
+17 -16
View File
@@ -1,6 +1,8 @@
import { useEffect, useRef, useCallback, useState } from 'react';
import { Paperclip } from 'lucide-react';
import { cn } from '@/lib/utils';
import { getImmersiveTextStyle } from '@/lib/immersive-text';
import { hasMarkdownFormatting } from '@/lib/markdown';
import { metaKey } from '@/lib/platform';
import { useAllLinkMetadata } from '@/hooks/use-link-metadata';
import { AttachmentStrip } from '@/features/compose/attachment-strip';
@@ -35,12 +37,6 @@ interface TextEditorProps {
const IMMERSIVE_CHAR_LIMIT = 120;
function getImmersiveTextStyle(length: number) {
if (length < 70) return { size: 'text-5xl', weight: 'font-semibold' };
if (length < 130) return { size: 'text-3xl', weight: 'font-semibold' };
return { size: 'text-2xl', weight: 'font-normal' };
}
export function TextEditor({
textContent,
onTextChange,
@@ -50,7 +46,9 @@ export function TextEditor({
attachmentProps,
}: TextEditorProps) {
const textareaRef = useRef<HTMLTextAreaElement>(null);
const [forceCardMode, setForceCardMode] = useState(false);
// Card mode latches: once the message needs the full editor, snapping back
// to immersive mid-edit would be jarring, so it stays for the session.
const [carded, setCarded] = useState(false);
const [debouncedText, setDebouncedText] = useState(textContent);
useEffect(() => {
@@ -61,13 +59,16 @@ export function TextEditor({
const attachmentCount = attachmentProps?.attachments.length ?? 0;
const hasEnrichments = attachmentCount > 0 || linkPreviews.length > 0;
const immersive =
textContent.length < IMMERSIVE_CHAR_LIMIT &&
!hasEnrichments &&
!forceCardMode;
const shouldCard =
!carded &&
(textContent.length >= IMMERSIVE_CHAR_LIMIT ||
hasEnrichments ||
hasMarkdownFormatting(textContent));
if (shouldCard) setCarded(true);
const immersive = !carded;
// Keep the immersive textarea focused with the caret at the end when we
// (re)enter it. The card-mode editor manages its own focus.
// Keep the immersive textarea focused with the caret at the end on mount.
// The card-mode editor manages its own focus.
useEffect(() => {
if (!immersive) return;
const t = setTimeout(() => {
@@ -95,7 +96,7 @@ export function TextEditor({
} else if (e.key === 'm' && (e.metaKey || e.ctrlKey)) {
e.preventDefault();
e.stopPropagation();
setForceCardMode(true);
setCarded(true);
}
},
[onCancel, onSubmit, textContent],
@@ -127,7 +128,7 @@ export function TextEditor({
{immersive && (
<KeyHint
keys={`${metaKey}+M`}
onClick={() => setForceCardMode(true)}
onClick={() => setCarded(true)}
title={`Switch to markdown editor (or press ${metaKey}+M)`}
>
markdown
@@ -194,7 +195,7 @@ export function TextEditor({
{...dropZoneProps}
onKeyDownCapture={handleKeyDown}
>
<div className="mx-8 flex h-[calc(100%-8rem)] w-full min-w-0 flex-col overflow-hidden rounded border border-white/10 bg-white/5 backdrop-blur-xl">
<div className="mx-8 flex h-[calc(100%-8rem)] w-full min-w-0 max-w-[calc(var(--message-content-width)_+_var(--message-editor-gutter)*2)] flex-col overflow-hidden rounded border border-white/10 bg-white/5 backdrop-blur-xl animate-in fade-in zoom-in-95 duration-200">
{/* No padding here: the editor's own scroll box hosts the slash menu,
so we pad inside the editor (ProseMirror) instead. That keeps the
menu's clipping bounds the full card rather than the inset box. */}