Fix up editor padding and Safari right-click behavior (#3192)

* some fixes for padding * ignore right clicks from trackpad in mouse event handlers * linting
Automattic · May 13, 2024 · 0bff9da · 0bff9da
1 parent 7218b4a
commit 0bff9da
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 4 deletions.
diff --git a/lib/note-content-editor.tsx b/lib/note-content-editor.tsx
@@ -977,6 +977,13 @@ class NoteContentEditor extends Component<Props> {
     });
 
     editor.onMouseDown((event: Editor.IEditorMouseEvent) => {
+      if (
+        (event.event.ctrlKey && event.event.leftButton) ||
+        event.event.rightButton
+      ) {
+        // ignore right clicks and OSX trackpad right clicks (ctrl+click)
+        return;
+      }
       const { editNote, noteId } = this.props;
       const { content } = this.state;
       const {
@@ -1199,7 +1206,23 @@ class NoteContentEditor extends Component<Props> {
         className={`note-content-editor-shell${
           overTodo ? ' cursor-pointer' : ''
         }`}
-        onClick={this.focusEditor}
+        onClick={(e: React.MouseEvent) => {
+          // click was on the editor body, let the editor handle it
+          const target = e.target as HTMLDivElement;
+          if (
+            target.classList.contains('view-line') ||
+            target.classList.contains('view-lines')
+          ) {
+            return;
+          }
+
+          // it was a fake (trackpad) right click, ignore it
+          if (e.ctrlKey) {
+            // TODO it would be nice if we could trigger the context menu from the left gutter :/
+            return;
+          }
+          this.focusEditor();
+        }}
       >
         <div
           className={`note-content-plaintext${
@@ -1231,7 +1254,7 @@ class NoteContentEditor extends Component<Props> {
               hideCursorInOverviewRuler: true,
               fontSize: 16,
               guides: { indentation: false },
-              lineDecorationsWidth: editorPadding,
+              lineDecorationsWidth: editorPadding /* hack for left padding */,
               lineHeight: 24,
               lineNumbers: 'off',
               links: true,
@@ -1240,15 +1263,20 @@ class NoteContentEditor extends Component<Props> {
               multiCursorLimit: 1,
               occurrencesHighlight: 'off',
               overviewRulerBorder: false,
+              padding: { top: 40, bottom: 0 },
               quickSuggestions: false,
+              renderControlCharacters: false,
               renderLineHighlight: 'none',
+              renderWhitespace: 'none',
               scrollbar: {
                 horizontal: 'hidden',
                 useShadows: false,
-                verticalScrollbarSize: editorPadding,
+                verticalScrollbarSize:
+                  editorPadding /* hack for right padding */,
               },
               scrollBeyondLastLine: false,
               selectionHighlight: false,
+              showFoldingControls: 'never',
               suggestOnTriggerCharacters: true,
               unicodeHighlight: {
                 ambiguousCharacters: false,

diff --git a/lib/note-editor/style.scss b/lib/note-editor/style.scss
@@ -3,6 +3,5 @@
   flex-direction: column;
   flex: 1 0 auto;
   user-select: text;
-  padding-top: 40px;
   background-color: var(--background-color);
 }