@tiptap/extension-placeholder 2.0.0-beta.8 → 2.0.0-rc.1

package/README.md

@@ -5,10 +5,10 @@
 [![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
 
 ## Introduction
-tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
+Tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
 
-## Offical Documentation
-Documentation can be found on the [tiptap website](https://tiptap.dev).
+## Official Documentation
+Documentation can be found on the [Tiptap website](https://tiptap.dev).
 
 ## License
-tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap/blob/main/LICENSE.md).
+Tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap/blob/main/LICENSE.md).

package/dist/{tiptap-extension-placeholder.cjs.js → index.cjs}

@@ -3,51 +3,61 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var core = require('@tiptap/core');
-var prosemirrorView = require('prosemirror-view');
-var prosemirrorState = require('prosemirror-state');
+var state = require('@tiptap/pm/state');
+var view = require('@tiptap/pm/view');
 
 const Placeholder = core.Extension.create({
     name: 'placeholder',
-    defaultOptions: {
-        emptyEditorClass: 'is-editor-empty',
-        emptyNodeClass: 'is-empty',
-        placeholder: 'Write something …',
-        showOnlyWhenEditable: true,
-        showOnlyCurrent: true,
+    addOptions() {
+        return {
+            emptyEditorClass: 'is-editor-empty',
+            emptyNodeClass: 'is-empty',
+            placeholder: 'Write something …',
+            showOnlyWhenEditable: true,
+            showOnlyCurrent: true,
+            includeChildren: false,
+        };
     },
     addProseMirrorPlugins() {
         return [
-            new prosemirrorState.Plugin({
+            new state.Plugin({
+                key: new state.PluginKey('placeholder'),
                 props: {
                     decorations: ({ doc, selection }) => {
                         const active = this.editor.isEditable || !this.options.showOnlyWhenEditable;
                         const { anchor } = selection;
                         const decorations = [];
                         if (!active) {
-                            return;
+                            return null;
                         }
+                        // only calculate isEmpty once due to its performance impacts (see issue #3360)
+                        const emptyDocInstance = doc.type.createAndFill();
+                        const isEditorEmpty = (emptyDocInstance === null || emptyDocInstance === void 0 ? void 0 : emptyDocInstance.sameMarkup(doc))
+                            && emptyDocInstance.content.findDiffStart(doc.content) === null;
                         doc.descendants((node, pos) => {
-                            const hasAnchor = anchor >= pos && anchor <= (pos + node.nodeSize);
-                            const isEmpty = !node.isLeaf && core.isNodeEmpty(node);
+                            const hasAnchor = anchor >= pos && anchor <= pos + node.nodeSize;
+                            const isEmpty = !node.isLeaf && !node.childCount;
                             if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) {
                                 const classes = [this.options.emptyNodeClass];
-                                if (this.editor.isEmpty) {
+                                if (isEditorEmpty) {
                                     classes.push(this.options.emptyEditorClass);
                                 }
-                                const decoration = prosemirrorView.Decoration.node(pos, pos + node.nodeSize, {
+                                const decoration = view.Decoration.node(pos, pos + node.nodeSize, {
                                     class: classes.join(' '),
                                     'data-placeholder': typeof this.options.placeholder === 'function'
                                         ? this.options.placeholder({
                                             editor: this.editor,
                                             node,
+                                            pos,
+                                            hasAnchor,
                                         })
                                         : this.options.placeholder,
                                 });
                                 decorations.push(decoration);
                             }
-                            return false;
+                            return this.options.includeChildren;
                         });
-                        return prosemirrorView.DecorationSet.create(doc, decorations);
+                        return view.DecorationSet.create(doc, decorations);
                     },
                 },
             }),
@@ -56,5 +66,5 @@ const Placeholder = core.Extension.create({
 });
 
 exports.Placeholder = Placeholder;
-exports.default = Placeholder;
-//# sourceMappingURL=tiptap-extension-placeholder.cjs.js.map
+exports["default"] = Placeholder;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/placeholder.ts"],"sourcesContent":["import { Editor, Extension } from '@tiptap/core'\nimport { Node as ProsemirrorNode } from '@tiptap/pm/model'\nimport { Plugin, PluginKey } from '@tiptap/pm/state'\nimport { Decoration, DecorationSet } from '@tiptap/pm/view'\n\nexport interface PlaceholderOptions {\n  emptyEditorClass: string\n  emptyNodeClass: string\n  placeholder:\n    | ((PlaceholderProps: {\n        editor: Editor\n        node: ProsemirrorNode\n        pos: number\n        hasAnchor: boolean\n      }) => string)\n    | string\n  showOnlyWhenEditable: boolean\n  showOnlyCurrent: boolean\n  includeChildren: boolean\n}\n\nexport const Placeholder = Extension.create<PlaceholderOptions>({\n  name: 'placeholder',\n\n  addOptions() {\n    return {\n      emptyEditorClass: 'is-editor-empty',\n      emptyNodeClass: 'is-empty',\n      placeholder: 'Write something …',\n      showOnlyWhenEditable: true,\n      showOnlyCurrent: true,\n      includeChildren: false,\n    }\n  },\n\n  addProseMirrorPlugins() {\n    return [\n      new Plugin({\n        key: new PluginKey('placeholder'),\n        props: {\n          decorations: ({ doc, selection }) => {\n            const active = this.editor.isEditable || !this.options.showOnlyWhenEditable\n            const { anchor } = selection\n            const decorations: Decoration[] = []\n\n            if (!active) {\n              return null\n            }\n\n            // only calculate isEmpty once due to its performance impacts (see issue #3360)\n            const emptyDocInstance = doc.type.createAndFill()\n            const isEditorEmpty = emptyDocInstance?.sameMarkup(doc)\n              && emptyDocInstance.content.findDiffStart(doc.content) === null\n\n            doc.descendants((node, pos) => {\n              const hasAnchor = anchor >= pos && anchor <= pos + node.nodeSize\n              const isEmpty = !node.isLeaf && !node.childCount\n\n              if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) {\n                const classes = [this.options.emptyNodeClass]\n\n                if (isEditorEmpty) {\n                  classes.push(this.options.emptyEditorClass)\n                }\n\n                const decoration = Decoration.node(pos, pos + node.nodeSize, {\n                  class: classes.join(' '),\n                  'data-placeholder':\n                    typeof this.options.placeholder === 'function'\n                      ? this.options.placeholder({\n                        editor: this.editor,\n                        node,\n                        pos,\n                        hasAnchor,\n                      })\n                      : this.options.placeholder,\n                })\n\n                decorations.push(decoration)\n              }\n\n              return this.options.includeChildren\n            })\n\n            return DecorationSet.create(doc, decorations)\n          },\n        },\n      }),\n    ]\n  },\n})\n"],"names":["Extension","Plugin","PluginKey","Decoration","DecorationSet"],"mappings":";;;;;;;;AAqBa,MAAA,WAAW,GAAGA,cAAS,CAAC,MAAM,CAAqB;AAC9D,IAAA,IAAI,EAAE,aAAa;IAEnB,UAAU,GAAA;QACR,OAAO;AACL,YAAA,gBAAgB,EAAE,iBAAiB;AACnC,YAAA,cAAc,EAAE,UAAU;AAC1B,YAAA,WAAW,EAAE,mBAAmB;AAChC,YAAA,oBAAoB,EAAE,IAAI;AAC1B,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,eAAe,EAAE,KAAK;SACvB,CAAA;KACF;IAED,qBAAqB,GAAA;QACnB,OAAO;AACL,YAAA,IAAIC,YAAM,CAAC;AACT,gBAAA,GAAG,EAAE,IAAIC,eAAS,CAAC,aAAa,CAAC;AACjC,gBAAA,KAAK,EAAE;oBACL,WAAW,EAAE,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,KAAI;AAClC,wBAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAA;AAC3E,wBAAA,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,CAAA;wBAC5B,MAAM,WAAW,GAAiB,EAAE,CAAA;wBAEpC,IAAI,CAAC,MAAM,EAAE;AACX,4BAAA,OAAO,IAAI,CAAA;AACZ,yBAAA;;wBAGD,MAAM,gBAAgB,GAAG,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,CAAA;AACjD,wBAAA,MAAM,aAAa,GAAG,CAAA,gBAAgB,KAAhB,IAAA,IAAA,gBAAgB,KAAhB,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,gBAAgB,CAAE,UAAU,CAAC,GAAG,CAAC;+BAClD,gBAAgB,CAAC,OAAO,CAAC,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,IAAI,CAAA;wBAEjE,GAAG,CAAC,WAAW,CAAC,CAAC,IAAI,EAAE,GAAG,KAAI;AAC5B,4BAAA,MAAM,SAAS,GAAG,MAAM,IAAI,GAAG,IAAI,MAAM,IAAI,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAA;4BAChE,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAA;AAEhD,4BAAA,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,KAAK,OAAO,EAAE;gCAC3D,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAA;AAE7C,gCAAA,IAAI,aAAa,EAAE;oCACjB,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAA;AAC5C,iCAAA;AAED,gCAAA,MAAM,UAAU,GAAGC,eAAU,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI,CAAC,QAAQ,EAAE;AAC3D,oCAAA,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;oCACxB,kBAAkB,EAChB,OAAO,IAAI,CAAC,OAAO,CAAC,WAAW,KAAK,UAAU;AAC5C,0CAAE,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;4CACzB,MAAM,EAAE,IAAI,CAAC,MAAM;4CACnB,IAAI;4CACJ,GAAG;4CACH,SAAS;yCACV,CAAC;AACF,0CAAE,IAAI,CAAC,OAAO,CAAC,WAAW;AAC/B,iCAAA,CAAC,CAAA;AAEF,gCAAA,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;AAC7B,6BAAA;AAED,4BAAA,OAAO,IAAI,CAAC,OAAO,CAAC,eAAe,CAAA;AACrC,yBAAC,CAAC,CAAA;wBAEF,OAAOC,kBAAa,CAAC,MAAM,CAAC,GAAG,EAAE,WAAW,CAAC,CAAA;qBAC9C;AACF,iBAAA;aACF,CAAC;SACH,CAAA;KACF;AACF,CAAA;;;;;"}

package/dist/{tiptap-extension-placeholder.esm.js → index.js}

@@ -1,33 +1,41 @@
-import { Extension, isNodeEmpty } from '@tiptap/core';
-import { Decoration, DecorationSet } from 'prosemirror-view';
-import { Plugin } from 'prosemirror-state';
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { Decoration, DecorationSet } from '@tiptap/pm/view';
 
 const Placeholder = Extension.create({
     name: 'placeholder',
-    defaultOptions: {
-        emptyEditorClass: 'is-editor-empty',
-        emptyNodeClass: 'is-empty',
-        placeholder: 'Write something …',
-        showOnlyWhenEditable: true,
-        showOnlyCurrent: true,
+    addOptions() {
+        return {
+            emptyEditorClass: 'is-editor-empty',
+            emptyNodeClass: 'is-empty',
+            placeholder: 'Write something …',
+            showOnlyWhenEditable: true,
+            showOnlyCurrent: true,
+            includeChildren: false,
+        };
     },
     addProseMirrorPlugins() {
         return [
             new Plugin({
+                key: new PluginKey('placeholder'),
                 props: {
                     decorations: ({ doc, selection }) => {
                         const active = this.editor.isEditable || !this.options.showOnlyWhenEditable;
                         const { anchor } = selection;
                         const decorations = [];
                         if (!active) {
-                            return;
+                            return null;
                         }
+                        // only calculate isEmpty once due to its performance impacts (see issue #3360)
+                        const emptyDocInstance = doc.type.createAndFill();
+                        const isEditorEmpty = (emptyDocInstance === null || emptyDocInstance === void 0 ? void 0 : emptyDocInstance.sameMarkup(doc))
+                            && emptyDocInstance.content.findDiffStart(doc.content) === null;
                         doc.descendants((node, pos) => {
-                            const hasAnchor = anchor >= pos && anchor <= (pos + node.nodeSize);
-                            const isEmpty = !node.isLeaf && isNodeEmpty(node);
+                            const hasAnchor = anchor >= pos && anchor <= pos + node.nodeSize;
+                            const isEmpty = !node.isLeaf && !node.childCount;
                             if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) {
                                 const classes = [this.options.emptyNodeClass];
-                                if (this.editor.isEmpty) {
+                                if (isEditorEmpty) {
                                     classes.push(this.options.emptyEditorClass);
                                 }
                                 const decoration = Decoration.node(pos, pos + node.nodeSize, {
@@ -36,12 +44,14 @@ const Placeholder = Extension.create({
                                         ? this.options.placeholder({
                                             editor: this.editor,
                                             node,
+                                            pos,
+                                            hasAnchor,
                                         })
                                         : this.options.placeholder,
                                 });
                                 decorations.push(decoration);
                             }
-                            return false;
+                            return this.options.includeChildren;
                         });
                         return DecorationSet.create(doc, decorations);
                     },
@@ -51,6 +61,5 @@ const Placeholder = Extension.create({
     },
 });
 
-export default Placeholder;
-export { Placeholder };
-//# sourceMappingURL=tiptap-extension-placeholder.esm.js.map
+export { Placeholder, Placeholder as default };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/placeholder.ts"],"sourcesContent":["import { Editor, Extension } from '@tiptap/core'\nimport { Node as ProsemirrorNode } from '@tiptap/pm/model'\nimport { Plugin, PluginKey } from '@tiptap/pm/state'\nimport { Decoration, DecorationSet } from '@tiptap/pm/view'\n\nexport interface PlaceholderOptions {\n  emptyEditorClass: string\n  emptyNodeClass: string\n  placeholder:\n    | ((PlaceholderProps: {\n        editor: Editor\n        node: ProsemirrorNode\n        pos: number\n        hasAnchor: boolean\n      }) => string)\n    | string\n  showOnlyWhenEditable: boolean\n  showOnlyCurrent: boolean\n  includeChildren: boolean\n}\n\nexport const Placeholder = Extension.create<PlaceholderOptions>({\n  name: 'placeholder',\n\n  addOptions() {\n    return {\n      emptyEditorClass: 'is-editor-empty',\n      emptyNodeClass: 'is-empty',\n      placeholder: 'Write something …',\n      showOnlyWhenEditable: true,\n      showOnlyCurrent: true,\n      includeChildren: false,\n    }\n  },\n\n  addProseMirrorPlugins() {\n    return [\n      new Plugin({\n        key: new PluginKey('placeholder'),\n        props: {\n          decorations: ({ doc, selection }) => {\n            const active = this.editor.isEditable || !this.options.showOnlyWhenEditable\n            const { anchor } = selection\n            const decorations: Decoration[] = []\n\n            if (!active) {\n              return null\n            }\n\n            // only calculate isEmpty once due to its performance impacts (see issue #3360)\n            const emptyDocInstance = doc.type.createAndFill()\n            const isEditorEmpty = emptyDocInstance?.sameMarkup(doc)\n              && emptyDocInstance.content.findDiffStart(doc.content) === null\n\n            doc.descendants((node, pos) => {\n              const hasAnchor = anchor >= pos && anchor <= pos + node.nodeSize\n              const isEmpty = !node.isLeaf && !node.childCount\n\n              if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) {\n                const classes = [this.options.emptyNodeClass]\n\n                if (isEditorEmpty) {\n                  classes.push(this.options.emptyEditorClass)\n                }\n\n                const decoration = Decoration.node(pos, pos + node.nodeSize, {\n                  class: classes.join(' '),\n                  'data-placeholder':\n                    typeof this.options.placeholder === 'function'\n                      ? this.options.placeholder({\n                        editor: this.editor,\n                        node,\n                        pos,\n                        hasAnchor,\n                      })\n                      : this.options.placeholder,\n                })\n\n                decorations.push(decoration)\n              }\n\n              return this.options.includeChildren\n            })\n\n            return DecorationSet.create(doc, decorations)\n          },\n        },\n      }),\n    ]\n  },\n})\n"],"names":[],"mappings":";;;;AAqBa,MAAA,WAAW,GAAG,SAAS,CAAC,MAAM,CAAqB;AAC9D,IAAA,IAAI,EAAE,aAAa;IAEnB,UAAU,GAAA;QACR,OAAO;AACL,YAAA,gBAAgB,EAAE,iBAAiB;AACnC,YAAA,cAAc,EAAE,UAAU;AAC1B,YAAA,WAAW,EAAE,mBAAmB;AAChC,YAAA,oBAAoB,EAAE,IAAI;AAC1B,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,eAAe,EAAE,KAAK;SACvB,CAAA;KACF;IAED,qBAAqB,GAAA;QACnB,OAAO;AACL,YAAA,IAAI,MAAM,CAAC;AACT,gBAAA,GAAG,EAAE,IAAI,SAAS,CAAC,aAAa,CAAC;AACjC,gBAAA,KAAK,EAAE;oBACL,WAAW,EAAE,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,KAAI;AAClC,wBAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAA;AAC3E,wBAAA,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,CAAA;wBAC5B,MAAM,WAAW,GAAiB,EAAE,CAAA;wBAEpC,IAAI,CAAC,MAAM,EAAE;AACX,4BAAA,OAAO,IAAI,CAAA;AACZ,yBAAA;;wBAGD,MAAM,gBAAgB,GAAG,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,CAAA;AACjD,wBAAA,MAAM,aAAa,GAAG,CAAA,gBAAgB,KAAhB,IAAA,IAAA,gBAAgB,KAAhB,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,gBAAgB,CAAE,UAAU,CAAC,GAAG,CAAC;+BAClD,gBAAgB,CAAC,OAAO,CAAC,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,IAAI,CAAA;wBAEjE,GAAG,CAAC,WAAW,CAAC,CAAC,IAAI,EAAE,GAAG,KAAI;AAC5B,4BAAA,MAAM,SAAS,GAAG,MAAM,IAAI,GAAG,IAAI,MAAM,IAAI,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAA;4BAChE,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAA;AAEhD,4BAAA,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,KAAK,OAAO,EAAE;gCAC3D,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAA;AAE7C,gCAAA,IAAI,aAAa,EAAE;oCACjB,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAA;AAC5C,iCAAA;AAED,gCAAA,MAAM,UAAU,GAAG,UAAU,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI,CAAC,QAAQ,EAAE;AAC3D,oCAAA,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;oCACxB,kBAAkB,EAChB,OAAO,IAAI,CAAC,OAAO,CAAC,WAAW,KAAK,UAAU;AAC5C,0CAAE,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;4CACzB,MAAM,EAAE,IAAI,CAAC,MAAM;4CACnB,IAAI;4CACJ,GAAG;4CACH,SAAS;yCACV,CAAC;AACF,0CAAE,IAAI,CAAC,OAAO,CAAC,WAAW;AAC/B,iCAAA,CAAC,CAAA;AAEF,gCAAA,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;AAC7B,6BAAA;AAED,4BAAA,OAAO,IAAI,CAAC,OAAO,CAAC,eAAe,CAAA;AACrC,yBAAC,CAAC,CAAA;wBAEF,OAAO,aAAa,CAAC,MAAM,CAAC,GAAG,EAAE,WAAW,CAAC,CAAA;qBAC9C;AACF,iBAAA;aACF,CAAC;SACH,CAAA;KACF;AACF,CAAA;;;;"}

package/dist/{tiptap-extension-placeholder.umd.js → index.umd.js}

@@ -1,51 +1,61 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tiptap/core'), require('prosemirror-view'), require('prosemirror-state')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@tiptap/core', 'prosemirror-view', 'prosemirror-state'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['@tiptap/extension-placeholder'] = {}, global.core, global.prosemirrorView, global.prosemirrorState));
-}(this, (function (exports, core, prosemirrorView, prosemirrorState) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tiptap/core'), require('@tiptap/pm/state'), require('@tiptap/pm/view')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@tiptap/core', '@tiptap/pm/state', '@tiptap/pm/view'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@tiptap/extension-placeholder"] = {}, global.core, global.state, global.view));
+})(this, (function (exports, core, state, view) { 'use strict';
 
   const Placeholder = core.Extension.create({
       name: 'placeholder',
-      defaultOptions: {
-          emptyEditorClass: 'is-editor-empty',
-          emptyNodeClass: 'is-empty',
-          placeholder: 'Write something …',
-          showOnlyWhenEditable: true,
-          showOnlyCurrent: true,
+      addOptions() {
+          return {
+              emptyEditorClass: 'is-editor-empty',
+              emptyNodeClass: 'is-empty',
+              placeholder: 'Write something …',
+              showOnlyWhenEditable: true,
+              showOnlyCurrent: true,
+              includeChildren: false,
+          };
       },
       addProseMirrorPlugins() {
           return [
-              new prosemirrorState.Plugin({
+              new state.Plugin({
+                  key: new state.PluginKey('placeholder'),
                   props: {
                       decorations: ({ doc, selection }) => {
                           const active = this.editor.isEditable || !this.options.showOnlyWhenEditable;
                           const { anchor } = selection;
                           const decorations = [];
                           if (!active) {
-                              return;
+                              return null;
                           }
+                          // only calculate isEmpty once due to its performance impacts (see issue #3360)
+                          const emptyDocInstance = doc.type.createAndFill();
+                          const isEditorEmpty = (emptyDocInstance === null || emptyDocInstance === void 0 ? void 0 : emptyDocInstance.sameMarkup(doc))
+                              && emptyDocInstance.content.findDiffStart(doc.content) === null;
                           doc.descendants((node, pos) => {
-                              const hasAnchor = anchor >= pos && anchor <= (pos + node.nodeSize);
-                              const isEmpty = !node.isLeaf && core.isNodeEmpty(node);
+                              const hasAnchor = anchor >= pos && anchor <= pos + node.nodeSize;
+                              const isEmpty = !node.isLeaf && !node.childCount;
                               if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) {
                                   const classes = [this.options.emptyNodeClass];
-                                  if (this.editor.isEmpty) {
+                                  if (isEditorEmpty) {
                                       classes.push(this.options.emptyEditorClass);
                                   }
-                                  const decoration = prosemirrorView.Decoration.node(pos, pos + node.nodeSize, {
+                                  const decoration = view.Decoration.node(pos, pos + node.nodeSize, {
                                       class: classes.join(' '),
                                       'data-placeholder': typeof this.options.placeholder === 'function'
                                           ? this.options.placeholder({
                                               editor: this.editor,
                                               node,
+                                              pos,
+                                              hasAnchor,
                                           })
                                           : this.options.placeholder,
                                   });
                                   decorations.push(decoration);
                               }
-                              return false;
+                              return this.options.includeChildren;
                           });
-                          return prosemirrorView.DecorationSet.create(doc, decorations);
+                          return view.DecorationSet.create(doc, decorations);
                       },
                   },
               }),
@@ -54,9 +64,9 @@
   });
 
   exports.Placeholder = Placeholder;
-  exports.default = Placeholder;
+  exports["default"] = Placeholder;
 
   Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
-//# sourceMappingURL=tiptap-extension-placeholder.umd.js.map
+}));
+//# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.umd.js","sources":["../src/placeholder.ts"],"sourcesContent":["import { Editor, Extension } from '@tiptap/core'\nimport { Node as ProsemirrorNode } from '@tiptap/pm/model'\nimport { Plugin, PluginKey } from '@tiptap/pm/state'\nimport { Decoration, DecorationSet } from '@tiptap/pm/view'\n\nexport interface PlaceholderOptions {\n  emptyEditorClass: string\n  emptyNodeClass: string\n  placeholder:\n    | ((PlaceholderProps: {\n        editor: Editor\n        node: ProsemirrorNode\n        pos: number\n        hasAnchor: boolean\n      }) => string)\n    | string\n  showOnlyWhenEditable: boolean\n  showOnlyCurrent: boolean\n  includeChildren: boolean\n}\n\nexport const Placeholder = Extension.create<PlaceholderOptions>({\n  name: 'placeholder',\n\n  addOptions() {\n    return {\n      emptyEditorClass: 'is-editor-empty',\n      emptyNodeClass: 'is-empty',\n      placeholder: 'Write something …',\n      showOnlyWhenEditable: true,\n      showOnlyCurrent: true,\n      includeChildren: false,\n    }\n  },\n\n  addProseMirrorPlugins() {\n    return [\n      new Plugin({\n        key: new PluginKey('placeholder'),\n        props: {\n          decorations: ({ doc, selection }) => {\n            const active = this.editor.isEditable || !this.options.showOnlyWhenEditable\n            const { anchor } = selection\n            const decorations: Decoration[] = []\n\n            if (!active) {\n              return null\n            }\n\n            // only calculate isEmpty once due to its performance impacts (see issue #3360)\n            const emptyDocInstance = doc.type.createAndFill()\n            const isEditorEmpty = emptyDocInstance?.sameMarkup(doc)\n              && emptyDocInstance.content.findDiffStart(doc.content) === null\n\n            doc.descendants((node, pos) => {\n              const hasAnchor = anchor >= pos && anchor <= pos + node.nodeSize\n              const isEmpty = !node.isLeaf && !node.childCount\n\n              if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) {\n                const classes = [this.options.emptyNodeClass]\n\n                if (isEditorEmpty) {\n                  classes.push(this.options.emptyEditorClass)\n                }\n\n                const decoration = Decoration.node(pos, pos + node.nodeSize, {\n                  class: classes.join(' '),\n                  'data-placeholder':\n                    typeof this.options.placeholder === 'function'\n                      ? this.options.placeholder({\n                        editor: this.editor,\n                        node,\n                        pos,\n                        hasAnchor,\n                      })\n                      : this.options.placeholder,\n                })\n\n                decorations.push(decoration)\n              }\n\n              return this.options.includeChildren\n            })\n\n            return DecorationSet.create(doc, decorations)\n          },\n        },\n      }),\n    ]\n  },\n})\n"],"names":["Extension","Plugin","PluginKey","Decoration","DecorationSet"],"mappings":"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"}

package/dist/packages/extension-placeholder/src/placeholder.d.ts

@@ -1,13 +1,16 @@
 import { Editor, Extension } from '@tiptap/core';
-import { Node as ProsemirrorNode } from 'prosemirror-model';
+import { Node as ProsemirrorNode } from '@tiptap/pm/model';
 export interface PlaceholderOptions {
     emptyEditorClass: string;
     emptyNodeClass: string;
     placeholder: ((PlaceholderProps: {
         editor: Editor;
         node: ProsemirrorNode;
+        pos: number;
+        hasAnchor: boolean;
     }) => string) | string;
     showOnlyWhenEditable: boolean;
     showOnlyCurrent: boolean;
+    includeChildren: boolean;
 }
-export declare const Placeholder: Extension<PlaceholderOptions>;
+export declare const Placeholder: Extension<PlaceholderOptions, any>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/extension-placeholder",
   "description": "placeholder extension for tiptap",
-  "version": "2.0.0-beta.8",
+  "version": "2.0.0-rc.1",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -12,22 +12,37 @@
     "type": "github",
     "url": "https://github.com/sponsors/ueberdosis"
   },
-  "main": "dist/tiptap-extension-placeholder.cjs.js",
-  "umd": "dist/tiptap-extension-placeholder.umd.js",
-  "module": "dist/tiptap-extension-placeholder.esm.js",
-  "unpkg": "dist/tiptap-extension-placeholder.bundle.umd.min.js",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/packages/extension-placeholder/src/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "umd": "dist/index.umd.js",
   "types": "dist/packages/extension-placeholder/src/index.d.ts",
   "files": [
     "src",
     "dist"
   ],
   "peerDependencies": {
-    "@tiptap/core": "^2.0.0-beta.1"
+    "@tiptap/core": "2.0.0-rc.1",
+    "@tiptap/pm": "2.0.0-rc.1"
+  },
+  "devDependencies": {
+    "@tiptap/core": "2.0.0-rc.1",
+    "@tiptap/pm": "2.0.0-rc.1"
   },
-  "dependencies": {
-    "prosemirror-model": "^1.14.0",
-    "prosemirror-state": "^1.3.4",
-    "prosemirror-view": "^1.18.2"
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ueberdosis/tiptap",
+    "directory": "packages/extension-placeholder"
   },
-  "gitHead": "bd9e15d78f9159afb05d09e7ba279ff7d74a85ea"
-}
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "npm run clean && rollup -c"
+  }
+}

package/src/placeholder.ts

@@ -1,33 +1,42 @@
-import { Editor, Extension, isNodeEmpty } from '@tiptap/core'
-import { Node as ProsemirrorNode } from 'prosemirror-model'
-import { Decoration, DecorationSet } from 'prosemirror-view'
-import { Plugin } from 'prosemirror-state'
+import { Editor, Extension } from '@tiptap/core'
+import { Node as ProsemirrorNode } from '@tiptap/pm/model'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+import { Decoration, DecorationSet } from '@tiptap/pm/view'
 
 export interface PlaceholderOptions {
-  emptyEditorClass: string,
-  emptyNodeClass: string,
-  placeholder: ((PlaceholderProps: {
-    editor: Editor,
-    node: ProsemirrorNode,
-  }) => string) | string,
-  showOnlyWhenEditable: boolean,
-  showOnlyCurrent: boolean,
+  emptyEditorClass: string
+  emptyNodeClass: string
+  placeholder:
+    | ((PlaceholderProps: {
+        editor: Editor
+        node: ProsemirrorNode
+        pos: number
+        hasAnchor: boolean
+      }) => string)
+    | string
+  showOnlyWhenEditable: boolean
+  showOnlyCurrent: boolean
+  includeChildren: boolean
 }
 
 export const Placeholder = Extension.create<PlaceholderOptions>({
   name: 'placeholder',
 
-  defaultOptions: {
-    emptyEditorClass: 'is-editor-empty',
-    emptyNodeClass: 'is-empty',
-    placeholder: 'Write something …',
-    showOnlyWhenEditable: true,
-    showOnlyCurrent: true,
+  addOptions() {
+    return {
+      emptyEditorClass: 'is-editor-empty',
+      emptyNodeClass: 'is-empty',
+      placeholder: 'Write something …',
+      showOnlyWhenEditable: true,
+      showOnlyCurrent: true,
+      includeChildren: false,
+    }
   },
 
   addProseMirrorPlugins() {
     return [
       new Plugin({
+        key: new PluginKey('placeholder'),
         props: {
           decorations: ({ doc, selection }) => {
             const active = this.editor.isEditable || !this.options.showOnlyWhenEditable
@@ -35,34 +44,42 @@ export const Placeholder = Extension.create<PlaceholderOptions>({
             const decorations: Decoration[] = []
 
             if (!active) {
-              return
+              return null
             }
 
+            // only calculate isEmpty once due to its performance impacts (see issue #3360)
+            const emptyDocInstance = doc.type.createAndFill()
+            const isEditorEmpty = emptyDocInstance?.sameMarkup(doc)
+              && emptyDocInstance.content.findDiffStart(doc.content) === null
+
             doc.descendants((node, pos) => {
-              const hasAnchor = anchor >= pos && anchor <= (pos + node.nodeSize)
-              const isEmpty = !node.isLeaf && isNodeEmpty(node)
+              const hasAnchor = anchor >= pos && anchor <= pos + node.nodeSize
+              const isEmpty = !node.isLeaf && !node.childCount
 
               if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) {
                 const classes = [this.options.emptyNodeClass]
 
-                if (this.editor.isEmpty) {
+                if (isEditorEmpty) {
                   classes.push(this.options.emptyEditorClass)
                 }
 
                 const decoration = Decoration.node(pos, pos + node.nodeSize, {
                   class: classes.join(' '),
-                  'data-placeholder': typeof this.options.placeholder === 'function'
-                    ? this.options.placeholder({
-                      editor: this.editor,
-                      node,
-                    })
-                    : this.options.placeholder,
+                  'data-placeholder':
+                    typeof this.options.placeholder === 'function'
+                      ? this.options.placeholder({
+                        editor: this.editor,
+                        node,
+                        pos,
+                        hasAnchor,
+                      })
+                      : this.options.placeholder,
                 })
 
                 decorations.push(decoration)
               }
 
-              return false
+              return this.options.includeChildren
             })
 
             return DecorationSet.create(doc, decorations)

package/CHANGELOG.md

@@ -1,64 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [2.0.0-beta.8](https://github.com/ueberdosis/tiptap/compare/@tiptap/extension-placeholder@2.0.0-beta.7...@tiptap/extension-placeholder@2.0.0-beta.8) (2021-04-23)
-
-**Note:** Version bump only for package @tiptap/extension-placeholder
-
-
-
-
-
-# [2.0.0-beta.7](https://github.com/ueberdosis/tiptap/compare/@tiptap/extension-placeholder@2.0.0-beta.6...@tiptap/extension-placeholder@2.0.0-beta.7) (2021-04-22)
-
-**Note:** Version bump only for package @tiptap/extension-placeholder
-
-
-
-
-
-# [2.0.0-beta.6](https://github.com/ueberdosis/tiptap/compare/@tiptap/extension-placeholder@2.0.0-beta.5...@tiptap/extension-placeholder@2.0.0-beta.6) (2021-04-16)
-
-**Note:** Version bump only for package @tiptap/extension-placeholder
-
-
-
-
-
-# [2.0.0-beta.5](https://github.com/ueberdosis/tiptap/compare/@tiptap/extension-placeholder@2.0.0-beta.4...@tiptap/extension-placeholder@2.0.0-beta.5) (2021-04-15)
-
-**Note:** Version bump only for package @tiptap/extension-placeholder
-
-
-
-
-
-# [2.0.0-beta.4](https://github.com/ueberdosis/tiptap/compare/@tiptap/extension-placeholder@2.0.0-beta.3...@tiptap/extension-placeholder@2.0.0-beta.4) (2021-04-06)
-
-**Note:** Version bump only for package @tiptap/extension-placeholder
-
-
-
-
-
-# [2.0.0-beta.3](https://github.com/ueberdosis/tiptap/compare/@tiptap/extension-placeholder@2.0.0-beta.2...@tiptap/extension-placeholder@2.0.0-beta.3) (2021-03-31)
-
-**Note:** Version bump only for package @tiptap/extension-placeholder
-
-
-
-
-
-# [2.0.0-beta.2](https://github.com/ueberdosis/tiptap/compare/@tiptap/extension-placeholder@2.0.0-beta.1...@tiptap/extension-placeholder@2.0.0-beta.2) (2021-03-28)
-
-**Note:** Version bump only for package @tiptap/extension-placeholder
-
-
-
-
-
-# 2.0.0-beta.1 (2021-03-24)
-
-**Note:** Version bump only for package @tiptap/extension-placeholder

package/LICENSE.md

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2020, überdosis GbR
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.