diff --git a/app/assets/javascripts/discourse/app/components/composer-editor.js b/app/assets/javascripts/discourse/app/components/composer-editor.js
index b792f4c684f..c95a3e35469 100644
--- a/app/assets/javascripts/discourse/app/components/composer-editor.js
+++ b/app/assets/javascripts/discourse/app/components/composer-editor.js
@@ -742,12 +742,44 @@ export default Component.extend(
);
},
+ @bind
+ _handleImageGridButtonClick(event) {
+ if (!event.target.classList.contains("wrap-image-grid-button")) {
+ return;
+ }
+
+ const index = parseInt(
+ event.target.closest(".button-wrapper").dataset.imageIndex,
+ 10
+ );
+ const reply = this.get("composer.reply");
+ const matches = reply.match(IMAGE_MARKDOWN_REGEX);
+ const closingIndex =
+ index + parseInt(event.target.dataset.imageCount, 10) - 1;
+
+ const textArea = this.element.querySelector(".d-editor-input");
+ textArea.selectionStart = reply.indexOf(matches[index]);
+ textArea.selectionEnd =
+ reply.indexOf(matches[closingIndex]) + matches[closingIndex].length;
+
+ this.appEvents.trigger(
+ `${this.composerEventPrefix}:apply-surround`,
+ "[grid]",
+ "[/grid]",
+ "grid_surround",
+ { useBlockMode: true }
+ );
+ },
+
_registerImageAltTextButtonClick(preview) {
preview.addEventListener("click", this._handleAltTextEditButtonClick);
preview.addEventListener("click", this._handleAltTextOkButtonClick);
preview.addEventListener("click", this._handleAltTextCancelButtonClick);
preview.addEventListener("click", this._handleImageDeleteButtonClick);
preview.addEventListener("keypress", this._handleAltTextInputKeypress);
+ if (this.siteSettings.experimental_post_image_grid) {
+ preview.addEventListener("click", this._handleImageGridButtonClick);
+ }
},
@on("willDestroyElement")
@@ -773,6 +805,10 @@ export default Component.extend(
preview?.removeEventListener("click", this._handleImageScaleButtonClick);
preview?.removeEventListener("click", this._handleAltTextEditButtonClick);
preview?.removeEventListener("click", this._handleAltTextOkButtonClick);
+ preview?.removeEventListener("click", this._handleImageDeleteButtonClick);
+ if (this.siteSettings.experimental_post_image_grid) {
+ preview?.removeEventListener("click", this._handleImageGridButtonClick);
+ }
preview?.removeEventListener(
"click",
this._handleAltTextCancelButtonClick
diff --git a/app/assets/javascripts/discourse/app/components/d-editor.js b/app/assets/javascripts/discourse/app/components/d-editor.js
index 995c98a827f..09a82105a83 100644
--- a/app/assets/javascripts/discourse/app/components/d-editor.js
+++ b/app/assets/javascripts/discourse/app/components/d-editor.js
@@ -309,6 +309,7 @@ export default Component.extend(TextareaTextManipulation, {
this.appEvents.on("composer:insert-block", this, "insertBlock");
this.appEvents.on("composer:insert-text", this, "insertText");
this.appEvents.on("composer:replace-text", this, "replaceText");
+ this.appEvents.on("composer:apply-surround", this, "_applySurround");
this.appEvents.on(
"composer:indent-selected-text",
this,
@@ -349,6 +350,7 @@ export default Component.extend(TextareaTextManipulation, {
this.appEvents.off("composer:insert-block", this, "insertBlock");
this.appEvents.off("composer:insert-text", this, "insertText");
this.appEvents.off("composer:replace-text", this, "replaceText");
+ this.appEvents.off("composer:apply-surround", this, "_applySurround");
this.appEvents.off(
"composer:indent-selected-text",
this,
@@ -646,6 +648,11 @@ export default Component.extend(TextareaTextManipulation, {
}
},
+ _applySurround(head, tail, exampleKey, opts) {
+ const selected = this.getSelected();
+ this.applySurround(selected, head, tail, exampleKey, opts);
+ },
+
_toggleDirection() {
let currentDir = this._$textarea.attr("dir")
? this._$textarea.attr("dir")
diff --git a/app/assets/javascripts/discourse/app/initializers/post-decorations.js b/app/assets/javascripts/discourse/app/initializers/post-decorations.js
index 162eec7de61..13cdf632677 100644
--- a/app/assets/javascripts/discourse/app/initializers/post-decorations.js
+++ b/app/assets/javascripts/discourse/app/initializers/post-decorations.js
@@ -3,6 +3,7 @@ import discourseLater from "discourse-common/lib/later";
import I18n from "I18n";
import highlightSyntax from "discourse/lib/highlight-syntax";
import lightbox from "discourse/lib/lightbox";
+import Columns from "discourse/lib/columns";
import { iconHTML, iconNode } from "discourse-common/lib/icon-library";
import { setTextDirections } from "discourse/lib/text-direction";
import { nativeLazyLoading } from "discourse/lib/lazy-load-images";
@@ -33,6 +34,25 @@ export default {
{ id: "discourse-lightbox" }
);
+ if (siteSettings.experimental_post_image_grid) {
+ api.decorateCookedElement(
+ (elem) => {
+ const grids = elem.querySelectorAll(".d-image-grid");
+
+ if (!grids.length) {
+ return;
+ }
+
+ grids.forEach((grid) => {
+ return new Columns(grid, {
+ columns: site.mobileView ? 2 : 3,
+ });
+ });
+ },
+ { id: "discourse-image-grid" }
+ );
+ }
+
if (siteSettings.support_mixed_text_direction) {
api.decorateCookedElement(setTextDirections, {
id: "discourse-text-direction",
diff --git a/app/assets/javascripts/discourse/app/lib/columns.js b/app/assets/javascripts/discourse/app/lib/columns.js
new file mode 100644
index 00000000000..b88361894f5
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/lib/columns.js
@@ -0,0 +1,110 @@
+/**
+ * Turns an element containing multiple children into a grid of columns.
+ * Can be used to arrange images or media in a grid.
+ *
+ * Inspired/adapted from https://github.com/mladenilic/columns.js
+ *
+ * TODO: Add unit tests
+ */
+export default class Columns {
+ constructor(container, options = {}) {
+ this.container = container;
+
+ this.options = {
+ columns: 3,
+ columnClass: "d-image-grid-column",
+ minCount: 2,
+ ...options,
+ };
+
+ this.excluded = ["BR", "P"];
+
+ this.items = this._prepareItems();
+
+ if (this.items.length >= this.options.minCount) {
+ this.render();
+ } else {
+ container.dataset.disabled = true;
+ }
+ }
+
+ count() {
+ // a 2x2 grid looks better in most cases for 2 or 4 items
+ if (this.items.length === 4 || this.items.length === 2) {
+ return 2;
+ }
+ return this.options.columns;
+ }
+
+ render() {
+ if (this.container.dataset.columns) {
+ return;
+ }
+
+ this.container.dataset.columns = this.count();
+
+ const columns = this._distributeEvenly();
+
+ while (this.container.firstChild) {
+ this.container.removeChild(this.container.firstChild);
+ }
+ this.container.append(...columns);
+ return this;
+ }
+
+ _prepareColumns(count) {
+ const columns = [];
+ [...Array(count)].forEach(() => {
+ const column = document.createElement("div");
+ column.classList.add(this.options.columnClass);
+ columns.push(column);
+ });
+
+ return columns;
+ }
+
+ _prepareItems() {
+ let targets = [];
+
+ Array.from(this.container.children).forEach((child) => {
+ if (child.nodeName === "P" && child.children.length > 0) {
+ // sometimes children are wrapped in a paragraph
+ targets.push(...child.children);
+ } else {
+ targets.push(child);
+ }
+ });
+
+ return targets.filter((item) => {
+ return !this.excluded.includes(item.nodeName);
+ });
+ }
+
+ _distributeEvenly() {
+ const count = this.count();
+ const columns = this._prepareColumns(count);
+
+ const columnHeights = [];
+ for (let n = 0; n < count; n++) {
+ columnHeights[n] = 0;
+ }
+ this.items.forEach((item) => {
+ let shortest = 0;
+
+ for (let j = 1; j < count; ++j) {
+ if (columnHeights[j] < columnHeights[shortest]) {
+ shortest = j;
+ }
+ }
+
+ // use aspect ratio to compare heights and append to shortest column
+ // if element is not an image, assue ratio is 1:1
+ const img = item.querySelector("img") || item;
+ const aR = img.nodeName === "IMG" ? img.height / img.width : 1;
+ columnHeights[shortest] += aR;
+ columns[shortest].append(item);
+ });
+
+ return columns;
+ }
+}
diff --git a/app/assets/javascripts/discourse/tests/acceptance/composer-image-grid-test.js b/app/assets/javascripts/discourse/tests/acceptance/composer-image-grid-test.js
new file mode 100644
index 00000000000..db62b7ed704
--- /dev/null
+++ b/app/assets/javascripts/discourse/tests/acceptance/composer-image-grid-test.js
@@ -0,0 +1,148 @@
+import { click, fillIn, visit } from "@ember/test-helpers";
+import { acceptance, query } from "discourse/tests/helpers/qunit-helpers";
+import { test } from "qunit";
+
+acceptance("Composer - Image Grid", function (needs) {
+ needs.user();
+ needs.settings({
+ experimental_post_image_grid: true,
+ allow_uncategorized_topics: true,
+ });
+
+ needs.pretender((server, helper) => {
+ server.post("/uploads/lookup-urls", () => {
+ return helper.response([]);
+ });
+ });
+
+ test("Image Grid", async function (assert) {
+ await visit("/");
+
+ const uploads = [
+ "",
+ "",
+ "",
+ ];
+
+ await click("#create-topic");
+ await fillIn(".d-editor-input", uploads.join("\n"));
+
+ await click(
+ ".button-wrapper[data-image-index='0'] .wrap-image-grid-button"
+ );
+
+ assert.strictEqual(
+ query(".d-editor-input").value,
+ `[grid]\n${uploads.join("\n")}\n[/grid]`,
+ "Image grid toggles on"
+ );
+
+ await click(
+ ".button-wrapper[data-image-index='0'] .wrap-image-grid-button"
+ );
+
+ assert.strictEqual(
+ query(".d-editor-input").value,
+ uploads.join("\n"),
+ "Image grid toggles off"
+ );
+
+ const multipleImages = ` \nand a second group of images\n\n${uploads.join(
+ "\n"
+ )}`;
+ await fillIn(".d-editor-input", multipleImages);
+
+ await click(".image-wrapper:first-child .wrap-image-grid-button");
+
+ assert.strictEqual(
+ query(".d-editor-input").value,
+ `[grid] [/grid]
+and a second group of images
+
+
+
+`,
+ "First image grid toggles on"
+ );
+
+ await click(".image-wrapper:nth-of-type(1) .wrap-image-grid-button");
+
+ assert.strictEqual(
+ query(".d-editor-input").value,
+ multipleImages,
+ "First image grid toggles off"
+ );
+
+ // Second group of images is in paragraph 2
+ assert.ok(
+ query(
+ ".d-editor-preview p:nth-child(2) .wrap-image-grid-button[data-image-count='3']"
+ ),
+ "Grid button has correct image count"
+ );
+
+ await click(".d-editor-preview p:nth-child(2) .wrap-image-grid-button");
+
+ assert.strictEqual(
+ query(".d-editor-input").value,
+ ` 
+and a second group of images
+
+[grid]
+
+
+
+[/grid]`,
+ "Second image grid toggles on"
+ );
+ });
+
+ test("Image Grid Preview", async function (assert) {
+ await visit("/");
+
+ const uploads = [
+ "",
+ "",
+ ];
+
+ await click("#create-topic");
+ await fillIn(".d-editor-input", uploads.join("\n"));
+
+ assert.ok(
+ query(
+ ".image-wrapper:first-child .wrap-image-grid-button[data-image-count='2']"
+ ),
+ "Grid button has correct image count"
+ );
+
+ await click(
+ ".button-wrapper[data-image-index='0'] .wrap-image-grid-button"
+ );
+
+ assert.strictEqual(
+ document.querySelectorAll(".d-editor-preview .d-image-grid-column")
+ .length,
+ 2,
+ "Preview organizes images into two columns"
+ );
+
+ await fillIn(".d-editor-input", `[grid]\n${uploads[0]}\n[/grid]`);
+
+ assert.ok(
+ query(".d-editor-preview .d-image-grid[data-disabled]"),
+ "Grid is disabled when there is only one image"
+ );
+
+ await fillIn(
+ ".d-editor-input",
+ `[grid]${uploads[0]} ${uploads[1]} ${uploads[0]} ${uploads[1]}[/grid]`
+ );
+
+ assert.ok(
+ document.querySelectorAll(".d-editor-preview .d-image-grid-column")
+ .length,
+ 2,
+ "Special case of two columns for 4 images"
+ );
+ });
+});
diff --git a/app/assets/javascripts/discourse/tests/unit/lib/pretty-text-test.js b/app/assets/javascripts/discourse/tests/unit/lib/pretty-text-test.js
index 7f3cd646666..bb66218c681 100644
--- a/app/assets/javascripts/discourse/tests/unit/lib/pretty-text-test.js
+++ b/app/assets/javascripts/discourse/tests/unit/lib/pretty-text-test.js
@@ -1745,4 +1745,60 @@ var bar = 'bar';
"code block with html alias work"
);
});
+
+ test("image grid", function (assert) {
+ assert.cooked(
+ "[grid]\n\n[/grid]",
+ `[grid]
+
+[/grid]
`,
+ "image grid without site setting does not work"
+ );
+
+ assert.cookedOptions(
+ "[grid]\n\n[/grid]",
+ { siteSettings: { experimental_post_image_grid: true } },
+ `
+
+
+
+
