djm-ui 0.67.4 → 0.72.0

package/src/components/rich-editor/index.js

@@ -1,86 +1,553 @@
-import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
 import Icon from '../icon/index.js'
+import MediaPicker from '../media-picker/index.js'
 import { sanitizeHtml } from '../../utils/sanitize-html.js'
 import { t } from '../../locale/index.js'
 
+// 段落格式：formatBlock 的目标标签
+const BLOCKS = [
+  { value: 'p', label: 'paragraph' },
+  { value: 'h1', label: 'heading1' },
+  { value: 'h2', label: 'heading2' },
+  { value: 'h3', label: 'heading3' },
+  { value: 'blockquote', label: 'quote' },
+  { value: 'pre', label: 'codeBlock' }
+]
+
+// 字号直接写内联 px，避免 execCommand('fontSize') 输出的关键字尺寸不可控
+const SIZES = [
+  { value: '', label: 'defaultSize' },
+  { value: '12px', label: '12px' },
+  { value: '14px', label: '14px' },
+  { value: '16px', label: '16px' },
+  { value: '18px', label: '18px' },
+  { value: '24px', label: '24px' }
+]
+
+const COLORS = ['#1f2d3d', '#5a6b7d', '#2b86d9', '#2fa36b', '#d97706', '#dc2626', '#7c3aed', '#ffffff']
+
+// 工具条预设：simple 精简、basic 常用、full 全部；也可以直接传分组数组自定义
+const TOOLBAR_PRESETS = {
+  simple: ['history', 'inline', 'list', 'insert'],
+  basic: ['history', 'format', 'inline', 'align', 'list', 'insert', 'view'],
+  full: ['history', 'format', 'inline', 'color', 'align', 'list', 'insert', 'view']
+}
+
+// 只接受明确的图片地址，避免上传接口返回奇怪协议后被写进 src
+function isSafeImageUrl (url) {
+  const value = String(url || '').replace(/[\u0000-\u0020]+/g, '')
+  if (!value) return false
+  const scheme = value.match(/^([a-z][a-z0-9+.-]*):/i)
+  if (!scheme) return true
+  const name = scheme[1].toLowerCase()
+  if (name === 'http' || name === 'https' || name === 'blob') return true
+  // data: 只放行图片，其它类型（如 data:text/html）一律拒绝
+  return name === 'data' && /^data:image\//i.test(value)
+}
+
+// 链接只允许常见协议与站内相对地址，挡掉 javascript: 这类注入
+function isSafeLink (url) {
+  const value = String(url || '').trim()
+  if (!value) return false
+  const scheme = value.replace(/[\u0000-\u0020]+/g, '').match(/^([a-z][a-z0-9+.-]*):/i)
+  if (!scheme) return true
+  return ['http', 'https', 'mailto', 'tel'].indexOf(scheme[1].toLowerCase()) > -1
+}
+
 export default {
   name: 'DjmRichEditor',
-  components: { Icon },
+  components: { Icon, MediaPicker },
   props: {
     modelValue: { type: String, default: '' },
     placeholder: { type: String, default: '' },
     minHeight: { type: Number, default: 200 },
-    // 开启后对外输出的 HTML 会走白名单清洗
-    sanitize: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false }
+    // 默认开启：对外输出的 HTML 走白名单清洗，内容里不会带出脚本
+    sanitize: { type: Boolean, default: true },
+    disabled: { type: Boolean, default: false },
+    // 工具条：simple / basic / full，或传分组数组（history / format / inline / color / align / list / insert / view）
+    toolbar: { type: [String, Array], default: 'full' },
+    // 自定义上传：接收 File，返回图片地址（或 { url }），不传则转成 dataURL 本地预览
+    uploadImage: { type: Function, default: null },
+    // 已上传图片，提供后工具栏出现「从素材库选择」：字符串或 { url, name }
+    media: { type: Array, default: () => [] },
+    accept: { type: String, default: 'image/*' },
+    // 单张图片大小上限（MB）
+    maxImageSize: { type: Number, default: 5 },
+    // 是否允许一次选多张
+    multiple: { type: Boolean, default: true },
+    showCount: { type: Boolean, default: true }
   },
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'upload-error'],
   setup (props, { emit }) {
     const editor = ref(null)
+    const fileInput = ref(null)
     const sourceMode = ref(false)
     const source = ref(props.modelValue)
-    // 工具栏的按下态跟随当前选区
-    const formats = ref({ bold: false, italic: false, underline: false, strike: false })
+    const fullscreen = ref(false)
+    const panel = ref('')
+    const uploadCount = ref(0)
+    const textColor = ref(COLORS[0])
+    const bgColor = ref('#fdf3c4')
+    const fontSize = ref('')
+    const count = ref(0)
+
+    // 工具栏按下态，跟随当前选区
+    const formats = ref({
+      bold: false,
+      italic: false,
+      underline: false,
+      strike: false,
+      code: false,
+      block: 'p',
+      align: '',
+      list: ''
+    })
+
+    // 打开文件选择框前先记住选区，上传完成后还要插回原位
+    let savedRange = null
+
+    const ready = computed(() => !props.disabled && !sourceMode.value)
+
+    // 当前启用的工具分组
+    const toolbarGroups = computed(() => {
+      const list = Array.isArray(props.toolbar)
+        ? props.toolbar
+        : TOOLBAR_PRESETS[props.toolbar] || TOOLBAR_PRESETS.full
+      return new Set(list)
+    })
+
+    function has (group) {
+      return toolbarGroups.value.has(group)
+    }
+
+    // 素材库列表：统一成 { id, url, name, type }，交给媒体库选择器
+    const mediaLibrary = computed(() =>
+      (props.media || [])
+        .map((item, index) => {
+          if (typeof item === 'string') {
+            return { id: 'media-' + index, url: item, name: '', type: 'image' }
+          }
+          return {
+            id: item && item.id !== undefined ? String(item.id) : 'media-' + index,
+            url: (item && (item.url || item.src)) || '',
+            name: (item && (item.name || item.alt)) || '',
+            type: 'image'
+          }
+        })
+        .filter((item) => !!item.url)
+    )
 
     function clean (html) {
       return props.sanitize ? sanitizeHtml(html) : html
     }
 
+    function plainText (html) {
+      return String(html || '')
+        .replace(/<[^>]*>/g, '')
+        .replace(/&nbsp;/g, ' ')
+        .replace(/&[a-z]+;/gi, ' ')
+    }
+
     function syncFromDom () {
       if (!editor.value) return
-      emit('update:modelValue', clean(editor.value.innerHTML))
+      const html = clean(editor.value.innerHTML)
+      count.value = plainText(html).trim().length
+      emit('update:modelValue', html)
     }
 
-    // 粘贴进来的外部 HTML 一律清洗，避免带入脚本或事件属性
-    function onPaste (event) {
-      const data = event.clipboardData
-      const html = data && data.getData('text/html')
-      if (!html) return
-      event.preventDefault()
-      document.execCommand('insertHTML', false, sanitizeHtml(html))
+    /* ---------- 选区与插入 ---------- */
+
+    function currentRange () {
+      const selection = window.getSelection()
+      if (!selection || !selection.rangeCount || !editor.value) return null
+      const range = selection.getRangeAt(0)
+      return editor.value.contains(range.commonAncestorContainer) ? range : null
+    }
+
+    function rememberRange () {
+      const range = currentRange()
+      savedRange = range ? range.cloneRange() : null
+    }
+
+    function focusAt (range) {
+      if (!editor.value) return
+      editor.value.focus()
+      const selection = window.getSelection()
+      selection.removeAllRanges()
+      if (range) {
+        selection.addRange(range)
+        return
+      }
+      // 没有记忆选区就放到内容末尾
+      const end = document.createRange()
+      end.selectNodeContents(editor.value)
+      end.collapse(false)
+      selection.addRange(end)
+    }
+
+    // 用 DOM 节点插入，避免把用户数据拼进 HTML 字符串造成注入
+    function insertNodeAt (range, node) {
+      if (!editor.value) return
+      focusAt(range)
+      const selection = window.getSelection()
+      if (selection.rangeCount) selection.getRangeAt(0).insertNode(node)
+      else editor.value.appendChild(node)
       syncFromDom()
+      syncFormats()
+    }
+
+    // 点工具栏时焦点会离开内容区，用记住的选区兜底
+    function ensureRange () {
+      const range = currentRange()
+      if (range) return range
+      if (!savedRange) return null
+      focusAt(savedRange)
+      return currentRange()
     }
 
     function exec (command, value = null) {
-      if (props.disabled || sourceMode.value) return
+      if (!ready.value) return
+      if (typeof document.execCommand !== 'function') return
+      ensureRange()
+      // 统一输出内联样式，避免 <font> 之类的过时标签
+      document.execCommand('styleWithCSS', false, true)
       document.execCommand(command, false, value)
       if (editor.value) editor.value.focus()
       syncFromDom()
       syncFormats()
     }
 
-    function formatBlock (tag) {
-      exec('formatBlock', tag)
+    function setBlock (value) {
+      panel.value = ''
+      exec('formatBlock', '<' + value + '>')
+    }
+
+    // 用 px 精确设置字号；选“默认”时清掉选区内的字号声明
+    function setFontSize (size) {
+      panel.value = ''
+      if (!ready.value || !editor.value) return
+      fontSize.value = size
+      const range = ensureRange()
+      if (!range || range.collapsed) return
+
+      if (!size) {
+        const walker = document.createTreeWalker(editor.value, NodeFilter.SHOW_ELEMENT)
+        const targets = []
+        while (walker.nextNode()) {
+          const el = walker.currentNode
+          if (el.style && el.style.fontSize && range.intersectsNode(el)) targets.push(el)
+        }
+        targets.forEach((el) => { el.style.fontSize = '' })
+        syncFromDom()
+        return
+      }
+
+      const span = document.createElement('span')
+      span.style.fontSize = size
+      span.appendChild(range.extractContents())
+      range.insertNode(span)
+
+      const selection = window.getSelection()
+      const after = document.createRange()
+      after.setStartAfter(span)
+      after.collapse(true)
+      selection.removeAllRanges()
+      selection.addRange(after)
+      syncFromDom()
+      syncFormats()
+    }
+
+    function applyColor (kind, color) {
+      panel.value = ''
+      if (kind === 'text') textColor.value = color
+      else bgColor.value = color
+      if (!ready.value) return
+      if (typeof document.execCommand !== 'function') return
+      document.execCommand('styleWithCSS', false, true)
+      const command = kind === 'text' ? 'foreColor' : 'hiliteColor'
+      // Firefox 只认 backColor
+      if (!document.execCommand(command, false, color) && kind === 'bg') {
+        document.execCommand('backColor', false, color)
+      }
+      if (editor.value) editor.value.focus()
+      syncFromDom()
+      syncFormats()
+    }
+
+    function togglePanel (name) {
+      if (!ready.value) return
+      panel.value = panel.value === name ? '' : name
+    }
+
+    // 行内代码：选中文字包一层 <code>，已在代码里则去掉
+    function toggleInlineCode () {
+      if (!ready.value || !editor.value) return
+      const range = currentRange()
+      if (!range) return
+      const anchor = range.commonAncestorContainer
+      const node = anchor.nodeType === 1 ? anchor : anchor.parentElement
+      const code = node && node.closest ? node.closest('code') : null
+
+      if (code && editor.value.contains(code)) {
+        const parent = code.parentNode
+        while (code.firstChild) parent.insertBefore(code.firstChild, code)
+        parent.removeChild(code)
+        syncFromDom()
+        return
+      }
+      if (range.collapsed) return
+      const wrapper = document.createElement('code')
+      wrapper.appendChild(range.extractContents())
+      range.insertNode(wrapper)
+      const selection = window.getSelection()
+      const after = document.createRange()
+      after.setStartAfter(wrapper)
+      after.collapse(true)
+      selection.removeAllRanges()
+      selection.addRange(after)
+      syncFromDom()
+      syncFormats()
     }
 
     function addLink () {
+      if (!ready.value) return
       const url = window.prompt(t('richEditor.linkPrompt'), 'https://')
-      if (url) exec('createLink', url)
+      if (!url) return
+      if (!isSafeLink(url)) {
+        window.alert(t('richEditor.linkInvalid'))
+        return
+      }
+      const range = currentRange()
+      if (range && range.collapsed) {
+        const link = document.createElement('a')
+        link.href = url
+        link.target = '_blank'
+        link.rel = 'noopener noreferrer'
+        link.textContent = url
+        insertNodeAt(range, link)
+        return
+      }
+      exec('createLink', url)
+      // 外链统一补 rel，避免 window.opener 泄露
+      if (editor.value) {
+        editor.value.querySelectorAll('a[href]').forEach((link) => {
+          if (!link.getAttribute('target')) link.setAttribute('target', '_blank')
+          link.setAttribute('rel', 'noopener noreferrer')
+        })
+      }
+      syncFromDom()
+    }
+
+    /* ---------- 图片上传 ---------- */
+
+    function readAsDataUrl (file) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        reader.onload = () => resolve(reader.result)
+        reader.onerror = () => reject(reader.error || new Error('read failed'))
+        reader.readAsDataURL(file)
+      })
+    }
+
+    async function uploadOne (file) {
+      if (props.uploadImage) {
+        const result = await props.uploadImage(file)
+        const url = typeof result === 'string' ? result : result && result.url
+        if (!url) throw new Error(t('richEditor.imageUrlInvalid'))
+        if (!isSafeImageUrl(url)) throw new Error(t('richEditor.imageUrlInvalid'))
+        return String(url).trim()
+      }
+      // 没有上传接口时退化为本地预览，接后端时请传 uploadImage
+      return readAsDataUrl(file)
+    }
+
+    function isImage (file) {
+      return file && /^image\//.test(file.type)
+    }
+
+    function pickImage (allowMultiple) {
+      if (!ready.value || !fileInput.value) return
+      rememberRange()
+      // 单图 / 多图共用一个选择框，点按钮前改 multiple
+      fileInput.value.multiple = !!allowMultiple && props.multiple
+      fileInput.value.click()
+    }
+
+    // 从素材库插入选中的图片，地址同样过协议校验
+    function insertMedia (ids) {
+      if (!ready.value) return
+      const picked = (Array.isArray(ids) ? ids : [ids])
+        .map((id) => mediaLibrary.value.find((item) => item.id === String(id)))
+        .filter(Boolean)
+      const safe = picked.filter((item) => {
+        if (isSafeImageUrl(item.url)) return true
+        emit('upload-error', { file: null, message: t('richEditor.imageUrlInvalid') })
+        return false
+      })
+      if (!safe.length) return
+
+      focusAt(savedRange)
+      const fragment = document.createDocumentFragment()
+      safe.forEach((item) => {
+        const img = document.createElement('img')
+        img.src = item.url
+        img.alt = item.name || 'image'
+        img.className = 'djm-rich-editor-img'
+        fragment.appendChild(img)
+      })
+      const selection = window.getSelection()
+      if (selection.rangeCount) selection.getRangeAt(0).insertNode(fragment)
+      else editor.value.appendChild(fragment)
+      syncFromDom()
+      syncFormats()
+    }
+
+    function insertImages (files) {
+      if (!files.length || !editor.value) return
+      uploadCount.value = files.length
+      // 用真实节点做占位，避免依赖 data-* 属性（sanitize 会把它过滤掉）
+      const holder = document.createElement('span')
+      holder.className = 'djm-rich-editor-uploading'
+      holder.textContent = t('richEditor.uploading', { count: files.length })
+
+      const anchor = savedRange && editor.value.contains(savedRange.commonAncestorContainer) ? savedRange : null
+      focusAt(anchor)
+      const selection = window.getSelection()
+      if (selection.rangeCount) selection.getRangeAt(0).insertNode(holder)
+      else editor.value.appendChild(holder)
+
+      Promise.all(files.map(async (file) => {
+        if (!isImage(file)) return { file, error: t('richEditor.imageTypeError') }
+        if (props.maxImageSize > 0 && file.size > props.maxImageSize * 1024 * 1024) {
+          return { file, error: t('richEditor.imageSizeError', { size: props.maxImageSize }) }
+        }
+        try {
+          return { file, url: await uploadOne(file) }
+        } catch (error) {
+          return { file, error: (error && error.message) || t('richEditor.uploadFailed') }
+        }
+      })).then((results) => {
+        uploadCount.value = 0
+        const done = results.filter((item) => item.url)
+        const failed = results.filter((item) => item.error)
+        const alive = editor.value && editor.value.contains(holder)
+
+        if (done.length && editor.value) {
+          // 图片节点用 DOM 创建，alt / src 不会拼进 HTML 字符串，文件名带引号也不会注入
+          done.forEach((item) => {
+            const img = document.createElement('img')
+            img.src = item.url
+            img.alt = item.file.name || 'image'
+            img.className = 'djm-rich-editor-img'
+            if (alive) holder.parentNode.insertBefore(img, holder)
+            else editor.value.appendChild(img)
+          })
+        }
+        if (alive) holder.remove()
+
+        failed.forEach((item) => emit('upload-error', { file: item.file, message: item.error }))
+        syncFromDom()
+      })
+    }
+
+    function onFilesChange (event) {
+      const files = Array.from(event.target.files || [])
+      event.target.value = ''
+      insertImages(files)
+    }
+
+    // 粘贴：图片走上传，其余 HTML 清洗后插入
+    function onPaste (event) {
+      const data = event.clipboardData
+      if (!data) return
+      const images = Array.from(data.files || []).filter(isImage)
+      if (images.length) {
+        event.preventDefault()
+        insertImages(images)
+        return
+      }
+      const html = data.getData('text/html')
+      if (!html) return
+      event.preventDefault()
+      document.execCommand('insertHTML', false, sanitizeHtml(html))
+      syncFromDom()
+    }
+
+    function onDragOver (event) {
+      if (!ready.value) return
+      if (event.dataTransfer && Array.from(event.dataTransfer.types || []).includes('Files')) {
+        event.preventDefault()
+      }
+    }
+
+    function onDrop (event) {
+      if (!ready.value) return
+      const files = Array.from((event.dataTransfer && event.dataTransfer.files) || []).filter(isImage)
+      if (!files.length) return
+      event.preventDefault()
+      rememberRange()
+      insertImages(files)
+    }
+
+    /* ---------- 工具栏状态 ---------- */
+
+    function closestTag (node, tag) {
+      const el = node && (node.nodeType === 1 ? node : node.parentElement)
+      return el && el.closest ? el.closest(tag) : null
+    }
+
+    function detectBlock () {
+      const selection = window.getSelection()
+      if (!selection || !selection.anchorNode) return 'p'
+      let node = selection.anchorNode
+      if (node.nodeType !== 1) node = node.parentElement
+      while (node && node !== editor.value) {
+        const tag = node.tagName.toLowerCase()
+        if (['p', 'h1', 'h2', 'h3', 'blockquote', 'pre'].includes(tag)) return tag
+        node = node.parentElement
+      }
+      return 'p'
     }
 
     function syncFormats () {
-      if (props.disabled || sourceMode.value) return
+      if (props.disabled || sourceMode.value || !editor.value) return
       // 光标不在编辑器里就不改工具栏状态
-      if (!editor.value || !editor.value.contains(document.activeElement)) return
+      if (!editor.value.contains(document.activeElement)) return
+      const selection = window.getSelection()
       formats.value = {
         bold: document.queryCommandState('bold'),
         italic: document.queryCommandState('italic'),
         underline: document.queryCommandState('underline'),
-        strike: document.queryCommandState('strikeThrough')
+        strike: document.queryCommandState('strikeThrough'),
+        code: !!closestTag(selection.anchorNode, 'code'),
+        block: detectBlock(),
+        align: document.queryCommandState('justifyCenter')
+          ? 'center'
+          : document.queryCommandState('justifyRight')
+            ? 'right'
+            : document.queryCommandState('justifyFull') ? 'justify' : 'left',
+        list: document.queryCommandState('insertOrderedList')
+          ? 'ol'
+          : document.queryCommandState('insertUnorderedList') ? 'ul' : ''
       }
     }
 
+    /* ---------- 源码 / 全屏 ---------- */
+
     function onSourceInput () {
+      count.value = plainText(source.value).trim().length
       emit('update:modelValue', clean(source.value))
     }
 
     function toggleSource () {
       if (props.disabled) return
+      panel.value = ''
       if (sourceMode.value) {
         emit('update:modelValue', clean(source.value))
         sourceMode.value = false
         requestAnimationFrame(() => {
           if (editor.value) editor.value.innerHTML = clean(source.value)
+          syncFromDom()
         })
       } else {
         source.value = editor.value ? editor.value.innerHTML : props.modelValue
@@ -88,6 +555,24 @@ export default {
       }
     }
 
+    function toggleFullscreen () {
+      if (props.disabled) return
+      fullscreen.value = !fullscreen.value
+      panel.value = ''
+    }
+
+    function onDocumentClick (event) {
+      if (!panel.value) return
+      if (!(event.target.closest && event.target.closest('.djm-rich-editor-color'))) panel.value = ''
+    }
+
+    function onKeydown (event) {
+      if (event.key === 'Escape' && fullscreen.value) {
+        fullscreen.value = false
+        panel.value = ''
+      }
+    }
+
     watch(
       () => props.modelValue,
       (value) => {
@@ -97,43 +582,120 @@ export default {
         }
         const next = clean(value)
         if (editor.value && editor.value.innerHTML !== next) editor.value.innerHTML = next
+        count.value = plainText(next).trim().length
       }
     )
 
     onMounted(() => {
       if (editor.value) editor.value.innerHTML = clean(props.modelValue)
+      count.value = plainText(props.modelValue).trim().length
       document.addEventListener('selectionchange', syncFormats)
+      document.addEventListener('click', onDocumentClick)
+      document.addEventListener('keydown', onKeydown)
     })
 
-    onBeforeUnmount(() => document.removeEventListener('selectionchange', syncFormats))
+    onBeforeUnmount(() => {
+      document.removeEventListener('selectionchange', syncFormats)
+      document.removeEventListener('click', onDocumentClick)
+      document.removeEventListener('keydown', onKeydown)
+    })
 
     return {
       editor,
+      fileInput,
       sourceMode,
       source,
+      fullscreen,
+      panel,
+      uploadCount,
+      textColor,
+      bgColor,
+      fontSize,
+      count,
       formats,
+      blocks: BLOCKS,
+      sizes: SIZES,
+      colors: COLORS,
+      mediaLibrary,
+      has,
       exec,
-      formatBlock,
+      setBlock,
+      setFontSize,
+      applyColor,
+      togglePanel,
+      toggleInlineCode,
       addLink,
-      onSourceInput,
+      pickImage,
+      insertMedia,
+      onFilesChange,
       onPaste,
+      onDragOver,
+      onDrop,
+      rememberRange,
+      onSourceInput,
       toggleSource,
+      toggleFullscreen,
       syncFromDom,
       syncFormats,
       t
     }
   },
   template: `
-    <div class="djm-rich-editor" :class="{ 'djm-is-disabled': disabled }">
-      <div class="djm-rich-editor-toolbar">
-        <div class="djm-rich-editor-group">
+    <div
+      class="djm-rich-editor"
+      :class="{ 'djm-is-disabled': disabled, 'djm-is-fullscreen': fullscreen }"
+    >
+      <div class="djm-rich-editor-toolbar" role="toolbar" :aria-label="t('richEditor.toolbar')" @mousedown="rememberRange">
+        <div class="djm-rich-editor-group" v-if="has('history')">
+          <button
+            class="djm-rich-editor-btn"
+            type="button"
+            :title="t('richEditor.undo')"
+            :aria-label="t('richEditor.undo')"
+            :disabled="disabled || sourceMode"
+            @mousedown.prevent
+            @click="exec('undo')"
+          ><Icon name="undo" :size="13" /></button>
+          <button
+            class="djm-rich-editor-btn"
+            type="button"
+            :title="t('richEditor.redo')"
+            :aria-label="t('richEditor.redo')"
+            :disabled="disabled || sourceMode"
+            @mousedown.prevent
+            @click="exec('redo')"
+          ><Icon name="redo" :size="13" /></button>
+        </div>
+
+        <div class="djm-rich-editor-group" v-if="has('format')">
+          <select
+            class="djm-rich-editor-select"
+            :value="formats.block"
+            :aria-label="t('richEditor.block')"
+            :disabled="disabled || sourceMode"
+            @change="setBlock($event.target.value)"
+          >
+            <option v-for="item in blocks" :key="item.value" :value="item.value">{{ t('richEditor.' + item.label) }}</option>
+          </select>
+          <select
+            class="djm-rich-editor-select djm-rich-editor-select-size"
+            :value="fontSize"
+            :aria-label="t('richEditor.fontSize')"
+            :disabled="disabled || sourceMode"
+            @change="setFontSize($event.target.value)"
+          >
+            <option v-for="item in sizes" :key="item.value" :value="item.value">{{ t('richEditor.' + item.label) }}</option>
+          </select>
+        </div>
+
+        <div class="djm-rich-editor-group" v-if="has('inline')">
           <button
             class="djm-rich-editor-btn djm-rich-editor-btn-bold"
             type="button"
             :title="t('richEditor.bold')"
             :aria-label="t('richEditor.bold')"
             :aria-pressed="String(formats.bold)"
-            :disabled="disabled"
+            :disabled="disabled || sourceMode"
             @mousedown.prevent
             @click="exec('bold')"
           >B</button>
@@ -143,7 +705,7 @@ export default {
             :title="t('richEditor.italic')"
             :aria-label="t('richEditor.italic')"
             :aria-pressed="String(formats.italic)"
-            :disabled="disabled"
+            :disabled="disabled || sourceMode"
             @mousedown.prevent
             @click="exec('italic')"
           >I</button>
@@ -153,7 +715,7 @@ export default {
             :title="t('richEditor.underline')"
             :aria-label="t('richEditor.underline')"
             :aria-pressed="String(formats.underline)"
-            :disabled="disabled"
+            :disabled="disabled || sourceMode"
             @mousedown.prevent
             @click="exec('underline')"
           >U</button>
@@ -163,46 +725,130 @@ export default {
             :title="t('richEditor.strike')"
             :aria-label="t('richEditor.strike')"
             :aria-pressed="String(formats.strike)"
-            :disabled="disabled"
+            :disabled="disabled || sourceMode"
             @mousedown.prevent
             @click="exec('strikeThrough')"
           >S</button>
+          <button
+            class="djm-rich-editor-btn"
+            type="button"
+            :title="t('richEditor.inlineCode')"
+            :aria-label="t('richEditor.inlineCode')"
+            :aria-pressed="String(formats.code)"
+            :disabled="disabled || sourceMode"
+            @mousedown.prevent
+            @click="toggleInlineCode"
+          ><Icon name="code" :size="13" /></button>
         </div>
 
-        <div class="djm-rich-editor-group">
-          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.heading')" :disabled="disabled" @mousedown.prevent @click="formatBlock('h2')">H2</button>
-          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.paragraph')" :disabled="disabled" @mousedown.prevent @click="formatBlock('p')">{{ t('richEditor.paragraph') }}</button>
-        </div>
-
-        <div class="djm-rich-editor-group">
-          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.bulletList')" :disabled="disabled" @mousedown.prevent @click="exec('insertUnorderedList')">
-            <span class="djm-rich-editor-glyph">• ≡</span>
-          </button>
-          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.numberList')" :disabled="disabled" @mousedown.prevent @click="exec('insertOrderedList')">
-            <span class="djm-rich-editor-glyph">1. ≡</span>
+        <div class="djm-rich-editor-group djm-rich-editor-color" v-if="has('color')">
+          <button
+            class="djm-rich-editor-btn"
+            type="button"
+            :title="t('richEditor.textColor')"
+            :aria-label="t('richEditor.textColor')"
+            :aria-expanded="String(panel === 'text')"
+            :disabled="disabled || sourceMode"
+            @mousedown.prevent
+            @click.stop="togglePanel('text')"
+          >
+            <span class="djm-rich-editor-letter" :style="{ borderBottomColor: textColor }">A</span>
           </button>
-          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.link')" :aria-label="t('richEditor.link')" :disabled="disabled" @mousedown.prevent @click="addLink">
-            <Icon name="link" :size="13" />
+          <button
+            class="djm-rich-editor-btn"
+            type="button"
+            :title="t('richEditor.bgColor')"
+            :aria-label="t('richEditor.bgColor')"
+            :aria-expanded="String(panel === 'bg')"
+            :disabled="disabled || sourceMode"
+            @mousedown.prevent
+            @click.stop="togglePanel('bg')"
+          >
+            <span class="djm-rich-editor-letter djm-rich-editor-letter-bg" :style="{ background: bgColor }">A</span>
           </button>
+          <div v-if="panel === 'text' || panel === 'bg'" class="djm-rich-editor-panel" role="group" :aria-label="t('richEditor.textColor')">
+            <button
+              v-for="color in colors"
+              :key="color"
+              class="djm-rich-editor-swatch"
+              type="button"
+              :title="color"
+              :aria-label="color"
+              :style="{ background: color }"
+              @mousedown.prevent
+              @click="applyColor(panel, color)"
+            ></button>
+          </div>
+        </div>
+
+        <div class="djm-rich-editor-group" v-if="has('align')">
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.alignLeft')" :aria-label="t('richEditor.alignLeft')" :aria-pressed="String(formats.align === 'left')" :disabled="disabled || sourceMode" @mousedown.prevent @click="exec('justifyLeft')"><Icon name="align-left" :size="13" /></button>
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.alignCenter')" :aria-label="t('richEditor.alignCenter')" :aria-pressed="String(formats.align === 'center')" :disabled="disabled || sourceMode" @mousedown.prevent @click="exec('justifyCenter')"><Icon name="align-center" :size="13" /></button>
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.alignRight')" :aria-label="t('richEditor.alignRight')" :aria-pressed="String(formats.align === 'right')" :disabled="disabled || sourceMode" @mousedown.prevent @click="exec('justifyRight')"><Icon name="align-right" :size="13" /></button>
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.alignJustify')" :aria-label="t('richEditor.alignJustify')" :aria-pressed="String(formats.align === 'justify')" :disabled="disabled || sourceMode" @mousedown.prevent @click="exec('justifyFull')"><Icon name="align-justify" :size="13" /></button>
+        </div>
+
+        <div class="djm-rich-editor-group" v-if="has('list')">
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.bulletList')" :aria-label="t('richEditor.bulletList')" :aria-pressed="String(formats.list === 'ul')" :disabled="disabled || sourceMode" @mousedown.prevent @click="exec('insertUnorderedList')"><Icon name="list" :size="13" /></button>
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.numberList')" :aria-label="t('richEditor.numberList')" :aria-pressed="String(formats.list === 'ol')" :disabled="disabled || sourceMode" @mousedown.prevent @click="exec('insertOrderedList')"><Icon name="list-ordered" :size="13" /></button>
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.outdent')" :aria-label="t('richEditor.outdent')" :disabled="disabled || sourceMode" @mousedown.prevent @click="exec('outdent')"><Icon name="outdent" :size="13" /></button>
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.indent')" :aria-label="t('richEditor.indent')" :disabled="disabled || sourceMode" @mousedown.prevent @click="exec('indent')"><Icon name="indent" :size="13" /></button>
         </div>
 
-        <div class="djm-rich-editor-group">
-          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.clearFormat')" :disabled="disabled" @mousedown.prevent @click="exec('removeFormat')">{{ t('richEditor.clearFormat') }}</button>
-          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.undo')" :aria-label="t('richEditor.undo')" :disabled="disabled" @mousedown.prevent @click="exec('undo')">↶</button>
-          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.redo')" :aria-label="t('richEditor.redo')" :disabled="disabled" @mousedown.prevent @click="exec('redo')">↷</button>
+        <div class="djm-rich-editor-group" v-if="has('insert')">
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.link')" :aria-label="t('richEditor.link')" :disabled="disabled || sourceMode" @mousedown.prevent @click="addLink"><Icon name="link" :size="13" /></button>
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.unlink')" :aria-label="t('richEditor.unlink')" :disabled="disabled || sourceMode" @mousedown.prevent @click="exec('unlink')"><Icon name="unlink" :size="13" /></button>
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.singleImage')" :aria-label="t('richEditor.singleImage')" :disabled="disabled || sourceMode" @mousedown.prevent @click="pickImage(false)"><Icon name="image" :size="13" /></button>
+          <button v-if="multiple" class="djm-rich-editor-btn" type="button" :title="t('richEditor.multiImage')" :aria-label="t('richEditor.multiImage')" :disabled="disabled || sourceMode" @mousedown.prevent @click="pickImage(true)"><Icon name="images" :size="13" /></button>
+          <MediaPicker
+            v-if="mediaLibrary.length"
+            class="djm-rich-editor-picker"
+            multiple
+            accept="image"
+            :items="mediaLibrary"
+            :title="t('richEditor.mediaLibrary')"
+            :disabled="disabled || sourceMode"
+            @change="insertMedia"
+          >
+            <template #trigger="{ open }">
+              <button
+                class="djm-rich-editor-btn"
+                type="button"
+                :title="t('richEditor.mediaLibrary')"
+                :aria-label="t('richEditor.mediaLibrary')"
+                :disabled="disabled || sourceMode"
+                @mousedown.prevent="rememberRange"
+                @click="open"
+              ><Icon name="grid" :size="13" /></button>
+            </template>
+          </MediaPicker>
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.hr')" :aria-label="t('richEditor.hr')" :disabled="disabled || sourceMode" @mousedown.prevent @click="exec('insertHorizontalRule')">—</button>
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.clearFormat')" :aria-label="t('richEditor.clearFormat')" :disabled="disabled || sourceMode" @mousedown.prevent @click="exec('removeFormat')"><span class="djm-rich-editor-glyph">T×</span></button>
         </div>
 
-        <div class="djm-rich-editor-spacer"></div>
-        <button
-          class="djm-rich-editor-btn"
-          :class="{ 'djm-is-active': sourceMode }"
-          type="button"
-          :aria-pressed="String(sourceMode)"
-          :disabled="disabled"
-          @click="toggleSource"
-        >
-          <Icon name="code" :size="13" />{{ sourceMode ? t('richEditor.visual') : t('richEditor.source') }}
-        </button>
+        <div class="djm-rich-editor-spacer" v-if="has('view')"></div>
+        <div class="djm-rich-editor-group djm-rich-editor-group-end" v-if="has('view')">
+          <button
+            class="djm-rich-editor-btn"
+            :class="{ 'djm-is-active': sourceMode }"
+            type="button"
+            :title="sourceMode ? t('richEditor.visual') : t('richEditor.source')"
+            :aria-label="sourceMode ? t('richEditor.visual') : t('richEditor.source')"
+            :aria-pressed="String(sourceMode)"
+            :disabled="disabled"
+            @click="toggleSource"
+          ><Icon name="code" :size="13" /></button>
+          <button
+            class="djm-rich-editor-btn"
+            :class="{ 'djm-is-active': fullscreen }"
+            type="button"
+            :title="fullscreen ? t('richEditor.exitFullscreen') : t('richEditor.fullscreen')"
+            :aria-label="fullscreen ? t('richEditor.exitFullscreen') : t('richEditor.fullscreen')"
+            :aria-pressed="String(fullscreen)"
+            :disabled="disabled"
+            @click="toggleFullscreen"
+          ><Icon :name="fullscreen ? 'minimize' : 'maximize'" :size="13" /></button>
+        </div>
       </div>
 
       <div
@@ -218,6 +864,8 @@ export default {
         :style="{ minHeight: minHeight + 'px' }"
         @input="syncFromDom"
         @paste="onPaste"
+        @dragover="onDragOver"
+        @drop="onDrop"
       ></div>
 
       <textarea
@@ -230,6 +878,21 @@ export default {
         spellcheck="false"
         @input="onSourceInput"
       ></textarea>
+
+      <div v-if="showCount" class="djm-rich-editor-foot">
+        <span v-if="uploadCount" class="djm-rich-editor-foot-item">{{ t('richEditor.uploading', { count: uploadCount }) }}</span>
+        <span class="djm-rich-editor-foot-item">{{ t('richEditor.wordCount', { count }) }}</span>
+      </div>
+
+      <input
+        ref="fileInput"
+        class="djm-rich-editor-file"
+        type="file"
+        :accept="accept"
+        tabindex="-1"
+        aria-hidden="true"
+        @change="onFilesChange"
+      />
     </div>
   `
 }