@zipify/wysiwyg 2.0.0-14 → 2.0.0-16

package/dist/wysiwyg.css

@@ -743,7 +743,7 @@ $font-height--xs: 1.33;
 $font-height--sm: 1.43;
 $font-height--md: 1.72;
  */
-.zw-wysiwyg__placeholder:first-child:last-child::before {
+.zw-wysiwyg__placeholder::before {
     content: attr(data-placeholder);
     color: rgb(var(--zw-color-n70));
     float: left;

package/dist/wysiwyg.mjs

@@ -26,7 +26,7 @@ var __privateMethod = (obj, member, method) => {
   __accessCheck(obj, member, "access private method");
   return method;
 };
-var _domParser, _parser, _NodeFilter, NodeFilter_get, _Node, Node_get, _removeComments, removeComments_fn, _normalizeRootTags, normalizeRootTags_fn, _createNodeIterator, createNodeIterator_fn, _iterateNodes, iterateNodes_fn, _runIterator, runIterator_fn, _removeEmptyNodes, removeEmptyNodes_fn, _normalizeListItems, normalizeListItems_fn, _isBlockNode, isBlockNode_fn, _isRootNode, isRootNode_fn, _assignElementProperties, assignElementProperties_fn, _removeStyleProperties, removeStyleProperties_fn, _normalizeBreakLines, normalizeBreakLines_fn, _normalizeBlockTextDecoration, normalizeBlockTextDecoration_fn, _moveTextDecorationToChildren, moveTextDecorationToChildren_fn, _parseTextDecoration, parseTextDecoration_fn, _normalizeBlockBackgroundColor, normalizeBlockBackgroundColor_fn, _moveBackgroundColorToChildren, moveBackgroundColorToChildren_fn, _wrapTextNode, wrapTextNode_fn, _iterateNodes2, iterateNodes_fn2, _iterateChildNodes, iterateChildNodes_fn, _bubbleMarks, bubbleMarks_fn, _canBubbleMark, canBubbleMark_fn, _includesMark, includesMark_fn, _includesMarkType, includesMarkType_fn, _removeMark, removeMark_fn, _addMark, addMark_fn, _findMarkIndexByType, findMarkIndexByType_fn, _buildHtml, buildHtml_fn, _buildJson, buildJson_fn, _textBlock, textBlock_fn, _normalizeTextBlockArgs, normalizeTextBlockArgs_fn;
+var _domParser, _parser, _NodeFilter, NodeFilter_get, _Node, Node_get, _removeComments, removeComments_fn, _normalizeRootTags, normalizeRootTags_fn, _createNodeIterator, createNodeIterator_fn, _iterateNodes, iterateNodes_fn, _runIterator, runIterator_fn, _removeEmptyNodes, removeEmptyNodes_fn, _normalizeListItems, normalizeListItems_fn, _isBlockNode, isBlockNode_fn, _isRootNode, isRootNode_fn, _assignElementProperties, assignElementProperties_fn, _removeStyleProperties, removeStyleProperties_fn, _normalizeBreakLines, normalizeBreakLines_fn, _normalizeBlockTextDecoration, normalizeBlockTextDecoration_fn, _moveTextDecorationToChildren, moveTextDecorationToChildren_fn, _parseTextDecoration, parseTextDecoration_fn, _normalizeBlockBackgroundColor, normalizeBlockBackgroundColor_fn, _moveBackgroundColorToChildren, moveBackgroundColorToChildren_fn, _wrapTextNode, wrapTextNode_fn, _iterateNodes2, iterateNodes_fn2, _iterateChildNodes, iterateChildNodes_fn, _bubbleMarks, bubbleMarks_fn, _canBubbleMark, canBubbleMark_fn, _includesMark, includesMark_fn, _includesMarkType, includesMarkType_fn, _removeMark, removeMark_fn, _addMark, addMark_fn, _findMarkIndexByType, findMarkIndexByType_fn, _buildHtml, buildHtml_fn, _buildJson, buildJson_fn, _textBlock, textBlock_fn, _normalizeTextBlockArgs, normalizeTextBlockArgs_fn, _buildDecorations, buildDecorations_fn;
 import { computed, ref, watch, inject, onUnmounted, nextTick, provide, onMounted, toRef, unref, reactive } from "vue";
 import { ColorModel, ZipifyColorPicker } from "@zipify/colorpicker";
 function OrderedMap(content) {
@@ -25495,10 +25495,11 @@ const ListItem = ListItem$1.extend({
   }),
   addKeyboardShortcuts: () => ({
     Enter: (context) => {
+      var _a;
       const { state, commands: commands2 } = context.editor;
-      const isListSelected = state.selection.$cursor.path.some((node) => {
-        var _a;
-        return ((_a = node.type) == null ? void 0 : _a.name) === NodeTypes.LIST;
+      const isListSelected = (_a = state.selection.$cursor) == null ? void 0 : _a.path.some((node) => {
+        var _a2;
+        return ((_a2 = node.type) == null ? void 0 : _a2.name) === NodeTypes.LIST;
       });
       if (isListSelected) {
         commands2.listItemNewline();
@@ -26765,57 +26766,6 @@ const Text = Node.create({
   name: "text",
   group: "inline"
 });
-const Placeholder = Extension.create({
-  name: "placeholder",
-  addOptions() {
-    return {
-      emptyEditorClass: "is-editor-empty",
-      emptyNodeClass: "is-empty",
-      placeholder: "Write something \u2026",
-      showOnlyWhenEditable: true,
-      showOnlyCurrent: true,
-      includeChildren: false
-    };
-  },
-  addProseMirrorPlugins() {
-    return [
-      new Plugin({
-        props: {
-          decorations: ({ doc: doc2, selection }) => {
-            const active = this.editor.isEditable || !this.options.showOnlyWhenEditable;
-            const { anchor } = selection;
-            const decorations = [];
-            if (!active) {
-              return null;
-            }
-            doc2.descendants((node, pos) => {
-              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) {
-                  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,
-                    pos,
-                    hasAnchor
-                  }) : this.options.placeholder
-                });
-                decorations.push(decoration);
-              }
-              return this.options.includeChildren;
-            });
-            return DecorationSet.create(doc2, decorations);
-          }
-        }
-      })
-    ];
-  }
-});
 var GOOD_LEAF_SIZE = 200;
 var RopeSequence = function RopeSequence2() {
 };
@@ -27546,82 +27496,6 @@ const SelectionProcessor = Extension.create({
     };
   }
 });
-class ProseMirrorPlugin {
-  static create(options) {
-    const plugin = new this(options || {});
-    return new Plugin({
-      key: new PluginKey(this.name),
-      props: plugin.buildProps()
-    });
-  }
-  constructor(options) {
-    this.options = options;
-  }
-  buildProps() {
-    return {};
-  }
-}
-class PastePlugin extends ProseMirrorPlugin {
-  buildProps() {
-    return {
-      transformPastedHTML: this._transformPastedHTML.bind(this),
-      handlePaste: this._handlePaste.bind(this)
-    };
-  }
-  _transformPastedHTML(html2) {
-    const normalizer = ContentNormalizer.build(html2);
-    normalizer.normalizeHTML();
-    this._removeDeprecatedStyles(normalizer);
-    return normalizer.normalizedHTML;
-  }
-  _removeDeprecatedStyles(normalizer) {
-    const elements = normalizer.dom.querySelectorAll('[style*="margin"]');
-    for (const element of Array.from(elements)) {
-      element.style.removeProperty("margin");
-      element.style.removeProperty("margin-top");
-      element.style.removeProperty("margin-right");
-      element.style.removeProperty("margin-bottom");
-      element.style.removeProperty("margin-left");
-    }
-  }
-  _handlePaste(view, _, slice2) {
-    const transaction = this._insertPastedContent(view, slice2).scrollIntoView().setMeta("paste", true).setMeta("uiEvent", "paste");
-    view.dispatch(transaction);
-    return true;
-  }
-  _insertPastedContent({ state, input }, slice2) {
-    if (!this._isFullBlockSelected(state)) {
-      return state.tr.replaceSelection(slice2);
-    }
-    return state.tr.replaceSelectionWith(slice2.content, input.shiftKey);
-  }
-  _isFullBlockSelected(state) {
-    const blocksSelection = this._expandSelectionToBlocks(state);
-    const isFromMatch = this._isMatchPosition(blocksSelection.from, state.selection.from);
-    const isToMatch = this._isMatchPosition(blocksSelection.to, state.selection.to);
-    return isFromMatch && isToMatch;
-  }
-  _expandSelectionToBlocks({ selection, doc: doc2 }) {
-    let from2 = selection.from;
-    let to = selection.to;
-    doc2.nodesBetween(from2, to, (node, position, parent) => {
-      if (parent.type.name !== NodeTypes.DOCUMENT)
-        return;
-      from2 = Math.min(from2, position + 1);
-      to = Math.max(to, position + node.nodeSize - 1);
-    });
-    return { from: from2, to };
-  }
-  _isMatchPosition(position1, position2) {
-    return Math.abs(position1 - position2) < 5;
-  }
-}
-const CopyPasteProcessor = Extension.create({
-  name: "copy_paste_processor",
-  addProseMirrorPlugins() {
-    return [PastePlugin.create()];
-  }
-});
 const Document$1 = Node.create({
   name: "doc",
   topNode: true,
@@ -27740,12 +27614,119 @@ const Heading = Heading$1.extend({
     HTMLAttributes: { class: "zw-style" }
   })
 });
+class ProseMirrorPlugin {
+  static create(editor, options) {
+    const plugin = new this(editor, options || {});
+    return new Plugin({
+      key: new PluginKey(this.name),
+      props: plugin.buildProps()
+    });
+  }
+  constructor(editor, options) {
+    this.options = options;
+    this.editor = editor;
+  }
+  buildProps() {
+    return {};
+  }
+}
+class PastePlugin extends ProseMirrorPlugin {
+  buildProps() {
+    return {
+      transformPastedHTML: this._transformPastedHTML.bind(this),
+      handlePaste: this._handlePaste.bind(this)
+    };
+  }
+  _transformPastedHTML(html2) {
+    if (html2.includes("data-pm-slice") && html2.includes("zw-style")) {
+      return html2;
+    }
+    const normalizer = ContentNormalizer.build(html2);
+    normalizer.normalizeHTML();
+    this._removeDeprecatedStyles(normalizer);
+    return normalizer.normalizedHTML;
+  }
+  _removeDeprecatedStyles(normalizer) {
+    const elements = normalizer.dom.querySelectorAll('[style*="margin"]');
+    for (const element of Array.from(elements)) {
+      element.style.removeProperty("margin");
+      element.style.removeProperty("margin-top");
+      element.style.removeProperty("margin-right");
+      element.style.removeProperty("margin-bottom");
+      element.style.removeProperty("margin-left");
+    }
+  }
+  _handlePaste(view, _, slice2) {
+    const transaction = this._insertPastedContent(view, slice2).scrollIntoView().setMeta("paste", true).setMeta("uiEvent", "paste");
+    view.dispatch(transaction);
+    return true;
+  }
+  _insertPastedContent({ state, input }, slice2) {
+    if (!this._isFullBlockSelected(state)) {
+      return state.tr.replaceSelection(slice2);
+    }
+    return state.tr.replaceSelectionWith(slice2.content, input.shiftKey);
+  }
+  _isFullBlockSelected(state) {
+    const blocksSelection = this._expandSelectionToBlocks(state);
+    const isFromMatch = this._isMatchPosition(blocksSelection.from, state.selection.from);
+    const isToMatch = this._isMatchPosition(blocksSelection.to, state.selection.to);
+    return isFromMatch && isToMatch;
+  }
+  _expandSelectionToBlocks({ selection, doc: doc2 }) {
+    let from2 = selection.from;
+    let to = selection.to;
+    doc2.nodesBetween(from2, to, (node, position, parent) => {
+      if (parent.type.name !== NodeTypes.DOCUMENT)
+        return;
+      from2 = Math.min(from2, position + 1);
+      to = Math.max(to, position + node.nodeSize - 1);
+    });
+    return { from: from2, to };
+  }
+  _isMatchPosition(position1, position2) {
+    return Math.abs(position1 - position2) < 5;
+  }
+}
+class PlaceholderPlugin extends ProseMirrorPlugin {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _buildDecorations);
+  }
+  buildProps() {
+    return { decorations: __privateMethod(this, _buildDecorations, buildDecorations_fn).bind(this) };
+  }
+}
+_buildDecorations = new WeakSet();
+buildDecorations_fn = function({ doc: doc2 }) {
+  const decorations = [];
+  if (!this.editor.isEditable)
+    return null;
+  if (doc2.childCount > 1)
+    return;
+  doc2.descendants((node, pos) => {
+    if (!node.childCount) {
+      const decoration = Decoration.node(pos, pos + node.nodeSize, {
+        class: "zw-wysiwyg__placeholder",
+        "data-placeholder": "Type your text here..."
+      });
+      decorations.push(decoration);
+    }
+    return false;
+  });
+  return DecorationSet.create(doc2, decorations);
+};
+const ProseMirrorPlugins = Extension.create({
+  name: "prose_mirror_plugins",
+  addProseMirrorPlugins() {
+    return [
+      PastePlugin.create(this.editor),
+      PlaceholderPlugin.create(this.editor)
+    ];
+  }
+});
 const buildCoreExtensions = () => [
   Document,
-  Placeholder.configure({
-    placeholder: "Type your text here...",
-    emptyNodeClass: "zw-wysiwyg__placeholder"
-  }),
   Paragraph,
   Heading,
   Text,
@@ -27753,7 +27734,7 @@ const buildCoreExtensions = () => [
   NodeProcessor,
   TextProcessor,
   SelectionProcessor,
-  CopyPasteProcessor
+  ProseMirrorPlugins
 ];
 const Margin = Extension.create({
   name: TextSettings.MARGIN,

package/lib/extensions/core/index.js

@@ -1,20 +1,27 @@
+import { Extension } from '@tiptap/vue-2';
 import Text from '@tiptap/extension-text';
-import Placeholder from '@tiptap/extension-placeholder';
 import History from '@tiptap/extension-history';
 import { NodeProcessor } from './NodeProcessor';
 import { TextProcessor } from './TextProcessor';
 import { SelectionProcessor } from './SelectionProcessor';
-import { CopyPasteProcessor } from './CopyPasteProcessor';
 import { Document } from './Document';
 import { Paragraph } from './Paragraph';
 import { Heading } from './Heading';
+import { PastePlugin, PlaceholderPlugin } from './plugins';
+
+const ProseMirrorPlugins = Extension.create({
+    name: 'prose_mirror_plugins',
+
+    addProseMirrorPlugins() {
+        return [
+            PastePlugin.create(this.editor),
+            PlaceholderPlugin.create(this.editor)
+        ];
+    }
+});
 
 export const buildCoreExtensions = () => [
     Document,
-    Placeholder.configure({
-        placeholder: 'Type your text here...',
-        emptyNodeClass: 'zw-wysiwyg__placeholder'
-    }),
     Paragraph,
     Heading,
     Text,
@@ -22,5 +29,5 @@ export const buildCoreExtensions = () => [
     NodeProcessor,
     TextProcessor,
     SelectionProcessor,
-    CopyPasteProcessor
+    ProseMirrorPlugins
 ];

package/lib/extensions/core/plugins/PastePlugin.js

@@ -11,6 +11,10 @@ export class PastePlugin extends ProseMirrorPlugin {
     }
 
     _transformPastedHTML(html) {
+        if (html.includes('data-pm-slice') && html.includes('zw-style')) {
+            return html;
+        }
+
         const normalizer = ContentNormalizer.build(html);
 
         normalizer.normalizeHTML();

package/lib/extensions/core/plugins/PlaceholderPlugin.js

@@ -0,0 +1,30 @@
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { ProseMirrorPlugin } from './ProseMirrorPlugin';
+
+export class PlaceholderPlugin extends ProseMirrorPlugin {
+    buildProps() {
+        return { decorations: this.#buildDecorations.bind(this) };
+    }
+
+    #buildDecorations({ doc }) {
+        const decorations = [];
+
+        if (!this.editor.isEditable) return null;
+        if (doc.childCount > 1) return;
+
+        doc.descendants((node, pos) => {
+            if (!node.childCount) {
+                const decoration = Decoration.node(pos, pos + node.nodeSize, {
+                    class: 'zw-wysiwyg__placeholder',
+                    'data-placeholder': 'Type your text here...'
+                });
+
+                decorations.push(decoration);
+            }
+
+            return false;
+        });
+
+        return DecorationSet.create(doc, decorations);
+    }
+}

package/lib/extensions/core/plugins/ProseMirrorPlugin.js

@@ -1,8 +1,8 @@
 import { Plugin, PluginKey } from 'prosemirror-state';
 
 export class ProseMirrorPlugin {
-    static create(options) {
-        const plugin = new this(options || {});
+    static create(editor, options) {
+        const plugin = new this(editor, options || {});
 
         return new Plugin({
             key: new PluginKey(this.name),
@@ -10,8 +10,9 @@ export class ProseMirrorPlugin {
         });
     }
 
-    constructor(options) {
+    constructor(editor, options) {
         this.options = options;
+        this.editor = editor;
     }
 
     buildProps() {

package/lib/extensions/core/plugins/index.js

@@ -1 +1,2 @@
 export { PastePlugin } from './PastePlugin';
+export { PlaceholderPlugin } from './PlaceholderPlugin';

package/lib/extensions/list/ListItem.js

@@ -33,7 +33,7 @@ export const ListItem = Base.extend({
         Enter: (context) => {
             const { state, commands } = context.editor;
 
-            const isListSelected = state.selection.$cursor.path.some((node) => {
+            const isListSelected = state.selection.$cursor?.path.some((node) => {
                 return node.type?.name === NodeTypes.LIST;
             });
 

package/lib/styles/content.css

@@ -1,4 +1,4 @@
-.zw-wysiwyg__placeholder:first-child:last-child::before {
+.zw-wysiwyg__placeholder::before {
     content: attr(data-placeholder);
     color: rgb(var(--zw-color-n70));
     float: left;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "2.0.0-14",
+  "version": "2.0.0-16",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "bin": {
@@ -41,7 +41,6 @@
     "@tiptap/extension-link": "^2.0.0-beta.195",
     "@tiptap/extension-list-item": "^2.0.0-beta.195",
     "@tiptap/extension-paragraph": "^2.0.0-beta.195",
-    "@tiptap/extension-placeholder": "^2.0.0-beta.195",
     "@tiptap/extension-superscript": "^2.0.0-beta.195",
     "@tiptap/extension-text": "^2.0.0-beta.195",
     "@tiptap/vue-2": "^2.0.0-beta.195",

package/lib/extensions/core/CopyPasteProcessor.js

@@ -1,10 +0,0 @@
-import { Extension } from '@tiptap/vue-2';
-import { PastePlugin } from './plugins';
-
-export const CopyPasteProcessor = Extension.create({
-    name: 'copy_paste_processor',
-
-    addProseMirrorPlugins() {
-        return [PastePlugin.create()];
-    }
-});