**As** a user
**I want to** view and edit a Begin of the insertionreal-time collaborationEnd of the insertion document

**Acceptance criteria**

* The document view is composed of

* Sidebar left with the document module's Begin of the insertionsub-menuEnd of the insertion Begin of the deletion submenuEnd of the deletion

* Begin of the insertionA main content area containing the rich-text document, which contains

* A pageEnd of the insertion Begin of the deletion PageEnd of the deletion header Begin of the insertionthat contains

End of the insertion Begin of the deletion

End of the deletion * Begin of the insertionBreadcrumb navigation (with Project name / Document name (shotened))

End of the insertion Begin of the deletion BlockNote editor

End of the deletion * Begin of the insertionDocument title <mention class="mention" data-id="68941" data-type="work_package" data-text="##68941">##68941</mention>

* Type selector (hidden on mobile for nowEnd of the insertion Begin of the deletion Split screenEnd of the deletion to Begin of the insertionsave space)

* A list of avatars of users that are currently also viewing or editing that page (<mention class="mention" data-id="68938" data-type="work_package" data-text="##68938">##68938</mention>)

* An indicator whenEnd of the insertion the Begin of the insertiondocument was last saved. (<mention class="mention" data-id="68939" data-type="work_package" data-text="##68939">##68939</mention>)

* A three-dots actions menu containing the following actions

* Rename document which triggers the edit in place from above.

* (Nice to have) Copy URL to clipboard

* (Nice to have) Duplicate

* Delete document (<mention class="mention" data-id="69080" data-type="work_package" data-text="##69080">##69080</mention>)

* The header does not have a &quot;Save&quot; button. Saving is done automatically.

* The document content

* Rendered in either show mode (<mention class="mention" data-id="68699" data-type="work_package" data-text="##68699">##68699</mention>) or edit mode (##, depending on the users permission

* Showing real-time edits and cursor positions of connected users

* even when the userEnd of the insertion Begin of the deletion right withEnd of the deletion only Begin of the insertionhasEnd of the insertion Begin of the deletion (for now)End of the deletion the Begin of the insertionpermission to view and not to edit.

End of the insertion Begin of the deletion **Files** tab.

End of the deletion * Begin of the insertionThe document content is rendered and edited with a BlockNote editor.

End of the insertion Begin of the deletion Routes:

End of the deletion * Begin of the insertionDuring loading of the content a skeleton is shown <mention class="mention" data-id="69016" data-type="work_package" data-text="##69016">##69016</mention>

* Header and document form a visual block inside the content area that gives it a document-like look and feel

* centered

* with a maximum width of (<mention class="mention" data-id="72513" data-type="user" data-text="@Parimal Satyal">@Parimal Satyal</mention>?)End of the insertion Begin of the deletion `documents/&lt;id&gt;` (one routeEnd of the deletion for Begin of the insertionimproved readability

* they scroll together, onEnd of the insertion both, Begin of the insertiondesktopEnd of the insertion Begin of the deletion readOnlyEnd of the deletion and Begin of the insertionmobile

End of the insertion Begin of the deletion Write)

End of the deletion * Begin of the insertionA right panel

End of the insertion Begin of the deletion Breakpoints

End of the deletion * Begin of the insertion(For now)

End of the insertion Begin of the deletion _To be specified_

End of the deletion * Begin of the insertionOnly lists the attachments

* Allows uploading attachments

* When viewed in tablet portraitEnd of the insertion Begin of the deletion read-onlyEnd of the deletion mode Begin of the insertionor slimmer the right panelEnd of the insertion is Begin of the insertionrendered below the document content

* At a later point of time (out of scope for now)

* the right panel will hold multiple tabs, similar to a work package (Activity, Files, Relations, ...)

* Routes:

* `documents/<id>` (one route for both, read-only and write)


End of the insertion Begin of the deletion defined in &lt;mention class=&quot;mention&quot; data-id=&quot;68699&quot; data-type=&quot;work_package&quot; data-text=&quot;##68699&quot;&gt;##68699&lt;/mention&gt;&amp;nbsp;


End of the deletion **Out of scope**

* further information tabs such as activity, versions, relations, ...