Add image placeholder and upload indicating frame (#1666)

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
Co-authored-by: Philip Molares <philip.molares@udo.edu>

src/redux/note-details/methods.ts

@@ -7,6 +7,7 @@
 import { store } from '..'
 import type { NoteDto } from '../../api/notes/types'
 import type {
+  ReplaceInMarkdownContentAction,
   SetNoteDetailsFromServerAction,
   SetNoteDocumentContentAction,
   UpdateNoteTitleByFirstHeadingAction,
@@ -49,6 +50,7 @@ export const updateNoteTitleByFirstHeading = (firstHeading?: string): void => {
 
 /**
  * Changes a checkbox state in the note document content. Triggered when a checkbox in the rendering is clicked.
+ *
  * @param lineInDocumentContent The line in the document content to change.
  * @param checked true if the checkbox is checked, false otherwise.
  */
@@ -59,3 +61,17 @@ export const setCheckboxInMarkdownContent = (lineInDocumentContent: number, chec
     changedLine: lineInDocumentContent
   } as UpdateTaskListCheckboxAction)
 }
+
+/**
+ * Replaces a string in the markdown content in the global application state.
+ *
+ * @param replaceable The string that should be replaced
+ * @param replacement The replacement for the replaceable
+ */
+export const replaceInMarkdownContent = (replaceable: string, replacement: string): void => {
+  store.dispatch({
+    type: NoteDetailsActionType.REPLACE_IN_MARKDOWN_CONTENT,
+    placeholder: replaceable,
+    replacement
+  } as ReplaceInMarkdownContentAction)
+}

src/redux/note-details/reducer.ts

@@ -28,11 +28,29 @@ export const NoteDetailsReducer: Reducer<NoteDetails, NoteDetailsActions> = (
       return buildStateFromServerDto(action.dto)
     case NoteDetailsActionType.UPDATE_TASK_LIST_CHECKBOX:
       return buildStateFromTaskListUpdate(state, action.changedLine, action.checkboxChecked)
+    case NoteDetailsActionType.REPLACE_IN_MARKDOWN_CONTENT:
+      return buildStateFromDocumentContentReplacement(state, action.placeholder, action.replacement)
     default:
       return state
   }
 }
 
+/**
+ * Builds a {@link NoteDetails} redux state with a modified markdown content.
+ *
+ * @param state The previous redux state
+ * @param replaceable The string that should be replaced in the old markdown content
+ * @param replacement The string that should replace the replaceable
+ * @return An updated {@link NoteDetails} redux state
+ */
+const buildStateFromDocumentContentReplacement = (
+  state: NoteDetails,
+  replaceable: string,
+  replacement: string
+): NoteDetails => {
+  return buildStateFromMarkdownContentUpdate(state, state.markdownContent.replaceAll(replaceable, replacement))
+}
+
 /**
  * Builds a {@link NoteDetails} redux state from a DTO received as an API response.
  * @param dto The first DTO received from the API containing the relevant information about the note.

src/redux/note-details/types.ts

@@ -11,7 +11,8 @@ export enum NoteDetailsActionType {
   SET_DOCUMENT_CONTENT = 'note-details/content/set',
   SET_NOTE_DATA_FROM_SERVER = 'note-details/data/server/set',
   UPDATE_NOTE_TITLE_BY_FIRST_HEADING = 'note-details/update-note-title-by-first-heading',
-  UPDATE_TASK_LIST_CHECKBOX = 'note-details/update-task-list-checkbox'
+  UPDATE_TASK_LIST_CHECKBOX = 'note-details/update-task-list-checkbox',
+  REPLACE_IN_MARKDOWN_CONTENT = 'note-details/replace-in-markdown-content'
 }
 
 export type NoteDetailsActions =
@@ -19,6 +20,7 @@ export type NoteDetailsActions =
   | SetNoteDetailsFromServerAction
   | UpdateNoteTitleByFirstHeadingAction
   | UpdateTaskListCheckboxAction
+  | ReplaceInMarkdownContentAction
 
 /**
  * Action for updating the document content of the currently loaded note.
@@ -52,3 +54,9 @@ export interface UpdateTaskListCheckboxAction extends Action<NoteDetailsActionTy
   changedLine: number
   checkboxChecked: boolean
 }
+
+export interface ReplaceInMarkdownContentAction extends Action<NoteDetailsActionType> {
+  type: NoteDetailsActionType.REPLACE_IN_MARKDOWN_CONTENT
+  placeholder: string
+  replacement: string
+}