WepApp | Metoer | CodeMirror | Issue | CodeMirror Instance 의 height 가 제대로 calculate 되지 않을 때, ps. height 가 0 일 때

• CodeMirror package 정보
  • 사용 package 명 : perak:codemirror
  • download: https://atmospherejs.com/perak/codemirror

• Issue
• CodeMirror 를 이용하여 text code 를 DOM(a 라 하자) 에 insert 하여 표현할 때
• 만약 editor(b라 하자) 를 포함하는 DOM 의 css style 중 {display: 'none'} 이라면
• editor 를 포함하는 DOM 을 다시 display 시켜줄 때
• CodeMirror 의 height 가 제대로 calculate 되지 않는 문제가 발생함. ({height:0} 의 css property, value 를 가짐)


• Solution
• CodeMirror 의 editor 를 포함하는 DOM(a) 이 아니라
• CodeMirror editor(b) 의 Instance() 를 refresh() 시켜줘야한다.
• DOM 이 아닌 editor 의 Instance() 임에 주의

•  test 환경
• WebFramework: Meteor
• Language: CoffeeScript


• Example
• CoffeeScript 로 작성된 code 임.
• Code
  

  Template.templateShowCode.onRendered ->
    # @data: file type 의 MongoDB document 라고 가정
    try
      @viewer = CodeMirror.fromTextArea @$('#co-type-snippet')[0], {
        lineNumbers: true
        dragDrop: false
        #viewportMargin: Infinity
        readOnly: 'nocursor'
        scrollbarStyle: 'null'
        mode: @data.type
        cursorHeight: 0.1
        autorefresh: 500
      }
  
      HTTP.call 'GET', @data.pub_url, {}, (err, res) =>
        if err
          console.log err
          return
  
        @data.previewSource = res.content
        @viewer.setValue(trimPreviewSource(@data.previewSource))
        @viewer.setSize(null, 'auto')   # height: 'auto'
  
        # CodeMirror 의 Instance 를 Array 에 저장해놓기.
        cmv = codeMirrorViewers.get()
        cmv.push(@viewer)
        codeMirrorViewers.set(cmv)
  
  
  # CodeMirror 를 이용하는 viewer instance 를 저장하는 array
  codeMirrorViewers = new ReactiveVar([])
  
  # viewer 의 css property display 값이 none 이라면 ({'display': 'none'})
  # viewer 또는 viewer 를 포함하는 DOM 의 display 값이 'block' 등 show 상태로 바뀔 때
  # 반드시 CodeMirror viewer 의 instance 를 refresh 해줘야만 한다.
  # 다음과 같이 viewer instance 를 array 로 가지고 있는 cmViewers 가 있다고 가정할 때
  # openCodeMirror method 를 call 해서 CodeMirror Viewer 의 instance 를 refresh 해준다.
  openCodeMirror = () ->
    cmViewers = codeMirrorViewers.get()
    for view in cmViewers
      view.refresh()        # view: CodeMirror instance

• 위와 같은 코드로 CodeMirror.fromTextArea() 를 이용하여 CodeMirror Editor 의 Instance 를 생성하였고
• 만약 이 Instance 의 templateShowCode(html template 명) 의 css{display: 'none'} 이라면
• templateShowCode template 구역을 다시 display 시켜줄 때
• CodeMirror 의 instance 인 @viewer 를 refresh() 시켜줘야만 함.
• 그래야 CodeMirror Editor 의 caa{height: 'integer_value'} 가 제대로 calculate 되어 CodeMirror Editor 의  DOM 이 올바르게 display 됨.

• Point
• 위의 code 는 Meteor 와 CoffeeScript 를 사용하여 작성한 code 임
• so, Meteor WebFramework 나 CoffeeScript 를 알지 못하는 경우 헷갈릴 수 있음.
• 위의 code 에서 point 는 CodeMirror Instance 를 생성하였고,
• CodeMirror Instance 를 포함하는 DOM('parent_dom' 이라고 하자) 의 css property 중 'display' 가 {'display': 'none'} 이라고 할 때
• parent_dom 의 css 'display' 의 value 가 'none' 이 아닌 상태가 되어 parent_dom 이 browser 나 web app 이나 mobile app 에 show 될 때
• CodeMirror Instance 를 포함하는 부분이 정상적으로 file 의 code 를 표현해주기 위해서는
• 반드시 parent_dom 이 child 로 가지고 있는 CodeMirror Instance 를 refresh() 시켜줘야만
• CodeMirror 가 file 의 code 내용을 제대로 표현해줄 수 있다.