polynux
/
pchl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit page with a get parameter

This commit is contained in:
Guillaume Dorce 2023-06-02 21:54:56 +02:00
parent fe0084a946
commit e4d7cb003b
3 changed files with 109 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/components/ReactEditor.tsx
View File

@ -1,102 +1,12 @@
import { memo, useEffect, useRef } from "react";
import EditorJS from "@editorjs/editorjs";
import type {
BlockToolData,
OutputBlockData,
ToolConstructable,
OutputData,
} from "@editorjs/editorjs";
import type { OutputData } from "@editorjs/editorjs";
import { EDITOR_JS_TOOLS } from "@/utils/tools";
// @ts-expect-error Undo is not a valid tool
import Undo from "editorjs-undo";
// @ts-expect-error DragDrop is not a valid tool
import DragDrop from "editorjs-drag-drop";
type ColumnData = {
columnsData: OutputBlockData[];
};
type ColumnConfig = {
tools: ToolConstructable[] | any;
};
class ColumnTool {
private data: ColumnData;
private wrapper: HTMLElement | undefined;
private tools: { [name: symbol]: any };
private editors: EditorJS[];
constructor({ data, config }: { data?: ColumnData; config?: ColumnConfig }) {
this.data = data ?? { columnsData: [] };
this.wrapper = undefined;
this.tools = config?.tools ?? EDITOR_JS_TOOLS;
this.editors = [];
}
static get toolbox() {
return {
title: "Column",
icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zm64 64V416H224V160H64zm384 0H288V416H448V160z"/></svg>`,
};
}
static get enableLineBreaks() {
return true;
}
createColumn() {
const column = document.createElement("div");
column.classList.add(
"flex",
"flex-col",
"w-1/2",
"border",
"border-gray-300",
"rounded-md"
);
return column;
}
render() {
console.log(this.tools);
if (!this.wrapper) this.wrapper = document.createElement("div");
const child = document.createElement("div");
child.classList.add("flex", "flex-row", "w-full", "space-x-4");
const blocksData: BlockToolData[] = [];
for (let i = 0; i < 2; i++) {
const column = this.createColumn();
const editor = new EditorJS({
holder: column,
tools: this.tools,
async onChange(api) {
const data = await api.saver.save();
blocksData[i] = data.blocks;
},
});
child.appendChild(column);
this.editors.push(editor);
}
this.wrapper.appendChild(child);
this.data.columnsData = blocksData;
return this.wrapper;
}
save() {
return {
blocksData: this.data.columnsData,
};
}
destroy() {
this.editors.forEach((editor) => editor.destroy());
this.wrapper?.remove();
}
}
import ColumnTool from "@/utils/editor-tools/column";
type Props = {
data?: OutputData;

19
src/pages/test/editor.tsx
View File

@ -2,14 +2,15 @@ import dynamic from 'next/dynamic'
import Layout from '@/layouts/Home'
import { useState } from 'react'
import { OutputData } from "@editorjs/editorjs";
import { getPageBySlug } from '@/utils/pb';
import { api } from '@/utils/api';
const ReactEditorJS = dynamic(() => import('@/components/ReactEditor'), {
ssr: false
})
export default function Editor() {
const [data, setData] = useState<OutputData>({blocks: [], time: 0, version: ''})
export default function Editor({data: pbData}: {data: OutputData}) {
const [data, setData] = useState<OutputData>(pbData);
const {mutate, isLoading, data: data2, isError} = api.pages.updatePage.useMutation();
if (data2) console.log(data2)
@ -42,3 +43,17 @@ export default function Editor() {
</Layout>
)
}
export async function getServerSideProps({query}: {query: {[key: string]: string}}) {
if (!query.page) return {notFound: true}
const data = await getPageBySlug(query.page);
if (!data.data) return {notFound: true};
return {
props: {
data: data.data.content
}
}
}

90
src/utils/editor-tools/column.ts Normal file
View File

@ -0,0 +1,90 @@
import EditorJS, { BlockToolData, OutputBlockData, ToolConstructable } from "@editorjs/editorjs";
import { EDITOR_JS_TOOLS } from "../tools";
type ColumnData = {
columnsData: OutputBlockData[];
};
type ColumnConfig = {
tools: ToolConstructable[] | any;
};
class ColumnTool {
private data: ColumnData;
private wrapper: HTMLElement | undefined;
private tools: { [name: symbol]: any };
private editors: EditorJS[];
constructor({ data, config }: { data?: ColumnData; config?: ColumnConfig }) {
this.data = data ?? { columnsData: [] };
this.wrapper = undefined;
this.tools = config?.tools ?? EDITOR_JS_TOOLS;
this.editors = [];
}
static get toolbox() {
return {
title: "Column",
icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zm64 64V416H224V160H64zm384 0H288V416H448V160z"/></svg>`,
};
}
static get enableLineBreaks() {
return true;
}
createColumn() {
const column = document.createElement("div");
column.classList.add(
"flex",
"flex-col",
"w-1/2",
"border",
"border-gray-300",
"rounded-md"
);
return column;
}
render() {
console.log(this.tools);
if (!this.wrapper) this.wrapper = document.createElement("div");
const child = document.createElement("div");
child.classList.add("flex", "flex-row", "w-full", "space-x-4");
const blocksData: BlockToolData[] = [];
for (let i = 0; i < 2; i++) {
const column = this.createColumn();
const editor = new EditorJS({
holder: column,
tools: this.tools,
async onChange(api) {
const data = await api.saver.save();
blocksData[i] = data.blocks;
},
});
child.appendChild(column);
this.editors.push(editor);
}
this.wrapper.appendChild(child);
this.data.columnsData = blocksData;
return this.wrapper;
}
save() {
return {
blocksData: this.data.columnsData,
};
}
destroy() {
this.editors.forEach((editor) => editor.destroy());
this.wrapper?.remove();
}
}
export default ColumnTool;