feat: support edit

CHANGELOG.md

@@ -1,26 +1,26 @@
-# [1.2.0](https://github.com/haydenull/logseq-plugin-react-excalidraw/compare/v1.1.0...v1.2.0) (2022-11-29)
+# [1.2.0](https://github.com/haydenull/logseq-plugin-excalidraw/compare/v1.1.0...v1.2.0) (2022-11-29)
 
 
 ### Bug Fixes
 
-* [skip ci] content block mask ([3dcd6b3](https://github.com/haydenull/logseq-plugin-react-excalidraw/commit/3dcd6b385d4765b5979e437bee6211899478014b))
-* [skip ci] Fix the mask blocking content area ([676b6e4](https://github.com/haydenull/logseq-plugin-react-excalidraw/commit/676b6e4549a8203ad98d246409ca95e84b0a682a))
+* [skip ci] content block mask ([3dcd6b3](https://github.com/haydenull/logseq-plugin-excalidraw/commit/3dcd6b385d4765b5979e437bee6211899478014b))
+* [skip ci] Fix the mask blocking content area ([676b6e4](https://github.com/haydenull/logseq-plugin-excalidraw/commit/676b6e4549a8203ad98d246409ca95e84b0a682a))
 
 
 ### Features
 
-* ✨ upgrade logseq/libs react typescript antd vite ([6e1fadf](https://github.com/haydenull/logseq-plugin-react-excalidraw/commit/6e1fadf194406cf50b5311a32f6fee39cd6079bd))
+* ✨ upgrade logseq/libs react typescript antd vite ([6e1fadf](https://github.com/haydenull/logseq-plugin-excalidraw/commit/6e1fadf194406cf50b5311a32f6fee39cd6079bd))
 
-# [1.1.0](https://github.com/haydenull/logseq-plugin-react-excalidraw/compare/v1.0.0...v1.1.0) (2022-03-08)
+# [1.1.0](https://github.com/haydenull/logseq-plugin-excalidraw/compare/v1.0.0...v1.1.0) (2022-03-08)
 
 
 ### Features
 
-* add antd ([036577d](https://github.com/haydenull/logseq-plugin-react-excalidraw/commit/036577dc529db4e4a5964c287a55d112bae654bc))
+* add antd ([036577d](https://github.com/haydenull/logseq-plugin-excalidraw/commit/036577dc529db4e4a5964c287a55d112bae654bc))
 
 # 1.0.0 (2022-01-18)
 
 
 ### Features
 
-* ✨ initial commit ([cca0e7f](https://github.com/haydenull/logseq-plugin-react-excalidraw/commit/cca0e7fcba33830eaf534fd9ca6b867b57147de4))
+* ✨ initial commit ([cca0e7f](https://github.com/haydenull/logseq-plugin-excalidraw/commit/cca0e7fcba33830eaf534fd9ca6b867b57147de4))

README.md

@@ -1,8 +1,8 @@
-# logseq-plugin-react-excalidraw
-> logseq-plugin-react-excalidraw with vite react typescript tailwindcss antd
+# logseq-plugin-excalidraw
+> logseq-plugin-excalidraw with vite react typescript tailwindcss antd
 
-[![latest release version](https://img.shields.io/github/v/release/haydenull/logseq-plugin-react-excalidraw)](https://github.com/haydenull/logseq-plugin-react-excalidraw/releases)
-[![License](https://img.shields.io/github/license/haydenull/logseq-plugin-react-excalidraw?color=blue)](https://github.com/haydenull/logseq-plugin-react-excalidraw/blob/main/LICENSE)
+[![latest release version](https://img.shields.io/github/v/release/haydenull/logseq-plugin-excalidraw)](https://github.com/haydenull/logseq-plugin-excalidraw/releases)
+[![License](https://img.shields.io/github/license/haydenull/logseq-plugin-excalidraw?color=blue)](https://github.com/haydenull/logseq-plugin-excalidraw/blob/main/LICENSE)
 
 ## Demo
 ![demo](./demo.gif)

package.json

@@ -1,9 +1,9 @@
 {
-  "name": "logseq-plugin-react-excalidraw",
+  "name": "logseq-plugin-excalidraw",
   "version": "0.0.1",
   "main": "dist/index.html",
   "logseq": {
-    "id": "logseq-plugin-react-excalidraw",
+    "id": "logseq-plugin-excalidraw",
     "icon": "logo.png"
   },
   "scripts": {
@@ -16,6 +16,7 @@
     "@logseq/libs": "^0.0.14",
     "antd": "^5.0.2",
     "dayjs": "^1.11.7",
+    "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

src/App.tsx

@@ -15,7 +15,7 @@ const App: React.FC<{ mode: Mode; pageName: string }> = ({
         onClick={() => logseq.hideMainUI()}
       ></div>
       {/* <div className="w-5/6 h-5/6 z-0 bg-gradient-to-tr from-green-300 via-green-500 to-green-700 flex flex-col items-center justify-center">
-        <h1 className="font-bold text-4xl">logseq-plugin-react-excalidraw</h1>
+        <h1 className="font-bold text-4xl">logseq-plugin-excalidraw</h1>
       </div> */}
       {mode === "preview" ? (
         <Preview pageName={pageName} />

src/components/Editor.tsx

@@ -1,24 +1,43 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Excalidraw } from "@excalidraw/excalidraw";
-import { getExcalidrawDataFromPage } from "../util";
+import { debounce } from "lodash";
+import { genBlockData, getExcalidrawDataFromPage } from "../util";
 
 const Editor: React.FC<React.PropsWithChildren<{ pageName: string }>> = ({
   pageName,
 }) => {
   const [excalidrawData, setExcalidrawData] = useState<any>();
-  console.log("[faiz:] === excalidrawData", excalidrawData);
+  const blockUUIDRef = useRef<string>();
+
+  const onExcalidrawChange = debounce((excalidrawElements, appState, files) => {
+    const blockData = genBlockData({
+      ...excalidrawData,
+      elements: excalidrawElements,
+      appState,
+      files,
+    });
+    if (blockUUIDRef.current)
+      logseq.Editor.updateBlock(blockUUIDRef.current, blockData);
+  }, 2000);
+
   useEffect(() => {
-    getExcalidrawDataFromPage(pageName).then(setExcalidrawData);
+    getExcalidrawDataFromPage(pageName).then((data) => {
+      setExcalidrawData(data?.excalidrawData);
+      blockUUIDRef.current = data?.block?.uuid;
+    });
   }, [pageName]);
   return (
     <div className="w-screen h-screen">
-      <Excalidraw
-        initialData={{
-          // elements: excalidrawData?.elements,
-          appState: excalidrawData?.appState,
-          scrollToContent: true,
-        }}
-      />
+      {excalidrawData && (
+        <Excalidraw
+          initialData={{
+            elements: excalidrawData?.elements || [],
+            appState: excalidrawData?.elements?.appState || {},
+            scrollToContent: true,
+          }}
+          onChange={onExcalidrawChange}
+        />
+      )}
       {/* <Excalidraw
         initialData={{
           appState: { zenModeEnabled: true, viewBackgroundColor: "#a5d8ff" },

src/components/Preview.tsx

@@ -9,7 +9,7 @@ const Preview: React.FC<React.PropsWithChildren<{ pageName: string }>> = ({
 
   useEffect(() => {
     if (pageName) {
-      getExcalidrawDataFromPage(pageName).then(async (excalidrawData) => {
+      getExcalidrawDataFromPage(pageName).then(async ({ excalidrawData }) => {
         const svg = await exportToSvg({
           elements: excalidrawData?.elements ?? [],
           appState: excalidrawData?.appState ?? {},

src/main.tsx

@@ -9,7 +9,7 @@ import { getExcalidrawData, listenEsc } from "./util";
 
 const DEMO_FILE_ORIGINAL_NAME = "excalidraw-2023-04-24-16-39-01";
 
-console.log("=== logseq-plugin-react-excalidraw loaded ===");
+console.log("=== logseq-plugin-excalidraw loaded ===");
 logseq.ready(() => {
   logseq.provideModel({
     edit(e) {
@@ -27,7 +27,7 @@ logseq.ready(() => {
   });
 
   logseq.App.registerUIItem("toolbar", {
-    key: "logseq-plugin-react-excalidraw",
+    key: "logseq-plugin-excalidraw",
     template:
       '<a data-on-click="show" class="button"><i class="ti ti-window"></i></a>',
   });
@@ -78,7 +78,6 @@ logseq.ready(() => {
         appState: excalidrawData?.appState ?? {},
         files: null,
       });
-      console.log("[faiz:] === svg", svg);
 
       const id = `excalidraw-${fileName}-${slot}`;
       logseq.provideUI({
@@ -99,6 +98,7 @@ logseq.ready(() => {
       setTimeout(() => {
         // insert preview img
         svg.style.width = "100%";
+        svg.style.height = "200px";
         parent.document.getElementById(id)?.prepend(svg);
       }, 0);
     }

src/util.ts

@@ -8,14 +8,24 @@ export const getExcalidrawData = (text: string) => {
   const match = text.match(/```json\n(.*)\n```/s);
   return match ? JSON.parse(match[1]) : null;
 };
+/**
+ * gen block data
+ * {xxx} --> ```json\n{xxx}\n```
+ */
+export const genBlockData = (excalidrawData: Record<string, unknown>) => {
+  return `\`\`\`json\n${JSON.stringify(excalidrawData)}\n\`\`\``;
+};
 
 export const getExcalidrawDataFromPage = async (srcPage: PageIdentity) => {
   console.log("[faiz:] === srcPage", srcPage);
   const pageBlocks = await logseq.Editor.getPageBlocksTree(srcPage);
   console.log("[faiz:] === pageBlocks", pageBlocks);
   const codeBlock = pageBlocks?.[2];
   const excalidrawData = getExcalidrawData(codeBlock?.content);
-  return excalidrawData;
+  return {
+    excalidrawData,
+    block: codeBlock,
+  };
 };
 
 /**