mirror of
https://github.com/discourse/discourse.git
synced 2025-04-26 03:04:37 +08:00
FEATURE: add strikethrough rich editor extension (#31152)
Continues the work done on https://github.com/discourse/discourse/pull/30815. Adds a `strikethrough` mark, its Markdown serializing/parsing logic, and a `~~text~~` input rule.
This commit is contained in:
parent
ddcbffc8c6
commit
225f90b1c9
@ -6,6 +6,7 @@ import image from "./image";
|
||||
import link from "./link";
|
||||
import mention from "./mention";
|
||||
import quote from "./quote";
|
||||
import strikethrough from "./strikethrough";
|
||||
import underline from "./underline";
|
||||
|
||||
/**
|
||||
@ -22,6 +23,7 @@ const defaultExtensions = [
|
||||
quote,
|
||||
hashtag,
|
||||
mention,
|
||||
strikethrough,
|
||||
underline,
|
||||
];
|
||||
|
||||
|
@ -0,0 +1,36 @@
|
||||
/** @type {RichEditorExtension} */
|
||||
const extension = {
|
||||
markSpec: {
|
||||
strikethrough: {
|
||||
before: "link",
|
||||
parseDOM: [
|
||||
{ tag: "s" },
|
||||
{ tag: "del" },
|
||||
{
|
||||
getAttrs: (value) =>
|
||||
/(^|[\s])line-through([\s]|$)/u.test(value) && null,
|
||||
style: "text-decoration",
|
||||
},
|
||||
],
|
||||
toDOM() {
|
||||
return ["s"];
|
||||
},
|
||||
},
|
||||
},
|
||||
inputRules: ({ schema, markInputRule }) =>
|
||||
markInputRule(/~~([^~]+)~~$/, schema.marks.strikethrough),
|
||||
parse: {
|
||||
s: { mark: "strikethrough" },
|
||||
bbcode_s: { mark: "strikethrough" },
|
||||
},
|
||||
serializeMark: {
|
||||
strikethrough: {
|
||||
open: "~~",
|
||||
close: "~~",
|
||||
mixable: true,
|
||||
expelEnclosingWhitespace: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default extension;
|
@ -0,0 +1,39 @@
|
||||
import { module, test } from "qunit";
|
||||
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
|
||||
import { testMarkdown } from "discourse/tests/helpers/rich-editor-helper";
|
||||
|
||||
module(
|
||||
"Integration | Component | prosemirror-editor - strikethrough extension",
|
||||
function (hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
const testCases = {
|
||||
strikethrough: [
|
||||
["[s]Hello[/s]", "<p><s>Hello</s></p>", "~~Hello~~"],
|
||||
["~~Hello~~", "<p><s>Hello</s></p>", "~~Hello~~"],
|
||||
[
|
||||
"Hey [s]wrod[/s] ~~uord~~ World",
|
||||
"<p>Hey <s>wrod</s> <s>uord</s> World</p>",
|
||||
"Hey ~~wrod~~ ~~uord~~ World",
|
||||
],
|
||||
],
|
||||
"with other marks": [
|
||||
[
|
||||
"___[s][`Hello`](https://example.com)[/s]___",
|
||||
'<p><em><strong><s><a href="https://example.com"><code>Hello</code></a></s></strong></em></p>',
|
||||
"***~~[`Hello`](https://example.com)~~***",
|
||||
],
|
||||
],
|
||||
};
|
||||
|
||||
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);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
);
|
Loading…
x
Reference in New Issue
Block a user