diff --git a/package.json b/package.json index 4b9f0970..d3f2ecba 100644 --- 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 index a229de5e..e820041c 100644 --- 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 = `
${$(".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 index 217ed3aa..cff26d8e 100644 --- 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; + } + } + } \ No newline at end of file diff --git a/wiki/public/scss/wiki.scss b/wiki/public/scss/wiki.scss index b9a661c5..a78dcc77 100644 --- 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 index e731a8ea..e9bd84c3 100644 --- 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"