github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-06-06 03:06:53 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FEATURE: add details (plugin) rich editor extension (#31718)

Browse Source 
Continues the work done on
https://github.com/discourse/discourse/pull/30815.

Adds `details` and `summary` nodes, parsers, and serializers, and a
click handler to toggle the `open` attribute.

---------

Co-authored-by: Martin Brennan <martin@discourse.org>
This commit is contained in:
Renato Atilio
2025-03-11 20:15:32 -03:00
committed by GitHub
parent 968b851c1b
commit 623f02aff6
6 changed files with 194 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
plugins/discourse-details/test/javascripts/integration/prosemirror-editor/details-test.js Normal file
View File

@ -0,0 +1,76 @@
import { click } from "@ember/test-helpers";
import { module, test } from "qunit";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import {
setupRichEditor,
testMarkdown,
} from "discourse/tests/helpers/rich-editor-helper";
module(
"Integration | Component | prosemirror-editor - details extension",
function (hooks) {
setupRenderingTest(hooks);
const testCases = {
details: [
[
`[details="Summary"]This text will be hidden[/details]`,
`<details><summary>Summary</summary><p>This text will be hidden</p></details>`,
`[details="Summary"]\nThis text will be hidden\n\n[/details]\n\n`,
],
],
"details with open attribute": [
[
`[details="Summary" open]This text will be hidden[/details]`,
`<details open="true"><summary>Summary</summary><p>This text will be hidden</p></details>`,
`[details="Summary" open]\nThis text will be hidden\n\n[/details]\n\n`,
],
],
"details without summary": [
[
`[details]This text will be hidden[/details]`,
`<details><summary></summary><p>This text will be hidden</p></details>`,
`[details]\nThis text will be hidden\n\n[/details]\n\n`,
],
],
"details without summary but with open attribute": [
[
`[details open]This text will be hidden[/details]`,
`<details open="true"><summary></summary><p>This text will be hidden</p></details>`,
`[details open]\nThis text will be hidden\n\n[/details]\n\n`,
],
],
};
Object.entries(testCases).forEach(([name, tests]) => {
tests.forEach(([markdown, expectedHtml, expectedMarkdown]) => {
test(name, async function (assert) {
this.siteSettings.rich_editor = true;
await testMarkdown(assert, markdown, expectedHtml, expectedMarkdown);
});
});
});
test("opens and closes details on click", async function (assert) {
this.siteSettings.rich_editor = true;
const detailsMarkdown = `[details="Summary"]This text will be hidden[/details]`;
await setupRichEditor(assert, detailsMarkdown);
const detailsCss = ".d-editor-input details";
const summaryCss = `${detailsCss} summary`;
assert.dom(`${detailsCss} p`).isNotVisible();
await click(`${summaryCss}`);
assert.dom(`${detailsCss}`).hasAttribute("open");
assert.dom(`${detailsCss} p`).isVisible();
// click elsewhere first to avoid a double-click being detected
await click(`${detailsCss} p`);
await click(`${summaryCss}`);
assert.dom(`${detailsCss} p`).isNotVisible();
assert.dom(`${detailsCss}`).doesNotHaveAttribute("open");
});
}
);