@zipify/wysiwyg 4.1.0-0 → 4.1.0-2

package/lib/components/toolbar/controls/link/LinkControl.vue

@@ -4,7 +4,12 @@
             <Icon name="link" size="28px" auto-color />
         </Button>
 
-        <Modal class="zw-link-modal" :toggler="toggler" ref="modalRef" focus-first-control>
+        <Modal
+            class="zw-link-modal"
+            :toggler="toggler"
+            :reference-ref="wrapperRef"
+            focus-first-control
+        >
             <LinkControlHeader @remove-link="removeLink" />
 
             <form class="zw-link-modal__body" @submit.prevent="applyLink" data-test-selector="form">
@@ -50,11 +55,9 @@ import LinkControlHeader from './LinkControlHeader';
 import { useLink } from './composables';
 import { LinkControlDestination } from './destination';
 
-const wrapperRef = ref(null);
-const modalRef = ref(null);
-
 const editor = inject(InjectionTokens.EDITOR);
 
+const wrapperRef = ref(null);
 const link = useLink();
 
 const isEmpty = () => {
@@ -88,20 +91,16 @@ const resetErrors = () => {
     urlValidator.reset();
 };
 
-const onBeforeOpened = () => {
-    editor.commands.extendMarkRange(TextSettings.LINK);
-    resetErrors();
-    link.prepareInitialFields();
-};
-
 const toggler = useModalToggler({
-    onBeforeOpened: () => onBeforeOpened(),
-    wrapperRef,
-    modalRef
+    onBeforeOpened: () => {
+        editor.commands.extendMarkRange(TextSettings.LINK);
+        resetErrors();
+        link.prepareInitialFields();
+    }
 });
 
 const isLink = editor.commands.isLink();
-const isActive = computed(() => unref(toggler.isOpened) || unref(isLink));
+const isActive = computed(() => toggler.isOpened || unref(isLink));
 
 const updateLinkText = (value) => {
     resetErrors();

package/lib/components/toolbar/controls/link/destination/LinkControlDestination.vue

@@ -61,7 +61,7 @@ const emit = defineEmits(['reset-errors']);
 
 const destinationTypes = [
     { id: LinkDestinations.URL, title: 'URL' },
-    { id: LinkDestinations.BLOCK, title: 'Page Block' }
+    { id: LinkDestinations.BLOCK, title: 'Page Section' }
 ];
 
 const link = toRef(props, 'link');

package/lib/components/toolbar/controls/link/destination/LinkControlPageBlock.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <FieldLabel class="zw-margin-bottom--xxs" field-id="link-destination">
-            Select block
+            Select section
         </FieldLabel>
 
         <Dropdown

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

@@ -1,4 +1,4 @@
-import { h, ref, toRef } from 'vue';
+import { h, toRef } from 'vue';
 import { EditorContent } from '@tiptap/vue-3';
 import { shallowMount } from '@vue/test-utils';
 import { buildTestExtensions } from '../../__tests__/utils';
@@ -14,11 +14,11 @@ const TestComponent = {
         });
     },
 
-    props: ['value'],
+    props: ['value', 'readonly'],
 
     setup(props, { emit }) {
         const { editor } = useEditor({
-            isReadonlyRef: ref(false),
+            isReadonlyRef: toRef(props, 'readonly'),
             content: toRef(props, 'value'),
             extensions: buildTestExtensions(),
             onChange: (content) => emit('input', content),
@@ -33,9 +33,12 @@ const createContent = (text = 'test') => NodeFactory.doc([
     NodeFactory.paragraph(text)
 ]);
 
-function createComponent({ content } = {}) {
+function createComponent({ content, isReadonly } = {}) {
     const wrapper = shallowMount(TestComponent, {
-        props: { value: content || createContent('test') }
+        props: {
+            value: content || createContent('test'),
+            readonly: isReadonly ?? false
+        }
     });
 
     return {
@@ -75,3 +78,21 @@ describe('life cycle', () => {
         expect(editor.getHTML()).toBe('<p class="zw-style">new</p>');
     });
 });
+
+describe('readonly', () => {
+    test('should change readonly', async () => {
+        const { wrapper, editor } = createComponent({ isReadonly: false });
+
+        await wrapper.setProps({ readonly: true });
+
+        expect(editor.isEditable).toBe(false);
+    });
+
+    test('should not emit change on readonly update', async () => {
+        const { wrapper, editor } = createComponent({ isReadonly: false });
+
+        await wrapper.setProps({ readonly: true });
+
+        expect(wrapper.emitted('input')).toBeFalsy();
+    });
+});

package/lib/composables/index.js

@@ -1,2 +1 @@
 export { useEditor } from './useEditor';
-export { useToolbar } from './useToolbar';

package/lib/composables/useEditor.js

@@ -13,7 +13,12 @@ export function useEditor({ content, onChange, extensions, isReadonlyRef }) {
         onUpdate: () => onChange(getContent()),
         extensions,
         injectCSS: false,
-        editable: !unref(isReadonlyRef)
+        editable: !unref(isReadonlyRef),
+        editorProps: {
+            attributes: {
+                class: 'zw-wysiwyg__content'
+            }
+        }
     }));
 
     onUnmounted(() => editor.destroy());
@@ -26,7 +31,7 @@ export function useEditor({ content, onChange, extensions, isReadonlyRef }) {
         }
     });
 
-    watch(isReadonlyRef, (isReadonly) => editor.setEditable(!isReadonly));
+    watch(isReadonlyRef, (isReadonly) => editor.setEditable(!isReadonly, false));
 
     return { editor, getContent };
 }

package/lib/styles/content.css

@@ -60,7 +60,6 @@ h4.zw-style.zw-style.zw-style {
 
 /* ProseMirror styles */
 
-
 .ProseMirror {
     position: relative;
     outline: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "4.1.0-0",
+  "version": "4.1.0-2",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "bin": {
@@ -17,12 +17,12 @@
     "url": "https://github.com/ZipifyApps/ZipifyWysiwyg/issues"
   },
   "scripts": {
-    "lib:build": "vite build --config config/build/lib.config.js",
-    "lib:release": "export $(cat ./.env | xargs) && release-it",
+    "lib:build": "vite build --config config/build/lib.config.mjs",
+    "lib:release": "[ -f .env ] && export $(cat .env | xargs) && release-it",
     "cli:build": "NODE_ENV=production rollup --config config/build/cli.config.js --bundleConfigAsCjs",
     "cli:dev": "NODE_ENV=development rollup --config config/build/cli.config.js --bundleConfigAsCjs --watch",
-    "example:start": "NODE_ENV=development vite serve --config config/build/example.config.js",
-    "example:build": "NODE_ENV=production vite build --config config/build/example.config.js",
+    "example:start": "NODE_ENV=development vite serve --config config/build/example.config.mjs",
+    "example:build": "NODE_ENV=production vite build --config config/build/example.config.mjs",
     "test:unit": "jest .",
     "lint:js": "eslint ./lib",
     "lint:css": "stylelint ./lib/**/*.{css,vue}",
@@ -30,25 +30,24 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.5.3",
-    "@popperjs/core": "^2.11.7",
-    "@tiptap/core": "^2.0.0",
-    "@tiptap/extension-document": "^2.0.0",
-    "@tiptap/extension-heading": "^2.0.0",
-    "@tiptap/extension-history": "^2.0.0",
-    "@tiptap/extension-link": "^2.0.0",
-    "@tiptap/extension-list-item": "^2.0.0",
-    "@tiptap/extension-paragraph": "^2.0.0",
-    "@tiptap/extension-text": "^2.0.0",
-    "@tiptap/pm": "^2.0.0",
-    "@tiptap/vue-3": "^2.0.0",
-    "commander": "^10.0.0",
-    "jsdom": "^21.1.1",
+    "@floating-ui/vue": "^1.0.2",
+    "@tiptap/core": "^2.1.13",
+    "@tiptap/extension-document": "^2.1.13",
+    "@tiptap/extension-heading": "^2.1.13",
+    "@tiptap/extension-history": "^2.1.13",
+    "@tiptap/extension-link": "^2.1.13",
+    "@tiptap/extension-list-item": "^2.1.13",
+    "@tiptap/extension-paragraph": "^2.1.13",
+    "@tiptap/extension-text": "^2.1.13",
+    "@tiptap/pm": "^2.1.13",
+    "@tiptap/vue-3": "^2.1.13",
+    "commander": "^11.1.0",
+    "jsdom": "^23.0.1",
     "lodash": "^4.17.21",
-    "simplebar": "^6.2.4"
+    "simplebar": "^6.2.5"
   },
   "peerDependencies": {
-    "@zipify/colorpicker": "^3.0",
+    "@zipify/colorpicker": "^3.1",
     "vue": "^3.2"
   },
   "peerDependenciesMeta": {
@@ -60,39 +59,39 @@
     }
   },
   "devDependencies": {
-    "@babel/core": "^7.21.3",
-    "@babel/eslint-parser": "^7.21.3",
-    "@babel/plugin-transform-runtime": "^7.21.0",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/runtime": "^7.21.0",
-    "@optimize-lodash/rollup-plugin": "^4.0.3",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^24.0.1",
-    "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-replace": "^5.0.2",
-    "@rollup/plugin-terser": "^0.4.0",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vue/test-utils": "^2.3.2",
-    "@vue/vue3-jest": "^29.2.2",
-    "@zipify/colorpicker": "^3.0.0",
-    "@zipify/eslint-config": "^1.2.0",
-    "babel-jest": "^29.5.0",
-    "eslint": "8.37.0",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jest": "^27.2.1",
-    "eslint-plugin-vue": "^9.10.0",
+    "@babel/core": "^7.23.5",
+    "@babel/eslint-parser": "^7.23.3",
+    "@babel/plugin-transform-runtime": "^7.23.4",
+    "@babel/preset-env": "^7.23.5",
+    "@babel/runtime": "^7.23.5",
+    "@optimize-lodash/rollup-plugin": "^4.0.4",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-json": "^6.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^5.0.5",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@vitejs/plugin-vue": "^4.5.2",
+    "@vue/test-utils": "^2.4.3",
+    "@vue/vue3-jest": "^29.2.6",
+    "@zipify/colorpicker": "^3.1.0",
+    "@zipify/eslint-config": "^1.4.1",
+    "babel-jest": "^29.7.0",
+    "eslint": "^8.55.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jest": "^27.6.0",
+    "eslint-plugin-vue": "^9.19.2",
     "husky": "^8.0.3",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
-    "lint-staged": "^13.2.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "lint-staged": "^15.2.0",
     "postcss-html": "^1.5.0",
-    "release-it": "^15.9.3",
-    "rollup": "^3.20.2",
+    "release-it": "^17.0.0",
+    "rollup": "^4.6.1",
     "stylelint": "^14.16.1",
-    "svgo": "^3.0.2",
-    "vite": "^4.2.1",
-    "vue": "3.3.4"
+    "svgo": "^3.0.5",
+    "vite": "^5.0.6",
+    "vue": "3.3.10"
   },
   "engines": {
     "node": ">=18.12.0"

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

@@ -1,59 +0,0 @@
-import { ref } from 'vue';
-import { withComponentContext } from '../../../../__tests__/utils';
-import { InjectionTokens } from '../../../../injectionTokens';
-import { useModalToggler } from '../useModalToggler';
-import { useElementRef } from '../useElementRef';
-
-jest.mock('@floating-ui/dom');
-
-const createEditor = () => ({
-    commands: {
-        storeSelection: jest.fn(),
-        restoreSelection: jest.fn()
-    }
-});
-
-const el = document.createElement('div');
-const elementRef = useElementRef(ref(el));
-
-function createWrapper() {
-    return withComponentContext(() => {
-        return useModalToggler({
-            onClosed: jest.fn(),
-            onBeforeOpened: jest.fn(),
-            wrapperRef: elementRef,
-            modalRef: elementRef
-        });
-    }, {
-        global: {
-            provide: { [InjectionTokens.EDITOR]: createEditor() }
-        }
-    });
-}
-
-describe('manage opened state', () => {
-    test('should open modal', () => {
-        const toggler = createWrapper();
-
-        toggler.open();
-
-        expect(toggler.isOpened.value).toBe(true);
-    });
-
-    test('should close modal', () => {
-        const toggler = createWrapper();
-
-        toggler.open();
-        toggler.close();
-
-        expect(toggler.isOpened.value).toBe(false);
-    });
-
-    test('should toggle modal', () => {
-        const toggler = createWrapper();
-
-        toggler.toggle(true);
-
-        expect(toggler.isOpened.value).toBe(true);
-    });
-});

package/lib/composables/useToolbar.js

@@ -1,36 +0,0 @@
-import { onUnmounted } from 'vue';
-import { autoUpdate, computePosition, limitShift, offset, shift } from '@floating-ui/dom';
-import { useElementRef } from '../components/base';
-
-export function useToolbar({ wrapperRef, offsets, isActiveRef, placementRef }) {
-    const wrapperEl = useElementRef(wrapperRef);
-    let floatingInstance;
-
-    function mount(element) {
-        floatingInstance = autoUpdate(wrapperEl.value, element, async () => {
-            const positioning = await computePosition(wrapperEl.value, element, {
-                placement: placementRef.value,
-                strategy: 'fixed',
-                middleware: [
-                    shift({ padding: 16, crossAxis: true, limiter: limitShift() }),
-                    offset({ crossAxis: offsets[0], mainAxis: offsets[1] })
-                ]
-            });
-
-            const { x, y } = positioning;
-
-            Object.assign(element.style, {
-                left: `${x}px`,
-                top: `${y}px`
-            });
-        });
-    }
-
-    onUnmounted(() => floatingInstance?.());
-
-    return {
-        mount,
-        isActiveRef,
-        offsets
-    };
-}