diff --git a/.gitignore b/.gitignore index 26df8213..a36974da 100644 --- a/.gitignore +++ b/.gitignore @@ -13,3 +13,4 @@ wiki/public/node_modules .cypress-coverage cypress/screenshots cypress/videos +__pycache__/ diff --git a/cypress/e2e/wiki.cy.js b/cypress/e2e/wiki.cy.js index 7fd782ab..c4c6b8fe 100644 --- a/cypress/e2e/wiki.cy.js +++ b/cypress/e2e/wiki.cy.js @@ -7,7 +7,7 @@ context("Wiki", () => { it("creates a new wiki page", () => { cy.get(".edit-wiki-btn .icon").click(); cy.get(".doc-sidebar .sidebar-group:first-child .add-sidebar-page").click(); - cy.get(".new-wiki-editor .ProseMirror") + cy.get(".wiki-editor .ProseMirror") .clear() .type("Test Wiki Page{enter}New Wiki Page"); cy.get('.btn:contains("Save"):visible').click(); diff --git a/cypress/e2e/wiki_sidebar.cy.js b/cypress/e2e/wiki_sidebar.cy.js index 0450ec8d..26bf4e94 100644 --- a/cypress/e2e/wiki_sidebar.cy.js +++ b/cypress/e2e/wiki_sidebar.cy.js @@ -15,7 +15,7 @@ context("Wiki Sidebar", () => { cy.contains("Submit").click(); cy.get(".doc-sidebar .sidebar-group:last-child .add-sidebar-page").click(); - cy.get(".new-wiki-editor .ProseMirror") + cy.get(".wiki-editor .ProseMirror") .clear() .type("Test Wiki Page{enter}New Wiki Page"); cy.get('.btn:contains("Save"):visible').click(); diff --git a/package.json b/package.json index fdf7aa87..eaf3e628 100644 --- a/package.json +++ b/package.json @@ -4,22 +4,22 @@ "@cypress/code-coverage": "^3", "@testing-library/cypress": "^8", "@testing-library/dom": "8.17.1", - "@tiptap/extension-code-block-lowlight": "^2.0.0-beta.220", - "@tiptap/extension-document": "^2.0.0-beta.218", - "@tiptap/extension-image": "^2.0.0-beta.218", - "@tiptap/extension-link": "^2.0.0-beta.218", - "@tiptap/extension-placeholder": "^2.0.0-beta.218", - "@tiptap/extension-table": "^2.0.0-beta.218", - "@tiptap/extension-table-cell": "^2.0.0-beta.218", - "@tiptap/extension-table-header": "^2.0.0-beta.218", - "@tiptap/extension-table-row": "^2.0.0-beta.218", - "@tiptap/extension-text-align": "^2.0.0-beta.218", - "@tiptap/pm": "^2.0.0-beta.218", - "@tiptap/starter-kit": "^2.0.0-beta.218", - "@tiptap/vue-3": "^2.0.0-beta.218", + "@tiptap/core": "^2.0.2", + "@tiptap/extension-code-block": "^2.0.2", + "@tiptap/extension-code-block-lowlight": "^2.0.2", + "@tiptap/extension-document": "^2.0.2", + "@tiptap/extension-image": "^2.0.2", + "@tiptap/extension-link": "^2.0.2", + "@tiptap/extension-placeholder": "^2.0.2", + "@tiptap/extension-table": "^2.0.2", + "@tiptap/extension-table-cell": "^2.0.2", + "@tiptap/extension-table-header": "^2.0.2", + "@tiptap/extension-table-row": "^2.0.2", + "@tiptap/extension-text-align": "^2.0.2", + "@tiptap/pm": "^2.0.2", + "@tiptap/starter-kit": "^2.0.2", "cypress-real-events": "^1.7.6", - "lowlight": "^2.8.1", - "vue": "^3.2.47" + "lowlight": "^2.8.1" }, "devDependencies": { "cypress": "11" diff --git a/wiki/public/js/Tiptap.vue b/wiki/public/js/Tiptap.vue deleted file mode 100644 index efbd6856..00000000 --- a/wiki/public/js/Tiptap.vue +++ /dev/null @@ -1,344 +0,0 @@ - - - - - diff --git a/wiki/public/js/editor.js b/wiki/public/js/editor.js new file mode 100644 index 00000000..cbb37a8e --- /dev/null +++ b/wiki/public/js/editor.js @@ -0,0 +1,343 @@ +import { lowlight } from "lowlight"; +import Link from "@tiptap/extension-link"; +import Image from "@tiptap/extension-image"; +import Table from "@tiptap/extension-table"; +import StarterKit from "@tiptap/starter-kit"; +import Document from "@tiptap/extension-document"; +import TableRow from "@tiptap/extension-table-row"; +import TextAlign from "@tiptap/extension-text-align"; +import TableCell from "@tiptap/extension-table-cell"; +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"; + +const CustomDocument = Document.extend({ + content: "heading block*", +}); + +const disableMarkdownShortcut = (markdownShortcut, originalChar) => { + return new InputRule( + new RegExp(`(^|[\\s])${markdownShortcut}(?![\\w])`, "g"), + (state, match, start, end) => { + const text = state.doc.textBetween(start, end); + if (text === markdownShortcut) { + return originalChar; + } + return null; + }, + ); +}; + +const getContent = () => { + const urlParams = new URLSearchParams(window.location.search); + const isEmptyEditor = !!urlParams.get("newWiki"); + + if (patchNewCode !== "

{{ patch_new_title }}

{{ patch_new_code }}") + return patchNewCode; + else if (!isEmptyEditor) + return $(".from-markdown") + .html() + .replaceAll(/
/g, ""); + return "

"; +}; + +const saveWikiPage = (draft = false) => { + const urlParams = new URLSearchParams(window.location.search); + const isEmptyEditor = !!urlParams.get("newWiki"); + + const title = $(`.wiki-editor .ProseMirror h1`).html(); + // markdown=1 tag is needed for older wiki content to properly render + const content = `
${$(`.wiki-editor .ProseMirror`) + .html() + .replace(/

.*?<\/h1>/, "")}

`; + + frappe.call({ + method: "wiki.wiki.doctype.wiki_page.wiki_page.update", + args: { + name: $('[name="wiki-page-name"]').val(), + message: `${isEmptyEditor ? "Created" : "Edited"} ${title}`, + content, + new: isEmptyEditor, + new_sidebar_items: isEmptyEditor ? getSidebarItems() : "", + title, + draft, + new_sidebar_group: isEmptyEditor ? urlParams.get("newWiki") : "", + wiki_page_patch: urlParams.get("wikiPagePatch"), + }, + callback: (r) => { + // route back to the main page + window.location.href = "/" + r.message.route; + }, + freeze: true, + }); +}; + +const editor = new Editor({ + element: document.querySelector(".wiki-editor .editor-space"), + extensions: [ + CustomDocument, + StarterKit.configure({ + document: false, + codeBlock: false, + }), + Placeholder.configure({ + placeholder: ({ node }) => { + if (node.type.name === "heading" && node.attrs.level === 1) + return "What’s the Wiki title?"; + }, + }), + Link.configure({ + openOnClick: false, + }), + Image.configure({ + allowBase64: true, + inline: true, + }), + Table, + TableRow, + TableHeader, + TableCell, + TextAlign.configure({ + types: ["heading", "paragraph"], + }), + CodeBlockLowlight.configure({ + lowlight, + }), + ], + inputRules: [disableMarkdownShortcut("#", "#")], + content: getContent(), +}); + +const buttons = { + h2: document.querySelector('[data-tiptap-button="h2"]'), + h3: document.querySelector('[data-tiptap-button="h3"]'), + h4: document.querySelector('[data-tiptap-button="h4"]'), + h5: document.querySelector('[data-tiptap-button="h5"]'), + h6: document.querySelector('[data-tiptap-button="h6"]'), + bold: document.querySelector('[data-tiptap-button="bold"]'), + italic: document.querySelector('[data-tiptap-button="italic"]'), + bulletList: document.querySelector('[data-tiptap-button="bulletList"]'), + orderedList: document.querySelector('[data-tiptap-button="orderedList"]'), + alignLeft: document.querySelector('[data-tiptap-button="alignLeft"]'), + alignCenter: document.querySelector('[data-tiptap-button="alignCenter"]'), + alignRight: document.querySelector('[data-tiptap-button="alignRight"]'), + image: document.querySelector('[data-tiptap-button="image"]'), + link: document.querySelector('[data-tiptap-button="link"]'), + blockquote: document.querySelector('[data-tiptap-button="blockquote"]'), + codeBlock: document.querySelector('[data-tiptap-button="codeBlock"]'), + horizontalRule: document.querySelector( + '[data-tiptap-button="horizontalRule"]', + ), + insertTable: document.querySelector('[data-tiptap-button="insertTable"]'), + addColumnBefore: document.querySelector( + '[data-tiptap-button="addColumnBefore"]', + ), + addColumnAfter: document.querySelector( + '[data-tiptap-button="addColumnAfter"]', + ), + deleteColumn: document.querySelector('[data-tiptap-button="deleteColumn"]'), + addRowBefore: document.querySelector('[data-tiptap-button="addRowBefore"]'), + addRowAfter: document.querySelector('[data-tiptap-button="addRowAfter"]'), + deleteRow: document.querySelector('[data-tiptap-button="deleteRow"]'), + toggleHeaderColumn: document.querySelector( + '[data-tiptap-button="toggleHeaderColumn"]', + ), + toggleHeaderRow: document.querySelector( + '[data-tiptap-button="toggleHeaderRow"]', + ), + toggleHeaderCell: document.querySelector( + '[data-tiptap-button="toggleHeaderCell"]', + ), + deleteTable: document.querySelector('[data-tiptap-button="deleteTable"]'), + saveWikiPage: document.querySelector('[data-tiptap-button="saveWikiPage"]'), + draftWikiPage: document.querySelector('[data-tiptap-button="draftWikiPage"]'), +}; + +const setButtonActive = (button, mark) => { + if (editor.isActive(mark)) { + button.classList.add("active"); + } else { + button.classList.remove("active"); + } +}; + +buttons.h2.addEventListener("click", () => { + editor.chain().focus().toggleHeading({ level: 2 }).run(); +}); + +buttons.h3.addEventListener("click", () => { + editor.chain().focus().toggleHeading({ level: 3 }).run(); +}); + +buttons.h4.addEventListener("click", () => { + editor.chain().focus().toggleHeading({ level: 4 }).run(); +}); + +buttons.h5.addEventListener("click", () => { + editor.chain().focus().toggleHeading({ level: 5 }).run(); +}); + +buttons.h6.addEventListener("click", () => { + editor.chain().focus().toggleHeading({ level: 6 }).run(); +}); + +buttons.bold.addEventListener("click", () => { + editor.chain().focus().toggleBold().run(); + setButtonActive(buttons.bold, "bold"); +}); + +buttons.italic.addEventListener("click", () => { + editor.chain().focus().toggleItalic().run(); + setButtonActive(buttons.italic, "italic"); +}); + +buttons.bulletList.addEventListener("click", () => { + editor.chain().focus().toggleBulletList().run(); + setButtonActive(buttons.bulletList, "bulletList"); +}); + +buttons.orderedList.addEventListener("click", () => { + editor.chain().focus().toggleOrderedList().run(); + setButtonActive(buttons.orderedList, "orderedList"); +}); + +buttons.alignLeft.addEventListener("click", () => { + editor.chain().focus().setTextAlign("left").run(); + setButtonActive(buttons.alignLeft, { textAlign: "left" }); +}); + +buttons.alignCenter.addEventListener("click", () => { + editor.chain().focus().setTextAlign("center").run(); + setButtonActive(buttons.alignCenter, { textAlign: "center" }); +}); + +buttons.alignRight.addEventListener("click", () => { + editor.chain().focus().setTextAlign("right").run(); + setButtonActive(buttons.alignRight, { textAlign: "right" }); +}); + +buttons.image.addEventListener("click", () => { + const input = document.createElement("input"); + input.type = "file"; + + input.onchange = (e) => { + const file = e.target.files[0]; + const reader = new FileReader(); + reader.readAsDataURL(file); + + reader.onload = (readerEvent) => { + const content = readerEvent.target.result; + if (content) { + editor.chain().focus().setImage({ src: content }).run(); + } + }; + }; + input.click(); + setButtonActive(buttons.image, "image"); +}); + +buttons.link.addEventListener("click", () => { + $("#linkModal").modal(); + const link = $("#linkModal #link").val(); + if (link === null) return; + + // empty + if (link === "") { + editor.chain().focus().extendMarkRange("link").unsetLink().run(); + return; + } + + // update link + editor.chain().focus().extendMarkRange("link").setLink({ href: link }).run(); + + setButtonActive(buttons.link, "link"); +}); + +buttons.blockquote.addEventListener("click", () => { + editor.chain().focus().toggleBlockquote().run(); + setButtonActive(buttons.blockquote, "blockquote"); +}); + +buttons.codeBlock.addEventListener("click", () => { + editor.chain().focus().toggleCodeBlock().run(); + setButtonActive(buttons.codeBlock, "codeBlock"); +}); + +buttons.horizontalRule.addEventListener("click", () => { + editor.chain().focus().setHorizontalRule().run(); +}); + +buttons.insertTable.addEventListener("click", () => { + editor + .chain() + .focus() + .insertTable({ rows: 3, cols: 3, withHeaderRow: true }) + .run(); +}); + +buttons.addColumnBefore.addEventListener("click", () => { + editor.chain().focus().addColumnBefore().run(); +}); + +buttons.addColumnAfter.addEventListener("click", () => { + editor.chain().focus().addColumnAfter().run(); +}); + +buttons.deleteColumn.addEventListener("click", () => { + editor.chain().focus().deleteColumn().run(); +}); + +buttons.addRowBefore.addEventListener("click", () => { + editor.chain().focus().addRowBefore().run(); +}); + +buttons.addRowAfter.addEventListener("click", () => { + editor.chain().focus().addRowAfter().run(); +}); + +buttons.deleteRow.addEventListener("click", () => { + editor.chain().focus().deleteRow().run(); +}); + +buttons.toggleHeaderColumn.addEventListener("click", () => { + editor.chain().focus().toggleHeaderColumn().run(); +}); + +buttons.toggleHeaderRow.addEventListener("click", () => { + editor.chain().focus().toggleHeaderRow().run(); +}); + +buttons.toggleHeaderCell.addEventListener("click", () => { + editor.chain().focus().toggleHeaderCell().run(); +}); + +buttons.deleteTable.addEventListener("click", () => { + editor.chain().focus().deleteTable().run(); +}); + +buttons.saveWikiPage.addEventListener("click", () => { + saveWikiPage(); +}); + +buttons.draftWikiPage.addEventListener("click", () => { + saveWikiPage((draft = true)); +}); + +$(".add-sidebar-page").on("click", () => { + const urlParams = new URLSearchParams(window.location.search); + const isEmptyEditor = !!urlParams.get("newWiki"); + if ($(".editor-space").is(":visible") || isEmptyEditor) { + $(".discard-edit-btn").attr("data-new", true); + if (patchNewCode !== "

{{ patch_new_title }}

{{ patch_new_code }}") + editor.commands.setContent(patchNewCode); + else editor.commands.setContent("

"); + } else $(".discard-edit-btn").attr("data-new", false); + + editor.commands.focus("start"); +}); + +$(".edit-wiki-btn").on("click", () => { + editor.commands.setContent(getContent()); + editor.commands.focus("start"); +}); diff --git a/wiki/public/js/icons/align-center.vue b/wiki/public/js/icons/align-center.vue deleted file mode 100644 index d16f5ccd..00000000 --- a/wiki/public/js/icons/align-center.vue +++ /dev/null @@ -1,14 +0,0 @@ - diff --git a/wiki/public/js/icons/align-left.vue b/wiki/public/js/icons/align-left.vue deleted file mode 100644 index 2784a97a..00000000 --- a/wiki/public/js/icons/align-left.vue +++ /dev/null @@ -1,14 +0,0 @@ - diff --git a/wiki/public/js/icons/align-right.vue b/wiki/public/js/icons/align-right.vue deleted file mode 100644 index 25d1f75b..00000000 --- a/wiki/public/js/icons/align-right.vue +++ /dev/null @@ -1,14 +0,0 @@ - diff --git a/wiki/public/js/icons/bold.vue b/wiki/public/js/icons/bold.vue deleted file mode 100644 index c33bfabe..00000000 --- a/wiki/public/js/icons/bold.vue +++ /dev/null @@ -1,14 +0,0 @@ - diff --git a/wiki/public/js/icons/code-view.vue b/wiki/public/js/icons/code-view.vue deleted file mode 100644 index 2d9f54fb..00000000 --- a/wiki/public/js/icons/code-view.vue +++ /dev/null @@ -1,14 +0,0 @@ - diff --git a/wiki/public/js/icons/double-quotes-r.vue b/wiki/public/js/icons/double-quotes-r.vue deleted file mode 100644 index 2b60b137..00000000 --- a/wiki/public/js/icons/double-quotes-r.vue +++ /dev/null @@ -1,14 +0,0 @@ - diff --git a/wiki/public/js/icons/h-2.vue b/wiki/public/js/icons/h-2.vue deleted file mode 100644 index 5d49aa12..00000000 --- a/wiki/public/js/icons/h-2.vue +++ /dev/null @@ -1,14 +0,0 @@ - diff --git a/wiki/public/js/icons/image-add-line.vue b/wiki/public/js/icons/image-add-line.vue deleted file mode 100644 index 642881a1..00000000 --- a/wiki/public/js/icons/image-add-line.vue +++ /dev/null @@ -1,14 +0,0 @@ - diff --git a/wiki/public/js/icons/italic.vue b/wiki/public/js/icons/italic.vue deleted file mode 100644 index 8253ed1c..00000000 --- a/wiki/public/js/icons/italic.vue +++ /dev/null @@ -1,14 +0,0 @@ - diff --git a/wiki/public/js/icons/link.vue b/wiki/public/js/icons/link.vue deleted file mode 100644 index 8ab4f8dd..00000000 --- a/wiki/public/js/icons/link.vue +++ /dev/null @@ -1,14 +0,0 @@ - diff --git a/wiki/public/js/icons/list-ordered.vue b/wiki/public/js/icons/list-ordered.vue deleted file mode 100644 index bfd535db..00000000 --- a/wiki/public/js/icons/list-ordered.vue +++ /dev/null @@ -1,14 +0,0 @@ - diff --git a/wiki/public/js/icons/list-unordered.vue b/wiki/public/js/icons/list-unordered.vue deleted file mode 100644 index e7904ea5..00000000 --- a/wiki/public/js/icons/list-unordered.vue +++ /dev/null @@ -1,14 +0,0 @@ - diff --git a/wiki/public/js/icons/separator.vue b/wiki/public/js/icons/separator.vue deleted file mode 100644 index 6b84610b..00000000 --- a/wiki/public/js/icons/separator.vue +++ /dev/null @@ -1,14 +0,0 @@ - diff --git a/wiki/public/js/icons/table-2.vue b/wiki/public/js/icons/table-2.vue deleted file mode 100644 index e2f27814..00000000 --- a/wiki/public/js/icons/table-2.vue +++ /dev/null @@ -1,14 +0,0 @@ - diff --git a/wiki/public/js/render_wiki.js b/wiki/public/js/render_wiki.js index 19a87467..666707f6 100644 --- a/wiki/public/js/render_wiki.js +++ b/wiki/public/js/render_wiki.js @@ -37,34 +37,26 @@ function set_search_params(key = "", value = "") { window.history.pushState({}, "", url); } -function toggleEditor(newEditor = false, fromEdit = false) { - if (fromEdit) { - $(".wiki-editor").toggleClass("hide"); - $(".new-wiki-editor").toggleClass("hide"); - } else { - $(".wiki-content").toggleClass("hide"); - $(".wiki-revision-meta").toggleClass("hide"); - $(".wiki-footer").toggleClass("hide"); - $(".wiki-edit-control-btn").toggleClass("hide"); - $(".page-toc").toggleClass("hide"); - $(".remove-sidebar-item").toggleClass("hide"); - $(".sidebar-item, .sidebar-group").toggleClass("disabled"); - $(".drop-icon").toggleClass("hide"); - $(".add-sidebar-page").toggleClass("hide"); - $(".add-sidebar-group").toggleClass("hide"); - - // avoid hiding editor when params ?editWiki or ?newWiki - if ($(".from-markdown").is(":visible")) - if (newEditor) $(".new-wiki-editor").toggleClass("hide"); - else $(".wiki-editor").toggleClass("hide"); - - $(".edit-wiki-btn, .sidebar-edit-mode-btn").toggleClass("hide"); - $(".wiki-title").toggleClass("hide"); - } +function toggleEditor() { + $(".wiki-content").toggleClass("hide"); + $(".wiki-revision-meta").toggleClass("hide"); + $(".wiki-footer").toggleClass("hide"); + $(".wiki-edit-control-btn").toggleClass("hide"); + $(".page-toc").toggleClass("hide"); + $(".remove-sidebar-item").toggleClass("hide"); + $(".sidebar-item, .sidebar-group").toggleClass("disabled"); + $(".drop-icon").toggleClass("hide"); + $(".add-sidebar-page").toggleClass("hide"); + $(".add-sidebar-group").toggleClass("hide"); + + // avoid hiding editor when params ?editWiki or ?newWiki + if ($(".from-markdown").is(":visible")) $(".wiki-editor").toggleClass("hide"); + else $(".from-markdown").toggleClass("hide"); + + $(".edit-wiki-btn, .sidebar-edit-mode-btn").toggleClass("hide"); + $(".wiki-title").toggleClass("hide"); } -const urlParams = new URLSearchParams(window.location.search); - window.RenderWiki = class RenderWiki extends Wiki { constructor(opts) { super(); @@ -89,6 +81,8 @@ window.RenderWiki = class RenderWiki extends Wiki { } set_url_state() { + const urlParams = new URLSearchParams(window.location.search); + if (urlParams.get("editWiki") && $(".edit-wiki-btn .icon").length) $(".edit-wiki-btn").trigger("click"); else if ( @@ -110,10 +104,7 @@ window.RenderWiki = class RenderWiki extends Wiki { )}) + .add-sidebar-page`, )[0], ).trigger("click"); - - $(".new-wiki-editor, .wiki-editor").toggleClass("hide"); } - $(".from-markdown").removeClass("hide"); $(".wiki-footer, .wiki-revision-meta").toggleClass("hide"); } @@ -204,6 +195,8 @@ window.RenderWiki = class RenderWiki extends Wiki { $(".web-sidebar ul").each(setSortable); $(".edit-wiki-btn, .sidebar-edit-mode-btn").on("click", function () { + const urlParams = new URLSearchParams(window.location.search); + // switch to edit mode toggleEditor(); $("html").css({ overflow: "hidden" }); @@ -213,7 +206,7 @@ window.RenderWiki = class RenderWiki extends Wiki { $(".discard-edit-btn").on("click", function () { // switch to view mode - toggleEditor($(this).data("new")); + toggleEditor(); $("html").css({ overflow: "auto" }); if ($(this).data("new") === true) $('.sidebar-item[data-name="new-wiki-page"]').remove(); @@ -225,6 +218,7 @@ window.RenderWiki = class RenderWiki extends Wiki { "click", ".add-sidebar-page", function (e) { + const urlParams = new URLSearchParams(window.location.search); const groupName = $(this).parent().children("span:first-child").text(); const newWikiPage = $(".sidebar-item[data-name=new-wiki-page]"); const newSidebarItem = $(` @@ -250,10 +244,7 @@ window.RenderWiki = class RenderWiki extends Wiki { $(this).toggleClass("active"); }); - toggleEditor( - true, - $(".wiki-editor, .new-wiki-editor").is(":visible"), - ); + if (!$(".wiki-editor").is(":visible")) toggleEditor(); set_search_params(); } newWikiPage.remove(); @@ -266,10 +257,7 @@ window.RenderWiki = class RenderWiki extends Wiki { newSidebarItem.appendTo( $(this).parent().parent().children(".list-unstyled"), ); - toggleEditor( - true, - $(".wiki-editor, .new-wiki-editor").is(":visible"), - ); + if (!$(".wiki-editor").is(":visible")) toggleEditor(); if (urlParams.get("newWiki") !== groupName) set_search_params("newWiki", groupName); } diff --git a/wiki/public/js/tiptap.js b/wiki/public/js/tiptap.js deleted file mode 100644 index 1e62ced7..00000000 --- a/wiki/public/js/tiptap.js +++ /dev/null @@ -1,7 +0,0 @@ -import { createApp } from "vue"; -import Tiptap from "./Tiptap.vue"; - -createApp(Tiptap).mount(".wiki-editor"); -createApp(Tiptap, { isEmptyEditor: true }).mount(".new-wiki-editor"); - -export default Tiptap; diff --git a/wiki/public/js/wiki.bundle.js b/wiki/public/js/wiki.bundle.js index 2e3fa352..869d9be3 100644 --- a/wiki/public/js/wiki.bundle.js +++ b/wiki/public/js/wiki.bundle.js @@ -1,3 +1,3 @@ import "./wiki"; import "./render_wiki"; -import "./tiptap"; +import "./editor"; diff --git a/wiki/public/scss/edit_wiki.scss b/wiki/public/scss/edit_wiki.scss index 1490cf5b..6dd2bba1 100644 --- a/wiki/public/scss/edit_wiki.scss +++ b/wiki/public/scss/edit_wiki.scss @@ -217,13 +217,11 @@ $font-sizes-mobile: ( ); .wiki-editor, -.new-wiki-editor, .from-markdown { margin: auto; } -.wiki-editor > div, -.new-wiki-editor > div, +.wiki-editor, .wiki-content { font-size: map-get($font-sizes-desktop, "base"); color: $gray-700; @@ -500,8 +498,7 @@ $font-sizes-mobile: ( } } -.new-wiki-editor > div, -.wiki-editor > div { +.wiki-editor { margin: 0 -1rem; border-radius: 1rem; border: 1px solid $gray-200; diff --git a/wiki/wiki/doctype/wiki_page/templates/editor.html b/wiki/wiki/doctype/wiki_page/templates/editor.html new file mode 100644 index 00000000..0e92fa03 --- /dev/null +++ b/wiki/wiki/doctype/wiki_page/templates/editor.html @@ -0,0 +1,202 @@ +
+
+ +
+ + +
+ + +
+ + + +
+ + + + + + + +
+
+
Discard
+
+
Save +
+ + +
+
+
+
diff --git a/wiki/wiki/doctype/wiki_page/templates/show.html b/wiki/wiki/doctype/wiki_page/templates/show.html index 34d32b2f..1760ee7e 100644 --- a/wiki/wiki/doctype/wiki_page/templates/show.html +++ b/wiki/wiki/doctype/wiki_page/templates/show.html @@ -8,8 +8,9 @@

{{ title }}

-
-
+
+ {% include "wiki/doctype/wiki_page/templates/editor.html" %} +