quasar-ui-sellmate-ui-kit 3.11.1 → 3.11.2

package/src/components/SEditor.vue

@@ -1,590 +1,590 @@
-<template>
-  <q-editor
-    ref="editorRef"
-    :content-style="{
-      'font-size': `${defaultFontSize}px`,
-      resize: resizable ? 'vertical' : 'none',
-    }"
-    :min-height="`${minHeight}px`"
-    :max-height="maxHeight != null ? `${maxHeight}px` : null"
-    paragraph-tag="p"
-    v-bind="$attrs"
-    :definitions="toolDefinitions"
-    :toolbar="toolbarDefinitions"
-    v-model="model"
-    class="s-editor"
-    v-on="usePlaintextPasting ? { paste: onPaste } : {}"
-  >
-    <template #upload>
-      <q-btn flat dense :ripple="false" size="sm">
-        <q-icon name="image" />
-        <q-menu>
-          <q-card class="q-pa-sm bg-Grey_Lighten-5">
-            <q-card-section class="q-pa-none">
-              <q-input
-                class="bg-white font-12-400"
-                style="width: 352px"
-                v-model="imgValue"
-                dense
-                outlined
-                type="textarea"
-                :placeholder="imgInputPlaceholder"
-                autofocus
-              />
-              <div class="row reverse q-mt-sm">
-                <s-button
-                  outline
-                  :label="imgUploadBtnLabel"
-                  @click="onOkClick"
-                  v-close-popup
-                  color="Blue_B_Default"
-                  class="bg-white"
-                />
-              </div>
-            </q-card-section>
-          </q-card>
-        </q-menu>
-      </q-btn>
-    </template>
-  </q-editor>
-</template>
-
-<script>
-  import { defineComponent, ref, watch, computed, onMounted } from 'vue';
-  import {
-    extend,
-    QCard,
-    QCardSection,
-    QMenu,
-    QIcon,
-    QEditor,
-    QInput,
-    QBtn,
-    useQuasar,
-  } from 'quasar';
-  import resizeImage from '../composables/resizable';
-
-  export default defineComponent({
-    name: 'SEditor',
-    components: {
-      QEditor,
-      QMenu,
-      QCard,
-      QCardSection,
-      QInput,
-      QBtn,
-      QIcon,
-    },
-    props: {
-      definitions: Object,
-      toolbar: {
-        type: Array,
-        validator: v => v.length === 0 || v.every(group => group.length),
-        default: () => [
-          ['left', 'center', 'right', 'justify'],
-          ['bold', 'italic', 'underline', 'strike'],
-          ['link', 'hr'],
-          ['fontSizes', 'removeFormat'],
-          ['unordered', 'ordered', 'outdent', 'indent'],
-          ['undo', 'redo'],
-          ['viewsource'],
-        ],
-      },
-      defaultFontSize: {
-        type: Number,
-        default: 13,
-      },
-      fontSizes: {
-        type: Object,
-        default: null,
-      },
-      resizable: {
-        type: Boolean,
-        default: false,
-      },
-      minHeight: {
-        type: Number,
-        default: 250,
-      },
-      maxHeight: {
-        type: Number,
-        default: null,
-      },
-      modelValue: {
-        type: String,
-        required: true,
-      },
-      useImgUpload: {
-        type: Boolean,
-        default: false,
-      },
-      imgUploadBtnLabel: {
-        type: String,
-        default: '삽입',
-      },
-      imgInputPlaceholder: {
-        type: String,
-        default:
-          '이미지 파일 경로를 엔터키로 구분하여 여러개 입력할 수 있습니다.\n예시)\nhttps://www.sellmate.co.kr/img/new/logo01.png\nhttps://www.sellmate.co.kr/img/new/logo02.png\nhttps://www.sellmate.co.kr/img/new/logo03.png',
-      },
-      usePlaintextPasting: {
-        type: Boolean,
-        default: false,
-      },
-      imgResizable: {
-        type: Boolean,
-        default: false,
-      },
-    },
-    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(() => {
-        if (!props.imgResizable) return;
-        const contentEl = editorRef.value.getContentEl();
-        if (contentEl) {
-          addImageClickListener();
-        }
-      });
-
-      const $q = useQuasar();
-
-      // Toolbar Begin
-      const imgValue = ref('');
-
-      function setFontSize(fontSize) {
-        function isRootNode(node) {
-          return (
-            node.nodeType !== Node.TEXT_NODE &&
-            (node.className.indexOf('q-editor__content') >= 0 ||
-              node.hasAttribute('contenteditable'))
-          );
-        }
-
-        function wrapAndReplaceRange(range) {
-          const content = document.createTextNode(range.toString());
-          const wrapperNode = document.createElement('span');
-          wrapperNode.append(content);
-
-          range.deleteContents();
-          range.insertNode(wrapperNode);
-
-          return wrapperNode;
-        }
-
-        function wrapAndReplaceTextNodeRange(node) {
-          const nodeRange = document.createRange();
-          nodeRange.setStart(node, 0);
-          nodeRange.setEnd(node, node.length);
-          return wrapAndReplaceRange(nodeRange);
-        }
-
-        function wrapTextNode(node) {
-          const wrapper = document.createElement('span');
-          wrapper.innerText = node.textContent;
-          return wrapper;
-        }
-
-        function getNonTextNode(top, node) {
-          const parent = node.parentNode;
-          if (
-            top !== parent &&
-            Array.from(parent.childNodes).length === 1 &&
-            parent.childNodes[0] === node
-          ) {
-            return parent;
-          }
-          return wrapAndReplaceTextNodeRange(node);
-        }
-
-        function getDirectChildNode(parent, node) {
-          if (node.parentNode === parent) {
-            return node;
-          }
-          return getDirectChildNode(parent, node.parentNode);
-        }
-
-        function removeChildrenFontStyle(node) {
-          node.childNodes.forEach(child => {
-            if (child.nodeType !== Node.TEXT_NODE) {
-              child.style.fontSize = null;
-              removeChildrenFontStyle(child);
-            }
-          });
-        }
-
-        function applyStyleToChildNode(fontSizeStyle, node, childIndex) {
-          const childNode = node.childNodes[childIndex];
-          if (childNode.nodeType === Node.TEXT_NODE) {
-            const nodeWrapper = wrapTextNode(childNode);
-            node.replaceChild(nodeWrapper, childNode);
-          }
-          node.childNodes[childIndex].style.fontSize = fontSizeStyle;
-          removeChildrenFontStyle(node.childNodes[childIndex]);
-        }
-
-        function applyStyleToSiblings(fontSizeStyle, top, node, toBackward = false) {
-          const parent = node.parentNode;
-          if (top === parent) return;
-          const nodeIndex = Array.from(parent.childNodes).indexOf(node);
-          for (
-            let index = toBackward ? 0 : nodeIndex + 1;
-            index < (toBackward ? nodeIndex : parent.childNodes.length);
-            index++
-          ) {
-            applyStyleToChildNode(fontSizeStyle, parent, index);
-          }
-          applyStyleToSiblings(fontSizeStyle, top, parent, toBackward);
-        }
-
-        function applyStyleForward(fontSizeStyle, top, node) {
-          applyStyleToSiblings(fontSizeStyle, top, node);
-        }
-
-        function applyStyleBackward(fontSizeStyle, top, node) {
-          applyStyleToSiblings(fontSizeStyle, top, node, true);
-        }
-
-        const fontSizeStyle = `${fontSize}px`;
-
-        const selection = window.getSelection();
-        const range = selection.getRangeAt(0);
-        if (range.collapsed) {
-          const emptyNode = document.createElement('span');
-          emptyNode.style.fontSize = fontSizeStyle;
-          range.insertNode(emptyNode);
-          return;
-        }
-
-        const topNode = range.commonAncestorContainer;
-        const start = range.startContainer;
-        const end = range.endContainer;
-
-        const isSingleNode = start === end;
-        const isNotFromNodeStart = range.startOffset > 0;
-        const isNotToNodeEnd = range.endOffset < end.length;
-        const isPartialSelection = isNotFromNodeStart || isNotToNodeEnd;
-        const isRootChildren = isRootNode(topNode);
-
-        if (isSingleNode) {
-          if (isPartialSelection || isRootChildren) {
-            const wrapperNode = wrapAndReplaceRange(range);
-            wrapperNode.style.fontSize = fontSizeStyle;
-          } else {
-            const targetNode =
-              topNode.nodeType === Node.TEXT_NODE ? wrapAndReplaceTextNodeRange(topNode) : topNode;
-            targetNode.style.fontSize = fontSizeStyle;
-            selection.extend(targetNode.childNodes[0], targetNode.textContent.length);
-          }
-        } else {
-          const startNode = getDirectChildNode(topNode, start);
-          const endNode = getDirectChildNode(topNode, end);
-          const startIndex = Array.from(topNode.childNodes).indexOf(startNode);
-          const endIndex = Array.from(topNode.childNodes).indexOf(endNode);
-          // middle line(s)
-          for (let index = startIndex + 1; index < endIndex; index++) {
-            applyStyleToChildNode(fontSizeStyle, topNode, index);
-          }
-          // first line
-          if (isNotFromNodeStart) {
-            const startRange = document.createRange();
-            startRange.setStart(start, range.startOffset);
-            startRange.setEnd(start, start.length);
-            const startWrapper = wrapAndReplaceRange(startRange);
-            startWrapper.style.fontSize = fontSizeStyle;
-            // range.setStart(startWrapper, 0);
-            // selection.collapse(startWrapper);
-            // selection.extend(end, range.endOffset);
-            applyStyleForward(fontSizeStyle, topNode, startWrapper);
-          } else {
-            const firstNode =
-              start.nodeType === Node.TEXT_NODE ? getNonTextNode(topNode, start) : start;
-            firstNode.style.fontSize = fontSizeStyle;
-            if (start !== startNode) applyStyleForward(fontSizeStyle, topNode, firstNode);
-          }
-          // last line
-          if (isNotToNodeEnd) {
-            const endRange = document.createRange();
-            endRange.setStart(end, 0);
-            endRange.setEnd(end, range.endOffset);
-            const endWrapper = wrapAndReplaceRange(endRange);
-            endWrapper.style.fontSize = fontSizeStyle;
-            range.setEnd(endWrapper.childNodes[0], endWrapper.textContent.length);
-            selection.extend(endWrapper.childNodes[0], endWrapper.textContent.length);
-            applyStyleBackward(fontSizeStyle, topNode, endWrapper);
-          } else {
-            const lastNode = end.nodeType === Node.TEXT_NODE ? getNonTextNode(topNode, end) : end;
-            lastNode.style.fontSize = fontSizeStyle;
-            if (end !== endNode) applyStyleBackward(fontSizeStyle, topNode, lastNode);
-          }
-        }
-
-        // FIXME: exeCommand API 를 호출하지 않으면 Quasar Editor 컴포넌트에서 모델 업데이트가 일어나지 않음.
-        // 강제로 bold 활성화 비활성화 동작 수행으로 모델 변경 적용. 원인 파악 후 적절히 해결할 것
-        // 참고> execCommand 만으로 스타일 적용 가능하지만, div 태그로 감싸지지 않은 첫 줄에서 수행 시 태그 위치 설정 관련 오류 발생
-        //
-        // const spanString = `<span style="font-size: ${fontSize}px;">${document
-        //   .getSelection()
-        //   .toString()}</span>`;
-        // document.execCommand('insertHTML', false, spanString);
-        //
-        document.execCommand('bold', false);
-        document.execCommand('bold', false);
-      }
-
-      const sizeDefinitions = extend(
-        true,
-        {
-          size1: {
-            label: '9px',
-            size: 9,
-          },
-          size2: {
-            label: '11px',
-            size: 11,
-          },
-          size3: {
-            label: '13px',
-            size: 13,
-          },
-          size4: {
-            label: '15px',
-            size: 15,
-          },
-          size5: {
-            label: '18px',
-            size: 18,
-          },
-          size6: {
-            label: '20px',
-            size: 20,
-          },
-          adjustLabelSize: true,
-        },
-        props.fontSizes || {},
-      );
-
-      const toolDefinitions = extend(true, {}, props.definitions || {}, {
-        // upload: {
-        //   icon: 'image',
-        //   handler: () => isOpened.value = true,
-        // },
-        size1: {
-          tip: sizeDefinitions.size1.label,
-          htmlTip: sizeDefinitions.adjustLabelSize
-            ? `<span style="font-size: ${sizeDefinitions.size1.size}px">${sizeDefinitions.size1.label}</span>`
-            : null,
-          handler: () => setFontSize(sizeDefinitions.size1.size),
-        },
-        size2: {
-          tip: sizeDefinitions.size2.label,
-          htmlTip: sizeDefinitions.adjustLabelSize
-            ? `<span style="font-size: ${sizeDefinitions.size2.size}px">${sizeDefinitions.size2.label}</span>`
-            : null,
-          handler: () => setFontSize(sizeDefinitions.size2.size),
-        },
-        size3: {
-          tip: sizeDefinitions.size3.label,
-          htmlTip: sizeDefinitions.adjustLabelSize
-            ? `<span style="font-size: ${sizeDefinitions.size3.size}px">${sizeDefinitions.size3.label}</span>`
-            : null,
-          handler: () => setFontSize(sizeDefinitions.size3.size),
-        },
-        size4: {
-          tip: sizeDefinitions.size4.label,
-          htmlTip: sizeDefinitions.adjustLabelSize
-            ? `<span style="font-size: ${sizeDefinitions.size4.size}px">${sizeDefinitions.size4.label}</span>`
-            : null,
-          handler: () => setFontSize(sizeDefinitions.size4.size),
-        },
-        size5: {
-          tip: sizeDefinitions.size5.label,
-          htmlTip: sizeDefinitions.adjustLabelSize
-            ? `<span style="font-size: ${sizeDefinitions.size5.size}px">${sizeDefinitions.size5.label}</span>`
-            : null,
-          handler: () => setFontSize(sizeDefinitions.size5.size),
-        },
-        size6: {
-          tip: sizeDefinitions.size6.label,
-          htmlTip: sizeDefinitions.adjustLabelSize
-            ? `<span style="font-size: ${sizeDefinitions.size6.size}px">${sizeDefinitions.size6.label}</span>`
-            : null,
-          handler: () => setFontSize(sizeDefinitions.size6.size),
-        },
-      });
-
-      const fontSizes = {
-        label: $q.lang.editor.fontSize,
-        icon: $q.iconSet.editor.fontSize,
-        fixedLabel: true,
-        fixedIcon: true,
-        list: 'no-icons',
-        options: ['size1', 'size2', 'size3', 'size4', 'size5', 'size6'],
-      };
-
-      function onOkClick() {
-        imgValue.value.split('\n').forEach((el, idx) => {
-          if (el === '') return;
-          model.value += `<p style="max-width: 100%"><img style="max-width: 100%" src=${el} :alt="image${idx}" /></p>`;
-        });
-        if (props.imgResizable) addImageClickListener();
-        imgValue.value = '';
-      }
-      // Toolbar End
-
-      watch(
-        () => props.modelValue,
-        newValue => {
-          model.value = newValue;
-        },
-      );
-      watch(
-        () => model.value,
-        newValue => {
-          emit('update:modelValue', newValue);
-        },
-        { deep: true },
-      );
-
-      // https://quasar.dev/vue-components/editor#plaintext-pasting 참조
-      function onPaste(event) {
-        if (event.target.nodeName === 'INPUT') return;
-        let text = '';
-        let onPasteStripFormattingIEPaste = false;
-        event.preventDefault();
-        event.stopPropagation();
-        if (event.originalEvent && event.originalEvent.clipboardData.getData) {
-          text = event.originalEvent.clipboardData.getData('text/plain');
-          editorRef.value.runCmd('insertText', text);
-        } else if (event.clipboardData && event.clipboardData.getData) {
-          text = event.clipboardData.getData('text/plain');
-          editorRef.value.runCmd('insertText', text);
-        } else if (window.clipboardData && window.clipboardData.getData) {
-          if (!onPasteStripFormattingIEPaste) {
-            onPasteStripFormattingIEPaste = true;
-            editorRef.value.runCmd('ms-pasteTextOnly', text);
-          }
-          onPasteStripFormattingIEPaste = false;
-        }
-      }
-
-      return {
-        toolbarDefinitions: computed(() => {
-          const bar = props.useImgUpload ? [...props.toolbar, ['upload']] : props.toolbar;
-          return bar.map(group => group.map(item => (item === 'fontSizes' ? fontSizes : item)));
-        }),
-        toolDefinitions,
-        model,
-        imgValue,
-        onOkClick,
-        onPaste,
-        editorRef,
-      };
-    },
-  });
-</script>
-<style lang="scss">
-  .s-editor {
-    > .q-editor__toolbars-container {
-      > .q-editor__toolbar {
-        height: 32px;
-        overflow-y: hidden;
-      }
-    }
-
-    // 툴바 순서 변경시 참고 필요
-    .q-editor__toolbars-container {
-      > .q-editor__toolbar {
-        > .q-editor__toolbar-group:nth-child(2) {
-          > .q-btn-dropdown {
-            > .q-btn__content {
-              width: 91px;
-            }
-          }
-        }
-      }
-    }
-    .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>
+<template>
+  <q-editor
+    ref="editorRef"
+    :content-style="{
+      'font-size': `${defaultFontSize}px`,
+      resize: resizable ? 'vertical' : 'none',
+    }"
+    :min-height="`${minHeight}px`"
+    :max-height="maxHeight != null ? `${maxHeight}px` : null"
+    paragraph-tag="p"
+    v-bind="$attrs"
+    :definitions="toolDefinitions"
+    :toolbar="toolbarDefinitions"
+    v-model="model"
+    class="s-editor"
+    v-on="usePlaintextPasting ? { paste: onPaste } : {}"
+  >
+    <template #upload>
+      <q-btn flat dense :ripple="false" size="sm">
+        <q-icon name="image" />
+        <q-menu>
+          <q-card class="q-pa-sm bg-Grey_Lighten-5">
+            <q-card-section class="q-pa-none">
+              <q-input
+                class="bg-white font-12-400"
+                style="width: 352px"
+                v-model="imgValue"
+                dense
+                outlined
+                type="textarea"
+                :placeholder="imgInputPlaceholder"
+                autofocus
+              />
+              <div class="row reverse q-mt-sm">
+                <s-button
+                  outline
+                  :label="imgUploadBtnLabel"
+                  @click="onOkClick"
+                  v-close-popup
+                  color="Blue_B_Default"
+                  class="bg-white"
+                />
+              </div>
+            </q-card-section>
+          </q-card>
+        </q-menu>
+      </q-btn>
+    </template>
+  </q-editor>
+</template>
+
+<script>
+  import { defineComponent, ref, watch, computed, onMounted } from 'vue';
+  import {
+    extend,
+    QCard,
+    QCardSection,
+    QMenu,
+    QIcon,
+    QEditor,
+    QInput,
+    QBtn,
+    useQuasar,
+  } from 'quasar';
+  import resizeImage from '../composables/resizable';
+
+  export default defineComponent({
+    name: 'SEditor',
+    components: {
+      QEditor,
+      QMenu,
+      QCard,
+      QCardSection,
+      QInput,
+      QBtn,
+      QIcon,
+    },
+    props: {
+      definitions: Object,
+      toolbar: {
+        type: Array,
+        validator: v => v.length === 0 || v.every(group => group.length),
+        default: () => [
+          ['left', 'center', 'right', 'justify'],
+          ['bold', 'italic', 'underline', 'strike'],
+          ['link', 'hr'],
+          ['fontSizes', 'removeFormat'],
+          ['unordered', 'ordered', 'outdent', 'indent'],
+          ['undo', 'redo'],
+          ['viewsource'],
+        ],
+      },
+      defaultFontSize: {
+        type: Number,
+        default: 13,
+      },
+      fontSizes: {
+        type: Object,
+        default: null,
+      },
+      resizable: {
+        type: Boolean,
+        default: false,
+      },
+      minHeight: {
+        type: Number,
+        default: 250,
+      },
+      maxHeight: {
+        type: Number,
+        default: null,
+      },
+      modelValue: {
+        type: String,
+        required: true,
+      },
+      useImgUpload: {
+        type: Boolean,
+        default: false,
+      },
+      imgUploadBtnLabel: {
+        type: String,
+        default: '삽입',
+      },
+      imgInputPlaceholder: {
+        type: String,
+        default:
+          '이미지 파일 경로를 엔터키로 구분하여 여러개 입력할 수 있습니다.\n예시)\nhttps://www.sellmate.co.kr/img/new/logo01.png\nhttps://www.sellmate.co.kr/img/new/logo02.png\nhttps://www.sellmate.co.kr/img/new/logo03.png',
+      },
+      usePlaintextPasting: {
+        type: Boolean,
+        default: false,
+      },
+      imgResizable: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    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(() => {
+        if (!props.imgResizable) return;
+        const contentEl = editorRef.value.getContentEl();
+        if (contentEl) {
+          addImageClickListener();
+        }
+      });
+
+      const $q = useQuasar();
+
+      // Toolbar Begin
+      const imgValue = ref('');
+
+      function setFontSize(fontSize) {
+        function isRootNode(node) {
+          return (
+            node.nodeType !== Node.TEXT_NODE &&
+            (node.className.indexOf('q-editor__content') >= 0 ||
+              node.hasAttribute('contenteditable'))
+          );
+        }
+
+        function wrapAndReplaceRange(range) {
+          const content = document.createTextNode(range.toString());
+          const wrapperNode = document.createElement('span');
+          wrapperNode.append(content);
+
+          range.deleteContents();
+          range.insertNode(wrapperNode);
+
+          return wrapperNode;
+        }
+
+        function wrapAndReplaceTextNodeRange(node) {
+          const nodeRange = document.createRange();
+          nodeRange.setStart(node, 0);
+          nodeRange.setEnd(node, node.length);
+          return wrapAndReplaceRange(nodeRange);
+        }
+
+        function wrapTextNode(node) {
+          const wrapper = document.createElement('span');
+          wrapper.innerText = node.textContent;
+          return wrapper;
+        }
+
+        function getNonTextNode(top, node) {
+          const parent = node.parentNode;
+          if (
+            top !== parent &&
+            Array.from(parent.childNodes).length === 1 &&
+            parent.childNodes[0] === node
+          ) {
+            return parent;
+          }
+          return wrapAndReplaceTextNodeRange(node);
+        }
+
+        function getDirectChildNode(parent, node) {
+          if (node.parentNode === parent) {
+            return node;
+          }
+          return getDirectChildNode(parent, node.parentNode);
+        }
+
+        function removeChildrenFontStyle(node) {
+          node.childNodes.forEach(child => {
+            if (child.nodeType !== Node.TEXT_NODE) {
+              child.style.fontSize = null;
+              removeChildrenFontStyle(child);
+            }
+          });
+        }
+
+        function applyStyleToChildNode(fontSizeStyle, node, childIndex) {
+          const childNode = node.childNodes[childIndex];
+          if (childNode.nodeType === Node.TEXT_NODE) {
+            const nodeWrapper = wrapTextNode(childNode);
+            node.replaceChild(nodeWrapper, childNode);
+          }
+          node.childNodes[childIndex].style.fontSize = fontSizeStyle;
+          removeChildrenFontStyle(node.childNodes[childIndex]);
+        }
+
+        function applyStyleToSiblings(fontSizeStyle, top, node, toBackward = false) {
+          const parent = node.parentNode;
+          if (top === parent) return;
+          const nodeIndex = Array.from(parent.childNodes).indexOf(node);
+          for (
+            let index = toBackward ? 0 : nodeIndex + 1;
+            index < (toBackward ? nodeIndex : parent.childNodes.length);
+            index++
+          ) {
+            applyStyleToChildNode(fontSizeStyle, parent, index);
+          }
+          applyStyleToSiblings(fontSizeStyle, top, parent, toBackward);
+        }
+
+        function applyStyleForward(fontSizeStyle, top, node) {
+          applyStyleToSiblings(fontSizeStyle, top, node);
+        }
+
+        function applyStyleBackward(fontSizeStyle, top, node) {
+          applyStyleToSiblings(fontSizeStyle, top, node, true);
+        }
+
+        const fontSizeStyle = `${fontSize}px`;
+
+        const selection = window.getSelection();
+        const range = selection.getRangeAt(0);
+        if (range.collapsed) {
+          const emptyNode = document.createElement('span');
+          emptyNode.style.fontSize = fontSizeStyle;
+          range.insertNode(emptyNode);
+          return;
+        }
+
+        const topNode = range.commonAncestorContainer;
+        const start = range.startContainer;
+        const end = range.endContainer;
+
+        const isSingleNode = start === end;
+        const isNotFromNodeStart = range.startOffset > 0;
+        const isNotToNodeEnd = range.endOffset < end.length;
+        const isPartialSelection = isNotFromNodeStart || isNotToNodeEnd;
+        const isRootChildren = isRootNode(topNode);
+
+        if (isSingleNode) {
+          if (isPartialSelection || isRootChildren) {
+            const wrapperNode = wrapAndReplaceRange(range);
+            wrapperNode.style.fontSize = fontSizeStyle;
+          } else {
+            const targetNode =
+              topNode.nodeType === Node.TEXT_NODE ? wrapAndReplaceTextNodeRange(topNode) : topNode;
+            targetNode.style.fontSize = fontSizeStyle;
+            selection.extend(targetNode.childNodes[0], targetNode.textContent.length);
+          }
+        } else {
+          const startNode = getDirectChildNode(topNode, start);
+          const endNode = getDirectChildNode(topNode, end);
+          const startIndex = Array.from(topNode.childNodes).indexOf(startNode);
+          const endIndex = Array.from(topNode.childNodes).indexOf(endNode);
+          // middle line(s)
+          for (let index = startIndex + 1; index < endIndex; index++) {
+            applyStyleToChildNode(fontSizeStyle, topNode, index);
+          }
+          // first line
+          if (isNotFromNodeStart) {
+            const startRange = document.createRange();
+            startRange.setStart(start, range.startOffset);
+            startRange.setEnd(start, start.length);
+            const startWrapper = wrapAndReplaceRange(startRange);
+            startWrapper.style.fontSize = fontSizeStyle;
+            // range.setStart(startWrapper, 0);
+            // selection.collapse(startWrapper);
+            // selection.extend(end, range.endOffset);
+            applyStyleForward(fontSizeStyle, topNode, startWrapper);
+          } else {
+            const firstNode =
+              start.nodeType === Node.TEXT_NODE ? getNonTextNode(topNode, start) : start;
+            firstNode.style.fontSize = fontSizeStyle;
+            if (start !== startNode) applyStyleForward(fontSizeStyle, topNode, firstNode);
+          }
+          // last line
+          if (isNotToNodeEnd) {
+            const endRange = document.createRange();
+            endRange.setStart(end, 0);
+            endRange.setEnd(end, range.endOffset);
+            const endWrapper = wrapAndReplaceRange(endRange);
+            endWrapper.style.fontSize = fontSizeStyle;
+            range.setEnd(endWrapper.childNodes[0], endWrapper.textContent.length);
+            selection.extend(endWrapper.childNodes[0], endWrapper.textContent.length);
+            applyStyleBackward(fontSizeStyle, topNode, endWrapper);
+          } else {
+            const lastNode = end.nodeType === Node.TEXT_NODE ? getNonTextNode(topNode, end) : end;
+            lastNode.style.fontSize = fontSizeStyle;
+            if (end !== endNode) applyStyleBackward(fontSizeStyle, topNode, lastNode);
+          }
+        }
+
+        // FIXME: exeCommand API 를 호출하지 않으면 Quasar Editor 컴포넌트에서 모델 업데이트가 일어나지 않음.
+        // 강제로 bold 활성화 비활성화 동작 수행으로 모델 변경 적용. 원인 파악 후 적절히 해결할 것
+        // 참고> execCommand 만으로 스타일 적용 가능하지만, div 태그로 감싸지지 않은 첫 줄에서 수행 시 태그 위치 설정 관련 오류 발생
+        //
+        // const spanString = `<span style="font-size: ${fontSize}px;">${document
+        //   .getSelection()
+        //   .toString()}</span>`;
+        // document.execCommand('insertHTML', false, spanString);
+        //
+        document.execCommand('bold', false);
+        document.execCommand('bold', false);
+      }
+
+      const sizeDefinitions = extend(
+        true,
+        {
+          size1: {
+            label: '9px',
+            size: 9,
+          },
+          size2: {
+            label: '11px',
+            size: 11,
+          },
+          size3: {
+            label: '13px',
+            size: 13,
+          },
+          size4: {
+            label: '15px',
+            size: 15,
+          },
+          size5: {
+            label: '18px',
+            size: 18,
+          },
+          size6: {
+            label: '20px',
+            size: 20,
+          },
+          adjustLabelSize: true,
+        },
+        props.fontSizes || {},
+      );
+
+      const toolDefinitions = extend(true, {}, props.definitions || {}, {
+        // upload: {
+        //   icon: 'image',
+        //   handler: () => isOpened.value = true,
+        // },
+        size1: {
+          tip: sizeDefinitions.size1.label,
+          htmlTip: sizeDefinitions.adjustLabelSize
+            ? `<span style="font-size: ${sizeDefinitions.size1.size}px">${sizeDefinitions.size1.label}</span>`
+            : null,
+          handler: () => setFontSize(sizeDefinitions.size1.size),
+        },
+        size2: {
+          tip: sizeDefinitions.size2.label,
+          htmlTip: sizeDefinitions.adjustLabelSize
+            ? `<span style="font-size: ${sizeDefinitions.size2.size}px">${sizeDefinitions.size2.label}</span>`
+            : null,
+          handler: () => setFontSize(sizeDefinitions.size2.size),
+        },
+        size3: {
+          tip: sizeDefinitions.size3.label,
+          htmlTip: sizeDefinitions.adjustLabelSize
+            ? `<span style="font-size: ${sizeDefinitions.size3.size}px">${sizeDefinitions.size3.label}</span>`
+            : null,
+          handler: () => setFontSize(sizeDefinitions.size3.size),
+        },
+        size4: {
+          tip: sizeDefinitions.size4.label,
+          htmlTip: sizeDefinitions.adjustLabelSize
+            ? `<span style="font-size: ${sizeDefinitions.size4.size}px">${sizeDefinitions.size4.label}</span>`
+            : null,
+          handler: () => setFontSize(sizeDefinitions.size4.size),
+        },
+        size5: {
+          tip: sizeDefinitions.size5.label,
+          htmlTip: sizeDefinitions.adjustLabelSize
+            ? `<span style="font-size: ${sizeDefinitions.size5.size}px">${sizeDefinitions.size5.label}</span>`
+            : null,
+          handler: () => setFontSize(sizeDefinitions.size5.size),
+        },
+        size6: {
+          tip: sizeDefinitions.size6.label,
+          htmlTip: sizeDefinitions.adjustLabelSize
+            ? `<span style="font-size: ${sizeDefinitions.size6.size}px">${sizeDefinitions.size6.label}</span>`
+            : null,
+          handler: () => setFontSize(sizeDefinitions.size6.size),
+        },
+      });
+
+      const fontSizes = {
+        label: $q.lang.editor.fontSize,
+        icon: $q.iconSet.editor.fontSize,
+        fixedLabel: true,
+        fixedIcon: true,
+        list: 'no-icons',
+        options: ['size1', 'size2', 'size3', 'size4', 'size5', 'size6'],
+      };
+
+      function onOkClick() {
+        imgValue.value.split('\n').forEach((el, idx) => {
+          if (el === '') return;
+          model.value += `<p style="max-width: 100%"><img style="max-width: 100%" src=${el} :alt="image${idx}" /></p>`;
+        });
+        if (props.imgResizable) addImageClickListener();
+        imgValue.value = '';
+      }
+      // Toolbar End
+
+      watch(
+        () => props.modelValue,
+        newValue => {
+          model.value = newValue;
+        },
+      );
+      watch(
+        () => model.value,
+        newValue => {
+          emit('update:modelValue', newValue);
+        },
+        { deep: true },
+      );
+
+      // https://quasar.dev/vue-components/editor#plaintext-pasting 참조
+      function onPaste(event) {
+        if (event.target.nodeName === 'INPUT') return;
+        let text = '';
+        let onPasteStripFormattingIEPaste = false;
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.originalEvent && event.originalEvent.clipboardData.getData) {
+          text = event.originalEvent.clipboardData.getData('text/plain');
+          editorRef.value.runCmd('insertText', text);
+        } else if (event.clipboardData && event.clipboardData.getData) {
+          text = event.clipboardData.getData('text/plain');
+          editorRef.value.runCmd('insertText', text);
+        } else if (window.clipboardData && window.clipboardData.getData) {
+          if (!onPasteStripFormattingIEPaste) {
+            onPasteStripFormattingIEPaste = true;
+            editorRef.value.runCmd('ms-pasteTextOnly', text);
+          }
+          onPasteStripFormattingIEPaste = false;
+        }
+      }
+
+      return {
+        toolbarDefinitions: computed(() => {
+          const bar = props.useImgUpload ? [...props.toolbar, ['upload']] : props.toolbar;
+          return bar.map(group => group.map(item => (item === 'fontSizes' ? fontSizes : item)));
+        }),
+        toolDefinitions,
+        model,
+        imgValue,
+        onOkClick,
+        onPaste,
+        editorRef,
+      };
+    },
+  });
+</script>
+<style lang="scss">
+  .s-editor {
+    > .q-editor__toolbars-container {
+      > .q-editor__toolbar {
+        height: 32px;
+        overflow-y: hidden;
+      }
+    }
+
+    // 툴바 순서 변경시 참고 필요
+    .q-editor__toolbars-container {
+      > .q-editor__toolbar {
+        > .q-editor__toolbar-group:nth-child(2) {
+          > .q-btn-dropdown {
+            > .q-btn__content {
+              width: 91px;
+            }
+          }
+        }
+      }
+    }
+    .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>