hippo-fw 0.9.4 → 0.9.5

data/client/hippo/components/text-editor/display-modes/ToggleInsert.jsx

@@ -0,0 +1,21 @@
+import React from 'react'; // eslint-disable-line no-unused-vars
+import AddIcon from 'grommet/components/icons/base/TableAdd';
+import { connect } from 'react-redux';
+import { insertMode } from 'ory-editor-core/lib/actions/display';
+import { isInsertMode } from 'ory-editor-core/lib/selector/display';
+import { createStructuredSelector } from 'reselect';
+import Button from './Button';
+
+const Inner = ({ isInsertMode: isinm, insertMode: inm }) => (
+    <Button
+        icon={<AddIcon />}
+        label="Add"
+        active={isinm}
+        onClick={inm}
+    />
+);
+
+const mapStateToProps = createStructuredSelector({ isInsertMode });
+const mapDispatchToProps = { insertMode };
+
+export default connect(mapStateToProps, mapDispatchToProps)(Inner);

data/client/hippo/components/text-editor/display-modes/ToggleLayout.jsx

@@ -0,0 +1,21 @@
+import React from 'react'; // eslint-disable-line no-unused-vars
+import GridIcon from 'grommet/components/icons/base/Grid';
+import { connect } from 'react-redux';
+import { layoutMode } from 'ory-editor-core/lib/actions/display';
+import { isLayoutMode } from 'ory-editor-core/lib/selector/display';
+import { createStructuredSelector } from 'reselect';
+import Button from './Button';
+
+const Inner = ({ isLayoutMode: islm, layoutMode: lm }) => (
+    <Button
+        icon={<GridIcon />}
+        label="Layout"
+        active={islm}
+        onClick={lm}
+    />
+);
+
+const mapStateToProps = createStructuredSelector({ isLayoutMode });
+const mapDispatchToProps = { layoutMode };
+
+export default connect(mapStateToProps, mapDispatchToProps)(Inner);

data/client/hippo/components/text-editor/display-modes/TogglePreview.jsx

@@ -0,0 +1,21 @@
+import React from 'react'; // eslint-disable-line no-unused-vars
+import Devices from 'material-ui/svg-icons/device/devices';
+import { connect } from 'react-redux';
+import { previewMode } from 'ory-editor-core/lib/actions/display';
+import { isPreviewMode } from 'ory-editor-core/lib/selector/display';
+import { createStructuredSelector } from 'reselect';
+import Button from './Button';
+
+const Inner = ({ isPreviewMode: ispvm, previewMode: pvm }) => (
+    <Button
+        icon={<Devices />}
+        label="Preview"
+        active={ispvm}
+        onClick={pvm}
+    />
+);
+
+const mapStateToProps = createStructuredSelector({ isPreviewMode });
+const mapDispatchToProps = { previewMode };
+
+export default connect(mapStateToProps, mapDispatchToProps)(Inner);

data/client/hippo/components/text-editor/display-modes/ToggleResize.jsx

@@ -0,0 +1,21 @@
+import React from 'react'; // eslint-disable-line no-unused-vars
+import ResizeIcon from 'grommet/components/icons/base/Pan';
+import { connect } from 'react-redux';
+import { resizeMode } from 'ory-editor-core/lib/actions/display';
+import { isResizeMode } from 'ory-editor-core/lib/selector/display';
+import { createStructuredSelector } from 'reselect';
+import Button from './Button';
+
+const Inner = ({ isResizeMode: isrsm, resizeMode: rsm }) => (
+    <Button
+        icon={<ResizeIcon />}
+        label="Resize"
+        active={isrsm}
+        onClick={rsm}
+    />
+);
+
+const mapStateToProps = createStructuredSelector({ isResizeMode });
+const mapDispatchToProps = { resizeMode };
+
+export default connect(mapStateToProps, mapDispatchToProps)(Inner);

data/client/hippo/components/text-editor/display-modes/index.js

@@ -0,0 +1,30 @@
+import React from 'react'; // eslint-disable-line no-unused-vars
+import Header from 'grommet/components/Header';
+import Provider from 'ory-editor-ui/lib/Provider';
+import ToggleEdit from './ToggleEdit';
+import ToggleInsert from './ToggleInsert';
+import ToggleLayout from './ToggleLayout';
+import TogglePreview from './TogglePreview';
+import ToggleResize from './ToggleResize';
+import SaveState from './SaveState';
+
+const Inner = (props: any) => (
+    <Provider {...props}>
+        <Header
+            wrap
+            margin="small"
+            justify="end"
+            pad={{ horizontal: 'small' }}
+        >
+            <ToggleInsert />
+            <ToggleEdit />
+            <ToggleLayout />
+            <ToggleResize />
+            <TogglePreview />
+            {props.children}
+            <SaveState onSave={props.onSave} />
+        </Header>
+    </Provider>
+);
+
+export default Inner;

data/client/hippo/components/text-editor/image-plugin/Component/Display/index.js

@@ -0,0 +1,80 @@
+// @flow
+import React from 'react';
+import { observer, inject } from 'mobx-react';
+import { action, computed } from 'mobx';
+import { find } from 'lodash';
+import Dropzone from 'react-dropzone';
+import Button from 'grommet/components/Button';
+import ImageIcon from 'grommet/components/icons/base/Image';
+import cn from 'classnames';
+
+const iconStyle = {
+    width: '100%',
+    height: 'auto',
+    padding: '0',
+    color: '#aaa',
+    textAlign: 'center',
+    minWidth: 64,
+    minHeight: 64,
+    maxHeight: 256,
+};
+
+
+@inject('assets')
+@observer
+export default class Display extends React.PureComponent {
+    @computed get asset() {
+        return find(this.props.assets, asset =>
+            asset.metadata && asset.metadata.nodeId === this.props.id);
+    }
+
+    @action.bound
+    onFileDrop(files) {
+        let asset = this.asset;
+        if (!asset) {
+            this.props.assets.push({ metadata: { nodeId: this.props.id } });
+            asset = this.props.assets.get(this.props.assets.length - 1);
+        }
+
+        asset.setFile(files[0]).then(() => {
+            this.props.onChange({ src: asset.previewUrl });
+            asset.save().then(() => {
+                this.props.onChange({
+                    assetId: asset.id, src: asset.urlFor(),
+                });
+            });
+        });
+    }
+
+    renderImage() {
+        const { state: { src } } = this.props;
+        return src ? <img className="content-image" src={src} /> : <ImageIcon style={iconStyle} />;
+    }
+
+    @action.bound
+    onAddClick() {
+        this.dropZone.open();
+    }
+
+    render() {
+        const { isEditMode, state, focused } = this.props;
+        if (isEditMode) {
+            return (
+                <div className={cn('content-image-wrapper', { focused })}>
+                    <Button onClick={this.onAddClick}>{state.src ? 'Change' : 'Add'}</Button>
+                    <Dropzone
+                        ref={dz => (this.dropZone = dz)}
+                        style={{}}
+                        disableClick
+                        multiple={false}
+                        onDrop={this.onFileDrop}
+                        className="image-drop-zone"
+                    >
+                        {this.renderImage()}
+                    </Dropzone>
+                </div>
+            );
+        }
+        return this.renderImage();
+    }
+}

data/client/hippo/components/text-editor/image-plugin/Component/Form/index.js

@@ -0,0 +1,40 @@
+// @flow
+import React from 'react';
+import { inject, observer } from 'mobx-react';
+import Dropzone from 'react-dropzone';
+import { action } from 'mobx';
+import { BottomToolbar } from 'ory-editor-ui';
+
+import Display from '../Display';
+
+@inject('model', 'images_attribute')
+@observer
+export default class Form extends React.PureComponent {
+    get assets() {
+        return this.props.model[this.props.images_attribute];
+    }
+
+    @action.bound
+    onFileDrop(files) {
+        this.assets.push({});
+        const asset = this.assets.at(this.assets.length - 1);
+        asset.setFile(files[0]);
+    }
+
+    render() {
+        const { props } = this;
+
+        return (
+            <div>
+                <Display {...props} />
+                <BottomToolbar open={props.focused}>
+                    <Dropzone
+                        onDrop={this.onFileDrop}
+                    >
+                        Drop a file here, or click to select one to upload.
+                    </Dropzone>
+                </BottomToolbar>
+            </div>
+        );
+    }
+}

data/client/hippo/components/text-editor/image-plugin/Component/index.js

@@ -0,0 +1,16 @@
+// @flow
+import React from 'react'; // eslint-disable-line no-unused-vars
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+import type { ContentPluginProps } from 'ory-editor-core/lib/service/plugin/classes';
+import Display from './Display';
+
+export type PropTypes = ContentPluginProps<{ src: string, caption: string }>
+
+const Image = (props: PropTypes) => (
+    <MuiThemeProvider muiTheme={getMuiTheme()}>
+        <Display {...props} />
+    </MuiThemeProvider>
+);
+
+export default Image;

data/client/hippo/components/text-editor/image-plugin/index.js

@@ -0,0 +1,32 @@
+// @flow
+import React from 'react'; // eslint-disable-line no-unused-vars
+import Panorama from 'material-ui/svg-icons/image/panorama';
+import './index.scss';
+import Asset from '../../../models/asset';
+import Component from './Component';
+
+export default {
+    Component,
+    name: 'ory/editor/core/content/image',
+    version: '0.0.1',
+    IconComponent: <Panorama />,
+    text: 'Image',
+    isInlineable: true,
+    description: 'Loads an image from an url.',
+
+    handleRemoveHotKey(ev, node) {
+        if (node.content.state.assetId) {
+            const asset = new Asset({ id: node.content.state.assetId });
+            return asset.destroy();
+        }
+        return Promise.resolve(node);
+    },
+
+    // We need this because otherwise we lose hotkey focus on elements like spoilers.
+    // This could probably be solved in an easier way by listening to window.document?
+
+    handleFocus: (props: any, source: any, ref: HTMLElement) => {
+        if (!ref) { return; }
+        setTimeout(() => ref.focus());
+    },
+};

data/client/hippo/components/text-editor/image-plugin/index.scss

@@ -0,0 +1,25 @@
+@import 'hippo/styles/global';
+
+.ory-plugins-content-image {
+  width: 100%;
+}
+
+.ory-plugins-content-image-placeholder {
+  position: relative;
+  width: 100%;
+  text-align: center;
+}
+
+.content-image-wrapper {
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    cursor: pointer;
+    &.focused {
+        border-width: 2px;
+        border-color: $focus-border-color;
+    }
+    button {
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+    }
+}

data/client/hippo/components/text-editor/plugins.js

@@ -0,0 +1,22 @@
+import spacer from 'ory-editor-plugins-spacer';
+import slate from 'ory-editor-plugins-slate';
+import video from 'ory-editor-plugins-video';
+import parallax from 'ory-editor-plugins-parallax-background';
+import 'ory-editor-plugins-parallax-background/lib/index.css';
+import divider from 'ory-editor-plugins-divider';
+
+import 'ory-editor-plugins-image/lib/index.css';
+import 'ory-editor-plugins-spacer/lib/index.css';
+import 'ory-editor-plugins-video/lib/index.css';
+import 'ory-editor-plugins-slate/lib/index.css';
+
+import image from './image-plugin';
+
+const defaultPlugin = slate();
+
+const plugins = {
+    content: [slate(), spacer, divider, image, video], // Define plugins for content cells
+    layout: [parallax({ defaultPlugin })],
+};
+
+export { defaultPlugin, plugins };

data/client/hippo/components/text-editor/renderer.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { plugins } from 'hippo/components/text-editor/plugins';
+import { observable, toJS } from 'mobx';
+import { observer, Provider, PropTypes as MobxPropTypes } from 'mobx-react';
+import { HTMLRenderer } from 'ory-editor-renderer';
+
+import 'ory-editor-core/lib/index.css';
+
+@observer
+export default class TextEditorRenderer extends React.PureComponent {
+    static defaultProps = {
+        assets: observable.array(),
+    }
+
+    static propTypes = {
+        content: PropTypes.object.isRequired,
+        assets:  MobxPropTypes.observableArray,
+    }
+
+    static defaultProps = {
+        className: PropTypes.string,
+    }
+
+    render() {
+        return (
+            <Provider
+                assets={this.props.assets}
+            >
+                <HTMLRenderer
+                    className={this.props.className} state={toJS(this.props.content)}
+                    plugins={plugins}
+                />
+            </Provider>
+        );
+    }
+}

data/client/hippo/components/text-editor/text-editor.scss

@@ -0,0 +1,49 @@
+@import 'hippo/styles/global';
+
+.grommet .text-editor {
+
+    border: 1px solid #ddd;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    .text-editor-content {
+        flex: 1;
+    }
+
+
+    .toolbar > * {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+    }
+
+    p:not(.grommetux-paragraph) {
+        max-width: inherit;
+        margin-left: 0;
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+    .content-image {
+        width: 100%;
+        height: auto;
+    }
+
+
+    button:not(.grommetux-button) {
+        min-width: inherit;
+        padding: 0;
+        border: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    header {
+        .active {
+            border-bottom: 2px solid $focus-border-color;
+        }
+    }
+}

data/client/hippo/extensions/base.js

@@ -1,12 +1,11 @@
 import { observable, computed } from 'mobx';
 import { titleize, humanize } from '../lib/util';
 import Extensions from './index';
+import RootView from '../workspace/root-view';
 
 export { identifiedBy, identifier } from '../models/base';
 
-
 export class BaseExtension {
-
     @observable data;
 
     static register() {
@@ -24,4 +23,8 @@ export class BaseExtension {
     @computed get domain() {
         return window.location.hostname.split('.').slice(-2).join('.');
     }
+
+    rootView() {
+        return RootView;
+    }
 }