fix(markdown): support height/width attributes on img elements

This commit is contained in:
Steven 2026-03-02 22:45:36 +08:00
parent ec3ab350d9
commit 737acbba2f
3 changed files with 11 additions and 3 deletions

View File

@ -8,7 +8,7 @@ INSERT INTO user (id,username,role,nickname,description,password_hash) VALUES(2,
INSERT INTO memo (id,uid,creator_id,content,visibility,pinned,payload) VALUES(1,'welcome2memos001',1,replace('# Welcome to Memos!\n\nA privacy-first, lightweight note-taking service. Capture thoughts, build knowledge, stay organized.\n\n## Key Features\n\n- **Write anything**: Quick notes, long-form writing, technical docs\n- **Markdown**: Full CommonMark + GFM syntax\n- **Task Lists**: Track to-dos inline with `- [ ]` syntax\n- **Tags**: Use #hashtags to organize your memos\n- **Attachments**: Images, videos, documents — drag & drop\n- **Location**: Geotag memos to remember where ideas struck\n- **Reactions & Comments**: Engage with any memo\n- **Relations**: Connect and reference related memos\n\n---\n\nExplore the demo memos below to see what''s possible! #welcome #getting-started','\n',char(10)),'PUBLIC',1,'{"tags":["welcome","getting-started"],"property":{"hasLink":false}}');
-- 2. Sponsor Memo (Pinned)
INSERT INTO memo (id,uid,creator_id,content,visibility,pinned,payload) VALUES(2,'sponsor0000001',1,replace('**[Warp](https://go.warp.dev/memos)**: A modern terminal reimagined to work with AI, helping developers build faster and more efficiently.\n\n[![Warp](https://raw.githubusercontent.com/warpdotdev/brand-assets/main/Github/Sponsor/Warp-Github-LG-02.png)](https://go.warp.dev/memos)\n\n#sponsor','\n',char(10)),'PUBLIC',1,'{"tags":["sponsor"],"property":{"hasLink":true}}');
INSERT INTO memo (id,uid,creator_id,content,visibility,pinned,payload) VALUES(2,'sponsor0000001',1,replace('Memos is free and open source, made possible by the generous support of our sponsors. 🙏\n\n---\n\n**[Warp — The AI-powered terminal built for speed and collaboration](https://go.warp.dev/memos)**\n\nWarp is a modern terminal reimagined with AI built in — autocomplete commands, debug errors inline, and collaborate with your team without leaving the terminal.\n\n<a href="https://go.warp.dev/memos" target="_blank" rel="noopener"><img src="https://raw.githubusercontent.com/warpdotdev/brand-assets/refs/heads/main/Logos/Warp-Wordmark-Black.png" alt="Warp - The AI-powered terminal built for speed and collaboration" height="44" /></a>\n\n---\n\n**[TestMu AI — The world''s first full-stack Agentic AI Quality Engineering platform](https://www.testmuai.com/?utm_medium=sponsor&utm_source=memos)**\n\nTestMu AI brings autonomous AI agents to your QA pipeline — from test generation to execution and reporting, all without manual scripting.\n\n<a href="https://www.testmuai.com/?utm_medium=sponsor&utm_source=memos" target="_blank" rel="noopener"><img src="https://usememos.com/sponsors/testmu.svg" alt="TestMu AI" height="36" /></a>\n\n---\n\n**[SSD Nodes — Affordable VPS hosting for self-hosters](https://ssdnodes.com/?utm_source=memos&utm_medium=sponsor)**\n\nHigh-performance VPS servers at prices that make self-hosting a no-brainer. Perfect for running your own Memos instance.\n\n<a href="https://ssdnodes.com/?utm_source=memos&utm_medium=sponsor" target="_blank" rel="noopener"><img src="https://usememos.com/sponsors/ssd-nodes.svg" alt="SSD Nodes" height="72" /></a>\n\n---\n\nInterested in sponsoring? Visit [GitHub Sponsors](https://github.com/sponsors/usememos) to learn more.\n\n#sponsors','\n',char(10)),'PUBLIC',1,'{"tags":["sponsors"],"property":{"hasLink":true}}');
-- 3. AI Skills — boojack/skills workflow, references the example definition doc
INSERT INTO memo (id,uid,creator_id,content,visibility,payload) VALUES(3,'aiskillsrepo001',1,replace('Been diving into AI agent programming lately — trying to figure out how to make AI actually reliable for complex dev tasks.\n\nThe core problem I keep running into: AI starts writing code before it fully understands the problem, then goes off in the wrong direction. The fix is surprisingly simple — force it through a pipeline: define the issue first, then design, then plan, then execute. Each stage has a concrete artifact, so there''s no room to skip ahead.\n\n**[boojack/skills](https://github.com/boojack/skills)** packages exactly this into four slash commands — `/defining-issues`, `/writing-designs`, `/planning-tasks`, `/executing-tasks` — that work with Claude Code, Cursor, Gemini CLI, and more.\n\n```bash\nnpx skills add boojack/skills\n```\n\n> 📄 Linked below: an example issue definition generated with `/defining-issues`.\n\n#ai #programming','\n',char(10)),'PUBLIC','{"tags":["ai","programming"],"property":{"hasLink":true,"hasCode":true},"location":{"placeholder":"San Francisco, California, United States","latitude":37.7749,"longitude":-122.4194}}');

View File

@ -32,6 +32,7 @@ export const SANITIZE_SCHEMA = {
attributes: {
...defaultSchema.attributes,
div: [...(defaultSchema.attributes?.div || []), "className"],
img: [...(defaultSchema.attributes?.img || []), "height", "width"],
span: [...(defaultSchema.attributes?.span || []), "className", "style", ["aria*"], ["data*"]],
// iframe attributes for video embeds
iframe: ["src", "width", "height", "frameborder", "allowfullscreen", "allow", "title", "referrerpolicy", "loading"],

View File

@ -7,6 +7,13 @@ interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement>, ReactMar
* Image component for markdown images
* Responsive with rounded corners
*/
export const Image = ({ className, alt, node: _node, ...props }: ImageProps) => {
return <img className={cn("max-w-full h-auto rounded-lg my-2", className)} alt={alt} {...props} />;
export const Image = ({ className, alt, node: _node, height, width, style, ...props }: ImageProps) => {
return (
<img
className={cn("max-w-full my-2", !height && "h-auto", className)}
alt={alt}
style={{ height: height ? `${height}px` : undefined, width: width ? `${width}px` : undefined, ...style }}
{...props}
/>
);
};