@curvenote/schema
Version:
Schema and markdown parser for @curvenote/editor
80 lines • 2.72 kB
JavaScript
import { DEFAULT_IMAGE_WIDTH } from '../defaults';
import { writeDirectiveOptions } from '../serialize/markdown/utils';
import { NodeGroups } from './types';
import { getImageWidth } from './utils';
const iframe = {
attrs: {
src: {},
align: { default: 'center' },
width: { default: DEFAULT_IMAGE_WIDTH },
},
group: NodeGroups.block,
draggable: true,
parseDOM: [
{
tag: 'iframe[src]',
getAttrs(dom) {
var _a;
return {
src: dom.getAttribute('src'),
align: (_a = dom.getAttribute('align')) !== null && _a !== void 0 ? _a : 'center',
width: getImageWidth(dom.getAttribute('width')),
};
},
},
],
toDOM(node) {
const { src, align, width } = node.attrs;
return [
'iframe',
{
src,
align,
width: `${width}%`,
},
];
},
attrsFromMyst: (node) => ({
src: node.src,
align: 'center',
width: getImageWidth(node.width),
}),
toMyst: (node) => ({
type: 'iframe',
src: node.src,
width: node.width,
}),
};
export const toMarkdown = (state, node) => {
var _a, _b;
const renderer = (_b = (_a = state.options.renderers) === null || _a === void 0 ? void 0 : _a.iframe) !== null && _b !== void 0 ? _b : 'html';
// TODO: I think that the caption is not rendered here?!
const { src, align, width } = node.attrs;
if (renderer === 'myst') {
state.ensureNewLine();
state.write(`\`\`\`{iframe} ${src}\n`);
const opts = {
label: state.nextCaptionId,
// TODO: Align should come from figure
align,
width: `${width}%`,
};
writeDirectiveOptions(state, opts);
// TODO: If there is a caption, put it here
state.write('```');
state.closeBlock(node);
return;
}
state.ensureNewLine();
state.write('```{raw} html\n');
state.write(`<figure id="${state.nextCaptionId}" align="${align}">\n`);
state.write(` <div style="position: relative; display: inline-block; padding-bottom: 39%; width: ${width}%;">\n`);
state.write(` <iframe width="100%" height="100%" src="${src}" allowfullscreen="" allow="autoplay" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; border: none;"></iframe>\n`);
state.write(` </div>\n`);
state.write(`</figure>\n`);
state.ensureNewLine();
state.write('```');
state.closeBlock(node);
};
export default iframe;
//# sourceMappingURL=iframe.js.map