shortcut: shift + x = toggle strikethrough and fade text

diff --git a/public/assets/style.css b/public/assets/style.css
index 4493c65ad44bfe231be1d68706633ae59a7211d9..847e6c1efbf97398279fb94be85f45307a813176 100644 (file)
--- a/public/assets/style.css
+++ b/public/assets/style.css
@@ -70,6 +70,10 @@ body {
   color: #000;
   background-color: #fff;
 }
+.strikethrough, .strikethrough .node {
+  text-decoration: line-through;
+  color: #808080;
+}
 
 
 footer {

diff --git a/src/client.ts b/src/client.ts
index c02d2b78bcd67e6bf867a9aaaba548534a41bd28..9b4c5b495839b0f24574f34f1c7cc14c198e1d22 100644 (file)
--- a/src/client.ts
+++ b/src/client.ts
@@ -192,6 +192,14 @@ keyboardJS.withContext('navigation', () => {
     keyboardJS.setContext('editing');
   });
 
+  keyboardJS.bind('shift + x', e => {
+    e.preventDefault();
+    // toggle "strikethrough" of node
+    cursor.get().classList.toggle('strikethrough');
+    outline.data.contentNodes[cursor.getIdOfNode()].strikethrough = cursor.get().classList.contains('strikethrough');
+    save();
+  });
+
   keyboardJS.bind('tab', e => {
     e.preventDefault();
 

diff --git a/src/outline.ts b/src/outline.ts
index 9a2d2c037248f541380091f3378ccefb908777b1..ea22d23b161feaf23d9c99dd9c32e7c59789d1d1 100644 (file)
--- a/src/outline.ts
+++ b/src/outline.ts
@@ -21,6 +21,7 @@ export interface OutlineNode {
   created: number;
   type: 'text',
   content: string,
+  strikethrough: boolean;
 };
 
 export class Outline {
@@ -179,7 +180,8 @@ export class Outline {
       id: uuid(),
       created: Date.now(),
       type: 'text',
-      content: '---'
+      content: '---',
+      strikethrough: false
     };
 
     this.data.contentNodes[outlineNode.id] = outlineNode;
@@ -209,7 +211,8 @@ export class Outline {
       id: uuid(),
       created: Date.now(),
       type: 'text',
-      content: '---'
+      content: '---',
+      strikethrough: false
     };
 
     if(!nodeId) {
@@ -288,10 +291,13 @@ export class Outline {
       id: node.id,
       created: Date.now(),
       type: 'text',
-      content: ''
+      content: '',
+      strikethrough: false
     };
 
-    let html = `<div class="node ${collapse}" data-id="${node.id}" id="id-${node.id}">
+    const strikethrough = content.strikethrough ? 'strikethrough' : '';
+
+    let html = `<div class="node ${collapse} ${strikethrough}" data-id="${node.id}" id="id-${node.id}">
     <div class="nodeContent" data-type="${content.type}">
       ${this.renderContent(node.id)}
     </div>