@standardnotes/simple-task-editor 1.3.10

package/app/components/CreateTask.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import TasksManager from '@Lib/tasksManager';
+
+export default class CreateTask extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = { rawString: (this.props.unsavedTask || '') };
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return nextProps.unsavedTask !== this.state.rawString;
+  }
+
+  componentDidUpdate(props) {
+    this.setState({ rawString: props.unsavedTask });
+  }
+
+  componentDidMount() {
+    if (!TasksManager.get().isMobile()) {
+      this.input.focus();
+    }
+  }
+
+  onTextChange = (event) => {
+    // save this as the current 'unsaved' task if while we're not officially saving it as an actual task yet
+    var rawString = event.target.value;
+    this.props.onUpdate(rawString);
+  }
+
+  handleKeyPress = (event) => {
+    if (event.key === 'Enter') {
+      var rawString = event.target.value;
+      this.submitTask(rawString);
+    }
+  }
+
+  submitTask(value) {
+    this.props.onSubmit(value);
+  }
+
+  render() {
+    let placeholderText = '';
+
+    if (TasksManager.get().showTutorial) {
+      placeholderText = 'Type in your task, then press Enter.';
+    }
+
+    const { spellcheckEnabled } = TasksManager.get();
+
+    return (
+      <input
+        className='create-task-input'
+        ref={(ref) => {this.input = ref;}}
+        placeholder={placeholderText}
+        type='text'
+        dir='auto'
+        value={this.props.unsavedTask}
+        onChange={this.onTextChange}
+        onKeyPress={this.handleKeyPress}
+        spellCheck={spellcheckEnabled}
+        enterKeyHint={'go'}
+      />
+    );
+  }
+
+}
+
+CreateTask.propTypes = {
+  unsavedTask: PropTypes.string,
+  onUpdate: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired
+};

package/app/components/TaskRow.js

@@ -0,0 +1,111 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+class TaskRow extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { isChecked: props.task.completed, task: props.task };
+  }
+
+  componentDidMount() {
+    this.resizeTextArea(this.textArea);
+  }
+
+  UNSAFE_componentWillReceiveProps(newProps) {
+    this.setState({ task: newProps.task, isChecked: newProps.task.completed });
+
+    // Wait till after render
+    setTimeout(() => {
+      this.resizeTextArea(this.textArea);
+    }, 1);
+  }
+
+  toggleCheckboxChange = () => {
+    const { handleCheckboxChange } = this.props;
+
+    this.setState(({ isChecked }) => ({
+      isChecked: !isChecked
+    }));
+
+    handleCheckboxChange(this.props.task);
+  }
+
+  onTextChange = (event) => {
+    const text = event.target.value;
+    this.props.task.setContentString(text);
+    this.props.handleTextChange(this.props.task, text);
+
+    this.forceUpdate();
+  }
+
+  onKeyUp = (event) => {
+    // Delete task if empty and enter pressed
+    if (event.keyCode == 13) {
+      if (this.props.task.isEmpty()) {
+        this.props.deleteTask(this.props.task);
+        event.preventDefault();
+      }
+    }
+    const element = event.target;
+    this.resizeTextArea(element);
+  }
+
+  onKeyPress = (event) => {
+    if (event.key == 'Enter') {
+      // We want to disable any action on enter, since newlines are reserved
+      // and are how tasks are delimitted.
+      event.preventDefault();
+    }
+  }
+
+  resizeTextArea(textarea) {
+    // set to 1 first to reset scroll height in case it shrunk
+    textarea.style.height = '1px';
+    textarea.style.height = (textarea.scrollHeight)+'px';
+  }
+
+  render() {
+    const { isChecked } = this.state;
+    const { task, spellcheckEnabled } = this.props;
+
+    const classes = `task ${task.completed ? 'completed' : ''}`;
+    return (
+      <div className={classes}>
+
+        <label className="checkbox-container">
+          <input
+            type="checkbox"
+            value={task.content}
+            checked={isChecked}
+            onChange={this.toggleCheckboxChange}
+            className="checkbox"
+            spellCheck={spellcheckEnabled}
+          />
+          <span className="checkmark"></span>
+        </label>
+
+        <textarea
+          ref={(textarea) => {this.textArea = textarea;}}
+          value={task.content}
+          onChange={this.onTextChange}
+          onKeyUp={this.onKeyUp}
+          onKeyPress={this.onKeyPress}
+          type="text"
+          dir="auto"
+          className='task-input-textarea'
+          spellCheck={spellcheckEnabled}
+        />
+      </div>
+    );
+  }
+}
+
+TaskRow.propTypes = {
+  task: PropTypes.object.isRequired,
+  handleCheckboxChange: PropTypes.func.isRequired,
+  handleTextChange: PropTypes.func.isRequired,
+  deleteTask: PropTypes.func.isRequired,
+  spellcheckEnabled: PropTypes.bool.isRequired
+};
+
+export default TaskRow;

package/app/components/Tasks.js

@@ -0,0 +1,197 @@
+import React from 'react';
+import TasksManager from '@Lib/tasksManager';
+import TaskRow from '@Components/TaskRow';
+import CreateTask from '@Components/CreateTask';
+import Sortable from 'sortablejs';
+
+export default class Tasks extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = { unsavedTask: '', openTasks: [], completedTasks: [] };
+    TasksManager.get().setDataChangeHandler(() => {
+      // We need TasksManager.get().isMobile() to be defined, and this handler is called once on bridge ready.
+      this.initiateSorting();
+      this.updateTasks();
+    });
+
+    TasksManager.get().setOnReady(() => {
+      let platform = TasksManager.get().getPlatform();
+      // add platform class to main <html> element
+      const root = document.documentElement;
+      root.className += platform;
+      this.setState({ ready: true });
+    });
+  }
+
+  componentDidMount() {
+    TasksManager.get().initiateBridge();
+    this.updateTasks();
+  }
+
+  initiateSorting() {
+    if (this.didInitiateSorting) {
+      return;
+    }
+    this.didInitiateSorting = true;
+
+    let properties = {
+      delay: 100, // time in milliseconds to define when the sorting should start
+      delayOnTouchOnly: true, // only delay if user is using touch
+      draggable: '.task',
+      dragClass: 'task-dragging',
+      handle: '.checkbox-container',
+      onEnd: this.taskCompletedDragging
+    };
+
+    properties['name'] = 'open-tasks';
+    Sortable.create(document.getElementById('open-tasks'), properties);
+
+    properties['name'] = 'completed-tasks';
+    Sortable.create(document.getElementById('completed-tasks'), properties);
+  }
+
+  updateTasks() {
+    this.setState(TasksManager.get().splitTasks());
+  }
+
+  deleteTask = (task) => {
+    TasksManager.get().deleteTask(task);
+    this.updateTasks();
+  }
+
+  toggleTaskStatus = (task) => {
+    task.toggleStatus();
+    if (!task.completed) {
+      TasksManager.get().moveTaskToTop(task);
+    }
+
+    setTimeout(() => {
+      // Allow UI to show checkmark before transferring to other list
+      this.taskStatusUpdated();
+    }, 300);
+  }
+
+  handleTaskTextChange = () => {
+    TasksManager.get().save();
+  }
+
+  taskStatusUpdated() {
+    this.updateTasks();
+    TasksManager.get().save();
+  }
+
+  taskAtIndex(list, relativeIndex) {
+    if (list == 0) {
+      return this.state.openTasks[relativeIndex];
+    } else {
+      return this.state.completedTasks[relativeIndex];
+    }
+  }
+
+  taskCompletedDragging = (evt) => {
+    const isSourceOpen =  evt.from.id == 'open-tasks';
+    const isDestinationCompleted = evt.to.id == 'completed-tasks';
+    const isDestinationOpen = !isDestinationCompleted;
+    const fromIndex = evt.oldIndex;
+    const toIndex = evt.newIndex;
+
+    const fromTask = this.taskAtIndex(isSourceOpen ? 0 : 1, fromIndex);
+    const toTask = this.taskAtIndex(isDestinationOpen ? 0 : 1, toIndex);
+
+    TasksManager.get().changeTaskPosition(fromTask, toTask);
+    if (isDestinationCompleted) {
+      fromTask.markCompleted();
+    } else {
+      fromTask.markOpen();
+    }
+
+    this.taskStatusUpdated();
+  }
+
+  createTask = (rawString) => {
+    TasksManager.get().setUnsavedTask('');
+    let task = TasksManager.get().createTask(rawString);
+    TasksManager.get().addTask(task);
+    this.updateTasks();
+  }
+
+  saveUnsavedTask = (rawString) => {
+    // save current entry to task list that has not been officially saved by pressing 'enter' yet
+    TasksManager.get().setUnsavedTask(rawString);
+    TasksManager.get().save();
+    this.updateTasks();
+  }
+
+  onReopenCompleted = () => {
+    if (confirm('Are you sure you want to reopen completed tasks?')) {
+      TasksManager.get().reopenCompleted();
+      this.updateTasks();
+    }
+  }
+
+  onDeleteCompleted = () => {
+    if (confirm('Are you sure you want to delete completed tasks?')) {
+      TasksManager.get().deleteCompleted();
+      this.updateTasks();
+    }
+  }
+
+  taskRowForTask(task) {
+    return (
+      <TaskRow
+        task={task}
+        handleCheckboxChange={this.toggleTaskStatus}
+        handleTextChange={this.handleTaskTextChange}
+        deleteTask={this.deleteTask}
+        key={TasksManager.get().keyForTask(task)}
+        spellcheckEnabled={TasksManager.get().spellcheckEnabled}
+      />
+    );
+  }
+
+  render() {
+    const { unsavedTask, openTasks, completedTasks } = this.state;
+
+    return (
+      <>
+
+        {this.state.ready &&
+          <div className='task-input'>
+            <CreateTask 
+              onSubmit={this.createTask}
+              onUpdate={this.saveUnsavedTask}
+              unsavedTask={unsavedTask}
+            />
+          </div>
+        }
+
+        <div className='task-section'>
+          <h3>Open Tasks</h3>
+          <div id="open-tasks">
+            {openTasks.map((task, index) => {
+              return this.taskRowForTask(task, index);
+            })}
+          </div>
+        </div>
+
+        <div className='task-section'>
+          <h3>Completed Tasks</h3>
+          <div id="completed-tasks">
+            {completedTasks.map((task, index) => {
+              return this.taskRowForTask(task, index);
+            })}
+          </div>
+
+          {completedTasks.length > 0 &&
+            <div>
+              <a className="clear-button" onClick={this.onReopenCompleted}>Reopen Completed</a>
+              <a className="clear-button" onClick={this.onDeleteCompleted}>Delete Completed</a>
+            </div>
+          }
+        </div>
+
+      </>
+    );
+  }
+}

package/app/lib/tasksManager.js

@@ -0,0 +1,249 @@
+import Task from '@Models/Task';
+import ComponentRelay from '@standardnotes/component-relay';
+
+const TaskDelimitter = '\n';
+
+export default class TasksManager {
+  spellcheckEnabled = true
+
+  /* Singleton */
+  static instance = null;
+  static get() {
+    if (this.instance === null) { 
+      this.instance = new TasksManager();
+    }
+    return this.instance;
+  }
+
+  initiateBridge() {
+    const permissions = [
+      {
+        name: 'stream-context-item'
+      }
+    ];
+
+    this.componentRelay = new ComponentRelay({
+      targetWindow: window,
+      permissions,
+      onReady: () => {
+        this.onReady && this.onReady();
+      }
+    });
+
+    this.componentRelay.streamContextItem((note) => {
+      this.note = note;
+
+      if (note.isMetadataUpdate) {
+        return;
+      }
+
+      this.dataString = note.content.text;
+      this.unsavedTask = note.content.unsavedTask;
+      this.reloadData();
+      this.dataChangeHandler && this.dataChangeHandler(this.tasks);
+      this.spellcheckEnabled = JSON.stringify(note.content.spellcheck);
+    });
+  }
+
+  getPlatform() {
+    return this.componentRelay.platform;
+  }
+
+  isMobile() {
+    return this.componentRelay && this.componentRelay.isRunningInMobileApplication();
+  }
+
+  get showTutorial() {
+    const showTutorial = this.componentRelay.getComponentDataValueForKey('showTutorial');
+    return showTutorial === undefined;
+  }
+
+  setOnReady(onReady) {
+    this.onReady = onReady;
+  }
+
+  setDataChangeHandler(handler) {
+    this.dataChangeHandler = handler;
+  }
+
+  parseRawTasksString(string) {
+    if (!string) {string = '';}
+    const allTasks = string.split(TaskDelimitter);
+    return allTasks.filter((s) => {return s.replace(/ /g, '').length > 0;}).map((rawString) => {
+      return this.createTask(rawString);
+    });
+  }
+
+  keyForTask(task) {
+    return this.tasks.indexOf(task) + task.rawString;
+  }
+
+  reloadData() {
+    this.tasks = this.parseRawTasksString(this.dataString);
+  }
+
+  getTasks() {
+    if (!this.tasks) {
+      this.reloadData();
+    }
+    return this.tasks;
+  }
+
+  createTask(rawString) {
+    return new Task(rawString);
+  }
+
+  addTask(task) {
+    this.tasks.unshift(task);
+    this.save();
+    this.reloadData();
+  }
+
+  setUnsavedTask(text) {
+    this.unsavedTask = text;
+  }
+
+  completedTasks() {
+    return this.tasks.filter((task) => task.completed == true);
+  }
+
+  openTasks(tasks) {
+    tasks.forEach(task => {
+      task.markOpen();
+    });
+
+    this.tasks = this.categorizedTasks.openTasks.concat(tasks);
+  }
+
+  removeTasks(tasks) {
+    this.tasks = this.tasks.filter((task) => !tasks.includes(task));
+  }
+
+  // Splits into completed and non completed piles, and organizes them into an ordered array
+  splitTasks() {
+    let tasks = this.getTasks();
+    const openTasks = [], completedTasks = [];
+    tasks.forEach((task) => {
+      if (task.completed) {
+        completedTasks.push(task);
+      } else {
+        openTasks.push(task);
+      }
+    });
+
+    this.tasks = openTasks.concat(completedTasks);
+    this.categorizedTasks = {
+      unsavedTask: this.unsavedTask,
+      openTasks,
+      completedTasks
+    };
+
+    return this.categorizedTasks;
+  }
+
+  moveTaskToTop(task) {
+    this.tasks.splice(this.tasks.indexOf(task), 1);
+    this.tasks.unshift(task);
+  }
+
+  changeTaskPosition(task, taskOccupyingTargetLocation) {
+    const from = this.tasks.indexOf(task);
+    const to = this.tasks.indexOf(taskOccupyingTargetLocation);
+
+    this.tasks = this.tasks.move(from, to);
+  }
+
+  reopenCompleted() {
+    this.openTasks(this.completedTasks());
+    this.save();
+  }
+
+  deleteCompleted() {
+    this.removeTasks(this.completedTasks());
+    this.save();
+  }
+
+  deleteTask(task) {
+    this.removeTasks([task]);
+    this.save();
+  }
+
+  buildHtmlPreview() {
+    const { openTasks, completedTasks } = this.categorizedTasks;
+    const totalLength = openTasks.length + completedTasks.length;
+
+    const taskPreviewLimit = 3;
+    const tasksToPreview = Math.min(openTasks.length, taskPreviewLimit);
+
+    let html = '<div>';
+    html += `<div style="margin-top: 8px;"><strong>${completedTasks.length}/${totalLength} tasks completed</strong></div>`;
+    html += `<progress max="100" style="margin-top: 10px; width: 100%;" value="${(completedTasks.length/totalLength) * 100}"></progress>`;
+
+    if (tasksToPreview > 0) {
+      html += '<ul style=\'padding-left: 19px; margin-top: 10px;\'>';
+      for (let i = 0; i < tasksToPreview; i++) {
+        const task = openTasks[i];
+        html += `<li style='margin-bottom: 6px;'>${task.content}</li>`;
+      }
+      html += '</ul>';
+
+      if (openTasks.length > tasksToPreview) {
+        const diff = openTasks.length - tasksToPreview;
+        const noun = diff == 1 ? 'task' : 'tasks';
+        html += `<div><strong>And ${diff} other open ${noun}.</strong></div>`;
+      }
+    }
+
+    html += '</div>';
+
+    return html;
+  }
+
+  buildPlainPreview() {
+    const { openTasks, completedTasks } = this.categorizedTasks;
+    const totalLength = openTasks.length + completedTasks.length;
+
+    return `${completedTasks.length}/${totalLength} tasks completed.`;
+  }
+
+  save() {
+    this.dataString = this.tasks.map((task) => task.rawString).join(TaskDelimitter);
+
+    if (this.note) {
+      // Be sure to capture this object as a variable, as this.note may be reassigned in `streamContextItem`, so by the time
+      // you modify it in the presave block, it may not be the same object anymore, so the presave values will not be applied to
+      // the right object, and it will save incorrectly.
+      let note = this.note;
+      this.componentRelay.saveItemWithPresave(note, () => {
+        // required to build dynamic previews
+        this.splitTasks();
+        note.content.text = this.dataString;
+        note.content.unsavedTask = this.unsavedTask;
+        note.content.preview_html = this.buildHtmlPreview();
+        note.content.preview_plain = this.buildPlainPreview();
+      });
+
+      if (this.showTutorial) {
+        this.componentRelay.setComponentDataValueForKey('showTutorial', false);
+      }
+    }
+  }
+
+}
+
+Array.prototype.move = function (old_index, new_index) {
+  while (old_index < 0) {
+    old_index += this.length;
+  }
+  while (new_index < 0) {
+    new_index += this.length;
+  }
+  if (new_index >= this.length) {
+    let k = new_index - this.length;
+    while ((k--) + 1) {
+      this.push(undefined);
+    }
+  }
+  this.splice(new_index, 0, this.splice(old_index, 1)[0]);
+  return this; // for testing purposes
+};

package/app/main.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Tasks from '@Components/Tasks';
+
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div className="sn-component">
+        <Tasks />
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(
+  <App />,
+  document.body.appendChild(document.createElement('div'))
+);

package/app/models/Task.js

@@ -0,0 +1,58 @@
+export default class Task {
+
+  static OpenPrefix      = '- [ ] ';
+  static AllowedPrefixes = /^- \[x\] /i;
+  static CompletedPrefix = '- [x] ';
+
+  constructor(rawString) {
+    this.rawString = rawString;
+
+    // allow both capital and lowercase X on completed when parsing
+    this.completed = Task.AllowedPrefixes.test(rawString);
+
+    if (!this.completed && !rawString.startsWith(Task.OpenPrefix)) {
+      // This is a text being created from user input, prepend open prefix
+      this.rawString = Task.OpenPrefix + this.rawString;
+    }
+  }
+
+  get content() {
+    return this.rawString.replace(Task.OpenPrefix, '').replace(Task.AllowedPrefixes, '');
+  }
+
+  isEmpty() {
+    return this.content.replace(/ /g, '').length == 0;
+  }
+
+  toggleStatus() {
+    this.completed = !this.completed;
+    this.updateRawString();
+  }
+
+  markCompleted() {
+    this.completed = true;
+    this.updateRawString();
+  }
+
+  markOpen() {
+    this.completed = false;
+    this.updateRawString();
+  }
+
+  setContentString(string) {
+    this.rawString = string;
+    if (this.completed) {
+      this.rawString = Task.CompletedPrefix + this.rawString;
+    } else {
+      this.rawString = Task.OpenPrefix + this.rawString;
+    }
+  }
+
+  updateRawString() {
+    if (this.completed) {
+      this.rawString = this.rawString.replace(Task.OpenPrefix, Task.CompletedPrefix);
+    } else {
+      this.rawString = this.rawString.replace(Task.AllowedPrefixes, Task.OpenPrefix);
+    }
+  }
+}