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>
frappe · Sep 20, 2023 · c627113 · c627113
1 parent 5c2917a
commit c627113
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 0 deletions.
diff --git a/package.json b/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",

diff --git a/wiki/public/js/editor.js b/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;
+});
diff --git a/wiki/public/scss/edit_wiki.scss b/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;
+	  }
+	}
+  }
diff --git a/wiki/public/scss/wiki.scss b/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;

diff --git a/yarn.lock b/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"