Way to embed in other projects

[jdarling]

Kajero is probably the best content editor based on Markdown that I've seen to date. It would be really nice to be able to embed it as an editor/viewer in other projects. As an example we have an internal (and honestly hacked together) knowledge base system built on Markdown today. If I could replace my crappy editor with Kajero everyone's lives would be easier ;)

Nice work, hope your Master's Project is as well accepted internally as it is externally.

[JoelOtter]

Thanks!

Could you maybe explain what you mean by embedding it? Right now it should, in theory, be possible to put the script and <div> for it to mount on anywhere in an HTML file. Granted, you'd probably have to write a fair bit of custom CSS to get it to match the rest of your site, but it should work.

[jdarling]

So, it looks like its React and Redux. If I have a React and Redux project ideally I would just:

cd /some/project/folder
npm install kajero --save

Then in one of my pages:

const React = require('react');
const Kajero = require('kajero');
const Redux = require('react-redux');

class MyPage extends React.Component{
  render(){
    const source = 'Editable content goes here';
    return (
      <div>
        Some page stuff here that is outside Kajero
        <Kajero source={source} onUpdate={this.onUpdate}/>
      </div>
    );
  }
}

module.exports = {
  Page: Redux.connect(mapStateToProps, mapDispatchToProps)(MyPage)
};

Excuse my abuse of ES6 and CommonJS, but I don't like the ES6 way of doing imports :D I also left out some of the boiler plate stuff just to keep the example concise.

[JoelOtter]

Okeydoke, I guess Notebook would be the entrypoint.

[jdarling]

That looks like it would work quite well actually.

[jdarling]

Though I think for a reuseable component you would have to surface the raw Notebook and not the connected Notebook.

[JoelOtter]

How would that work with Kajero's reducers, then? Would a way need to be provided to compose those with a user's reducer, or is there a way to fully encapsulate everything? I've only ever used Redux for single-page applications, never reusable components.