feat: add support for tiptap task-item (#179)

* feat: add support for tiptap task-item

* fix: save state when task-item is updated in View mode

* fix: disable task-list checkbox in View mode

Issue ueberdosis/tiptap#3676 means changes in View mode will not be saved

* fix: mock tiptap edit mode for task-list

Will be made redundant once ueberdosis/tiptap#4044 is fixed

* style(task-item): minor style changes

* chore: format using prettier

---------

Co-authored-by: Bread Genie <msuhailbh07@gmail.com>

Author: Zyten

package.json

@@ -11,6 +11,8 @@
     "@tiptap/extension-table-cell": "^2.0.2",
     "@tiptap/extension-table-header": "^2.0.2",
     "@tiptap/extension-table-row": "^2.0.2",
+    "@tiptap/extension-task-item": "^2.0.2",
+    "@tiptap/extension-task-list": "^2.0.2",
     "@tiptap/extension-text-align": "^2.0.2",
     "@tiptap/pm": "^2.0.2",
     "@tiptap/starter-kit": "^2.0.2",

wiki/public/js/editor.js

@@ -11,6 +11,8 @@ import { Editor, InputRule } from "@tiptap/core";
 import Placeholder from "@tiptap/extension-placeholder";
 import TableHeader from "@tiptap/extension-table-header";
 import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
+import TaskItem from "@tiptap/extension-task-item";
+import TaskList from "@tiptap/extension-task-list";
 
 const CustomDocument = Document.extend({
   content: "heading block*",
@@ -47,6 +49,9 @@ const saveWikiPage = (draft = false) => {
   const isEmptyEditor = !!urlParams.get("newWiki");
 
   const title = $(`.wiki-editor .ProseMirror h1`).html();
+  // mock tiptap edit mode for task-list
+  // will be made redundant once editor.getHTML() is used to load content for saving
+  $('[data-type="taskList"] > li').attr("data-type", "taskItem");
   // markdown=1 tag is needed for older wiki content to properly render
   // TODO: use editor.getHTML() instead of this when ueberdosis/tiptap#4044 is fixed
   const content = `<div markdown="1">${$(".editor-space .ProseMirror")
@@ -110,6 +115,13 @@ const editor = new Editor({
     CodeBlockLowlight.configure({
       lowlight,
     }),
+    TaskList,
+    TaskItem.configure({
+      nested: true,
+      //Save state when task-item is updated in View mode
+      //TODO: Enable once ueberdosis/tiptap#3676 is fixed
+      //onReadOnlyChecked: () => true,
+    }),
   ],
   inputRules: [disableMarkdownShortcut("#", "#")],
   content: getContent(),
@@ -409,3 +421,10 @@ $(".edit-wiki-btn").on("click", () => {
   editor.commands.setContent(getContent());
   editor.commands.focus("start");
 });
+
+// TODO: Remove once ueberdosis/tiptap#3676 is fixed
+$("ul[data-type=taskList] input[type=checkbox]").click(function () {
+  const urlParams = new URLSearchParams(window.location.search);
+
+  if (!urlParams.get("newWiki") && !urlParams.get("editWiki")) return false;
+});

wiki/public/scss/edit_wiki.scss

@@ -487,6 +487,11 @@ $font-sizes-mobile: (
 	code {
 		padding: 0.75rem 1rem;
 	}
+
+	// tiptap task-list
+	ul[data-type="taskList"] p {
+		margin: 0 !important;
+	}
 }
 
 // button
@@ -501,3 +506,45 @@ $font-sizes-mobile: (
 	background-color: #0b5ed7;
 	border-color: #0a58ca;
 }
+
+// tiptap task-list
+ul[data-type="taskList"] {
+	list-style: none;
+	padding: 0;
+
+	p {
+	  margin: 0;
+	}
+
+	li {
+	  display: flex;
+
+	  > label {
+		flex: 0 0 auto;
+		margin-right: 0.25rem;
+		margin-bottom: 0;
+		user-select: none;
+	  }
+
+	  > div {
+		flex: 1 1 auto;
+	  }
+
+	  ul li,
+	  ol li {
+		  display: list-item;
+	  }
+
+	  ul[data-type="taskList"] > li {
+		  display: flex;
+	  }
+
+	  input {
+		color: #000;
+		margin: .1rem;
+		margin-top: 0.4rem;
+		border: 1.25px solid black;
+		accent-color: black;
+	  }
+	}
+  }

wiki/public/scss/wiki.scss

@@ -651,6 +651,10 @@ body.dark {
 		h2 {
 			margin-top: 2.5rem;
 		}
+
+		ul[data-type="taskList"] input {
+			margin-top: 0;
+		}
 	}
 	@include media-breakpoint-down(md) {
 		width: auto;

yarn.lock

@@ -181,6 +181,16 @@
   resolved "https://registry.yarnpkg.com/@tiptap/extension-table/-/extension-table-2.0.2.tgz#b6cf7c78643e18a38f01cf1e9beded76470da7d0"
   integrity sha512-0HUpCQ+roTZqgMDtKQfgq8Yjo5SSxUJc+lMVHqcdeW2UwPkwXfAPCZ0ojle8SyQgQjv6GTcVTssvzq7+HGpd0Q==
 
+"@tiptap/extension-task-item@^2.0.2":
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-task-item/-/extension-task-item-2.1.8.tgz#2036360be6702ab753cbc77b60ab24fb33ff20a6"
+  integrity sha512-PoY2PDiYEQC44qDQLubzDuhZ3f6OL7sui89960M1HUQR2URnPvToOBaa5veNY8VyACdAolm+LwTpseBKKkcpmw==
+
+"@tiptap/extension-task-list@^2.0.2":
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-task-list/-/extension-task-list-2.1.8.tgz#993c415d85d414039baf7379df7c3b19b1d342d9"
+  integrity sha512-PmEPJHTOgy0AveE6YoxY6w09+bh5OqkrMI/sluY88291cnSPPEf9sFWmBHOrONNj54Ti6ua37arudUY5mqxOCA==
+
 "@tiptap/extension-text-align@^2.0.2":
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-text-align/-/extension-text-align-2.0.2.tgz#1e688d9aa555e3d51b946a1e8e01d290b07c281a"