React Router Demo

[hew]

This approach of hardcoding the paths doesn't seem to work with React Router 💔

Anyone got an example project that solves this issue?

[ipeychev]

What exactly is the issue?

[andrei-sheina]

@ipeychev
I am using react-router v4 and my issue is the following:
I've made all like in this example. I try to render AlloyEditorComponent under /admin/post/:id route
And i've got the following error:

I've added the following lines to my component:

window.ALLOYEDITOR_BASEPATH = 'alloyeditor/dist/alloy-editor/';
window.CKEDITOR_BASEPATH = 'alloyeditor/lib/ckeditor/';

And i copied alloyeditor folder to my /public folder from node_mudules
As you can see in screenshots, alloyeditor is looking for the files in wrong places.

My App.js with routes:

import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import PostsPage from '../containers/PostsPage';
import PostFormPage from '../containers/PostFormPage';

class App extends Component {
  render() {
    return (
      <div className="admin-panel">
        <Route exact path="/admin/posts" component={PostsPage} />
        <Route path="/admin/posts/new" component={PostFormPage} />
        <Route path="/admin/post/:id" component={PostFormPage} />
      </div>
    );
  }
}

export default App;

My PostForm component:

import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import AlloyEditorComponent from './AlloyEditorComponent';

export default function PostForm({ post, getData, onChange, onSubmit }) {
  return (
    <form className="post-form" onSubmit={onSubmit}>
      <header>Title of the post:</header>
      <div className="post-title">
        <label htmlFor="title">Title</label>
        <input
          name="title"
          value={post.title}
          onChange={onChange}
          id="title"
        />
      </div>

      <header>Slug of the post:</header>
      <div className="post-slug">
        <label htmlFor="slug">Slug</label>
        <input
          name="slug"
          value={post.slug}
          onChange={onChange}
          id="slug"
        />
      </div>

      <header>Description of the post:</header>
      <div className="post-description">
        <AlloyEditorComponent
          container="editable-container"
          value={post.teaser}
          name="teaser"
          getData={getData}
        />
      </div>

      <header>Body of the post:</header>
      <AlloyEditorComponent
        container="editable-container"
        value={post.body}
        name="body"
        getData={getData}
      />

      <div className="field">
        <button className="ui primary button">Save Post</button>
        <Link to="/admin/posts" className="ui primary button">Go Back</Link>
      </div>
    </form>
  );
}

PostForm.propTypes = {
  post: PropTypes.object.isRequired,
  onSubmit: PropTypes.func.isRequired,
  onChange: PropTypes.func.isRequired,
  getData: PropTypes.func.isRequired,
};

My AlloyEditorComponent

import React from 'react';
import PropTypes from 'prop-types';
import AlloyEditor from 'alloyeditor';
import './settings';

class AlloyEditorComponent extends React.Component {
  componentDidMount() {
    const { container, name } = this.props;
    this._editor = AlloyEditor.editable(`${container}-${name}`, {
      toolbars: {
        add: {
          buttons: ['table', 'hline', 'image', 'camera', 'CodeSnippet'],
          tabIndex: 2,
        },
        styles: {
          tabIndex: 1,
          selections: AlloyEditor.Selections,
        },
      },
      disallowedContent: 'b',
    });
  }

  componentWillUnmount() {
    this._editor.destroy();
  }

  render() {
    const { container, name } = this.props;

    return (
      <div id={`${container}-${name}`}>
        <h1>AlloyEditor will make this content editable</h1>
        <p>
          To install React, follow the instructions on <a href="https://github.com/facebook/react/">GitHub</a>.
        </p>
        <p>
          Mauris vitae suscipit magna.
        </p>
      </div>
    );
  }
}

export default AlloyEditorComponent;

AlloyEditorComponent.propTypes = {
  container: PropTypes.string,
  name: PropTypes.string,
  value: PropTypes.string,
  getData: PropTypes.func,
};

[hew]

@andrei-sheina

Using webpack?

[andrei-sheina]

@hew yes

[hew]

@andrei-sheina

The general idea is that you want to copy all the files you're using from Alloy into the same directory where your webpack bundle is.

My bundle directory (packs) looks something like:

app.bundle.js
libs.bundle.js
alloy-editor/
...

And my vars look like:

 window.ALLOYEDITOR_BASEPATH = 'http://dev:8080/packs/alloy-editor/';
 window.CKEDITOR_BASEPATH = 'http://dev:8080/packs/alloy-editor/';

Try something like this

 new CopyWebpackPlugin([
      { 
        from: './node_modules/alloyeditor/dist/alloy-editor/alloy-editor-no-react-min.js', 
        to: 'alloy-editor/alloy-editor-no-react.min.js' 
      },
      { 
        from: './node_modules/alloyeditor/dist/alloy-editor/ckeditor.js', 
        to: 'alloy-editor/ckeditor.js' 
      },
      { 
        from: './node_modules/alloyeditor/dist/alloy-editor/build-config.js', 
        to: 'alloy-editor/build-config.js' 
      },
      { 
        from: './node_modules/alloyeditor/dist/alloy-editor/lang/en.js', 
        to: 'alloy-editor/lang/en.js' 
      },
      { 
        from: './node_modules/alloyeditor/dist/alloy-editor/lang/alloy-editor/en.js', 
        to: 'alloy-editor/lang/alloy-editor/en.js' 
      },
      { 
        from: './node_modules/alloyeditor/dist/alloy-editor/skins/moono/editor.css', 
        to: 'alloy-editor/skins/moono/editor.css' 
      },
      { 
        from: './node_modules/alloyeditor/dist/alloy-editor/styles.js', 
        to: 'alloy-editor/styles.js' 
      },
      { 
        from: './node_modules/alloyeditor/dist/alloy-editor/config.js', 
        to: 'alloy-editor/config.js'
      },

[andrei-sheina]

@hew i've already copied alloy-editor from node_mudoules to the root of my app. Btw when i was using react-router v2 there was no issues like i described above. Do you use react-router v4 in your project with alloyeditor?

[rashidul0405]

@andrei-sheina Did you get the solution to the above issue? I'm using CRA. I'm having a hard time to figure this out.
Thanks very much.

[andrei-sheina]

@rashidul0405 Nope, no luck

[rashidul0405]

Thanks for responding.

[hew]

@andrei-sheina @rashidul0405 You cannot have Alloy just at the base directory. You need to have it in the directory where you are outputting your bundles. It makes a difference.