refactor!: prototyping EditorJS

OliverBooth/Pages/Admin/EditBlogPost.cshtml

@@ -11,9 +11,14 @@
 }
 
 <component type="typeof(MarkdownEditor)" render-mode="Server"/>
-
 <input type="hidden" data-blog-pid="@post.Id">
 
+<article id="article-preview" style="background: #333; max-width: 700px; margin: 20px auto; padding: 20px;">
+    <div id="editorjs"></div>
+</article>
+
+@*
+
 <div class="d-flex flex-column" style="height: calc(100vh - 35px)">
     <div class="mb-3">
         <button id="save-button" class="btn btn-primary"><i class="fa-solid fa-floppy-disk fa-fw"></i> Save <span class="text-muted">(Ctrl+S)</span></button>
@@ -46,4 +51,4 @@
             </article>
         </div>
     </div>
-</div>
+</div>*@

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",

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"
   }
 }

src/ts/admin/BlockTools/SimpleImage.ts

@@ -0,0 +1,20 @@
+class SimpleImage {
+    static get toolbox(): { icon: string, title: string } {
+        return {
+            title: "Image",
+            icon: "<svg width=\"17\" height=\"15\" viewBox=\"0 0 336 276\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M291 150V79c0-19-15-34-34-34H79c-19 0-34 15-34 34v42l67-44 81 72 56-29 42 30zm0 52l-43-30-56 30-81-67-66 39v23c0 19 15 34 34 34h178c17 0 31-13 34-29zM79 0h178c44 0 79 35 79 79v118c0 44-35 79-79 79H79c-44 0-79-35-79-79V79C0 35 35 0 79 0z\"/></svg>"
+        };
+    }
+
+    render(): HTMLInputElement {
+        return document.createElement("input");
+    }
+
+    save(blockContent: HTMLInputElement): { url: string } {
+        return {
+            url: blockContent.value
+        }
+    }
+}
+
+export default SimpleImage;

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.init();
-        UI.addSaveButtonListener(savePost);
+        // 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<void> {
+            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<BlogPost> {