# Feature BNE-164 - Slash command for work package attributes

Project: Stream BlockNote extensions
Status: merged
URL: https://community.openproject.org/work_packages/BNE-164

## Planning

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

## OPEN POINTS / FEEDBACK

_No work packages_

## Features and Chunks

| ID | Subject | Type | Status | Assignee | Target versions | Spent time |
| --- | --- | --- | --- | --- | --- | --- |
| BNE-168 | Add inline node for work package attributes and show their values | Implementation | closed |  |  |  |
| BNE-169 | Insert work package attribute via slash command | Implementation | closed |  |  |  |
| BNE-170 | Integrate work package attributes in OpenProject | Implementation | closed | Ihor Dubas |  |  |
| BNE-171 | Render long text work package attributes as a block | Implementation | closed |  |  |  |
| BNE-172 | Show work package attributes with avatars, colors and dots | Implementation | closed |  |  |  |
| BNE-185 | Pasting work package attributes from CKEditor | Implementation | closed |  |  |  |
| BNE-186 | Small design fixes | Implementation | closed |  |  |  |
| BNE-188 | Work package dropdown improvements | Implementation | closed |  |  |  |

## Bugs and other work packages

| ID | Type | Subject | Status | Assignee | Target versions | Spent time | Module |
| --- | --- | --- | --- | --- | --- | --- | --- |
| BNE-183 | Bug | Context for attributes menu should look like work package link context menu | needs review | Ihor Dubas | 18.0.0 |  |  |
| BNE-184 | Bug | Work package attributes should get blue outline on selection | merged |  | 18.0.0 |  |  |
| BNE-193 | Bug | Dropdown for attribute selection should be sorted and searchable | needs review | Ihor Dubas | 18.0.0 |  |  |
| BNE-192 | Bug | Block work package attributes inserted in the middle of a line should split it | needs review | Ihor Dubas | 18.0.0 |  |  |
| BNE-191 | Bug | Add work package attribute modal should not close on outside click after values are filled in | in development | Ihor Dubas | 18.0.0 |  |  |
| BNE-190 | Bug | Long, cut off work package subjects should be shown as title on hover | confirmed |  | 18.0.0 |  | Modules and project features / Documents |
| BNE-187 | Bug | Date and time need to be formatted according to user settings | confirmed |  | 18.0.0 |  |  |

## Technical Details

| Attribute | Value |
| --- | --- |
| Module | Modules and project features / Documents, Modules and project features / Text editor / BlockNoteJS / OpenProject Extensions |
| Feature Flag |  |
| Requires doc change | Yes |
| Enterprise plan | Community (COM) |

## Details

| Attribute | Value |
| --- | --- |
| Pull preview |  |
| Mockups | https://www.figma.com/design/d3zhm0R0pjHJvQd3XTlxuS/New-Documents-module?node-id=3562-4119&p=f&t=uoY8ElmryZ1OHbl5-0 |
| Accessibility | No |

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| Accountable |  |
| Product manager |  |
| Developers |  |
| 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 of OpenProject who is accustomed to the [work package attributes in CKEditor](https://qa.openproject-edge.com/wp/JTP-18)  
**I want to** be able to create something similar in documents / BlockNote

**Acceptance criteria**

  - There is a new slash command "work package attribute"

  - When invoked, the user sees a dialogue and has to make the following choices:
    
      - Select a work package (via typeahead search)
        
          - search by id, identifier or subject (like in the "link work package" dialogue)
        
          - reuse existing search result dropdowns
    
      - Select the attribute or custom field of the work package
        
          - attributes and custom fields of the work package
        
          - this depends on the selected work package and needs to change if the work package changes
    
      - Decide between label, value and label + value
        
          - Value is preselected.
    
      - There is a preview. It should look like the final result we will render inside the document (see attached figma mockups)
    
      - **tbd**: How can the user select "relative addressing of the work package" (no hard ID given) in the dialog (if we don't find a good solution, this could also be a separate slash command ("work package attribute template") with the same dialogue just without a work package - maybe this would even be easier to leave out in contexts where it does not apply, e.g. a document)

  - After selecting everything in the dialogue and confirming, a new custom inline element is inserted in the document
    
      - It shows, according to the selection, either a label, a value or "label: value"
    
      - It has a context menu for changing what it shows (label/value/label+value)
    
      - For Markdown export, we do the same as the work package attributes in CKEditor: 
        
          - If label is selected: `workPackageLabel:<identifier>:<attribute>`
        
          - If value is selected: `workPackageValue:<identifier>:<attribute>`
        
          - If both are selected: `workPackageLabel:<identifier>:<attribute>:workPackageValue:<identifier>:<attribute>`
    
      - For the "description" and any long text custom attributes a block element is rendered instead of an inline one
    
      - See the attached Mockup for how the elements should look like

  - When the user invokes the command the next time (only in the same document in the same "session" (not browser session, only until he navigates away from the document)) the values are prefilled with what he selected before

  - Pasting work package attributes from- and to CKEditor works (only those which have an identifier or subject in their plain text. Those without will be a separate implementation, see technical notes)

**Technical notes**

  - Like always, we first build a simple variant and then improve it (improvement steps: Show user avatar, render status with dot, render priority with dot, render type with big letters and color)
    
      - We already have styles for status and type, they should be reused

  - You can see examples for work package attributes / expansions in CKEditor [here](https://qa.openproject-edge.com/wp/JTP-18)

  - We also need a "relative" addressing variant, where we do not save the work package id, but get it from a context (so this is usable in templates). Compare with `workPackageValue:priority` (renders as Medium ) - this will be a separate implementation step (and we still need to discuss how to achieve this) (e.g. additional checkbox or value in the search results dropdown that is only available in certain cases)

  - We need to avoid recursive content (probably not yet an issue, but as soon as work packages use BlockNote: rendering a work package's description inside the work package itself should not break / not lead to an infinite loop)

**Out of scope / Will not be implemented**

  - No help text about the label (i-sign in the CKEditor implementation)

  - No context menu for changing the attribute / custom field