Add placeholders to code and markdown cells (#234)

* Add placeholders

* Hide placeholder when cell is clicked

* Add tests for placeholders

* Update test config

* Add snapshots

* Update snapshots and enforce no cursor blinking

* Update

* Fix typo, fix markdown editor placeholder test

* Align styles with figma

* Blur markdown before taking snapshot; update code placeholder snapshot

* Update snapshot

Author: krassowski

lite/jupyter-lite.json

@@ -51,7 +51,22 @@
       },
       "@jupyterlab/notebook-extension:tracker": {
         "autoStartDefaultKernel": true,
-        "windowingMode": "none"
+        "windowingMode": "none",
+        "codeCellConfig": {
+          "lineNumbers": false,
+          "lineWrap": false,
+          "placeholder": "This is a code cell. Add code here"
+        },
+        "markdownCellConfig": {
+          "lineNumbers": false,
+          "matchBrackets": false,
+          "placeholder": "This is a text cell. Add text here"
+        },
+        "rawCellConfig": {
+          "lineNumbers": false,
+          "matchBrackets": false,
+          "placeholder": "This is a raw cell. Add text here"
+        }
       },
       "@jupyterlab/application-extension:context-menu": {
         "disabled": true

src/index.ts

@@ -29,7 +29,8 @@ import {
 
 import { KERNEL_DISPLAY_NAMES, switchKernel } from './kernels';
 import { singleDocumentMode } from './single-mode';
-import { notebookFactoryPlugin } from './run-button';
+import { notebookFactoryPlugin } from './notebook-factory';
+import { placeholderPlugin } from './placeholders';
 
 /**
  * Generate a shareable URL for the currently active notebook.
@@ -599,5 +600,6 @@ export default [
   // competitions,
   customSidebar,
   // helpPlugin,
-  singleDocumentMode
+  singleDocumentMode,
+  placeholderPlugin
 ];

src/notebook-factory.ts

@@ -0,0 +1,60 @@
+import { JupyterFrontEnd, JupyterFrontEndPlugin } from '@jupyterlab/application';
+import { MarkdownCell } from '@jupyterlab/cells';
+import { IEditorServices } from '@jupyterlab/codeeditor';
+import { Notebook, NotebookPanel } from '@jupyterlab/notebook';
+import { EMPTY_MARKDOWN_PLACEHOLDER, MarkdownCellWithCustomPlaceholder } from './placeholders';
+import { JEInputPrompt } from './run-button';
+
+export namespace JENotebookContentFactory {
+  export interface IOptions extends Notebook.ContentFactory.IOptions {
+    app: JupyterFrontEnd;
+  }
+}
+
+export class JENotebookContentFactory extends Notebook.ContentFactory {
+  private _app: JupyterFrontEnd;
+
+  constructor(options: JENotebookContentFactory.IOptions) {
+    super(options);
+    this._app = options.app;
+  }
+
+  createInputPrompt(): JEInputPrompt {
+    return new JEInputPrompt(this._app);
+  }
+
+  createNotebook(options: Notebook.IOptions): Notebook {
+    return new Notebook(options);
+  }
+
+  createMarkdownCell(options: MarkdownCell.IOptions): MarkdownCell {
+    const cell = new MarkdownCellWithCustomPlaceholder({
+      ...options,
+      emptyPlaceholder: EMPTY_MARKDOWN_PLACEHOLDER
+    }).initializeState();
+    // Monkey patch until https://github.com/jupyterlab/jupyterlab/issues/17917 is solved
+    cell['_updateRenderedInput'] = cell['updateRenderedInput'];
+    return cell;
+  }
+}
+
+/**
+ * Plugin that provides the custom notebook factory.
+ */
+export const notebookFactoryPlugin: JupyterFrontEndPlugin<NotebookPanel.IContentFactory> = {
+  id: 'jupytereverywhere:notebook-factory',
+  description: 'Provides notebook cell factory with input prompts',
+  provides: NotebookPanel.IContentFactory,
+  requires: [IEditorServices],
+  autoStart: true,
+  activate: (app: JupyterFrontEnd, editorServices: IEditorServices) => {
+    const editorFactory = editorServices.factoryService.newInlineEditor;
+
+    const factory = new JENotebookContentFactory({
+      editorFactory,
+      app
+    });
+
+    return factory;
+  }
+};

src/placeholders.ts

@@ -0,0 +1,60 @@
+import { placeholder } from '@codemirror/view';
+import { JupyterFrontEnd, JupyterFrontEndPlugin } from '@jupyterlab/application';
+import { MarkdownCell } from '@jupyterlab/cells';
+import { EditorExtensionRegistry, IEditorExtensionRegistry } from '@jupyterlab/codemirror';
+import { MimeModel } from '@jupyterlab/rendermime';
+
+export const EMPTY_MARKDOWN_PLACEHOLDER = 'This is a text cell. Double-click to edit';
+
+export const placeholderPlugin: JupyterFrontEndPlugin<void> = {
+  id: '@jupyter-everywhere/codemirror-extension:placeholder',
+  autoStart: true,
+  requires: [IEditorExtensionRegistry],
+  activate: (app: JupyterFrontEnd, extensions: IEditorExtensionRegistry) => {
+    extensions.addExtension(
+      Object.freeze({
+        name: 'placeholder',
+        default: null,
+        factory: () =>
+          EditorExtensionRegistry.createConfigurableExtension((text: string | null) =>
+            text ? placeholder(text) : []
+          ),
+        schema: {
+          type: ['string', 'null'],
+          title: 'Placeholder',
+          description: 'Placeholder to show.'
+        }
+      })
+    );
+  }
+};
+
+export class MarkdownCellWithCustomPlaceholder extends MarkdownCell {
+  constructor(options: MarkdownCellWithCustomPlaceholder.IOptions) {
+    super(options);
+    this._emptyPlaceholder = options.emptyPlaceholder;
+  }
+  updateRenderedInput(): Promise<void> {
+    if (this.placeholder) {
+      return Promise.resolve();
+    }
+
+    const model = this.model;
+    const text = (model && model.sharedModel.getSource()) || this._emptyPlaceholder;
+    // Do not re-render if the text has not changed.
+    if (text !== this._previousText) {
+      const mimeModel = new MimeModel({ data: { 'text/markdown': text } });
+      this._previousText = text;
+      return this.renderer.renderModel(mimeModel);
+    }
+    return Promise.resolve();
+  }
+  private _previousText: string = '';
+  private _emptyPlaceholder: string;
+}
+
+namespace MarkdownCellWithCustomPlaceholder {
+  export interface IOptions extends MarkdownCell.IOptions {
+    emptyPlaceholder: string;
+  }
+}

src/run-button.ts

@@ -36,11 +36,9 @@
 // OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 // OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
-import { JupyterFrontEnd, JupyterFrontEndPlugin } from '@jupyterlab/application';
-import { IEditorServices } from '@jupyterlab/codeeditor';
+import { JupyterFrontEnd } from '@jupyterlab/application';
 import { ToolbarButton } from '@jupyterlab/ui-components';
 import { Widget, PanelLayout } from '@lumino/widgets';
-import { Notebook, NotebookPanel } from '@jupyterlab/notebook';
 import { EverywhereIcons } from './icons';
 
 const INPUT_PROMPT_CLASS = 'jp-InputPrompt';
@@ -113,47 +111,3 @@ export class JEInputPrompt extends Widget implements IInputPrompt {
     this._promptIndicator.executionCount = value;
   }
 }
-
-export namespace JENotebookContentFactory {
-  export interface IOptions extends Notebook.ContentFactory.IOptions {
-    app: JupyterFrontEnd;
-  }
-}
-
-export class JENotebookContentFactory extends Notebook.ContentFactory {
-  private _app: JupyterFrontEnd;
-
-  constructor(options: JENotebookContentFactory.IOptions) {
-    super(options);
-    this._app = options.app;
-  }
-
-  createInputPrompt(): JEInputPrompt {
-    return new JEInputPrompt(this._app);
-  }
-
-  createNotebook(options: Notebook.IOptions): Notebook {
-    return new Notebook(options);
-  }
-}
-
-/**
- * Plugin that provides the custom notebook factory with run buttons
- */
-export const notebookFactoryPlugin: JupyterFrontEndPlugin<NotebookPanel.IContentFactory> = {
-  id: 'jupytereverywhere:notebook-factory',
-  description: 'Provides notebook cell factory with input prompts',
-  provides: NotebookPanel.IContentFactory,
-  requires: [IEditorServices],
-  autoStart: true,
-  activate: (app: JupyterFrontEnd, editorServices: IEditorServices) => {
-    const editorFactory = editorServices.factoryService.newInlineEditor;
-
-    const factory = new JENotebookContentFactory({
-      editorFactory,
-      app
-    });
-
-    return factory;
-  }
-};

style/base.css

@@ -208,6 +208,16 @@ consistent with code cells */
   min-height: var(--je-cell-height);
 }
 
+.jp-mod-focused .cm-placeholder {
+  /* Hide placeholder when cell is clicked */
+  display: none;
+}
+
+.cm-editor .cm-placeholder {
+  color: #828282 !important;
+  font-weight: 600;
+}
+
 .jp-MarkdownCell .jp-RenderedHTMLCommon,
 .jp-MarkdownCell .jp-InputArea-editor {
   min-height: 32px;

ui-tests/inject-test-config.sh

@@ -1,5 +1,5 @@
 set -eux
 # Overwrite some settings to disable cursor blinking,
 # which causes inadvertent playwright snapshot failures
-cat jupyter-lite.json | jq '.["jupyter-config-data"].["settingsOverrides"] += {"@jupyterlab/codemirror-extension:plugin":{ "defaultConfig": { "cursorBlinkRate": 0, "lineNumbers": false } } }' > jupyter-lite.json.tmp
+cat jupyter-lite.json | jq '.["jupyter-config-data"].["settingsOverrides"] *= {"@jupyterlab/notebook-extension:tracker": { "codeCellConfig": { "cursorBlinkRate": 0 }, "markdownCellConfig": { "cursorBlinkRate": 0 }, "rawCellConfig": { "cursorBlinkRate": 0 } }, "@jupyterlab/codemirror-extension:plugin":{ "defaultConfig": { "cursorBlinkRate": 0, "lineNumbers": false } } }' > jupyter-lite.json.tmp
 mv jupyter-lite.json.tmp jupyter-lite.json

ui-tests/tests/jupytereverywhere.spec.ts

@@ -726,6 +726,32 @@ test.describe('Kernel commands should use memory terminology', () => {
   });
 });
 
+test.describe('Placeholders in cells', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.waitForSelector('.jp-NotebookPanel');
+  });
+  test('Code cell editor placeholder', async ({ page }) => {
+    await runCommand(page, 'notebook:enter-command-mode');
+
+    const cell = page.locator('.jp-CodeCell').first();
+    expect(await cell.screenshot()).toMatchSnapshot('code-editor-placeholder.png');
+  });
+  test('Markdown cell editor placeholder', async ({ page }) => {
+    await runCommand(page, 'notebook:change-cell-to-markdown');
+    await runCommand(page, 'notebook:enter-command-mode');
+
+    const cell = page.locator('.jp-MarkdownCell').first();
+    expect(await cell.screenshot()).toMatchSnapshot('markdown-editor-placeholder.png');
+  });
+  test('Rendered Markdown cell placeholder', async ({ page }) => {
+    await runCommand(page, 'notebook:change-cell-to-markdown');
+    await runCommand(page, 'notebook:run-cell');
+
+    const cell = page.locator('.jp-MarkdownCell').first();
+    expect(await cell.screenshot()).toMatchSnapshot('rendered-markdown-placeholder.png');
+  });
+});
+
 test.describe('Per cell run buttons', () => {
   test('Clicking the run button executes code and shows output', async ({ page }) => {
     await page.waitForSelector('.jp-NotebookPanel');