From b4a09bfc5d2021fe85b850ca064c3eeead2e6f1b Mon Sep 17 00:00:00 2001
From: Luna-Klatzer <dev@lklatzer.com>
Date: Wed, 6 Nov 2024 15:16:01 +0100
Subject: [PATCH] major (#226): Implemented client-side state management

---
 .../src/components/common/InfoBox.vue         |    3 +-
 .../editor-settings/CollaboratorCard.vue      |    5 +-
 .../editor-settings/CollaboratorList.vue      |    7 +-
 solardoc/frontend/src/plugins/constants.ts    |  109 +-
 .../editor/ot/client/awaiting-confirm.ts      |  101 ++
 .../editor/ot/client/awaiting-with-buffer.ts  |  119 ++
 .../src/scripts/editor/ot/client/ot-client.ts |  130 ++
 .../src/scripts/editor/ot/client/ot-state.ts  |   70 +
 .../src/scripts/editor/ot/client/range.ts     |   84 ++
 .../src/scripts/editor/ot/client/selection.ts |  102 ++
 .../scripts/editor/ot/client/synchronised.ts  |   77 ++
 .../src/scripts/editor/ot/ot-logic-error.ts   |    4 +
 .../src/scripts/editor/ot/single-operation.ts |   18 +-
 .../src/scripts/editor/ot/text-operation.ts   |  361 ++---
 .../src/scripts/editor/ot/transform-ot.ts     |    2 +-
 .../phoenix/gen/phoenix-rest-service.ts       | 1162 ++++++++++-------
 .../render/gen/backend-rest-service.ts        |  248 ++--
 solardoc/frontend/src/stores/current-file.ts  |   45 +-
 18 files changed, 1788 insertions(+), 859 deletions(-)
 create mode 100644 solardoc/frontend/src/scripts/editor/ot/client/awaiting-confirm.ts
 create mode 100644 solardoc/frontend/src/scripts/editor/ot/client/awaiting-with-buffer.ts
 create mode 100644 solardoc/frontend/src/scripts/editor/ot/client/ot-client.ts
 create mode 100644 solardoc/frontend/src/scripts/editor/ot/client/ot-state.ts
 create mode 100644 solardoc/frontend/src/scripts/editor/ot/client/range.ts
 create mode 100644 solardoc/frontend/src/scripts/editor/ot/client/selection.ts
 create mode 100644 solardoc/frontend/src/scripts/editor/ot/client/synchronised.ts

diff --git a/solardoc/frontend/src/components/common/InfoBox.vue b/solardoc/frontend/src/components/common/InfoBox.vue
index e6ba80ee..731cac01 100644
--- a/solardoc/frontend/src/components/common/InfoBox.vue
+++ b/solardoc/frontend/src/components/common/InfoBox.vue
@@ -5,7 +5,8 @@ defineProps<{ infoText: any }>()
 <template>
   <span class="info-box-wrapper">
     <span class="info-box">
-      <span class="info-box-content"><code>{{ infoText }}</code></span
+      <span class="info-box-content"
+        ><code>{{ infoText }}</code></span
       >
     </span>
   </span>
diff --git a/solardoc/frontend/src/components/editor/dropdown/editor-settings/CollaboratorCard.vue b/solardoc/frontend/src/components/editor/dropdown/editor-settings/CollaboratorCard.vue
index 86005b26..abbd004c 100644
--- a/solardoc/frontend/src/components/editor/dropdown/editor-settings/CollaboratorCard.vue
+++ b/solardoc/frontend/src/components/editor/dropdown/editor-settings/CollaboratorCard.vue
@@ -13,7 +13,7 @@ import {
   PhoenixBadRequestError,
   PhoenixInternalError,
 } from '@/services/phoenix/errors'
-import UserRef from "@/components/common/UserRef.vue";
+import UserRef from '@/components/common/UserRef.vue'
 
 const props = defineProps<{ filePermission: FilePermission }>()
 const permissionValue = ref(props.filePermission.permission === 3)
@@ -64,7 +64,8 @@ async function saveChanges() {
 <template>
   <div id="user-permission-card">
     <p>
-      <span>User:</span><UserRef :id="filePermission.user_id" :user-name="filePermission.username" />
+      <span>User:</span
+      ><UserRef :id="filePermission.user_id" :user-name="filePermission.username" />
     </p>
     <p>
       <span id="permission-text">Permission:</span>
diff --git a/solardoc/frontend/src/components/editor/dropdown/editor-settings/CollaboratorList.vue b/solardoc/frontend/src/components/editor/dropdown/editor-settings/CollaboratorList.vue
index 583181e0..5e838556 100644
--- a/solardoc/frontend/src/components/editor/dropdown/editor-settings/CollaboratorList.vue
+++ b/solardoc/frontend/src/components/editor/dropdown/editor-settings/CollaboratorList.vue
@@ -10,7 +10,7 @@ import {
   PhoenixInternalError,
 } from '@/services/phoenix/errors'
 import CollaboratorCard from '@/components/editor/dropdown/editor-settings/CollaboratorCard.vue'
-import type {FilePermission, FilePermissions} from "@/services/phoenix/api-service";
+import type { FilePermission, FilePermissions } from '@/services/phoenix/api-service'
 
 const currentFileStore = useCurrentFileStore()
 const currentUserStore = useCurrentUserStore()
@@ -23,7 +23,10 @@ const permissionUsers = ref<Array<FilePermission>>([])
 async function fetchFilePermissions(bearerToken: string) {
   let resp: Awaited<ReturnType<typeof phoenixRestService.getV2FilesByFileIdPermissions>>
   try {
-    resp = await phoenixRestService.getV2FilesByFileIdPermissions(bearerToken, currentFileStore.fileId!)
+    resp = await phoenixRestService.getV2FilesByFileIdPermissions(
+      bearerToken,
+      currentFileStore.fileId!,
+    )
   } catch (e) {
     throw new PhoenixInternalError(
       'Critically failed to fetch file permissions for file. Cause: ' + (<Error>e).message,
diff --git a/solardoc/frontend/src/plugins/constants.ts b/solardoc/frontend/src/plugins/constants.ts
index 674fb7a1..d2ef9f61 100644
--- a/solardoc/frontend/src/plugins/constants.ts
+++ b/solardoc/frontend/src/plugins/constants.ts
@@ -47,60 +47,61 @@ export default Object.freeze({
     },
   } satisfies { [key: string]: { title: string; text: string } },
   defaultFileName: 'untitled.adoc',
-  defaultFileContent: '= Welcome to SolarDoc\n' +
-      ':revealjs_theme: dracula\n' +
-      ':revealjs_progress: true\n' +
-      '\n' +
-      '== Getting Started\n' +
-      '\n' +
-      '*AsciiDoc* - a powerful, simple markup language.\n' +
-      '\n' +
-      '- Lightweight\n' +
-      '- Converts to many formats\n' +
-      '- Perfect for presentations!\n' +
-      '\n' +
-      '== Headings & Text Styles\n' +
-      '\n' +
-      '=== Subheading Example\n' +
-      'Basic paragraph of text with **bold**, _italic_, and `monospaced` styles.\n' +
-      '\n' +
-      '== Lists\n' +
-      '\n' +
-      '. First ordered item\n' +
-      '. Second ordered item\n' +
-      '. Third ordered item\n' +
-      '\n' +
-      '* Unordered item A\n' +
-      '* Unordered item B\n' +
-      '\n' +
-      '== Code Example\n' +
-      '\n' +
-      '[source,python]\n' +
-      '----\n' +
-      '# Simple Python function\n' +
-      'def greet(name):\n' +
-      '    return f"Hello, {name}!"\n' +
-      'print(greet("AsciiDoc"))\n' +
-      '----\n' +
-      '\n' +
-      '== Tables\n' +
-      '\n' +
-      '[cols="1,1,1", options="header"]\n' +
-      '|===\n' +
-      '| Header 1 | Header 2 | Header 3\n' +
-      '| A1       | A2       | A3\n' +
-      '| B1       | B2       | B3\n' +
-      '|===\n' +
-      '\n' +
-      '== Images\n' +
-      '\n' +
-      'image::https://i0.wp.com/picjumbo.com/wp-content/uploads/portrait-of-a-cat-lying-in-a-sweater-free-image.jpeg?w=600&quality=80[width=800, align="center"]\n' +
-      '\n' +
-      '== Links\n' +
-      '\n' +
-      'https://asciidoctor.org[AsciiDoctor Site]\n' +
-      '\n' +
-      '== Enjoy!',
+  defaultFileContent:
+    '= Welcome to SolarDoc\n' +
+    ':revealjs_theme: dracula\n' +
+    ':revealjs_progress: true\n' +
+    '\n' +
+    '== Getting Started\n' +
+    '\n' +
+    '*AsciiDoc* - a powerful, simple markup language.\n' +
+    '\n' +
+    '- Lightweight\n' +
+    '- Converts to many formats\n' +
+    '- Perfect for presentations!\n' +
+    '\n' +
+    '== Headings & Text Styles\n' +
+    '\n' +
+    '=== Subheading Example\n' +
+    'Basic paragraph of text with **bold**, _italic_, and `monospaced` styles.\n' +
+    '\n' +
+    '== Lists\n' +
+    '\n' +
+    '. First ordered item\n' +
+    '. Second ordered item\n' +
+    '. Third ordered item\n' +
+    '\n' +
+    '* Unordered item A\n' +
+    '* Unordered item B\n' +
+    '\n' +
+    '== Code Example\n' +
+    '\n' +
+    '[source,python]\n' +
+    '----\n' +
+    '# Simple Python function\n' +
+    'def greet(name):\n' +
+    '    return f"Hello, {name}!"\n' +
+    'print(greet("AsciiDoc"))\n' +
+    '----\n' +
+    '\n' +
+    '== Tables\n' +
+    '\n' +
+    '[cols="1,1,1", options="header"]\n' +
+    '|===\n' +
+    '| Header 1 | Header 2 | Header 3\n' +
+    '| A1       | A2       | A3\n' +
+    '| B1       | B2       | B3\n' +
+    '|===\n' +
+    '\n' +
+    '== Images\n' +
+    '\n' +
+    'image::https://i0.wp.com/picjumbo.com/wp-content/uploads/portrait-of-a-cat-lying-in-a-sweater-free-image.jpeg?w=600&quality=80[width=800, align="center"]\n' +
+    '\n' +
+    '== Links\n' +
+    '\n' +
+    'https://asciidoctor.org[AsciiDoctor Site]\n' +
+    '\n' +
+    '== Enjoy!',
   saveStates: {
     shared: 'Shared File',
     local: 'Saved Locally',
diff --git a/solardoc/frontend/src/scripts/editor/ot/client/awaiting-confirm.ts b/solardoc/frontend/src/scripts/editor/ot/client/awaiting-confirm.ts
new file mode 100644
index 00000000..f8b67236
--- /dev/null
+++ b/solardoc/frontend/src/scripts/editor/ot/client/awaiting-confirm.ts
@@ -0,0 +1,101 @@
+/**
+ * @file awaiting-confirm.ts
+ * @since 1.0.0
+ * @author Luna Klatzer
+ *
+ * This file contains the implementation of the AwaitingConfirm class and is based on the original implementation in
+ * ot.js from Tim Baumann and as such will be licensed under the MIT license.
+ *
+ * License:
+ *
+ * Copyright © 2012-2014 Tim Baumann, http://timbaumann.info
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the “Software”), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+import  { type OTBaseClient } from '@/scripts/editor/ot/client/ot-client'
+import type { TextTransformation } from '@/scripts/editor/ot/text-operation'
+import  { type OTState } from '@/scripts/editor/ot/client/ot-state'
+import {AwaitingWithBuffer} from "@/scripts/editor/ot/client/awaiting-with-buffer";
+import {Synchronised} from "@/scripts/editor/ot/client/synchronised";
+import type {Selection} from "@/scripts/editor/ot/client/selection";
+
+/**
+ * Represents the state of the client when it is waiting for the server to acknowledge an operation.
+ * @since 1.0.0
+ */
+export class AwaitingConfirm extends OTState {
+  private readonly _outstanding: TextTransformation
+
+  constructor(outstanding: TextTransformation) {
+    this._outstanding = outstanding
+  }
+
+  /**
+   * The outstanding operation that has not been acknowledged by the server.
+   * @since 1.0.0
+   */
+  get outstanding(): TextTransformation {
+    return this._outstanding
+  }
+
+  /**
+   * Applies the client operation to the state. We don't send it to the server immediately but buffer it.
+   * @param client The client to apply the operation to.
+   * @param operation The operation to apply.
+   */
+  async applyClient(client: OTBaseClient, operation: TextTransformation): Promise<OTState> {
+    return new AwaitingWithBuffer(this._outstanding, operation)
+  }
+
+  /**
+   * This is another client's operation. Visualization:
+   *
+   *                    /\
+   *  this.outstanding /  \ operation
+   *                  /    \
+   *                  \    /
+   *   pair[1]         \  / pair[0] (new outstanding)
+   *   (can be applied  \/
+   *   to the client's
+   *   current document)
+   * @param client The client to apply the operation to.
+   * @param operation The operation from the server to apply.
+   */
+  async applyServer(client: OTBaseClient, operation: TextTransformation): Promise<OTState> {
+    const pair = TextTransformation.transform(this._outstanding, operation)
+    await client.applyOperation(pair[1])
+    return new AwaitingConfirm(pair[0])
+  }
+
+  async serverAck(): Promise<OTState> {
+    return Synchronised.instance
+  }
+
+  async transformSelection(selection: Selection): Promise<Selection> {
+    return selection.transform(this._outstanding)
+  }
+
+  /**
+   * Resends the outstanding operation to the server.
+   * @param client The client to resend the operation to.
+   */
+  async resend(client: OTBaseClient): Promise<void> {
+    await client.sendOperation(client.revision, this._outstanding)
+  }
+}
diff --git a/solardoc/frontend/src/scripts/editor/ot/client/awaiting-with-buffer.ts b/solardoc/frontend/src/scripts/editor/ot/client/awaiting-with-buffer.ts
new file mode 100644
index 00000000..358f1894
--- /dev/null
+++ b/solardoc/frontend/src/scripts/editor/ot/client/awaiting-with-buffer.ts
@@ -0,0 +1,119 @@
+/**
+ * @file awaiting-with-buffer.ts
+ * @since 1.0.0
+ * @author Luna Klatzer
+ *
+ * This file contains the implementation of the AwaitingWithBuffer class and is based on the original implementation in
+ * ot.js from Tim Baumann and as such will be licensed under the MIT license.
+ *
+ * License:
+ *
+ * Copyright © 2012-2014 Tim Baumann, http://timbaumann.info
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the “Software”), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+import type { TextTransformation } from '@/scripts/editor/ot/text-operation'
+import type {OTBaseClient} from "@/scripts/editor/ot/client/ot-client";
+import {AwaitingConfirm} from "@/scripts/editor/ot/client/awaiting-confirm";
+import {OTState} from "@/scripts/editor/ot/client/ot-state";
+import type {Selection} from "@/scripts/editor/ot/client/selection";
+
+export class AwaitingWithBuffer extends OTState {
+  private readonly _outstanding: TextTransformation
+  private readonly _buffer: TextTransformation
+
+  constructor(outstanding: TextTransformation, buffer: TextTransformation) {
+    this._outstanding = outstanding
+    this._buffer = buffer
+  }
+
+  /**
+   * The outstanding operation that has not been acknowledged by the server.
+   * @since 1.0.0
+   */
+  get outstanding(): TextTransformation {
+    return this._outstanding
+  }
+
+  /**
+   * The buffer of operations that have not been acknowledged by the server.
+   * @since 1.0.0
+   */
+  get buffer(): TextTransformation {
+    return this._buffer
+  }
+
+  /**
+   * Compose the users changes onto the buffer.
+   * @param client The client to apply the operation to.
+   * @param operation The operation to apply.
+   */
+  async applyClient(client: OTBaseClient, operation: TextTransformation): Promise<AwaitingWithBuffer> {
+    return new AwaitingWithBuffer(this._outstanding, this._buffer.compose(operation))
+  }
+
+  /**
+   * Apply the server operation to the client.
+   *
+   * Operation comes from another client
+   *
+   *                        /\
+   *      this.outstanding /  \ operation
+   *                      /    \
+   *                     /\    /
+   *        this.buffer /  \* / pair1[0] (new outstanding)
+   *                   /    \/
+   *                   \    /
+   *           pair2[1] \  / pair2[0] (new buffer)
+   *  the transformed    \/
+   *  operation -- can be applied to the client's current document
+   * @param client The client to apply the operation to.
+   * @param operation The operation to apply.
+   */
+  async applyServer(client: OTBaseClient, operation: TextTransformation): Promise<AwaitingWithBuffer> {
+    const pair1 = TextTransformation.transform(this.outstanding, operation) // -> [newOutstanding, transformedOperation]
+    const pair2 = TextTransformation.transform(this.buffer, pair1[1]) // -> [newBuffer, transformedOperation]
+    await client.applyServer(pair2[1]) // Apply the transformed received operation to the client's document
+    return new AwaitingWithBuffer(pair1[0], pair2[0])
+  }
+
+  /**
+   * The pending operation has been acknowledged by the server.
+   *
+   * The buffer is now the outstanding operation and the buffer is empty. The client will now wait for the buffer to
+   * acknowledge by the server.
+   * @param client The client to apply the operation to.
+   */
+  async serverAck(client: OTBaseClient): Promise<void> {
+    await client.sendOperation(client.revision, this.buffer)
+    return new AwaitingConfirm(this.buffer)
+  }
+
+  async transformSelection(selection: Selection): Promise<Selection> {
+    return selection.transform(this._outstanding).transform(this._buffer)
+  }
+
+  /**
+   * Resend the outstanding operation to the server.
+   * @param client The client to resend the operation to.
+   */
+  async resend(client: OTBaseClient): Promise<void> {
+    await client.sendOperation(client.revision, this._outstanding)
+  }
+}
diff --git a/solardoc/frontend/src/scripts/editor/ot/client/ot-client.ts b/solardoc/frontend/src/scripts/editor/ot/client/ot-client.ts
new file mode 100644
index 00000000..c72a8a71
--- /dev/null
+++ b/solardoc/frontend/src/scripts/editor/ot/client/ot-client.ts
@@ -0,0 +1,130 @@
+/**
+ * @file ot-client.ts
+ * @since 1.0.0
+ * @author Luna Klatzer
+ *
+ * This file contains the implementation of the OTBaseClient class and is based on the original implementation in
+ * ot.js from Tim Baumann and as such will be licensed under the MIT license.
+ *
+ * License:
+ *
+ * Copyright © 2012-2014 Tim Baumann, http://timbaumann.info
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the “Software”), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+import type { Synchronised } from '@/scripts/editor/ot/client/synchronised'
+import type { TextTransformation } from '@/scripts/editor/ot/text-operation'
+import type {AwaitingConfirm} from "@/scripts/editor/ot/client/awaiting-confirm";
+import type {AwaitingWithBuffer} from "@/scripts/editor/ot/client/awaiting-with-buffer";
+
+/**
+ * The possible states of the OT client.
+ * @since 1.0.0
+ */
+export type State = Synchronised | AwaitingConfirm | AwaitingWithBuffer
+
+/**
+ * The OT client that manages the state of the document.
+ */
+export abstract class OTBaseClient {
+  private _revision: number
+  private _state: State
+
+  protected constructor(revision: number) {
+    this._revision = revision
+    this._state = Synchronised.instance
+  }
+
+  /**
+   * Sets the state of the document.
+   * @param state The state to set.
+   */
+  setState(state: State): void {
+    this._state = state
+  }
+
+  /**
+   * The current state of the document.
+   * @since 1.0.0
+   */
+  getState(): State {
+    return this._state
+  }
+
+  /**
+   * The current revision number of the document.
+   * @since 1.0.0
+   */
+  get revision() {
+    return this._revision
+  }
+
+  /**
+   * Applies the user input to the client.
+   * @param operation The operation to apply.
+   */
+  async applyClient(operation: TextTransformation): Promise<void>  {
+    this.setState(await this.getState().applyClient(operation))
+  }
+
+  /**
+   * Applies the server operation to the client.
+   * @param operation The operation to apply.
+   */
+  async applyServer(operation: TextTransformation): Promise<void>  {
+    this._revision += 1
+    this.setState(await this.getState().applyServer(operation))
+  }
+
+  /**
+   * Acknowledges the server operation.
+   */
+  async serverAck(): Promise<void>  {
+    this._revision += 1
+    this.setState(await this.getState().serverAck())
+  }
+
+  /**
+   * Transforms a selection from the latest known server state to the current client state. For example, if we get from
+   * the server the information that another user's cursor is at position 3, but the server hasn't yet received our
+   * newest operation, an insertion of 5 characters at the beginning of the document, the correct position of the other
+   * user's cursor in our current document is 8.
+   * @param selection The selection to transform.
+   */
+  async transformSelection(selection): Promise<void> {
+    await this.getState().transformSelection(selection)
+  }
+
+  /**
+   * Sends the operation to the server.
+   * @param revision The revision number of the operation.
+   * @param operation The operation to send.
+   * @since 1.0.0
+   * @abstract
+   */
+  abstract sendOperation(revision: number, operation: TextTransformation): Promise<void>
+
+  /**
+   * Applies a server operation to the client.
+   * @param operation The operation to apply.
+   * @since 1.0.0
+   * @abstract
+   */
+  abstract applyOperation(operation: TextTransformation): Promise<void>
+}
diff --git a/solardoc/frontend/src/scripts/editor/ot/client/ot-state.ts b/solardoc/frontend/src/scripts/editor/ot/client/ot-state.ts
new file mode 100644
index 00000000..afa4d918
--- /dev/null
+++ b/solardoc/frontend/src/scripts/editor/ot/client/ot-state.ts
@@ -0,0 +1,70 @@
+/**
+ * @file ot-state.ts
+ * @since 1.0.0
+ * @author Luna Klatzer
+ *
+ * This file contains the implementation of the OTState class and is based on the original implementation in
+ * ot.js from Tim Baumann and as such will be licensed under the MIT license.
+ *
+ * License:
+ *
+ * Copyright © 2012-2014 Tim Baumann, http://timbaumann.info
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the “Software”), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+import type { OTBaseClient } from '@/scripts/editor/ot/client/ot-client'
+import type {TextTransformation} from "@/scripts/editor/ot/text-operation";
+
+/**
+ * The possible states of the OT client.
+ * @since 1.0.0
+ */
+export abstract class OTState {
+  /**
+   * Applies the client operation to the state.
+   * @param client The client to apply the operation to.
+   * @param operation The operation to apply.
+   */
+  abstract applyClient(client: OTBaseClient, operation: TextTransformation): Promise<OTState>
+
+  /**
+   * Applies the server operation to the state.
+   * @param client The client to apply the operation to.
+   * @param operation The operation to apply.
+   */
+  abstract applyServer(client: OTBaseClient, operation: TextTransformation): Promise<OTState>
+
+  /**
+   * Acknowledges the server operation.
+   * @param client
+   */
+  abstract serverAck(client: OTBaseClient): Promise<OTState>
+
+  /**
+   * Transforms the latest known server selection by the given operation.
+   * @param selection
+   */
+  abstract transformSelection(selection: Selection): Promise<Selection>
+
+  /**
+   * Resend the operation to the server in case it was lost.
+   * @param client The client to resend the operation to.
+   */
+  abstract resend(client: OTBaseClient): Promise<void>
+}
diff --git a/solardoc/frontend/src/scripts/editor/ot/client/range.ts b/solardoc/frontend/src/scripts/editor/ot/client/range.ts
new file mode 100644
index 00000000..7cba3216
--- /dev/null
+++ b/solardoc/frontend/src/scripts/editor/ot/client/range.ts
@@ -0,0 +1,84 @@
+/**
+ * @file range.ts
+ * @since 1.0.0
+ * @author Luna Klatzer
+ *
+ * This file contains the implementation of the Range class and is based on the original implementation in
+ * ot.js from Tim Baumann and as such will be licensed under the MIT license.
+ *
+ * License:
+ *
+ * Copyright © 2012-2014 Tim Baumann, http://timbaumann.info
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the “Software”), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+import type { TextTransformation } from '@/scripts/editor/ot/text-operation'
+
+function transformIndex(index: number, operation: TextTransformation): number {
+  let newIndex = index
+  for (const op of operation.ops) {
+    if (op.isRetain) {
+      index -= op.length
+    } else if (op.isInsert) {
+      newIndex += op.text.length
+    } else {
+      // Delete
+      newIndex -= Math.min(index, op.length)
+      index -= op.length
+    }
+
+    if (index < 0) {
+      return newIndex
+    }
+  }
+  return newIndex
+}
+
+/**
+ * Represents a range or cursor in the document.
+ * @since 1.0.0
+ */
+export class Range {
+  /**
+   * Create a new range.
+   * @param anchor The anchor of the range. The position that doesn't move when the range is extended.
+   * @param head The head of the range. The position that moves when the range is extended. May be equal to the anchor
+   * to indicate a cursor.
+   */
+  constructor(
+    public anchor: number,
+    public head: number,
+  ) {}
+
+  equals(other: Range): boolean {
+    return this.anchor === other.anchor && this.head === other.head
+  }
+
+  isEmpty(): boolean {
+    return this.anchor === this.head
+  }
+
+  transform(operation: TextTransformation): Range {
+    const newAnchor = transformIndex(this.anchor, operation)
+    if (this.anchor === this.head) {
+      return new Range(newAnchor, newAnchor)
+    }
+    return new Range(newAnchor, transformIndex(this.head, operation))
+  }
+}
diff --git a/solardoc/frontend/src/scripts/editor/ot/client/selection.ts b/solardoc/frontend/src/scripts/editor/ot/client/selection.ts
new file mode 100644
index 00000000..2e0c9c85
--- /dev/null
+++ b/solardoc/frontend/src/scripts/editor/ot/client/selection.ts
@@ -0,0 +1,102 @@
+/**
+ * @file selection.ts
+ * @since 1.0.0
+ * @author Luna Klatzer
+ *
+ * This file contains the implementation of the Selection class and is based on the original implementation in
+ * ot.js from Tim Baumann and as such will be licensed under the MIT license.
+ *
+ * License:
+ *
+ * Copyright © 2012-2014 Tim Baumann, http://timbaumann.info
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the “Software”), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+import { Range } from '@/scripts/editor/ot/client/range'
+
+function sortRanges(ranges: Array<Range>): Array<Range> {
+  return ranges.slice().sort((a, b) => a.anchor - b.anchor || a.head - b.head)
+}
+
+/**
+ * A selection is a collection of ranges. Every range represents a cursor or a selection range in the document.
+ */
+export class Selection {
+  private readonly _ranges: Array<Range>
+
+  constructor(ranges: Array<Range> = []) {
+    this._ranges = ranges
+  }
+
+  get ranges(): Array<Range> {
+    return this._ranges
+  }
+
+  /**
+   * Checks whether this selection is identical to another selection.
+   * @param other The other selection to compare to.
+   */
+  equals(other: Selection): boolean {
+    if (this._ranges.length !== other._ranges.length) {
+      return false
+    }
+    const sortedRanges = sortRanges(this._ranges)
+    const sortedOtherRanges = sortRanges(other._ranges)
+    for (let i = 0; i < this._ranges.length; i++) {
+      if (!sortedRanges[i].equals(sortedOtherRanges[i])) {
+        return false
+      }
+    }
+    return true
+  }
+
+  /**
+   * Transforms the selection by the given operation.
+   * @param anchor The anchor of the operation.
+   */
+  createCursor(anchor: number): Selection {
+    return new Selection([new Range(anchor, anchor)])
+  }
+
+  /**
+   * Returns true if any of the ranges in the selection is not a cursor.
+   */
+  isSomethingSelected(): boolean {
+    return this._ranges.some(range => !range.isEmpty())
+  }
+
+  /**
+   * Transforms the selection by the given operation.
+   *
+   * In this case this just means returning the most recent selection i.e. {@link other}
+   * @param other The operation to transform the selection by.
+   */
+  compose(other: Selection): Selection {
+    return other
+  }
+
+  /**
+   * Updates all selection according to the given operation.
+   * @param operation The operation to transform the selection by.
+   */
+  transform(operation: TextTransformation): Selection {
+    const newRanges = this._ranges.map(range => range.transform(operation))
+    return new Selection(newRanges)
+  }
+}
diff --git a/solardoc/frontend/src/scripts/editor/ot/client/synchronised.ts b/solardoc/frontend/src/scripts/editor/ot/client/synchronised.ts
new file mode 100644
index 00000000..2c10ee19
--- /dev/null
+++ b/solardoc/frontend/src/scripts/editor/ot/client/synchronised.ts
@@ -0,0 +1,77 @@
+/**
+ * @file synchronised.ts
+ * @since 1.0.0
+ * @author Luna Klatzer
+ *
+ * This file contains the implementation of the Synchronised class and is based on the original implementation in
+ * ot.js from Tim Baumann and as such will be licensed under the MIT license.
+ *
+ * License:
+ *
+ * Copyright © 2012-2014 Tim Baumann, http://timbaumann.info
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the “Software”), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+import { OTState } from '@/scripts/editor/ot/client/ot-state'
+import type { OTBaseClient } from '@/scripts/editor/ot/client/ot-client'
+import type {TextTransformation} from "@/scripts/editor/ot/text-operation";
+import {AwaitingConfirm} from "@/scripts/editor/ot/client/awaiting-confirm";
+import {OTLogicError} from "@/scripts/editor/ot/ot-logic-error";
+
+/**
+ * Singleton class that manages the synchronisation of the editor with the server.
+ * @since 1.0.0
+ */
+export class Synchronised extends OTState {
+  private static _instance: Synchronised
+  private constructor() {}
+
+  /**
+   * Returns the singleton instance of the class.
+   * @since 1.0.0
+   */
+  static get instance(): Synchronised {
+    if (!Synchronised._instance) {
+      Synchronised._instance = new Synchronised()
+    }
+    return Synchronised._instance
+  }
+
+  async applyClient(client: OTBaseClient, operation: TextTransformation): Promise<OTState> {
+    await client.sendOperation(client.revision, operation)
+    return new AwaitingConfirm(operation)
+  }
+
+  async applyServer(client: OTBaseClient, operation: TextTransformation): Promise<OTState> {
+    await client.applyOperation(operation)
+    return this
+  }
+
+  async serverAck(client: OTBaseClient): Promise<OTState> {
+    throw new OTLogicError('There is no server operation to acknowledge.')
+  }
+
+  async transformSelection(selection: Selection): Promise<Selection> {
+    return selection
+  }
+
+  resend(): Promise<void> {
+    return Promise.resolve() // No operation to resend
+  }
+}
diff --git a/solardoc/frontend/src/scripts/editor/ot/ot-logic-error.ts b/solardoc/frontend/src/scripts/editor/ot/ot-logic-error.ts
index 367da56c..03ca192a 100644
--- a/solardoc/frontend/src/scripts/editor/ot/ot-logic-error.ts
+++ b/solardoc/frontend/src/scripts/editor/ot/ot-logic-error.ts
@@ -1,3 +1,7 @@
+/**
+ * Error class for OT logic errors.
+ * @since 1.0.0
+ */
 export class OTLogicError extends Error {
   constructor(message: string) {
     super(message)
diff --git a/solardoc/frontend/src/scripts/editor/ot/single-operation.ts b/solardoc/frontend/src/scripts/editor/ot/single-operation.ts
index bf9566a5..35ed06b0 100644
--- a/solardoc/frontend/src/scripts/editor/ot/single-operation.ts
+++ b/solardoc/frontend/src/scripts/editor/ot/single-operation.ts
@@ -1,25 +1,31 @@
-import type {RawOTrans} from "@/services/phoenix/ot-trans";
+import type { RawOTrans } from '@/services/phoenix/ot-trans'
 
 /**
  * Represents a single operation.
  * @since 1.0.0
  */
 export class SingleOperation implements RawOTrans {
-  constructor(public type: 'insert' | 'delete' | 'retain', public content?: string, public length?: number) {}
+  constructor(
+    public type: 'insert' | 'delete' | 'retain',
+    public content?: string,
+    public length?: number,
+  ) {}
 
   get isInsert() {
-    return this.type === 'insert';
+    return this.type === 'insert'
   }
 
   get isDelete() {
-    return this.type === 'delete';
+    return this.type === 'delete'
   }
 
   get isRetain() {
-    return this.type === 'retain';
+    return this.type === 'retain'
   }
 
   equals(other: SingleOperation): boolean {
-    return this.type === other.type && this.content === other.content && this.length === other.length;
+    return (
+      this.type === other.type && this.content === other.content && this.length === other.length
+    )
   }
 }
diff --git a/solardoc/frontend/src/scripts/editor/ot/text-operation.ts b/solardoc/frontend/src/scripts/editor/ot/text-operation.ts
index 152abac9..8e2b1153 100644
--- a/solardoc/frontend/src/scripts/editor/ot/text-operation.ts
+++ b/solardoc/frontend/src/scripts/editor/ot/text-operation.ts
@@ -1,5 +1,5 @@
 /**
- * @file This file contains the implementation of the TextTransformation class.
+ * @file text-operation.ts
  * @since 1.0.0
  * @author Luna Klatzer
  *
@@ -29,8 +29,8 @@
  * THE SOFTWARE.
  */
 
-import type {SingleOperation} from "@/scripts/editor/ot/single-operation";
-import {OTLogicError} from "@/scripts/editor/ot/ot-logic-error";
+import type { SingleOperation } from '@/scripts/editor/ot/single-operation'
+import { OTLogicError } from '@/scripts/editor/ot/ot-logic-error'
 
 /**
  * A class that represents a text transformation.
@@ -38,49 +38,57 @@ import {OTLogicError} from "@/scripts/editor/ot/ot-logic-error";
  * It contains the operations that were applied to the text, the length of the original text, and the length of the
  * transformed text.
  */
-class TextTransformation {
+export class TextTransformation {
   private _ops: SingleOperation[]
   private _baseLength: number
   private _transformedLength: number
 
   constructor() {
-    this.ops = [];
-    this.baseLength = 0;
-    this.transformedLength = 0;
+    this.ops = []
+    this.baseLength = 0
+    this.transformedLength = 0
   }
 
   /**
    * The operations that were applied to the text.
    */
   get ops() {
-    return this._ops;
+    return this._ops
   }
 
   /**
    * The base length is the length of every string that this transformation can be applied to.
    */
   get baseLength() {
-    return this._baseLength;
+    return this._baseLength
   }
 
   /**
    * The transformed length is the result length of applying the transformation to a string of length `baseLength`.
    */
   get transformedLength() {
-    return this._transformedLength;
+    return this._transformedLength
   }
 
   /**
    * Compares this transformation with another transformation.
    */
   equals(other: TextTransformation): boolean {
-    if (this.baseLength !== other.baseLength) { return false; }
-    if (this.targetLength !== other.targetLength) { return false; }
-    if (this.ops.length !== other.ops.length) { return false; }
+    if (this.baseLength !== other.baseLength) {
+      return false
+    }
+    if (this.targetLength !== other.targetLength) {
+      return false
+    }
+    if (this.ops.length !== other.ops.length) {
+      return false
+    }
     for (let i = 0; i < this.ops.length; i++) {
-      if (this.ops[i].type !== other.ops[i].type) { return false; }
+      if (this.ops[i].type !== other.ops[i].type) {
+        return false
+      }
     }
-    return true;
+    return true
   }
 
   /**
@@ -89,19 +97,21 @@ class TextTransformation {
    * @returns This transformation object for chaining.
    */
   retain(length: number): TextTransformation {
-    if (length === 0) { return this; }
-    this._baseLength += length;
-    this._transformedLength += length;
+    if (length === 0) {
+      return this
+    }
+    this._baseLength += length
+    this._transformedLength += length
 
     // Check the last operation and see if it can be merged with the new operation
-    const lastOp = this.ops[this.ops.length - 1];
+    const lastOp = this.ops[this.ops.length - 1]
     if (lastOp && lastOp.isRetain) {
-      lastOp.length += length;
+      lastOp.length += length
     } else {
-      this.ops.push(new SingleOperation('retain', undefined, length));
+      this.ops.push(new SingleOperation('retain', undefined, length))
     }
 
-    return this; // For chaining
+    return this // For chaining
   }
 
   /**
@@ -111,15 +121,15 @@ class TextTransformation {
    */
   insert(text: string): TextTransformation {
     if (text.length === 0) {
-      return this;
+      return this
     }
-    this._transformedLength += text.length;
+    this._transformedLength += text.length
 
     // Check the last operation and see if it can be merged with the new operation
-    const lastOp = this.ops[this.ops.length - 1];
-    const secondLastOp = this.ops[this.ops.length - 2];
+    const lastOp = this.ops[this.ops.length - 1]
+    const secondLastOp = this.ops[this.ops.length - 2]
     if (lastOp && lastOp.isInsert) {
-      lastOp.content += text;
+      lastOp.content += text
     } else if (lastOp.isDelete) {
       // It doesn't matter when an operation is applied whether the operation
       // is delete(3), insert("something") or insert("something"), delete(3).
@@ -128,17 +138,17 @@ class TextTransformation {
       // a document of the right length equal in respect to the `equals` method.
       if (secondLastOp && secondLastOp.isInsert) {
         // -> insert(A), delete(N)
-        secondLastOp.content += text; // Merge with the second last operation
+        secondLastOp.content += text // Merge with the second last operation
       } else {
         // -> insert(A), delete(N)
-        this.ops[this.ops.length - 1] = new SingleOperation('insert', text); // Replace the last operation
-        this.ops.push(new SingleOperation('delete', undefined, lastOp.length)); // Recreate lastOp on top of the stack
+        this.ops[this.ops.length - 1] = new SingleOperation('insert', text) // Replace the last operation
+        this.ops.push(new SingleOperation('delete', undefined, lastOp.length)) // Recreate lastOp on top of the stack
       }
     } else {
-      this.ops.push(new SingleOperation('insert', text));
+      this.ops.push(new SingleOperation('insert', text))
     }
 
-    return this; // For chaining
+    return this // For chaining
   }
 
   /**
@@ -148,19 +158,19 @@ class TextTransformation {
    */
   delete(length: number): TextTransformation {
     if (length === 0) {
-      return this;
+      return this
     }
-    this._baseLength += length; // Delete doesn't change the transformed length, but changes the minimum length of the text
+    this._baseLength += length // Delete doesn't change the transformed length, but changes the minimum length of the text
 
     // Check the last operation and see if it can be merged with the new operation
-    const lastOp = this.ops[this.ops.length - 1];
+    const lastOp = this.ops[this.ops.length - 1]
     if (lastOp && lastOp.isDelete) {
-      lastOp.length += length;
+      lastOp.length += length
     } else {
-      this.ops.push(new SingleOperation('delete', undefined, length));
+      this.ops.push(new SingleOperation('delete', undefined, length))
     }
 
-    return this; // For chaining
+    return this // For chaining
   }
 
   /**
@@ -169,30 +179,33 @@ class TextTransformation {
    */
   apply(text: string): string {
     if (text.length !== this.baseLength) {
-      throw new OTLogicError(`The string is of length ${text.length}, but the transformation can only be applied to texts of length ${this.baseLength}.`);
+      throw new OTLogicError(
+        `The string is of length ${text.length}, but the transformation can only be applied to texts of length ${this.baseLength}.`,
+      )
     }
 
-    const newStr: Array<string> = [];
-    let strIndex = 0;
+    const newStr: Array<string> = []
+    let strIndex = 0
     for (const op of this.ops) {
       if (op.isRetain) {
         if (strIndex + op.length > text.length) {
-          throw new OTLogicError('The retain operation goes beyond the end of the string.');
+          throw new OTLogicError('The retain operation goes beyond the end of the string.')
         }
 
-        newStr.push(text.slice(strIndex, strIndex + op.length));
-        strIndex += op.length;
+        newStr.push(text.slice(strIndex, strIndex + op.length))
+        strIndex += op.length
       } else if (op.isInsert) {
-        newStr.push(op.content);
-      } else { // Delete
-        strIndex += op.length;
+        newStr.push(op.content)
+      } else {
+        // Delete
+        strIndex += op.length
       }
     }
 
     if (strIndex !== text.length) {
-      throw new OTLogicError('The transformation is not valid for the given text.');
+      throw new OTLogicError('The transformation is not valid for the given text.')
     }
-    return newStr.join('');
+    return newStr.join('')
   }
 
   /**
@@ -202,24 +215,25 @@ class TextTransformation {
    * @param str
    */
   invert(str: string): TextTransformation {
-    const inverted = new TextTransformation();
-    inverted.baseLength = this.transformedLength;
-    inverted.transformedLength = this.baseLength;
+    const inverted = new TextTransformation()
+    inverted.baseLength = this.transformedLength
+    inverted.transformedLength = this.baseLength
 
-    let strIndex = 0;
+    let strIndex = 0
     for (const op of this.ops) {
       if (op.isRetain) {
-        inverted.retain(op.length);
-        strIndex += op.length;
+        inverted.retain(op.length)
+        strIndex += op.length
       } else if (op.isInsert) {
-        inverted.delete(op.content.length);
-      } else { // Delete
-        inverted.insert(str.slice(strIndex, strIndex + op.length));
-        strIndex += op.length;
+        inverted.delete(op.content.length)
+      } else {
+        // Delete
+        inverted.insert(str.slice(strIndex, strIndex + op.length))
+        strIndex += op.length
       }
     }
 
-    return inverted;
+    return inverted
   }
 
   /**
@@ -229,94 +243,96 @@ class TextTransformation {
    * @param other The transformation to compose with this transformation.
    */
   compose(other: TextTransformation): TextTransformation {
-    const transf1 = this;
-    const transf2 = other;
+    const transf1 = this
+    const transf2 = other
     if (transf1.transformedLength !== transf2.baseLength) {
-      throw new OTLogicError('The base length of the second transformation must be the target length of the first transformation.');
+      throw new OTLogicError(
+        'The base length of the second transformation must be the target length of the first transformation.',
+      )
     }
 
-    const composed = new TextTransformation();
-    let currOp1: SingleOperation = transf1.ops[0];
-    let currOp2: SingleOperation = transf2.ops[0];
-    let index1 = 1;
-    let index2 = 1;
+    const composed = new TextTransformation()
+    let currOp1: SingleOperation = transf1.ops[0]
+    let currOp2: SingleOperation = transf2.ops[0]
+    let index1 = 1
+    let index2 = 1
 
     while (currOp1 || currOp2) {
       if (currOp1 && currOp1.isDelete) {
-        composed.delete(currOp1.length);
-        currOp1 = transf1.ops[index1++];
-        continue;
+        composed.delete(currOp1.length)
+        currOp1 = transf1.ops[index1++]
+        continue
       } else if (currOp2 && currOp2.isInsert) {
-        composed.insert(currOp2.content);
-        currOp2 = transf2.ops[index2++];
-        continue;
+        composed.insert(currOp2.content)
+        currOp2 = transf2.ops[index2++]
+        continue
       }
 
       if (!currOp1) {
-        throw new OTLogicError('Cannot compose operations: first transformation is too short.');
+        throw new OTLogicError('Cannot compose operations: first transformation is too short.')
       } else if (!currOp2) {
-        throw new OTLogicError('Cannot compose operations: first transformation is too long.');
+        throw new OTLogicError('Cannot compose operations: first transformation is too long.')
       }
 
       if (currOp1.isRetain && currOp2.isRetain) {
         if (currOp1.length > currOp2.length) {
-          composed.retain(currOp2.length);
-          currOp1.length -= currOp2.length;
-          currOp2 = transf2.ops[index2++];
+          composed.retain(currOp2.length)
+          currOp1.length -= currOp2.length
+          currOp2 = transf2.ops[index2++]
         } else if (currOp1.length === currOp2.length) {
-          composed.retain(currOp1.length);
-          currOp1 = transf1.ops[index1++];
-          currOp2 = transf2.ops[index2++];
+          composed.retain(currOp1.length)
+          currOp1 = transf1.ops[index1++]
+          currOp2 = transf2.ops[index2++]
         } else {
-          composed.retain(currOp1.length);
-          currOp2.length -= currOp1.length;
-          currOp1 = transf1.ops[index1++];
+          composed.retain(currOp1.length)
+          currOp2.length -= currOp1.length
+          currOp1 = transf1.ops[index1++]
         }
       } else if (currOp1.isInsert && currOp2.isDelete) {
         if (currOp1.content.length > currOp2.length) {
-          currOp1.content = currOp1.content.slice(currOp2.length);
-          currOp2 = transf2.ops[index2++];
+          currOp1.content = currOp1.content.slice(currOp2.length)
+          currOp2 = transf2.ops[index2++]
         } else if (currOp1.content.length === currOp2.length) {
-          currOp1 = transf1.ops[index1++];
-          currOp2 = transf2.ops[index2++];
+          currOp1 = transf1.ops[index1++]
+          currOp2 = transf2.ops[index2++]
         } else {
-          currOp2.length -= currOp1.content.length;
-          currOp1 = transf1.ops[index1++];
+          currOp2.length -= currOp1.content.length
+          currOp1 = transf1.ops[index1++]
         }
       } else if (currOp1.isInsert && currOp2.isRetain) {
         if (currOp1.content.length > currOp2.length) {
-          composed.insert(currOp1.content.slice(0, currOp2.length));
-          currOp1.content = currOp1.content.slice(currOp2.length);
-          currOp2 = transf2.ops[index2++];
+          composed.insert(currOp1.content.slice(0, currOp2.length))
+          currOp1.content = currOp1.content.slice(currOp2.length)
+          currOp2 = transf2.ops[index2++]
         } else if (currOp1.content.length === currOp2.length) {
-          composed.insert(currOp1.content);
-          currOp1 = transf1.ops[index1++];
-          currOp2 = transf2.ops[index2++];
+          composed.insert(currOp1.content)
+          currOp1 = transf1.ops[index1++]
+          currOp2 = transf2.ops[index2++]
         } else {
-          composed.insert(currOp1.content);
-          currOp2.length -= currOp1.content.length;
-          currOp1 = transf1.ops[index1++];
+          composed.insert(currOp1.content)
+          currOp2.length -= currOp1.content.length
+          currOp1 = transf1.ops[index1++]
         }
       } else if (currOp1.isRetain && currOp2.isDelete) {
         if (currOp1.length > currOp2.length) {
-          composed.delete(currOp2.length);
-          currOp1.length -= currOp2.length;
-          currOp2 = transf2.ops[index2++];
+          composed.delete(currOp2.length)
+          currOp1.length -= currOp2.length
+          currOp2 = transf2.ops[index2++]
         } else if (currOp1.length === currOp2.length) {
-          composed.delete(currOp2.length);
-          currOp1 = transf1.ops[index1++];
-          currOp2 = transf2.ops[index2++];
+          composed.delete(currOp2.length)
+          currOp1 = transf1.ops[index1++]
+          currOp2 = transf2.ops[index2++]
         } else {
-          composed.delete(currOp1.length);
-          currOp2.length -= currOp1.length;
-          currOp1 = transf1.ops[index1++];
+          composed.delete(currOp1.length)
+          currOp2.length -= currOp1.length
+          currOp1 = transf1.ops[index1++]
         }
       } else {
-        throw new OTLogicError('The operations are not compatible.');
+        throw new OTLogicError('The operations are not compatible.')
       }
     }
 
-    return composed;
+    return composed
   }
 
   /**
@@ -327,106 +343,109 @@ class TextTransformation {
    * @param trans1 The transformation to transform.
    * @param trans2 The transformation to transform against.
    */
-  static transform(trans1: TextTransformation, trans2: TextTransformation): [TextTransformation, TextTransformation] {
+  static transform(
+    trans1: TextTransformation,
+    trans2: TextTransformation,
+  ): [TextTransformation, TextTransformation] {
     if (trans1.baseLength !== trans2.baseLength) {
-      throw new OTLogicError('The base lengths of the transformations must be equal.');
+      throw new OTLogicError('The base lengths of the transformations must be equal.')
     }
 
-    const prime1 = new TextTransformation();
-    const prime2 = new TextTransformation();
-    let currOp1: SingleOperation = trans1.ops[0];
-    let currOp2: SingleOperation = trans2.ops[0];
-    let index1 = 1;
-    let index2 = 1;
+    const prime1 = new TextTransformation()
+    const prime2 = new TextTransformation()
+    let currOp1: SingleOperation = trans1.ops[0]
+    let currOp2: SingleOperation = trans2.ops[0]
+    let index1 = 1
+    let index2 = 1
 
     while (currOp1 || currOp2) {
       if (currOp1.isInsert) {
-        prime1.insert(currOp1.content);
-        prime2.retain(currOp1.content.length);
-        currOp1 = trans1.ops[index1++];
-        continue;
+        prime1.insert(currOp1.content)
+        prime2.retain(currOp1.content.length)
+        currOp1 = trans1.ops[index1++]
+        continue
       } else if (currOp2.isInsert) {
-        prime1.retain(currOp2.content.length);
-        prime2.insert(currOp2.content);
-        currOp2 = trans2.ops[index2++];
-        continue;
+        prime1.retain(currOp2.content.length)
+        prime2.insert(currOp2.content)
+        currOp2 = trans2.ops[index2++]
+        continue
       }
 
       if (!currOp1) {
-        throw new OTLogicError('Cannot transform operations: first transformation is too short.');
+        throw new OTLogicError('Cannot transform operations: first transformation is too short.')
       } else if (!currOp2) {
-        throw new OTLogicError('Cannot transform operations: first transformation is too long.');
+        throw new OTLogicError('Cannot transform operations: first transformation is too long.')
       }
 
       if (currOp1.isRetain && currOp2.isRetain) {
         // Case 1: retain/retain
-        let minl: number;
+        let minl: number
         if (currOp1.length > currOp2.length) {
-          minl = currOp2.length;
-          currOp1.length -= currOp2.length;
-          currOp2 = trans2.ops[index2++];
+          minl = currOp2.length
+          currOp1.length -= currOp2.length
+          currOp2 = trans2.ops[index2++]
         } else if (currOp1.length === currOp2.length) {
-          minl = currOp2.length;
-          currOp1 = trans1.ops[index1++];
-          currOp2 = trans2.ops[index2++];
+          minl = currOp2.length
+          currOp1 = trans1.ops[index1++]
+          currOp2 = trans2.ops[index2++]
         } else {
-          minl = currOp1.length;
-          currOp2.length -= currOp1.length;
-          currOp1 = trans1.ops[index1++];
+          minl = currOp1.length
+          currOp2.length -= currOp1.length
+          currOp1 = trans1.ops[index1++]
         }
-        prime1.retain(minl);
-        prime2.retain(minl);
+        prime1.retain(minl)
+        prime2.retain(minl)
       } else if (currOp1.isDelete && currOp2.isDelete) {
         // Case 2: delete/delete -- the order doesn't matter
         if (currOp1.length > currOp2.length) {
-          currOp1.length -= currOp2.length;
-          currOp2 = trans2.ops[index2++];
+          currOp1.length -= currOp2.length
+          currOp2 = trans2.ops[index2++]
         } else if (currOp1.length === currOp2.length) {
-          currOp1 = trans1.ops[index1++];
-          currOp2 = trans2.ops[index2++];
+          currOp1 = trans1.ops[index1++]
+          currOp2 = trans2.ops[index2++]
         } else {
-          currOp2.length -= currOp1.length;
-          currOp1 = trans1.ops[index1++];
+          currOp2.length -= currOp1.length
+          currOp1 = trans1.ops[index1++]
         }
       } else if (currOp1.isDelete && currOp2.isRetain) {
         // Case 3: delete/retain
-        let minl: number;
+        let minl: number
         if (currOp1.length > currOp2.length) {
-          minl = currOp2.length;
-          currOp1.length -= currOp2.length;
-          currOp2 = trans2.ops[index2++];
+          minl = currOp2.length
+          currOp1.length -= currOp2.length
+          currOp2 = trans2.ops[index2++]
         } else if (currOp1.length === currOp2.length) {
-          minl = currOp2.length;
-          currOp1 = trans1.ops[index1++];
-          currOp2 = trans2.ops[index2++];
+          minl = currOp2.length
+          currOp1 = trans1.ops[index1++]
+          currOp2 = trans2.ops[index2++]
         } else {
-          minl = currOp1.length;
-          currOp2.length -= currOp1.length;
-          currOp1 = trans1.ops[index1++];
+          minl = currOp1.length
+          currOp2.length -= currOp1.length
+          currOp1 = trans1.ops[index1++]
         }
-        prime1.delete(minl);
+        prime1.delete(minl)
       } else if (currOp1.isRetain && currOp2.isDelete) {
         // Case 4: retain/delete
-        let minl: number;
+        let minl: number
         if (currOp1.length > currOp2.length) {
-          minl = currOp2.length;
-          currOp1.length -= currOp2.length;
-          currOp2 = trans2.ops[index2++];
+          minl = currOp2.length
+          currOp1.length -= currOp2.length
+          currOp2 = trans2.ops[index2++]
         } else if (currOp1.length === currOp2.length) {
-          minl = currOp2.length;
-          currOp1 = trans1.ops[index1++];
-          currOp2 = trans2.ops[index2++];
+          minl = currOp2.length
+          currOp1 = trans1.ops[index1++]
+          currOp2 = trans2.ops[index2++]
         } else {
-          minl = currOp1.length;
-          currOp2.length -= currOp1.length;
-          currOp1 = trans1.ops[index1++];
+          minl = currOp1.length
+          currOp2.length -= currOp1.length
+          currOp1 = trans1.ops[index1++]
         }
-        prime2.delete(minl);
+        prime2.delete(minl)
       } else {
-        throw new OTLogicError('The operations are not compatible.');
+        throw new OTLogicError('The operations are not compatible.')
       }
     }
 
-    return [prime1, prime2];
+    return [prime1, prime2]
   }
 }
diff --git a/solardoc/frontend/src/scripts/editor/ot/transform-ot.ts b/solardoc/frontend/src/scripts/editor/ot/transform-ot.ts
index c7d328d4..dda3befb 100644
--- a/solardoc/frontend/src/scripts/editor/ot/transform-ot.ts
+++ b/solardoc/frontend/src/scripts/editor/ot/transform-ot.ts
@@ -1,4 +1,4 @@
-import type {OTrans, OTransReqDto, RawOTrans} from "@/services/phoenix/ot-trans";
+import type { OTrans, OTransReqDto, RawOTrans } from '@/services/phoenix/ot-trans'
 
 /**
  * Transform takes two operations A and B that happened concurrently and
diff --git a/solardoc/frontend/src/services/phoenix/gen/phoenix-rest-service.ts b/solardoc/frontend/src/services/phoenix/gen/phoenix-rest-service.ts
index 07677829..a9614a58 100644
--- a/solardoc/frontend/src/services/phoenix/gen/phoenix-rest-service.ts
+++ b/solardoc/frontend/src/services/phoenix/gen/phoenix-rest-service.ts
@@ -4,633 +4,801 @@
  * DO NOT MODIFY - This file has been generated using oazapfts.
  * See https://www.npmjs.com/package/oazapfts
  */
-import * as Oazapfts from "oazapfts/lib/runtime";
-import * as QS from "oazapfts/lib/runtime/query";
+import * as Oazapfts from 'oazapfts/lib/runtime'
+import * as QS from 'oazapfts/lib/runtime/query'
 export const defaults: Oazapfts.RequestOpts = {
-    baseUrl: "http://localhost:4000/phx/api",
-};
-const oazapfts = Oazapfts.runtime(defaults);
+  baseUrl: 'http://localhost:4000/phx/api',
+}
+const oazapfts = Oazapfts.runtime(defaults)
 export const servers = {
-    server1: "http://localhost:4000/phx/api",
-    server2: "https://localhost:4000/phx/api",
-    server3: "ws://localhost:4000/phx/api",
-    server4: "wss://localhost:4000/phx/api"
-};
-export type ErrorsResp = object;
+  server1: 'http://localhost:4000/phx/api',
+  server2: 'https://localhost:4000/phx/api',
+  server3: 'ws://localhost:4000/phx/api',
+  server4: 'wss://localhost:4000/phx/api',
+}
+export type ErrorsResp = object
 export type UserLogin = {
-    email: string;
-    password: string;
-};
+  email: string
+  password: string
+}
 export type UserToken = {
-    expires_at: number;
-    token: string;
-};
+  expires_at: number
+  token: string
+}
 export type UserTrusted = {
-    id: string;
-    username: string;
-};
+  id: string
+  username: string
+}
 export type EditorChannel = {
-    active_since: number;
-    creator: UserTrusted;
-    description: string;
-    id: string;
-    name: string;
-};
-export type EditorChannels = EditorChannel[];
+  active_since: number
+  creator: UserTrusted
+  description: string
+  id: string
+  name: string
+}
+export type EditorChannels = EditorChannel[]
 export type File = {
-    channel_id?: string;
-    content: string;
-    created: number;
-    file_name: string;
-    id: string;
-    is_global: boolean;
-    last_edited: number;
-    owner_id: string;
-};
-export type Files = File[];
+  channel_id?: string
+  content: string
+  created: number
+  file_name: string
+  id: string
+  is_global: boolean
+  last_edited: number
+  owner_id: string
+}
+export type Files = File[]
 export type CreateFile = {
-    content?: string;
-    file_name: string;
-};
+  content?: string
+  file_name: string
+}
 export type GlobalFile = {
-    channel_id?: string;
-    created: number;
-    file_name: string;
-    id: string;
-    is_global: boolean;
-    last_edited: number;
-    organisation: string;
-    owner_id: string;
-    owner_name: string;
-};
-export type GlobalFiles = GlobalFile[];
+  channel_id?: string
+  created: number
+  file_name: string
+  id: string
+  is_global: boolean
+  last_edited: number
+  organisation: string
+  owner_id: string
+  owner_name: string
+}
+export type GlobalFiles = GlobalFile[]
 export type CreateFilePermissions = {
-    file_id: string;
-    permission: number;
-    user_id: string;
-};
+  file_id: string
+  permission: number
+  user_id: string
+}
 export type FilePermission = {
-    file_id: string;
-    id: string;
-    permission: number;
-    user_id: string;
-    username: string;
-};
+  file_id: string
+  id: string
+  permission: number
+  user_id: string
+  username: string
+}
 export type UpdateFilePermissions = {
-    file_id: string;
-    permission: number;
-    user_id: string;
-};
-export type FilePermissions = FilePermission[];
+  file_id: string
+  permission: number
+  user_id: string
+}
+export type FilePermissions = FilePermission[]
 export type UpdateFile = {
-    content?: string;
-    file_name?: string;
-    is_global?: boolean;
-};
+  content?: string
+  file_name?: string
+  is_global?: boolean
+}
 export type Ping = {
-    date: number;
-    greeting: string;
-    ip: string;
-    url: string;
-};
+  date: number
+  greeting: string
+  ip: string
+  url: string
+}
 export type CreateShareUrl = {
-    file_id: string;
-    perms: number;
-};
+  file_id: string
+  perms: number
+}
 export type ShareUrl = {
-    expired: boolean;
-    expires_at: number;
-    file_id: string;
-    id: string;
-    issued_at: number;
-    perms: number;
-};
+  expired: boolean
+  expires_at: number
+  file_id: string
+  id: string
+  issued_at: number
+  perms: number
+}
 export type UserPublic = {
-    id: string;
-};
-export type UsersPublic = UserPublic[];
+  id: string
+}
+export type UsersPublic = UserPublic[]
 export type CreateUser = {
-    email: string;
-    intended_use?: number;
-    organisation?: string;
-    password: string;
-    role?: string;
-    username?: string;
-};
+  email: string
+  intended_use?: number
+  organisation?: string
+  password: string
+  role?: string
+  username?: string
+}
 export type UserPrivate = {
-    confirmed_at?: string;
-    email: string;
-    id: string;
-    intended_use?: number;
-    organisation?: string;
-    role?: string;
-    username?: string;
-};
+  confirmed_at?: string
+  email: string
+  id: string
+  intended_use?: number
+  organisation?: string
+  role?: string
+  username?: string
+}
 /**
  * Log out a user
  */
 export function deleteV2AuthBearer(authorization: string, opts?: Oazapfts.RequestOpts) {
-    return oazapfts.fetchJson<{
-        status: 204;
-    } | {
-        status: 400;
-        data: ErrorsResp;
-    } | {
-        status: 401;
-        data: ErrorsResp;
-    }>("/v2/auth/bearer", {
-        ...opts,
-        method: "DELETE",
-        headers: {
-            ...opts && opts.headers,
-            Authorization: authorization
-        }
-    });
+  return oazapfts.fetchJson<
+    | {
+        status: 204
+      }
+    | {
+        status: 400
+        data: ErrorsResp
+      }
+    | {
+        status: 401
+        data: ErrorsResp
+      }
+  >('/v2/auth/bearer', {
+    ...opts,
+    method: 'DELETE',
+    headers: {
+      ...(opts && opts.headers),
+      Authorization: authorization,
+    },
+  })
 }
 /**
  * Log in a user
  */
 export function postV2AuthBearer(userLogin: UserLogin, opts?: Oazapfts.RequestOpts) {
-    return oazapfts.fetchJson<{
-        status: 201;
-        data: UserToken;
-    } | {
-        status: 400;
-        data: ErrorsResp;
-    } | {
-        status: 401;
-        data: ErrorsResp;
-    }>("/v2/auth/bearer", oazapfts.json({
-        ...opts,
-        method: "POST",
-        body: userLogin
-    }));
+  return oazapfts.fetchJson<
+    | {
+        status: 201
+        data: UserToken
+      }
+    | {
+        status: 400
+        data: ErrorsResp
+      }
+    | {
+        status: 401
+        data: ErrorsResp
+      }
+  >(
+    '/v2/auth/bearer',
+    oazapfts.json({
+      ...opts,
+      method: 'POST',
+      body: userLogin,
+    }),
+  )
 }
 /**
  * List all currently running editor channels
  */
 export function getV2EditorChannels(authorization: string, opts?: Oazapfts.RequestOpts) {
-    return oazapfts.fetchJson<{
-        status: 200;
-        data: EditorChannels;
-    } | {
-        status: 401;
-        data: ErrorsResp;
-    }>("/v2/editor_channels", {
-        ...opts,
-        headers: {
-            ...opts && opts.headers,
-            Authorization: authorization
-        }
-    });
+  return oazapfts.fetchJson<
+    | {
+        status: 200
+        data: EditorChannels
+      }
+    | {
+        status: 401
+        data: ErrorsResp
+      }
+  >('/v2/editor_channels', {
+    ...opts,
+    headers: {
+      ...(opts && opts.headers),
+      Authorization: authorization,
+    },
+  })
 }
 /**
  * Get a single editor channel
  */
-export function getV2EditorChannelsById(authorization: string, id: string, opts?: Oazapfts.RequestOpts) {
-    return oazapfts.fetchJson<{
-        status: 200;
-        data: EditorChannel;
-    } | {
-        status: 401;
-        data: ErrorsResp;
-    } | {
-        status: 404;
-        data: ErrorsResp;
-    }>(`/v2/editor_channels/${encodeURIComponent(id)}`, {
-        ...opts,
-        headers: {
-            ...opts && opts.headers,
-            Authorization: authorization
-        }
-    });
+export function getV2EditorChannelsById(
+  authorization: string,
+  id: string,
+  opts?: Oazapfts.RequestOpts,
+) {
+  return oazapfts.fetchJson<
+    | {
+        status: 200
+        data: EditorChannel
+      }
+    | {
+        status: 401
+        data: ErrorsResp
+      }
+    | {
+        status: 404
+        data: ErrorsResp
+      }
+  >(`/v2/editor_channels/${encodeURIComponent(id)}`, {
+    ...opts,
+    headers: {
+      ...(opts && opts.headers),
+      Authorization: authorization,
+    },
+  })
 }
 /**
  * List all files owned by the current user
  */
 export function getV2Files(authorization: string, opts?: Oazapfts.RequestOpts) {
-    return oazapfts.fetchJson<{
-        status: 200;
-        data: Files;
-    } | {
-        status: 401;
-        data: ErrorsResp;
-    }>("/v2/files", {
-        ...opts,
-        headers: {
-            ...opts && opts.headers,
-            Authorization: authorization
-        }
-    });
+  return oazapfts.fetchJson<
+    | {
+        status: 200
+        data: Files
+      }
+    | {
+        status: 401
+        data: ErrorsResp
+      }
+  >('/v2/files', {
+    ...opts,
+    headers: {
+      ...(opts && opts.headers),
+      Authorization: authorization,
+    },
+  })
 }
 /**
  * Create a new file
  */
-export function postV2Files(authorization: string, createFile: CreateFile, opts?: Oazapfts.RequestOpts) {
-    return oazapfts.fetchJson<{
-        status: 201;
-        data: File;
-    } | {
-        status: 400;
-        data: ErrorsResp;
-    } | {
-        status: 401;
-        data: ErrorsResp;
-    }>("/v2/files", oazapfts.json({
-        ...opts,
-        method: "POST",
-        body: createFile,
-        headers: {
-            ...opts && opts.headers,
-            Authorization: authorization
-        }
-    }));
+export function postV2Files(
+  authorization: string,
+  createFile: CreateFile,
+  opts?: Oazapfts.RequestOpts,
+) {
+  return oazapfts.fetchJson<
+    | {
+        status: 201
+        data: File
+      }
+    | {
+        status: 400
+        data: ErrorsResp
+      }
+    | {
+        status: 401
+        data: ErrorsResp
+      }
+  >(
+    '/v2/files',
+    oazapfts.json({
+      ...opts,
+      method: 'POST',
+      body: createFile,
+      headers: {
+        ...(opts && opts.headers),
+        Authorization: authorization,
+      },
+    }),
+  )
 }
 /**
  * List all global files
  */
-export function getV2FilesGlobal(authorization: string, { fileName, createdFrom, createdTo, updatedFrom, updatedTo, username }: {
-    fileName?: string;
-    createdFrom?: number;
-    createdTo?: number;
-    updatedFrom?: number;
-    updatedTo?: number;
-    username?: string;
-} = {}, opts?: Oazapfts.RequestOpts) {
-    return oazapfts.fetchJson<{
-        status: 200;
-        data: GlobalFiles;
-    } | {
-        status: 401;
-        data: ErrorsResp;
-    }>(`/v2/files/global${QS.query(QS.explode({
+export function getV2FilesGlobal(
+  authorization: string,
+  {
+    fileName,
+    createdFrom,
+    createdTo,
+    updatedFrom,
+    updatedTo,
+    username,
+  }: {
+    fileName?: string
+    createdFrom?: number
+    createdTo?: number
+    updatedFrom?: number
+    updatedTo?: number
+    username?: string
+  } = {},
+  opts?: Oazapfts.RequestOpts,
+) {
+  return oazapfts.fetchJson<
+    | {
+        status: 200
+        data: GlobalFiles
+      }
+    | {
+        status: 401
+        data: ErrorsResp
+      }
+  >(
+    `/v2/files/global${QS.query(
+      QS.explode({
         file_name: fileName,
         created_from: createdFrom,
         created_to: createdTo,
         updated_from: updatedFrom,
         updated_to: updatedTo,
-        username
-    }))}`, {
-        ...opts,
-        headers: {
-            ...opts && opts.headers,
-            Authorization: authorization
-        }
-    });
+        username,
+      }),
+    )}`,
+    {
+      ...opts,
+      headers: {
+        ...(opts && opts.headers),
+        Authorization: authorization,
+      },
+    },
+  )
 }
 /**
  * Create a new file permission
  */
-export function postV2FilesPermissions(authorization: string, createFilePermission: CreateFilePermissions, opts?: Oazapfts.RequestOpts) {
-    return oazapfts.fetchJson<{
-        status: 201;
-        data: FilePermission;
-    } | {
-        status: 400;
-        data: ErrorsResp;
-    } | {
-        status: 401;
-        data: ErrorsResp;
-    }>("/v2/files/permissions", oazapfts.json({
-        ...opts,
-        method: "POST",
-        body: createFilePermission,
-        headers: {
-            ...opts && opts.headers,
-            Authorization: authorization
-        }
-    }));
+export function postV2FilesPermissions(
+  authorization: string,
+  createFilePermission: CreateFilePermissions,
+  opts?: Oazapfts.RequestOpts,
+) {
+  return oazapfts.fetchJson<
+    | {
+        status: 201
+        data: FilePermission
+      }
+    | {
+        status: 400
+        data: ErrorsResp
+      }
+    | {
+        status: 401
+        data: ErrorsResp
+      }
+  >(
+    '/v2/files/permissions',
+    oazapfts.json({
+      ...opts,
+      method: 'POST',
+      body: createFilePermission,
+      headers: {
+        ...(opts && opts.headers),
+        Authorization: authorization,
+      },
+    }),
+  )
 }
 /**
  * Get a single file permission
  */
-export function getV2FilesPermissionsById(authorization: string, id: string, opts?: Oazapfts.RequestOpts) {
-    return oazapfts.fetchJson<{
-        status: 200;
-        data: FilePermission;
-    } | {
-        status: 401;
-        data: ErrorsResp;
-    } | {
-        status: 404;
-        data: ErrorsResp;
-    }>(`/v2/files/permissions/${encodeURIComponent(id)}`, {
-        ...opts,
-        headers: {
-            ...opts && opts.headers,
-            Authorization: authorization
-        }
-    });
+export function getV2FilesPermissionsById(
+  authorization: string,
+  id: string,
+  opts?: Oazapfts.RequestOpts,
+) {
+  return oazapfts.fetchJson<
+    | {
+        status: 200
+        data: FilePermission
+      }
+    | {
+        status: 401
+        data: ErrorsResp
+      }
+    | {
+        status: 404
+        data: ErrorsResp
+      }
+  >(`/v2/files/permissions/${encodeURIComponent(id)}`, {
+    ...opts,
+    headers: {
+      ...(opts && opts.headers),
+      Authorization: authorization,
+    },
+  })
 }
 /**
  * Update a single file
  */
-export function putV2FilesPermissionsById(authorization: string, id: string, updateFilePermissions: UpdateFilePermissions, opts?: Oazapfts.RequestOpts) {
-    return oazapfts.fetchJson<{
-        status: 200;
-        data: FilePermission;
-    } | {
-        status: 400;
-        data: ErrorsResp;
-    } | {
-        status: 401;
-        data: ErrorsResp;
-    } | {
-        status: 404;
-        data: ErrorsResp;
-    }>(`/v2/files/permissions/${encodeURIComponent(id)}`, oazapfts.json({
-        ...opts,
-        method: "PUT",
-        body: updateFilePermissions,
-        headers: {
-            ...opts && opts.headers,
-            Authorization: authorization
-        }
-    }));
+export function putV2FilesPermissionsById(
+  authorization: string,
+  id: string,
+  updateFilePermissions: UpdateFilePermissions,
+  opts?: Oazapfts.RequestOpts,
+) {
+  return oazapfts.fetchJson<
+    | {
+        status: 200
+        data: FilePermission
+      }
+    | {
+        status: 400
+        data: ErrorsResp
+      }
+    | {
+        status: 401
+        data: ErrorsResp
+      }
+    | {
+        status: 404
+        data: ErrorsResp
+      }
+  >(
+    `/v2/files/permissions/${encodeURIComponent(id)}`,
+    oazapfts.json({
+      ...opts,
+      method: 'PUT',
+      body: updateFilePermissions,
+      headers: {
+        ...(opts && opts.headers),
+        Authorization: authorization,
+      },
+    }),
+  )
 }
 /**
  * Gets the permissions for one file for all users who have access to it
  */
-export function getV2FilesByFileIdPermissions(authorization: string, fileId: string, opts?: Oazapfts.RequestOpts) {
-    return oazapfts.fetchJson<{
-        status: 200;
-        data: FilePermissions;
-    } | {
-        status: 400;
-        data: ErrorsResp;
-    } | {
-        status: 401;
-        data: ErrorsResp;
-    } | {
-        status: 404;
-        data: ErrorsResp;
-    }>(`/v2/files/${encodeURIComponent(fileId)}/permissions`, {
-        ...opts,
-        headers: {
-            ...opts && opts.headers,
-            Authorization: authorization
-        }
-    });
+export function getV2FilesByFileIdPermissions(
+  authorization: string,
+  fileId: string,
+  opts?: Oazapfts.RequestOpts,
+) {
+  return oazapfts.fetchJson<
+    | {
+        status: 200
+        data: FilePermissions
+      }
+    | {
+        status: 400
+        data: ErrorsResp
+      }
+    | {
+        status: 401
+        data: ErrorsResp
+      }
+    | {
+        status: 404
+        data: ErrorsResp
+      }
+  >(`/v2/files/${encodeURIComponent(fileId)}/permissions`, {
+    ...opts,
+    headers: {
+      ...(opts && opts.headers),
+      Authorization: authorization,
+    },
+  })
 }
 /**
  * Gets the permissions for one file from one specific user
  */
-export function getV2FilesByFileIdPermissionsAndUserId(authorization: string, fileId: string, userId: string, opts?: Oazapfts.RequestOpts) {
-    return oazapfts.fetchJson<{
-        status: 200;
-        data: FilePermission;
-    } | {
-        status: 400;
-        data: ErrorsResp;
-    } | {
-        status: 401;
-        data: ErrorsResp;
-    } | {
-        status: 404;
-        data: ErrorsResp;
-    }>(`/v2/files/${encodeURIComponent(fileId)}/permissions/${encodeURIComponent(userId)}`, {
-        ...opts,
-        headers: {
-            ...opts && opts.headers,
-            Authorization: authorization
-        }
-    });
+export function getV2FilesByFileIdPermissionsAndUserId(
+  authorization: string,
+  fileId: string,
+  userId: string,
+  opts?: Oazapfts.RequestOpts,
+) {
+  return oazapfts.fetchJson<
+    | {
+        status: 200
+        data: FilePermission
+      }
+    | {
+        status: 400
+        data: ErrorsResp
+      }
+    | {
+        status: 401
+        data: ErrorsResp
+      }
+    | {
+        status: 404
+        data: ErrorsResp
+      }
+  >(`/v2/files/${encodeURIComponent(fileId)}/permissions/${encodeURIComponent(userId)}`, {
+    ...opts,
+    headers: {
+      ...(opts && opts.headers),
+      Authorization: authorization,
+    },
+  })
 }
 /**
  * Deletes a file
  */
 export function deleteV2FilesById(authorization: string, id: string, opts?: Oazapfts.RequestOpts) {
-    return oazapfts.fetchJson<{
-        status: 204;
-    } | {
-        status: 400;
-        data: ErrorsResp;
-    } | {
-        status: 401;
-        data: ErrorsResp;
-    } | {
-        status: 404;
-        data: ErrorsResp;
-    }>(`/v2/files/${encodeURIComponent(id)}`, {
-        ...opts,
-        method: "DELETE",
-        headers: {
-            ...opts && opts.headers,
-            Authorization: authorization
-        }
-    });
+  return oazapfts.fetchJson<
+    | {
+        status: 204
+      }
+    | {
+        status: 400
+        data: ErrorsResp
+      }
+    | {
+        status: 401
+        data: ErrorsResp
+      }
+    | {
+        status: 404
+        data: ErrorsResp
+      }
+  >(`/v2/files/${encodeURIComponent(id)}`, {
+    ...opts,
+    method: 'DELETE',
+    headers: {
+      ...(opts && opts.headers),
+      Authorization: authorization,
+    },
+  })
 }
 /**
  * Get a single file
  */
 export function getV2FilesById(authorization: string, id: string, opts?: Oazapfts.RequestOpts) {
-    return oazapfts.fetchJson<{
-        status: 200;
-        data: File;
-    } | {
-        status: 401;
-        data: ErrorsResp;
-    } | {
-        status: 404;
-        data: ErrorsResp;
-    }>(`/v2/files/${encodeURIComponent(id)}`, {
-        ...opts,
-        headers: {
-            ...opts && opts.headers,
-            Authorization: authorization
-        }
-    });
+  return oazapfts.fetchJson<
+    | {
+        status: 200
+        data: File
+      }
+    | {
+        status: 401
+        data: ErrorsResp
+      }
+    | {
+        status: 404
+        data: ErrorsResp
+      }
+  >(`/v2/files/${encodeURIComponent(id)}`, {
+    ...opts,
+    headers: {
+      ...(opts && opts.headers),
+      Authorization: authorization,
+    },
+  })
 }
 /**
  * Update a single file
  */
-export function putV2FilesById(authorization: string, id: string, updateFile: UpdateFile, opts?: Oazapfts.RequestOpts) {
-    return oazapfts.fetchJson<{
-        status: 200;
-        data: File;
-    } | {
-        status: 400;
-        data: ErrorsResp;
-    } | {
-        status: 401;
-        data: ErrorsResp;
-    } | {
-        status: 404;
-        data: ErrorsResp;
-    }>(`/v2/files/${encodeURIComponent(id)}`, oazapfts.json({
-        ...opts,
-        method: "PUT",
-        body: updateFile,
-        headers: {
-            ...opts && opts.headers,
-            Authorization: authorization
-        }
-    }));
+export function putV2FilesById(
+  authorization: string,
+  id: string,
+  updateFile: UpdateFile,
+  opts?: Oazapfts.RequestOpts,
+) {
+  return oazapfts.fetchJson<
+    | {
+        status: 200
+        data: File
+      }
+    | {
+        status: 400
+        data: ErrorsResp
+      }
+    | {
+        status: 401
+        data: ErrorsResp
+      }
+    | {
+        status: 404
+        data: ErrorsResp
+      }
+  >(
+    `/v2/files/${encodeURIComponent(id)}`,
+    oazapfts.json({
+      ...opts,
+      method: 'PUT',
+      body: updateFile,
+      headers: {
+        ...(opts && opts.headers),
+        Authorization: authorization,
+      },
+    }),
+  )
 }
 /**
  * Ping the server
  */
 export function getV2Ping(opts?: Oazapfts.RequestOpts) {
-    return oazapfts.fetchJson<{
-        status: 200;
-        data: Ping;
-    }>("/v2/ping", {
-        ...opts
-    });
+  return oazapfts.fetchJson<{
+    status: 200
+    data: Ping
+  }>('/v2/ping', {
+    ...opts,
+  })
 }
 /**
  * Create a new share url
  */
-export function postV2Share(authorization: string, createShareUrl: CreateShareUrl, opts?: Oazapfts.RequestOpts) {
-    return oazapfts.fetchJson<{
-        status: 201;
-        data: ShareUrl;
-    } | {
-        status: 400;
-        data: ErrorsResp;
-    } | {
-        status: 401;
-        data: ErrorsResp;
-    }>("/v2/share", oazapfts.json({
-        ...opts,
-        method: "POST",
-        body: createShareUrl,
-        headers: {
-            ...opts && opts.headers,
-            Authorization: authorization
-        }
-    }));
+export function postV2Share(
+  authorization: string,
+  createShareUrl: CreateShareUrl,
+  opts?: Oazapfts.RequestOpts,
+) {
+  return oazapfts.fetchJson<
+    | {
+        status: 201
+        data: ShareUrl
+      }
+    | {
+        status: 400
+        data: ErrorsResp
+      }
+    | {
+        status: 401
+        data: ErrorsResp
+      }
+  >(
+    '/v2/share',
+    oazapfts.json({
+      ...opts,
+      method: 'POST',
+      body: createShareUrl,
+      headers: {
+        ...(opts && opts.headers),
+        Authorization: authorization,
+      },
+    }),
+  )
 }
 /**
  * Delete a share url
  */
 export function deleteV2ShareById(authorization: string, id: string, opts?: Oazapfts.RequestOpts) {
-    return oazapfts.fetchJson<{
-        status: 204;
-    } | {
-        status: 401;
-        data: ErrorsResp;
-    } | {
-        status: 404;
-        data: ErrorsResp;
-    }>(`/v2/share/${encodeURIComponent(id)}`, {
-        ...opts,
-        method: "DELETE",
-        headers: {
-            ...opts && opts.headers,
-            Authorization: authorization
-        }
-    });
+  return oazapfts.fetchJson<
+    | {
+        status: 204
+      }
+    | {
+        status: 401
+        data: ErrorsResp
+      }
+    | {
+        status: 404
+        data: ErrorsResp
+      }
+  >(`/v2/share/${encodeURIComponent(id)}`, {
+    ...opts,
+    method: 'DELETE',
+    headers: {
+      ...(opts && opts.headers),
+      Authorization: authorization,
+    },
+  })
 }
 /**
  * Get a single share url
  */
 export function getV2ShareById(authorization: string, id: string, opts?: Oazapfts.RequestOpts) {
-    return oazapfts.fetchJson<{
-        status: 200;
-        data: ShareUrl;
-    } | {
-        status: 401;
-        data: ErrorsResp;
-    } | {
-        status: 404;
-        data: ErrorsResp;
-    }>(`/v2/share/${encodeURIComponent(id)}`, {
-        ...opts,
-        headers: {
-            ...opts && opts.headers,
-            Authorization: authorization
-        }
-    });
+  return oazapfts.fetchJson<
+    | {
+        status: 200
+        data: ShareUrl
+      }
+    | {
+        status: 401
+        data: ErrorsResp
+      }
+    | {
+        status: 404
+        data: ErrorsResp
+      }
+  >(`/v2/share/${encodeURIComponent(id)}`, {
+    ...opts,
+    headers: {
+      ...(opts && opts.headers),
+      Authorization: authorization,
+    },
+  })
 }
 /**
  * Get a channel via a share url
  */
-export function getV2ShareByIdChannel(authorization: string, id: string, opts?: Oazapfts.RequestOpts) {
-    return oazapfts.fetchJson<{
-        status: 200;
-        data: EditorChannel;
-    } | {
-        status: 401;
-        data: ErrorsResp;
-    } | {
-        status: 404;
-        data: ErrorsResp;
-    }>(`/v2/share/${encodeURIComponent(id)}/channel`, {
-        ...opts,
-        headers: {
-            ...opts && opts.headers,
-            Authorization: authorization
-        }
-    });
+export function getV2ShareByIdChannel(
+  authorization: string,
+  id: string,
+  opts?: Oazapfts.RequestOpts,
+) {
+  return oazapfts.fetchJson<
+    | {
+        status: 200
+        data: EditorChannel
+      }
+    | {
+        status: 401
+        data: ErrorsResp
+      }
+    | {
+        status: 404
+        data: ErrorsResp
+      }
+  >(`/v2/share/${encodeURIComponent(id)}/channel`, {
+    ...opts,
+    headers: {
+      ...(opts && opts.headers),
+      Authorization: authorization,
+    },
+  })
 }
 /**
  * Get a file via a share url
  */
 export function getV2ShareByIdFile(authorization: string, id: string, opts?: Oazapfts.RequestOpts) {
-    return oazapfts.fetchJson<{
-        status: 200;
-        data: File;
-    } | {
-        status: 401;
-        data: ErrorsResp;
-    } | {
-        status: 404;
-        data: ErrorsResp;
-    }>(`/v2/share/${encodeURIComponent(id)}/file`, {
-        ...opts,
-        headers: {
-            ...opts && opts.headers,
-            Authorization: authorization
-        }
-    });
+  return oazapfts.fetchJson<
+    | {
+        status: 200
+        data: File
+      }
+    | {
+        status: 401
+        data: ErrorsResp
+      }
+    | {
+        status: 404
+        data: ErrorsResp
+      }
+  >(`/v2/share/${encodeURIComponent(id)}/file`, {
+    ...opts,
+    headers: {
+      ...(opts && opts.headers),
+      Authorization: authorization,
+    },
+  })
 }
 /**
  * List all users
  */
 export function getV2Users(authorization: string, opts?: Oazapfts.RequestOpts) {
-    return oazapfts.fetchJson<{
-        status: 200;
-        data: UsersPublic;
-    }>("/v2/users", {
-        ...opts,
-        headers: {
-            ...opts && opts.headers,
-            Authorization: authorization
-        }
-    });
+  return oazapfts.fetchJson<{
+    status: 200
+    data: UsersPublic
+  }>('/v2/users', {
+    ...opts,
+    headers: {
+      ...(opts && opts.headers),
+      Authorization: authorization,
+    },
+  })
 }
 /**
  * Create a new user
  */
 export function postV2Users(createUser: CreateUser, opts?: Oazapfts.RequestOpts) {
-    return oazapfts.fetchJson<{
-        status: 201;
-        data: UserPrivate;
-    } | {
-        status: 400;
-        data: ErrorsResp;
-    }>("/v2/users", oazapfts.json({
-        ...opts,
-        method: "POST",
-        body: createUser
-    }));
+  return oazapfts.fetchJson<
+    | {
+        status: 201
+        data: UserPrivate
+      }
+    | {
+        status: 400
+        data: ErrorsResp
+      }
+  >(
+    '/v2/users',
+    oazapfts.json({
+      ...opts,
+      method: 'POST',
+      body: createUser,
+    }),
+  )
 }
 /**
  * Get the current user
  */
 export function getV2UsersCurrent(authorization: string, opts?: Oazapfts.RequestOpts) {
-    return oazapfts.fetchJson<{
-        status: 200;
-        data: UserPrivate;
-    } | {
-        status: 401;
-        data: ErrorsResp;
-    }>("/v2/users/current", {
-        ...opts,
-        headers: {
-            ...opts && opts.headers,
-            Authorization: authorization
-        }
-    });
+  return oazapfts.fetchJson<
+    | {
+        status: 200
+        data: UserPrivate
+      }
+    | {
+        status: 401
+        data: ErrorsResp
+      }
+  >('/v2/users/current', {
+    ...opts,
+    headers: {
+      ...(opts && opts.headers),
+      Authorization: authorization,
+    },
+  })
 }
diff --git a/solardoc/frontend/src/services/render/gen/backend-rest-service.ts b/solardoc/frontend/src/services/render/gen/backend-rest-service.ts
index 4836f35a..3a779cbc 100644
--- a/solardoc/frontend/src/services/render/gen/backend-rest-service.ts
+++ b/solardoc/frontend/src/services/render/gen/backend-rest-service.ts
@@ -4,121 +4,157 @@
  * DO NOT MODIFY - This file has been generated using oazapfts.
  * See https://www.npmjs.com/package/oazapfts
  */
-import * as Oazapfts from "oazapfts/lib/runtime";
-import * as QS from "oazapfts/lib/runtime/query";
+import * as Oazapfts from 'oazapfts/lib/runtime'
+import * as QS from 'oazapfts/lib/runtime/query'
 export const defaults: Oazapfts.RequestOpts = {
-    baseUrl: "/",
-};
-const oazapfts = Oazapfts.runtime(defaults);
+  baseUrl: '/',
+}
+const oazapfts = Oazapfts.runtime(defaults)
 export const servers = {
-    server1: "/"
-};
+  server1: '/',
+}
 export type PingDtoModel = {
-    greeting: string;
-    date: number;
-    url: string;
-    ip: object;
-    headers: object;
-};
+  greeting: string
+  date: number
+  url: string
+  ip: object
+  headers: object
+}
 export type RenderPresentationDtoModel = {
-    fileName: string;
-    fileContent: string;
-    revealJSAssetsPath?: string;
-};
+  fileName: string
+  fileContent: string
+  revealJSAssetsPath?: string
+}
 export type RenderedPresentationImagesDtoModel = {
-    fileName: string;
-    rawSize: number;
-    slideCount: number;
-    slideCountInclSubslides: number;
-    subslideCountPerSlide: number[];
-    download: object;
-    cache: object;
-};
+  fileName: string
+  rawSize: number
+  slideCount: number
+  slideCountInclSubslides: number
+  subslideCountPerSlide: number[]
+  download: object
+  cache: object
+}
 export type CacheDtoModel = {
-    cacheUUID: string;
-    expiresAt: number;
-};
+  cacheUUID: string
+  expiresAt: number
+}
 export type DownloadDtoModel = {
-    downloadURL: string;
-    fileName: string;
-};
+  downloadURL: string
+  fileName: string
+}
 export type RenderedPresentationPdfDtoModel = {
-    fileName: string;
-    rawSize: number;
-    slideCount: number;
-    slideCountInclSubslides: number;
-    subslideCountPerSlide: number[];
-    cache: CacheDtoModel;
-    download: DownloadDtoModel;
-};
+  fileName: string
+  rawSize: number
+  slideCount: number
+  slideCountInclSubslides: number
+  subslideCountPerSlide: number[]
+  cache: CacheDtoModel
+  download: DownloadDtoModel
+}
 export type RenderedPresentationRjsHtmlDtoModel = {
-    fileName: string;
-    rawSize: number;
-    slideCount: number;
-    slideCountInclSubslides: number;
-    subslideCountPerSlide: number[];
-    cache: CacheDtoModel;
-    download: DownloadDtoModel;
-};
+  fileName: string
+  rawSize: number
+  slideCount: number
+  slideCountInclSubslides: number
+  subslideCountPerSlide: number[]
+  cache: CacheDtoModel
+  download: DownloadDtoModel
+}
 export type RenderedSlideImageDtoModel = {
-    fileName: string;
-    cache: CacheDtoModel;
-    download: DownloadDtoModel;
-};
+  fileName: string
+  cache: CacheDtoModel
+  download: DownloadDtoModel
+}
 export function getV1Ping(opts?: Oazapfts.RequestOpts) {
-    return oazapfts.fetchJson<{
-        status: 200;
-        data: PingDtoModel;
-    }>("/v1/ping", {
-        ...opts
-    });
-}
-export function postV1RenderPresentationImages(renderPresentationDtoModel?: RenderPresentationDtoModel, opts?: Oazapfts.RequestOpts) {
-    return oazapfts.fetchJson<{
-        status: 200;
-        data: RenderedPresentationImagesDtoModel;
-    }>("/v1/render/presentation/images", oazapfts.json({
-        ...opts,
-        method: "POST",
-        body: renderPresentationDtoModel
-    }));
-}
-export function postV1RenderPresentationPdf(renderPresentationDtoModel?: RenderPresentationDtoModel, opts?: Oazapfts.RequestOpts) {
-    return oazapfts.fetchJson<{
-        status: 200;
-        data: RenderedPresentationPdfDtoModel;
-    }>("/v1/render/presentation/pdf", oazapfts.json({
-        ...opts,
-        method: "POST",
-        body: renderPresentationDtoModel
-    }));
-}
-export function postV1RenderPresentationRjsHtml(renderPresentationDtoModel?: RenderPresentationDtoModel, opts?: Oazapfts.RequestOpts) {
-    return oazapfts.fetchJson<{
-        status: 200;
-        data: RenderedPresentationRjsHtmlDtoModel;
-    }>("/v1/render/presentation/rjs-html", oazapfts.json({
-        ...opts,
-        method: "POST",
-        body: renderPresentationDtoModel
-    }));
-}
-export function postV1RenderSlideByIdImage(id: string, renderPresentationDtoModel?: RenderPresentationDtoModel, opts?: Oazapfts.RequestOpts) {
-    return oazapfts.fetchJson<{
-        status: 200;
-        data: RenderedSlideImageDtoModel;
-    }>(`/v1/render/slide/${encodeURIComponent(id)}/image`, oazapfts.json({
-        ...opts,
-        method: "POST",
-        body: renderPresentationDtoModel
-    }));
-}
-export function getV1ResultByUuid(uuid: string, { $static }: {
-    $static?: string;
-} = {}, opts?: Oazapfts.RequestOpts) {
-    return oazapfts.fetchText(`/v1/result/${encodeURIComponent(uuid)}${QS.query(QS.explode({
-        "static": $static
-    }))}`, {
-        ...opts
-    });
+  return oazapfts.fetchJson<{
+    status: 200
+    data: PingDtoModel
+  }>('/v1/ping', {
+    ...opts,
+  })
+}
+export function postV1RenderPresentationImages(
+  renderPresentationDtoModel?: RenderPresentationDtoModel,
+  opts?: Oazapfts.RequestOpts,
+) {
+  return oazapfts.fetchJson<{
+    status: 200
+    data: RenderedPresentationImagesDtoModel
+  }>(
+    '/v1/render/presentation/images',
+    oazapfts.json({
+      ...opts,
+      method: 'POST',
+      body: renderPresentationDtoModel,
+    }),
+  )
+}
+export function postV1RenderPresentationPdf(
+  renderPresentationDtoModel?: RenderPresentationDtoModel,
+  opts?: Oazapfts.RequestOpts,
+) {
+  return oazapfts.fetchJson<{
+    status: 200
+    data: RenderedPresentationPdfDtoModel
+  }>(
+    '/v1/render/presentation/pdf',
+    oazapfts.json({
+      ...opts,
+      method: 'POST',
+      body: renderPresentationDtoModel,
+    }),
+  )
+}
+export function postV1RenderPresentationRjsHtml(
+  renderPresentationDtoModel?: RenderPresentationDtoModel,
+  opts?: Oazapfts.RequestOpts,
+) {
+  return oazapfts.fetchJson<{
+    status: 200
+    data: RenderedPresentationRjsHtmlDtoModel
+  }>(
+    '/v1/render/presentation/rjs-html',
+    oazapfts.json({
+      ...opts,
+      method: 'POST',
+      body: renderPresentationDtoModel,
+    }),
+  )
+}
+export function postV1RenderSlideByIdImage(
+  id: string,
+  renderPresentationDtoModel?: RenderPresentationDtoModel,
+  opts?: Oazapfts.RequestOpts,
+) {
+  return oazapfts.fetchJson<{
+    status: 200
+    data: RenderedSlideImageDtoModel
+  }>(
+    `/v1/render/slide/${encodeURIComponent(id)}/image`,
+    oazapfts.json({
+      ...opts,
+      method: 'POST',
+      body: renderPresentationDtoModel,
+    }),
+  )
+}
+export function getV1ResultByUuid(
+  uuid: string,
+  {
+    $static,
+  }: {
+    $static?: string
+  } = {},
+  opts?: Oazapfts.RequestOpts,
+) {
+  return oazapfts.fetchText(
+    `/v1/result/${encodeURIComponent(uuid)}${QS.query(
+      QS.explode({
+        static: $static,
+      }),
+    )}`,
+    {
+      ...opts,
+    },
+  )
 }
diff --git a/solardoc/frontend/src/stores/current-file.ts b/solardoc/frontend/src/stores/current-file.ts
index 59eba22d..43eca170 100644
--- a/solardoc/frontend/src/stores/current-file.ts
+++ b/solardoc/frontend/src/stores/current-file.ts
@@ -54,20 +54,26 @@ function getDefaultFile(currentUserId?: string): LocalFile | File {
     last_edited: new Date().getTime(),
     owner_id: currentUserId,
     channel_id: undefined,
-    is_global: false
+    is_global: false,
   }
 }
 
 function ensureAllFileProperties(raw: object): LocalFile | File {
   const file = getDefaultFile()
-  file.id = <string | undefined>("id" in raw ? raw.id : file.id)
-  file.content = <string>("content" in raw && raw.content ? raw.content : file.content)
-  file.created = <number>("created" in raw && raw.created ? raw.created : file.created)
-  file.file_name = <string>("file_name" in raw && raw.file_name ? raw.file_name : file.file_name)
-  file.last_edited = <number>("last_edited" in raw && raw.last_edited ? raw.last_edited : file.last_edited)
-  file.owner_id = <string | undefined>("owner_id" in raw && raw.owner_id ? raw.owner_id : file.owner_id)
-  file.channel_id = <string | undefined>("channel_id" in raw && raw.channel_id ? raw.channel_id : file.channel_id)
-  file.is_global = <boolean>("is_global" in raw && raw.is_global ? raw.is_global : file.is_global)
+  file.id = <string | undefined>('id' in raw ? raw.id : file.id)
+  file.content = <string>('content' in raw && raw.content ? raw.content : file.content)
+  file.created = <number>('created' in raw && raw.created ? raw.created : file.created)
+  file.file_name = <string>('file_name' in raw && raw.file_name ? raw.file_name : file.file_name)
+  file.last_edited = <number>(
+    ('last_edited' in raw && raw.last_edited ? raw.last_edited : file.last_edited)
+  )
+  file.owner_id = <string | undefined>(
+    ('owner_id' in raw && raw.owner_id ? raw.owner_id : file.owner_id)
+  )
+  file.channel_id = <string | undefined>(
+    ('channel_id' in raw && raw.channel_id ? raw.channel_id : file.channel_id)
+  )
+  file.is_global = <boolean>('is_global' in raw && raw.is_global ? raw.is_global : file.is_global)
   return file
 }
 
@@ -77,11 +83,13 @@ function writeFileToLocalStorage(file: LocalFile | File): void {
 
 export const useCurrentFileStore = defineStore('currentFile', {
   state: () => {
-    let storedFile: LocalFile | File;
+    let storedFile: LocalFile | File
     try {
-      storedFile = ensureAllFileProperties(JSON.parse(localStorage.getItem(constants.localStorageFileKey) || ''))
+      storedFile = ensureAllFileProperties(
+        JSON.parse(localStorage.getItem(constants.localStorageFileKey) || ''),
+      )
     } catch (e) {
-      console.warn("Failed to parse file from local storage. Reverting to default file.");
+      console.warn('Failed to parse file from local storage. Reverting to default file.')
       storedFile = getDefaultFile()
     }
     const shareURLId = localStorage.getItem(constants.localStorageShareURLIdKey)
@@ -117,7 +125,8 @@ export const useCurrentFileStore = defineStore('currentFile', {
     isAccessibleShareFile(): boolean {
       return (
         this.shareFile &&
-        (this.accessPermissions === Permissions.Read || this.accessPermissions === Permissions.Write)
+        (this.accessPermissions === Permissions.Read ||
+          this.accessPermissions === Permissions.Write)
       )
     },
     /**
@@ -125,7 +134,7 @@ export const useCurrentFileStore = defineStore('currentFile', {
      * @since 0.7.0
      */
     raw(): LocalFile | File {
-      return this.file;
+      return this.file
     },
     /**
      * COMPATIBILITY MODE LAYER FOR FILE PROPERTIES
@@ -353,11 +362,11 @@ export const useCurrentFileStore = defineStore('currentFile', {
         // This is a new transformation, which may happen concurrently with the user's own transformation
         // We need to make sure that the transformation is applied in the correct order and they are not doing the same
         // transformation. In this way they must result in `apply(apply(S, A), B') = apply(apply(S, B), A')`
-        let operation = OTrans = {
+        let operation = (OTrans = {
           ...oTrans,
           acknowledged: true,
           init: false,
-        }
+        })
         const concurrentTrans = this.oTransNotAcked.slice()
         for (let i = 0; i < concurrentTrans.length; i++) {
           operation = await this.transformOTrans(operation, concurrentTrans[i])
@@ -373,9 +382,7 @@ export const useCurrentFileStore = defineStore('currentFile', {
      * @param oTrans The OTrans object to transform.
      * @param concurrentOTrans The concurrent OTrans object to transform.
      */
-    async transformOTrans(oTrans: OTrans, concurrentOTrans: OTransReqDto): OTrans {
-
-    },
+    async transformOTrans(oTrans: OTrans, concurrentOTrans: OTransReqDto): OTrans {},
     /**
      * Pushes an OTrans to the stack of transformations which are not yet acknowledged, but have been already applied
      * to the content.