move canvas-rce to canvas-lms/packages/canvas-rce

closes CORE-994 refs RECNVS-398 refs CORE-1224 closes CORE-1237 test plan: - yarn install - smoke test rce - tests pass Change-Id: Ieaff024fa89879fac3e7edf99381f46de921cce2 Reviewed-on: https://gerrit.instructure.com/145671 Tested-by: Jenkins Reviewed-by: Rob Orton <[email protected]> QA-Review: Tucker McKnight <[email protected]> Product-Review: Brent Burgoyne <[email protected]>
NEWLMS · May 1, 2018 · f91658d · f91658d
1 parent 0700aaa
commit f91658d
Show file tree

Hide file tree

Showing 280 changed files with 54,905 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
     "backbone": "1.1.1",
     "brandable_css": "0.1.0",
     "canvas-planner": "file:./packages/canvas-planner/copy-of-what-gets-published-to-npm-registry",
-    "canvas-rce": "3.1.0-hotfix.0",
+    "canvas-rce": "file:./packages/canvas-rce/canvas",
     "canvas_offline_course_viewer": "https://github.com/instructure/canvas_offline_course_viewer.git#1.2.0",
     "classnames": "^2.2.5",
     "color-slicer": "0.8.0",
@@ -175,7 +175,7 @@
     "test:karma:watch": "karma start",
     "test:karma:watch:headless": "karma start --browsers ChromeHeadlessNoSandbox",
     "test:packages": "script/local-yarn test",
-    "preinstall": "script/local-yarn install && script/local-yarn build",
+    "preinstall": "script/uncache-packages && script/local-yarn install && script/local-yarn build:canvas",
     "build": "yarn run build:css && yarn run build:js",
     "build:watch": "concurrently \"yarn build:css:watch\" \"yarn build:js:watch\"",
     "build:css": "brandable_css",
@@ -195,4 +195,4 @@
   "resolutions": {
     "jquery": "https://github.com/ryankshaw/jquery.git#a755a3e9c99d5a70d8ea570836f94ae1ba56046d"
   }
-}
+}
diff --git a/packages/canvas-planner/package.json b/packages/canvas-planner/package.json
@@ -14,6 +14,7 @@
     "lint": "eslint src/",
     "lint:fix": "eslint src/ --fix",
     "build": "./scripts/build",
+    "build:canvas": "./scripts/build",
     "build:dev": "NODE_ENV=development BABEL_ENV=production babel src --out-dir lib --ignore spec.js,test.js,demo.js --quiet",
     "build:lib": "BABEL_ENV=production babel src --out-dir lib --ignore spec.js,test.js,demo.js --quiet",
     "build:es": "BABEL_ENV=production ES_MODULES=1 babel src --out-dir es --ignore spec.js,test.js,demo.js --quiet",
@@ -102,4 +103,4 @@
   "lint-staged": {
     "*.js": "eslint"
   }
-}
+}
diff --git a/packages/canvas-rce/.dockerignore b/packages/canvas-rce/.dockerignore
@@ -0,0 +1,7 @@
+Dockerfile
+docker-compose.yml
+.gitignore
+README.md
+lib
+.git/*
+node_modules/*
diff --git a/packages/canvas-rce/.gitignore b/packages/canvas-rce/.gitignore
@@ -0,0 +1,8 @@
+node_modules
+lib
+.nyc_output
+coverage
+npm-debug*
+doc/*.js
+github-pages/*.js
+canvas
diff --git a/packages/canvas-rce/.npmignore b/packages/canvas-rce/.npmignore
@@ -0,0 +1,8 @@
+demo
+integration_test
+public
+src
+test
+test_support
+.codeclimate.yml
+nightwatch.json
diff --git a/packages/canvas-rce/.prettierignore b/packages/canvas-rce/.prettierignore
@@ -0,0 +1,5 @@
+node_modules
+lib
+public
+locales
+coverage
diff --git a/packages/canvas-rce/Dockerfile b/packages/canvas-rce/Dockerfile
@@ -0,0 +1,21 @@
+FROM instructure/node:8
+
+ARG NPM_PRIVATE_SCOPE
+ARG NPM_PRIVATE_REGISTRY
+ARG NPM_PRIVATE_USERNAME
+ARG NPM_PRIVATE_PASSWORD
+ARG NPM_PRIVATE_EMAIL
+
+USER root
+
+# do this first so npm install can be cached if package.json has not changed
+COPY package.json /usr/src/app
+RUN npm install \
+    && npm-private install @inst/sync-format-message-translations; exit 0
+
+COPY . /usr/src/app
+RUN chown -R docker:docker /usr/src/app
+
+USER docker
+
+CMD ["tail", "-f", "/dev/null"]
diff --git a/packages/canvas-rce/LICENSE b/packages/canvas-rce/LICENSE
diff --git a/packages/canvas-rce/README.md b/packages/canvas-rce/README.md
@@ -0,0 +1,26 @@
+# Canvas Rich Content Editor
+
+The Canvas LMS Rich Content Editor extracted in it's own npm package for use
+across multiple services. This npm module is used in pair with a running
+`canvas-rce-api` microservice.
+
+You need a running instance of the `canvas-rce-api` in order to utilize
+the `canvas-rce` npm module, but you do not need that instance in order to
+do development on `canvas-rce`. (see [docs/development.md](docs/development.md))
+
+The first customer of the `canvas-rce` was the `canvas-lms` LMS so documentation
+and references throughout documentation might reflect and assume the use of
+`canvas-lms`.
+
+# Install and setup
+
+As a published npm module, you can add canvsas-rce to your node project by doing
+the following:
+
+```bash
+npm install canvas-rce --save
+```
+
+Please reference the [canvas-lms use of canvas-rce](https://github.com/instructure/canvas-lms/tree/stable/app/jsx/shared/rce)
+to get an idea on how to incorporate it into your project. Pay
+special attention to the `RichContentEditor.js` and `serviceRCELoader.js`.
diff --git a/packages/canvas-rce/bin/jira_tickets.sh b/packages/canvas-rce/bin/jira_tickets.sh
@@ -0,0 +1,14 @@
+#!/bin/sh
+
+if [ "${1}" == "" ]; then
+  echo "release number not provided, pulling from the latest"
+  release_ver=v`npm view | grep "dist-tags" | sed "s/.*latest: '\([0-9]\{1,2\}\.[0-9]\{1,2\}\.[0-9]\{1,2\}\)'.*/\1/"`
+else
+  release_ver=${1}
+fi
+
+echo "using release version: ${release_ver}"
+
+for f in `git cherry -v "${release_ver}" | sed "s/+ \([0-9a-f]\{40\}\).*/\1/"` ; do
+  git show -s --format=%B ${f} | egrep "(fixes|refs|closes) [A-Za-z]{4}-[0-9]{5,6}"
+done
diff --git a/packages/canvas-rce/build.sh b/packages/canvas-rce/build.sh
@@ -0,0 +1,26 @@
+#!/bin/bash
+export COMPOSE_FILE=./docker-compose.yml
+
+docker-compose build
+docker-compose up -d
+
+# run unit tests
+docker-compose exec -T module npm run test-cov
+unit_status=$?
+docker cp $(docker-compose ps -q module):/usr/src/app/coverage coverage
+
+# check code formatting
+docker-compose exec -T module npm run fmt:check
+fmt_status=$?
+
+# lint all the things
+docker-compose exec -T module npm run lint
+lint_status=$?
+
+docker-compose stop
+
+# jenkins uses the exit code to decide whether you passed or not
+((unit_status)) && exit $unit_status
+((lint_status)) && exit $lint_status
+((fmt_status)) && exit $fmt_status
+exit 0
diff --git a/packages/canvas-rce/demo/app.js b/packages/canvas-rce/demo/app.js
@@ -0,0 +1,187 @@
+/*
+ * Copyright (C) 2018 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import "@instructure/ui-themes/lib/canvas";
+import { renderIntoDiv, renderSidebarIntoDiv } from "../src/async";
+import CanvasRce from "../src/rce/CanvasRce";
+import * as fakeSource from "../src/sidebar/sources/fake";
+import React, { Component } from "react";
+import ReactDOM from "react-dom";
+import { Button, Select, TextInput } from "@instructure/ui-core/lib/components";
+import Url from "url";
+
+function getProps(textareaId, language = "en") {
+  return {
+    language,
+    editorOptions: () => {
+      return {
+        height: "250px",
+        plugins:
+          "instructure_equation, instructure_image, instructure_equella, link, textcolor, instructure_external_tools, instructure_record, instructure_links, table",
+        // todo: add "instructure_embed" when the wiki sidebar work is done
+        external_plugins: {},
+        menubar: true,
+        // todo: the toolbar building and automatic splitting functions should come into the service
+        toolbar: [
+          // basic buttons
+          "bold,italic,underline,forecolor,backcolor,removeformat,alignleft,aligncenter,alignright,outdent,indent,superscript,subscript,bullist,numlist,fontsizeselect,formatselect",
+
+          // plugin buttons ("instructure_links" will be changed to "link", but this is how
+          //   it's currently sent over from canvas.  Once that's no longer true, the test
+          //  page can just use "link" instead)
+          "table, link, unlink, instructure_equation, instructure_image, instructure_equella, instructure_record"
+        ]
+      };
+    },
+    textareaClassName: "exampleClassOne exampleClassTwo",
+    textareaId
+  };
+}
+
+function renderDemos(
+  host,
+  jwt,
+  language = "en",
+  contextType = "course",
+  contextId = 1
+) {
+  renderIntoDiv(
+    document.getElementById("editor1"),
+    getProps("textarea1", language)
+  );
+  renderIntoDiv(
+    document.getElementById("editor2"),
+    getProps("textarea2", language)
+  );
+  ReactDOM.render(
+    <CanvasRce rceProps={getProps("textarea3")} />,
+    document.getElementById("editor3")
+  );
+
+  const parsedUrl = Url.parse(window.location.href, true);
+  if (parsedUrl.query.sidebar === "no") {
+    return;
+  }
+
+  const sidebarEl = document.getElementById("sidebar");
+  ReactDOM.render(<div />, sidebarEl);
+  renderSidebarIntoDiv(sidebarEl, {
+    source: jwt ? undefined : fakeSource,
+    host,
+    jwt,
+    contextType,
+    contextId,
+    canUploadFiles: true
+  });
+}
+
+class DemoOptions extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      expanded: false
+    };
+    this.inputs = {};
+    this.handleChange = this.handleChange.bind(this);
+    this.toggle = this.toggle.bind(this);
+  }
+
+  handleChange() {
+    renderDemos(
+      this.inputs.host.value,
+      this.inputs.jwt.value,
+      this.inputs.language.value,
+      this.inputs.contextType.value,
+      this.inputs.contextId.value
+    );
+  }
+
+  componentDidMount() {
+    this.handleChange();
+  }
+
+  toggle() {
+    this.setState({ expanded: !this.state.expanded });
+  }
+
+  render() {
+    return (
+      <div>
+        <Button size="small" onClick={this.toggle}>
+          {this.state.expanded ? "Hide Options" : "Show Options"}
+        </Button>
+        <div style={{ display: this.state.expanded ? undefined : "none" }}>
+          <Select
+            ref={r => (this.inputs.language = r)}
+            label="Language"
+            defaultValue="en"
+          >
+            <option>ar</option>
+            <option>da</option>
+            <option>de</option>
+            <option>en-AU</option>
+            <option>en-GB</option>
+            <option>en-GB-x-lbs</option>
+            <option>en</option>
+            <option>es</option>
+            <option>fa</option>
+            <option>fr</option>
+            <option>he</option>
+            <option>hy</option>
+            <option>ja</option>
+            <option>ko</option>
+            <option>mi</option>
+            <option>nb</option>
+            <option>nl</option>
+            <option>pl</option>
+            <option>pt-BR</option>
+            <option>pt</option>
+            <option>ru</option>
+            <option>sv</option>
+            <option>tr</option>
+            <option>zh-Hans</option>
+            <option>zh-Hant</option>
+          </Select>
+          <TextInput
+            ref={r => (this.inputs.host = r)}
+            label="API Host"
+            defaultValue="https://rich-content-iad.inscloudgate.net"
+          />
+          <TextInput ref={r => (this.inputs.jwt = r)} label="Canvas JWT" />
+          <Select
+            ref={r => (this.inputs.contextType = r)}
+            label="Context Type"
+            defaultValue="course"
+          >
+            <option>course</option>
+            <option>group</option>
+            <option>user</option>
+          </Select>
+          <TextInput
+            ref={r => (this.inputs.contextId = r)}
+            label="Context ID"
+            defaultValue="1"
+          />
+          <Button onClick={this.handleChange}>Update</Button>
+        </div>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<DemoOptions />, document.getElementById("options"));