# Feature COMMS-407 - Document show/edit view layout

Project: Stream Communicator
Status: closed
URL: https://community.openproject.org/work_packages/COMMS-407

## Planning

| Attribute | Value |
| --- | --- |
| Date |  |
| Priority | Medium |
| Target versions | 17.0.0 |
| Sprint |  |
| Backlog bucket |  |
| Votes |  |
| List |  |
| Roadmap |  |
| Relevance |  |

## OPEN POINTS / FEEDBACK

_No work packages_

## Features and Chunks

| ID | Subject | Type | Status | Assignee | Target versions | Spent time |
| --- | --- | --- | --- | --- | --- | --- |
| COMMS-504 | Add Files tab to existing document edit view | Feature | closed |  | 17.0.0 |  |
| COMMS-506 | Redesign document show page for collaborative document with BlockNote | Implementation | closed |  | 17.0.0 |  |
| COMMS-511 | Cater for case when Hocuspocus is unreachable | Implementation | closed |  | 17.0.0 |  |
| COMMS-516 | Collaborative document creation flow | Implementation | closed |  | 17.0.0 |  |
| COMMS-517 | Sync up active users via hocuspocus awareness protocol | Implementation | rejected |  | 17.0.0 |  |
| COMMS-518 | Sync up last updated at via hocuspocus awareness protocol | Feature | closed |  | 17.0.0 |  |
| COMMS-519 | implement delete document flow | Implementation | rejected | Kabiru Mwenja | 17.0.0 |  |
| COMMS-520 | Inline editable document title | Implementation | closed |  | 17.0.0 |  |
| COMMS-521 | Sync blocknote color theme when OP core changes themes automatically without a page refresh | Implementation | closed |  | 17.0.0 |  |
| COMMS-522 | Add loading skeleton for blocknote view | Implementation | closed |  | 17.0.0 |  |
| COMMS-523 | Remove collaborative documents from classic edit flow | Implementation | closed |  | 17.0.0 |  |
| COMMS-531 | Collaborative documents deletion flow | Implementation | closed |  | 17.0.0 |  |
| COMMS-532 | Update copy to clipboard icon | Implementation | closed |  | 17.0.0 |  |

## Bugs and other work packages

| ID | Type | Subject | Status | Assignee | Target versions | Spent time | Module |
| --- | --- | --- | --- | --- | --- | --- | --- |
| COMMS-559 | Bug | Documents: UX/UI optimisations in the info line in the Page Header of a Document | closed |  | 17.0.0 |  | Modules and project features / Documents |
| COMMS-547 | Bug | Loading indicator from hell when leaving document in a tab alone for some time | closed |  | 17.0.0 |  | Modules and project features / Documents |
| COMMS-537 | Code maintenance | Extend the PageHeader's built-in editable title functionality by providing an option that automatically selects the input text when rendered in edit state | new |  |  |  | Frontend components and Primer design system, Modules and project features / Documents |

## Technical Details

| Attribute | Value |
| --- | --- |
| Module | Modules and project features / Documents |
| Feature Flag |  |
| Requires doc change | Yes |
| Enterprise plan |  |

## Details

| Attribute | Value |
| --- | --- |
| Pull preview |  |
| Mockups | https://www.figma.com/design/d3zhm0R0pjHJvQd3XTlxuS/New-Documents-module?node-id=2038-22003&t=Vw45YhchdgzX6hUK-4 |
| Accessibility | No |

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| Accountable | Kabiru Mwenja |
| Product manager |  |
| Developers | Kabiru Mwenja |
| Designer | Parimal Satyal |
| Ordered by |  |
| Signed off by |  |
| Interest by |  |

## Estimates and progress

| Attribute | Value |
| --- | --- |
| PD (min) |  |
| PD (max) |  |
| Work |  |
| Labor costs |  |

## Description

**As** a user  
**I want to** view and edit a real-time collaboration document

**Acceptance criteria**

  - The document view is composed of
    
      - Sidebar left with the document module's sub-menu
    
      - A main content area containing the rich-text document, which contains
        
          - A page header that contains
            
              - Breadcrumb navigation (with Project name / Document name (shotened))
            
              - Document title <mention class="mention" data-id="68941" data-type="work_package" data-text="##68941">\#\#68941</mention>
            
              - Type selector (hidden on mobile for now to save space)
            
              - A list of avatars of users that are currently also viewing or editing that page (<mention class="mention" data-id="68764" data-type="work_package" data-text="##68764">\#\#68764</mention>)
            
              - An indicator when the document 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 "Save" 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 user only has the permission to view and not to edit.
            
              - The document content is rendered and edited with a BlockNote editor.
            
              - During 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>?) for improved readability
            
              - they scroll together, on both, desktop and mobile
    
      - A right panel
        
          - (For now)
            
              - Only lists the attachments
            
              - Allows uploading attachments
            
              - When viewed in tablet portrait mode or slimmer the right panel is rendered 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)

  - Error state (<https://community.openproject.org/projects/communicator-stream/work\_packages/67424/activity#comment-1542622>)
    
      - In the event the collaboration server is unreachable or disconnects, the editor is no longer visible an error banner is rendered with an error message and a "Try again" button that refreshes the page in an attempt to re-establish connection
    
      - When connection is restored, a success flash message is displayed and the editor accessible once more.

**Out of scope**

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