integrated wysiwyg

dist/index.html

@@ -15,12 +15,103 @@
   <script src="./dev/popper-1.12.3.js"></script>
   <script src="./dev/bootstrap-4.0.0-beta.2.js"></script>
 
-  <div id='content'></div>
+  <script type="text/javascript" src="/asset/tinymce/jquery.tinymce.min.js"></script>
+  <script type="text/javascript" src="/asset/tinymce/tinymce.min.js"></script>
 
-  <script src='./html-documents.app.dev.js'></script>
+  <div id='content'></div>
 
   <script type='text/javascript'>
-    // appPageHtml.renderApp('content')
+    (function () {
+      wysiwyg = function (selector, handleOnChange) {
+        function base64EncodeAndTinyMceInsert (files) {
+          for (var i = 0; i < files.length; i++) {
+            if (files[i].size > 1000000)
+              files[i].allowed = confirm(files[i].name + " fait plus de 1mo et peut prendre du temps à insérer, voulez-vous continuer ?")
+          }
+
+          for (var i = 0; i < files.length; i++) {
+            if (files[i].allowed !== false && files[i].type.match('image.*')) {
+              var img = document.createElement('img')
+
+              var fr = new FileReader()
+
+              fr.readAsDataURL(files[i])
+
+              fr.onloadend = function (e) {
+                img.src = e.target.result
+                tinymce.activeEditor.execCommand('mceInsertContent', false, img.outerHTML)
+              }
+            }
+          }
+        }
+
+        // HACK: The tiny mce source code modal contain a textarea, but we
+        // can't edit it (like it's readonly). The following solution
+        // solve the bug: https://stackoverflow.com/questions/36952148/tinymce-code-editor-is-readonly-in-jtable-grid
+        $(document).on('focusin', function(e) {
+          if ($(e.target).closest(".mce-window").length) {
+            e.stopImmediatePropagation();
+          }
+        });
+
+        tinymce.init({
+          selector: selector,
+          // height: 130,
+          // width: 530,
+          menubar: false,
+          resize: false,
+          plugins: [
+            'advlist autolink lists link image charmap print preview anchor textcolor',
+            'searchreplace visualblocks code fullscreen',
+            'insertdatetime media table contextmenu paste code help'
+          ],
+          toolbar: 'insert | formatselect | bold italic underline strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | table | code ',
+          content_css: [
+            '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
+            '//www.tinymce.com/css/codepen.min.css'
+          ],
+          setup: function ($editor) {
+            $editor.on('change', function(e) {
+              handleOnChange({target: {value: $editor.getContent()}}) // target.value to emulate a js event so the react handler can expect one
+            })
+
+            //////////////////////////////////////////////
+            // add custom btn to handle image by selecting them with system explorer
+            $editor.addButton('customInsertImage', {
+              icon: 'mce-ico mce-i-image',
+              title: 'Image',
+              onclick: function () {
+                if ($('#hidden_tinymce_fileinput').length > 0) $('#hidden_tinymce_fileinput').remove()
+
+                fileTag = document.createElement('input')
+                fileTag.id = 'hidden_tinymce_fileinput'
+                fileTag.type = 'file'
+                $('body').append(fileTag)
+
+                $('#hidden_tinymce_fileinput').on('change', function () {
+                  base64EncodeAndTinyMceInsert($(this)[0].files)
+                })
+
+                $('#hidden_tinymce_fileinput').click()
+              }
+            })
+
+            //////////////////////////////////////////////
+            // Handle drag & drop image into TinyMce by encoding them in base64 (to avoid uploading them somewhere and keep saving comment in string format)
+            $editor
+              .on('drag dragstart dragend dragover dragenter dragleave drop', function (e) {
+                e.preventDefault()
+                e.stopPropagation()
+              })
+              .on('drop', function(e) {
+                base64EncodeAndTinyMceInsert(e.dataTransfer.files)
+              })
+          }
+        })
+      }
+    })()
   </script>
+
+  <script src='./html-documents.app.dev.js'></script>
 </body>
 </html>

package.json

@@ -51,6 +51,7 @@
       "history",
       "btoa",
       "wysiwyg",
+      "tinymce",
       "GLOBAL_renderApp",
       "GLOBAL_unmountApp",
       "GLOBAL_dispatchEvent"

src/component/HtmlDocument.jsx

@@ -14,6 +14,7 @@ const HtmlDocument = props => {
 
       {props.mode === MODE.EDIT &&
         <TextAreaApp
+          id={props.wysiwygNewVersion}
           customClass={'html-documents__editionmode'}
           onClickCancelBtn={props.onClickCloseEditMode}
           onClickValidateBtn={props.onClickValidateBtn}

src/container/HtmlDocument.jsx

@@ -22,6 +22,7 @@ class HtmlDocument extends React.Component {
       content: props.data ? props.data.content : debug.content,
       timeline: props.data ? [] : [], // debug.timeline,
       newComment: '',
+      timelineWysiwyg: false,
       mode: MODE.VIEW
     }
 
@@ -43,21 +44,22 @@ class HtmlDocument extends React.Component {
 
   componentDidMount () {
     console.log('HtmlDocument did mount')
-    if (this.state.content.content_id === -1) return // debug case
 
     this.loadContent()
-    wysiwyg()
   }
 
   componentDidUpdate (prevProps, prevState) {
-    console.log('HtmlDocument did update', prevState, this.state)
-    if (!prevState.content || !this.state.content) return
+    const { state } = this
 
-    if (prevState.content.content_id !== this.state.content.content_id) {
-      this.loadContent()
-    }
+    console.log('HtmlDocument did update', prevState, state)
+    if (!prevState.content || !state.content) return
+
+    if (prevState.content.content_id !== state.content.content_id) this.loadContent()
 
-    if (prevState.mode === MODE.VIEW && this.state.mode === MODE.EDIT) wysiwyg()
+    if (state.mode === MODE.EDIT) wysiwyg('#wysiwygNewVersion', this.handleChangeText)
+
+    if (!prevState.timelineWysiwyg && state.timelineWysiwyg) wysiwyg('#wysiwygTimelineComment', this.handleChangeNewComment)
+    else if (prevState.timelineWysiwyg && !state.timelineWysiwyg) tinymce.remove('#wysiwygTimelineComment')
   }
 
   loadContent = async () => {
@@ -120,10 +122,7 @@ class HtmlDocument extends React.Component {
     fetch(`${this.state.config.apiUrl}/workspaces/${this.state.content.workspace_id}/html-documents/${this.state.content.content_id}`, {
       ...FETCH_CONFIG,
       method: 'PUT',
-      body: JSON.stringify({
-        label: label,
-        raw_content: rawContent
-      })
+      body: JSON.stringify({label: label, raw_content: rawContent})
     })
 
   handleClickBtnCloseApp = () => {
@@ -141,11 +140,10 @@ class HtmlDocument extends React.Component {
       })
   }
 
-  handleClickNewVersion = () => {
-    this.setState({ mode: MODE.EDIT })
-  }
+  handleClickNewVersion = () => this.setState({ mode: MODE.EDIT })
 
   handleCloseNewVersion = () => {
+    tinymce.remove('#wysiwygNewVersion')
     this.setState({ mode: MODE.VIEW })
   }
 
@@ -166,7 +164,7 @@ class HtmlDocument extends React.Component {
   }
 
   handleChangeText = e => {
-    const newText = e.target.value // because SyntheticEvent is pooled (react specificity
+    const newText = e.target.value // because SyntheticEvent is pooled (react specificity)
     this.setState(prev => ({content: {...prev.content, raw_content: newText}}))
   }
 
@@ -190,6 +188,7 @@ class HtmlDocument extends React.Component {
       .then(resSave => {
         if (resSave.apiResponse.status === 200) {
           this.setState({newComment: ''})
+          if (this.state.timelineWysiwyg) tinymce.get('wysiwygTimelineComment').setContent('')
           this.loadContent()
         } else {
           console.warn('Error saving html-document comment. Result:', resSave, 'content:', content, 'config:', config)
@@ -197,6 +196,8 @@ class HtmlDocument extends React.Component {
       })
   }
 
+  handleToggleWysiwyg = () => this.setState(prev => ({timelineWysiwyg: !prev.timelineWysiwyg}))
+
   handleChangeStatus = async newStatus => {
     const { config, content } = this.state
 
@@ -237,7 +238,7 @@ class HtmlDocument extends React.Component {
   }
 
   render () {
-    const { isVisible, loggedUser, content, timeline, newComment, config } = this.state
+    const { isVisible, loggedUser, content, timeline, newComment, timelineWysiwyg, config } = this.state
 
     if (!isVisible) return null
 
@@ -256,7 +257,7 @@ class HtmlDocument extends React.Component {
           availableStatus={config.availableStatuses}
           onClickNewVersionBtn={this.handleClickNewVersion}
           onChangeStatus={this.handleChangeStatus}
-          selectedStatus={config.availableStatuses.find(s => s.slug === content.status)} // peut être vide avant que api reponde
+          selectedStatus={config.availableStatuses.find(s => s.slug === content.status)} // might be empty while api hasn't responded yet
           onClickArchive={this.handleClickArchive}
           onClickDelete={this.handleClickDelete}
           i18n={i18n}
@@ -265,6 +266,7 @@ class HtmlDocument extends React.Component {
         <PopinFixedContent customClass={`${config.slug}__contentpage`}>
           <HtmlDocumentComponent
             mode={this.state.mode}
+            wysiwygNewVersion={'wysiwygNewVersion'}
             onClickCloseEditMode={this.handleCloseNewVersion}
             onClickValidateBtn={this.handleSaveHtmlDocument}
             version={timeline.filter(t => t.timelineType === 'revision').length}
@@ -278,8 +280,10 @@ class HtmlDocument extends React.Component {
             loggedUser={loggedUser}
             timelineData={timeline}
             newComment={newComment}
+            wysiwyg={timelineWysiwyg}
             onChangeNewComment={this.handleChangeNewComment}
             onClickValidateNewCommentBtn={this.handleClickValidateNewCommentBtn}
+            onClickWysiwygBtn={this.handleToggleWysiwyg}
           />
         </PopinFixedContent>
       </PopinFixed>