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:
Renato Atilio 2025-03-04 11:42:42 -03:00 committed by GitHub
parent ddcbffc8c6
commit 225f90b1c9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 77 additions and 0 deletions

View File

@ -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,
];

View File

@ -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;

View File

@ -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);
});
});
});
}
);