⌨️ J-Editor / FEATURE: Typewriter Sounds! 🎵

packages/web/components/Dashboard/Header/Header.tsx

@@ -28,10 +28,6 @@ const Header: React.FC<Props> = ({ onMenuClick }) => {
       {showNotificationFeed && <NotificationFeed onClose={() => setShowNotificationFeed(false)} />}
       <style jsx>{`
         .header {
-          position: fixed;
-          top: 0;
-          left: 0;
-          right: 0;
           display: flex;
           justify-content: space-between;
           align-items: center;

packages/web/components/JournalyEditor/JournalyEditor.tsx

@@ -10,13 +10,9 @@ import PostBodyStyles from '@/components/PostBodyStyles'
 import Toolbar from './Toolbar'
 import RenderElement from './RenderElement'
 import RenderLeaf from './RenderLeaf'
-import {
-  withLinks,
-  withImages,
-  toggleMark,
-  options,
-  MarkType,
-} from './helpers'
+import { withLinks, withImages, toggleMark, options, MarkType } from './helpers'
+import usePlayPolyphonicSound from '@/hooks/usePlayPolyphonicSound'
+import useAutosavedState from '@/hooks/useAutosavedState'
 
 /**
  * The Journaly Rich Text Editor
@@ -33,6 +29,22 @@ const HOTKEYS: { [key in HotKey]: MarkType } = {
   'mod+u': 'underline',
 }
 
+const KEY_BLACK_LIST = new Set([
+  'Shift',
+  'Tab',
+  'Meta',
+  'Control',
+  'Alt',
+  'ArrowUp',
+  'ArrowLeft',
+  'ArrowDown',
+  'ArrowRight',
+  'PageUp',
+  'PageDown',
+  'Home',
+  'End',
+])
+
 type JournalyEditorProps = {
   value: Descendant[]
   setValue: (value: Descendant[]) => void
@@ -52,10 +64,7 @@ const JournalyEditor = ({
   const renderElement = useCallback((props) => <RenderElement {...props} />, [])
   const renderLeaf = useCallback((props) => <RenderLeaf {...props} />, [])
   const editor = useMemo(() => {
-    const withPlugins: ((ed: Editor) => Editor)[] = [
-      withHistory,
-      withLinks,
-    ]
+    const withPlugins: ((ed: Editor) => Editor)[] = [withHistory, withLinks]
 
     if (allowInlineImages) {
       withPlugins.push(withImages)
@@ -64,6 +73,27 @@ const JournalyEditor = ({
     return pipe(withReact(createEditor()), ...withPlugins)
   }, [])
 
+  const [shouldPlayTypewriterSounds, setShouldPlayTypewriterSounds] = useAutosavedState(false, {
+    key: 'shouldPlayTypewriterSounds',
+  })
+
+  const playTypewriterSound = usePlayPolyphonicSound('/static/sounds/typewriter-key-sound.wav', 3)
+  const playTypewriterReturnSound = usePlayPolyphonicSound(
+    '/static/sounds/typewriter-return-sound.wav',
+    1,
+  )
+
+  const handlePlayTypewriterSound = (e: React.KeyboardEvent) => {
+    if (shouldPlayTypewriterSounds) {
+      if (KEY_BLACK_LIST.has(e.key)) return
+      else if (e.key === 'Enter') {
+        playTypewriterReturnSound()
+      } else {
+        playTypewriterSound()
+      }
+    }
+  }
+
   useEffect(() => {
     ;(slateRef as React.MutableRefObject<Editor>).current = editor
   }, [editor])
@@ -76,7 +106,13 @@ const JournalyEditor = ({
     <div className="editor-wrapper">
       <div className="editor-container">
         <Slate editor={editor} value={value} onChange={(value) => setValue(value)}>
-          <Toolbar allowInlineImages={allowInlineImages} />
+          <Toolbar
+            allowInlineImages={allowInlineImages}
+            shouldPlayTypewriterSounds={shouldPlayTypewriterSounds}
+            onToggleShouldPlayTypewriterSounds={() =>
+              setShouldPlayTypewriterSounds(!shouldPlayTypewriterSounds)
+            }
+          />
           <EditablePlugins
             plugins={plugins}
             renderElement={[renderElement]}
@@ -85,15 +121,17 @@ const JournalyEditor = ({
             spellCheck
             onKeyDown={[
               (event: React.KeyboardEvent) => {
+                handlePlayTypewriterSound(event)
                 Object.entries(HOTKEYS).forEach(([hotkey, mark]) => {
                   // Convert React keyboard event to native keyboard event
-                  if (isHotkey(hotkey, (event as unknown) as KeyboardEvent)) {
+                  if (isHotkey(hotkey, event as unknown as KeyboardEvent)) {
                     event.preventDefault()
                     toggleMark(editor, mark)
                   }
                 })
               },
             ]}
+            onKeyDownDeps={[shouldPlayTypewriterSounds]}
             data-testid="post-body"
           />
         </Slate>
@@ -112,7 +150,7 @@ const JournalyEditor = ({
           min-height: 200px;
         }
 
-        .editor-container > :global([contenteditable="true"]) {
+        .editor-container > :global([contenteditable='true']) {
           flex: 1;
           padding-top: 15px;
         }

packages/web/components/JournalyEditor/Toolbar/BaseToolbarButton.tsx

@@ -21,7 +21,6 @@ const BaseToolbarButton = ({ onClick, active, children }: ButtonProps) => {
           height: 100%;
           padding: 1px;
           border: none;
-          margin-right: 10px;
           border-radius: 5px;
           background-color: ${theme.colors.gray800};
           cursor: pointer;