Edit Contentlet Implementation

[fmontes]

Feature

• Authoring Content - We need a way to maximize the actual content editing experience to be central. As we have it now, no content contributor wants to author content in dotCMS.
• Save Unsaved Content changes to local storage under the contenttype var name as key (meaning, you can come back to the screen and not lose your changes). Github does this and it is nice.
• Allow multiple content editing screens open simultaneously (tabs?)
• URL Friendly endpoints when adding/editing content, e.g.
  • #/content/blog ← new blog
  • #/content/{inode} ← content version
• As we need the content editing screen to show up in various places, is there a more router friendly (permalink) way of showing it? There are going to be editors that don’t have specific portlets and
• Keyboard shortcuts and keyboard navigation.

Pain Points

1. The forms are inaccessible,
2. It can't be navigated with keyboard
3. Design looks outdated
4. Slow to load and to use
5. Is not URL accessible
6. In general, it is a bad experience for content authors.

Acceptance Criteria

Tasks

Preview Give feedback

1. Edit Content: Explore the posibility to use web components for fields #25434
   OKR : Core Features Priority : 3 Average QA : Not Needed Team : Lunik Type : Task +5
   
2. Edit Content: Research on what API we have for contentlet history #25441
   OKR : Core Features QA : Not Needed Team : Lunik Type : Task +4
   
3. Edit Contentlet: Create REST Endpoint to bring back a specific Contentlet version #25448
   OKR : Core Features Team : Lunik Type : New Functionality +3
4. Edit Contentlet: create a contenttype fields library #25781
   QA : Not Needed Team : Lunik Type : Task +3
   
5. Edit Contentlet: Create dropzone component #25782
   QA : Not Needed Release : 23.09.6 Team : Lunik Type : Task +4
   
6. Content Edit: Implement Monaco Editor #25946
   Team : Lunik Type : Task +2
   
7. Edit Contentlet: Allow User Write Code #26045
   OKR : User Experience Priority : 3 Average Release : 23.10.24 Team : Lunik Type : Task +5
   
8. Edit Contentlet: Allow user to upload files from external sources #26047
   OKR : User Experience Priority : 3 Average QA : Approved Team : Lunik Type : Task +5
   
9. Edit Contentlet: Allow Drag&Drop and select file #26048
   OKR : User Experience Priority : 3 Average QA : Not Needed Team : Lunik Type : Task +5
   
10. Edit Contentlet: Replace Current Binary Field with webcomponent #26053
    OKR : User Experience Priority : 3 Average Team : Lunik Type : Task +4
11. Edit Contentlet: Allow File Preview #26105
    NW Removed OKR : User Experience Priority : 3 Average QA : Approved Release : 23.12.21 Team : Lunik Type : Task +7
    
12. Edit Contentlet: Implement feature flag #26163
    OKR : Core Features Priority : 3 Average QA : Approved Release : 23.10.24 Team : Lunik Type : New Functionality +6
    
13. Edit Contentlet Redesign: Create New Binary Field Feature Flag #26219
    OKR : User Experience Priority : 3 Average QA : Approved Team : Lunik Type : Task +5
    
14. Edit Contentlet: Develop basic form with text field and save button #26330
    OKR : Core Features Priority : 3 Average QA : Not Needed Release : 23.10.24 Team : Lunik Type : New Functionality +6
    
15. Edit Content: Lack of mimeType and File Extension in Response when Uploading File by URL via Temp API #26340
    OKR : Core Features Priority : 3 Average QA : Approved Release : 23.12.21 Team : Lunik Type : Task +6
    
16. Edit Content: Create a separator for Workflow Actions #26389
    QA : Not Needed Team : Lunik Type : New Functionality dotCMS : Admin Tools dotCMS : Workflow +5
    
17. Edit Content: Navigation is broken for new Content in Content Search #26440
    QA : Not Needed Team : Lunik Type : Defect +3
    
18. Edit Content: Render TextField and TextArea Field to the Form #26442
    8 of 8
    OKR : Core Features Priority : 3 Average QA : Not Needed Team : Lunik Type : New Functionality +5
    
19. Edit Content: Add Checkbox and Multiselect Fields to the Form #26491
    0 of 5
    OKR : Core Features Priority : 3 Average Team : Lunik Type : New Functionality +4
    
20. Edit Content: Add Date and Date and Time Field #26512
    6 of 6
    NW Removed OKR : Core Features Priority : 3 Average QA : Approved Release : 23.12.21 Team : Lunik Type : New Functionality +7
    
21. Edit Content: Add Tags Field #26526
    4 of 4
    OKR : Core Features Priority : 3 Average QA : Approved Release : 23.12.21 Team : Lunik Type : New Functionality +6
    
22. Edit Content: Create Tests for Utils Functions #26559
    QA : Not Needed Team : Lunik Type : Defect +3
    
23. Edit Content: Update the tags endpoint #26573
    7 of 7
    OKR : Core Features Priority : 3 Average QA : Approved Release : 23.12.21 Team : Lunik Type : New Functionality +6
    
24. Edit Content: Render Radio and Select Field to the Form #26448
    1 of 6
    OKR : Core Features Priority : 3 Average QA : Not Needed Team : Lunik Type : New Functionality +5
    
25. Edit Content: Implement Control Value Accessor in the Block Editor Field #26577
    0 of 6
    OKR : Core Features Priority : 3 Average QA : Not Needed Team : Lunik Type : New Functionality +5
    
26. Edit Content: Implement Control Value Accessor in the Binary Field #26579
    5 of 5
    OKR : Core Features Priority : 3 Average QA : Not Needed Team : Lunik Type : New Functionality +5
    
27. Edit Content: Make Binary Field Preview Works with File ContentTypes #26628
    OKR : Core Features Priority : 3 Average QA : Approved Release : 23.12.21 Team : Lunik Type : Task +6
    
28. Edit Content: Move Binary Field to Edit Content Lib #26634
    OKR : Core Features Priority : 3 Average Team : Lunik Type : Task +4
    
29. Edit Content: Update Binary Field Style - Responsive #26649
    OKR : Core Features Priority : 3 Average QA : Approved Release : 23.12.21 Team : Lunik Type : Task +6
    
30. Edit Content: Create a Component to Render Custom Field (Legacy) #26698
    4 of 4
    OKR : Core Features Priority : 3 Average QA : Approved Release : 23.12.21 Team : Lunik Type : New Functionality +6
    
31. Edit Content: Create a jsp file to render a specific custom field #26696
    0 of 2
    OKR : Core Features Priority : 3 Average Team : Lunik Type : New Functionality +4
    
32. Edit Content: Render tabs fields #26837
    3 of 3
    OKR : Core Features Priority : 3 Average QA : Approved Release : 23.12.21 Team : Lunik Type : New Functionality +6
    
33. Edit Content: Render Contentlet Information in Sidebar #26838
    1 of 3
    OKR : Core Features Priority : 3 Average QA : Not Needed Team : Lunik Type : New Functionality +5
    
34. Edit Content: Thumbnail in the Binary Preview Punchlist #26907
    10 of 10
    OKR : Core Features Priority : 3 Average QA : Approved Release : 24.01.26 Team : Lunik Type : New Functionality +6
    
35. Edit Content: Show Workflow Information #26842
    0 of 2
    OKR : Core Features Priority : 3 Average QA : Not Needed Team : Lunik Type : New Functionality +5
    
36. Edit Content: Implement suggestions in the tag fields #26902
    4 of 4
    QA : Not Needed Team : Lunik Type : Enhancement +3
    
37. Edit Content: Add Workflow Action button to Edit Content #26969
    OKR : Core Features Priority : 3 Average QA : Approved Release : 24.01.26 Team : Lunik Type : New Functionality +6
    
38. Edit Content: Expose the editableAsText property in the content API. #26910
    0 of 1
    OKR : Core Features Priority : 3 Average QA : Approved Release : 24.01.26 Team : Lunik Type : New Functionality +6
    
39. Edit Content: Expose Workflow Information Through Rest APIs #26839
    3 of 3
    OKR : Core Features Priority : 3 Average QA : Approved Release : 24.01.26 Team : Lunik Type : New Functionality +6
    
40. Edit Content: Style the dojo custom fields to make it work as good a possible #26901
    7 of 11
    QA : Not Needed Team : Lunik Type : Enhancement +3
    
41. Edit Contentlet: Research dynamic forms (component loader) #26080
    Team : Lunik Type : Task +2
    
42. Edit Content: We lose the binary field thumbnail after applying some filter to the image #27068
    OKR : Core Features Priority : 3 Average QA : Approved Release : 24.01.26 Team : Lunik Triage Type : Defect +7
    
43. Edit Content: Allow Configuration of Field Variables for Monaco Editor Options on Binary and JSON Fields #26900
    2 of 2
    OKR : Core Features Priority : 3 Average QA : Approved Release : 24.02.20 Team : Falcon Team : Lunik Type : New Functionality +7
    
44. Edit Content: Fix the tests for dot-edit-content-field.component.spec #26884
    OKR : Core Features Priority : 3 Average QA : Not Needed Team : Lunik Type : Task +5
    
45. Edit Contentlet: Research dynamic forms (component loader by template) #26082
    Team : Lunik Type : Task +2
    
46. Edit Content: Add Settings to Binary Field #26906
    2 of 2
    OKR : Core Features Priority : 3 Average QA : Approved Release : 24.03.1 Team : Lunik Type : New Functionality +6
    
47. Edit Content: Develop Key/Value Field #26904
    OKR : Core Features Priority : 3 Average QA : Approved Release : 24.02.20 Team : Lunik Type : New Functionality +6
    
48. Unable to edit content from Card view in content Search. #27522
    Merged QA : Approved QA : Passed Internal Release : 24.02.20 Team : Falcon Type : Defect +6
49. Edit Content: Create Setting Tab for Binary Field #26656
    OKR : Core Features Priority : 3 Average Team : Lunik Triage Type : Task stale +6
50. Edit Content : Add a button to the Content Type screen to enable the new edit mode #27289
    QA : Approved Release : 24.02.20 Team : Falcon Team : Lunik Type : Task +5
    

    
51. Edit Content: Research for Custom Fields #27661
    OKR : Technical User Experience Priority : 3 Average QA : Not Needed Team : Lunik Type : Task +5
    

    
52. Edit Content: Research on Customizations in dotCMS for TinyMCE Library #27519
    7 of 7
    OKR : Core Features Priority : 3 Average QA : Not Needed Team : Lunik Type : Defect +5
    
53. Edit Contentlet: Make our dotAddImage custom plugins for TinyMCE work in Angular #27969
    OKR : Core Features Priority : 3 Average QA : Approved Release : 24.04.5 Team : Lunik Triage Type : Task +7
    
54. Edit Content: Implement new design in the edit content screen sidebar #27908
    OKR : Core Features Priority : 3 Average Team : Lunik Type : New Functionality +4
    
55. Edit Contentlet: Make our custom plugins for TinyMCE work in Angular #27947
    OKR : Core Features Priority : 3 Average QA : Not Needed Team : Lunik Triage Type : Task +6
56. Edit Contentlet: The Favorite Pages portlet redirects to the new Edit Beta Content page even when the feature is turned off for pages #28094
    OKR : Core Features Priority : 3 Average Team : Lunik Triage Type : Defect +5
57. Edit Contentlet: Redirect to the correct edit contentlet from the page portlet #28200
    OKR : Core Features Priority : 3 Average QA : Approved Release : 24.04.24 Team : Lunik Triage Type : Defect +7
    
58. Edit Contentlet: Allow WYSIWYG user setting systemwide TinyMCE props #28097
    OKR : Core Features Priority : 3 Average QA : Approved Release : 24.04.23 Team : Lunik Triage Type : Task +7
    
59. Edit Contentlet: Add TinyMCE V6 WYSIWFY field to the form #27943
    OKR : Core Features Priority : 3 Average QA : Approved QA : Passed Internal Release : 24.03.22 Team : Lunik Triage Type : Task +8
    
60. Edit Contentlet: Allow WYSIWYG user configuration through tinymceprops Field Variable #27944
    OKR : Core Features Priority : 3 Average QA : Approved Release : 24.04.16 Team : Lunik Triage Type : Task +7
    
61. Edit Content: Investigate how the Assign and Comment option in a Workflow Action works #26903
    QA : Not Needed Team : Falcon Type : Task dotCMS : Content Management +4
62. Edit Contentlet: Allow user to configure Image URL Format Pattern in WYSIWYG Field #28011
    OKR : Core Features Priority : 3 Average QA : Approved QA : Passed Internal Release : 24.04.16 Team : Lunik Team : Scout Triage Type : Task +9
    
63. Edit Contentlet: Allow users to switch between modes in the WYSIWYG field #27945
    Needs UI OKR : Core Features Priority : 3 Average Type : Task +4
64. Edit Contentlet: Expose AChecker Class to an endpoint #28156
    Doc : Needs Doc OKR : Core Features Priority : 3 Average QA : Approved QA : Passed Internal Release : 24.09.21 Team : Falcon Type : Task dotCMS : Rest API +9
65. Edit Contentlet: Allow User to Toggle Between WYSIWYG and Code Field #28186
    Doc : Needs Doc Needs UI OKR : Core Features Priority : 3 Average QA : Approved QA : Passed Internal Release : 24.10.02 Team : Falcon Type : Defect +9
    
66. Edit Content: Expose Date and User Information in Content API Response #28183
    5 of 5
    OKR : Core Features Priority : 3 Average QA : Approved Release : 24.05.31 Team : Lunik Team : Scout Type : New Functionality +7
    
67. File Fields Not Showing in EditV2 Mode During New Contentlet Creation #28302
    +0
68. Edit Contentlet: Workflow Action Endpoint does not return the contentlet metadata #28338
    OKR : Core Features Priority : 3 Average QA : Approved Release : 24.06.21 Team : Lunik Triage Type : Task +7
    
69. Edit Content: Add Site/Folder Field #28494
    5 of 5
    Epic QA : Approved Release : 24.06.26 Team : Falcon Type : New Functionality dotCMS : Content Management +6
70. Edit Content: Add Category Field #28493
    21 of 21
    Epic QA : Approved Release : 24.09.21 Team : Falcon Type : New Functionality +5
71. New Content Edit: Implement File field #29691
    5 of 5
    Epic OKR : User Experience Team : Falcon Type : New Functionality dotCMS : Content Management +5
    
72. New Content Edit: Implement Image field #29692
    4 of 4
    Epic OKR : User Experience QA : Passed Internal Team : Falcon Type : New Functionality dotCMS : Content Management +6
    
73. Implement the redesign and Enhance Content Type Editor #30012
    3 of 10
    Team : Falcon +1
74. Implement Advanced Relationship Field #30495
    6 of 10
    Epic Team : Falcon Type : New Functionality +3
75. Implement Dynamic Key/Value Field Component for Edit Contentlet #30493
    Team : Falcon Type : New Functionality +2
76. Implement change detection for new content edit #30633
    OKR : Core Features OKR : User Experience Team : Falcon Type : New Functionality dotCMS : Content Management +5

Proposed Objective

Please Select

Proposed Priority

Please Select

External Links... Slack Conversations, Support Tickets, Figma Designs, etc.

No response

Assumptions & Initiation Needs

No response

Quality Assurance Notes & Workarounds

No response

Sub-Tasks & Estimates

No response

[josemejias11]

QA Feedback

1. Only at the second try the adds the selected piece of content, it should make it at the first time it opens

Screen.Recording.2024-05-09.at.8.45.36.AM.mov

2. No videos from the library are showing up to add on the contentlet. It flickers like showing them up but they disappear after it

Screen.Recording.2024-05-09.at.8.50.15.AM.mov