oliverbooth/oliverbooth.dev
oliverbooth
/
oliverbooth.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

refactor!: prototyping EditorJS

This commit is contained in:
Oliver Booth 2024-02-29 18:05:00 +00:00
parent c0efc90c31
commit 148e7eb218
Signed by: oliverbooth
GPG Key ID: E60B570D1B7557B5
5 changed files with 106 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
OliverBooth/Pages/Admin/EditBlogPost.cshtml
View File

@ -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>*@

49
package-lock.json generated
View File

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

7
package.json
View File

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

20
src/ts/admin/BlockTools/SimpleImage.ts Normal file
View File

@ -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;

29
src/ts/admin/EditBlogPost.ts
View File

@ -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<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> {