Fix

app/src/components/details/scraps/ScrapContextProvider.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from "react";
-import { IScrapEntry } from "../../../serverApi/IScrapEntry";
+import { IScrapEntry, ScrapType } from "../../../serverApi/IScrapEntry";
 import { useAppContext } from "../../../AppContext";
 import { Button } from "@mui/material";
 import { IUpsertScrapsEntryCommand } from "../../../serverApi/commands/IUpsertScrapsEntryCommand";
@@ -17,6 +17,7 @@ import { ActionFactory } from "../../common/actions/ActionFactory";
 import { useDialogContext } from "../../layout/dialogs/DialogContext";
 import { IJournal } from "../../../serverApi/IJournal";
 import { AddNewScrapStorage } from "./AddNewScrapStorage";
+import { IScrapListItem } from "./list/IScrapListItem";
 
 export const ScrapContextProvider: React.FC<{
   children: React.ReactNode;
@@ -201,6 +202,18 @@ export const ScrapContextProvider: React.FC<{
         setHasTitleFocus,
         changeScrapType: (genericNotes, targetType) => {
           console.log("change to " + targetType, genericNotes);
+
+          const newNotes = toTargetType(targetType, genericNotes);
+
+          console.log("new notes:", newNotes);
+
+          setNotes(newNotes);
+
+          setScrapToRender({
+            ...scrapToRender,
+            notes: newNotes,
+            scrapType: targetType,
+          });
         },
       };
     },
@@ -259,8 +272,29 @@ export const ScrapContextProvider: React.FC<{
   }
 
   return (
-    <ScrapContext.Provider value={contextValue}>
+    <ScrapContext.Provider value={contextValue} key={currentScrap.scrapType}>
       {children}
     </ScrapContext.Provider>
   );
 };
+
+function toList(genericNotes: string[]) {
+  debugger;
+  return JSON.stringify(
+    genericNotes.map((n) => ({ label: n }) as IScrapListItem),
+  );
+}
+
+function toMarkdown(genericNotes: string[]) {
+  debugger;
+  return genericNotes.map((n) => "- " + n).join("\n");
+}
+
+function toTargetType(targetType: ScrapType, genericNotes: string[]) {
+  switch (targetType) {
+    case ScrapType.List:
+      return toList(genericNotes);
+    case ScrapType.Markdown:
+      return toMarkdown(genericNotes);
+  }
+}

app/src/components/details/scraps/ScrapInner.tsx

@@ -4,7 +4,7 @@ import { useScrapContext } from "./ScrapContext";
 import { ScrapMarkdown } from "./markdown/ScrapMarkdown";
 import { ScrapList } from "./list/ScrapList";
 import { useDisplayModeContext } from "../../overview/overviewList/DisplayModeContext";
-import { ISCrapListItem } from "./list/IScrapListItem";
+import { IScrapListItem } from "./list/IScrapListItem";
 import { ReadonlyTitle } from "../../overview/ReadonlyTitle";
 import { ParseableDate } from "../edit/ParseableDate";
 
@@ -77,7 +77,7 @@ export const ScrapInner: React.FC = () => {
         return notes;
 
       case ScrapType.List:
-        return (JSON.parse(notes) as ISCrapListItem[])[0].label;
+        return (JSON.parse(notes) as IScrapListItem[])[0].label;
 
       default:
         throw new Error(`Unknown scrap type ${scrapToRender.scrapType}`);

app/src/components/details/scraps/list/IScrapListItem.ts

@@ -1,4 +1,4 @@
-export interface ISCrapListItem {
+export interface IScrapListItem {
   label: string;
   isCompleted: boolean;
   depth: number;

app/src/components/details/scraps/list/ListItemCollection.ts

@@ -1,11 +1,11 @@
 import React from "react";
-import { ISCrapListItem } from "./IScrapListItem";
+import { IScrapListItem } from "./IScrapListItem";
 import { ListItemWrapper } from "./ListItemWrapper";
 
 export class ListItemCollection {
   private wrappedItems: ListItemWrapper[];
 
-  get items(): ISCrapListItem[] {
+  get items(): IScrapListItem[] {
     return this.wrappedItems.map((i) => i.raw);
   }
 
@@ -14,8 +14,8 @@ export class ListItemCollection {
   }
 
   constructor(
-    rawItems: ISCrapListItem[],
-    private onChange: (rawItems: ISCrapListItem[]) => void,
+    rawItems: IScrapListItem[],
+    private onChange: (rawItems: IScrapListItem[]) => void,
   ) {
     this.wrappedItems = rawItems.map((i) => new ListItemWrapper(i));
   }
@@ -64,7 +64,7 @@ export class ListItemCollection {
     this.fireOnChange();
   }
 
-  updateItem(index: number, updatedItem: ISCrapListItem) {
+  updateItem(index: number, updatedItem: IScrapListItem) {
     if (!this.wrappedItems[index]) {
       // we cannot update an item, that does not exist anymore.
       // hack: we simply return here. the better solution would be to prevent

app/src/components/details/scraps/list/ListItemWrapper.ts

@@ -1,18 +1,18 @@
-import { ISCrapListItem } from "./IScrapListItem";
+import { IScrapListItem } from "./IScrapListItem";
 import React from "react";
 
 export class ListItemWrapper {
-  constructor(private item: ISCrapListItem) {}
+  constructor(private item: IScrapListItem) {}
 
   private ref: React.MutableRefObject<HTMLInputElement>;
 
   readonly reactKey = "react-key-" + Math.random().toString().split(".")[1];
 
-  get raw(): ISCrapListItem {
+  get raw(): IScrapListItem {
     return this.item;
   }
 
-  set raw(value: ISCrapListItem) {
+  set raw(value: IScrapListItem) {
     this.item = value;
   }
 

app/src/components/details/scraps/list/ScrapList.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo } from "react";
 import { styled, Typography, useTheme } from "@mui/material";
 import { ScrapListItem } from "./ScrapListItem";
 import { ListItemCollection } from "./ListItemCollection";
-import { ISCrapListItem } from "./IScrapListItem";
+import { IScrapListItem } from "./IScrapListItem";
 import {
   closestCenter,
   DndContext,
@@ -42,7 +42,7 @@ export const ScrapList: React.FC = () => {
   } = useScrapContext();
 
   const listItemCollection = useMemo(() => {
-    const items: ISCrapListItem[] = notes ? JSON.parse(notes) : [];
+    const items: IScrapListItem[] = notes ? JSON.parse(notes) : [];
     return new ListItemCollection(items, (rawItems) =>
       setNotes(getItemsAsJson(rawItems)),
     );
@@ -134,7 +134,10 @@ export const ScrapList: React.FC = () => {
     return [
       {
         onClick: () => {
-          changeScrapType([], ScrapType.Markdown);
+          changeScrapType(
+            listItemCollection.items.map((i) => i.label),
+            ScrapType.Markdown,
+          );
         },
         key: "toggle-type",
         icon: <StarHalf />,
@@ -169,7 +172,7 @@ export const ScrapList: React.FC = () => {
   }
 };
 
-function getItemsAsJson(rawItems: ISCrapListItem[]) {
+function getItemsAsJson(rawItems: IScrapListItem[]) {
   return JSON.stringify(rawItems);
 }
 

app/src/components/details/scraps/list/ScrapListItem.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
-import { ISCrapListItem } from "./IScrapListItem";
+import { IScrapListItem } from "./IScrapListItem";
 import { Checkbox, styled } from "@mui/material";
 import { DragIndicator, RemoveCircleOutline } from "@mui/icons-material";
 import { AutogrowTextField } from "../../../common/AutogrowTextField";
@@ -13,9 +13,9 @@ import { CSS } from "@dnd-kit/utilities";
 export const ScrapListItem: React.FC<{
   listItemsCollection: ListItemCollection;
   index: number;
-  listItem: ISCrapListItem;
+  listItem: IScrapListItem;
   isEditMode: boolean;
-  onChange: (listItem: ISCrapListItem) => void;
+  onChange: (listItem: IScrapListItem) => void;
 }> = ({ listItemsCollection, index, isEditMode, listItem, onChange }) => {
   const [label, setLabel] = useState(listItem.label);
   const ref: React.MutableRefObject<HTMLInputElement> = useRef(null);