react-bootstrap-front 3.9.0 → 3.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-front",
-  "version": "3.9.0",
+  "version": "3.9.1",
   "description": "React Bootstrap Components",
   "keywords": [
     "Bootstrap 4",

package/src/features/advanced/ResponsiveModalInner.js

@@ -298,7 +298,7 @@ export default class ResponsiveModalInner extends Component {
                             </div>
                           }
                         </div>
-                        {this.props.buttons && (
+                        {(this.props.buttons || this.props.help || this.props.saving) && (
                           <div className={classnames('modal-footer', this.props.modalClassName)}>
                             {(this.props.help || this.props.saving ) &&
                               <div className="modal-left-buttons">

package/src/features/basic/InputJson.js

@@ -8,7 +8,6 @@ import { getFieldId } from '../helpers';
 export const InputJson = props => {
   let myId = getFieldId(props.name, props.id);
   const data = JSON.parse(props.value) || {};
-  console.log(data, props.value);
   return (
     <InputGroup {...props} id={myId}>
       {props.prepend && props.prepend !== '' && (

package/src/features/draft/InputHtml.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { EditorState, Modifier } from 'draft-js';
+import { EditorState, Modifier, CompositeDecorator } from 'draft-js';
 import { Editor } from 'react-draft-wysiwyg';
 import { convertToHTML, convertFromHTML } from 'draft-convert';
 import { htmlToString } from '../helpers';
@@ -52,6 +52,9 @@ const toHtml = {
     if (entity.type === 'LINK') {
       return <a href={entity.data.url}>{originalText}</a>;
     }
+    if (entity.type === 'MAILMERGE') {
+      return <span data-mailmerge="{originalText}">{originalText}</span>;
+    }
     return originalText;
   },
 };
@@ -105,6 +108,9 @@ const fromHtml = {
     if (nodeName === 'a') {
       return createEntity('LINK', 'MUTABLE', { url: node.href });
     }
+    if (nodeName === 'span' && node.dataset && node.dataset.mailmerge) {
+      return createEntity('MAILMERGE', 'IMMUTABLE', { mailmerge: node.dataset.mailmerge });
+    }
   },
   textToEntity: (text, createEntity) => {
     const result = [];
@@ -129,6 +135,27 @@ const fromHtml = {
   },
 };
 
+function findMailmergeEntities(contentBlock, callback, contentState) {
+  console.log(callback);
+  contentBlock.findEntityRanges(
+    (character) => {
+      const entityKey = character.getEntity();
+      const found = entityKey !== null && contentState.getEntity(entityKey).getType() === 'MAILMERGE';
+      return found;
+    },
+    callback
+  );
+}
+
+const Mailmerge = (props) => {
+  const {mailmerge} = props.contentState.getEntity(props.entityKey).getData();
+  return (
+    <a href={mailmerge}>
+      {props.children}
+    </a>
+  );
+};
+
 export default class InputTextarea extends Component {
   static propTypes = {
     id: PropTypes.string,
@@ -169,9 +196,15 @@ export default class InputTextarea extends Component {
     } else {
       content = '<p/>';
     }
+    const decorator = new CompositeDecorator([
+      {
+        strategy: findMailmergeEntities,
+        component: Mailmerge,
+      },
+    ]);
     const value = convertFromHTML(fromHtml)(content);
     this.state = {
-      editorState: EditorState.createWithContent(value),
+      editorState: EditorState.createWithContent(value, decorator),
       toolbar: false,
     };
     this.onEditorStateChange = this.onEditorStateChange.bind(this);

package/src/features/draft/InputHtml.scss

@@ -6,3 +6,7 @@
   padding: 5px;
   border: 1px solid theme-color('secondary-light');
 }
+
+.rbf-mailmerge {
+  color: #105a1c;
+}