Skip to content

Commit c6dc8b0

Browse files
thetthet
committed
maint(pat-markdown): Switch to class based pattern.
1 parent 4fdb12a commit c6dc8b0

File tree

2 files changed

+58
-47
lines changed

2 files changed

+58
-47
lines changed

‎src/pat/markdown/markdown.js‎

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,31 @@
11
import $ from "jquery";
2-
import logging from "../../core/logging";
3-
import utils from "../../core/utils";
4-
import Base from "../../core/base";
2+
import { BasePattern } from "../../core/basepattern";
3+
import dom from "../../core/dom";
54
import events from "../../core/events";
65
import inject from "../inject/inject";
6+
import logging from "../../core/logging";
7+
import registry from "../../core/registry";
8+
import utils from "../../core/utils";
79

810
const log = logging.getLogger("pat.markdown");
911
const is_markdown_resource = /\.md$/;
1012

11-
const Markdown = Base.extend({
12-
name: "markdown",
13-
trigger: ".pat-markdown",
13+
class Pattern extends BasePattern {
14+
static name = "markdown";
15+
static trigger = ".pat-markdown";
1416

1517
async init() {
16-
if (this.$el.is(this.trigger)) {
18+
if (this.el.matches(this.trigger)) {
1719
/* This pattern can either be used standalone or as an enhancement
1820
* to pat-inject. The following only applies to standalone, when
19-
* $el is explicitly configured with the pat-markdown trigger.
21+
* the element is explicitly configured with the pat-markdown
22+
* trigger.
2023
*/
21-
const source = this.$el.is(":input")
22-
? this.$el.val()
23-
: this.$el[0].innerHTML;
24-
let rendered = await this.render(source);
24+
const source = dom.is_input(this.el) ? this.el.value : this.el.innerHTML;
25+
const rendered = await this.render(source);
2526
this.el.replaceWith(...rendered);
2627
}
27-
},
28+
}
2829

2930
async render(text) {
3031
const marked = (await import("marked")).marked;
@@ -44,7 +45,7 @@ const Markdown = Base.extend({
4445
await events.await_event(pre, "init.syntax-highlight.patterns");
4546
}
4647
return $(wrapper);
47-
},
48+
}
4849

4950
async renderForInjection(cfg, data) {
5051
let header;
@@ -59,7 +60,7 @@ const Markdown = Base.extend({
5960
}
6061
const rendered = await this.render(source);
6162
return rendered.attr("data-src", cfg.source ? cfg.url + cfg.source : cfg.url);
62-
},
63+
}
6364

6465
extractSection(text, header) {
6566
let pattern;
@@ -96,8 +97,8 @@ const Markdown = Base.extend({
9697
log.error("Failed to find section with known present header?");
9798
}
9899
return match !== null ? match[0] : null;
99-
},
100-
});
100+
}
101+
}
101102

102103
$(document).ready(function () {
103104
$(document.body).on(
@@ -121,12 +122,14 @@ inject.registerTypeHandler("markdown", {
121122
async sources(cfgs, data) {
122123
return await Promise.all(
123124
cfgs.map(async function (cfg) {
124-
const pat = new Markdown(cfg.$target[0]);
125+
const pat = new Pattern(cfg.$target[0]);
125126
const rendered = await pat.renderForInjection(cfg, data);
126127
return rendered;
127128
})
128129
);
129130
},
130131
});
131132

132-
export default Markdown;
133+
registry.register(Pattern);
134+
export default Pattern;
135+
export { Pattern };

‎src/pat/markdown/markdown.test.js‎

Lines changed: 36 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import $ from "jquery";
2-
import pattern from "./markdown";
3-
import utils from "../../core/utils";
2+
import events from "../../core/events";
3+
import Pattern from "./markdown";
44
import { jest } from "@jest/globals";
55

66
describe("pat-markdown", function () {
@@ -19,77 +19,85 @@ describe("pat-markdown", function () {
1919
it("Replaces the DOM element with the rendered Markdown content.", async function () {
2020
var $el = $('<p class="pat-markdown"></p>');
2121
$el.appendTo("#lab");
22-
jest.spyOn(pattern.prototype, "render").mockImplementation(() => {
22+
jest.spyOn(Pattern.prototype, "render").mockImplementation(() => {
2323
return $("<p>Rendering</p>");
2424
});
25-
pattern.init($el);
26-
await utils.timeout(1); // wait a tick for async to settle.
25+
26+
const instance = new Pattern($el);
27+
await events.await_pattern_init(instance);
28+
2729
expect($("#lab").html()).toBe("<p>Rendering</p>");
2830
});
2931

30-
it("It does not render when the DOM element doesn't have the pattern trigger", function () {
32+
it("It does not render when the DOM element doesn't have the pattern trigger", async function () {
3133
var $el = $("<p></p>");
3234
$el.appendTo("#lab");
33-
jest.spyOn(pattern.prototype, "render").mockImplementation(() => {
35+
jest.spyOn(Pattern.prototype, "render").mockImplementation(() => {
3436
return $("<p>Rendering</p>");
3537
});
36-
pattern.init($el);
38+
const instance = new Pattern($el);
39+
await events.await_pattern_init(instance);
40+
3741
expect($("#lab").html()).toBe("<p></p>");
3842
});
3943

40-
it("uses content for non-input elements", function () {
44+
it("uses content for non-input elements", async function () {
4145
var $el = $('<p class="pat-markdown"/>').text("This is markdown");
4246
$el.appendTo("#lab");
4347
const spy_render = jest
44-
.spyOn(pattern.prototype, "render")
48+
.spyOn(Pattern.prototype, "render")
4549
.mockImplementation(() => {
4650
return $("<p/>");
4751
});
48-
pattern.init($el);
52+
const instance = new Pattern($el);
53+
await events.await_pattern_init(instance);
54+
4955
expect(spy_render).toHaveBeenCalledWith("This is markdown");
5056
});
5157

52-
it("uses value for input elements", function () {
58+
it("uses value for input elements", async function () {
5359
var $el = $('<textarea class="pat-markdown"/>').val("This is markdown");
5460
$el.appendTo("#lab");
5561
const spy_render = jest
56-
.spyOn(pattern.prototype, "render")
62+
.spyOn(Pattern.prototype, "render")
5763
.mockImplementation(() => {
5864
return $("<p/>");
5965
});
60-
pattern.init($el);
66+
const instance = new Pattern($el);
67+
await events.await_pattern_init(instance);
68+
6169
expect(spy_render).toHaveBeenCalledWith("This is markdown");
6270
});
6371
});
6472

6573
describe("when rendering", function () {
6674
it("wraps rendering in a div", async function () {
67-
const $rendering = await pattern.prototype.render("*This is markdown*");
75+
const $rendering = await Pattern.prototype.render("*This is markdown*");
6876
expect($rendering[0].tagName).toBe("DIV");
6977
});
7078

7179
it("converts markdown into HTML", async function () {
72-
const $rendering = await pattern.prototype.render("*This is markdown*");
80+
const $rendering = await Pattern.prototype.render("*This is markdown*");
7381
expect($rendering.html()).toBe(`<p><em>This is markdown</em></p>\n`);
7482
});
7583
});
7684

7785
describe("Session extraction", function () {
7886
it("Unknown section", function () {
7987
expect(
80-
pattern.prototype.extractSection("## My title\n\nContent", "Other title")
88+
Pattern.prototype.extractSection("## My title\n\nContent", "Other title")
8189
).toBe(null);
8290
});
8391

8492
it("Last hash-section", function () {
8593
expect(
86-
pattern.prototype.extractSection("## My title\n\nContent", "My title")
94+
Pattern.prototype.extractSection("## My title\n\nContent", "My title")
8795
).toBe("## My title\n\nContent");
8896
});
8997

9098
it("Hash-section with following section at same level ", function () {
9199
expect(
92-
pattern.prototype.extractSection(
100+
Pattern.prototype.extractSection(
93101
"## My title\n\nContent\n## Next section\n",
94102
"My title"
95103
)
@@ -98,7 +106,7 @@ describe("pat-markdown", function () {
98106

99107
it("Hash-section with following section at lower level ", function () {
100108
expect(
101-
pattern.prototype.extractSection(
109+
Pattern.prototype.extractSection(
102110
"## My title\n\nContent\n### Next section\n",
103111
"My title"
104112
)
@@ -107,7 +115,7 @@ describe("pat-markdown", function () {
107115

108116
it("Double underscore section", function () {
109117
expect(
110-
pattern.prototype.extractSection(
118+
Pattern.prototype.extractSection(
111119
"My title\n=======\nContent",
112120
"My title"
113121
)
@@ -116,7 +124,7 @@ describe("pat-markdown", function () {
116124

117125
it("Double underscore section with following section at same level", function () {
118126
expect(
119-
pattern.prototype.extractSection(
127+
Pattern.prototype.extractSection(
120128
"My title\n=======\nContent\n\nNext\n====\n",
121129
"My title"
122130
)
@@ -125,7 +133,7 @@ describe("pat-markdown", function () {
125133

126134
it("Double underscore section with following section at lower level", function () {
127135
expect(
128-
pattern.prototype.extractSection(
136+
Pattern.prototype.extractSection(
129137
"My title\n=======\nContent\n\nNext\n----\n",
130138
"My title"
131139
)
@@ -134,7 +142,7 @@ describe("pat-markdown", function () {
134142

135143
it("Single underscore section", function () {
136144
expect(
137-
pattern.prototype.extractSection(
145+
Pattern.prototype.extractSection(
138146
"My title\n-------\nContent",
139147
"My title"
140148
)
@@ -143,7 +151,7 @@ describe("pat-markdown", function () {
143151

144152
it("Single underscore section with following section at same level", function () {
145153
expect(
146-
pattern.prototype.extractSection(
154+
Pattern.prototype.extractSection(
147155
"My title\n-------\nContent\n\nNext\n----\n",
148156
"My title"
149157
)
@@ -152,7 +160,7 @@ describe("pat-markdown", function () {
152160

153161
it("Single underscore section with following section at higher level", function () {
154162
expect(
155-
pattern.prototype.extractSection(
163+
Pattern.prototype.extractSection(
156164
"My title\n-------\nContent\n\nNext\n====\n",
157165
"My title"
158166
)
@@ -177,8 +185,8 @@ some content
177185
</main>
178186
`;
179187

180-
new pattern(document.querySelector(".pat-markdown"));
181-
await utils.timeout(1); // wait a tick for async to settle.
188+
const instance = new Pattern(document.querySelector(".pat-markdown"));
189+
await events.await_pattern_init(instance);
182190
await utils.timeout(1); // wait a tick for async to settle.
183191

184192
expect(document.body.querySelector("main > div > h1").textContent).toBe("Title"); // prettier-ignore

0 commit comments

Comments
 (0)