quasar-ui-sellmate-ui-kit 3.4.3 → 3.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-sellmate-ui-kit",
-  "version": "3.4.3",
+  "version": "3.5.1",
   "author": "Sellmate Dev Team <dev@sellmate.co.kr>",
   "description": "Sellmate UI Kit",
   "license": "MIT",
@@ -34,6 +34,7 @@
     "@quasar/extras": "^1.16.9",
     "@quasar/quasar-app-extension-testing-unit-vitest": "1.0.0",
     "@rollup/plugin-buble": "^0.21.3",
+    "@rollup/plugin-commonjs": "^21.1.0",
     "@rollup/plugin-json": "^4.0.0",
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-replace": "^2.4.2",
@@ -55,6 +56,7 @@
     "eslint-plugin-vue": "^9.20.1",
     "fs-extra": "^8.1.0",
     "happy-dom": "^13.6.2",
+    "interactjs": "^1.10.27",
     "open": "^7.3.0",
     "postcss": "^8.1.9",
     "prettier": "^3.2.4",
@@ -86,6 +88,7 @@
     "last 4 iOS versions"
   ],
   "dependencies": {
+    "@interactjs/inertia": "^1.10.27",
     "material-icons": "^1.13.12",
     "sass": "^1.70.0"
   }

package/src/components/SEditor.vue

@@ -7,7 +7,7 @@
     }"
     :min-height="`${minHeight}px`"
     :max-height="maxHeight != null ? `${maxHeight}px` : null"
-    paragraph-tag="div"
+    paragraph-tag="p"
     v-bind="$attrs"
     :definitions="toolDefinitions"
     :toolbar="toolbarDefinitions"
@@ -24,7 +24,7 @@
               <q-input
                 class="bg-white font-12-400"
                 style="width: 352px"
-                v-model="value"
+                v-model="imgValue"
                 dense
                 outlined
                 type="textarea"
@@ -47,10 +47,11 @@
       </q-btn>
     </template>
   </q-editor>
+  {{ model }}
 </template>
 
 <script>
-  import { defineComponent, ref, watch, computed } from 'vue';
+  import { defineComponent, ref, watch, computed, onMounted } from 'vue';
   import {
     extend,
     QCard,
@@ -62,6 +63,7 @@
     QBtn,
     useQuasar,
   } from 'quasar';
+  import resizeImage from '../composables/resizable';
 
   export default defineComponent({
     name: 'SEditor',
@@ -133,11 +135,72 @@
     },
     setup(props, { emit }) {
       const model = ref(props.modelValue);
+      const editorRef = ref(null);
+
+      // delete handler element
+      function unwrapImg() {
+        const contentEl = editorRef.value.getContentEl();
+        const resizeHandler = contentEl.querySelectorAll('.img-resize-handler');
+
+        resizeHandler.forEach(div => {
+          const img = div.querySelector('img');
+          const parentParagraph = div.parentNode;
+          parentParagraph.replaceChild(img, div);
+        });
+
+        model.value = contentEl.innerHTML;
+      }
+
+      // create handler element & resize event
+      function wrapImgWithDiv(targetImg) {
+        const newDiv = document.createElement('div');
+        const className = 'img-resize-handler';
+        newDiv.classList.add(className);
+        newDiv.style.height = `${targetImg.height}px`;
+        newDiv.style.width = `${targetImg.width}px`;
+        targetImg.parentNode.insertBefore(newDiv, targetImg);
+        newDiv.append(targetImg);
+        resizeImage(className);
+      }
+
+      // add click event in contents
+      function addImageClickListener() {
+        if (!editorRef.value) {
+          return;
+        }
+        const contentEl = editorRef.value.getContentEl();
+
+        if (!contentEl) {
+          return;
+        }
+
+        contentEl.addEventListener('click', event => {
+          const images = contentEl.querySelectorAll('img');
+          if (!images.length) {
+            return;
+          }
+
+          // when clicked, check image document in contents
+          if (Array.from(images).some(el => el.contains(event.target))) {
+            wrapImgWithDiv(event.target);
+            return;
+          }
+
+          unwrapImg();
+        });
+      }
+
+      onMounted(() => {
+        const contentEl = editorRef.value.getContentEl();
+        if (contentEl) {
+          addImageClickListener();
+        }
+      });
+
       const $q = useQuasar();
 
       // Toolbar Begin
-      // const isOpened = ref(false);
-      const value = ref('');
+      const imgValue = ref('');
 
       function setFontSize(fontSize) {
         function isRootNode(node) {
@@ -410,13 +473,13 @@
       };
 
       function onOkClick() {
-        value.value.split('\n').forEach((el, idx) => {
+        imgValue.value.split('\n').forEach((el, idx) => {
           if (el === '') return;
-          model.value += `<p><img style="max-width:100%;" src=${el} :alt="image${idx}"/></p>`;
+          model.value += `<p><img style="max-width:100%;" src=${el} :alt="image${idx}" /></p>`;
         });
 
-        // isOpened.value = false;
-        value.value = '';
+        addImageClickListener();
+        imgValue.value = '';
       }
       // Toolbar End
 
@@ -426,16 +489,14 @@
           model.value = newValue;
         },
       );
-
       watch(
         () => model.value,
-        () => {
-          emit('update:modelValue', model.value);
+        newValue => {
+          emit('update:modelValue', newValue);
         },
+        { deep: true },
       );
 
-      const editorRef = ref(null);
-
       // https://quasar.dev/vue-components/editor#plaintext-pasting 참조
       function onPaste(event) {
         if (event.target.nodeName === 'INPUT') return;
@@ -464,9 +525,8 @@
           return bar.map(group => group.map(item => (item === 'fontSizes' ? fontSizes : item)));
         }),
         toolDefinitions,
-        // isOpened,
         model,
-        value,
+        imgValue,
         onOkClick,
         onPaste,
         editorRef,
@@ -495,5 +555,33 @@
         }
       }
     }
+    .q-editor__content {
+      > p > img {
+        display: inline-block;
+      }
+      .img-resize-handler {
+        position: relative;
+        background-color: transparent;
+        display: inline-block;
+        resize: both;
+        overflow: hidden;
+        &:after {
+          content: '';
+          position: absolute;
+          border: 1px solid;
+          width: 100%;
+          height: 100%;
+          top: 0;
+          left: 0;
+        }
+
+        > img {
+          display: inline-block;
+          object-fit: contain;
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
   }
 </style>

package/src/composables/resizable.js

@@ -0,0 +1,55 @@
+import interact from 'interactjs';
+
+function resizeImage(className) {
+  interact(`.${className}`)
+    .origin('self')
+    .resizable({
+      // resize from all edges and corners
+      edges: { left: true, right: true, bottom: true, top: true },
+
+      listeners: {
+        move(event) {
+          const { target } = event
+          let x = (parseFloat(target.getAttribute('data-x')) || 0)
+          let y = (parseFloat(target.getAttribute('data-y')) || 0)
+
+          // update the element's style
+          target.style.width = `${event.rect.width}px`
+          target.style.height = `${event.rect.height}px`
+
+          // translate when resizing from top or left edges
+          x += event.deltaRect.left
+          y += event.deltaRect.top
+
+          target.style.transform = `translate(${x}px,${y}px)`
+
+          target.setAttribute('data-x', x)
+          target.setAttribute('data-y', y)
+          const imgEl = target.querySelector('img')
+          if (imgEl) {
+            imgEl.width = target.style.width.replace('px', '')
+            imgEl.height = target.style.height.replace('px', '')
+          }
+        }
+      },
+      modifiers: [
+        // keep the edges inside the parent
+        interact.modifiers.restrictEdges({
+          outer: 'parent'
+        }),
+
+        interact.modifiers.aspectRatio({
+          // make sure the width is always double the height
+          ratio: 'preserve',
+          // also restrict the size by nesting another modifier
+          modifiers: [
+            interact.modifiers.restrictSize({ max: 'parent' }),
+          ],
+        }),
+      ],
+
+      inertia: true
+    })
+}
+
+export default resizeImage

package/vitest.config.ts

@@ -16,6 +16,9 @@ export default defineConfig({
       'test/vitest/__tests__/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}',
     ],
   },
+  rollupoptions: {
+    context: 'window',
+  },
   plugins: [
     vue({
       template: { transformAssetUrls },