[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:
causality
caused by MGNLFE-563 Refactor EditableComment (interactivi... Closed
Sub-Tasks:
Key
Summary
Type
Status
Assignee
MGNLFE-618 Implementation Sub-task Completed Oanh Thai Hoang  
MGNLFE-619 Review Sub-task Completed Phong Le Quoc  
MGNLFE-620 Pre-Integration QA Sub-task Closed Anh Vu  
MGNLFE-621 QA Sub-task Completed Phong Le Quoc  
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: DeveloperX
Work Started:
Approved:
Yes

 Description   

Steps:

  1. Import react-sample website
  2. Add 3 titles
  3. Add variants for the second title

Error:

  1. Variants menu select Original item always
  2. The green bar of the second title is above the first title.

 

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;
 

 

Generated at Mon Feb 12 05:49:09 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.