first hack at checkbox insertion

Automattic · Aug 19, 2020 · e610d29 · e610d29
1 parent 2f143ab
commit e610d29
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 16 deletions.
diff --git a/lib/note-content-editor.tsx b/lib/note-content-editor.tsx
@@ -85,7 +85,6 @@ class NoteContentEditor extends Component<Props> {
 
   componentDidMount() {
     const { noteId } = this.props;
-    window.addEventListener('keydown', this.handleKeys, true);
     this.bootTimer = setTimeout(() => {
       if (noteId === this.props.noteId) {
         this.setState({
@@ -101,7 +100,7 @@ class NoteContentEditor extends Component<Props> {
       clearTimeout(this.bootTimer);
     }
     window.electron?.removeListener('editorCommand');
-    window.removeEventListener('keydown', this.handleKeys, true);
+    window.electron?.removeListener('appCommand');
   }
 
   componentDidUpdate(prevProps: Props) {
@@ -137,22 +136,34 @@ class NoteContentEditor extends Component<Props> {
     }
   }
 
-  handleKeys = (event: KeyboardEvent) => {
-    if (!this.props.keyboardShortcuts) {
+  insertOrRemoveCheckboxes = (editor: Editor.IStandaloneCodeEditor) => {
+    // todo: we're not disabling this if !this.props.keyboardShortcuts, do we want to?
+    const model = editor.getModel();
+    if (!model) {
       return;
     }
 
-    const { code, ctrlKey, metaKey, shiftKey } = event;
-    const cmdOrCtrl = ctrlKey || metaKey;
+    const position = editor.getPosition();
+    if (!position) {
+      return;
+    }
+    const lineNumber = position.lineNumber;
+    const thisLine = model.getLineContent(lineNumber);
+
+    let range = new this.monaco.Range(lineNumber, 0, lineNumber, 0);
+    let text = '\ue000 ';
 
-    if (cmdOrCtrl && shiftKey && 'KeyC' === code) {
-      this.props.insertTask();
-      event.stopPropagation();
-      event.preventDefault();
-      return false;
+    // if line already starts with a checkbox, remove it
+    if (thisLine.startsWith('\ue000 ') || thisLine.startsWith('\ue001 ')) {
+      range = new this.monaco.Range(lineNumber, 0, lineNumber, 3);
+      text = '';
     }
 
-    return true;
+    const identifier = { major: 1, minor: 1 };
+    const op = { identifier, range, text, forceMoveMarkers: true };
+    editor.executeEdits('insertOrRemoveCheckboxes', [op]);
+
+    this.props.insertTask();
   };
 
   editorInit: EditorWillMount = () => {
@@ -209,6 +220,18 @@ class NoteContentEditor extends Component<Props> {
       editor._standaloneKeybindingService.addDynamicKeybinding('-' + action);
     });
 
+    editor.addAction({
+      id: 'insertChecklist',
+      label: 'Insert Checklist',
+      // we don't need to add keybindings for Electron since it is handled by appCommand
+      keybindings: window.electron
+        ? []
+        : [monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KEY_C],
+      contextMenuGroupId: '1_modification',
+      contextMenuOrder: 2.5,
+      run: this.insertOrRemoveCheckboxes,
+    });
+
     window.electron?.receive('editorCommand', (command) => {
       switch (command.action) {
         case 'redo':
@@ -223,6 +246,14 @@ class NoteContentEditor extends Component<Props> {
       }
     });
 
+    window.electron?.receive('appCommand', (command) => {
+      switch (command.action) {
+        case 'insertChecklist':
+          editor.trigger('appCommand', 'insertChecklist', null);
+          return;
+      }
+    });
+
     const titleDecoration = (line: number) => ({
       range: new monaco.Range(line, 1, line, 1),
       options: {

diff --git a/lib/state/electron/middleware.ts b/lib/state/electron/middleware.ts
@@ -29,10 +29,6 @@ export const middleware: S.Middleware = ({ dispatch, getState }) => {
         dispatch(actions.ui.focusSearchField());
         return;
 
-      case 'insertChecklist':
-        dispatch({ type: 'INSERT_TASK' });
-        return;
-
       case 'showDialog':
         dispatch(actions.ui.showDialog(command.dialog));
         return;