quasar 2.18.6 → 2.19.0

package/src/components/editor/QEditor.js

@@ -1,10 +1,24 @@
-import { h, ref, computed, watch, onMounted, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
+import {
+  h,
+  ref,
+  computed,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  nextTick,
+  getCurrentInstance
+} from 'vue'
 
 import Caret from './editor-caret.js'
 import { getToolbar, getFonts, getLinkEditor } from './editor-utils.js'
 
-import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
-import useFullscreen, { useFullscreenProps, useFullscreenEmits } from '../../composables/private.use-fullscreen/use-fullscreen.js'
+import useDark, {
+  useDarkProps
+} from '../../composables/private.use-dark/use-dark.js'
+import useFullscreen, {
+  useFullscreenProps,
+  useFullscreenEmits
+} from '../../composables/private.use-fullscreen/use-fullscreen.js'
 import useSplitAttrs from '../../composables/use-split-attrs/use-split-attrs.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
@@ -40,7 +54,8 @@ export default createComponent({
       type: Array,
       validator: v => v.length === 0 || v.every(group => group.length),
       // long line on purpose for API validation purposes:
-      default: () => [ [ 'left', 'center', 'right', 'justify' ], [ 'bold', 'italic', 'underline', 'strike' ], [ 'undo', 'redo' ] ]
+      // oxfmt-ignore
+      default: () => [['left', 'center', 'right', 'justify'], ['bold', 'italic', 'underline', 'strike'], ['undo', 'redo']]
     },
     toolbarColor: String,
     toolbarBg: String,
@@ -55,12 +70,12 @@ export default createComponent({
 
     paragraphTag: {
       type: String,
-      validator: v => [ 'div', 'p' ].includes(v),
+      validator: v => ['div', 'p'].includes(v),
       default: 'div'
     },
 
     contentStyle: Object,
-    contentClass: [ Object, Array, String ],
+    contentClass: [Object, Array, String],
 
     square: Boolean,
     flat: Boolean,
@@ -70,8 +85,10 @@ export default createComponent({
   emits: [
     ...useFullscreenEmits,
     'update:modelValue',
-    'keydown', 'click',
-    'focus', 'blur',
+    'keydown',
+    'click',
+    'focus',
+    'blur',
     'dropdownShow',
     'dropdownHide',
     'dropdownBeforeShow',
@@ -80,7 +97,7 @@ export default createComponent({
     'linkHide'
   ],
 
-  setup (props, { slots, emit }) {
+  setup(props, { slots, emit }) {
     const { proxy } = getCurrentInstance()
     const { $q } = proxy
 
@@ -100,17 +117,20 @@ export default createComponent({
     let lastEmit = props.modelValue
 
     if (__QUASAR_SSR_SERVER__ !== true) {
-      document.execCommand('defaultParagraphSeparator', false, props.paragraphTag)
+      document.execCommand(
+        'defaultParagraphSeparator',
+        false,
+        props.paragraphTag
+      )
       defaultFont = window.getComputedStyle(document.body).fontFamily
     }
 
-    const toolbarBackgroundClass = computed(() => (
-      props.toolbarBg ? ` bg-${ props.toolbarBg }` : ''
-    ))
+    const toolbarBackgroundClass = computed(() =>
+      props.toolbarBg ? ` bg-${props.toolbarBg}` : ''
+    )
 
     const buttonProps = computed(() => {
-      const flat = props.toolbarOutline !== true
-        && props.toolbarPush !== true
+      const flat = props.toolbarOutline !== true && props.toolbarPush !== true
 
       return {
         type: 'a',
@@ -127,75 +147,252 @@ export default createComponent({
     })
 
     const buttonDef = computed(() => {
-      const
-        e = $q.lang.editor,
+      const e = $q.lang.editor,
         i = $q.iconSet.editor
 
       return {
         bold: { cmd: 'bold', icon: i.bold, tip: e.bold, key: 66 },
         italic: { cmd: 'italic', icon: i.italic, tip: e.italic, key: 73 },
-        strike: { cmd: 'strikeThrough', icon: i.strikethrough, tip: e.strikethrough, key: 83 },
-        underline: { cmd: 'underline', icon: i.underline, tip: e.underline, key: 85 },
-        unordered: { cmd: 'insertUnorderedList', icon: i.unorderedList, tip: e.unorderedList },
-        ordered: { cmd: 'insertOrderedList', icon: i.orderedList, tip: e.orderedList },
-        subscript: { cmd: 'subscript', icon: i.subscript, tip: e.subscript, htmlTip: 'x<subscript>2</subscript>' },
-        superscript: { cmd: 'superscript', icon: i.superscript, tip: e.superscript, htmlTip: 'x<superscript>2</superscript>' },
-        link: { cmd: 'link', disable: eVm => eVm.caret && !eVm.caret.can('link'), icon: i.hyperlink, tip: e.hyperlink, key: 76 },
-        fullscreen: { cmd: 'fullscreen', icon: i.toggleFullscreen, tip: e.toggleFullscreen, key: 70 },
-        viewsource: { cmd: 'viewsource', icon: i.viewSource, tip: e.viewSource },
-
-        quote: { cmd: 'formatBlock', param: 'BLOCKQUOTE', icon: i.quote, tip: e.quote, key: 81 },
+        strike: {
+          cmd: 'strikeThrough',
+          icon: i.strikethrough,
+          tip: e.strikethrough,
+          key: 83
+        },
+        underline: {
+          cmd: 'underline',
+          icon: i.underline,
+          tip: e.underline,
+          key: 85
+        },
+        unordered: {
+          cmd: 'insertUnorderedList',
+          icon: i.unorderedList,
+          tip: e.unorderedList
+        },
+        ordered: {
+          cmd: 'insertOrderedList',
+          icon: i.orderedList,
+          tip: e.orderedList
+        },
+        subscript: {
+          cmd: 'subscript',
+          icon: i.subscript,
+          tip: e.subscript,
+          htmlTip: 'x<subscript>2</subscript>'
+        },
+        superscript: {
+          cmd: 'superscript',
+          icon: i.superscript,
+          tip: e.superscript,
+          htmlTip: 'x<superscript>2</superscript>'
+        },
+        link: {
+          cmd: 'link',
+          disable: eVm => eVm.caret && !eVm.caret.can('link'),
+          icon: i.hyperlink,
+          tip: e.hyperlink,
+          key: 76
+        },
+        fullscreen: {
+          cmd: 'fullscreen',
+          icon: i.toggleFullscreen,
+          tip: e.toggleFullscreen,
+          key: 70
+        },
+        viewsource: {
+          cmd: 'viewsource',
+          icon: i.viewSource,
+          tip: e.viewSource
+        },
+
+        quote: {
+          cmd: 'formatBlock',
+          param: 'BLOCKQUOTE',
+          icon: i.quote,
+          tip: e.quote,
+          key: 81
+        },
         left: { cmd: 'justifyLeft', icon: i.left, tip: e.left },
         center: { cmd: 'justifyCenter', icon: i.center, tip: e.center },
         right: { cmd: 'justifyRight', icon: i.right, tip: e.right },
         justify: { cmd: 'justifyFull', icon: i.justify, tip: e.justify },
 
-        print: { type: 'no-state', cmd: 'print', icon: i.print, tip: e.print, key: 80 },
-        outdent: { type: 'no-state', disable: eVm => eVm.caret && !eVm.caret.can('outdent'), cmd: 'outdent', icon: i.outdent, tip: e.outdent },
-        indent: { type: 'no-state', disable: eVm => eVm.caret && !eVm.caret.can('indent'), cmd: 'indent', icon: i.indent, tip: e.indent },
-        removeFormat: { type: 'no-state', cmd: 'removeFormat', icon: i.removeFormat, tip: e.removeFormat },
-        hr: { type: 'no-state', cmd: 'insertHorizontalRule', icon: i.hr, tip: e.hr },
-        undo: { type: 'no-state', cmd: 'undo', icon: i.undo, tip: e.undo, key: 90 },
-        redo: { type: 'no-state', cmd: 'redo', icon: i.redo, tip: e.redo, key: 89 },
-
-        h1: { cmd: 'formatBlock', param: 'H1', icon: i.heading1 || i.heading, tip: e.heading1, htmlTip: `<h1 class="q-ma-none">${ e.heading1 }</h1>` },
-        h2: { cmd: 'formatBlock', param: 'H2', icon: i.heading2 || i.heading, tip: e.heading2, htmlTip: `<h2 class="q-ma-none">${ e.heading2 }</h2>` },
-        h3: { cmd: 'formatBlock', param: 'H3', icon: i.heading3 || i.heading, tip: e.heading3, htmlTip: `<h3 class="q-ma-none">${ e.heading3 }</h3>` },
-        h4: { cmd: 'formatBlock', param: 'H4', icon: i.heading4 || i.heading, tip: e.heading4, htmlTip: `<h4 class="q-ma-none">${ e.heading4 }</h4>` },
-        h5: { cmd: 'formatBlock', param: 'H5', icon: i.heading5 || i.heading, tip: e.heading5, htmlTip: `<h5 class="q-ma-none">${ e.heading5 }</h5>` },
-        h6: { cmd: 'formatBlock', param: 'H6', icon: i.heading6 || i.heading, tip: e.heading6, htmlTip: `<h6 class="q-ma-none">${ e.heading6 }</h6>` },
-        p: { cmd: 'formatBlock', param: props.paragraphTag, icon: i.heading, tip: e.paragraph },
-        code: { cmd: 'formatBlock', param: 'PRE', icon: i.code, htmlTip: `<code>${ e.code }</code>` },
-
-        'size-1': { cmd: 'fontSize', param: '1', icon: i.size1 || i.size, tip: e.size1, htmlTip: `<font size="1">${ e.size1 }</font>` },
-        'size-2': { cmd: 'fontSize', param: '2', icon: i.size2 || i.size, tip: e.size2, htmlTip: `<font size="2">${ e.size2 }</font>` },
-        'size-3': { cmd: 'fontSize', param: '3', icon: i.size3 || i.size, tip: e.size3, htmlTip: `<font size="3">${ e.size3 }</font>` },
-        'size-4': { cmd: 'fontSize', param: '4', icon: i.size4 || i.size, tip: e.size4, htmlTip: `<font size="4">${ e.size4 }</font>` },
-        'size-5': { cmd: 'fontSize', param: '5', icon: i.size5 || i.size, tip: e.size5, htmlTip: `<font size="5">${ e.size5 }</font>` },
-        'size-6': { cmd: 'fontSize', param: '6', icon: i.size6 || i.size, tip: e.size6, htmlTip: `<font size="6">${ e.size6 }</font>` },
-        'size-7': { cmd: 'fontSize', param: '7', icon: i.size7 || i.size, tip: e.size7, htmlTip: `<font size="7">${ e.size7 }</font>` }
+        print: {
+          type: 'no-state',
+          cmd: 'print',
+          icon: i.print,
+          tip: e.print,
+          key: 80
+        },
+        outdent: {
+          type: 'no-state',
+          disable: eVm => eVm.caret && !eVm.caret.can('outdent'),
+          cmd: 'outdent',
+          icon: i.outdent,
+          tip: e.outdent
+        },
+        indent: {
+          type: 'no-state',
+          disable: eVm => eVm.caret && !eVm.caret.can('indent'),
+          cmd: 'indent',
+          icon: i.indent,
+          tip: e.indent
+        },
+        removeFormat: {
+          type: 'no-state',
+          cmd: 'removeFormat',
+          icon: i.removeFormat,
+          tip: e.removeFormat
+        },
+        hr: {
+          type: 'no-state',
+          cmd: 'insertHorizontalRule',
+          icon: i.hr,
+          tip: e.hr
+        },
+        undo: {
+          type: 'no-state',
+          cmd: 'undo',
+          icon: i.undo,
+          tip: e.undo,
+          key: 90
+        },
+        redo: {
+          type: 'no-state',
+          cmd: 'redo',
+          icon: i.redo,
+          tip: e.redo,
+          key: 89
+        },
+
+        h1: {
+          cmd: 'formatBlock',
+          param: 'H1',
+          icon: i.heading1 || i.heading,
+          tip: e.heading1,
+          htmlTip: `<h1 class="q-ma-none">${e.heading1}</h1>`
+        },
+        h2: {
+          cmd: 'formatBlock',
+          param: 'H2',
+          icon: i.heading2 || i.heading,
+          tip: e.heading2,
+          htmlTip: `<h2 class="q-ma-none">${e.heading2}</h2>`
+        },
+        h3: {
+          cmd: 'formatBlock',
+          param: 'H3',
+          icon: i.heading3 || i.heading,
+          tip: e.heading3,
+          htmlTip: `<h3 class="q-ma-none">${e.heading3}</h3>`
+        },
+        h4: {
+          cmd: 'formatBlock',
+          param: 'H4',
+          icon: i.heading4 || i.heading,
+          tip: e.heading4,
+          htmlTip: `<h4 class="q-ma-none">${e.heading4}</h4>`
+        },
+        h5: {
+          cmd: 'formatBlock',
+          param: 'H5',
+          icon: i.heading5 || i.heading,
+          tip: e.heading5,
+          htmlTip: `<h5 class="q-ma-none">${e.heading5}</h5>`
+        },
+        h6: {
+          cmd: 'formatBlock',
+          param: 'H6',
+          icon: i.heading6 || i.heading,
+          tip: e.heading6,
+          htmlTip: `<h6 class="q-ma-none">${e.heading6}</h6>`
+        },
+        p: {
+          cmd: 'formatBlock',
+          param: props.paragraphTag,
+          icon: i.heading,
+          tip: e.paragraph
+        },
+        code: {
+          cmd: 'formatBlock',
+          param: 'PRE',
+          icon: i.code,
+          htmlTip: `<code>${e.code}</code>`
+        },
+
+        'size-1': {
+          cmd: 'fontSize',
+          param: '1',
+          icon: i.size1 || i.size,
+          tip: e.size1,
+          htmlTip: `<font size="1">${e.size1}</font>`
+        },
+        'size-2': {
+          cmd: 'fontSize',
+          param: '2',
+          icon: i.size2 || i.size,
+          tip: e.size2,
+          htmlTip: `<font size="2">${e.size2}</font>`
+        },
+        'size-3': {
+          cmd: 'fontSize',
+          param: '3',
+          icon: i.size3 || i.size,
+          tip: e.size3,
+          htmlTip: `<font size="3">${e.size3}</font>`
+        },
+        'size-4': {
+          cmd: 'fontSize',
+          param: '4',
+          icon: i.size4 || i.size,
+          tip: e.size4,
+          htmlTip: `<font size="4">${e.size4}</font>`
+        },
+        'size-5': {
+          cmd: 'fontSize',
+          param: '5',
+          icon: i.size5 || i.size,
+          tip: e.size5,
+          htmlTip: `<font size="5">${e.size5}</font>`
+        },
+        'size-6': {
+          cmd: 'fontSize',
+          param: '6',
+          icon: i.size6 || i.size,
+          tip: e.size6,
+          htmlTip: `<font size="6">${e.size6}</font>`
+        },
+        'size-7': {
+          cmd: 'fontSize',
+          param: '7',
+          icon: i.size7 || i.size,
+          tip: e.size7,
+          htmlTip: `<font size="7">${e.size7}</font>`
+        }
       }
     })
 
     const buttons = computed(() => {
       const userDef = props.definitions || {}
-      const def = props.definitions || props.fonts
-        ? extend(
-          true,
-          {},
-          buttonDef.value,
-          userDef,
-          getFonts(
-            defaultFont,
-            $q.lang.editor.defaultFont,
-            $q.iconSet.editor.font,
-            props.fonts
-          )
-        )
-        : buttonDef.value
-
-      return props.toolbar.map(
-        group => group.map(token => {
+      const def =
+        props.definitions || props.fonts
+          ? extend(
+              true,
+              {},
+              buttonDef.value,
+              userDef,
+              getFonts(
+                defaultFont,
+                $q.lang.editor.defaultFont,
+                $q.iconSet.editor.font,
+                props.fonts
+              )
+            )
+          : buttonDef.value
+
+      return props.toolbar.map(group =>
+        group.map(token => {
           if (token.options) {
             return {
               type: 'dropdown',
@@ -207,20 +404,21 @@ export default createComponent({
               fixedIcon: token.fixedIcon,
               highlight: token.highlight,
               list: token.list,
-              options: token.options.map(item => def[ item ])
+              options: token.options.map(item => def[item])
             }
           }
 
-          const obj = def[ token ]
+          const obj = def[token]
 
           if (obj) {
-            return obj.type === 'no-state' || (userDef[ token ] && (
-              obj.cmd === void 0 || (buttonDef.value[ obj.cmd ] && buttonDef.value[ obj.cmd ].type === 'no-state')
-            ))
+            return obj.type === 'no-state' ||
+              (userDef[token] &&
+                (obj.cmd === void 0 ||
+                  (buttonDef.value[obj.cmd] &&
+                    buttonDef.value[obj.cmd].type === 'no-state')))
               ? obj
               : Object.assign({ type: 'toggle' }, obj)
-          }
-          else {
+          } else {
             return {
               type: 'slot',
               slot: token
@@ -248,25 +446,29 @@ export default createComponent({
       setContent
     }
 
-    watch(() => props.modelValue, v => {
-      if (lastEmit !== v) {
-        lastEmit = v
-        setContent(v, true)
+    watch(
+      () => props.modelValue,
+      v => {
+        if (lastEmit !== v) {
+          lastEmit = v
+          setContent(v, true)
+        }
       }
-    })
+    )
 
     watch(editLinkUrl, v => {
-      emit(`link${ v ? 'Show' : 'Hide' }`)
+      emit(`link${v ? 'Show' : 'Hide'}`)
     })
 
-    const hasToolbar = computed(() => props.toolbar && props.toolbar.length !== 0)
+    const hasToolbar = computed(
+      () => props.toolbar && props.toolbar.length !== 0
+    )
 
     const keys = computed(() => {
-      const
-        k = {},
+      const k = {},
         add = btn => {
           if (btn.key) {
-            k[ btn.key ] = {
+            k[btn.key] = {
               cmd: btn.cmd,
               param: btn.param
             }
@@ -277,8 +479,7 @@ export default createComponent({
         group.forEach(token => {
           if (token.options) {
             token.options.forEach(add)
-          }
-          else {
+          } else {
             add(token)
           }
         })
@@ -286,7 +487,7 @@ export default createComponent({
       return k
     })
 
-    const innerStyle = computed(() => (
+    const innerStyle = computed(() =>
       inFullscreen.value
         ? props.contentStyle
         : [
@@ -297,34 +498,36 @@ export default createComponent({
             },
             props.contentStyle
           ]
-    ))
-
-    const classes = computed(() =>
-      `q-editor q-editor--${ isViewingSource.value === true ? 'source' : 'default' }`
-      + (props.disable === true ? ' disabled' : '')
-      + (inFullscreen.value === true ? ' fullscreen column' : '')
-      + (props.square === true ? ' q-editor--square no-border-radius' : '')
-      + (props.flat === true ? ' q-editor--flat' : '')
-      + (props.dense === true ? ' q-editor--dense' : '')
-      + (isDark.value === true ? ' q-editor--dark q-dark' : '')
     )
 
-    const innerClass = computed(() => ([
+    const classes = computed(
+      () =>
+        `q-editor q-editor--${isViewingSource.value === true ? 'source' : 'default'}` +
+        (props.disable === true ? ' disabled' : '') +
+        (inFullscreen.value === true ? ' fullscreen column' : '') +
+        (props.square === true ? ' q-editor--square no-border-radius' : '') +
+        (props.flat === true ? ' q-editor--flat' : '') +
+        (props.dense === true ? ' q-editor--dense' : '') +
+        (isDark.value === true ? ' q-editor--dark q-dark' : '')
+    )
+
+    const innerClass = computed(() => [
       props.contentClass,
       'q-editor__content',
-      { col: inFullscreen.value, 'overflow-auto': inFullscreen.value || props.maxHeight }
-    ]))
+      {
+        col: inFullscreen.value,
+        'overflow-auto': inFullscreen.value || props.maxHeight
+      }
+    ])
 
-    const attributes = computed(() => (
-      props.disable === true
-        ? { 'aria-disabled': 'true' }
-        : {}
-    ))
+    const attributes = computed(() =>
+      props.disable === true ? { 'aria-disabled': 'true' } : {}
+    )
 
-    function onInput () {
+    function onInput() {
       if (contentRef.value !== null) {
-        const prop = `inner${ isViewingSource.value === true ? 'Text' : 'HTML' }`
-        const val = contentRef.value[ prop ]
+        const prop = `inner${isViewingSource.value === true ? 'Text' : 'HTML'}`
+        const val = contentRef.value[prop]
 
         if (val !== props.modelValue) {
           lastEmit = val
@@ -333,7 +536,7 @@ export default createComponent({
       }
     }
 
-    function onKeydown (e) {
+    function onKeydown(e) {
       emit('keydown', e)
 
       if (e.ctrlKey !== true || shouldIgnoreKey(e) === true) {
@@ -342,7 +545,7 @@ export default createComponent({
       }
 
       const key = e.keyCode
-      const target = keys.value[ key ]
+      const target = keys.value[key]
       if (target !== void 0) {
         const { cmd, param } = target
         stopAndPrevent(e)
@@ -350,12 +553,12 @@ export default createComponent({
       }
     }
 
-    function onClick (e) {
+    function onClick(e) {
       refreshToolbar()
       emit('click', e)
     }
 
-    function onBlur (e) {
+    function onBlur(e) {
       if (contentRef.value !== null) {
         const { scrollTop, scrollHeight } = contentRef.value
         offsetBottom = scrollHeight - scrollTop
@@ -364,73 +567,68 @@ export default createComponent({
       emit('blur', e)
     }
 
-    function onFocus (e) {
+    function onFocus(e) {
       nextTick(() => {
         if (contentRef.value !== null && offsetBottom !== void 0) {
-          contentRef.value.scrollTop = contentRef.value.scrollHeight - offsetBottom
+          contentRef.value.scrollTop =
+            contentRef.value.scrollHeight - offsetBottom
         }
       })
       emit('focus', e)
     }
 
-    function onFocusin (e) {
+    function onFocusin(e) {
       const root = rootRef.value
 
       if (
-        root !== null
-        && root.contains(e.target) === true
-        && (
-          e.relatedTarget === null
-          || root.contains(e.relatedTarget) !== true
-        )
+        root !== null &&
+        root.contains(e.target) === true &&
+        (e.relatedTarget === null || root.contains(e.relatedTarget) !== true)
       ) {
-        const prop = `inner${ isViewingSource.value === true ? 'Text' : 'HTML' }`
-        eVm.caret.restorePosition(contentRef.value[ prop ].length)
+        const prop = `inner${isViewingSource.value === true ? 'Text' : 'HTML'}`
+        eVm.caret.restorePosition(contentRef.value[prop].length)
         refreshToolbar()
       }
     }
 
-    function onFocusout (e) {
+    function onFocusout(e) {
       const root = rootRef.value
 
       if (
-        root !== null
-        && root.contains(e.target) === true
-        && (
-          e.relatedTarget === null
-          || root.contains(e.relatedTarget) !== true
-        )
+        root !== null &&
+        root.contains(e.target) === true &&
+        (e.relatedTarget === null || root.contains(e.relatedTarget) !== true)
       ) {
         eVm.caret.savePosition()
         refreshToolbar()
       }
     }
 
-    function onPointerStart () {
+    function onPointerStart() {
       offsetBottom = void 0
     }
 
-    function onSelectionchange (e) {
+    function onSelectionchange() {
       eVm.caret.save()
     }
 
-    function setContent (v, restorePosition) {
+    function setContent(v, restorePosition) {
       if (contentRef.value !== null) {
         if (restorePosition === true) {
           eVm.caret.savePosition()
         }
 
-        const prop = `inner${ isViewingSource.value === true ? 'Text' : 'HTML' }`
-        contentRef.value[ prop ] = v
+        const prop = `inner${isViewingSource.value === true ? 'Text' : 'HTML'}`
+        contentRef.value[prop] = v
 
         if (restorePosition === true) {
-          eVm.caret.restorePosition(contentRef.value[ prop ].length)
+          eVm.caret.restorePosition(contentRef.value[prop].length)
           refreshToolbar()
         }
       }
     }
 
-    function runCmd (cmd, param, update = true) {
+    function runCmd(cmd, param, update = true) {
       focus()
       eVm.caret.restore()
       eVm.caret.apply(cmd, param, () => {
@@ -442,20 +640,20 @@ export default createComponent({
       })
     }
 
-    function refreshToolbar () {
+    function refreshToolbar() {
       setTimeout(() => {
         editLinkUrl.value = null
         proxy.$forceUpdate()
       }, 1)
     }
 
-    function focus () {
+    function focus() {
       addFocusFn(() => {
         contentRef.value?.focus({ preventScroll: true })
       })
     }
 
-    function getContentEl () {
+    function getContentEl() {
       return contentRef.value
     }
 
@@ -473,7 +671,10 @@ export default createComponent({
 
     // expose public methods
     Object.assign(proxy, {
-      runCmd, refreshToolbar, focus, getContentEl
+      runCmd,
+      refreshToolbar,
+      focus,
+      getContentEl
     })
 
     return () => {
@@ -481,58 +682,76 @@ export default createComponent({
 
       if (hasToolbar.value) {
         const bars = [
-          h('div', {
-            key: 'qedt_top',
-            class: 'q-editor__toolbar row no-wrap scroll-x'
-              + toolbarBackgroundClass.value
-          }, getToolbar(eVm))
+          h(
+            'div',
+            {
+              key: 'qedt_top',
+              class:
+                'q-editor__toolbar row no-wrap scroll-x' +
+                toolbarBackgroundClass.value
+            },
+            getToolbar(eVm)
+          )
         ]
 
-        editLinkUrl.value !== null && bars.push(
-          h('div', {
-            key: 'qedt_btm',
-            class: 'q-editor__toolbar row no-wrap items-center scroll-x'
-              + toolbarBackgroundClass.value
-          }, getLinkEditor(eVm))
-        )
+        if (editLinkUrl.value !== null) {
+          bars.push(
+            h(
+              'div',
+              {
+                key: 'qedt_btm',
+                class:
+                  'q-editor__toolbar row no-wrap items-center scroll-x' +
+                  toolbarBackgroundClass.value
+              },
+              getLinkEditor(eVm)
+            )
+          )
+        }
 
-        toolbars = h('div', {
-          key: 'toolbar_ctainer',
-          class: 'q-editor__toolbars-container'
-        }, bars)
+        toolbars = h(
+          'div',
+          {
+            key: 'toolbar_ctainer',
+            class: 'q-editor__toolbars-container'
+          },
+          bars
+        )
       }
 
-      return h('div', {
-        ref: rootRef,
-        class: classes.value,
-        style: { height: inFullscreen.value === true ? '100%' : null },
-        ...attributes.value,
-        onFocusin,
-        onFocusout
-      }, [
-        toolbars,
-
-        h('div', {
-          ref: contentRef,
-          style: innerStyle.value,
-          class: innerClass.value,
-          contenteditable: editable.value,
-          placeholder: props.placeholder,
-          ...(__QUASAR_SSR_SERVER__
-            ? { innerHTML: props.modelValue }
-            : {}),
-          ...splitAttrs.listeners.value,
-          onInput,
-          onKeydown,
-          onClick,
-          onBlur,
-          onFocus,
-
-          // clean saved scroll position
-          onMousedown: onPointerStart,
-          onTouchstartPassive: onPointerStart
-        })
-      ])
+      return h(
+        'div',
+        {
+          ref: rootRef,
+          class: classes.value,
+          style: { height: inFullscreen.value === true ? '100%' : null },
+          ...attributes.value,
+          onFocusin,
+          onFocusout
+        },
+        [
+          toolbars,
+
+          h('div', {
+            ref: contentRef,
+            style: innerStyle.value,
+            class: innerClass.value,
+            contenteditable: editable.value,
+            placeholder: props.placeholder,
+            ...(__QUASAR_SSR_SERVER__ ? { innerHTML: props.modelValue } : {}),
+            ...splitAttrs.listeners.value,
+            onInput,
+            onKeydown,
+            onClick,
+            onBlur,
+            onFocus,
+
+            // clean saved scroll position
+            onMousedown: onPointerStart,
+            onTouchstartPassive: onPointerStart
+          })
+        ]
+      )
     }
   }
 })