quasar-ui-sellmate-ui-kit 2.3.2 → 3.0.1

package/src/components/SEditor.vue

@@ -1,490 +1,490 @@
-<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="div"
-    v-bind="$attrs"
-    :definitions="toolDefinitions"
-    :toolbar="toolbarDefinitions"
-    v-model="model"
-    class="s-editor"
-    v-on="usePlaintextPasting ? { paste: onPaste } : {}"
-  />
-  <q-dialog v-model="isOpened" @keyup.esc="isOpened = false">
-    <q-card class="q-pa-sm bg-Grey_Lighten-5">
-      <q-card-section class="q-pa-none">
-        <q-input
-          class="bg-white"
-          style="width: 348px; font-size: 12px"
-          v-model="value"
-          dense
-          outlined
-          :placeholder="placeholder"
-          autogrow
-          autofocus
-        />
-        <div class="row reverse q-mt-sm">
-          <s-button
-            outline
-            label="삽입"
-            @click="onOkClick"
-            color="Blue_B_Default"
-            class="bg-white"
-          />
-        </div>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
-</template>
-
-<script>
-  import { defineComponent, ref, watch } from 'vue';
-  import { extend, QCard, QCardSection, QDialog, QEditor, QInput, useQuasar } from 'quasar';
-
-  export default defineComponent({
-    name: 'SEditor',
-    components: {
-      QEditor,
-      QDialog,
-      QCard,
-      QCardSection,
-      QInput,
-    },
-    props: {
-      definitions: Object,
-      toolbar: {
-        type: Array,
-        validator: v => v.length === 0 || v.every(group => group.length),
-        default() {
-          return [
-            ['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,
-      },
-      useImageUpload: {
-        type: Boolean,
-        default: true,
-      },
-      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',
-      },
-      useListOpts: {
-        type: Boolean,
-        default: false,
-      },
-      usePlaintextPasting: {
-        type: Boolean,
-        default: false,
-      },
-    },
-    setup(props, { emit }) {
-      const model = ref(props.modelValue);
-      const $q = useQuasar();
-
-      // Toolbar Begin
-      const placeholder = ref(props.imgInputPlaceholder);
-      const isOpened = ref(false);
-      const value = ref('');
-
-      function uploadImage() {
-        isOpened.value = true;
-      }
-
-      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: {
-          tip: 'Upload Image',
-          icon: 'image',
-          handler: uploadImage,
-        },
-        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'],
-      };
-
-      const toolbarDefinitions = props.toolbar.map(group => group.map(item => (item === 'fontSizes' ? fontSizes : item)));
-
-      function onOkClick() {
-        value.value.split('\n').forEach((el, idx) => {
-          if (el === '') return;
-          model.value += `<p><img style="max-width:100%;" src=${el} :alt="image${idx}"/></p>`;
-        });
-        isOpened.value = false;
-        value.value = '';
-      }
-      // Toolbar End
-
-      watch(
-        () => props.modelValue,
-        newValue => {
-          model.value = newValue;
-        },
-      );
-
-      watch(
-        () => model.value,
-        () => {
-          emit('update:modelValue', model.value);
-        },
-      );
-
-      const editorRef = ref(null);
-
-      // 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,
-        toolDefinitions,
-        isOpened,
-        model,
-        value,
-        placeholder,
-        uploadImage,
-        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;
-            }
-          }
-        }
-      }
-    }
-  }
-</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="div"
+    v-bind="$attrs"
+    :definitions="toolDefinitions"
+    :toolbar="toolbarDefinitions"
+    v-model="model"
+    class="s-editor"
+    v-on="usePlaintextPasting ? { paste: onPaste } : {}"
+  />
+  <q-dialog v-model="isOpened" @keyup.esc="isOpened = false">
+    <q-card class="q-pa-sm bg-Grey_Lighten-5">
+      <q-card-section class="q-pa-none">
+        <q-input
+          class="bg-white"
+          style="width: 348px; font-size: 12px"
+          v-model="value"
+          dense
+          outlined
+          :placeholder="placeholder"
+          autogrow
+          autofocus
+        />
+        <div class="row reverse q-mt-sm">
+          <s-button
+            outline
+            label="삽입"
+            @click="onOkClick"
+            color="Blue_B_Default"
+            class="bg-white"
+          />
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script>
+  import { defineComponent, ref, watch } from 'vue';
+  import { extend, QCard, QCardSection, QDialog, QEditor, QInput, useQuasar } from 'quasar';
+
+  export default defineComponent({
+    name: 'SEditor',
+    components: {
+      QEditor,
+      QDialog,
+      QCard,
+      QCardSection,
+      QInput,
+    },
+    props: {
+      definitions: Object,
+      toolbar: {
+        type: Array,
+        validator: v => v.length === 0 || v.every(group => group.length),
+        default() {
+          return [
+            ['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,
+      },
+      useImageUpload: {
+        type: Boolean,
+        default: true,
+      },
+      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',
+      },
+      useListOpts: {
+        type: Boolean,
+        default: false,
+      },
+      usePlaintextPasting: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    setup(props, { emit }) {
+      const model = ref(props.modelValue);
+      const $q = useQuasar();
+
+      // Toolbar Begin
+      const placeholder = ref(props.imgInputPlaceholder);
+      const isOpened = ref(false);
+      const value = ref('');
+
+      function uploadImage() {
+        isOpened.value = true;
+      }
+
+      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: {
+          tip: 'Upload Image',
+          icon: 'image',
+          handler: uploadImage,
+        },
+        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'],
+      };
+
+      const toolbarDefinitions = props.toolbar.map(group => group.map(item => (item === 'fontSizes' ? fontSizes : item)));
+
+      function onOkClick() {
+        value.value.split('\n').forEach((el, idx) => {
+          if (el === '') return;
+          model.value += `<p><img style="max-width:100%;" src=${el} :alt="image${idx}"/></p>`;
+        });
+        isOpened.value = false;
+        value.value = '';
+      }
+      // Toolbar End
+
+      watch(
+        () => props.modelValue,
+        newValue => {
+          model.value = newValue;
+        },
+      );
+
+      watch(
+        () => model.value,
+        () => {
+          emit('update:modelValue', model.value);
+        },
+      );
+
+      const editorRef = ref(null);
+
+      // 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,
+        toolDefinitions,
+        isOpened,
+        model,
+        value,
+        placeholder,
+        uploadImage,
+        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;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>