Merge pull request #182 from cabcookie:split-notes-in-blocks

fix: small fixes in editor and todos
cabcookie · Aug 26, 2024 · d990167 · d990167
2 parents 91a5069 + 225bdd1
commit d990167
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 27 deletions.
diff --git a/components/ui-elements/editors/extensions/s3-images/S3ImageExtension.tsx b/components/ui-elements/editors/extensions/s3-images/S3ImageExtension.tsx
@@ -16,14 +16,14 @@ const assignUrlToDom = async (node: ProseMirrorNode, img: HTMLImageElement) => {
   }
   if (node.attrs.expiresAt && isFuture(new Date(node.attrs.expiresAt))) {
     img.setAttribute("src", node.attrs.src);
-    img.setAttribute("expiresAt", node.attrs.expiresAt);
+    img.setAttribute("data-expires-at", node.attrs.expiresAt);
     img.setAttribute("data-s3-key", node.attrs.s3Key);
     img.setAttribute("class", stdClasses);
     return;
   }
   const { url, expiresAt } = await getUrl({ path: node.attrs.s3Key });
   img.setAttribute("src", url.toString());
-  img.setAttribute("expiresAt", toISODateTimeString(expiresAt));
+  img.setAttribute("data-expires-at", toISODateTimeString(expiresAt));
   img.setAttribute("data-s3-key", node.attrs.s3Key);
   img.setAttribute("class", stdClasses);
 };
@@ -56,25 +56,62 @@ const S3ImageExtension = Node.create({
   group: "block",
   draggable: true,
   addAttributes: () => ({
+    blockId: {
+      default: null,
+      parseHTML: (element) => {
+        return element.getAttribute("data-block-id");
+      },
+      renderHTML: (attributes) => ({
+        "data-block-id": attributes.blockId,
+      }),
+    },
     src: {
       default: null,
+      parseHTML: (element) => {
+        return element.getAttribute("src");
+      },
+      renderHTML: (attributes) => ({
+        src: attributes.src,
+      }),
     },
     fileKey: {
       default: null,
+      parseHTML: (element) => {
+        return element.getAttribute("data-file-key");
+      },
+      renderHTML: (attributes) => ({
+        "data-file-key": attributes.fileKey,
+      }),
     },
     s3Key: {
       default: null,
+      parseHTML: (element) => {
+        return element.getAttribute("data-s3-key");
+      },
+      renderHTML: (attributes) => ({
+        "data-s3-key": attributes.s3Key,
+      }),
     },
     expiresAt: {
       default: null,
+      parseHTML: (element) => {
+        return element.getAttribute("data-expires-at");
+      },
+      renderHTML: (attributes) => ({
+        "data-expires-at": attributes.expiresAt,
+      }),
     },
   }),
-  parseHTML: () => [
-    {
-      tag: "img[src]",
-    },
-  ],
-  renderHTML: ({ HTMLAttributes }) => ["img", mergeAttributes(HTMLAttributes)],
+  parseHTML() {
+    return [
+      {
+        tag: `img[data-type="${this.name}"]`,
+      },
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["img", mergeAttributes(HTMLAttributes, { "data-type": this.name })];
+  },
   addNodeView: () => S3ImageRenderer,
 });
 

diff --git a/components/ui-elements/editors/extensions/s3-images/image-handling.ts b/components/ui-elements/editors/extensions/s3-images/image-handling.ts
@@ -12,6 +12,7 @@ const dispatchImage = (view: EditorView, url: string, fileName: string) => {
     schema.nodes.s3image.create({
       src: url,
       fileKey: fileName,
+      blockId: crypto.randomUUID(),
     })
   );
   view.dispatch(tr);
@@ -27,10 +28,12 @@ const updateImageSrc = (
   const { state, dispatch } = view;
   const { tr, doc } = state;
   let pos: number | null = null;
+  let blockId: string | null = null;
 
   doc.descendants((node, nodePos) => {
     if (node.type.name === "s3image" && node.attrs.fileKey === fileName) {
       pos = nodePos;
+      blockId = node.attrs.blockId;
       return false;
     }
     return true;
@@ -42,6 +45,7 @@ const updateImageSrc = (
       s3Key,
       expiresAt,
       fileKey: fileName,
+      blockId,
     });
     dispatch(transaction);
   }

diff --git a/components/ui-elements/editors/helpers/todos-cud.ts b/components/ui-elements/editors/helpers/todos-cud.ts
@@ -2,10 +2,19 @@
 
 import { type Schema } from "@/amplify/data/resource";
 import { Activity, TempIdMapping } from "@/api/useActivity";
-import { newDateString, newDateTimeString, not } from "@/helpers/functional";
+import { newDateString, not } from "@/helpers/functional";
 import { Editor, JSONContent } from "@tiptap/core";
 import { generateClient } from "aws-amplify/api";
-import { filter, find, flatMap, flow, get, map, some } from "lodash/fp";
+import {
+  compact,
+  filter,
+  find,
+  flatMap,
+  flow,
+  get,
+  map,
+  some,
+} from "lodash/fp";
 import { stringifyBlock } from "./blocks";
 import { isUpToDate } from "./compare";
 import TransactionError from "./transaction-error";
@@ -35,7 +44,7 @@ export const createTodo = async ({
   const { data, errors } = await client.models.Todo.create({
     todo: content,
     status: done ? "DONE" : "OPEN",
-    doneOn: done ? newDateTimeString() : null,
+    doneOn: done ? newDateString() : null,
   });
   if (errors)
     throw new TransactionError(
@@ -163,15 +172,10 @@ export const getTodoUpdateSet = (
     map(mapUpdateSet)
   )(editor.getJSON());
 
-const mapDeleteSet = (block: JSONContent): TTodoDeleteSet => {
-  if (!block.attrs?.todoId)
-    throw new TransactionError(
-      "todoId not set on todo that should be deleted in database",
-      block,
-      "mapDeleteSet"
-    );
+const mapDeleteSet = (block: JSONContent): TTodoDeleteSet | undefined => {
+  if (!block.attrs?.todoId) return;
   return {
-    todoId: block.attrs.todoId,
+    todoId: block.attrs?.todoId,
   };
 };
 
@@ -202,5 +206,6 @@ export const getTodoDeleteSet = (
   flow(
     getTodos,
     filter(doesNotExist(editor.getJSON())),
-    map(mapDeleteSet)
+    map(mapDeleteSet),
+    compact
   )(activity.notes);
diff --git a/components/ui-elements/editors/notes-editor/useExtensions.ts b/components/ui-elements/editors/notes-editor/useExtensions.ts
@@ -31,13 +31,9 @@ const extendedConfig: Partial<NodeConfig<any, any>> = {
   },
 };
 
-const StarterKitExtended = [
-  Heading,
-  Paragraph,
-  ListItem,
-  CodeBlock,
-  S3ImageExtension,
-].map((ext) => ext.extend(extendedConfig));
+const StarterKitExtended = [Heading, Paragraph, ListItem, CodeBlock].map(
+  (ext) => ext.extend(extendedConfig)
+);
 
 const useExtensions = (): EditorOptions["extensions"] => {
   const extensions = useMemo(() => {
@@ -88,6 +84,7 @@ const useExtensions = (): EditorOptions["extensions"] => {
         },
       }),
       Typography,
+      S3ImageExtension,
       Mention.extend({
         addAttributes() {
           return {

diff --git a/docs/releases/next.md b/docs/releases/next.md
@@ -15,6 +15,7 @@
 - Das Suchen nach Personen (in einer Notiz mit einer @-Erwähnung) ist jetzt stabiler und lädt die Personen auch hin und wieder nach.
 - Numerierte Listen werden nun korrekt in NoteBlocks gespeichert.
 - Die Tagesplanung funktioniert wieder und die tägliche Todoliste ebenso.
+- Kleinere Fehlerbehebungen im Editor.
 
 ## In Arbeit