@cardstack/boxel-cli 0.9.0 → 0.10.0-unstable.0

package/bundled-test-harness/assets/rich-markdown-field-test-9yB6ykCe.js

@@ -0,0 +1,1647 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { r as initializeDeferredDecorator, t as decorateFieldV2 } from "./runtime--fcdnjmJ-BoCBNIsz.js";
+import { Ar as testRealmURL } from "./runtime-common-ClpqhbwG.js";
+import { E as baseRRI, b as PermissionsContextName } from "./constants-CqKWhRfY.js";
+import { wt as setComponentTemplate } from "./cache-DtDz7X5V-Wn8jRDfL.js";
+import { H as templateFactory } from "./index-DaCZcoCY-CgzbilMy.js";
+import "./component-BJO47HTh.js";
+import "./template-factory-ds9s0u8l.js";
+import { M as waitUntil, T as settled, d as click, h as render, l as triggerEvent, o as waitFor } from "./dist-BOAdzfkP.js";
+import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
+import { F as setupLocalIndexing, M as setupCardLogs, P as setupIntegrationTestRealm, lt as setupRenderingTest, nt as provide, t as setupMockMatrix } from "./mock-matrix-DPQ0j2MD.js";
+import { r as getService } from "./dist-CPfIHBla.js";
+import { A as field, a as CardDef, s as Component, w as contains } from "./card-api-Dzje0smT.js";
+import { t as string_default } from "./string-BHZZwNlZ.js";
+import { t as RichMarkdownField } from "./rich-markdown-C6rQUngb.js";
+import { t as codemirrorContext } from "./codemirror-context-B5lUuYoE.js";
+import { t as renderCard } from "./render-component-B15Z0e2v.js";
+//#region tests/integration/components/rich-markdown-field-test.gts
+var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+var loader;
+(0, import_qunit.module)("Integration | RichMarkdownField", function(hooks) {
+	setupRenderingTest(hooks);
+	let mockMatrixUtils = setupMockMatrix(hooks);
+	hooks.beforeEach(function() {
+		provide(PermissionsContextName, {
+			canWrite: true,
+			canRead: true
+		});
+		loader = getService("loader-service").loader;
+	});
+	setupLocalIndexing(hooks);
+	hooks.beforeEach(function() {
+		globalThis.__loadCodeMirror = async () => codemirrorContext;
+	});
+	hooks.afterEach(function() {
+		delete globalThis.__loadCodeMirror;
+	});
+	setupCardLogs(hooks, async () => await loader.import("@cardstack/base/card-api"));
+	(0, import_qunit.test)("renders markdown as HTML", async function(assert) {
+		class TestCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static atom = class Atom extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: { "test-card.gts": { TestCard } }
+		});
+		let card = new TestCard({ body: new RichMarkdownField({ content: "# Hello World\n\nSome **bold** text." }) });
+		let root = await renderCard(loader, card, "atom");
+		assert.dom(root.querySelector("h1")).hasText("Hello World");
+		assert.dom(root.querySelector("strong")).hasText("bold");
+	});
+	(0, import_qunit.test)("edit template renders CodeMirror editor for content", async function(assert) {
+		class TestCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static edit = class Edit extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: { "test-card.gts": { TestCard } }
+		});
+		let card = new TestCard({ body: new RichMarkdownField({ content: "Edit me" }) });
+		let root = await renderCard(loader, card, "edit");
+		let editor = root.querySelector("[data-test-codemirror-editor]");
+		let loading = root.querySelector("[data-test-codemirror-loading]");
+		let hasEditorOrLoading = editor !== null || loading !== null;
+		assert.true(hasEditorOrLoading, "CodeMirror editor or loading state is rendered");
+	});
+	(0, import_qunit.test)("docked toolbar and editor mount share an overflow-clipping wrapper so the sticky toolbar corners conform to the rounded editor outline", async function(assert) {
+		class TestCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static edit = class Edit extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: { "test-card.gts": { TestCard } }
+		});
+		let card = new TestCard({ body: new RichMarkdownField({ content: "Edit me" }) });
+		let root = await renderCard(loader, card, "edit");
+		await waitFor("[data-test-codemirror-body]", { timeout: 5e3 });
+		let wrapper = root.querySelector("[data-test-codemirror-body]");
+		assert.dom(wrapper).exists("the clipping wrapper is rendered");
+		let overflow = getComputedStyle(wrapper);
+		assert.strictEqual(overflow.overflowX, "clip", "the wrapper clips overflow-x");
+		assert.strictEqual(overflow.overflowY, "clip", "the wrapper clips overflow-y");
+		assert.notStrictEqual(getComputedStyle(wrapper).borderRadius, "0px", "the wrapper is rounded, so the clip has corners to round off");
+		assert.dom("[data-test-markdown-toolbar]", wrapper).exists("the toolbar is inside the clipping wrapper");
+		assert.dom("[data-test-codemirror-mount]", wrapper).exists("the editor mount is inside the clipping wrapper");
+		assert.dom(wrapper.parentElement).hasClass("codemirror-editor", "the wrapper is a direct child of the editor container");
+	});
+	(0, import_qunit.test)("the Add-embed dropdown escapes the corner-clipping wrapper so it stays visible when the toolbar docks at the bottom", async function(assert) {
+		class TestCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static edit = class Edit extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: { "test-card.gts": { TestCard } }
+		});
+		let card = new TestCard({ body: new RichMarkdownField({ content: "Edit me" }) });
+		let root = await renderCard(loader, card, "edit");
+		await waitFor("[data-test-codemirror-body]", { timeout: 5e3 });
+		await click("[data-test-toolbar=\"add-embed\"]");
+		let popover = document.querySelector("[data-test-toolbar-embed-popover]");
+		let clipBox = root.querySelector("[data-test-codemirror-body]");
+		assert.ok(popover, "the Add-embed dropdown opens");
+		assert.dom("[data-test-codemirror-body]").exists("the corner-clip box is present");
+		assert.notOk(clipBox?.contains(popover), "the Add-embed menu renders outside the corner-clip box, so the clip cannot swallow it");
+	});
+	(0, import_qunit.test)("renders with null content without error", async function(assert) {
+		class TestCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static edit = class Edit extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: { "test-card.gts": { TestCard } }
+		});
+		let card = new TestCard();
+		let root = await renderCard(loader, card, "edit");
+		assert.dom(root).exists("renders without error");
+	});
+	(0, import_qunit.test)("renders inline :card references as BFM elements", async function(assert) {
+		class TestCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static atom = class Atom extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: { "test-card.gts": { TestCard } }
+		});
+		let card = new TestCard({ body: new RichMarkdownField({ content: "See :card[https://example.com/cards/1] for details." }) });
+		let root = await renderCard(loader, card, "atom");
+		assert.dom(root.querySelector("[data-boxel-bfm-inline-ref]")).exists("inline card reference is rendered as BFM element");
+		assert.dom(root.querySelector("[data-boxel-bfm-inline-ref]")).hasAttribute("data-boxel-bfm-inline-ref", "https://example.com/cards/1");
+	});
+	(0, import_qunit.test)("renders block ::card references as BFM elements", async function(assert) {
+		class TestCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static atom = class Atom extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: { "test-card.gts": { TestCard } }
+		});
+		let card = new TestCard({ body: new RichMarkdownField({ content: "::card[https://example.com/cards/2]\n" }) });
+		let root = await renderCard(loader, card, "atom");
+		assert.dom(root.querySelector("[data-boxel-bfm-block-ref]")).exists("block card reference is rendered as BFM element");
+		assert.dom(root.querySelector("[data-boxel-bfm-block-ref]")).hasAttribute("data-boxel-bfm-block-ref", "https://example.com/cards/2");
+	});
+	(0, import_qunit.test)("cardReferenceUrls computes resolved URLs from markdown content", async function(assert) {
+		class TestCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static embedded = class Embedded extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: { "test-card.gts": { TestCard } }
+		});
+		let card = new TestCard({ body: new RichMarkdownField({ content: "See :card[https://example.com/cards/1] for details.\n\n::card[https://example.com/cards/2]\n" }) });
+		await renderCard(loader, card, "embedded");
+		assert.deepEqual(card.body.cardReferenceUrls, ["https://example.com/cards/1", "https://example.com/cards/2"], "cardReferenceUrls contains both inline and block reference URLs");
+	});
+	(0, import_qunit.test)("cardReferenceUrls returns empty array for content without references", async function(assert) {
+		class TestCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static embedded = class Embedded extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: { "test-card.gts": { TestCard } }
+		});
+		let card = new TestCard({ body: new RichMarkdownField({ content: "# Just plain markdown\n\nNo card references here." }) });
+		await renderCard(loader, card, "embedded");
+		assert.deepEqual(card.body.cardReferenceUrls, [], "cardReferenceUrls is empty");
+	});
+	(0, import_qunit.test)("linkedCards query resolves referenced cards from the realm", async function(assert) {
+		class TestCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static embedded = class Embedded extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		let sampleCards = { "referenced-card.json": { data: {
+			type: "card",
+			attributes: { cardTitle: "Referenced Card" },
+			meta: { adoptsFrom: {
+				module: baseRRI("card-api"),
+				name: "CardDef"
+			} }
+		} } };
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: {
+				"test-card.gts": { TestCard },
+				...sampleCards
+			}
+		});
+		let card = new TestCard({ body: new RichMarkdownField({ content: `:card[${testRealmURL}referenced-card]` }) });
+		let root = await renderCard(loader, card, "embedded");
+		assert.dom(root.querySelector("[data-boxel-bfm-inline-ref]")).exists("card reference placeholder is rendered");
+	});
+	(0, import_qunit.test)("display path renders a relative card-ref pill in a prefix-mapped realm", async function(assert) {
+		class Pet extends CardDef {
+			static displayName = "Pet";
+			static {
+				decorateFieldV2(this.prototype, "name", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#name = (initializeDeferredDecorator(this, "name"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "cardTitle", [field], function() {
+					return contains(string_default, { computeVia: function() {
+						return this.name;
+					} });
+				});
+			}
+			#cardTitle = (initializeDeferredDecorator(this, "cardTitle"), void 0);
+			static atom = class Atom extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "hIHHAuC1",
+						"block": "[[[10,1],[14,\"data-test-pet-atom\",\"\"],[12],[1,[30,1,[\"name\"]]],[13]],[\"@model\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		class ArticleCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static isolated = class Isolated extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: {
+				"pet.gts": { Pet },
+				"article.gts": { ArticleCard },
+				"Pet/mango.json": { data: {
+					attributes: {
+						name: "Mango",
+						cardTitle: "Mango"
+					},
+					meta: { adoptsFrom: {
+						module: "../pet",
+						name: "Pet"
+					} }
+				} },
+				"article-1.json": { data: {
+					attributes: { body: { content: `Inline: :card[./Pet/mango]` } },
+					meta: { adoptsFrom: {
+						module: "./article",
+						name: "ArticleCard"
+					} }
+				} }
+			}
+		});
+		let virtualNetwork = getService("network").virtualNetwork;
+		virtualNetwork.addRealmMapping("@test/cards/", testRealmURL);
+		try {
+			let article = await getService("store").get(`${testRealmURL}article-1`);
+			let refs = article.body?.cardReferenceUrls;
+			assert.deepEqual(refs, ["@test/cards/Pet/mango"], "the relative ref resolves against the prefix-form base into RRI space");
+			await renderCard(loader, article, "isolated");
+			await waitFor("[data-test-pet-atom]");
+			assert.dom("[data-test-pet-atom]").hasText("Mango", "the referenced card renders as a pill");
+		} finally {
+			virtualNetwork.removeRealmMapping("@test/cards/");
+		}
+	});
+	(0, import_qunit.test)("renders footnotes", async function(assert) {
+		class TestCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static atom = class Atom extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: { "test-card.gts": { TestCard } }
+		});
+		let card = new TestCard({ body: new RichMarkdownField({ content: "Text with a footnote[^1].\n\n[^1]: This is the footnote content." }) });
+		let root = await renderCard(loader, card, "atom");
+		assert.dom(root.querySelector(".footnotes")).exists("footnote section is rendered");
+		assert.ok(root.textContent.includes("This is the footnote content"), "footnote content is present");
+	});
+	(0, import_qunit.test)("linkedCards render inside the markdown when card is loaded from realm", async function(assert) {
+		class Pet extends CardDef {
+			static displayName = "Pet";
+			static {
+				decorateFieldV2(this.prototype, "name", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#name = (initializeDeferredDecorator(this, "name"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "cardTitle", [field], function() {
+					return contains(string_default, { computeVia: function() {
+						return this.name;
+					} });
+				});
+			}
+			#cardTitle = (initializeDeferredDecorator(this, "cardTitle"), void 0);
+			static embedded = class Embedded extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "fc+zviHm",
+						"block": "[[[10,0],[14,\"data-test-pet-embedded\",\"\"],[12],[8,[30,1,[\"name\"]],null,null,null],[13]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+			static atom = class Atom extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "hIHHAuC1",
+						"block": "[[[10,1],[14,\"data-test-pet-atom\",\"\"],[12],[1,[30,1,[\"name\"]]],[13]],[\"@model\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		class ArticleCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static isolated = class Isolated extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: {
+				"pet.gts": { Pet },
+				"article.gts": { ArticleCard },
+				"Pet/mango.json": { data: {
+					attributes: {
+						name: "Mango",
+						cardTitle: "Mango"
+					},
+					meta: { adoptsFrom: {
+						module: "../pet",
+						name: "Pet"
+					} }
+				} },
+				"article-1.json": { data: {
+					attributes: { body: { content: `Inline ref: :card[${testRealmURL}Pet/mango]\n\nBlock ref:\n\n::card[${testRealmURL}Pet/mango]\n` } },
+					meta: { adoptsFrom: {
+						module: "./article",
+						name: "ArticleCard"
+					} }
+				} }
+			}
+		});
+		let store = getService("store");
+		let article = await store.get(`${testRealmURL}article-1`);
+		await store.loaded();
+		await renderCard(loader, article, "isolated");
+		await waitFor("[data-test-pet-atom]", { timeout: 1e4 });
+		assert.dom("[data-test-pet-atom]").exists("inline card reference renders the referenced card in atom format");
+		assert.dom("[data-test-pet-atom]").hasText("Mango", "inline atom shows the correct card");
+		assert.dom("[data-test-pet-embedded]").exists("block card reference renders the referenced card in embedded format");
+		assert.dom("[data-test-pet-embedded]").hasText("Mango", "block embedded shows the correct card");
+		assert.dom("[data-test-markdown-bfm-unresolved-inline]").doesNotExist("no unresolved Pill remains after card resolves (inline)");
+		assert.dom("[data-test-markdown-bfm-unresolved-block]").doesNotExist("no unresolved Pill remains after card resolves (block)");
+	});
+	(0, import_qunit.test)("every card format renders in both inline and block placement (saved MarkdownTemplate path)", async function(assert) {
+		class Pet extends CardDef {
+			static displayName = "Pet";
+			static {
+				decorateFieldV2(this.prototype, "name", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#name = (initializeDeferredDecorator(this, "name"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "cardTitle", [field], function() {
+					return contains(string_default, { computeVia: function() {
+						return this.name;
+					} });
+				});
+			}
+			#cardTitle = (initializeDeferredDecorator(this, "cardTitle"), void 0);
+			static atom = class Atom extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "hIHHAuC1",
+						"block": "[[[10,1],[14,\"data-test-pet-atom\",\"\"],[12],[1,[30,1,[\"name\"]]],[13]],[\"@model\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+			static embedded = class Embedded extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "urFu3pRa",
+						"block": "[[[10,0],[14,\"data-test-pet-embedded\",\"\"],[12],[1,[30,1,[\"name\"]]],[13]],[\"@model\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+			static fitted = class Fitted extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "+uAZxnry",
+						"block": "[[[10,0],[14,\"data-test-pet-fitted\",\"\"],[12],[1,[30,1,[\"name\"]]],[13]],[\"@model\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+			static isolated = class Isolated extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "48HERO9Z",
+						"block": "[[[10,0],[14,\"data-test-pet-isolated\",\"\"],[12],[1,[30,1,[\"name\"]]],[13]],[\"@model\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		class ArticleCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static isolated = class Isolated extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		let url = `${testRealmURL}Pet/mango`;
+		let content = [
+			`:card[${url} | atom]`,
+			`:card[${url} | embedded]`,
+			`:card[${url} | fitted w:200 h:150]`,
+			`:card[${url} | isolated]`,
+			`::card[${url} | atom]`,
+			`::card[${url} | embedded]`,
+			`::card[${url} | fitted w:200 h:150]`,
+			`::card[${url} | isolated]`
+		].join("\n\n");
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: {
+				"pet.gts": { Pet },
+				"article.gts": { ArticleCard },
+				"Pet/mango.json": { data: {
+					attributes: {
+						name: "Mango",
+						cardTitle: "Mango"
+					},
+					meta: { adoptsFrom: {
+						module: "../pet",
+						name: "Pet"
+					} }
+				} },
+				"article-1.json": { data: {
+					attributes: { body: { content } },
+					meta: { adoptsFrom: {
+						module: "./article",
+						name: "ArticleCard"
+					} }
+				} }
+			}
+		});
+		let store = getService("store");
+		let article = await store.get(`${testRealmURL}article-1`);
+		await store.loaded();
+		await renderCard(loader, article, "isolated");
+		await waitFor("[data-test-pet-isolated]", { timeout: 1e4 });
+		let inline = "[data-test-markdown-bfm-inline-card]";
+		let block = "[data-test-markdown-bfm-block-card]";
+		for (let [placement, wrapper] of [["inline", inline], ["block", block]]) for (let format of [
+			"atom",
+			"embedded",
+			"fitted",
+			"isolated"
+		]) assert.dom(`${wrapper} [data-test-pet-${format}]`).exists(`${format} card renders in ${placement} placement`);
+		assert.dom(`${inline}:has([data-test-pet-isolated])`).hasAttribute("style", /width: 24rem/, "inline isolated slot carries the shared footprint");
+		assert.dom(`${block}:has([data-test-pet-isolated])`).hasAttribute("style", /min-height: 18\.75rem/, "block isolated slot carries a growable min-height");
+		assert.dom(`${inline}:has([data-test-pet-embedded])`).hasAttribute("style", /width: 16rem/, "inline embedded slot carries the shared footprint");
+		assert.dom("[data-test-markdown-bfm-unresolved-inline]").doesNotExist("no unresolved inline placeholders remain");
+		assert.dom("[data-test-markdown-bfm-unresolved-block]").doesNotExist("no unresolved block placeholders remain");
+	});
+	(0, import_qunit.test)("compose preview resolves a relative card ref against a prefix-form base", async function(assert) {
+		class Pet extends CardDef {
+			static displayName = "Pet";
+			static {
+				decorateFieldV2(this.prototype, "name", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#name = (initializeDeferredDecorator(this, "name"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "cardTitle", [field], function() {
+					return contains(string_default, { computeVia: function() {
+						return this.name;
+					} });
+				});
+			}
+			#cardTitle = (initializeDeferredDecorator(this, "cardTitle"), void 0);
+			static atom = class Atom extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "hIHHAuC1",
+						"block": "[[[10,1],[14,\"data-test-pet-atom\",\"\"],[12],[1,[30,1,[\"name\"]]],[13]],[\"@model\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: {
+				"pet.gts": { Pet },
+				"Pet/mango.json": { data: {
+					attributes: {
+						name: "Mango",
+						cardTitle: "Mango"
+					},
+					meta: { adoptsFrom: {
+						module: "../pet",
+						name: "Pet"
+					} }
+				} }
+			}
+		});
+		let virtualNetwork = getService("network").virtualNetwork;
+		virtualNetwork.addRealmMapping("@test/cards/", testRealmURL);
+		try {
+			let store = getService("store");
+			let pet = await store.get("@test/cards/Pet/mango");
+			await store.loaded();
+			assert.strictEqual(pet.id, "@test/cards/Pet/mango", "precondition: the referenced card loads with a canonical RRI id");
+			let CodeMirrorEditor = (await loader.import("@cardstack/base/codemirror-editor")).default;
+			let harness = {
+				content: "Inline: :card[./Pet/mango]",
+				linkedCards: [pet],
+				onUpdate: () => {}
+			};
+			await render(templateFactory({
+				"id": "Egax1IH5",
+				"block": "[[[8,[32,0],null,[[\"@content\",\"@onUpdate\",\"@linkedCards\",\"@cardReferenceBaseUrl\",\"@livePreview\"],[[32,1,[\"content\"]],[32,1,[\"onUpdate\"]],[32,1,[\"linkedCards\"]],\"@test/cards/article-1\",true]],null]],[],[]]",
+				"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+				"scope": () => [CodeMirrorEditor, harness],
+				"isStrictMode": true
+			}));
+			await waitFor("[data-test-pet-atom]", { timeout: 1e4 });
+			assert.dom("[data-test-pet-atom]").hasText("Mango", "relative ref resolves and renders in the preview");
+		} finally {
+			virtualNetwork.removeRealmMapping("@test/cards/");
+		}
+	});
+	(0, import_qunit.test)("edit-mode compose preview renders a block fitted embed at the specified size", async function(assert) {
+		class Pet extends CardDef {
+			static displayName = "Pet";
+			static {
+				decorateFieldV2(this.prototype, "name", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#name = (initializeDeferredDecorator(this, "name"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "cardTitle", [field], function() {
+					return contains(string_default, { computeVia: function() {
+						return this.name;
+					} });
+				});
+			}
+			#cardTitle = (initializeDeferredDecorator(this, "cardTitle"), void 0);
+			static fitted = class Fitted extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "+uAZxnry",
+						"block": "[[[10,0],[14,\"data-test-pet-fitted\",\"\"],[12],[1,[30,1,[\"name\"]]],[13]],[\"@model\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		class ArticleCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: {
+				"pet.gts": { Pet },
+				"article.gts": { ArticleCard },
+				"Pet/mango.json": { data: {
+					attributes: {
+						name: "Mango",
+						cardTitle: "Mango"
+					},
+					meta: { adoptsFrom: {
+						module: "../pet",
+						name: "Pet"
+					} }
+				} },
+				"article-1.json": { data: {
+					attributes: { body: { content: `::card[${testRealmURL}Pet/mango | fitted w:400 h:300]\n` } },
+					meta: { adoptsFrom: {
+						module: "./article",
+						name: "ArticleCard"
+					} }
+				} }
+			}
+		});
+		let store = getService("store");
+		let article = await store.get(`${testRealmURL}article-1`);
+		await store.loaded();
+		await renderCard(loader, article, "edit");
+		await waitFor("[data-test-pet-fitted]", { timeout: 1e4 });
+		assert.dom("[data-test-pet-fitted]").exists("block fitted embed renders the referenced card, not a fallback");
+		assert.dom(".codemirror-card-fallback").doesNotExist("no URL fallback remains once the card resolves");
+		let slot = document.querySelector("[data-test-pet-fitted]").closest(".codemirror-card-slot--block");
+		assert.ok(slot, "the card renders inside a block slot");
+		assert.strictEqual(slot?.style.width, "400px", "block fitted slot carries the requested width");
+		assert.strictEqual(slot?.style.height, "300px", "block fitted slot carries the requested height");
+		assert.strictEqual(slot?.style.overflow, "hidden", "block fitted slot clips overflow");
+	});
+	(0, import_qunit.test)("edit-mode compose preview renders a prefix-form (@-RRI) ref with a named fitted variant", async function(assert) {
+		class Pet extends CardDef {
+			static displayName = "Pet";
+			static {
+				decorateFieldV2(this.prototype, "name", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#name = (initializeDeferredDecorator(this, "name"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "cardTitle", [field], function() {
+					return contains(string_default, { computeVia: function() {
+						return this.name;
+					} });
+				});
+			}
+			#cardTitle = (initializeDeferredDecorator(this, "cardTitle"), void 0);
+			static fitted = class Fitted extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "+uAZxnry",
+						"block": "[[[10,0],[14,\"data-test-pet-fitted\",\"\"],[12],[1,[30,1,[\"name\"]]],[13]],[\"@model\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		class ArticleCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: {
+				"pet.gts": { Pet },
+				"article.gts": { ArticleCard },
+				"Pet/mango.json": { data: {
+					attributes: {
+						name: "Mango",
+						cardTitle: "Mango"
+					},
+					meta: { adoptsFrom: {
+						module: "../pet",
+						name: "Pet"
+					} }
+				} },
+				"article-1.json": { data: {
+					attributes: { body: { content: `::card[@test/cards/Pet/mango | double-strip]\n` } },
+					meta: { adoptsFrom: {
+						module: "./article",
+						name: "ArticleCard"
+					} }
+				} }
+			}
+		});
+		let virtualNetwork = getService("network").virtualNetwork;
+		virtualNetwork.addRealmMapping("@test/cards/", testRealmURL);
+		try {
+			let store = getService("store");
+			let article = await store.get("@test/cards/article-1");
+			await store.loaded();
+			await renderCard(loader, article, "edit");
+			await waitFor("[data-test-pet-fitted]", { timeout: 1e4 });
+			assert.dom("[data-test-pet-fitted]").exists("prefix-form ref renders the card, not a URL fallback");
+			assert.dom(".codemirror-card-fallback").doesNotExist("no URL fallback remains once the card resolves");
+			let slot = document.querySelector("[data-test-pet-fitted]").closest(".codemirror-card-slot--block");
+			assert.strictEqual(slot?.style.width, "250px", "double-strip width is applied");
+			assert.strictEqual(slot?.style.height, "65px", "double-strip height is applied");
+		} finally {
+			virtualNetwork.removeRealmMapping("@test/cards/");
+		}
+	});
+	(0, import_qunit.test)("edit-mode compose preview flows inline embeds by format (atom pill vs sized inline-block)", async function(assert) {
+		class Pet extends CardDef {
+			static displayName = "Pet";
+			static {
+				decorateFieldV2(this.prototype, "name", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#name = (initializeDeferredDecorator(this, "name"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "cardTitle", [field], function() {
+					return contains(string_default, { computeVia: function() {
+						return this.name;
+					} });
+				});
+			}
+			#cardTitle = (initializeDeferredDecorator(this, "cardTitle"), void 0);
+			static atom = class Atom extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "hIHHAuC1",
+						"block": "[[[10,1],[14,\"data-test-pet-atom\",\"\"],[12],[1,[30,1,[\"name\"]]],[13]],[\"@model\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+			static embedded = class Embedded extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "urFu3pRa",
+						"block": "[[[10,0],[14,\"data-test-pet-embedded\",\"\"],[12],[1,[30,1,[\"name\"]]],[13]],[\"@model\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+			static fitted = class Fitted extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "+uAZxnry",
+						"block": "[[[10,0],[14,\"data-test-pet-fitted\",\"\"],[12],[1,[30,1,[\"name\"]]],[13]],[\"@model\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		class ArticleCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: {
+				"pet.gts": { Pet },
+				"article.gts": { ArticleCard },
+				"Pet/mango.json": { data: {
+					attributes: {
+						name: "Mango",
+						cardTitle: "Mango"
+					},
+					meta: { adoptsFrom: {
+						module: "../pet",
+						name: "Pet"
+					} }
+				} },
+				"article-1.json": { data: {
+					attributes: { body: { content: `Embedded: :card[${testRealmURL}Pet/mango | embedded]\n\nAtom: :card[${testRealmURL}Pet/mango | atom]\n\nFitted: :card[${testRealmURL}Pet/mango | fitted w:200 h:100]\n` } },
+					meta: { adoptsFrom: {
+						module: "./article",
+						name: "ArticleCard"
+					} }
+				} }
+			}
+		});
+		let store = getService("store");
+		let article = await store.get(`${testRealmURL}article-1`);
+		await store.loaded();
+		await renderCard(loader, article, "edit");
+		await waitFor("[data-test-pet-embedded]", { timeout: 1e4 });
+		await waitFor("[data-test-pet-atom]", { timeout: 1e4 });
+		await waitFor("[data-test-pet-fitted]", { timeout: 1e4 });
+		let embeddedSlot = document.querySelector("[data-test-pet-embedded]").closest("[data-test-codemirror-card-slot-inline]");
+		assert.dom(embeddedSlot).hasClass("codemirror-card-slot--inline-embed", "a non-atom inline embed flows as an inline-block slot");
+		assert.dom(embeddedSlot).doesNotHaveClass("codemirror-card-slot--inline", "a non-atom inline embed does not use the atom pill flow class");
+		let atomSlot = document.querySelector("[data-test-pet-atom]").closest("[data-test-codemirror-card-slot-inline]");
+		assert.dom(atomSlot).hasClass("codemirror-card-slot--inline", "a plain (atom) inline ref keeps the atom pill flow class");
+		let fittedSlot = document.querySelector("[data-test-pet-fitted]").closest("[data-test-codemirror-card-slot-inline]");
+		assert.dom(fittedSlot).hasClass("codemirror-card-slot--inline-embed", "a fitted inline embed flows as an inline-block slot");
+		assert.strictEqual(fittedSlot?.style.width, "200px", "fitted inline slot carries the requested width");
+		assert.strictEqual(fittedSlot?.style.height, "100px", "fitted inline slot carries the requested height");
+		assert.strictEqual(fittedSlot?.style.overflow, "hidden", "fitted inline slot clips overflow");
+	});
+	(0, import_qunit.test)("inline card reference with a non-atom format resolves to an inline-block slot", async function(assert) {
+		class Pet extends CardDef {
+			static displayName = "Pet";
+			static {
+				decorateFieldV2(this.prototype, "name", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#name = (initializeDeferredDecorator(this, "name"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "cardTitle", [field], function() {
+					return contains(string_default, { computeVia: function() {
+						return this.name;
+					} });
+				});
+			}
+			#cardTitle = (initializeDeferredDecorator(this, "cardTitle"), void 0);
+			static embedded = class Embedded extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "fc+zviHm",
+						"block": "[[[10,0],[14,\"data-test-pet-embedded\",\"\"],[12],[8,[30,1,[\"name\"]],null,null,null],[13]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+			static atom = class Atom extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "hIHHAuC1",
+						"block": "[[[10,1],[14,\"data-test-pet-atom\",\"\"],[12],[1,[30,1,[\"name\"]]],[13]],[\"@model\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		class ArticleCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static isolated = class Isolated extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: {
+				"pet.gts": { Pet },
+				"article.gts": { ArticleCard },
+				"Pet/mango.json": { data: {
+					attributes: {
+						name: "Mango",
+						cardTitle: "Mango"
+					},
+					meta: { adoptsFrom: {
+						module: "../pet",
+						name: "Pet"
+					} }
+				} },
+				"article-1.json": { data: {
+					attributes: { body: { content: `Embedded inline: :card[${testRealmURL}Pet/mango | embedded]\n\nAtom inline: :card[${testRealmURL}Pet/mango | atom]\n` } },
+					meta: { adoptsFrom: {
+						module: "./article",
+						name: "ArticleCard"
+					} }
+				} }
+			}
+		});
+		let store = getService("store");
+		let article = await store.get(`${testRealmURL}article-1`);
+		await store.loaded();
+		await renderCard(loader, article, "isolated");
+		await waitFor("[data-test-pet-embedded]", { timeout: 1e4 });
+		await waitFor("[data-test-pet-atom]", { timeout: 1e4 });
+		let embeddedSlot = document.querySelector("[data-test-pet-embedded]").closest("[data-test-markdown-bfm-inline-card]");
+		assert.ok(embeddedSlot, "the embedded inline ref renders inside an inline card slot");
+		assert.dom(embeddedSlot).hasClass("markdown-bfm-card-slot--inline-embed", "a non-atom inline embed flows as an inline-block slot");
+		assert.dom(embeddedSlot).doesNotHaveClass("markdown-bfm-card-slot--inline", "a non-atom inline embed does not use the atom pill flow class");
+		let atomSlot = document.querySelector("[data-test-pet-atom]").closest("[data-test-markdown-bfm-inline-card]");
+		assert.ok(atomSlot, "the atom inline ref renders inside an inline card slot");
+		assert.dom(atomSlot).hasClass("markdown-bfm-card-slot--inline", "a plain (atom) inline ref keeps the atom pill flow class");
+	});
+	(0, import_qunit.test)("card references show loading shimmer before linkedCards resolves, not broken Pills", async function(assert) {
+		class Pet extends CardDef {
+			static displayName = "Pet";
+			static {
+				decorateFieldV2(this.prototype, "name", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#name = (initializeDeferredDecorator(this, "name"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "cardTitle", [field], function() {
+					return contains(string_default, { computeVia: function() {
+						return this.name;
+					} });
+				});
+			}
+			#cardTitle = (initializeDeferredDecorator(this, "cardTitle"), void 0);
+			static atom = class Atom extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "hIHHAuC1",
+						"block": "[[[10,1],[14,\"data-test-pet-atom\",\"\"],[12],[1,[30,1,[\"name\"]]],[13]],[\"@model\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		class ArticleCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static isolated = class Isolated extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: {
+				"pet.gts": { Pet },
+				"article.gts": { ArticleCard },
+				"Pet/mango.json": { data: {
+					attributes: {
+						name: "Mango",
+						cardTitle: "Mango"
+					},
+					meta: { adoptsFrom: {
+						module: "../pet",
+						name: "Pet"
+					} }
+				} },
+				"article-1.json": { data: {
+					attributes: { body: { content: `Inline ref: :card[${testRealmURL}Pet/mango]\n` } },
+					meta: { adoptsFrom: {
+						module: "./article",
+						name: "ArticleCard"
+					} }
+				} }
+			}
+		});
+		let store = getService("store");
+		let article = await store.get(`${testRealmURL}article-1`);
+		await store.loaded();
+		await renderCard(loader, article, "isolated");
+		let unresolvedPillEverAppeared = false;
+		let testRoot = document.querySelector("#ember-testing");
+		let testObserver = new MutationObserver(() => {
+			if (testRoot.querySelector("[data-test-markdown-bfm-unresolved-inline]")) unresolvedPillEverAppeared = true;
+		});
+		testObserver.observe(testRoot, {
+			childList: true,
+			subtree: true
+		});
+		let inlineRef = document.querySelector("[data-boxel-bfm-inline-ref]");
+		assert.ok(inlineRef, "card ref element exists in the DOM");
+		await waitFor("[data-test-pet-atom]", { timeout: 1e4 });
+		testObserver.disconnect();
+		assert.false(unresolvedPillEverAppeared, "no broken Pill flashed during the loading→resolved transition");
+		assert.dom("[data-test-pet-atom]").hasText("Mango", "card resolves correctly");
+		assert.dom("[data-test-markdown-bfm-unresolved-inline]").doesNotExist("no unresolved Pill after card resolves");
+	});
+	(0, import_qunit.test)("unresolved card references render as muted Pill indicators", async function(assert) {
+		class ArticleCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static isolated = class Isolated extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: {
+				"article.gts": { ArticleCard },
+				"article-unresolved.json": { data: {
+					attributes: { body: { content: `Inline: :card[https://nonexistent.example/Pet/missing]\n\nBlock:\n\n::card[https://nonexistent.example/BlogPost/gone]\n` } },
+					meta: { adoptsFrom: {
+						module: "./article",
+						name: "ArticleCard"
+					} }
+				} }
+			}
+		});
+		let store = getService("store");
+		let article = await store.get(`${testRealmURL}article-unresolved`);
+		await store.loaded();
+		await renderCard(loader, article, "isolated");
+		await waitUntil(() => document.querySelector("[data-test-markdown-bfm-unresolved-inline]") !== null, { timeout: 1e4 });
+		assert.dom("[data-test-markdown-bfm-unresolved-inline]").hasText("Pet", "inline unresolved ref shows type name in Pill");
+		assert.dom("[data-test-markdown-bfm-unresolved-inline]").hasAttribute("title", "https://nonexistent.example/Pet/missing", "inline Pill title shows the raw URL");
+		assert.dom("[data-test-markdown-bfm-unresolved-block]").exists("block unresolved ref renders a Pill");
+		assert.dom("[data-test-markdown-bfm-unresolved-block]").hasAttribute("title", "https://nonexistent.example/BlogPost/gone", "block Pill title shows the raw URL");
+	});
+	(0, import_qunit.test)("unresolved block ref with fitted size spec carries the card footprint", async function(assert) {
+		class ArticleCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static isolated = class Isolated extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: {
+				"article.gts": { ArticleCard },
+				"article-fitted-unresolved.json": { data: {
+					attributes: { body: { content: `::card[https://nonexistent.example/BlogPost/gone | 400x200]\n` } },
+					meta: { adoptsFrom: {
+						module: "./article",
+						name: "ArticleCard"
+					} }
+				} }
+			}
+		});
+		let store = getService("store");
+		let article = await store.get(`${testRealmURL}article-fitted-unresolved`);
+		await store.loaded();
+		await renderCard(loader, article, "isolated");
+		await waitUntil(() => document.querySelector("[data-test-markdown-bfm-unresolved-block]") !== null, { timeout: 1e4 });
+		let brokenBlock = document.querySelector("[data-test-markdown-bfm-unresolved-block]");
+		assert.ok(brokenBlock, "broken-link block exists");
+		assert.dom(brokenBlock).hasClass("markdown-bfm-broken--fitted", "fitted ref carries the fitted footprint class");
+		let style = brokenBlock?.getAttribute("style") ?? "";
+		assert.true(/width:\s*400px/.test(style), `broken-link inline style includes width: 400px (got "${style}")`);
+		assert.true(/height:\s*200px/.test(style), `broken-link inline style includes height: 200px (got "${style}")`);
+	});
+	(0, import_qunit.test)("unresolved block ::file with fitted size spec carries the same footprint as ::card", async function(assert) {
+		class ArticleCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static isolated = class Isolated extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: {
+				"article.gts": { ArticleCard },
+				"article-file-fitted-unresolved.json": { data: {
+					attributes: { body: { content: `::file[https://nonexistent.example/images/gone.png | 400x200]\n` } },
+					meta: { adoptsFrom: {
+						module: "./article",
+						name: "ArticleCard"
+					} }
+				} }
+			}
+		});
+		let store = getService("store");
+		let article = await store.get(`${testRealmURL}article-file-fitted-unresolved`);
+		await store.loaded();
+		await renderCard(loader, article, "isolated");
+		await waitUntil(() => document.querySelector("[data-test-markdown-bfm-unresolved-block]") !== null, { timeout: 1e4 });
+		let brokenBlock = document.querySelector("[data-test-markdown-bfm-unresolved-block]");
+		assert.ok(brokenBlock, "broken-link block exists");
+		assert.dom(brokenBlock).hasClass("markdown-bfm-broken--fitted", "fitted file ref carries the fitted footprint class");
+		let style = brokenBlock?.getAttribute("style") ?? "";
+		assert.true(/width:\s*400px/.test(style), `broken-link inline style includes width: 400px (got "${style}")`);
+		assert.true(/height:\s*200px/.test(style), `broken-link inline style includes height: 200px (got "${style}")`);
+	});
+	(0, import_qunit.test)("linkedCards resolve when markdown uses relative card references", async function(assert) {
+		class Pet extends CardDef {
+			static displayName = "Pet";
+			static {
+				decorateFieldV2(this.prototype, "name", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#name = (initializeDeferredDecorator(this, "name"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "cardTitle", [field], function() {
+					return contains(string_default, { computeVia: function() {
+						return this.name;
+					} });
+				});
+			}
+			#cardTitle = (initializeDeferredDecorator(this, "cardTitle"), void 0);
+			static embedded = class Embedded extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "fc+zviHm",
+						"block": "[[[10,0],[14,\"data-test-pet-embedded\",\"\"],[12],[8,[30,1,[\"name\"]],null,null,null],[13]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+			static atom = class Atom extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "hIHHAuC1",
+						"block": "[[[10,1],[14,\"data-test-pet-atom\",\"\"],[12],[1,[30,1,[\"name\"]]],[13]],[\"@model\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		class ArticleCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static isolated = class Isolated extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: {
+				"pet.gts": { Pet },
+				"article.gts": { ArticleCard },
+				"Pet/mango.json": { data: {
+					attributes: {
+						name: "Mango",
+						cardTitle: "Mango"
+					},
+					meta: { adoptsFrom: {
+						module: "../pet",
+						name: "Pet"
+					} }
+				} },
+				"article-1.json": { data: {
+					attributes: { body: { content: `Inline ref: :card[./Pet/mango]\n\nBlock ref:\n\n::card[./Pet/mango]\n` } },
+					meta: { adoptsFrom: {
+						module: "./article",
+						name: "ArticleCard"
+					} }
+				} }
+			}
+		});
+		let store = getService("store");
+		let article = await store.get(`${testRealmURL}article-1`);
+		await store.loaded();
+		await renderCard(loader, article, "isolated");
+		await waitFor("[data-test-pet-atom]", { timeout: 1e4 });
+		assert.dom("[data-test-pet-atom]").exists("inline card reference with relative path renders the referenced card");
+		assert.dom("[data-test-pet-atom]").hasText("Mango", "inline atom shows the correct card");
+		assert.dom("[data-test-pet-embedded]").exists("block card reference with relative path renders the referenced card");
+		assert.dom("[data-test-pet-embedded]").hasText("Mango", "block embedded shows the correct card");
+		assert.dom("[data-test-markdown-bfm-unresolved-inline]").doesNotExist("no unresolved Pill remains after card resolves (inline)");
+		assert.dom("[data-test-markdown-bfm-unresolved-block]").doesNotExist("no unresolved Pill remains after card resolves (block)");
+	});
+	(0, import_qunit.test)("edit template renders a docked toolbar with the view selector", async function(assert) {
+		class TestCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static edit = class Edit extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: { "test-card.gts": { TestCard } }
+		});
+		let card = new TestCard({ body: new RichMarkdownField({ content: "Hello world" }) });
+		await renderCard(loader, card, "edit");
+		await waitFor("[data-test-markdown-toolbar]");
+		assert.dom("[data-test-markdown-toolbar]").exists("docked toolbar is rendered");
+		assert.dom("[data-test-markdown-mode-select]").exists("view selector is rendered in the toolbar");
+		await click("[data-test-markdown-mode-select]");
+		assert.dom("[data-test-markdown-mode-option=\"compose\"]").exists("Compose option");
+		assert.dom("[data-test-markdown-mode-option=\"source\"]").exists("Source option");
+		assert.dom("[data-test-markdown-mode-option=\"preview\"]").exists("Preview option");
+	});
+	(0, import_qunit.test)("default mode shows editor, not preview", async function(assert) {
+		class TestCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static edit = class Edit extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: { "test-card.gts": { TestCard } }
+		});
+		let card = new TestCard({ body: new RichMarkdownField({ content: "Hello world" }) });
+		await renderCard(loader, card, "edit");
+		assert.dom("[data-test-markdown-preview]").doesNotExist("preview is not shown by default");
+		let editorOrLoading = document.querySelector("[data-test-codemirror-editor]") ?? document.querySelector("[data-test-codemirror-loading]");
+		assert.ok(editorOrLoading, "editor is shown by default (edit mode)");
+	});
+	(0, import_qunit.test)("formatting controls start disabled while the view selector stays enabled", async function(assert) {
+		class TestCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static edit = class Edit extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: { "test-card.gts": { TestCard } }
+		});
+		let card = new TestCard({ body: new RichMarkdownField({ content: "Hello world" }) });
+		await renderCard(loader, card, "edit");
+		await waitFor("[data-test-toolbar=\"bold\"]");
+		assert.dom("[data-test-toolbar=\"bold\"]").isDisabled("Bold is disabled before the editor gains focus");
+		for (let testId of [
+			"italic",
+			"strikethrough",
+			"code",
+			"link"
+		]) assert.dom(`[data-test-toolbar="${testId}"]`).isDisabled(`${testId} is disabled before the editor gains focus`);
+		assert.dom("[data-test-toolbar=\"blockquote\"]").isDisabled("all formatting controls start disabled");
+		await click("[data-test-markdown-mode-select]");
+		assert.dom("[data-test-markdown-mode-option=\"source\"]").exists("view selector opens without editor focus");
+		await click("[data-test-markdown-mode-option=\"compose\"]");
+	});
+	(0, import_qunit.test)("the Link toggle reads active when the caret sits inside a link", async function(assert) {
+		class TestCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static edit = class Edit extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: { "test-card.gts": { TestCard } }
+		});
+		let card = new TestCard({ body: new RichMarkdownField({ content: "Click [here](https://example.com) now" }) });
+		await renderCard(loader, card, "edit");
+		await waitFor("[data-test-toolbar=\"link\"]");
+		let editorEl = document.querySelector(".cm-editor");
+		assert.ok(editorEl, "editor is rendered");
+		let view = codemirrorContext.EditorView.findFromDOM(editorEl);
+		assert.ok(view, "live EditorView is reachable from the DOM");
+		view.dispatch({ selection: {
+			anchor: 9,
+			head: 9
+		} });
+		await settled();
+		assert.dom("[data-test-toolbar=\"link\"]").hasAttribute("aria-pressed", "true", "Link toggle reads active at a caret inside a link");
+		assert.dom("[data-test-toolbar=\"bold\"]").hasAttribute("aria-pressed", "false", "wrap toggles stay inactive at a caret");
+		view.dispatch({ selection: {
+			anchor: 2,
+			head: 2
+		} });
+		await settled();
+		assert.dom("[data-test-toolbar=\"link\"]").hasAttribute("aria-pressed", "false", "Link toggle deactivates once the caret leaves the link");
+	});
+	(0, import_qunit.test)("toolbar items are wrapped in tooltips whose hint is suppressed while the control is disabled", async function(assert) {
+		class TestCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static edit = class Edit extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: { "test-card.gts": { TestCard } }
+		});
+		let card = new TestCard({ body: new RichMarkdownField({ content: "Hello world" }) });
+		await renderCard(loader, card, "edit");
+		await waitFor("[data-test-toolbar=\"bold\"]");
+		assert.dom("[data-test-toolbar-tooltip=\"bold\"]").exists("Bold is wrapped in a tooltip trigger");
+		assert.dom("[data-test-toolbar-tooltip=\"strikethrough\"]").exists("Strikethrough is wrapped in a tooltip trigger");
+		assert.dom("[data-test-toolbar=\"bold\"]").isDisabled();
+		await triggerEvent("[data-test-toolbar-tooltip=\"bold\"]", "mouseenter");
+		assert.dom("[data-test-tooltip-content]").doesNotExist("no tooltip is shown while the control is disabled");
+		await triggerEvent("[data-test-toolbar-tooltip=\"bold\"]", "mouseleave");
+	});
+	(0, import_qunit.test)("selecting Preview shows rendered markdown and hides editor", async function(assert) {
+		class TestCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static edit = class Edit extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: { "test-card.gts": { TestCard } }
+		});
+		let card = new TestCard({ body: new RichMarkdownField({ content: "# Hello World\n\nSome **bold** text." }) });
+		await renderCard(loader, card, "edit");
+		await waitFor("[data-test-markdown-mode-select]");
+		await click("[data-test-markdown-mode-select]");
+		await click("[data-test-markdown-mode-option=\"preview\"]");
+		assert.dom("[data-test-markdown-preview]").exists("markdown preview is rendered");
+		assert.dom("[data-test-codemirror-editor]").doesNotExist("CodeMirror editor is not shown in preview mode");
+		assert.dom("[data-test-markdown-preview] h1").hasText("Hello World", "heading is rendered as HTML");
+		assert.dom("[data-test-markdown-preview] strong").hasText("bold", "bold text is rendered as HTML");
+		assert.dom("[data-test-markdown-mode-select]").exists("view selector is still present in preview mode");
+	});
+	(0, import_qunit.test)("view selector works in preview mode to switch back to compose", async function(assert) {
+		class TestCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static edit = class Edit extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: { "test-card.gts": { TestCard } }
+		});
+		let card = new TestCard({ body: new RichMarkdownField({ content: "Hello world" }) });
+		await renderCard(loader, card, "edit");
+		await waitFor("[data-test-markdown-mode-select]");
+		await click("[data-test-markdown-mode-select]");
+		await click("[data-test-markdown-mode-option=\"preview\"]");
+		assert.dom("[data-test-markdown-preview]").exists("preview is shown");
+		await click("[data-test-markdown-mode-select]");
+		await click("[data-test-markdown-mode-option=\"compose\"]");
+		assert.dom("[data-test-markdown-preview]").doesNotExist("preview is hidden after switching back");
+		await waitFor("[data-test-markdown-toolbar]");
+		let editorOrLoading = document.querySelector("[data-test-codemirror-editor]") ?? document.querySelector("[data-test-codemirror-loading]");
+		assert.ok(editorOrLoading, "editor is restored after switching back to Compose");
+	});
+});
+//#endregion