From 148e7eb21803c99683cfcbcad57dd58eced6f0a5 Mon Sep 17 00:00:00 2001 From: Oliver Booth Date: Thu, 29 Feb 2024 18:05:00 +0000 Subject: [PATCH] refactor!: prototyping EditorJS --- OliverBooth/Pages/Admin/EditBlogPost.cshtml | 9 +++- package-lock.json | 49 +++++++++++++++++++++ package.json | 7 +++ src/ts/admin/BlockTools/SimpleImage.ts | 20 +++++++++ src/ts/admin/EditBlogPost.ts | 29 +++++++++--- 5 files changed, 106 insertions(+), 8 deletions(-) create mode 100644 src/ts/admin/BlockTools/SimpleImage.ts diff --git a/OliverBooth/Pages/Admin/EditBlogPost.cshtml b/OliverBooth/Pages/Admin/EditBlogPost.cshtml index 42d9dd9..6833c36 100644 --- a/OliverBooth/Pages/Admin/EditBlogPost.cshtml +++ b/OliverBooth/Pages/Admin/EditBlogPost.cshtml @@ -11,9 +11,14 @@ } - +
+
+
+ +@* +
@@ -46,4 +51,4 @@
- \ No newline at end of file +*@ \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index d4e170a..1fc8cdf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,14 @@ "name": "oliverbooth.dev", "version": "1.0.0", "license": "MIT", + "dependencies": { + "@editorjs/header": "^2.8.1", + "@editorjs/paragraph": "^2.11.3", + "codex-notifier": "^1.1.2", + "codex-tooltip": "^1.0.5" + }, "devDependencies": { + "@editorjs/editorjs": "^2.29.0", "gulp": "^4.0.2", "gulp-clean-css": "^4.3.0", "gulp-noop": "^1.0.1", @@ -23,6 +30,38 @@ "webpack-stream": "^7.0.0" } }, + "node_modules/@codexteam/icons": { + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/@codexteam/icons/-/icons-0.0.4.tgz", + "integrity": "sha512-V8N/TY2TGyas4wLrPIFq7bcow68b3gu8DfDt1+rrHPtXxcexadKauRJL6eQgfG7Z0LCrN4boLRawR4S9gjIh/Q==" + }, + "node_modules/@editorjs/editorjs": { + "version": "2.29.0", + "resolved": "https://registry.npmjs.org/@editorjs/editorjs/-/editorjs-2.29.0.tgz", + "integrity": "sha512-w2BVboSHokMBd/cAOZn0UU328o3gSZ8XUvFPA2e9+ciIGKILiRSPB70kkNdmhHkuNS3q2px+vdaIFaywBl7wGA==", + "dev": true + }, + "node_modules/@editorjs/header": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/@editorjs/header/-/header-2.8.1.tgz", + "integrity": "sha512-y0HVXRP7m2W617CWo3fsb5HhXmSLaRpb9GzFx0Vkp/HEm9Dz5YO1s8tC7R8JD3MskwoYh7V0hRFQt39io/r6hA==", + "dependencies": { + "@codexteam/icons": "^0.0.5" + } + }, + "node_modules/@editorjs/header/node_modules/@codexteam/icons": { + "version": "0.0.5", + "resolved": "https://registry.npmjs.org/@codexteam/icons/-/icons-0.0.5.tgz", + "integrity": "sha512-s6H2KXhLz2rgbMZSkRm8dsMJvyUNZsEjxobBEg9ztdrb1B2H3pEzY6iTwI4XUPJWJ3c3qRKwV4TrO3J5jUdoQA==" + }, + "node_modules/@editorjs/paragraph": { + "version": "2.11.3", + "resolved": "https://registry.npmjs.org/@editorjs/paragraph/-/paragraph-2.11.3.tgz", + "integrity": "sha512-ON72lhvhgWzPrq4VXpHUeut9bsFeJgVATDeL850FVToOwYHKvdsNpfu0VgxEodhkXgzU/IGl4FzdqC2wd3AJUQ==", + "dependencies": { + "@codexteam/icons": "^0.0.4" + } + }, "node_modules/@gulp-sourcemaps/identity-map": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/@gulp-sourcemaps/identity-map/-/identity-map-2.0.1.tgz", @@ -1099,6 +1138,16 @@ "node": ">=0.10.0" } }, + "node_modules/codex-notifier": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/codex-notifier/-/codex-notifier-1.1.2.tgz", + "integrity": "sha512-DCp6xe/LGueJ1N5sXEwcBc3r3PyVkEEDNWCVigfvywAkeXcZMk9K41a31tkEFBW0Ptlwji6/JlAb49E3Yrxbtg==" + }, + "node_modules/codex-tooltip": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/codex-tooltip/-/codex-tooltip-1.0.5.tgz", + "integrity": "sha512-IuA8LeyLU5p1B+HyhOsqR6oxyFQ11k3i9e9aXw40CrHFTRO2Y1npNBVU3W1SvhKAbUU7R/YikUBdcYFP0RcJag==" + }, "node_modules/collection-map": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/collection-map/-/collection-map-1.0.0.tgz", diff --git a/package.json b/package.json index 56defa4..977fbad 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "author": "Oliver Booth", "license": "MIT", "devDependencies": { + "@editorjs/editorjs": "^2.29.0", "gulp": "^4.0.2", "gulp-clean-css": "^4.3.0", "gulp-noop": "^1.0.1", @@ -31,5 +32,11 @@ "terser": "^5.19.2", "vinyl-named": "^1.1.0", "webpack-stream": "^7.0.0" + }, + "dependencies": { + "@editorjs/header": "^2.8.1", + "@editorjs/paragraph": "^2.11.3", + "codex-notifier": "^1.1.2", + "codex-tooltip": "^1.0.5" } } diff --git a/src/ts/admin/BlockTools/SimpleImage.ts b/src/ts/admin/BlockTools/SimpleImage.ts new file mode 100644 index 0000000..739e21a --- /dev/null +++ b/src/ts/admin/BlockTools/SimpleImage.ts @@ -0,0 +1,20 @@ +class SimpleImage { + static get toolbox(): { icon: string, title: string } { + return { + title: "Image", + icon: "" + }; + } + + render(): HTMLInputElement { + return document.createElement("input"); + } + + save(blockContent: HTMLInputElement): { url: string } { + return { + url: blockContent.value + } + } +} + +export default SimpleImage; \ No newline at end of file diff --git a/src/ts/admin/EditBlogPost.ts b/src/ts/admin/EditBlogPost.ts index 951d043..8b9f16f 100644 --- a/src/ts/admin/EditBlogPost.ts +++ b/src/ts/admin/EditBlogPost.ts @@ -3,8 +3,10 @@ import UI from "./MarkdownEditor/UI" import API from "../app/API"; import "./TabSupport" import Interop from "./Interop"; -import MarkdownEditor from "./MarkdownEditor/MarkdownEditor"; import SaveButtonMode from "./MarkdownEditor/SaveButtonMode"; +import EditorJS from "@editorjs/editorjs"; +import Header from "@editorjs/header"; +import SimpleImage from "./BlockTools/SimpleImage"; (() => { getCurrentBlogPost().then(post => { @@ -12,15 +14,30 @@ import SaveButtonMode from "./MarkdownEditor/SaveButtonMode"; return; } - UI.init(); - UI.addSaveButtonListener(savePost); + // UI.init(); + // UI.addSaveButtonListener(savePost); - const editor = new MarkdownEditor(UI.markdownInput); + const editor = new EditorJS({ + tools: { + header: { + class: Header, + config: { + placeholder: 'Heading', + levels: [2, 3, 4], + defaultLevel: 2 + } + }, + image: SimpleImage + } + }); + + /*const editor = new MarkdownEditor(UI.markdownInput); editor.addSaveListener(savePost); editor.registerDefaultShortcuts(); - editor.registerEvents(); + editor.registerEvents();*/ async function savePost(): Promise { + return; UI.setSaveButtonMode(SaveButtonMode.SAVING); await Interop.invoke("Save", post.id, UI.markdownInput.value); post = await API.getBlogPost(post.id); @@ -31,7 +48,7 @@ import SaveButtonMode from "./MarkdownEditor/SaveButtonMode"; setTimeout(() => UI.setSaveButtonMode(SaveButtonMode.NORMAL), 2000); } - UI.redraw(); + // UI.redraw(); }); async function getCurrentBlogPost(): Promise {