github.com/jgarto/itcv@v0.0.0-20180826224514-4eea09c1aa0d/examples/markdowneditor/markdown_editor.go (about)

     1  package markdowneditor // import "myitcv.io/react/examples/markdowneditor"
     2  
     3  import (
     4  	"github.com/gopherjs/gopherjs/js"
     5  	"honnef.co/go/js/dom"
     6  	"myitcv.io/react"
     7  	"myitcv.io/remarkable"
     8  )
     9  
    10  //go:generate reactGen
    11  
    12  // MarkdownEditorDef is the definition of the MarkdownEditor component
    13  type MarkdownEditorDef struct {
    14  	react.ComponentDef
    15  }
    16  
    17  // MarkdownEditorState is the state type for the MarkdownEditor component
    18  type MarkdownEditorState struct {
    19  	value  string
    20  	remark *remarkable.Remarkable
    21  
    22  	// We don't actually use the DOM element for the containing div in the
    23  	// logic of the MarkdownEditor example, rather it's just a demonstration
    24  	// of React Refs at work.
    25  	div *divRef
    26  }
    27  
    28  // MarkdownEditor creates instances of the MarkdownEditor component
    29  func MarkdownEditor() *MarkdownEditorElem {
    30  	return buildMarkdownEditorElem()
    31  }
    32  
    33  // GetInitialState returns the initial state for a MarkdownEditor component
    34  func (m MarkdownEditorDef) GetInitialState() MarkdownEditorState {
    35  	remark := remarkable.NewRemarkable()
    36  	return MarkdownEditorState{
    37  		value:  "Type some *markdown* here!",
    38  		remark: remark,
    39  		div:    &divRef{m: m},
    40  	}
    41  }
    42  
    43  // Render renders the MarkdownEditor component
    44  func (m MarkdownEditorDef) Render() react.Element {
    45  	val := m.State().value
    46  
    47  	return react.Div(&react.DivProps{Ref: m.State().div},
    48  		react.H3(nil, react.S("Input")),
    49  		react.TextArea(
    50  			&react.TextAreaProps{
    51  				ClassName: "form-control",
    52  				Value:     val,
    53  				OnChange:  inputChange{m},
    54  			},
    55  		),
    56  		react.H3(nil, react.S("Output")),
    57  		react.Div(
    58  			&react.DivProps{
    59  				ClassName:               "well",
    60  				DangerouslySetInnerHTML: m.getRawMarkup(),
    61  			},
    62  		),
    63  	)
    64  }
    65  
    66  func (m MarkdownEditorDef) getRawMarkup() *react.DangerousInnerHTML {
    67  	st := m.State()
    68  	md := st.remark.Render(st.value)
    69  	return react.NewDangerousInnerHTML(md)
    70  }
    71  
    72  type inputChange struct{ m MarkdownEditorDef }
    73  
    74  func (i inputChange) OnChange(se *react.SyntheticEvent) {
    75  	st := i.m.State()
    76  
    77  	target := se.Target().(*dom.HTMLTextAreaElement)
    78  	st.value = target.Value
    79  
    80  	i.m.SetState(st)
    81  }
    82  
    83  type divRef struct {
    84  	m   MarkdownEditorDef
    85  	div *dom.HTMLDivElement
    86  }
    87  
    88  func (d *divRef) Ref(h *js.Object) {
    89  	if h == nil {
    90  		// unmounting
    91  		return
    92  	}
    93  
    94  	var div *dom.HTMLDivElement
    95  	if e := dom.WrapHTMLElement(h); e != nil {
    96  		div = e.(*dom.HTMLDivElement)
    97  	}
    98  
    99  	d.div = div
   100  
   101  	print("Here is the containing div for the rendered MarkdownEditor", div.Object)
   102  
   103  	// in case we need to re-render at this point we could call
   104  	d.m.ForceUpdate()
   105  }