Merge pull request #89 from editor-js/placeholder

feat(placeholder): update placeholder behavior

dist/paragraph.mjs

@@ -1,4 +1,4 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".ce-paragraph{line-height:1.6em;outline:none}.ce-paragraph[data-placeholder]:empty:before{content:attr(data-placeholder);color:#707684;font-weight:400;opacity:0}.codex-editor--empty .ce-block:first-child .ce-paragraph[data-placeholder]:empty:before{opacity:1}.codex-editor--toolbox-opened .ce-block:first-child .ce-paragraph[data-placeholder]:empty:before,.codex-editor--empty .ce-block:first-child .ce-paragraph[data-placeholder]:empty:focus:before{opacity:0}.ce-paragraph p:first-of-type{margin-top:0}.ce-paragraph p:last-of-type{margin-bottom:0}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".ce-paragraph{line-height:1.6em;outline:none}.ce-block:only-of-type .ce-paragraph[data-placeholder-active]:empty:before,.ce-block:only-of-type .ce-paragraph[data-placeholder-active][data-empty=true]:before{content:attr(data-placeholder-active)}.ce-paragraph p:first-of-type{margin-top:0}.ce-paragraph p:last-of-type{margin-bottom:0}")),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
 const a = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M8 9V7.2C8 7.08954 8.08954 7 8.2 7L12 7M16 9V7.2C16 7.08954 15.9105 7 15.8 7L12 7M12 7L12 17M12 17H10M12 17H14"/></svg>';
 function l(r) {
   const t = document.createElement("div");
@@ -59,7 +59,7 @@ class n {
    */
   drawView() {
     const t = document.createElement("DIV");
-    return t.classList.add(this._CSS.wrapper, this._CSS.block), t.contentEditable = "false", t.dataset.placeholder = this.api.i18n.t(this._placeholder), this._data.text && (t.innerHTML = this._data.text), this.readOnly || (t.contentEditable = "true", t.addEventListener("keyup", this.onKeyUp)), t;
+    return t.classList.add(this._CSS.wrapper, this._CSS.block), t.contentEditable = "false", t.dataset.placeholderActive = this.api.i18n.t(this._placeholder), this._data.text && (t.innerHTML = this._data.text), this.readOnly || (t.contentEditable = "true", t.addEventListener("keyup", this.onKeyUp)), t;
   }
   /**
    * Return Tool's view

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/paragraph",
-  "version": "2.11.5",
+  "version": "2.11.6",
   "keywords": [
     "codex editor",
     "paragraph",

src/index.css

@@ -3,21 +3,15 @@
     outline: none;
 }
 
-.ce-paragraph[data-placeholder]:empty::before{
-  content: attr(data-placeholder);
-  color: #707684;
-  font-weight: normal;
-  opacity: 0;
-}
-
-/** Show placeholder at the first paragraph if Editor is empty */
-.codex-editor--empty .ce-block:first-child .ce-paragraph[data-placeholder]:empty::before {
-  opacity: 1;
-}
-
-.codex-editor--toolbox-opened .ce-block:first-child .ce-paragraph[data-placeholder]:empty::before,
-.codex-editor--empty .ce-block:first-child .ce-paragraph[data-placeholder]:empty:focus::before {
-  opacity: 0;
+/**
+ * Normally paragraph placeholder is shown only for the focused block (thanks to "data-placeholder-active").
+ *
+ * But there is a special case when the paragraph is the only block in the empty editor.
+ * When editor autofocus=false, there will be no focus. We need to show the placeholder anyway.
+ */
+.ce-block:only-of-type .ce-paragraph[data-placeholder-active]:empty::before,
+.ce-block:only-of-type .ce-paragraph[data-placeholder-active][data-empty="true"]::before {
+  content: attr(data-placeholder-active);
 }
 
 .ce-paragraph p:first-of-type{

src/index.ts

@@ -212,7 +212,7 @@ export default class Paragraph {
 
     div.classList.add(this._CSS.wrapper, this._CSS.block);
     div.contentEditable = 'false';
-    div.dataset.placeholder = this.api.i18n.t(this._placeholder);
+    div.dataset.placeholderActive = this.api.i18n.t(this._placeholder);
 
     if (this._data.text) {
       div.innerHTML = this._data.text;