@zipify/wysiwyg 1.0.0-dev.75 → 1.0.0-dev.78

package/dist/wysiwyg.mjs

@@ -14391,6 +14391,15 @@ function importIcon(name) {
   }
   return icon;
 }
+function isWysiwygContent(content) {
+  return typeof content === "object" && content.__wswg__;
+}
+function unmarkWysiwygContent({ __wswg__, ...content }) {
+  return content;
+}
+function markWysiwygContent(content) {
+  return { ...content, __wswg__: true };
+}
 var render$E = function __render__6() {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -18963,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",
@@ -20484,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
     },
@@ -22776,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(), __wswg__: true }),
+    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 });
@@ -22797,6 +22809,7 @@ function useToolbar({ wrapperRef, offsets, isActiveRef }) {
   function mount(element) {
     popper2 = createPopper(wrapperEl.value, element, {
       placement: "top-start",
+      strategy: "fixed",
       modifiers: [
         {
           name: "offset",
@@ -26020,5 +26033,6 @@ export {
   NodeFactory,
   NodeTypes,
   TextSettings,
-  Wysiwyg
+  Wysiwyg,
+  isWysiwygContent
 };

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/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(), __wswg__: true }),
+        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/index.js

@@ -1,3 +1,4 @@
 export { default as Wysiwyg } from './Wysiwyg';
 export { NodeFactory } from './services';
 export { NodeTypes, TextSettings, Alignments } from './enums';
+export { isWysiwygContent } from './utils';

package/lib/utils/index.js

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

package/lib/utils/isWysiwygContent.js

@@ -0,0 +1,12 @@
+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.75",
+  "version": "1.0.0-dev.78",
   "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": {