mirror of https://github.com/Squidex/squidex.git
Sebastian Stehle
2 years ago
committed by
GitHub
GitHub
38 changed files with 559 additions and 199 deletions
@ -0,0 +1,112 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { markdownExtractImage, markdownTransformImages } from './markdown-transform'; |
|||
|
|||
describe('MarkdownTransform', () => { |
|||
it('should not extract image if markdown contains no image', () => { |
|||
const md = '# Header'; |
|||
|
|||
const result = markdownExtractImage(md); |
|||
|
|||
expect(result).toBeNull(); |
|||
}); |
|||
|
|||
it('should not extract image if URL is not valid', () => { |
|||
const md = ''; |
|||
|
|||
const result = markdownExtractImage(md); |
|||
|
|||
expect(result).toBeNull(); |
|||
}); |
|||
|
|||
it('should extract image', () => { |
|||
const md = ''; |
|||
|
|||
const result = markdownExtractImage(md); |
|||
|
|||
expect(result).toEqual({ url: 'https://squidex.io/image.png', name: 'image.webp' }); |
|||
}); |
|||
|
|||
it('should extract image with name', () => { |
|||
const md = ''; |
|||
|
|||
const result = markdownExtractImage(md); |
|||
|
|||
expect(result).toEqual({ url: 'https://squidex.io/image.png', name: 'my-picture.webp' }); |
|||
}); |
|||
|
|||
it('should extract image with lax name', () => { |
|||
const md = ''; |
|||
|
|||
const result = markdownExtractImage(md); |
|||
|
|||
expect(result).toEqual({ url: 'https://squidex.io/image.png', name: 'picture.webp' }); |
|||
}); |
|||
|
|||
it('should extract image with alt', () => { |
|||
const md = ''; |
|||
|
|||
const result = markdownExtractImage(md); |
|||
|
|||
expect(result).toEqual({ url: 'https://squidex.io/image.png', name: 'alt-text.webp' }); |
|||
}); |
|||
|
|||
it('should transform image url', async () => { |
|||
const md = ''; |
|||
|
|||
const result = await markdownTransformImages(md, img => Promise.resolve(`${img.url}?transformed`)); |
|||
|
|||
expect(result).toEqual(''); |
|||
}); |
|||
|
|||
it('should transform with name', async () => { |
|||
const md = ''; |
|||
|
|||
const result = await markdownTransformImages(md, img => Promise.resolve(`${img.url}?transformed`)); |
|||
|
|||
expect(result).toEqual(''); |
|||
}); |
|||
|
|||
it('should transform with lax name', async () => { |
|||
const md = ''; |
|||
|
|||
const result = await markdownTransformImages(md, img => Promise.resolve(`${img.url}?transformed`)); |
|||
|
|||
expect(result).toEqual(''); |
|||
}); |
|||
|
|||
it('should transform with alt', async () => { |
|||
const md = ''; |
|||
|
|||
const result = await markdownTransformImages(md, img => Promise.resolve(`${img.url}?transformed`)); |
|||
|
|||
expect(result).toEqual(''); |
|||
}); |
|||
|
|||
it('should transform multiple images', async () => { |
|||
const md = ` |
|||
# Header 1 |
|||
|
|||
|
|||
|
|||
|
|||
## Header 2 |
|||
`;
|
|||
|
|||
const result = await markdownTransformImages(md, img => Promise.resolve(`${img.url}?transformed`)); |
|||
|
|||
expect(result).toEqual(` |
|||
# Header 1 |
|||
|
|||
|
|||
|
|||
|
|||
## Header 2 |
|||
`);
|
|||
}); |
|||
}); |
|||
@ -0,0 +1,93 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import slugify from 'slugify'; |
|||
import { MathHelper } from './math-helper'; |
|||
|
|||
const IMAGE_REGEX = /!\[(?<alt>[^\]]*)\]\((?<url>.*?)([\s]["\s]*(?<name>[^")]*)["\s]*)?\)/; |
|||
const IMAGES_REGEX = /!\[(?<alt>[^\]]*)\]\((?<url>.*?)([\s]["\s]*(?<name>[^")]*)["\s]*)?\)/g; |
|||
|
|||
export type MarkdownImage = { url: string; name: string }; |
|||
|
|||
export function markdownHasImage(markdown: string) { |
|||
return !!markdown && !!markdown.match(IMAGES_REGEX); |
|||
} |
|||
|
|||
export function markdownExtractImage(markdown: string): MarkdownImage | null { |
|||
if (!markdown) { |
|||
return null; |
|||
} |
|||
|
|||
const match = markdown.match(IMAGE_REGEX); |
|||
|
|||
if (!match?.groups) { |
|||
return null; |
|||
} |
|||
|
|||
const { url, alt, name } = match.groups as { url: string; alt?: string; name?: string }; |
|||
|
|||
if (!isURL(url)) { |
|||
return null; |
|||
} |
|||
|
|||
return toImage({ url, alt, name }); |
|||
} |
|||
|
|||
export async function markdownTransformImages(markdown: string, replace: (image: MarkdownImage) => Promise<string>) { |
|||
if (!markdown) { |
|||
return markdown; |
|||
} |
|||
|
|||
const jobs: { id: string; url: string; name?: string; alt?: string }[] = []; |
|||
|
|||
let transformed = markdown.replace(IMAGES_REGEX, (_, alt, url, _other, name) => { |
|||
const id = MathHelper.guid(); |
|||
|
|||
jobs.push({ id, url, name, alt }); |
|||
return id; |
|||
}); |
|||
|
|||
const promises = jobs.map(async job => { |
|||
const url = await replace(toImage(job)); |
|||
|
|||
return { job, url }; |
|||
}); |
|||
|
|||
const results = await Promise.all(promises); |
|||
|
|||
for (const result of results) { |
|||
const { job, url } = result; |
|||
const name = job.name ? ` "${job.name}"` : ''; |
|||
|
|||
transformed = transformed.replace(result.job.id, ``); |
|||
} |
|||
|
|||
return transformed; |
|||
} |
|||
|
|||
const IMAGE_EXTENSIONS = ['.avif', '.jpeg', '.jpg', '.png', '.webp']; |
|||
|
|||
function toImage(image: { url: string; name?: string; alt?: string }): MarkdownImage { |
|||
let name = image.name || image.alt || 'image'; |
|||
|
|||
name = slugify(name, { lower: true, trim: true }); |
|||
|
|||
if (!IMAGE_EXTENSIONS.find(ex => name.endsWith(ex))) { |
|||
name += '.webp'; |
|||
} |
|||
|
|||
return { url: image.url, name }; |
|||
} |
|||
|
|||
function isURL(input: string) { |
|||
try { |
|||
new URL(input); |
|||
return true; |
|||
} catch { |
|||
return false; |
|||
} |
|||
} |
|||
@ -0,0 +1,66 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { markdownRender } from './markdown'; |
|||
|
|||
describe('Markdown', () => { |
|||
it('should render text', () => { |
|||
const md = 'Text'; |
|||
|
|||
const result = markdownRender(md, false); |
|||
|
|||
expect(result).toEqual('<p>Text</p>\n'); |
|||
}); |
|||
|
|||
it('should render text inline', () => { |
|||
const md = 'Text'; |
|||
|
|||
const result = markdownRender(md, true); |
|||
|
|||
expect(result).toEqual('Text'); |
|||
}); |
|||
|
|||
it('should render escaped', () => { |
|||
const md = '<h1>Header</h1>'; |
|||
|
|||
const result = markdownRender(md, false); |
|||
|
|||
expect(result).toEqual('<p><h1>Header</h1></p>\n'); |
|||
}); |
|||
|
|||
it('should render non escaped', () => { |
|||
const md = '<h1>Header</h1>'; |
|||
|
|||
const result = markdownRender(md, false, true); |
|||
|
|||
expect(result).toEqual('<h1>Header</h1>'); |
|||
}); |
|||
|
|||
it('should render mailto link', () => { |
|||
const md = '[mail](mailto:hello@squidex.io)'; |
|||
|
|||
const result = markdownRender(md, true); |
|||
|
|||
expect(result).toEqual('<a href="mailto:hello@squidex.io">mail</a>'); |
|||
}); |
|||
|
|||
it('should render normal link', () => { |
|||
const md = '[squidex](https://squidex.io)'; |
|||
|
|||
const result = markdownRender(md, true); |
|||
|
|||
expect(result).toEqual('<a href="https://squidex.io" target="_blank", rel="noopener">squidex <i class="icon-external-link"></i></a>'); |
|||
}); |
|||
|
|||
it('should render image', () => { |
|||
const md = ''; |
|||
|
|||
const result = markdownRender(md, true); |
|||
|
|||
expect(result).toEqual('<img src="https://localhost:5001/ai-images/dall-e/ea68c867-6472-4d77-a526-7c9d9c4698fe" alt="{name}">'); |
|||
}); |
|||
}); |
|||
Loading…
Reference in new issue