@zipify/wysiwyg 1.0.0-dev.76 → 1.0.0-dev.79

package/dist/wysiwyg.css

@@ -631,15 +631,16 @@
     width: 234px;
 }
 
-.zw-toolbar[data-v-0068707a] {
+.zw-toolbar[data-v-7afee166] {
     border-radius: 2px;
     background-color: rgb(var(--zw-color-n15));
     color: rgb(var(--zw-color-n70));
     z-index: 999999;
     text-align: left;
+    position: fixed;
 }
-.zw-toolbar[data-v-0068707a]::before,
-.zw-toolbar[data-v-0068707a]::after {
+.zw-toolbar[data-v-7afee166]::before,
+.zw-toolbar[data-v-7afee166]::after {
     content: "";
     display: block;
     width: 100%;
@@ -647,21 +648,21 @@
     position: absolute;
     --zw-toolbar-safe-zone: calc(-1 * var(--zw-toolbar-offset-y));
 }
-.zw-toolbar[data-v-0068707a]::before {
+.zw-toolbar[data-v-7afee166]::before {
     top: var(--zw-toolbar-safe-zone);
 }
-.zw-toolbar[data-v-0068707a]::after {
+.zw-toolbar[data-v-7afee166]::after {
     bottom: var(--zw-toolbar-safe-zone);
 }
-.zw-toolbar--enter-active[data-v-0068707a],
-.zw-toolbar--leave-active[data-v-0068707a] {
+.zw-toolbar--enter-active[data-v-7afee166],
+.zw-toolbar--leave-active[data-v-7afee166] {
     transition: opacity 150ms ease-out;
 }
-.zw-toolbar--leave-active[data-v-0068707a] {
+.zw-toolbar--leave-active[data-v-7afee166] {
     transition: opacity 0s ease-in;
 }
-.zw-toolbar--enter[data-v-0068707a],
-.zw-toolbar--leave-to[data-v-0068707a] {
+.zw-toolbar--enter[data-v-7afee166],
+.zw-toolbar--leave-to[data-v-7afee166] {
     opacity: 0;
 }
 .zw-wysiwyg {

package/dist/wysiwyg.mjs

@@ -14394,6 +14394,9 @@ function importIcon(name) {
 function isWysiwygContent(content) {
   return typeof content === "object" && content.__wswg__;
 }
+function unmarkWysiwygContent({ __wswg__, ...content }) {
+  return content;
+}
 function markWysiwygContent(content) {
   return { ...content, __wswg__: true };
 }
@@ -18969,6 +18972,7 @@ function useModalToggler({ onBeforeOpened, onClosed, wrapperRef, modalRef } = {}
     const modalEl = useElementRef(modalRef);
     popper2 = createPopper(wrapperEl.value, modalEl.value, {
       placement: "bottom",
+      strategy: "fixed",
       modifiers: [
         {
           name: "offset",
@@ -20490,6 +20494,7 @@ var render$q = function __render__20() {
     ref: "pickerRef",
     attrs: {
       "placement": "bottom-end",
+      "placement-strategy": "fixed",
       "favorite-colors": _vm.favoriteColors,
       "window": _vm.window
     },
@@ -22767,7 +22772,7 @@ var __component__$1 = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$1,
   false,
   __vue2_injectStyles$1,
-  "0068707a",
+  "7afee166",
   null,
   null
 );
@@ -22782,16 +22787,17 @@ const Toolbar = /* @__PURE__ */ function() {
 function useEditor({ content, onChange, extensions: extensions2, isReadonlyRef }) {
   const editor = reactive(new Editor({
     content: ContentNormalizer.normalize(content.value),
-    onUpdate: () => onChange(editor.getJSON()),
+    onUpdate: () => onChange(markWysiwygContent(editor.getJSON())),
     extensions: extensions2,
     injectCSS: false
   }));
   onUnmounted(() => editor.destroy());
   watch(content, (value) => {
-    const isChanged = JSON.stringify(editor.getJSON()) !== JSON.stringify(value);
+    const content2 = unmarkWysiwygContent(value);
+    const isChanged = JSON.stringify(editor.getJSON()) !== JSON.stringify(content2);
     if (isChanged) {
-      const content2 = ContentNormalizer.normalize(value);
-      editor.commands.setContent(content2, false);
+      const content3 = ContentNormalizer.normalize(value);
+      editor.commands.setContent(content3, false);
     }
   });
   watch(isReadonlyRef, (isReadonly) => editor.setEditable(!isReadonly), { immediate: true });
@@ -22803,6 +22809,7 @@ function useToolbar({ wrapperRef, offsets, isActiveRef }) {
   function mount(element) {
     popper2 = createPopper(wrapperEl.value, element, {
       placement: "top-start",
+      strategy: "fixed",
       modifiers: [
         {
           name: "offset",
@@ -25958,7 +25965,7 @@ const __vue2_script = {
     });
     const updateToolbar = () => toolbar.update();
     function onChange(content) {
-      emit("input", markWysiwygContent(content));
+      emit("input", content);
       updateToolbar();
     }
     const pageBlocks = toRef(props, "pageBlocks");

package/lib/Wysiwyg.vue

@@ -21,7 +21,6 @@ import { ContextWindow, FavoriteColors, Storage } from './services';
 import { Devices } from './enums';
 import { outClick } from './directives';
 import { Font } from './models';
-import { markWysiwygContent } from './utils';
 
 const MIN_FONT_SIZE = 5;
 const MAX_FONT_SIZE = 112;
@@ -151,7 +150,7 @@ export default {
         const updateToolbar = () => toolbar.update();
 
         function onChange(content) {
-            emit('input', markWysiwygContent(content));
+            emit('input', content);
             updateToolbar();
         }
 

package/lib/components/base/colorPicker/ColorPicker.vue

@@ -2,6 +2,7 @@
     <ZipifyColorPicker
         ref="pickerRef"
         placement="bottom-end"
+        placement-strategy="fixed"
         :favorite-colors="favoriteColors"
         :window="window"
         @changeFavoriteColors="updateFavoriteColors"

package/lib/components/base/composables/useModalToggler.js

@@ -14,6 +14,7 @@ export function useModalToggler({ onBeforeOpened, onClosed, wrapperRef, modalRef
 
         popper = createPopper(wrapperEl.value, modalEl.value, {
             placement: 'bottom',
+            strategy: 'fixed',
             modifiers: [
                 {
                     name: 'offset',

package/lib/components/toolbar/Toolbar.vue

@@ -61,6 +61,7 @@ export default {
     color: rgb(var(--zw-color-n70));
     z-index: 999999;
     text-align: left;
+    position: fixed;
 }
 
 .zw-toolbar::before,

package/lib/composables/__tests__/__snapshots__/useEditor.test.js.snap

@@ -4,6 +4,7 @@ exports[`life cycle should emit changes 1`] = `
 Array [
   Array [
     Object {
+      "__wswg__": true,
       "content": Array [
         Object {
           "content": Array [

package/lib/composables/useEditor.js

@@ -1,11 +1,12 @@
 import { Editor } from '@tiptap/vue-2';
 import { onUnmounted, watch, reactive } from 'vue';
 import { ContentNormalizer } from '../services';
+import { markWysiwygContent, unmarkWysiwygContent } from '../utils';
 
 export function useEditor({ content, onChange, extensions, isReadonlyRef }) {
     const editor = reactive(new Editor({
         content: ContentNormalizer.normalize(content.value),
-        onUpdate: () => onChange(editor.getJSON()),
+        onUpdate: () => onChange(markWysiwygContent(editor.getJSON())),
         extensions,
         injectCSS: false
     }));
@@ -13,7 +14,8 @@ export function useEditor({ content, onChange, extensions, isReadonlyRef }) {
     onUnmounted(() => editor.destroy());
 
     watch(content, (value) => {
-        const isChanged = JSON.stringify(editor.getJSON()) !== JSON.stringify(value);
+        const content = unmarkWysiwygContent(value);
+        const isChanged = JSON.stringify(editor.getJSON()) !== JSON.stringify(content);
 
         if (isChanged) {
             const content = ContentNormalizer.normalize(value);

package/lib/composables/useToolbar.js

@@ -8,6 +8,7 @@ export function useToolbar({ wrapperRef, offsets, isActiveRef }) {
     function mount(element) {
         popper = createPopper(wrapperEl.value, element, {
             placement: 'top-start',
+            strategy: 'fixed',
             modifiers: [
                 {
                     name: 'offset',

package/lib/utils/index.js

@@ -7,4 +7,4 @@ export { convertLineHeight } from './convertLineHeight';
 export { convertFontSize } from './convertFontSize';
 export { convertAlignment } from './convertAlignment';
 export { importIcon } from './importIcon';
-export { isWysiwygContent, markWysiwygContent } from './isWysiwygContent';
+export { isWysiwygContent, markWysiwygContent, unmarkWysiwygContent } from './isWysiwygContent';

package/lib/utils/isWysiwygContent.js

@@ -2,6 +2,11 @@ export function isWysiwygContent(content) {
     return typeof content === 'object' && content.__wswg__;
 }
 
+// eslint-disable-next-line no-unused-vars
+export function unmarkWysiwygContent({ __wswg__, ...content }) {
+    return content;
+}
+
 export function markWysiwygContent(content) {
     return { ...content, __wswg__: true };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "1.0.0-dev.76",
+  "version": "1.0.0-dev.79",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "repository": {
@@ -43,7 +43,7 @@
     "simplebar": "^5.3.8"
   },
   "peerDependencies": {
-    "@zipify/colorpicker": "^2.1",
+    "@zipify/colorpicker": "^2.2",
     "vue": "^2.7"
   },
   "devDependencies": {