@zipify/wysiwyg 1.0.0-dev.70 → 1.0.0-dev.74

package/dist/wysiwyg.css

@@ -23,7 +23,7 @@
     column-gap: var(--zw-offset-xxs);
 }
 
-.zw-button[data-v-86a41806] {
+.zw-button[data-v-562f4e4a] {
     display: inline-flex;
     align-items: center;
     vertical-align: middle;
@@ -33,6 +33,7 @@
     background-color: transparent;
     border: 0;
     padding: 0;
+    margin: 0;
     white-space: nowrap;
     appearance: none;
     user-select: none;
@@ -42,21 +43,21 @@
     transition: 0.1s opacity ease-out;
     will-change: opacity;
 }
-.zw-button[data-v-86a41806]::-moz-focus-inner {
+.zw-button[data-v-562f4e4a]::-moz-focus-inner {
     border: 0 !important;
 }
-.zw-button[data-v-86a41806]:hover,
-.zw-button[data-v-86a41806]:focus {
+.zw-button[data-v-562f4e4a]:hover,
+.zw-button[data-v-562f4e4a]:focus {
     text-decoration: none;
     outline: none;
 }
-.zw-button[data-v-86a41806]:disabled {
+.zw-button[data-v-562f4e4a]:disabled {
     user-select: none;
     box-shadow: none;
     cursor: not-allowed;
     opacity: 0.35;
 }
-.zw-button--toolbar[data-v-86a41806] {
+.zw-button--toolbar[data-v-562f4e4a] {
     border-radius: 1px;
     min-height: 28px;
     font-weight: var(--zw-font-weight-semibold);
@@ -66,29 +67,29 @@
     transition-property: background-color, color, opacity;
     will-change: background-color, color, opacity;
 }
-.zw-button--primary[data-v-86a41806] {
+.zw-button--primary[data-v-562f4e4a] {
     background-color: rgb(var(--zw-color-green));
     color: rgb(var(--zw-color-white));
     padding: var(--zw-offset-xxs) var(--zw-offset-sm);
     line-height: var(--zw-line-height-md);
 }
-.zw-button--primary[data-v-86a41806],
-.zw-button--secondary[data-v-86a41806] {
+.zw-button--primary[data-v-562f4e4a],
+.zw-button--secondary[data-v-562f4e4a] {
     color: rgb(var(--zw-color-white));
     padding: var(--zw-offset-xxs) var(--zw-offset-sm);
     font-weight: 600;
     font-size: var(--zw-font-size-xs);
 }
-.zw-button--primary[data-v-86a41806]:not(:disabled):hover,
-.zw-button--secondary[data-v-86a41806]:not(:disabled):hover {
+.zw-button--primary[data-v-562f4e4a]:not(:disabled):hover,
+.zw-button--secondary[data-v-562f4e4a]:not(:disabled):hover {
     opacity: 0.9;
 }
-.zw-button--toolbar[data-v-86a41806]:not(.zw-button--icon) {
+.zw-button--toolbar[data-v-562f4e4a]:not(.zw-button--icon) {
     padding: var(--zw-offset-xxs) var(--zw-offset-xs);
 }
-.zw-button--toolbar[data-v-86a41806]:not(:disabled):hover,
-.zw-button--toolbar[data-v-86a41806]:not(:disabled):focus,
-.zw-button--toolbar.zw-button--active[data-v-86a41806]:not(:disabled) {
+.zw-button--toolbar[data-v-562f4e4a]:not(:disabled):hover,
+.zw-button--toolbar[data-v-562f4e4a]:not(:disabled):focus,
+.zw-button--toolbar.zw-button--active[data-v-562f4e4a]:not(:disabled) {
     color: rgb(var(--zw-color-white));
     background-color: rgb(var(--zw-color-n5));
 }

package/dist/wysiwyg.mjs

@@ -14238,7 +14238,7 @@ var __component__$G = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$G,
   false,
   __vue2_injectStyles$G,
-  "86a41806",
+  "562f4e4a",
   null,
   null
 );
@@ -22811,7 +22811,7 @@ function useToolbar({ wrapperRef, offsets, isActiveRef }) {
         },
         {
           name: "flip",
-          enabled: false
+          options: { rootBoundary: "document" }
         }
       ]
     });
@@ -23220,7 +23220,8 @@ const FontSize = Mark.create({
     const parseSize = (value) => {
       if (!value)
         return null;
-      const converted = convertFontSize(value, this.options.wrapperRef.value);
+      const wrapperEl = this.options.wrapperRef.value || this.options.wrapperRef;
+      const converted = convertFontSize(value, wrapperEl);
       return String(converted);
     };
     return [
@@ -23632,7 +23633,8 @@ const LineHeight = Extension.create({
               const value = element.style.lineHeight;
               if (!value)
                 return null;
-              const converted = convertLineHeight(value, element, this.options.wrapperRef.value);
+              const wrapperEl = this.options.wrapperRef.value || this.options.wrapperRef;
+              const converted = convertLineHeight(value, element, wrapperEl);
               return { desktop: converted, tablet: converted, mobile: converted };
             },
             renderHTML(attrs) {
@@ -25535,6 +25537,60 @@ const History = Extension.create({
     };
   }
 });
+const HardBreak = Node$1.create({
+  name: "hardBreak",
+  addOptions() {
+    return {
+      keepMarks: true,
+      HTMLAttributes: {}
+    };
+  },
+  inline: true,
+  group: "inline",
+  selectable: false,
+  parseHTML() {
+    return [
+      { tag: "br" }
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["br", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
+  },
+  renderText() {
+    return "\n";
+  },
+  addCommands() {
+    return {
+      setHardBreak: () => ({ commands: commands2, chain, state, editor }) => {
+        return commands2.first([
+          () => commands2.exitCode(),
+          () => commands2.command(() => {
+            const { selection, storedMarks } = state;
+            if (selection.$from.parent.type.spec.isolating) {
+              return false;
+            }
+            const { keepMarks } = this.options;
+            const { splittableMarks } = editor.extensionManager;
+            const marks = storedMarks || selection.$to.parentOffset && selection.$from.marks();
+            return chain().insertContent({ type: this.name }).command(({ tr, dispatch }) => {
+              if (dispatch && marks && keepMarks) {
+                const filteredMarks = marks.filter((mark) => splittableMarks.includes(mark.type.name));
+                tr.ensureMarks(filteredMarks);
+              }
+              return true;
+            }).run();
+          })
+        ]);
+      }
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      "Mod-Enter": () => this.editor.commands.setHardBreak(),
+      "Shift-Enter": () => this.editor.commands.setHardBreak()
+    };
+  }
+});
 const NodeProcessor = Extension.create({
   name: "node_processor",
   addCommands() {
@@ -25684,12 +25740,15 @@ const buildCoreExtensions = () => [
   Paragraph.configure({
     HTMLAttributes: { class: "zw-style" }
   }),
-  Text,
   Placeholder.configure({
     placeholder: "Type your text here...",
     emptyNodeClass: "zw-wysiwyg__placeholder"
   }),
+  Text,
   History,
+  HardBreak.configure({
+    keepMarks: false
+  }),
   NodeProcessor,
   TextProcessor,
   SelectionProcessor,

package/lib/components/base/Button.vue

@@ -66,6 +66,7 @@ export default {
     background-color: transparent;
     border: 0;
     padding: 0;
+    margin: 0;
     white-space: nowrap;
     appearance: none;
     user-select: none;

package/lib/composables/useToolbar.js

@@ -22,7 +22,7 @@ export function useToolbar({ wrapperRef, offsets, isActiveRef }) {
                 },
                 {
                     name: 'flip',
-                    enabled: false
+                    options: { rootBoundary: 'document' }
                 }
             ]
         });

package/lib/extensions/FontSize.js

@@ -66,7 +66,8 @@ export const FontSize = Mark.create({
         const parseSize = (value) => {
             if (!value) return null;
 
-            const converted = convertFontSize(value, this.options.wrapperRef.value);
+            const wrapperEl = this.options.wrapperRef.value || this.options.wrapperRef;
+            const converted = convertFontSize(value, wrapperEl);
 
             return String(converted);
         };

package/lib/extensions/LineHeight.js

@@ -33,7 +33,8 @@ export const LineHeight = Extension.create({
 
                             if (!value) return null;
 
-                            const converted = convertLineHeight(value, element, this.options.wrapperRef.value);
+                            const wrapperEl = this.options.wrapperRef.value || this.options.wrapperRef;
+                            const converted = convertLineHeight(value, element, wrapperEl);
 
                             return { desktop: converted, tablet: converted, mobile: converted };
                         },

package/lib/extensions/core/index.js

@@ -3,6 +3,7 @@ import Paragraph from '@tiptap/extension-paragraph';
 import Text from '@tiptap/extension-text';
 import Placeholder from '@tiptap/extension-placeholder';
 import History from '@tiptap/extension-history';
+import HardBreak from '@tiptap/extension-hard-break';
 import { NodeProcessor } from './NodeProcessor';
 import { TextProcessor } from './TextProcessor';
 import { SelectionProcessor } from './SelectionProcessor';
@@ -13,12 +14,15 @@ export const buildCoreExtensions = () => [
     Paragraph.configure({
         HTMLAttributes: { class: 'zw-style' }
     }),
-    Text,
     Placeholder.configure({
         placeholder: 'Type your text here...',
         emptyNodeClass: 'zw-wysiwyg__placeholder'
     }),
+    Text,
     History,
+    HardBreak.configure({
+        keepMarks: false
+    }),
     NodeProcessor,
     TextProcessor,
     SelectionProcessor,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "1.0.0-dev.70",
+  "version": "1.0.0-dev.74",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "repository": {
@@ -30,6 +30,7 @@
     "@popperjs/core": "^2.11.5",
     "@tiptap/core": "^2.0.0-beta.182",
     "@tiptap/extension-document": "^2.0.0-beta.17",
+    "@tiptap/extension-hard-break": "^2.0.0-beta.33",
     "@tiptap/extension-heading": "^2.0.0-beta.29",
     "@tiptap/extension-history": "^2.0.0-beta.26",
     "@tiptap/extension-link": "^2.0.0-beta.43",