Added note text only mode

src/components/note/Note.js

@@ -149,7 +149,7 @@ function Note({
       onClick={handleClick}
       onTap={handleClick}
       width={noteWidth}
-      height={noteHeight}
+      height={note.textOnly ? undefined : noteHeight}
       offsetX={noteWidth / 2}
       offsetY={noteHeight / 2}
       draggable={draggable}
@@ -162,19 +162,23 @@ function Note({
       onTouchEnd={handlePointerUp}
       opacity={note.visible ? 1.0 : 0.5}
     >
-      <Rect
-        width={noteWidth}
-        height={noteHeight}
-        shadowColor="rgba(0, 0, 0, 0.16)"
-        shadowOffset={{ x: 0, y: 3 }}
-        shadowBlur={6}
-        cornerRadius={0.25}
-        fill={colors[note.color]}
-      />
+      {!note.textOnly && (
+        <Rect
+          width={noteWidth}
+          height={noteHeight}
+          shadowColor="rgba(0, 0, 0, 0.16)"
+          shadowOffset={{ x: 0, y: 3 }}
+          shadowBlur={6}
+          cornerRadius={0.25}
+          fill={colors[note.color]}
+        />
+      )}
       <Text
         text={note.text}
         fill={
-          note.color === "black" || note.color === "darkGray"
+          note.textOnly
+            ? colors[note.color]
+            : note.color === "black" || note.color === "darkGray"
             ? "white"
             : "black"
         }
@@ -184,7 +188,7 @@ function Note({
         fontSize={fontSize}
         wrap="word"
         width={noteWidth}
-        height={noteHeight}
+        height={note.textOnly ? undefined : noteHeight}
       />
       {/* Use an invisible text block to work out text sizing */}
       <Text visible={false} ref={textRef} text={note.text} wrap="none" />

src/components/note/NoteMenu.js

@@ -13,6 +13,8 @@ import LockIcon from "../../icons/TokenLockIcon";
 import UnlockIcon from "../../icons/TokenUnlockIcon";
 import ShowIcon from "../../icons/TokenShowIcon";
 import HideIcon from "../../icons/TokenHideIcon";
+import NoteIcon from "../../icons/NoteToolIcon";
+import TextIcon from "../../icons/NoteTextIcon";
 
 import AuthContext from "../../contexts/AuthContext";
 
@@ -75,6 +77,10 @@ function NoteMenu({
     note && onNoteChange({ ...note, locked: !note.locked });
   }
 
+  function handleModeChange() {
+    note && onNoteChange({ ...note, textOnly: !note.textOnly });
+  }
+
   function handleModalContent(node) {
     if (node) {
       // Focus input
@@ -209,6 +215,13 @@ function NoteMenu({
             >
               {note && note.locked ? <LockIcon /> : <UnlockIcon />}
             </IconButton>
+            <IconButton
+              onClick={handleModeChange}
+              title={note && note.textOnly ? "Note Mode" : "Text Mode"}
+              aria-label={note && note.textOnly ? "Note Mode" : "Text Mode"}
+            >
+              {note && note.textOnly ? <TextIcon /> : <NoteIcon />}
+            </IconButton>
           </Flex>
         )}
       </Box>