@curvenote/schema
Version:
Schema and markdown parser for @curvenote/editor
84 lines • 3.53 kB
JavaScript
import { DEFAULT_IMAGE_WIDTH } from '../defaults';
import { NodeGroups } from './types';
import { getImageWidth, readBooleanDomAttr, getNumberedDefaultAttrs, getNumberedAttrs, setNumberedAttrs, } from './utils';
const image = {
attrs: Object.assign(Object.assign({}, getNumberedDefaultAttrs()), { src: {}, alt: { default: null }, title: { default: null }, width: { default: DEFAULT_IMAGE_WIDTH }, align: { default: 'center' }, caption: { default: false } }),
group: NodeGroups.block,
draggable: true,
parseDOM: [
{
tag: 'img[src]',
getAttrs(dom) {
var _a;
return Object.assign(Object.assign({}, getNumberedAttrs(dom)), { src: dom.getAttribute('src'), title: dom.getAttribute('title'), alt: dom.getAttribute('alt'), align: (_a = dom.getAttribute('align')) !== null && _a !== void 0 ? _a : 'center', width: getImageWidth(dom.getAttribute('width')), caption: readBooleanDomAttr(dom, 'caption') });
},
},
],
toDOM(node) {
const { src, alt, title, width, align } = node.attrs;
return [
'img',
Object.assign(Object.assign({}, setNumberedAttrs(node.attrs)), { // Deprecated, use figure
src,
align, alt: alt || undefined, title: title || undefined, width: `${width}%` }),
];
},
attrsFromMyst: (token) => ({
id: null,
label: null,
numbered: false,
src: token.url || '',
alt: token.alt || '',
title: token.title || '',
width: getImageWidth(token.width),
align: token.align || 'center',
caption: false,
}),
toMyst: (props, opts) => {
var _a;
return ({
type: 'image',
url: ((_a = opts.localizeImageSrc) === null || _a === void 0 ? void 0 : _a.call(opts, props.src)) || props.src,
alt: props.alt || undefined,
title: props.title || undefined,
align: undefined,
width: `${getImageWidth(props.width)}%` || undefined,
});
},
};
export const toMarkdown = (state, node) => {
var _a, _b;
const src = ((_b = (_a = state.options).localizeImageSrc) === null || _b === void 0 ? void 0 : _b.call(_a, node.attrs.src)) || node.attrs.src;
const md = `}${node.attrs.title ? ` ${state.quote(node.attrs.title)}` : ''})`;
state.write(md);
state.closeBlock(node);
};
export const toTex = (state, node) => {
var _a, _b;
const { width: nodeWidth } = node.attrs;
const src = ((_b = (_a = state.options).localizeImageSrc) === null || _b === void 0 ? void 0 : _b.call(_a, node.attrs.src)) || node.attrs.src;
const width = Math.round(nodeWidth !== null && nodeWidth !== void 0 ? nodeWidth : DEFAULT_IMAGE_WIDTH);
// let align = 'center';
// switch (nodeAlign?.toLowerCase()) {
// case 'left':
// align = 'flushleft';
// break;
// case 'right':
// align = 'flushright';
// break;
// default:
// break;
// }
// if (!caption) {
// const template = `
// \\begin{${align}}
// \\includegraphics[width=${width / 100}\\linewidth]{${src}}
// \\end{${align}}\n`;
// state.write(template);
// return;
// }
state.write(`\\includegraphics[width=${width / 100}\\linewidth]{${src}}`);
state.closeBlock(node);
};
export default image;
//# sourceMappingURL=image.js.map