Move thread editor to plaintext

api/mutations/files/index.js

@@ -0,0 +1,8 @@
+// @flow
+import uploadImage from './uploadImage';
+
+module.exports = {
+  Mutation: {
+    uploadImage,
+  },
+};

api/mutations/files/uploadImage.js

@@ -0,0 +1,23 @@
+// @flow
+import { isAuthedResolver } from '../../utils/permissions';
+import { uploadImage } from '../../utils/file-storage';
+import type { EntityTypes } from 'shared/types';
+import type { GraphQLContext } from '../../';
+import type { FileUpload } from 'shared/types';
+import { signImageUrl } from 'shared/imgix';
+
+type Args = {
+  input: {
+    image: FileUpload,
+    type: EntityTypes,
+    id?: string,
+  },
+};
+
+export default isAuthedResolver(
+  async (_: void, { input }: Args, { loaders }: GraphQLContext) => {
+    const { image, type, id } = input;
+    const url = await uploadImage(image, type, id || 'draft');
+    return await signImageUrl(url);
+  }
+);

api/mutations/thread/publishThread.js

@@ -1,11 +1,17 @@
 // @flow
 const debug = require('debug')('api:mutations:thread:publish-thread');
 import stringSimilarity from 'string-similarity';
-import { convertToRaw } from 'draft-js';
+import {
+  convertToRaw,
+  convertFromRaw,
+  EditorState,
+  SelectionState,
+} from 'draft-js';
 import { stateFromMarkdown } from 'draft-js-import-markdown';
 import type { GraphQLContext } from '../../';
 import UserError from '../../utils/UserError';
 import { uploadImage } from '../../utils/file-storage';
+import processThreadContent from 'shared/draft-utils/process-thread-content';
 import {
   publishThread,
   editThread,
@@ -68,22 +74,11 @@ export default requireAuth(
       );
     }
 
-    if (type === 'TEXT') {
-      type = 'DRAFTJS';
-      if (thread.content.body) {
-        thread.content.body = JSON.stringify(
-          convertToRaw(
-            stateFromMarkdown(thread.content.body, {
-              parserOptions: {
-                breaks: true,
-              },
-            })
-          )
-        );
-      }
+    if (thread.content.body) {
+      thread.content.body = processThreadContent(type, thread.content.body);
     }
 
-    thread.type = type;
+    thread.type = 'DRAFTJS';
 
     const [
       currentUserChannelPermissions,

api/schema.js

@@ -56,6 +56,7 @@ const notificationMutations = require('./mutations/notification');
 const userMutations = require('./mutations/user');
 const metaMutations = require('./mutations/meta');
 const communityMemberMutations = require('./mutations/communityMember');
+const fileMutations = require('./mutations/files');
 
 const messageSubscriptions = require('./subscriptions/message');
 const notificationSubscriptions = require('./subscriptions/notification');
@@ -125,6 +126,7 @@ const resolvers = merge(
   userMutations,
   metaMutations,
   communityMemberMutations,
+  fileMutations,
   // subscriptions
   messageSubscriptions,
   notificationSubscriptions,

api/types/general.js

@@ -76,6 +76,24 @@ const general = /* GraphQL */ `
     createdAt: String
     status: String
   }
+
+  enum EntityTypes {
+    communities
+    channels
+    users
+    threads
+  }
+
+  input UploadImageInput {
+    image: Upload!
+    type: EntityTypes!
+    id: String
+  }
+
+  extend type Mutation {
+    uploadImage(input: UploadImageInput!): String
+      @rateLimit(max: 20, window: "20m")
+  }
 `;
 
 module.exports = general;

cypress/integration/channel/view/composer_spec.js

@@ -33,7 +33,7 @@ describe('renders composer for logged in members', () => {
 
     cy.get('[data-cy="thread-composer-placeholder"]').click();
 
-    cy.get('[data-cy="thread-composer"]').should('be.visible');
+    cy.get('[data-cy="rich-text-editor"]').should('be.visible');
   });
 });
 

cypress/integration/community/view/profile_spec.js

@@ -268,7 +268,8 @@ describe('private community signed in with permissions', () => {
       .filter(channel => !channel.isPrivate)
       .filter(channel => !channel.deletedAt)
       .forEach(channel => {
-        cy.contains(channel.name)
+        cy.get('[data-cy="channel-list"]')
+          .contains(channel.name)
           .scrollIntoView()
           .should('be.visible');
       });

cypress/integration/thread/action_bar_spec.js

@@ -189,7 +189,7 @@ describe('action bar renders', () => {
       cy.get('[data-cy="thread-dropdown-edit"]').click();
       cy.get('[data-cy="save-thread-edit-button"]').should('be.visible');
       const title = 'Some new thread';
-      cy.get('[data-cy="rich-text-editor"]').should('be.visible');
+      cy.get('[data-cy="rich-text-editor"].markdown').should('be.visible');
       cy.get('[data-cy="thread-editor-title-input"]')
         .clear()
         .type(title);
@@ -201,7 +201,7 @@ describe('action bar renders', () => {
       cy.get('[data-cy="thread-dropdown-edit"]').click();
       cy.get('[data-cy="save-thread-edit-button"]').should('be.visible');
       const originalTitle = 'The first thread! 🎉';
-      cy.get('[data-cy="rich-text-editor"]').should('be.visible');
+      cy.get('[data-cy="rich-text-editor"].markdown').should('be.visible');
       cy.get('[data-cy="thread-editor-title-input"]')
         .clear()
         .type(originalTitle);

cypress/integration/thread_spec.js

@@ -456,7 +456,7 @@ describe('/new/thread', () => {
     cy.get('[data-cy="composer-channel-selector"]').should('be.visible');
     // Type title and body
     cy.get('[data-cy="composer-title-input"]').type(title);
-    cy.get('[contenteditable="true"]').type(body);
+    cy.get('[data-cy="rich-text-editor"]').type(body);
     cy.get('[data-cy="composer-publish-button"]').click();
     cy.location('pathname').should('contain', 'thread');
     cy.get('[data-cy="thread-view"]');
@@ -472,12 +472,12 @@ describe('/new/thread', () => {
     cy.get('[data-cy="composer-channel-selector"]').should('be.visible');
     // Type title and body
     cy.get('[data-cy="composer-title-input"]').type(title);
-    cy.get('[contenteditable="true"]').type(body);
+    cy.get('[data-cy="rich-text-editor"]').type(body);
     /////need time as our localstorage is not set
     cy.wait(1000);
     cy.reload();
 
     cy.get('[data-cy="composer-title-input"]').contains(title);
-    cy.get('[contenteditable="true"]').contains(body);
+    cy.get('[data-cy="rich-text-editor"]').contains(body);
   });
 });

flow-typed/npm/react-dropzone_vx.x.x.js

@@ -0,0 +1,116 @@
+// flow-typed signature: a5a6c5ef2495cde307215470bb3dd2b5
+// flow-typed version: <<STUB>>/react-dropzone_v8.0.3/flow_v0.66.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'react-dropzone'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'react-dropzone' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'react-dropzone/commitlint.config' {
+  declare module.exports: any;
+}
+
+declare module 'react-dropzone/dist/es/index' {
+  declare module.exports: any;
+}
+
+declare module 'react-dropzone/dist/es/utils/index' {
+  declare module.exports: any;
+}
+
+declare module 'react-dropzone/dist/es/utils/styles' {
+  declare module.exports: any;
+}
+
+declare module 'react-dropzone/dist/index' {
+  declare module.exports: any;
+}
+
+declare module 'react-dropzone/rollup.config' {
+  declare module.exports: any;
+}
+
+declare module 'react-dropzone/src/index' {
+  declare module.exports: any;
+}
+
+declare module 'react-dropzone/src/index.spec' {
+  declare module.exports: any;
+}
+
+declare module 'react-dropzone/src/utils/index' {
+  declare module.exports: any;
+}
+
+declare module 'react-dropzone/src/utils/index.spec' {
+  declare module.exports: any;
+}
+
+declare module 'react-dropzone/src/utils/styles' {
+  declare module.exports: any;
+}
+
+declare module 'react-dropzone/styleguide.config' {
+  declare module.exports: any;
+}
+
+declare module 'react-dropzone/testSetup' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'react-dropzone/commitlint.config.js' {
+  declare module.exports: $Exports<'react-dropzone/commitlint.config'>;
+}
+declare module 'react-dropzone/dist/es/index.js' {
+  declare module.exports: $Exports<'react-dropzone/dist/es/index'>;
+}
+declare module 'react-dropzone/dist/es/utils/index.js' {
+  declare module.exports: $Exports<'react-dropzone/dist/es/utils/index'>;
+}
+declare module 'react-dropzone/dist/es/utils/styles.js' {
+  declare module.exports: $Exports<'react-dropzone/dist/es/utils/styles'>;
+}
+declare module 'react-dropzone/dist/index.js' {
+  declare module.exports: $Exports<'react-dropzone/dist/index'>;
+}
+declare module 'react-dropzone/rollup.config.js' {
+  declare module.exports: $Exports<'react-dropzone/rollup.config'>;
+}
+declare module 'react-dropzone/src/index.js' {
+  declare module.exports: $Exports<'react-dropzone/src/index'>;
+}
+declare module 'react-dropzone/src/index.spec.js' {
+  declare module.exports: $Exports<'react-dropzone/src/index.spec'>;
+}
+declare module 'react-dropzone/src/utils/index.js' {
+  declare module.exports: $Exports<'react-dropzone/src/utils/index'>;
+}
+declare module 'react-dropzone/src/utils/index.spec.js' {
+  declare module.exports: $Exports<'react-dropzone/src/utils/index.spec'>;
+}
+declare module 'react-dropzone/src/utils/styles.js' {
+  declare module.exports: $Exports<'react-dropzone/src/utils/styles'>;
+}
+declare module 'react-dropzone/styleguide.config.js' {
+  declare module.exports: $Exports<'react-dropzone/styleguide.config'>;
+}
+declare module 'react-dropzone/testSetup.js' {
+  declare module.exports: $Exports<'react-dropzone/testSetup'>;
+}

package.json

@@ -90,7 +90,7 @@
     "draft-js-export-markdown": "^1.3.0",
     "draft-js-focus-plugin": "^2.2.0",
     "draft-js-image-plugin": "^2.0.6",
-    "draft-js-import-markdown": "^1.3.0",
+    "draft-js-import-markdown": "^1.3.1",
     "draft-js-linkify-plugin": "^2.0.0-beta1",
     "draft-js-markdown-plugin": "^3.0.5",
     "draft-js-plugins-editor": "^2.1.1",
@@ -156,6 +156,7 @@
     "react-app-rewired": "^1.6.2",
     "react-clipboard.js": "^2.0.1",
     "react-dom": "^16.7.0-alpha.2",
+    "react-dropzone": "^8.0.3",
     "react-flip-move": "^3.0.2",
     "react-helmet-async": "^0.1.0",
     "react-image": "^1.5.1",
@@ -220,7 +221,7 @@
     "start:api": "cross-env NODE_ENV=production node build-api/main.js",
     "dev:web": "cross-env NODE_PATH=./ react-app-rewired start",
     "dev:api": "cross-env FILE_STORAGE=local cross-env NODE_PATH=./ cross-env NODE_ENV=development cross-env DEBUG=build*,api*,shared:rethinkdb:db-query-cache,-api:resolvers cross-env DIR=api backpack",
-    "dev:api:s3": "cross-env FILE_STORAGE=s3 cross-env NODE_PATH=./ cross-env NODE_ENV=development cross-env DEBUG=build*,api*,shared:middlewares*,shared:rethinkdb:db-query-cache,-api:resolvers cross-env DIR=api backpack",
+    "dev:api:s3": "cross-env FILE_STORAGE=s3 cross-env NODE_PATH=./ cross-env NODE_ENV=development cross-env DEBUG=build*,api*,shared:rethinkdb:db-query-cache,-api:resolvers cross-env DIR=api backpack",
     "dev:athena": "cross-env NODE_PATH=./ cross-env NODE_ENV=development cross-env DEBUG=build*,athena*,shared:middlewares*,-athena:resolvers cross-env DIR=athena backpack",
     "dev:hermes": "cross-env NODE_PATH=./ cross-env NODE_ENV=development cross-env DEBUG=build*,hermes*,shared:middlewares*,-hermes:resolvers cross-env DIR=hermes backpack",
     "dev:chronos": "cross-env NODE_PATH=./ cross-env NODE_ENV=development cross-env DEBUG=build*,chronos*,shared:middlewares*,-chronos:resolvers cross-env DIR=chronos backpack",

shared/clients/draft-js/links-decorator/core.js

@@ -3,10 +3,13 @@ import React from 'react';
 import linkStrategy from 'draft-js-linkify-plugin/lib/linkStrategy';
 import normalizeUrl from '../../../normalize-url';
 import type { ContentBlock } from 'draft-js/lib/ContentBlock';
+import type { ContentState } from 'draft-js/lib/ContentState';
 import type { ComponentType, Node } from 'react';
 
 type DecoratorComponentProps = {
   decoratedText: string,
+  contentState: ContentState,
+  entityKey?: string,
   children?: Node,
 };
 
@@ -21,15 +24,34 @@ const createLinksDecorator = (
 ) => ({
   strategy: (
     contentBlock: ContentBlock,
-    callback: (...args?: Array<any>) => any
+    callback: (...args?: Array<any>) => any,
+    contentState: ContentState
   ) => {
     if (contentBlock.type === 'code-block') return;
 
+    if (contentBlock.findEntityRanges) {
+      contentBlock.findEntityRanges(char => {
+        const entityKey = char.getEntity();
+        return (
+          entityKey !== null &&
+          contentState.getEntity(entityKey).getType() === 'LINK'
+        );
+      }, callback);
+    }
     linkStrategy(contentBlock, callback);
   },
-  component: ({ decoratedText, children }: DecoratorComponentProps) => (
+  component: ({
+    decoratedText,
+    children,
+    entityKey,
+    contentState,
+  }: DecoratorComponentProps) => (
     <Component
-      href={normalizeUrl(decoratedText)}
+      href={
+        entityKey
+          ? contentState.getEntity(entityKey).getData().url
+          : normalizeUrl(decoratedText)
+      }
       children={children}
       /* NOTE(@mxstbr): This is super hacky, but I couldn't find a way to give two URLs in the same message a different key. (i.e. "I am on https://github.com https://github.com is great" would only show the link once) */
       key={`link-${i++}`}