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 {