[MGNLFE-617] Variants menu and green bar position are wrong Created: 14/Aug/23 Updated: 19/Sep/23 Resolved: 06/Sep/23 |
|
| Status: | Closed |
| Project: | Magnolia Frontend Helpers |
| Component/s: | None |
| Affects Version/s: | None |
| Fix Version/s: | 1.6 |
| Type: | Bug | Priority: | Neutral |
| Reporter: | Phong Le Quoc | Assignee: | Oanh Thai Hoang |
| Resolution: | Fixed | Votes: | 0 |
| Labels: | None | ||
| Σ Remaining Estimate: | 0d | Remaining Estimate: | 0d |
| Σ Time Spent: | 3d 7.5h | Time Spent: | 3d 0.5h |
| Σ Original Estimate: | Not Specified | Original Estimate: | Not Specified |
| Issue Links: |
|
|||||||||||||||||||||||||
| Sub-Tasks: |
|
|||||||||||||||||||||||||
| Template: | ||||||||||||||||||||||||||
| Acceptance criteria: |
Empty
|
|||||||||||||||||||||||||
| Task DoD: |
[X]*
Doc/release notes changes? Comment present?
[X]*
Downstream builds green?
[X]*
Solution information and context easily available?
[X]*
Tests
[X]*
FixVersion filled and not yet released
[ ] 
Architecture Decision Record (ADR)
|
|||||||||||||||||||||||||
| Bug DoR: |
[ ]*
Steps to reproduce, expected, and actual results filled
[ ]*
Affected version filled
|
|||||||||||||||||||||||||
| Epic Link: | React RSC | |||||||||||||||||||||||||
| Sprint: | DevX 45 | |||||||||||||||||||||||||
| Story Points: | 3 | |||||||||||||||||||||||||
| Team: | ||||||||||||||||||||||||||
| Work Started: | ||||||||||||||||||||||||||
| Approved: |
Yes
|
|||||||||||||||||||||||||
| Description |
|
Steps:
Error:
NOTE: Does not happen with front-end helper version 1.4 |
| Comments |
| Comment by Phong Le Quoc [ 14/Aug/23 ] |
|
I used a blind convert version and there is no issue /* eslint-disable import/no-extraneous-dependencies */ import React, { useEffect, useRef, useState } from "react"; import PropTypes from 'prop-types'; import { EditorContextHelper } from '../../util'; function EditableComment(props) { let _renderedAnnotation = ''; const commentRef = useRef(); const mountedRef = useRef(); const ref = (node) => { renderAnnotation(node); }; const [isRender, setIsRender] = useState(false); useEffect(()=> { mountedRef.current = true; if (props.alwaysRender && props.annotation) { setIsRender(props.alwaysRender); } else { EditorContextHelper.inEditorAsync().then(inEditor => { // NOTE: // This mountedRef variable is for ensuring component is mounted before set state. if (mountedRef.current && inEditor) { setIsRender(inEditor); } }); } return function clean() { mountedRef.current = false; // NOTE: // #renderAnnotation method that it adds custom HTML comment by document API (not react framework), // so we have to remove that HTML comment before the component is unmounted and lost reference to the comment object. removeAnnotation(); } }, []);// eslint-disable-line react-hooks/exhaustive-deps function renderAnnotation(element) { if (element) { removeAnnotation(); commentRef.current = document.createComment(_renderedAnnotation); element.before(commentRef.current); updateAnnotation(); setIsRender(false); } } function removeAnnotation() { if (commentRef.current && commentRef.current.parentNode) { commentRef.current.parentNode.removeChild(commentRef.current); commentRef.current = null; } } function updateAnnotation() { const annotation = props.annotation || ''; if (commentRef.current && _renderedAnnotation !== annotation) { commentRef.current.textContent = annotation; _renderedAnnotation = annotation; if (typeof props.callback === 'function') { setTimeout(() => props.callback(), 0); } } } updateAnnotation(); return isRender ? (<div ref={ref} />) : null; } EditableComment.propTypes = { alwaysRender: PropTypes.bool, annotation: PropTypes.string, callback: PropTypes.func }; EditableComment.defaultProps = { alwaysRender: false, annotation: '', callback: undefined }; export default EditableComment;
|