ContentEditable fixes

src/common/components/ContentEditable.tsx

@@ -98,7 +98,6 @@ export const ContentEditable = ({ value, onInput, ...props }: Props) => {
         <div
             ref={ref}
             contentEditable
-            style="white-space: pre"
             onKeyDown={handleKeyDown}
             onInput={onInput}
             {...props}

src/games/storywriter/assets/editor.module.css

@@ -3,16 +3,17 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-    overflow: hidden;
+    overflow-y: auto;
     background: var(--bg);
+    padding: 36px 0;
 }
 
 .editable {
     flex: 1;
     width: 100%;
-    height: 100%;
+    min-height: 100%;
     resize: none;
-    padding: 48px 72px;
+    padding: 0 72px;
     font-family: 'Georgia', serif;
     font-size: 17px;
     line-height: 1.9;
@@ -21,6 +22,9 @@
     border: none;
     outline: none;
     box-sizing: border-box;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
 
     &::placeholder {
         color: var(--text-muted);

src/games/storywriter/components/editor.tsx

@@ -12,7 +12,7 @@ export const Editor = () => {
     }
 
     const handleInput = (e: Event) => {
-        const text = (e.target as HTMLElement).textContent;
+        const text = (e.target as HTMLElement).textContent || '';
         dispatch({
             type: 'EDIT_STORY',
             id: currentStory.id,