chore: show super note placeholder, only on empty notes

standardnotes · Dec 12, 2023 · c6d3dae · c6d3dae
1 parent 7ce5bdf
commit c6d3dae
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 108 deletions.
diff --git a/packages/web/src/javascripts/Components/SuperEditor/BlocksEditor.tsx b/packages/web/src/javascripts/Components/SuperEditor/BlocksEditor.tsx
@@ -78,23 +78,29 @@ export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
   return (
     <>
       {!isMobile && <ToolbarPlugin />}
-      <RichTextPlugin
-        contentEditable={
-          <div id="blocks-editor" className="editor-scroller h-full min-h-0">
-            <div className="editor z-0 overflow-hidden" ref={onRef}>
-              <ContentEditable
-                id={SuperEditorContentId}
-                className={classNames('ContentEditable__root overflow-y-auto', className)}
-                spellCheck={spellcheck}
-                onScroll={onScroll}
-              />
-              <div className="search-highlight-container pointer-events-none absolute left-0 top-0 h-full w-full" />
+      <div className="relative min-h-0 flex-grow">
+        <RichTextPlugin
+          contentEditable={
+            <div id="blocks-editor" className="editor-scroller h-full min-h-0">
+              <div className="editor z-0 overflow-hidden" ref={onRef}>
+                <ContentEditable
+                  id={SuperEditorContentId}
+                  className={classNames('ContentEditable__root overflow-y-auto', className)}
+                  spellCheck={spellcheck}
+                  onScroll={onScroll}
+                />
+                <div className="search-highlight-container pointer-events-none absolute left-0 top-0 h-full w-full" />
+              </div>
             </div>
-          </div>
-        }
-        placeholder={null}
-        ErrorBoundary={LexicalErrorBoundary}
-      />
+          }
+          placeholder={
+            <div className="pointer-events-none absolute left-4 top-4 text-passive-1">
+              Type <span className="rounded bg-passive-4-opacity-variant p-0.5">/</span> for commands...
+            </div>
+          }
+          ErrorBoundary={LexicalErrorBoundary}
+        />
+      </div>
       {isMobile && <ToolbarPlugin />}
       <ListPlugin />
       <MarkdownShortcutPlugin transformers={MarkdownTransformers} />

diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/EmptyLinePlaceholderPlugin.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/EmptyLinePlaceholderPlugin.tsx