Change Details

## Description NOTE: The work on this component has been started as part of the DefaultView POC (T321784) Complete this component as per the designs specified in the Figma file. **Desired behavior/Acceptance criteria** * [ ] Must be able to view code using ace.js * [ ] Must be able to edit code using ace.js **Devices and Design (URLs or screenshots)** Figma: https://www.figma.com/file/uNBSv1e4ceA8tGNr29R9vp/Default-component?node-id=3043%3A61978&t=HYKgOdmMUb1GV57x-0 --- ## Completion checklist * [ ] Before closing this task, review one by one the checklist available here: https://www.mediawiki.org/wiki/Abstract_Wikipedia_team/Definition_of_Done#Front-end_Task/Bug_Completion_Checklist

## Description Create ZCode custom component following the same patterns as other default/* components created for the DefaultView **Desired behavior/Acceptance criteria** * [ ] Objects of type Z16/Code should be rendered by default with this component in both edit and view mode * [ ] Must be able to view code using ace.js * [ ] Must be able to edit code using ace.js * [ ] Editing the language selector should effectively change the value of the Z16K1 key * [ ] Editing the code editor should effectively change the value of the Z16K2 key * [ ] Styles according to the attached designs* NOTE: There are no explicit designs for ZCode in the DefaultView figma file, but we should be able to easily reinterpret the functionality of the old ZCode component for the DefaultView **Devices and Design (URLs or screenshots)** Figma: https://www.figma.com/file/uNBSv1e4ceA8tGNr29R9vp/Default-component?node-id=3043%3A62307&t=HYKgOdmMUb1GV57x-0 --- ## Completion checklist * [ ] Before closing this task, review one by one the checklist available here: https://www.mediawiki.org/wiki/Abstract_Wikipedia_team/Definition_of_Done#Front-end_Task/Bug_Completion_Checklist

## Description NOTE: The work on thisCreate ZCode custom component has been started as part of the Dfollowing the same patterns as other defaultView POC (T321784)t/* components created for the DefaultView Complete this component as per the designs specified in the Figma file. **Desired behavior/Acceptance criteria** * [ ] Objects of type Z16/Code should be rendered by default with this component in both edit and view mode * [ ] Must be able to view code using ace.js * [ ] Must be able to edit code using ace.js * [ ] Editing the language selector should effectively change the value of the Z16K1 key * [ ] Editing the code editor should effectively change the value of the Z16K2 key * [ ] Styles according to the attached designs* NOTE: There are no explicit designs for ZCode in the DefaultView figma file, but we should be able to easily reinterpret the functionality of the old ZCode component for the DefaultView **Devices and Design (URLs or screenshots)** Figma: https://www.figma.com/file/uNBSv1e4ceA8tGNr29R9vp/Default-component?node-id=3043%3A619782307&t=HYKgOdmMUb1GV57x-0 --- ## Completion checklist * [ ] Before closing this task, review one by one the checklist available here: https://www.mediawiki.org/wiki/Abstract_Wikipedia_team/Definition_of_Done#Front-end_Task/Bug_Completion_Checklist