diff options
Diffstat (limited to 'app/assets/javascripts/static_site_editor/services')
3 files changed, 104 insertions, 5 deletions
diff --git a/app/assets/javascripts/static_site_editor/services/front_matterify.js b/app/assets/javascripts/static_site_editor/services/front_matterify.js index cbf0fffd515..60a5d799d11 100644 --- a/app/assets/javascripts/static_site_editor/services/front_matterify.js +++ b/app/assets/javascripts/static_site_editor/services/front_matterify.js @@ -16,6 +16,7 @@ export const frontMatterify = source => { const NO_FRONTMATTER = { source, matter: null, + hasMatter: false, spacing: null, content: source, delimiter: null, @@ -53,6 +54,7 @@ export const frontMatterify = source => { return { source, matter, + hasMatter: true, spacing, content, delimiter, diff --git a/app/assets/javascripts/static_site_editor/services/parse_source_file.js b/app/assets/javascripts/static_site_editor/services/parse_source_file.js index d4fc8b2edb6..39126eb7bcc 100644 --- a/app/assets/javascripts/static_site_editor/services/parse_source_file.js +++ b/app/assets/javascripts/static_site_editor/services/parse_source_file.js @@ -1,15 +1,18 @@ import { frontMatterify, stringify } from './front_matterify'; const parseSourceFile = raw => { - const remake = source => frontMatterify(source); - - let editable = remake(raw); + let editable; const syncContent = (newVal, isBody) => { if (isBody) { editable.content = newVal; } else { - editable = remake(newVal); + try { + editable = frontMatterify(newVal); + editable.isMatterValid = true; + } catch (e) { + editable.isMatterValid = false; + } } }; @@ -23,10 +26,15 @@ const parseSourceFile = raw => { const isModified = () => stringify(editable) !== raw; - const hasMatter = () => Boolean(editable.matter); + const hasMatter = () => editable.hasMatter; + + const isMatterValid = () => editable.isMatterValid; + + syncContent(raw); return { matter, + isMatterValid, syncMatter, content, syncContent, diff --git a/app/assets/javascripts/static_site_editor/services/renderers/render_image.js b/app/assets/javascripts/static_site_editor/services/renderers/render_image.js new file mode 100644 index 00000000000..b0d863bdb5a --- /dev/null +++ b/app/assets/javascripts/static_site_editor/services/renderers/render_image.js @@ -0,0 +1,89 @@ +import { isAbsolute, getBaseURL, joinPaths } from '~/lib/utils/url_utility'; + +const canRender = ({ type }) => type === 'image'; + +let metadata; + +const getCachedContent = basePath => metadata.imageRepository.get(basePath); + +const isRelativeToCurrentDirectory = basePath => !basePath.startsWith('/'); + +const extractSourceDirectory = url => { + const sourceDir = /^(.+)\/([^/]+)$/.exec(url); // Extracts the base path and fileName from an image path + return sourceDir || [null, null, url]; // If no source directory was extracted it means only a fileName was specified (e.g. url='file.png') +}; + +const parseCurrentDirectory = basePath => { + const baseUrl = decodeURIComponent(metadata.baseUrl); + const sourceDirectory = extractSourceDirectory(baseUrl)[1]; + const currentDirectory = sourceDirectory.split(`/-/sse/${metadata.branch}`)[1]; + + return joinPaths(currentDirectory, basePath); +}; + +// For more context around this logic, please see the following comment: +// https://gitlab.com/gitlab-org/gitlab/-/issues/241166#note_409413500 +const generateSourceDirectory = basePath => { + let sourceDir = ''; + let defaultSourceDir = ''; + + if (!basePath || isRelativeToCurrentDirectory(basePath)) { + return parseCurrentDirectory(basePath); + } + + if (!metadata.mounts.length) { + return basePath; + } + + metadata.mounts.forEach(({ source, target }) => { + const hasTarget = target !== ''; + + if (hasTarget && basePath.includes(target)) { + sourceDir = source; + } else if (!hasTarget) { + defaultSourceDir = joinPaths(source, basePath); + } + }); + + return sourceDir || defaultSourceDir; +}; + +const resolveFullPath = (originalSrc, cachedContent) => { + if (cachedContent) { + return `data:image;base64,${cachedContent}`; + } + + if (isAbsolute(originalSrc)) { + return originalSrc; + } + + const sourceDirectory = extractSourceDirectory(originalSrc); + const [, basePath, fileName] = sourceDirectory; + const sourceDir = generateSourceDirectory(basePath); + + return joinPaths(getBaseURL(), metadata.project, '/-/raw/', metadata.branch, sourceDir, fileName); +}; + +const render = ({ destination: originalSrc, firstChild }, { skipChildren }) => { + skipChildren(); + + const cachedContent = getCachedContent(originalSrc); + + return { + type: 'openTag', + tagName: 'img', + selfClose: true, + attributes: { + 'data-original-src': !isAbsolute(originalSrc) || cachedContent ? originalSrc : '', + src: resolveFullPath(originalSrc, cachedContent), + alt: firstChild.literal, + }, + }; +}; + +const build = (mounts = [], project, branch, baseUrl, imageRepository) => { + metadata = { mounts, project, branch, baseUrl, imageRepository }; + return { canRender, render }; +}; + +export default { build }; |