hippo-fw 0.9.8 → 0.9.9

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

@@ -1,39 +1,19 @@
-import React from 'react';
+import React from 'react'; // eslint-disable-line no-unused-vars
 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 cn from 'classnames';
 
-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>
-        );
-    }
+import './renderer.scss';
 
+export default function TextEditorRenderer({ className, content }) {
+    return (
+        <div
+            className={cn('text-editor-content', className)}
+            dangerouslySetInnerHTML={{ __html: content }}
+        />
+    );
 }
+
+TextEditorRenderer.propTypes = {
+    content: PropTypes.string.isRequired,
+    className: PropTypes.string.isRequired,
+};

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

@@ -0,0 +1,15 @@
+@import '~ory-editor-core/lib/index.css';
+
+.grommet .text-editor-content {
+    flex: 1;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+
+    p:not(.grommetux-paragraph) {
+        max-width: inherit;
+        margin-left: 0;
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+}

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

@@ -3,15 +3,13 @@
 .grommet .text-editor {
 
     flex: 1;
-    display: flex;
-    flex-direction: column;
 
     .text-editor-content {
-        flex: 1;
         overflow: auto;
+        -webkit-overflow-scrolling: touch;
+        border: 1px solid #adadad;
     }
 
-
     .toolbar > * {
         display: flex;
         flex-wrap: wrap;
@@ -26,17 +24,6 @@
         margin-bottom: 0;
     }
 
-    .content-image-wrapper {
-        .image-drop-zone {
-            text-align: center;
-        }
-        .content-image {
-            max-width: 100%;
-            width: auto;
-            height: auto;
-        }
-    }
-
     button:not(.grommetux-button) {
         min-width: inherit;
         padding: 0;

data/client/hippo/components/text-editor/upload-adapter.js

@@ -0,0 +1,66 @@
+import FileRepository from '@ckeditor/ckeditor5-upload/src/filerepository';
+import ObservableMixin from '@ckeditor/ckeditor5-utils/src/observablemixin';
+import mix from '@ckeditor/ckeditor5-utils/src/mix';
+
+class Adapter {
+
+    constructor(loader, t) {
+        this.loader = loader;
+        this.t = t;
+    }
+
+    get assets() {
+        return this.t.config.get('assets');
+    }
+
+    get asset() {
+        return this.assets.find(
+            asset => asset.metadata && asset.metadata.nodeId === this.loader.id,
+        );
+    }
+
+    upload() {
+        if (!this.asset) {
+            this.assets.push({ metadata: { nodeId: this.loader.id } });
+            if (!this.asset) {
+                return Promise.reject(new Error('unable to create asset model'));
+            }
+        }
+        return new Promise((resolve, reject) => {
+            this.asset.setFile(this.loader.file).then(() => {
+                this.asset.save().then(() => {
+                    resolve({ default: this.asset.urlFor() });
+                });
+            }).catch(reject);
+        });
+    }
+
+}
+
+
+export default class HippoUploadAdapter {
+
+    static get requires() {
+        return [FileRepository];
+    }
+
+    static get pluginName() {
+        return 'HippoUploadAdapter';
+    }
+
+    constructor(editor) {
+        this.editor = editor;
+    }
+
+    init() {
+        this.editor.plugins.get(FileRepository).createAdapter = loader =>
+            new Adapter(loader, this.editor);
+    }
+
+    destroy() {
+        this.stopListening();
+    }
+
+}
+
+mix(Plugin, ObservableMixin);

data/client/hippo/components/time-zone-select.jsx

@@ -8,7 +8,7 @@ import moment from 'moment-timezone';
 
 
 @observer
-export default class TimeZoneSelect extends React.PureComponent {
+export default class TimeZoneSelect extends React.Component {
 
     static propTypes = {
         value: PropTypes.string,

data/client/hippo/components/tool-tip.jsx

@@ -1,21 +1,16 @@
-import React from 'react';
+import React from 'react'; // eslint-disable-line no-unused-vars
 import { Tooltip as Tippy } from 'react-tippy';
 
 import 'react-tippy/dist/tippy.css';
 
 // Use a wrapper component even though it doesn't really add any functionality
 // In the future we'll add a Manager wrapper so that multiple tooltips cannot be shown at once
-export default class ToolTip extends React.PureComponent {
-
-    render() {
-        const { children, ...tipProps } = this.props;
-        return (
-            <Tippy
-                {...tipProps}
-            >
-                {children}
-            </Tippy>
-        );
-    }
-
+export default function ToolTip({ children, ...tipProps }) {
+    return (
+        <Tippy
+            {...tipProps}
+        >
+            {children}
+        </Tippy>
+    );
 }

data/client/hippo/components/toolbar.jsx

@@ -0,0 +1,16 @@
+import React from 'react'; // eslint-disable-line no-unused-vars
+import Header from 'grommet/components/Header';
+
+export SaveButton from './save-button';
+
+export function Toolbar({ children }) {
+    return (
+        <Header
+            className="hippo-toolbar"
+            fixed colorIndex="light-2" align="center"
+            pad={{ horizontal: 'small', vertical: 'small', between: 'small' }}
+        >
+            {children}
+        </Header>
+    );
+}

data/client/hippo/components/warning-notification.jsx

@@ -5,7 +5,7 @@ import Notification from 'grommet/components/Notification';
 export default function WarningNotification(props) {
     if (!props.message) { return null; }
     return (
-        <Notification message={props.message} size="small" status="warning" />
+        <Notification size="small" status="warning"  {...props} />
     );
 }
 

data/client/hippo/extensions/base.js

@@ -1,4 +1,5 @@
 import { observable, computed } from 'mobx';
+import { merge } from 'lodash';
 import { titleize, humanize } from '../lib/util';
 import Extensions from './index';
 import RootView from '../workspace/root-view';
@@ -7,7 +8,7 @@ export { identifiedBy, identifier } from '../models/base';
 
 export class BaseExtension {
 
-    @observable data;
+    @observable data = {};
 
     static register() {
         Extensions.register(this);
@@ -18,7 +19,7 @@ export class BaseExtension {
     }
 
     setBootstrapData(data) {
-        this.data = data;
+        merge(this.data, data);
     }
 
     @computed get domain() {

data/client/hippo/extensions/index.js

@@ -22,7 +22,7 @@ const Extensions = {
     },
 
     fireOnAvailable(viewport) {
-        this.invoke('onAvailble', viewport);
+        this.invoke('onAvailable', viewport);
     },
 
     getViews() {

data/client/hippo/lib/action_cable.js

@@ -0,0 +1,8 @@
+import './action_cable/connection';
+import './action_cable/connection_monitor';
+import './action_cable/consumer';
+import './action_cable/subscription';
+import './action_cable/subscriptions';
+import ActionCable from './action_cable/cable';
+
+export default ActionCable;

data/client/hippo/lib/action_cable/cable.js

@@ -0,0 +1,47 @@
+/* eslint-disable */
+
+const ActionCable = {
+
+  INTERNAL: {},
+  WebSocket: window.WebSocket,
+  logger: window.console,
+  createConsumer: function(url) {
+    var ref;
+    if (url == null) {
+      url = (ref = this.getConfig("url")) != null ? ref : this.INTERNAL.default_mount_path;
+    }
+    return new ActionCable.Consumer(this.createWebSocketURL(url));
+  },
+  getConfig: function(name) {
+    var element;
+    element = document.head.querySelector(`meta[name='action-cable-${name}']`);
+    return element != null ? element.getAttribute("content") : void 0;
+  },
+  createWebSocketURL: function(url) {
+    var a;
+    if (url && !/^wss?:/i.test(url)) {
+      a = document.createElement("a");
+      a.href = url;
+      // Fix populating Location properties in IE. Otherwise, protocol will be blank.
+      a.href = a.href;
+      a.protocol = a.protocol.replace("http", "ws");
+      return a.href;
+    } else {
+      return url;
+    }
+  },
+  startDebugging: function() {
+    return this.debugging = true;
+  },
+  stopDebugging: function() {
+    return this.debugging = null;
+  },
+  log: function(...messages) {
+    if (this.debugging) {
+      messages.push(Date.now());
+      return this.logger.log("[ActionCable]", ...messages);
+    }
+  }
+};
+
+export default ActionCable;

data/client/hippo/lib/action_cable/connection.js

@@ -0,0 +1,192 @@
+/* eslint-disable */
+
+import ActionCable from './cable';
+
+  // Encapsulate the cable connection held by the consumer. This is an internal class not intended for direct user manipulation.
+var i, message_types, protocols, supportedProtocols, unsupportedProtocol,
+  slice = [].slice,
+  indexOf = [].indexOf;
+
+protocols = ["actioncable-v1-json", "actioncable-unsupported"];
+
+//({message_types, protocols} = ActionCable.INTERNAL);
+message_types = {
+    welcome: "welcome",
+    ping: "ping",
+    confirmation: "confirm_subscription",
+    rejection: "reject_subscription",
+};
+
+    supportedProtocols = 2 <= protocols.length ? slice.call(protocols, 0, i = protocols.length - 1) : (i = 0, []), unsupportedProtocol = protocols[i++];
+
+ActionCable.Connection = (function() {
+  class Connection {
+    constructor(consumer) {
+      this.open = this.open.bind(this);
+      this.consumer = consumer;
+      ({subscriptions: this.subscriptions} = this.consumer);
+      this.monitor = new ActionCable.ConnectionMonitor(this);
+      this.disconnected = true;
+    }
+
+    send(data) {
+      if (this.isOpen()) {
+        this.webSocket.send(JSON.stringify(data));
+        return true;
+      } else {
+        return false;
+      }
+    }
+
+    open() {
+      if (this.isActive()) {
+        ActionCable.log(`Attempted to open WebSocket, but existing socket is ${this.getState()}`);
+        return false;
+      } else {
+        ActionCable.log(`Opening WebSocket, current state is ${this.getState()}, subprotocols: ${protocols}`);
+        if (this.webSocket != null) {
+          this.uninstallEventHandlers();
+        }
+        this.webSocket = new ActionCable.WebSocket(this.consumer.url, protocols);
+        this.installEventHandlers();
+        this.monitor.start();
+        return true;
+      }
+    }
+
+    close({allowReconnect} = {
+        allowReconnect: true
+      }) {
+      var ref;
+      if (!allowReconnect) {
+        this.monitor.stop();
+      }
+      if (this.isActive()) {
+        return (ref = this.webSocket) != null ? ref.close() : void 0;
+      }
+    }
+
+    reopen() {
+      var error;
+      ActionCable.log(`Reopening WebSocket, current state is ${this.getState()}`);
+      if (this.isActive()) {
+        try {
+          return this.close();
+        } catch (error1) {
+          error = error1;
+          return ActionCable.log("Failed to reopen WebSocket", error);
+        } finally {
+          ActionCable.log(`Reopening WebSocket in ${this.constructor.reopenDelay}ms`);
+          setTimeout(this.open, this.constructor.reopenDelay);
+        }
+      } else {
+        return this.open();
+      }
+    }
+
+    getProtocol() {
+      var ref;
+      return (ref = this.webSocket) != null ? ref.protocol : void 0;
+    }
+
+    isOpen() {
+      return this.isState("open");
+    }
+
+    isActive() {
+      return this.isState("open", "connecting");
+    }
+
+    // Private
+    isProtocolSupported() {
+      var ref;
+      return ref = this.getProtocol(), indexOf.call(supportedProtocols, ref) >= 0;
+    }
+
+    isState(...states) {
+      var ref;
+      return ref = this.getState(), indexOf.call(states, ref) >= 0;
+    }
+
+    getState() {
+      var ref, state, value;
+      for (state in WebSocket) {
+        value = WebSocket[state];
+        if (value === ((ref = this.webSocket) != null ? ref.readyState : void 0)) {
+          return state.toLowerCase();
+        }
+      }
+      return null;
+    }
+
+    installEventHandlers() {
+      var eventName, handler;
+      for (eventName in this.events) {
+        handler = this.events[eventName].bind(this);
+        this.webSocket[`on${eventName}`] = handler;
+      }
+    }
+
+    uninstallEventHandlers() {
+      var eventName;
+      for (eventName in this.events) {
+        this.webSocket[`on${eventName}`] = function() {};
+      }
+    }
+
+  };
+
+  Connection.reopenDelay = 500;
+
+  Connection.prototype.events = {
+    message: function(event) {
+      var identifier, message, type;
+      if (!this.isProtocolSupported()) {
+        return;
+      }
+
+
+        ({identifier, message, type} = JSON.parse(event.data));
+      switch (type) {
+        case message_types.welcome:
+          this.monitor.recordConnect();
+          return this.subscriptions.reload();
+        case message_types.ping:
+          return this.monitor.recordPing();
+        case message_types.confirmation:
+          return this.subscriptions.notify(identifier, "connected");
+        case message_types.rejection:
+          return this.subscriptions.reject(identifier);
+        default:
+          return this.subscriptions.notify(identifier, "received", message);
+      }
+    },
+    open: function() {
+      ActionCable.log(`WebSocket onopen event, using '${this.getProtocol()}' subprotocol`);
+      this.disconnected = false;
+      if (!this.isProtocolSupported()) {
+        ActionCable.log("Protocol is unsupported. Stopping monitor and disconnecting.");
+        return this.close({
+          allowReconnect: false
+        });
+      }
+    },
+    close: function(event) {
+      ActionCable.log("WebSocket onclose event");
+      if (this.disconnected) {
+        return;
+      }
+      this.disconnected = true;
+      this.monitor.recordDisconnect();
+      return this.subscriptions.notifyAll("disconnected", {
+        willAttemptReconnect: this.monitor.isRunning()
+      });
+    },
+    error: function() {
+      return ActionCable.log("WebSocket onerror event");
+    }
+  };
+
+  return Connection;
+
+})();