Adds a 60px area to the left and right of editable area (#5197

* Adds a 60px area to the left and right of editable area that allows clicking to focus paragraphs

* tsc

app/components/ClickablePadding.ts

@@ -1,6 +1,9 @@
 import styled from "styled-components";
 
-const ClickablePadding = styled.div<{ grow?: boolean; minHeight?: string }>`
+const ClickablePadding = styled.div<{
+  grow?: boolean;
+  minHeight?: React.CSSProperties["paddingBottom"];
+}>`
   min-height: ${(props) => props.minHeight || "50vh"};
   flex-grow: 100;
   cursor: text;

app/components/Editor.tsx

@@ -47,7 +47,7 @@ export type Props = Optional<
   onHeadingsChange?: (headings: Heading[]) => void;
   onSynced?: () => Promise<void>;
   onPublish?: (event: React.MouseEvent) => any;
-  bottomPadding?: string;
+  editorStyle?: React.CSSProperties;
 };
 
 function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
@@ -340,12 +340,12 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
           placeholder={props.placeholder || ""}
           defaultValue={props.defaultValue || ""}
         />
-        {props.bottomPadding && !props.readOnly && (
+        {props.editorStyle?.paddingBottom && !props.readOnly && (
           <ClickablePadding
             onClick={focusAtEnd}
             onDrop={handleDrop}
             onDragOver={handleDragOver}
-            minHeight={props.bottomPadding}
+            minHeight={props.editorStyle.paddingBottom}
           />
         )}
         {activeLinkElement && !shareId && (

app/editor/index.tsx

@@ -127,8 +127,10 @@ export type Props = {
   /** Callback when a toast message is triggered (eg "link copied") */
   onShowToast: (message: string) => void;
   className?: string;
-  /** Optional style overrides */
+  /** Optional style overrides for the container*/
   style?: React.CSSProperties;
+  /** Optional style overrides for the contenteeditable */
+  editorStyle?: React.CSSProperties;
 };
 
 type State = {
@@ -759,6 +761,7 @@ export class Editor extends React.PureComponent<
               readOnly={readOnly}
               readOnlyWriteCheckboxes={readOnlyWriteCheckboxes}
               focusedCommentId={this.props.focusedCommentId}
+              editorStyle={this.props.editorStyle}
               ref={this.elementRef}
             />
             {!readOnly && this.view && (

app/scenes/Document/components/Editor.tsx

@@ -25,7 +25,7 @@ import EditableTitle from "./EditableTitle";
 
 const extensions = withComments(richExtensions);
 
-type Props = Omit<EditorProps, "extensions"> & {
+type Props = Omit<EditorProps, "extensions" | "editorStyle"> & {
   onChangeTitle: (text: string) => void;
   id: string;
   document: Document;
@@ -189,12 +189,18 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
             : undefined
         }
         onDeleteCommentMark={
-          team?.getPreference(TeamPreference.Commenting)
+          team?.getPreference(TeamPreference.Commenting) && can.comment
             ? handleRemoveComment
             : undefined
         }
         extensions={extensions}
-        bottomPadding={`calc(50vh - ${childRef.current?.offsetHeight || 0}px)`}
+        editorStyle={{
+          padding: "0 60px",
+          margin: "0 -60px",
+          paddingBottom: `calc(50vh - ${
+            childRef.current?.offsetHeight || 0
+          }px)`,
+        }}
         {...rest}
       />
       <div ref={childRef}>{children}</div>

shared/editor/components/Styles.ts

@@ -7,6 +7,7 @@ export type Props = {
   rtl: boolean;
   readOnly?: boolean;
   readOnlyWriteCheckboxes?: boolean;
+  editorStyle?: React.CSSProperties;
   grow?: boolean;
   theme: DefaultTheme;
 };
@@ -143,6 +144,8 @@ width: 100%;
   -webkit-font-variant-ligatures: none;
   font-variant-ligatures: none;
   font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
+  padding: ${props.editorStyle?.padding ?? "initial"};
+  margin: ${props.editorStyle?.margin ?? "initial"};
 
   & > .ProseMirror-yjs-cursor {
     display: none;