Enh #33: Implement em + strikethrough input rules

- Created em_strikethrough plugin. - Added em_strikethrough icon. - Changed toolbar svg-icons. - Changed Keyboard right arrow navigation and Keyboard left navigation tests.
humhub · Jun 8, 2023 · 571d815 · 571d815
1 parent 414d560
commit 571d815
Show file tree

Hide file tree

Showing 19 changed files with 184 additions and 128 deletions.
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -17,6 +17,7 @@ Changelog
 - Enh #91: Update JS dependencies
 - Fix #59: @ becomes @@ when copying mentioning in wiki editor
 - Enh #30: Tabulator Support
+- Enh #33: Implement em + strikethrough input rules
 
 
 1.1.3 (Unreleased)

diff --git a/src/editor/core/menu/icons.js b/src/editor/core/menu/icons.js
diff --git a/src/editor/core/plugins/code/index.js b/src/editor/core/plugins/code/index.js
@@ -2,10 +2,10 @@
  * @link https://www.humhub.org/
  * @copyright Copyright (c) 2017 HumHub GmbH & Co. KG
  * @license https://www.humhub.com/licences
- *
  */
-import {schema} from './schema'
-import {menu} from "./menu"
+
+import {schema} from './schema';
+import {menu} from "./menu";
 import {codeRules} from "./input-rules";
 
 const code = {

diff --git a/src/editor/core/plugins/code/menu.js b/src/editor/core/plugins/code/menu.js
@@ -2,17 +2,15 @@
  * @link https://www.humhub.org/
  * @copyright Copyright (c) 2017 HumHub GmbH & Co. KG
  * @license https://www.humhub.com/licences
- *
  */
 
 import {icons, markItem} from "../../menu/menu"
 
-
 function markCode(context) {
     return markItem(context.schema.marks.code, {
         title: context.translate("Toggle code font"),
         icon: icons.code,
-        sortOrder: 400
+        sortOrder: 500
     }, context);
 }
 
@@ -24,5 +22,5 @@ export function menu(context) {
             group: 'marks',
             item: markCode(context)
         }
-    ]
-}
+    ];
+}
diff --git a/src/editor/core/plugins/code/schema.js b/src/editor/core/plugins/code/schema.js
@@ -2,23 +2,21 @@
  * @link https://www.humhub.org/
  * @copyright Copyright (c) 2017 HumHub GmbH & Co. KG
  * @license https://www.humhub.com/licences
- *
  */
 
 const schema = {
     marks: {
         code:{
             isCode: true,
-            sortOrder: 400,
             preventMarks: ['link'],
             parseDOM: [{tag: "code"}],
             toDOM: () => {
                 return ["code"]
             },
-            parseMarkdown:  {code_inline: {mark: "code"}},
+            parseMarkdown: {code_inline: {mark: "code"}},
             toMarkdown: {open: "`", close: "`"}
         }
     }
 };
 
-export {schema}
+export {schema};
diff --git a/src/editor/core/plugins/em/index.js b/src/editor/core/plugins/em/index.js
@@ -2,10 +2,10 @@
  * @link https://www.humhub.org/
  * @copyright Copyright (c) 2017 HumHub GmbH & Co. KG
  * @license https://www.humhub.com/licences
- *
  */
-import {schema} from './schema'
-import {menu} from "./menu"
+
+import {schema} from './schema';
+import {menu} from "./menu";
 
 const em = {
     id: 'em',

diff --git a/src/editor/core/plugins/em/menu.js b/src/editor/core/plugins/em/menu.js
@@ -2,11 +2,9 @@
  * @link https://www.humhub.org/
  * @copyright Copyright (c) 2017 HumHub GmbH & Co. KG
  * @license https://www.humhub.com/licences
- *
  */
 
-import {icons, markItem} from "../../menu/menu"
-
+import {icons, markItem} from "../../menu/menu";
 
 function markEm(context) {
     return markItem(context.schema.marks.em, {
@@ -24,5 +22,5 @@ export function menu(context) {
             group: 'marks',
             item: markEm(context)
         }
-    ]
-}
+    ];
+}
diff --git a/src/editor/core/plugins/em/schema.js b/src/editor/core/plugins/em/schema.js
@@ -2,18 +2,16 @@
  * @link https://www.humhub.org/
  * @copyright Copyright (c) 2017 HumHub GmbH & Co. KG
  * @license https://www.humhub.com/licences
- *
  */
 
 const schema = {
     marks: {
         em: {
-            sortOrder: 100,
             parseDOM: [{tag: "i"}, {tag: "em"},
                 {
                     style: "font-style", getAttrs: function (value) {
-                    return value == "italic" && null;
-                }
+                        return value === "italic" && null;
+                    }
                 }],
             toDOM: () => {
                 return ["em"]
@@ -24,4 +22,4 @@ const schema = {
     }
 };
 
-export {schema}
+export {schema};
diff --git a/src/editor/core/plugins/em_strikethrough/index.js b/src/editor/core/plugins/em_strikethrough/index.js
@@ -0,0 +1,16 @@
+/*
+ * @link https://www.humhub.org/
+ * @copyright Copyright (c) 2017 HumHub GmbH & Co. KG
+ * @license https://www.humhub.com/licences
+ */
+
+import {schema} from './schema';
+import {menu} from "./menu";
+
+const em_strikethrough = {
+    id: 'em_strikethrough',
+    schema: schema,
+    menu: (context) => menu(context)
+};
+
+export default em_strikethrough;
diff --git a/src/editor/core/plugins/em_strikethrough/menu.js b/src/editor/core/plugins/em_strikethrough/menu.js
@@ -0,0 +1,26 @@
+/*
+ * @link https://www.humhub.org/
+ * @copyright Copyright (c) 2017 HumHub GmbH & Co. KG
+ * @license https://www.humhub.com/licences
+ */
+
+import {icons, markItem} from "../../menu/menu";
+
+function markEmStrikethrough(context) {
+    return markItem(context.schema.marks.em_strikethrough, {
+        title: context.translate("Toggle emphasis + strikethrough"),
+        icon: icons.em_strikethrough,
+        sortOrder: 400
+    }, context);
+}
+
+export function menu(context) {
+    return [
+        {
+            id: 'markEmStrikethrough',
+            mark: 'em_strikethrough',
+            group: 'marks',
+            item: markEmStrikethrough(context)
+        }
+    ];
+}
diff --git a/src/editor/core/plugins/em_strikethrough/schema.js b/src/editor/core/plugins/em_strikethrough/schema.js
@@ -0,0 +1,20 @@
+/*
+ * @link https://www.humhub.org/
+ * @copyright Copyright (c) 2017 HumHub GmbH & Co. KG
+ * @license https://www.humhub.com/licences
+ */
+
+const schema = {
+    marks: {
+        em_strikethrough: {
+            parseDOM: [{tag: "s[data-emphasis]"}],
+            toDOM: () => {
+                return ["s", {"data-emphasis": true, style: "font-style: italic"}];
+            },
+            parseMarkdown: {mark: "em_strikethrough"},
+            toMarkdown: {open: "_~~", close: "~~_", mixable: true, expelEnclosingWhitespace: true}
+        }
+    }
+};
+
+export {schema};
diff --git a/src/editor/core/plugins/index.js b/src/editor/core/plugins/index.js
@@ -41,6 +41,7 @@ import maxHeight from "./max_height";
 import save from "./save";
 import source from "./source";
 import tabBehavior from "./tab_behavior";
+import em_strikethrough from "./em_strikethrough";
 import {PluginRegistry} from "./registry";
 
 const registry = new PluginRegistry();
@@ -88,6 +89,7 @@ registerPlugin(maxHeight, 'markdown');
 registerPlugin(save, 'markdown');
 registerPlugin(source, 'markdown');
 registerPlugin(tabBehavior, 'markdown');
+registerPlugin(em_strikethrough, 'markdown');
 
 registerPreset('normal', {
     extend: 'markdown',

diff --git a/src/editor/core/plugins/link/menu.js b/src/editor/core/plugins/link/menu.js
@@ -15,7 +15,7 @@ function linkItem(context) {
     let mark = context.schema.marks.link;
     return new MenuItem({
         title: context.translate("Add or remove link"),
-        sortOrder: 500,
+        sortOrder: 600,
         icon: icons.link,
         active(state) {
             return markActive(state, mark)

diff --git a/src/editor/core/plugins/strikethrough/index.js b/src/editor/core/plugins/strikethrough/index.js
@@ -2,10 +2,10 @@
  * @link https://www.humhub.org/
  * @copyright Copyright (c) 2017 HumHub GmbH & Co. KG
  * @license https://www.humhub.com/licences
- *
  */
-import {schema} from './schema'
-import {menu} from "./menu"
+
+import {schema} from './schema';
+import {menu} from "./menu";
 
 const strikethrough = {
     id: 'strikethrough',

diff --git a/src/editor/core/plugins/strikethrough/menu.js b/src/editor/core/plugins/strikethrough/menu.js
@@ -2,12 +2,10 @@
  * @link https://www.humhub.org/
  * @copyright Copyright (c) 2017 HumHub GmbH & Co. KG
  * @license https://www.humhub.com/licences
- *
  */
 
 import {icons, markItem} from "../../menu/menu"
 
-
 function markStrikethrough(context) {
     return markItem(context.schema.marks.strikethrough, {
         title: context.translate("Toggle strikethrough"),
@@ -24,5 +22,5 @@ export function menu(context) {
             group: 'marks',
             item: markStrikethrough(context)
         }
-    ]
-}
+    ];
+}
diff --git a/src/editor/core/plugins/strikethrough/schema.js b/src/editor/core/plugins/strikethrough/schema.js
@@ -2,7 +2,6 @@
  * @link https://www.humhub.org/
  * @copyright Copyright (c) 2017 HumHub GmbH & Co. KG
  * @license https://www.humhub.com/licences
- *
  */
 
 const schema = {
@@ -18,4 +17,4 @@ const schema = {
     }
 };
 
-export {schema}
+export {schema};
diff --git a/src/editor/markdown/serializer.js b/src/editor/markdown/serializer.js
@@ -2,12 +2,10 @@
  * @link https://www.humhub.org/
  * @copyright Copyright (c) 2017 HumHub GmbH & Co. KG
  * @license https://www.humhub.com/licences
- *
  */
 
-import {MarkdownSerializer, MarkdownSerializerState} from "prosemirror-markdown"
-import {getPlugins, PresetManager} from "../core/plugins"
-import {Mark} from "prosemirror-model";
+import {MarkdownSerializer, MarkdownSerializerState} from "prosemirror-markdown";
+import {getPlugins, PresetManager} from "../core/plugins";
 
 let presets = new PresetManager({
     name: 'serializer',
@@ -33,17 +31,17 @@ let createSerializer = (context) => {
 
         for (let key in nodes) {
             let node = nodes[key];
-            if(node.toMarkdown) {
-                nodeSpec[key] = node.toMarkdown
+            if (node.toMarkdown) {
+                nodeSpec[key] = node.toMarkdown;
             }
         }
 
         let marks = plugin.schema.marks || {};
 
         for (let key in marks) {
             let mark = marks[key];
-            if(mark.toMarkdown) {
-                markSpec[key] = mark.toMarkdown
+            if (mark.toMarkdown) {
+                markSpec[key] = mark.toMarkdown;
             } else {
                 markSpec[key] = {open: '', close: ''};
             }
@@ -59,9 +57,9 @@ class HumHubMarkdownSerializer extends MarkdownSerializer {
     // [CommonMark](http://commonmark.org/).
     serialize(content, options) {
         let state = new HumHubMarkdownSerializerState(
-          this.nodes,
-          this.marks,
-          {...options, tightLists: false}
+            this.nodes,
+            this.marks,
+            {...options, tightLists: false}
         );
         state.renderContent(content);
         return state.out;
@@ -75,9 +73,9 @@ class HumHubMarkdownSerializerState extends MarkdownSerializerState {
     // has special meaning only at the start of the line.
     esc(str, startOfLine) {
         // eslint-disable-next-line
-        str = str.replace(/[|`*\\~\[\]]/g, "\\$&")
-        if (startOfLine) str = str.replace(/^[:#\-*+]/, "\\$&").replace(/^(\d+)\./, "$1\\.")
-        return str
+        str = str.replace(/[|`*\\~\[\]]/g, "\\$&");
+        if (startOfLine) str = str.replace(/^[:#*+-]/, "\\$&").replace(/^(\d+)\./, "$1\\.");
+        return str;
     }
 }
 

diff --git a/test/editor.css b/test/editor.css
@@ -659,7 +659,9 @@ ProsemirrorEditor img {
 }
 
 .ProseMirror-menu-dropdown-item div[title],
+.ProseMirror-menu-dropdown-item a.ProseMirror-menu-trigger,
 .ProseMirror-menu-submenu-wrap {
+    display: block;
     padding: 4px;
 }
 

diff --git a/test/menu/test-menu-accessibility.js b/test/menu/test-menu-accessibility.js
@@ -57,6 +57,7 @@ describe("Menu:accessibility", () => {
         navigate(DIR_RIGHT, 'markStrong');
         navigate(DIR_RIGHT, 'markEm');
         navigate(DIR_RIGHT, 'markStrikethrough');
+        navigate(DIR_RIGHT, 'markEmStrikethrough');
         navigate(DIR_RIGHT, 'markCode');
         navigate(DIR_RIGHT, 'linkItem');
         navigate(DIR_RIGHT, 'insertEmoji');
@@ -75,6 +76,7 @@ describe("Menu:accessibility", () => {
         navigate(DIR_LEFT, 'insertEmoji');
         navigate(DIR_LEFT, 'linkItem');
         navigate(DIR_LEFT, 'markCode');
+        navigate(DIR_LEFT, 'markEmStrikethrough');
         navigate(DIR_LEFT, 'markStrikethrough');
         navigate(DIR_LEFT, 'markEm');
         navigate(DIR_LEFT, 'markStrong');