discourse/app/assets/javascripts/pretty-text/engines/discourse-markdown/image-grid.js
Penar Musaraj 987ec602ec
FEATURE: image grid in posts (experimental) (#21513)
Adds a new `[grid]` tag that can arrange images (or other media) into a grid in posts. 

The grid defaults to a 3-column with a few exceptions:

- if there are only 2 or 4 items, it defaults to a 2-column grid (because it generally looks better)
- on mobile, it defaults to a 2-column grid
- if there is only one item, the grid has no effect
2023-06-07 14:15:57 -04:00

28 lines
584 B
JavaScript

const gridRule = {
tag: "grid",
before(state) {
let token = state.push("bbcode_open", "div", 1);
token.attrs = [["class", "d-image-grid"]];
},
after(state) {
state.push("bbcode_close", "div", -1);
},
};
export function setup(helper) {
helper.registerOptions((opts, siteSettings) => {
opts.enableGrid = !!siteSettings.experimental_post_image_grid;
});
helper.allowList(["div.d-image-grid"]);
helper.registerPlugin((md) => {
if (!md.options.discourse.enableGrid) {
return;
}
md.block.bbcode.ruler.push("grid", gridRule);
});
}