diff --git a/package-lock.json b/package-lock.json index b0d35450b..488d37b0c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2489,9 +2489,9 @@ "integrity": "sha512-Bl38cx/rS/oRqb0gvzT/mtA3BNWdLwqLEyI5Jdp8mA1CG+pOL7NQZeLEz8OIRI/ie6xBnjT7CoVKscjfmpX7nw==" }, "@coralproject/rte": { - "version": "0.10.13", - "resolved": "https://registry.npmjs.org/@coralproject/rte/-/rte-0.10.13.tgz", - "integrity": "sha512-YlKErdrGD3xMPWjObKIa0hmqG2n9F1sbemZrnWwBCzC5xt+ktkTynAXfHo+tsyKquJLZVtFISP8+A717tMl8wg==", + "version": "0.10.15", + "resolved": "https://registry.npmjs.org/@coralproject/rte/-/rte-0.10.15.tgz", + "integrity": "sha512-w8UWmjZxEQIW1zTMAchsmy1lzklqH2EjoyDqr9ZBed0GN6gfWfU1duTDQKc7K2igdGNRTyYfHbfXhKRIdOC6oA==", "dev": true, "requires": { "bowser": "^1.0.0", diff --git a/package.json b/package.json index f6c124a7d..c550547b0 100644 --- a/package.json +++ b/package.json @@ -136,7 +136,7 @@ "@babel/preset-env": "^7.4.4", "@babel/preset-react": "^7.0.0", "@babel/preset-typescript": "^7.3.3", - "@coralproject/rte": "^0.10.13", + "@coralproject/rte": "^0.10.15", "@intervolga/optimize-cssnano-plugin": "^1.0.6", "@types/basic-auth": "^1.1.2", "@types/bcryptjs": "^2.4.1", diff --git a/src/core/client/stream/tabs/comments/components/PostCommentFormFake.spec.tsx b/src/core/client/stream/tabs/comments/components/PostCommentFormFake.spec.tsx index 0db20574c..9c69ea6d5 100644 --- a/src/core/client/stream/tabs/comments/components/PostCommentFormFake.spec.tsx +++ b/src/core/client/stream/tabs/comments/components/PostCommentFormFake.spec.tsx @@ -1,3 +1,4 @@ +import { noop } from "lodash"; import React from "react"; import { createRenderer } from "react-test-renderer/shallow"; import { removeFragmentRefs } from "talk-framework/testHelpers"; @@ -8,6 +9,14 @@ const PostCommentFormFakeN = removeFragmentRefs(PostCommentFormFake); it("renders correctly", () => { const renderer = createRenderer(); - renderer.render(); + renderer.render( + + ); expect(renderer.getRenderOutput()).toMatchSnapshot(); }); diff --git a/src/core/client/stream/tabs/comments/components/PostCommentFormFake.tsx b/src/core/client/stream/tabs/comments/components/PostCommentFormFake.tsx index 5d5831dca..6ab6b4aef 100644 --- a/src/core/client/stream/tabs/comments/components/PostCommentFormFake.tsx +++ b/src/core/client/stream/tabs/comments/components/PostCommentFormFake.tsx @@ -1,5 +1,5 @@ import { Localized } from "fluent-react/compat"; -import React, { FunctionComponent } from "react"; +import React, { FunctionComponent, useCallback } from "react"; import { PropTypesOf } from "talk-framework/types"; import { Button, HorizontalGutter } from "talk-ui/components"; @@ -12,35 +12,51 @@ import styles from "./PostCommentFormFake.css"; interface Props { showMessageBox?: boolean; story: PropTypesOf["story"]; + draft: string; + onDraftChange: (draft: string) => void; + onSignIn: () => void; } -const PostCommentFormFake: FunctionComponent = props => ( -
- {props.showMessageBox && ( - - )} - - -); + +
+ ); +}; export default PostCommentFormFake; diff --git a/src/core/client/stream/tabs/comments/components/RTE.css b/src/core/client/stream/tabs/comments/components/RTE.css index f6f4be121..a98ad645c 100644 --- a/src/core/client/stream/tabs/comments/components/RTE.css +++ b/src/core/client/stream/tabs/comments/components/RTE.css @@ -10,5 +10,5 @@ .placeholder { composes: placeholder from "talk-ui/shared/typography.css"; - margin: var(--mini-unit) 0 0 calc(1px + var(--mini-unit)); + margin: 10px 0 0 calc(10px); } diff --git a/src/core/client/stream/tabs/comments/components/__snapshots__/PostCommentFormFake.spec.tsx.snap b/src/core/client/stream/tabs/comments/components/__snapshots__/PostCommentFormFake.spec.tsx.snap index bd2a37213..49f2e64ed 100644 --- a/src/core/client/stream/tabs/comments/components/__snapshots__/PostCommentFormFake.spec.tsx.snap +++ b/src/core/client/stream/tabs/comments/components/__snapshots__/PostCommentFormFake.spec.tsx.snap @@ -21,8 +21,9 @@ exports[`renders correctly 1`] = ` id="comments-postCommentFormFake-rte" > @@ -31,8 +32,8 @@ exports[`renders correctly 1`] = ` > diff --git a/src/core/client/stream/tabs/comments/components/__snapshots__/RTE.spec.tsx.snap b/src/core/client/stream/tabs/comments/components/__snapshots__/RTE.spec.tsx.snap index a2b559b17..bf0de7c09 100644 --- a/src/core/client/stream/tabs/comments/components/__snapshots__/RTE.spec.tsx.snap +++ b/src/core/client/stream/tabs/comments/components/__snapshots__/RTE.spec.tsx.snap @@ -7,6 +7,8 @@ exports[`renders correctly 1`] = ` classNameDisabled="" contentClassName="RTE-content" contentClassNameDisabled="" + contentContainerClassName="" + contentContainerClassNameDisabled="" features={ Array [ - - - - = {}): Props { local: { loggedIn: true, }, + showAuthPopup: noop as any, createComment: noop as any, refreshSettings: noop as any, story: { diff --git a/src/core/client/stream/tabs/comments/containers/PostCommentFormContainer.tsx b/src/core/client/stream/tabs/comments/containers/PostCommentFormContainer.tsx index 0fc4c44c0..7636bf594 100644 --- a/src/core/client/stream/tabs/comments/containers/PostCommentFormContainer.tsx +++ b/src/core/client/stream/tabs/comments/containers/PostCommentFormContainer.tsx @@ -21,7 +21,9 @@ import { PostCommentFormContainerLocal as Local } from "talk-stream/__generated_ import { RefreshSettingsFetch } from "talk-stream/fetches"; import { CreateCommentMutation, + ShowAuthPopupMutation, withCreateCommentMutation, + withShowAuthPopupMutation, } from "talk-stream/mutations"; import PostCommentForm from "../components/PostCommentForm"; @@ -41,6 +43,7 @@ interface Props { settings: SettingsData; local: Local; story: StoryData; + showAuthPopup: ShowAuthPopupMutation; } interface State { @@ -50,10 +53,17 @@ interface State { initialized: boolean; keepFormWhenClosed: boolean; submitStatus: SubmitStatus | null; + notLoggedInDraft: string; } const contextKey = "postCommentFormBody"; +/** + * A temporary variable to save draft when user is not logged in. + * This will be restored after the stream has refreshed. + */ +let preserveNotLoggedInDraft = ""; + export class PostCommentFormContainer extends Component { public state: State = { initialized: false, @@ -63,22 +73,29 @@ export class PostCommentFormContainer extends Component { !this.props.story.isClosed && !this.props.settings.disableCommenting.enabled, submitStatus: null, + notLoggedInDraft: "", }; constructor(props: Props) { super(props); + // Restore comment draft, if available. + this.state.notLoggedInDraft = preserveNotLoggedInDraft; + preserveNotLoggedInDraft = ""; this.init(); } + public componentWillUnmount() { + // Keep comment draft around. User might just have signed in and caused a reload. + preserveNotLoggedInDraft = this.state.notLoggedInDraft; + } + private async init() { const body = await this.props.sessionStorage.getItem(contextKey); - if (body) { - this.setState({ - initialValues: { - body, - }, - }); - } + this.setState({ + initialValues: { + body: body || this.state.notLoggedInDraft, + }, + }); this.setState({ initialized: true, }); @@ -145,6 +162,12 @@ export class PostCommentFormContainer extends Component { } }; + private handleDraftChange = (draft: string) => { + this.setState({ notLoggedInDraft: draft }); + }; + + private handleSignIn = () => this.props.showAuthPopup({ view: "SIGN_IN" }); + public render() { if (!this.state.initialized) { return null; @@ -172,8 +195,11 @@ export class PostCommentFormContainer extends Component { if (!this.props.local.loggedIn) { return ( ); } @@ -212,45 +238,47 @@ export class PostCommentFormContainer extends Component { const enhanced = withContext(({ sessionStorage }) => ({ sessionStorage, }))( - withCreateCommentMutation( - withFetch(RefreshSettingsFetch)( - withLocalStateContainer( - graphql` - fragment PostCommentFormContainerLocal on Local { - loggedIn - } - ` - )( - withFragmentContainer({ - settings: graphql` - fragment PostCommentFormContainer_settings on Settings { - charCount { - enabled - min - max - } - disableCommenting { - enabled - message - } - closeCommenting { - message - } + withShowAuthPopupMutation( + withCreateCommentMutation( + withFetch(RefreshSettingsFetch)( + withLocalStateContainer( + graphql` + fragment PostCommentFormContainerLocal on Local { + loggedIn } - `, - story: graphql` - fragment PostCommentFormContainer_story on Story { - id - isClosed - ...MessageBoxContainer_story - settings { - messageBox { + ` + )( + withFragmentContainer({ + settings: graphql` + fragment PostCommentFormContainer_settings on Settings { + charCount { enabled + min + max + } + disableCommenting { + enabled + message + } + closeCommenting { + message } } - } - `, - })(PostCommentFormContainer) + `, + story: graphql` + fragment PostCommentFormContainer_story on Story { + id + isClosed + ...MessageBoxContainer_story + settings { + messageBox { + enabled + } + } + } + `, + })(PostCommentFormContainer) + ) ) ) ) diff --git a/src/core/client/stream/tabs/comments/containers/__snapshots__/PostCommentFormContainer.spec.tsx.snap b/src/core/client/stream/tabs/comments/containers/__snapshots__/PostCommentFormContainer.spec.tsx.snap index 538ad2d07..1a27b4b06 100644 --- a/src/core/client/stream/tabs/comments/containers/__snapshots__/PostCommentFormContainer.spec.tsx.snap +++ b/src/core/client/stream/tabs/comments/containers/__snapshots__/PostCommentFormContainer.spec.tsx.snap @@ -4,6 +4,11 @@ exports[`renders correctly 1`] = `
+
+ disabled={false} + id="comments-editCommentForm-rte-comment-with-replies" + onBlur={[Function]} + onChange={[Function]} + onCut={[Function]} + onFocus={[Function]} + onInput={[Function]} + onKeyDown={[Function]} + onPaste={[Function]} + onSelect={[Function]} + /> +
@@ -394,25 +398,29 @@ exports[`edit a comment: edit form 1`] = ` className="" >
+
+ disabled={false} + id="comments-editCommentForm-rte-comment-with-replies" + onBlur={[Function]} + onChange={[Function]} + onCut={[Function]} + onFocus={[Function]} + onInput={[Function]} + onKeyDown={[Function]} + onPaste={[Function]} + onSelect={[Function]} + /> +
@@ -560,25 +568,29 @@ exports[`edit a comment: optimistic response 1`] = ` className="" >
+
+ disabled={true} + id="comments-editCommentForm-rte-comment-with-replies" + onBlur={[Function]} + onChange={[Function]} + onCut={[Function]} + onFocus={[Function]} + onInput={[Function]} + onKeyDown={[Function]} + onPaste={[Function]} + onSelect={[Function]} + /> +
@@ -1290,25 +1302,29 @@ exports[`shows expiry message: edit time expired 1`] = ` className="" >
+
+ disabled={true} + id="comments-editCommentForm-rte-comment-with-replies" + onBlur={[Function]} + onChange={[Function]} + onCut={[Function]} + onFocus={[Function]} + onInput={[Function]} + onKeyDown={[Function]} + onPaste={[Function]} + onSelect={[Function]} + /> +
diff --git a/src/core/client/stream/test/comments/__snapshots__/postLocalReply.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/postLocalReply.spec.tsx.snap index b53ac2f96..13fcf0ea3 100644 --- a/src/core/client/stream/test/comments/__snapshots__/postLocalReply.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/postLocalReply.spec.tsx.snap @@ -228,31 +228,35 @@ exports[`post a reply: open reply form 1`] = ` className="" > -
+ disabled={false} + id="comments-replyCommentForm-rte-comment-with-deepest-replies-5" + onBlur={[Function]} + onChange={[Function]} + onCut={[Function]} + onFocus={[Function]} + onInput={[Function]} + onKeyDown={[Function]} + onPaste={[Function]} + onSelect={[Function]} + /> + +
diff --git a/src/core/client/stream/test/comments/__snapshots__/postReply.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/postReply.spec.tsx.snap index 49253a22a..44066eaa5 100644 --- a/src/core/client/stream/test/comments/__snapshots__/postReply.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/postReply.spec.tsx.snap @@ -213,31 +213,35 @@ exports[`post a reply: open reply form 1`] = ` className="" > -
+ disabled={false} + id="comments-replyCommentForm-rte-comment-0" + onBlur={[Function]} + onChange={[Function]} + onCut={[Function]} + onFocus={[Function]} + onInput={[Function]} + onKeyDown={[Function]} + onPaste={[Function]} + onSelect={[Function]} + /> + +
diff --git a/src/core/client/stream/test/comments/__snapshots__/renderCommunityGuidelines.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/renderCommunityGuidelines.spec.tsx.snap index bb4c0e9a4..c02ecf6df 100644 --- a/src/core/client/stream/test/comments/__snapshots__/renderCommunityGuidelines.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/renderCommunityGuidelines.spec.tsx.snap @@ -64,32 +64,35 @@ exports[`renders comment stream with community guidelines 1`] = ` className="" >