Added bold/italic/strikethrough support

Author: fabiospampinato

.todo

@@ -2,6 +2,6 @@
 ☐ Make a boilerplate out of this project (+React Router +Redux)
 ☐ Add automatic `Check for Updates...`
 ☐ Add `Print...` support
-☐ Mark (Bold, Italic, Strikethrough etc...)
-  ☐ http://codemirror.net/doc/manual.html#markText
-  ☐ https://gist.github.com/tovic/f1f21602e6b682ad78d6140f505e14f3
+☐ Font: support for nested styles (_foo *nested* bar_)
+☐ Font: toggle should work like Svelto.Editor's implementation
+☐ Multi-cursor is broken

README.md

@@ -12,6 +12,8 @@ Autosaving sticky note with support for multiple notes, find/replace, programmer
 - Supports multiple notes without needing multiple windows
 - Auto-saves your notes
 - To-Do functionalities built-in
+- Links support
+- Bold/italic/strikethrough support
 - Multiple cursors
 - Find and Replace
 - Programmers shortcuts
@@ -33,6 +35,9 @@ Autosaving sticky note with support for multiple notes, find/replace, programmer
 - <kbd>Cmd+Enter</kbd> - Toggle a todo checkbox
 - <kbd>Alt+D</kbd> - Toggle a todo check mark
 - <kbd>Alt+C</kbd> - Toggle a todo cancel mark
+- <kbd>Cmd+B</kbd> - Toggle bold
+- <kbd>Cmd+I</kbd> - Toggle italic
+- <kbd>Cmd+S</kbd> - Toggle strikethrough
 - <kbd>Cmd+1/9</kbd> - Select the 1st/9th note
 - <kbd>Alt+Cmd+Left</kbd> - Select the previous note
 - <kbd>Alt+Cmd+Left</kbd> - Select the next note

package.json

@@ -1,7 +1,7 @@
 {
   "name": "noty",
   "productName": "Noty",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Autosaving sticky note with support for multiple notes, find/replace, programmers shortcuts and more.",
   "main": "dist/main.js",
   "scripts": {

src/main/utils.ts

@@ -43,7 +43,7 @@ const Utils = {
         note: app.getName (),
         notes: [{
           title: app.getName (),
-          content: 'Welcome to Noty\n\nSince we are using the FiraCode font you can type many glyphs like: -> ->> => ==> ~> ~~> ~~> |> <| <>\n\nWe support To-Do lists by default:\n  ✔ Read the readme\n  ☐ Star the repository\n  ☐ Share with friends\n\nAnd multiple notes, try clicking the title to switch note.'
+          content: 'Welcome to Noty\n\nSince we are using the FiraCode font you can type many glyphs like: -> ->> => ==> ~~> <-< <=< |> <| <>\n\nWe support To-Do lists by default:\n  ✔ Read the readme\n  ☐ Star the repository\n  ☐ Share with friends\n\nLinks: www.example.com\n\nFont styles: *Bold*, _Italic_ and ~Strikethrough~\n\nAnd multiple notes, try clicking the title to switch note.'
         }, {
           title: 'Another note',
           content: 'Pretty cool, huh?'
@@ -139,6 +139,26 @@ const Utils = {
           }
         ]
       },
+      {
+        label: 'Font',
+        submenu: [
+          {
+            label: 'Bold',
+            accelerator: 'cmd+b',
+            click: () => win.webContents.send ( 'note-font-bold' )
+          },
+          {
+            label: 'Italic',
+            accelerator: 'cmd+i',
+            click: () => win.webContents.send ( 'note-font-italic' )
+          },
+          {
+            label: 'Strikethrough',
+            accelerator: 'cmd+s',
+            click: () => win.webContents.send ( 'note-font-strikethrough' )
+          }
+        ]
+      },
       {
         label: 'View',
         submenu: [

src/ui/app/index.tsx

@@ -5,6 +5,7 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import {remote, ipcRenderer as ipc} from 'electron';
 import Code from 'ui/code';
+import Font from 'ui/code/font';
 import Titlebar from 'ui/titlebar';
 import 'ui/template/index.scss';
 import './index.html';
@@ -42,6 +43,9 @@ class App extends React.Component<any, any> {
     ipc.on ( 'note-select', this.noteSelect.bind ( this ) );
     ipc.on ( 'note-select-previous', this.noteSelectPrevious.bind ( this ) );
     ipc.on ( 'note-select-right', this.noteSelectNext.bind ( this ) );
+    ipc.on ( 'note-font-bold', this.noteFontBold.bind ( this ) );
+    ipc.on ( 'note-font-italic', this.noteFontItalic.bind ( this ) );
+    ipc.on ( 'note-font-strikethrough', this.noteFontStrikethrough.bind ( this ) );
     ipc.on ( 'app-focus', () => this.changeFocused ( true ) );
     ipc.on ( 'app-blur', () => this.changeFocused ( false ) );
 
@@ -55,6 +59,9 @@ class App extends React.Component<any, any> {
     ipc.removeAllListeners ( 'note-select' );
     ipc.removeAllListeners ( 'note-select-previous' );
     ipc.removeAllListeners ( 'note-select-right' );
+    ipc.removeAllListeners ( 'note-font-bold' );
+    ipc.removeAllListeners ( 'note-font-italic' );
+    ipc.removeAllListeners ( 'note-font-strikethrough' );
     ipc.removeAllListeners ( 'app-focus' );
     ipc.removeAllListeners ( 'app-blur' );
 
@@ -208,6 +215,24 @@ class App extends React.Component<any, any> {
 
   }
 
+  noteFontBold () {
+
+    Font.toggleBold ( this.editor );
+
+  }
+
+  noteFontItalic () {
+
+    Font.toggleItalic ( this.editor );
+
+  }
+
+  noteFontStrikethrough () {
+
+    Font.toggleStrikethrough ( this.editor );
+
+  }
+
   /* CHANGE */
 
   changeFocused ( focused ) {

src/ui/code/font.ts

@@ -0,0 +1,74 @@
+
+/* IMPORT */
+
+import * as _ from 'lodash';
+
+/* FONT */
+
+const Font = {
+
+  boldRe: /(\*)(.+)(\*)/,
+  italicRe: /(_)(.+)(_)/,
+  strikethroughRe: /(~)(.+)(~)/,
+  boldItalicRe: /(\*_)(.+)(_\*)|(_\*)(.+)(\*_)/,
+  boldStrikethroughRe: /(\*~)(.+)(~\*)|(~\*)(.+)(\*~)/,
+  italicStrikethroughRe: /(_~)(.+)(~_)|(~_)(.+)(_~)/,
+  boldItalicStrikethroughRe: /(\*_~)(.+)(~_\*)|(\*~_)(.+)(_~\*)|(_\*~)(.+)(~\*_)|(_~\*)(.+)(\*~_)|(~_\*)(.+)(\*_~)|(~\*_)(.+)(_\*~)/,
+
+  getTokens () {
+
+    const repeat = ( arr, times ) => _.concat ( [], ..._.range ( times ).map ( () => _.cloneDeep ( arr ) ) ),
+          makeTokens = ( classNames, times = 1 ) => {
+            const tokens = [`${classNames} font-token`, classNames, `${classNames} font-token`];
+            return repeat ( tokens, times );
+          };
+
+    return {
+      start: [
+        { regex: Font.boldItalicStrikethroughRe, token: makeTokens ( 'bold italic strikethrough', 6 ) },
+        { regex: Font.boldItalicRe, token: makeTokens ( 'bold italic', 2 ) },
+        { regex: Font.boldStrikethroughRe, token: makeTokens ( 'bold strikethrough', 2 ) },
+        { regex: Font.italicStrikethroughRe, token: makeTokens ( 'italic strikethrough', 2 ) },
+        { regex: Font.boldRe, token: makeTokens ( 'bold' ) },
+        { regex: Font.italicRe, token: makeTokens ( 'italic' ) },
+        { regex: Font.strikethroughRe, token: makeTokens ( 'strikethrough' ) }
+      ]
+    };
+
+  },
+
+  toggleToken ( cm, prefix, suffix = prefix, content = '' ) {
+
+    cm.doc.replaceSelections ( cm.doc.getSelections ().map ( selection => {
+
+      const hasToken = selection.slice ( 0, prefix.length ) === prefix && selection.slice ( - suffix.length ) === suffix;
+
+      return hasToken ? selection.slice ( prefix.length, - suffix.length ) : `${prefix}${selection || content}${suffix}`;
+
+    }), 'around' );
+
+  },
+
+  toggleBold ( cm ) {
+
+    Font.toggleToken ( cm, '*', '*', 'Bold' );
+
+  },
+
+  toggleItalic ( cm ) {
+
+    Font.toggleToken ( cm, '_', '_', 'Italic' );
+
+  },
+
+  toggleStrikethrough ( cm ) {
+
+    Font.toggleToken ( cm, '~', '~', 'Strikethrough' );
+
+  }
+
+};
+
+/* EXPORT */
+
+export default Font;

src/ui/code/index.tsx

@@ -8,6 +8,7 @@ import './tokens';
 import * as React from 'react';
 import CodeMirror from 'react-codemirror2';
 import addSelection from './add_selection';
+import Font from './font';
 import Todo from './todo';
 
 /* OPTIONS */
@@ -39,6 +40,9 @@ const options = {
     'Cmd-Enter': Todo.toggleCheckbox,
     'Alt-D': Todo.toggleCheckmark,
     'Alt-C': Todo.toggleCancelmark,
+    'Cmd-B': Font.toggleBold,
+    'Cmd-I': Font.toggleItalic,
+    'Cmd-S': Font.toggleStrikethrough,
     'F2': false,
     'Cmd-M': false,
     'Cmd-LeftClick': false

src/ui/code/link.ts

@@ -0,0 +1,45 @@
+
+/* IMPORT */
+
+import * as $ from 'jquery';
+import * as open from 'open';
+
+/* LINK */
+
+const Link = {
+
+  re: /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9]\.[^\s]{2,})/,
+
+  getTokens () {
+
+    return {
+      start: [
+        { regex: Link.re, token: 'link' }
+      ]
+    };
+
+  },
+
+  onClick () {
+
+    $(document).off ( 'click' );
+    $(document).on ( 'click', '.cm-link', event => {
+      if ( !event.metaKey ) return;
+      let url = $(event.target).text ();
+      if ( !/^https?:\/\//i.test ( url ) ) {
+        url = `http://${url}`;
+      }
+      open ( url );
+    });
+
+  }
+
+}
+
+/* INIT */
+
+Link.onClick ();
+
+/* EXPORT */
+
+export default Link;

src/ui/code/tokens.ts

@@ -2,31 +2,13 @@
 /* IMPORT */
 
 import '../../../node_modules/codemirror/addon/mode/simple.js';
-import * as $ from 'jquery';
 import * as CodeMirror from 'codemirror';
-import * as open from 'open';
+import merge from 'conf-merge';
+import Link from './link';
+import Font from './font';
 
 /* TOKENS */
 
-const linkRe = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9]\.[^\s]{2,})/;
+const mode = merge ( {}, Link.getTokens (), Font.getTokens () );
 
-CodeMirror.defineSimpleMode ( 'noty-tokens', {
-  start: [
-    {
-      regex: linkRe,
-      token: 'link'
-    }
-  ]
-});
-
-/* HANDLERS */
-
-$(document).off ( 'click' );
-$(document).on ( 'click', '.cm-link', event => {
-  if ( !event.metaKey ) return;
-  let url = $(event.target).text ();
-  if ( !/^https?:\/\//i.test ( url ) ) {
-    url = `http://${url}`;
-  }
-  open ( url );
-});
+CodeMirror.defineSimpleMode ( 'custom-mode', mode );

src/ui/template/codemirror.scss

@@ -106,6 +106,22 @@
 
     }
 
+    .cm-bold {
+      font-weight: bold;
+    }
+
+    .cm-italic {
+      font-style: italic;
+    }
+
+    .cm-strikethrough {
+      text-decoration: line-through;
+    }
+
+    .cm-font-token {
+      opacity: $font-token-opacity;
+    }
+
   }
 
 }