Feature/section placeholder (#130)

* Fix overlap between heading indicators and sidebar menu when sidebar is closed

* Add placeholder text to editor when section content is empty

* Bump version

app/renderer/components/codemirror/Editor.tsx

@@ -17,6 +17,7 @@ import {
   code,
   pasteEventHandler,
   search,
+  placeholder,
 } from './extensions';
 
 const EditorDiv = styled.div`
@@ -25,7 +26,7 @@ const EditorDiv = styled.div`
   max-width: 650px;
   min-height: 100%;
   box-sizing: border-box;
-  padding-top: 2vh;
+  padding-top: 4vh;
   padding-bottom: 10vh;
 `;
 
@@ -47,6 +48,7 @@ const Editor = () => {
       code(styledTheme),
       history(),
       pasteEventHandler(),
+      placeholder(),
       keymap.of([...defaultKeymap, ...historyKeymap, ...searchKeymap]),
     ];
     return EditorState.create({ doc: txt, extensions });

app/renderer/components/codemirror/extensions/index.ts

@@ -7,3 +7,4 @@ export { default as pasteEventHandler } from './pasteEventHandler';
 export { default as blockquote } from './blockquote';
 export { default as search } from './search';
 export { default as code } from './code';
+export { default as placeholder } from './placeholder';

app/renderer/components/codemirror/extensions/placeholder.ts

@@ -0,0 +1,63 @@
+import { Extension } from '@codemirror/state';
+import {
+  ViewPlugin,
+  EditorView,
+  Decoration,
+  DecorationSet,
+  WidgetType,
+} from '@codemirror/view';
+
+class Placeholder extends WidgetType {
+  constructor(readonly content: string | HTMLElement) {
+    super();
+  }
+
+  toDOM() {
+    let wrap = document.createElement('span');
+    wrap.className = 'cm-placeholder';
+    wrap.style.pointerEvents = 'none';
+    wrap.appendChild(
+      typeof this.content == 'string'
+        ? document.createTextNode(this.content)
+        : this.content
+    );
+    if (typeof this.content == 'string')
+      wrap.setAttribute('aria-label', 'placeholder ' + this.content);
+    else wrap.setAttribute('aria-hidden', 'true');
+    return wrap;
+  }
+
+  ignoreEvent() {
+    return false;
+  }
+}
+
+/// Extension that enables a placeholder—a piece of example content
+/// to show when the editor is empty.
+const placeholder = (): Extension => {
+  return ViewPlugin.fromClass(
+    class {
+      placeholder: DecorationSet;
+
+      constructor(readonly view: EditorView) {
+        const placeholderText = 'Start writing...';
+
+        this.placeholder = Decoration.set([
+          Decoration.widget({
+            widget: new Placeholder(placeholderText),
+            side: 1,
+          }).range(0),
+        ]);
+      }
+
+      update!: () => void; // Kludge to convince TypeScript that this is a plugin value
+
+      get decorations() {
+        return this.view.state.doc.length ? Decoration.none : this.placeholder;
+      }
+    },
+    { decorations: (v) => v.decorations }
+  );
+};
+
+export default placeholder;

package.json

@@ -153,6 +153,7 @@
     "@testing-library/react": "^13.0.0",
     "@types/color": "^3.0.3",
     "@types/jest": "^27.4.1",
+    "@types/lodash": "^4.14.182",
     "@types/markdown-it": "^12.2.3",
     "@types/marked": "^4.0.3",
     "@types/node": "17.0.23",

release/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "calamus",
-  "version": "0.5.1-pre-alpha",
+  "version": "0.5.2-pre-alpha",
   "description": "Write and Publish Books with Ease",
   "main": "./dist/main/main.js",
   "author": {

yarn.lock

@@ -1641,6 +1641,11 @@
   resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-3.0.2.tgz#fd2cd2edbaa7eaac7e7f3c1748b52a19143846c9"
   integrity sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==
 
+"@types/lodash@^4.14.182":
+  version "4.14.182"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.182.tgz#05301a4d5e62963227eaafe0ce04dd77c54ea5c2"
+  integrity sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==
+
 "@types/markdown-it@^12.2.3":
   version "12.2.3"
   resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-12.2.3.tgz#0d6f6e5e413f8daaa26522904597be3d6cd93b51"