compat: move obsolete UI plugins to Editor (#1840)

* fix: modal height CSS bug
* Migrate split-pane-mode and ast plugins to Editor
* use js-yaml fork

Author: shockey

package.json

@@ -40,14 +40,14 @@
     "watch": "webpack --config  ./webpack-dist.config.js --watch --progress"
   },
   "dependencies": {
+    "@kyleshockey/js-yaml": "^1.0.1",
     "ajv": "^5.2.2",
     "boron": "^0.2.3",
     "brace": "^0.10.0",
     "classnames": "^2.1.3",
     "core-js": "^2.4.1",
     "deepmerge": "^1.3.2",
     "immutable": "^3.x.x",
-    "js-yaml": "^3.5.5",
     "json-beautify": "^1.0.1",
     "json-refs": "^3.0.4",
     "lodash": "^4.17.4",
@@ -63,6 +63,7 @@
     "react-file-download": "^0.3.2",
     "react-immutable-proptypes": "^2.1.0",
     "react-redux": "^4.x.x",
+    "react-split-pane": "^0.1.82",
     "react-transition-group": "^1.1.1",
     "redux": "^3.x.x",
     "reselect": "^2.5.4",

src/plugins/ast/index.js

@@ -1,9 +1,7 @@
 import * as AST from "./ast"
-import JumpToPath from "./jump-to-path"
 
 export default function() {
   return {
-    fn: { AST },
-    components: { JumpToPath }
+    fn: { AST }
   }
 }

src/plugins/ast/jump-to-path.jsx

@@ -1,4 +1,4 @@
-import YAML from "js-yaml"
+import YAML from "@kyleshockey/js-yaml"
 
 export default function(editor) {
   editor.on("paste", e => {

src/plugins/editor/editor-plugins/json-to-yaml.js

@@ -0,0 +1,85 @@
+import React from "react"
+import PropTypes from "prop-types"
+import SplitPane from "react-split-pane"
+
+const MODE_KEY = ["split-pane-mode"]
+const MODE_LEFT = "left"
+const MODE_RIGHT = "right"
+const MODE_BOTH = "both" // or anything other than left/right
+
+export default class SplitPaneMode extends React.Component {
+
+  static propTypes = {
+    threshold: PropTypes.number,
+
+    children: PropTypes.array,
+
+    layoutSelectors: PropTypes.object.isRequired,
+    layoutActions: PropTypes.object.isRequired,
+  };
+
+  static defaultProps = {
+    threshold: 100, // in pixels
+    children: [],
+  };
+
+  initializeComponent = (c) => {
+    this.splitPane = c
+  }
+
+  onDragFinished = () => {
+    let { threshold, layoutActions } = this.props
+    let { position, draggedSize } = this.splitPane.state
+    this.draggedSize = draggedSize
+
+    let nearLeftEdge = position <= threshold
+    let nearRightEdge = draggedSize <= threshold
+
+    layoutActions
+      .changeMode(MODE_KEY, (
+        nearLeftEdge
+        ? MODE_RIGHT : nearRightEdge
+        ? MODE_LEFT : MODE_BOTH
+      ))
+  }
+
+  sizeFromMode = (mode, defaultSize) => {
+    if(mode === MODE_LEFT) {
+      this.draggedSize = null
+      return "0px"
+    } else if (mode === MODE_RIGHT) {
+      this.draggedSize = null
+      return "100%"
+    }
+    // mode === "both"
+    return this.draggedSize || defaultSize
+  }
+
+  render() {
+    let { children, layoutSelectors } = this.props
+
+    const mode = layoutSelectors.whatMode(MODE_KEY)
+    const left = mode === MODE_RIGHT ? <noscript/> : children[0]
+    const right = mode === MODE_LEFT ? <noscript/> : children[1]
+    const size = this.sizeFromMode(mode, "50%")
+
+    return (
+      <SplitPane
+        disabledClass={""}
+        ref={this.initializeComponent}
+        split='vertical'
+        defaultSize={"50%"}
+        primary="second"
+        minSize={0}
+        size={size}
+        onDragFinished={this.onDragFinished}
+        allowResize={mode !== MODE_LEFT && mode !== MODE_RIGHT }
+        resizerStyle={{"flex": "0 0 auto", "position": "relative"}}
+      >
+        { left }
+        { right }
+      </SplitPane>
+    )
+  }
+
+}

src/plugins/split-pane-mode/components/split-pane-mode.jsx

@@ -0,0 +1,15 @@
+import SplitPaneMode from "./components/split-pane-mode"
+export default function SplitPaneModePlugin() {
+  return {
+    // statePlugins: {
+    //   layout: {
+    //     actions,
+    //     selectors,
+    //   }
+    // },
+
+    components: {
+      SplitPaneMode
+    }
+  }
+}

src/plugins/split-pane-mode/index.js

@@ -5,7 +5,7 @@ import "whatwg-fetch"
 import DropdownMenu from "./DropdownMenu"
 import Modal from "boron/DropModal"
 import reactFileDownload from "react-file-download"
-import YAML from "js-yaml"
+import YAML from "@kyleshockey/js-yaml"
 import beautifyJson from "json-beautify"
 
 import "react-dd-menu/dist/react-dd-menu.css"