feat(rich-text-editor): Add tagLink, subscript, superscript, kbd, and spoiler input

src/rich-text/commands/index.ts

@@ -421,6 +421,43 @@ const headingDropdown = (schema: Schema) =>
         )
     );
 
+const overflowDropdown = (schema: Schema, options: CommonViewOptions) =>
+    makeMenuDropdown(
+        "Overflow",
+        _t("commands.overflow"),
+        "overflow-dropdown",
+        () => true,
+        () => false,
+        dropdownItem(
+            _t("commands.tag", { shortcut: getShortcut("Mod-[") }),
+            toggleTagCommand(options.parserFeatures.tagLinks.allowNonAscii),
+            "tag-btn",
+            nodeTypeActive(schema.nodes.tagLink),
+            ["fs-body1", "mt8"]
+        ),
+        dropdownItem(
+            _t("commands.spoiler", { shortcut: getShortcut("Mod-]") }),
+            toggleWrapIn(schema.nodes.spoiler),
+            "spoiler-btn",
+            nodeTypeActive(schema.nodes.spoiler),
+            ["fs-body1", "mt8"]
+        ),
+        dropdownItem(
+            _t("commands.sub", { shortcut: getShortcut("Mod-;") }),
+            toggleMark(schema.marks.sub),
+            "subscript-btn",
+            markActive(schema.marks.sub),
+            ["fs-body1", "mt8"]
+        ),
+        dropdownItem(
+            _t("commands.sup", { shortcut: getShortcut("Mod-:") }),
+            toggleMark(schema.marks.sup),
+            "superscript-btn",
+            markActive(schema.marks.sup),
+            ["fs-body1", "mt8"]
+        )
+    );
+
 // TODO ensure that all names and priorities match those found in the rich-text editor
 /**
  * Creates all menu entries for the commonmark editor
@@ -552,6 +589,7 @@ export const createMenuEntries = (
                 options.parserFeatures.tables
             ),
             addIf(tableDropdown(), options.parserFeatures.tables),
+            overflowDropdown(schema, options),
         ],
     },
     {

src/rich-text/key-bindings.ts

@@ -29,6 +29,7 @@ import {
     insertTableCommand,
     exitInclusiveMarkCommand,
     toggleHeadingLevel,
+    toggleTagCommand,
 } from "./commands";
 
 export function allKeymaps(
@@ -70,6 +71,14 @@ export function allKeymaps(
         ...bindLetterKeymap("Mod-h", toggleHeadingLevel()),
         ...bindLetterKeymap("Mod-r", insertHorizontalRuleCommand),
         ...bindLetterKeymap("Mod-m", setBlockType(schema.nodes.code_block)),
+        ...bindLetterKeymap(
+            "Mod-[",
+            toggleTagCommand(parserFeatures.tagLinks.allowNonAscii)
+        ),
+        ...bindLetterKeymap("Mod-]", wrapIn(schema.nodes.spoiler)),
+        ...bindLetterKeymap("Mod-;", toggleMark(schema.marks.sub)),
+        ...bindLetterKeymap("Mod-:", toggleMark(schema.marks.sup)),
+
         // users expect to be able to leave certain blocks/marks using the arrow keys
         "ArrowRight": exitInclusiveMarkCommand,
         "ArrowDown": exitCode,

src/shared/localization.ts

@@ -19,6 +19,7 @@ export const defaultStrings = {
         bold: shortcut("Bold"),
         code_block: shortcut("Code block"),
         emphasis: shortcut("Italic"),
+        overflow: "Overflow",
         heading: {
             dropdown: shortcut("Heading"),
             entry: ({ level }: { level: number }) => `Heading ${level}`,
@@ -30,6 +31,9 @@ export const defaultStrings = {
         link: shortcut("Link"),
         ordered_list: shortcut("Numbered list"),
         redo: shortcut("Redo"),
+        spoiler: shortcut("Spoiler"),
+        sub: shortcut("Subscript"),
+        sup: shortcut("Superscript"),
         strikethrough: "Strikethrough",
         table_edit: "Edit table",
         table_insert: shortcut("Table"),
@@ -43,6 +47,7 @@ export const defaultStrings = {
             insert_before: "Insert row before",
             remove: "Remove row",
         },
+        tag: shortcut("Create Tag"),
         undo: shortcut("Undo"),
         unordered_list: shortcut("Bulleted list"),
     },

src/shared/utils.ts

@@ -1,5 +1,6 @@
 import { escapeHtml } from "markdown-it/lib/common/utils";
 import { Command, EditorState } from "prosemirror-state";
+import type { TagLinkOptions } from "./view";
 
 /**
  * Recursively deep merges two objects into a new object, leaving the original two untouched
@@ -306,3 +307,24 @@ export function bindLetterKeymap(
         [prefix + letter.toUpperCase()]: command,
     };
 }
+
+/**
+ * Tests whether a string is a valid tag name.
+ * @param input The string to test
+ * @param options TagLink configuration options
+ */
+export function validateTagName(
+    tagName: string,
+    allowNonAscii: boolean
+): boolean {
+    const validationRegex = allowNonAscii
+        ? /([a-z0-9\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF#+.-]+)/i
+        : /([a-z0-9#+.-]+)/i;
+
+    // test above regex as well as for any whitespace
+    if (/\s/.test(tagName) || !validationRegex.exec(tagName)) {
+        return false;
+    }
+
+    return true;
+}

src/styles/icons.less

@@ -107,3 +107,11 @@
     width: 21px;
     --bg-icon: url("~@stackoverflow/stacks-icons/src/Icon/Markdown.svg");
 }
+
+.icon-bg.iconTag {
+    --bg-icon: url("~@stackoverflow/stacks-icons/src/Icon/Tag.svg");
+}
+
+.icon-bg.iconOverflow {
+    --bg-icon: url("~@stackoverflow/stacks-icons/src/Icon/EllipsisHorizontal.svg");
+}

test/rich-text/commands/index.test.ts

@@ -3,6 +3,8 @@ import {
     exitInclusiveMarkCommand,
     insertHorizontalRuleCommand,
     toggleHeadingLevel,
+    toggleTagCommand,
+    toggleWrapIn,
 } from "../../../src/rich-text/commands";
 import {
     applySelection,
@@ -390,6 +392,126 @@ describe("commands", () => {
         });
     });
 
+    describe("toggleTagCommand", () => {
+        it("should not insert with no text selected", () => {
+            const state = createState("", []);
+
+            const { newState, isValid } = executeTransaction(
+                state,
+                toggleTagCommand(true)
+            );
+
+            expect(isValid).toBeFalsy();
+            let containsTagLink = false;
+
+            newState.doc.nodesBetween(0, newState.doc.content.size, (node) => {
+                containsTagLink = node.type.name === "tagLink";
+
+                return !containsTagLink;
+            });
+
+            expect(containsTagLink).toBeFalsy();
+        });
+
+        it("should not insert with whitespace in tag name", () => {
+            let state = createState("tag with spaces", []);
+
+            state = applySelection(state, 0, 16); //"is"
+
+            const { newState, isValid } = executeTransaction(
+                state,
+                toggleTagCommand(true)
+            );
+
+            expect(isValid).toBeFalsy();
+            let containsTagLink = false;
+
+            newState.doc.nodesBetween(0, newState.doc.content.size, (node) => {
+                containsTagLink = node.type.name === "tagLink";
+
+                return !containsTagLink;
+            });
+
+            expect(containsTagLink).toBeFalsy();
+        });
+
+        it("should replace selected text with tagLink", () => {
+            let state = createState("this is my state", []);
+
+            state = applySelection(state, 5, 7); //"is"
+
+            const { newState, isValid } = executeTransaction(
+                state,
+                toggleTagCommand(true)
+            );
+
+            expect(isValid).toBeTruthy();
+
+            expect(newState.doc).toMatchNodeTree({
+                "type.name": "doc",
+                "content": [
+                    {
+                        "type.name": "paragraph",
+                        "content": [
+                            {
+                                isText: true,
+                                text: "this ",
+                            },
+                            {
+                                "type.name": "tagLink",
+                            },
+                            {
+                                isText: true,
+                                text: " my state",
+                            },
+                        ],
+                    },
+                ],
+            });
+        });
+    });
+
+    describe("wrapInCommand", () => {
+        it.each([
+            [createState("", []).schema.nodes.spoiler, "spoiler"],
+            [createState("", []).schema.nodes.blockquote, "blockquote"],
+        ])(
+            "should wrap selected node with nodeType",
+            (nodeType, nodeTypeText) => {
+                let state = createState("asdf", []);
+
+                state = applySelection(state, 0, 4);
+
+                const { newState, isValid } = executeTransaction(
+                    state,
+                    toggleWrapIn(nodeType)
+                );
+
+                expect(isValid).toBeTruthy();
+
+                expect(newState.doc).toMatchNodeTree({
+                    "type.name": "doc",
+                    "content": [
+                        {
+                            "type.name": nodeTypeText,
+                            "content": [
+                                {
+                                    "type.name": "paragraph",
+                                    "content": [
+                                        {
+                                            isText: true,
+                                            text: "asdf",
+                                        },
+                                    ],
+                                },
+                            ],
+                        },
+                    ],
+                });
+            }
+        );
+    });
+
     describe("exitMarkCommand", () => {
         it("all exitable marks should also be inclusive: true", () => {
             Object.keys(testRichTextSchema.marks).forEach((markName) => {
@@ -412,6 +534,8 @@ describe("commands", () => {
         it.each([
             [`middle of some text`, false],
             [`<em>cannot exit emphasis from anywhere</em>`, true],
+            [`<sup>cannot exit emphasis from anywhere</sup>`, true],
+            [`<sub>cannot exit emphasis from anywhere</sub>`, true],
             [`<code>cannot exit code from middle</code>`, false],
         ])("should not exit unexitable marks", (input, positionCursorAtEnd) => {
             let state = createState(input, []);