11127125275

Committed 01 Oct 2024 02:09PM UTC coverage: 31.731% (-0.08%) from 31.806%

Build # 11127125275

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9770 from ForumMagnum/update-ckeditor-placeholders-in-place

Update ckeditor placeholders in place

Run Details

5075 of 41659 branches covered (12.18%)

Branch coverage included in aggregate %.

10 of 36 new or added lines in 7 files covered. (27.78%)

7 existing lines in 4 files now uncovered.

29558 of 67485 relevant lines covered (43.8%)

183.28 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

48.0

/packages/lesswrong/components/questions/NewAnswerCommentQuestionForm.tsx

import { Components, registerComponent } from '../../lib/vulcan-lib';
import React, {useState} from 'react';
import classNames from 'classnames';
import Tooltip from '@material-ui/core/Tooltip';
import FullscreenIcon from '@material-ui/icons/Fullscreen';
import FullscreenExitIcon from '@material-ui/icons/FullscreenExit';
import { afNonMemberDisplayInitialPopup } from "../../lib/alignment-forum/displayAFNonMemberPopups";
import { useCurrentUser } from "../common/withUser";
import { useDialog } from "../common/withDialog";

const styles = (theme: ThemeType): JssStyles => ({
  root: {
    borderTop: theme.palette.border.intense,
    maxWidth:650 + (theme.spacing.unit*4),
    [theme.breakpoints.down('md')]: {
      marginLeft: "auto",
      marginRight: "auto"
    }
  },
  chooseResponseType: {
    display: "flex",
    justifyContent: "space-between",
    padding: theme.spacing.unit,
  },
  responseType: {
    ...theme.typography.commentStyle,
    fontSize: 16,
    width: "calc(50% - 12px)",
    textAlign: "center",
    padding: theme.spacing.unit*2,
    color: theme.palette.grey[500],
    marginRight: theme.spacing.unit*1.5,
    cursor: "pointer",
    '&:hover': {
      color: theme.palette.text.normal,
      borderBottom: theme.palette.border.normal,
    }
  },
  selected: {
    color: theme.palette.text.normal,
    borderBottom: theme.palette.border.slightlyIntense3,
  },
  form: {
    position: "relative",
    zIndex: theme.zIndexes.textbox,
  },
  disabled: {
    cursor: "default",
    color: theme.palette.grey[400],
    '&:hover': {
      color: theme.palette.grey[400],
      borderBottom: "unset"
    },
  },
  whitescreen: {
    display: "none",
    position: "fixed",
    inset: 0,
    backgroundColor: theme.palette.panelBackground.default,
    zIndex: theme.zIndexes.questionPageWhitescreen,
  },
  displayWhitescreen: {
    display: "block"
  },
  toggleFocus: {
    cursor: "pointer",
    paddingTop: theme.spacing.unit*1.5,
    padding: theme.spacing.unit
  }
})

const NewAnswerCommentQuestionForm = ({post, classes}: {
  post: PostsDetails,
  classes: ClassesType,
}) => {
  const [selection, setSelection] = useState("answer");
  const [formFocus, setFormFocus] = useState(false);
  const currentUser = useCurrentUser()
  const { openDialog } = useDialog()
  const {CommentsNewForm} = Components;

  const toggleFormFocus = () => {
    setFormFocus(!formFocus);
  }

  const isAnswer = selection === "answer";

  return <div className={classes.root} onFocus={() => afNonMemberDisplayInitialPopup(currentUser, openDialog)}>
    <div className={classNames(classes.whitescreen, {[classes.displayWhitescreen]: formFocus})}/>
    <div className={classes.form}>
      <div className={classes.chooseResponseType}>
        <Tooltip title="Write an answer or partial-answer to the question (i.e. something that gives the question author more information, or helps others to do so)">
          <div onClick={()=>setSelection("answer")}
            className={classNames(classes.responseType, {[classes.selected]: selection === "answer"})}
          >
            New Answer
          </div>
        </Tooltip>
        <Tooltip title="Discuss the question or ask clarifying questions">
          <div onClick={()=>setSelection("comment")}
            className={classNames(classes.responseType, {[classes.selected]: selection === "comment"})}>
            New Comment
          </div>
        </Tooltip>
        <div className={classes.toggleFocus} onClick={toggleFormFocus}>
          {formFocus ?
            <Tooltip title="Exit focus mode">
              <FullscreenExitIcon />
            </Tooltip>
            :
            <Tooltip title="Enter focus mode">
              <FullscreenIcon />
            </Tooltip>
            }
        </div>
      </div>
      <div className={classes.responseForm}>
        <CommentsNewForm
          post={post}
          type="comment"
          isAnswer={isAnswer}
        />
      </div>
    </div>
  </div>
}

const NewAnswerCommentQuestionFormComponent = registerComponent('NewAnswerCommentQuestionForm', NewAnswerCommentQuestionForm, {styles});

declare global {
  interface ComponentTypes {
    NewAnswerCommentQuestionForm: typeof NewAnswerCommentQuestionFormComponent
  }
}

1	import { Components, registerComponent } from '../../lib/vulcan-lib';	1✔
2	import React, {useState} from 'react';	1✔
3	import classNames from 'classnames';	1✔
4	import Tooltip from '@material-ui/core/Tooltip';	1✔
5	import FullscreenIcon from '@material-ui/icons/Fullscreen';	1✔
6	import FullscreenExitIcon from '@material-ui/icons/FullscreenExit';	1✔
7	import { afNonMemberDisplayInitialPopup } from "../../lib/alignment-forum/displayAFNonMemberPopups";	1✔
8	import { useCurrentUser } from "../common/withUser";	1✔
9	import { useDialog } from "../common/withDialog";	1✔
10
11	const styles = (theme: ThemeType): JssStyles => ({	1✔
12	root: {
13	borderTop: theme.palette.border.intense,
14	maxWidth:650 + (theme.spacing.unit*4),
15	[theme.breakpoints.down('md')]: {
16	marginLeft: "auto",
17	marginRight: "auto"
18	}
19	},
20	chooseResponseType: {
21	display: "flex",
22	justifyContent: "space-between",
23	padding: theme.spacing.unit,
24	},
25	responseType: {
26	...theme.typography.commentStyle,
27	fontSize: 16,
28	width: "calc(50% - 12px)",
29	textAlign: "center",
30	padding: theme.spacing.unit*2,
31	color: theme.palette.grey[500],
32	marginRight: theme.spacing.unit*1.5,
33	cursor: "pointer",
34	'&:hover': {
35	color: theme.palette.text.normal,
36	borderBottom: theme.palette.border.normal,
37	}
38	},
39	selected: {
40	color: theme.palette.text.normal,
41	borderBottom: theme.palette.border.slightlyIntense3,
42	},
43	form: {
44	position: "relative",
45	zIndex: theme.zIndexes.textbox,
46	},
47	disabled: {
48	cursor: "default",
49	color: theme.palette.grey[400],
50	'&:hover': {
51	color: theme.palette.grey[400],
52	borderBottom: "unset"
53	},
54	},
55	whitescreen: {
56	display: "none",
57	position: "fixed",
58	inset: 0,
59	backgroundColor: theme.palette.panelBackground.default,
60	zIndex: theme.zIndexes.questionPageWhitescreen,
61	},
62	displayWhitescreen: {
63	display: "block"
64	},
65	toggleFocus: {
66	cursor: "pointer",
67	paddingTop: theme.spacing.unit*1.5,
68	padding: theme.spacing.unit
69	}
70	})
71
72	const NewAnswerCommentQuestionForm = ({post, classes}: {	1✔
73	post: PostsDetails,
74	classes: ClassesType,
75	}) => {
76	const [selection, setSelection] = useState("answer");	×
77	const [formFocus, setFormFocus] = useState(false);	×
78	const currentUser = useCurrentUser()	×
79	const { openDialog } = useDialog()	×
NEW 80	const {CommentsNewForm} = Components;	×
81
82	const toggleFormFocus = () => {	×
83	setFormFocus(!formFocus);	×
84	}
85
NEW 86	const isAnswer = selection === "answer";	×
87
88	return <div className={classes.root} onFocus={() => afNonMemberDisplayInitialPopup(currentUser, openDialog)}>	×
89	<div className={classNames(classes.whitescreen, {[classes.displayWhitescreen]: formFocus})}/>
90	<div className={classes.form}>
91	<div className={classes.chooseResponseType}>
92	<Tooltip title="Write an answer or partial-answer to the question (i.e. something that gives the question author more information, or helps others to do so)">
93	<div onClick={()=>setSelection("answer")}	×
94	className={classNames(classes.responseType, {[classes.selected]: selection === "answer"})}
95	>
96	New Answer
97	</div>
98	</Tooltip>
99	<Tooltip title="Discuss the question or ask clarifying questions">
100	<div onClick={()=>setSelection("comment")}	×
101	className={classNames(classes.responseType, {[classes.selected]: selection === "comment"})}>
102	New Comment
103	</div>
104	</Tooltip>
105	<div className={classes.toggleFocus} onClick={toggleFormFocus}>
106	{formFocus ?
107	<Tooltip title="Exit focus mode">	×
108	<FullscreenExitIcon />
109	</Tooltip>
110	:
111	<Tooltip title="Enter focus mode">
112	<FullscreenIcon />
113	</Tooltip>
114	}
115	</div>
116	</div>
117	<div className={classes.responseForm}>
118	<CommentsNewForm
119	post={post}
120	type="comment"
121	isAnswer={isAnswer}
122	/>
123	</div>
124	</div>
125	</div>
126	}
127
128	const NewAnswerCommentQuestionFormComponent = registerComponent('NewAnswerCommentQuestionForm', NewAnswerCommentQuestionForm, {styles});	1✔
129
130	declare global {
131	interface ComponentTypes {
132	NewAnswerCommentQuestionForm: typeof NewAnswerCommentQuestionFormComponent
133	}
134	}

ForumMagnum / ForumMagnum / 11127125275

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous