Skip to content

Commit 2120cdc

Browse files
thetthet
committed
maint(pat-markdown): Switch to class based pattern.
1 parent e7d34d3 commit 2120cdc

File tree

2 files changed

+58
-46
lines changed

2 files changed

+58
-46
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 & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import $ from "jquery";
2-
import pattern from "./markdown";
2+
import events from "../../core/events";
3+
import Pattern from "./markdown";
34
import utils from "../../core/utils";
45
import { jest } from "@jest/globals";
56

@@ -19,77 +20,85 @@ describe("pat-markdown", function () {
1920
it("Replaces the DOM element with the rendered Markdown content.", async function () {
2021
var $el = $('<p class="pat-markdown"></p>');
2122
$el.appendTo("#lab");
22-
jest.spyOn(pattern.prototype, "render").mockImplementation(() => {
23+
jest.spyOn(Pattern.prototype, "render").mockImplementation(() => {
2324
return $("<p>Rendering</p>");
2425
});
25-
pattern.init($el);
26-
await utils.timeout(1); // wait a tick for async to settle.
26+
27+
const instance = new Pattern($el);
28+
await events.await_pattern_init(instance);
29+
2730
expect($("#lab").html()).toBe("<p>Rendering</p>");
2831
});
2932

30-
it("It does not render when the DOM element doesn't have the pattern trigger", function () {
33+
it("It does not render when the DOM element doesn't have the pattern trigger", async function () {
3134
var $el = $("<p></p>");
3235
$el.appendTo("#lab");
33-
jest.spyOn(pattern.prototype, "render").mockImplementation(() => {
36+
jest.spyOn(Pattern.prototype, "render").mockImplementation(() => {
3437
return $("<p>Rendering</p>");
3538
});
36-
pattern.init($el);
39+
const instance = new Pattern($el);
40+
await events.await_pattern_init(instance);
41+
3742
expect($("#lab").html()).toBe("<p></p>");
3843
});
3944

40-
it("uses content for non-input elements", function () {
45+
it("uses content for non-input elements", async function () {
4146
var $el = $('<p class="pat-markdown"/>').text("This is markdown");
4247
$el.appendTo("#lab");
4348
const spy_render = jest
44-
.spyOn(pattern.prototype, "render")
49+
.spyOn(Pattern.prototype, "render")
4550
.mockImplementation(() => {
4651
return $("<p/>");
4752
});
48-
pattern.init($el);
53+
const instance = new Pattern($el);
54+
await events.await_pattern_init(instance);
55+
4956
expect(spy_render).toHaveBeenCalledWith("This is markdown");
5057
});
5158

52-
it("uses value for input elements", function () {
59+
it("uses value for input elements", async function () {
5360
var $el = $('<textarea class="pat-markdown"/>').val("This is markdown");
5461
$el.appendTo("#lab");
5562
const spy_render = jest
56-
.spyOn(pattern.prototype, "render")
63+
.spyOn(Pattern.prototype, "render")
5764
.mockImplementation(() => {
5865
return $("<p/>");
5966
});
60-
pattern.init($el);
67+
const instance = new Pattern($el);
68+
await events.await_pattern_init(instance);
69+
6170
expect(spy_render).toHaveBeenCalledWith("This is markdown");
6271
});
6372
});
6473

6574
describe("when rendering", function () {
6675
it("wraps rendering in a div", async function () {
67-
const $rendering = await pattern.prototype.render("*This is markdown*");
76+
const $rendering = await Pattern.prototype.render("*This is markdown*");
6877
expect($rendering[0].tagName).toBe("DIV");
6978
});
7079

7180
it("converts markdown into HTML", async function () {
72-
const $rendering = await pattern.prototype.render("*This is markdown*");
81+
const $rendering = await Pattern.prototype.render("*This is markdown*");
7382
expect($rendering.html()).toBe(`<p><em>This is markdown</em></p>\n`);
7483
});
7584
});
7685

7786
describe("Session extraction", function () {
7887
it("Unknown section", function () {
7988
expect(
80-
pattern.prototype.extractSection("## My title\n\nContent", "Other title")
89+
Pattern.prototype.extractSection("## My title\n\nContent", "Other title")
8190
).toBe(null);
8291
});
8392

8493
it("Last hash-section", function () {
8594
expect(
86-
pattern.prototype.extractSection("## My title\n\nContent", "My title")
95+
Pattern.prototype.extractSection("## My title\n\nContent", "My title")
8796
).toBe("## My title\n\nContent");
8897
});
8998

9099
it("Hash-section with following section at same level ", function () {
91100
expect(
92-
pattern.prototype.extractSection(
101+
Pattern.prototype.extractSection(
93102
"## My title\n\nContent\n## Next section\n",
94103
"My title"
95104
)
@@ -98,7 +107,7 @@ describe("pat-markdown", function () {
98107

99108
it("Hash-section with following section at lower level ", function () {
100109
expect(
101-
pattern.prototype.extractSection(
110+
Pattern.prototype.extractSection(
102111
"## My title\n\nContent\n### Next section\n",
103112
"My title"
104113
)
@@ -107,7 +116,7 @@ describe("pat-markdown", function () {
107116

108117
it("Double underscore section", function () {
109118
expect(
110-
pattern.prototype.extractSection(
119+
Pattern.prototype.extractSection(
111120
"My title\n=======\nContent",
112121
"My title"
113122
)
@@ -116,7 +125,7 @@ describe("pat-markdown", function () {
116125

117126
it("Double underscore section with following section at same level", function () {
118127
expect(
119-
pattern.prototype.extractSection(
128+
Pattern.prototype.extractSection(
120129
"My title\n=======\nContent\n\nNext\n====\n",
121130
"My title"
122131
)
@@ -125,7 +134,7 @@ describe("pat-markdown", function () {
125134

126135
it("Double underscore section with following section at lower level", function () {
127136
expect(
128-
pattern.prototype.extractSection(
137+
Pattern.prototype.extractSection(
129138
"My title\n=======\nContent\n\nNext\n----\n",
130139
"My title"
131140
)
@@ -134,7 +143,7 @@ describe("pat-markdown", function () {
134143

135144
it("Single underscore section", function () {
136145
expect(
137-
pattern.prototype.extractSection(
146+
Pattern.prototype.extractSection(
138147
"My title\n-------\nContent",
139148
"My title"
140149
)
@@ -143,7 +152,7 @@ describe("pat-markdown", function () {
143152

144153
it("Single underscore section with following section at same level", function () {
145154
expect(
146-
pattern.prototype.extractSection(
155+
Pattern.prototype.extractSection(
147156
"My title\n-------\nContent\n\nNext\n----\n",
148157
"My title"
149158
)
@@ -152,7 +161,7 @@ describe("pat-markdown", function () {
152161

153162
it("Single underscore section with following section at higher level", function () {
154163
expect(
155-
pattern.prototype.extractSection(
164+
Pattern.prototype.extractSection(
156165
"My title\n-------\nContent\n\nNext\n====\n",
157166
"My title"
158167
)
@@ -177,8 +186,8 @@ some content
177186
</main>
178187
`;
179188

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

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

0 commit comments

Comments
 (0)