v1.18.0

Author: danieloprado

components/Html/index.tsx

@@ -2,11 +2,12 @@ import InputLabel from '@material-ui/core/InputLabel';
 import Typography from '@material-ui/core/Typography';
 import FieldCoreBase, { IStateFieldBase } from '@react-form-fields/core/components/FieldCoreBase';
 import ValidationContextRegister from '@react-form-fields/core/components/ValidationContextRegister';
-import { getConfig } from '@react-form-fields/core/config';
 import * as React from 'react';
 
+import { getConfig } from '../../config';
 import { WithStyles } from '../../decorators/withStyles';
 import { IBaseFieldProps } from '../../interfaces/props';
+import * as styles from './style.css';
 
 interface IState extends IStateFieldBase {
   focused: boolean;
@@ -31,16 +32,75 @@ interface IProps extends IBaseFieldProps {
   }
 }))
 export default class FieldHtml extends FieldCoreBase<IProps, IState> {
+  dependenciesLoaded: Promise<string>;
+  instance: any;
+  textareaRef = React.createRef<HTMLTextAreaElement>();
 
-  onChange = (value: any) => {
+  constructor(props: IProps) {
+    super(props);
+    this.dependenciesLoaded = this.loadDependencies();
+  }
+
+  loadDependencies = async () => {
+    if (!window.jQuery) {
+      window.jQuery = window.$ = await import('jquery') as any;
+    }
+
+    const { loadLocale, loadPlugins } = getConfig().trumbowyg;
+    const [svgPath] = await Promise.all([
+      import('trumbowyg/dist/ui/icons.svg'),
+      import('trumbowyg/dist/trumbowyg.min.js'),
+      import('trumbowyg/dist/ui/trumbowyg.min.css'),
+    ]);
+
+    await Promise.all([
+      import('trumbowyg/dist/plugins/history/trumbowyg.history.min.js'),
+      import('trumbowyg/dist/plugins/cleanpaste/trumbowyg.cleanpaste.min.js'),
+      loadLocale ? loadLocale() : Promise.resolve(),
+      ...(loadPlugins ? loadPlugins() : []),
+    ]);
+
+    return svgPath;
+  }
+
+  async componentDidMount() {
+    const svgPath = await this.dependenciesLoaded;
+    this.instance = window.jQuery(this.textareaRef.current);
+
+    this.instance.trumbowyg({
+      svgPath,
+      useComposition: false,
+      autogrow: true,
+      ...getConfig().trumbowyg.config
+    }).on('tbwfocus', () => {
+      this.onFocus();
+    }).on('tbwchange', () => {
+      this.onChange(this.instance.trumbowyg('html'));
+    }).on('tbwblur', () => {
+      this.onBlur(this.instance.trumbowyg('html'));
+    });
+
+    this.instance.trumbowyg('html', this.props.value);
+  }
+
+  componentDidUpdate() {
+    this.instance.trumbowyg(this.props.disabled ? 'disable' : 'enable');
+
+    if (this.instance.trumbowyg('html') !== this.props.value) {
+      this.instance.trumbowyg('html', this.props.value);
+    }
+  }
+
+  onChange = (value: string) => {
     getConfig().validationOn === 'onChange' && this.setState({ showError: true });
     this.props.onChange(value);
   }
 
-  onBlur = (e: React.SyntheticEvent) => {
+  onBlur = (value: string) => {
     getConfig().validationOn === 'onBlur' && this.setState({ showError: true });
     this.setState({ focused: false });
-    this.props.onBlur && this.props.onBlur(e);
+    this.props.onChange(value);
+    this.props.onBlur && this.props.onBlur(null);
   }
 
   onFocus = () => {
@@ -49,11 +109,10 @@ export default class FieldHtml extends FieldCoreBase<IProps, IState> {
 
   render() {
     const { focused } = this.state;
-    const { classes, label, helperText } = this.props;
-    /* disabled, onChange, onBlur, placeholder */
+    const { classes, label, helperText, placeholder, disabled } = this.props;
 
     return (
-      <div>
+      <div className={styles.component}>
 
         <ValidationContextRegister field={this} />
 
@@ -67,6 +126,8 @@ export default class FieldHtml extends FieldCoreBase<IProps, IState> {
           }
         </div>
 
+        <textarea ref={this.textareaRef} placeholder={placeholder} disabled={disabled} />
+
       </div>
     );
   }

components/Html/style.css

@@ -1,3 +1,15 @@
 :local(.component) {
   margin: 16px 0 8px 0;
+}
+
+:local(.component) .trumbowyg-box {
+  margin: 0;
+  font-family: "Roboto", sans-serif;
+}
+
+:local(.component)>textarea {
+  visibility: hidden;
+  display: block;
+  width: 100%;
+  height: 250px;
 }

config/builder.ts

@@ -13,11 +13,37 @@ export default class ConfigBuilder extends CoreConfigBuilder {
     return this;
   }
 
-  public setEditorConfig(locale: string, toolbar?: object) {
+  public setTrumbowygLocale(loadLocale: IConfig['trumbowyg']['loadLocale']) {
+    const currentConfig = this.config.trumbowyg || {};
     this.config = {
       ...this.config,
-      editorLocale: locale,
-      editorToolbar: toolbar || this.config.editorToolbar
+      trumbowyg: { ...currentConfig, loadLocale }
+    };
+
+    return this;
+  }
+
+  public setTrumbowygPlugins(loadPlugins: IConfig['trumbowyg']['loadPlugins']) {
+    const currentConfig = this.config.trumbowyg || {};
+    this.config = {
+      ...this.config,
+      trumbowyg: { ...currentConfig, loadPlugins }
+    };
+
+    return this;
+  }
+
+  public setTrumbowygConfig(config: IConfig['trumbowyg']['config'], resetConfig: boolean = false) {
+    const currentConfig = this.config.trumbowyg || {};
+    this.config = {
+      ...this.config,
+      trumbowyg: {
+        ...currentConfig,
+        config: {
+          ...(resetConfig ? {} : (currentConfig.config || {})),
+          ...config
+        }
+      }
     };
 
     return this;

config/index.ts

@@ -9,8 +9,11 @@ declare module '@react-form-fields/core/config' {
       ok: string;
       cancel: string
     };
-    editorLocale?: string;
-    editorToolbar?: object;
+    trumbowyg?: {
+      loadLocale?: () => Promise<any>;
+      loadPlugins?: () => Promise<any>[];
+      config?: any;
+    };
     validationOn?: 'onChange' | 'onBlur' | 'onSubmit';
   }
 }
@@ -22,6 +25,11 @@ const defaultConfig: coreConfig.IConfig = {
     clear: 'Clear',
     ok: 'Ok',
     cancel: 'Cancel'
+  },
+  trumbowyg: {
+    loadLocale: () => Promise.resolve(),
+    loadPlugins: () => [],
+    config: {}
   }
 };
 

declarations/extra.d.ts

@@ -4,7 +4,5 @@ declare module '@material-ui/icons/Search';
 declare module '@material-ui/icons/Close';
 declare module '@material-ui/icons/ChevronLeft';
 declare module '@material-ui/icons/ChevronRight';
-declare module 'draftjs-to-html';
-declare module 'html-to-draftjs';
-declare module 'draft-js-import-html';
+declare module 'trumbowyg*';
 declare module '*.css';

declarations/global.d.ts

@@ -0,0 +1,8 @@
+interface Window extends EventTarget, WindowTimers, WindowSessionStorage, WindowLocalStorage, WindowConsole, GlobalEventHandlers, IDBEnvironment, WindowBase64, GlobalFetch, WindowOrWorkerGlobalScope, WindowEventHandlers {
+  jQuery?: JQueryStatic;
+  $?: JQueryStatic;
+}
+
+interface JQuery<HTMLTextAreaElement> {
+  trumbowyg?: any;
+}

docs/project/src/components/Form.tsx renamed to docs/project/src/components/Pages/Dev/Form.tsx

@@ -83,6 +83,18 @@ export default class Form extends PureComponent<{}, IState> {
 
         <Card style={{ overflow: 'visible' }}>
           <CardContent>
+            <FieldHtml
+              label='HTML'
+              name='html'
+              placeholder='Your content'
+              value={model.html}
+              validation='required'
+              disabled={model.spam}
+              onChange={(v => this.setState({ model: { ...model, html: v } }))}
+            />
+
+            <p>{model.html}</p>
+
             <FieldText
               label='Name'
               name='name'
@@ -207,7 +219,7 @@ export default class Form extends PureComponent<{}, IState> {
           </CardContent>
           <Divider />
           <CardContent>
-            <Typography variant='subheading'>Complex Components</Typography>
+            <Typography variant='subtitle1'>Complex Components</Typography>
 
             <Grid container spacing={24}>
               <Grid item xs={12} sm={6}>
@@ -261,15 +273,6 @@ export default class Form extends PureComponent<{}, IState> {
               onChange={(v => this.setState({ model: { ...model, autocompleteId2: v } }))}
             />
 
-            <FieldHtml
-              label='HTML'
-              name='html'
-              placeholder='Your content'
-              value={model.html}
-              validation='required'
-              onChange={(v => this.setState({ model: { ...model, html: v } }))}
-            />
-
           </CardContent>
 
           <CardActions style={{ justifyContent: 'flex-end' }}>
@@ -291,4 +294,5 @@ export default class Form extends PureComponent<{}, IState> {
       </FormValidation>
     );
   }
+  // tslint:disable-next-line:max-file-line-count
 }

docs/project/src/components/Pages/Dev/index.tsx

@@ -0,0 +1,16 @@
+import Toolbar from 'components/Layout/Toolbar';
+import React, { Fragment, PureComponent } from 'react';
+
+import Form from './Form';
+
+export default class DevPage extends PureComponent {
+  render() {
+    return (
+      <Fragment>
+        <Toolbar title='Dev Page' />
+
+        <Form />
+      </Fragment>
+    );
+  }
+}