feat(Placeholder): don't render placeholder when content is null (#72)

Author: d3m1d0v

demo/Playground.tsx

@@ -57,7 +57,7 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
                         paragraphPlaceholder(_node, parent) {
                             return parent?.type.name === BaseNode.Doc && parent.childCount === 1
                                 ? 'Now... start typing'
-                                : 'Empty paragraph';
+                                : null;
                         },
                     },
                 })

src/extensions/behavior/Cursor/gapcursor.ts

@@ -57,7 +57,8 @@ const toDOM: WidgetConstructor = (view, getPos) => {
     const node = pType(view.state.schema).create();
 
     const element = DOMSerializer.fromSchema(view.state.schema).serializeNode(node);
-    element.appendChild(createPlaceholder(node, null, true));
+    const placeholderDOM = createPlaceholder(node, null, true);
+    if (placeholderDOM) element.appendChild(placeholderDOM);
     (element as Element).classList.add('ye-gapcursor');
     (element as HTMLElement).addEventListener('mousedown', () => {
         const pos = getPos();

src/extensions/behavior/Placeholder/index.ts

@@ -32,10 +32,12 @@ const getPlaceholderPluginKeys = (schema: Schema) => {
 const b = cn('placeholder');
 
 export const createPlaceholder = (node: Node, parent: Node | null, focus?: boolean) => {
+    const content = getPlaceholderContent(node, parent);
+    if (!content) return null;
+
     const placeholder = document.createElement('div');
     placeholder.classList.add(...b({focus}).split(' '));
-    placeholder.textContent = getPlaceholderContent(node, parent);
-
+    placeholder.textContent = content;
     return placeholder;
 };
 
@@ -67,18 +69,19 @@ const addDecoration = (
 
     if (placeholderSpec.customPlugin) {
         widgetsMap[decorationPosition] = placeholderSpec.customPlugin;
-
         return;
     }
 
     const focus = decorationPosition === cursorPos;
-    if (focus) {
-        globalState.hasFocus = true;
-    }
+
+    const placeholderDOM = createPlaceholder(node, parent, focus);
+    if (!placeholderDOM) return;
+
+    if (focus) globalState.hasFocus = true;
 
     widgetsMap[decorationPosition] = {
         pos: decorationPosition,
-        toDOM: createPlaceholder(node, parent, focus),
+        toDOM: placeholderDOM,
     };
 };
 
@@ -185,7 +188,7 @@ function applyState(state: EditorState): PlaceholderPluginState {
 declare module 'prosemirror-model' {
     interface NodeSpec {
         placeholder?: {
-            content: string | ((node: Node, parent?: Node | null) => string);
+            content: string | ((node: Node, parent?: Node | null) => string | null);
             customPlugin?: PluginKey<DecorationSet>;
             alwaysVisible?: boolean;
         };