@ditojs/admin 2.33.1 → 2.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.33.1",
+  "version": "2.34.0",
   "type": "module",
   "description": "Dito.js Admin is a schema based admin interface for Dito.js Server, featuring auto-generated views and forms and built with Vue.js",
   "repository": "https://github.com/ditojs/dito/tree/master/packages/admin",
@@ -39,31 +39,33 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.33.0",
-    "@ditojs/utils": "^2.33.0",
+    "@ditojs/ui": "^2.34.0",
+    "@ditojs/utils": "^2.34.0",
     "@kyvg/vue3-notification": "^3.3.0",
     "@lk77/vue3-color": "^3.0.6",
-    "@tiptap/core": "^2.7.1",
-    "@tiptap/extension-blockquote": "^2.7.1",
-    "@tiptap/extension-bold": "^2.7.1",
-    "@tiptap/extension-bullet-list": "^2.7.1",
-    "@tiptap/extension-code": "^2.7.1",
-    "@tiptap/extension-code-block": "^2.7.1",
-    "@tiptap/extension-document": "^2.7.1",
-    "@tiptap/extension-hard-break": "^2.7.1",
-    "@tiptap/extension-heading": "^2.7.1",
-    "@tiptap/extension-history": "^2.7.1",
-    "@tiptap/extension-horizontal-rule": "^2.7.1",
-    "@tiptap/extension-italic": "^2.7.1",
-    "@tiptap/extension-link": "^2.7.1",
-    "@tiptap/extension-list-item": "^2.7.1",
-    "@tiptap/extension-ordered-list": "^2.7.1",
-    "@tiptap/extension-paragraph": "^2.7.1",
-    "@tiptap/extension-strike": "^2.7.1",
-    "@tiptap/extension-text": "^2.7.1",
-    "@tiptap/extension-underline": "^2.7.1",
-    "@tiptap/pm": "^2.7.1",
-    "@tiptap/vue-3": "^2.7.1",
+    "@tiptap/core": "^2.7.2",
+    "@tiptap/extension-blockquote": "^2.7.2",
+    "@tiptap/extension-bold": "^2.7.2",
+    "@tiptap/extension-bullet-list": "^2.7.2",
+    "@tiptap/extension-code": "^2.7.2",
+    "@tiptap/extension-code-block": "^2.7.2",
+    "@tiptap/extension-document": "^2.7.2",
+    "@tiptap/extension-hard-break": "^2.7.2",
+    "@tiptap/extension-heading": "^2.7.2",
+    "@tiptap/extension-history": "^2.7.2",
+    "@tiptap/extension-horizontal-rule": "^2.7.2",
+    "@tiptap/extension-italic": "^2.7.2",
+    "@tiptap/extension-link": "^2.7.2",
+    "@tiptap/extension-list-item": "^2.7.2",
+    "@tiptap/extension-ordered-list": "^2.7.2",
+    "@tiptap/extension-paragraph": "^2.7.2",
+    "@tiptap/extension-strike": "^2.7.2",
+    "@tiptap/extension-subscript": "^2.7.2",
+    "@tiptap/extension-superscript": "^2.7.2",
+    "@tiptap/extension-text": "^2.7.2",
+    "@tiptap/extension-underline": "^2.7.2",
+    "@tiptap/pm": "^2.7.2",
+    "@tiptap/vue-3": "^2.7.2",
     "@vueuse/integrations": "^11.1.0",
     "codeflask": "^1.4.1",
     "filesize": "^10.1.6",
@@ -74,20 +76,20 @@
     "tinycolor2": "^1.6.0",
     "tippy.js": "^6.3.7",
     "type-fest": "^4.26.1",
-    "vue": "^3.5.6",
+    "vue": "^3.5.8",
     "vue-multiselect": "^3.1.0",
     "vue-router": "^4.4.5",
     "vue-upload-component": "^3.1.17"
   },
   "devDependencies": {
-    "@ditojs/build": "^2.33.0",
+    "@ditojs/build": "^2.34.0",
     "@vitejs/plugin-vue": "^5.1.4",
-    "@vue/compiler-sfc": "^3.5.6",
+    "@vue/compiler-sfc": "^3.5.8",
     "pug": "^3.0.3",
-    "sass": "^1.78.0",
+    "sass": "^1.79.3",
     "typescript": "^5.6.2",
-    "vite": "^5.4.6"
+    "vite": "^5.4.8"
   },
   "types": "types",
-  "gitHead": "1a73730c672ab5d1157cf8e91767a6f8640e1487"
+  "gitHead": "0258ece4af0f7dfbb9c11102bdf9defec72b1f15"
 }

package/src/types/DitoTypeColor.vue

@@ -34,11 +34,18 @@ Trigger.dito-color(
 <script>
 import tinycolor from 'tinycolor2'
 import { Sketch as SketchPicker } from '@lk77/vue3-color'
-import { isObject } from '@ditojs/utils'
+import { isObject, isString } from '@ditojs/utils'
 import { Trigger } from '@ditojs/ui/src'
 import DitoTypeComponent from '../DitoTypeComponent.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 
+// Monkey-patch the `SketchPicker's` `hex` computed property to return lowercase
+// hex values instead of uppercase ones.
+const { hex } = SketchPicker.computed
+SketchPicker.computed.hex = function () {
+  return hex.call(this).toLowerCase()
+}
+
 // @vue/component
 export default DitoTypeComponent.register('color', {
   components: { Trigger, SketchPicker },
@@ -66,7 +73,6 @@ export default DitoTypeComponent.register('color', {
 
       set(value) {
         this.value = convertColor(value, this.colorFormat)
-        this.onChange()
       }
     },
 
@@ -77,7 +83,7 @@ export default DitoTypeComponent.register('color', {
           ? color
               .toString(color.getAlpha() < 1 ? 'hex8' : 'hex6')
               .slice(1)
-              .toUpperCase()
+              .toLowerCase()
           : null
       },
 
@@ -140,54 +146,59 @@ export default DitoTypeComponent.register('color', {
   },
 
   watch: {
+    value: 'onChange',
+
     canUpdateValue(canUpdateValue) {
       if (canUpdateValue && this.convertedValue !== null) {
         this.value = this.convertedValue
         this.convertedValue = null
       }
     }
-  },
-
-  methods: {}
+  }
 })
 
 function convertColor(color, format) {
   return isObject(color) // a vue3-color color object
-    ? color[
-        {
-          hex: color?.a < 1 ? 'hex8' : 'hex',
-          rgb: 'rgba'
-        }[format] ||
-        format
-      ]
-    : toColorFormat(tinycolor(color), format)
+    ? toVue3ColorFormat(color, format)
+    : toTinyColorFormat(tinycolor(color), format)
+}
+
+function toVue3ColorFormat(color, format) {
+  const value =
+    color[
+      {
+        hex: color?.a < 1 ? 'hex8' : 'hex',
+        rgb: 'rgba'
+      }[format] ||
+      format
+    ]
+  return isString(value) && value[0] === '#' ? value.toLowerCase() : value
 }
 
 // This should really be in tinycolor, but it only has the string equivalent
 // of it.
-function toColorFormat(color, format) {
+function toTinyColorFormat(color, format) {
   switch (format) {
     case 'rgb':
       return color.toRgb()
     case 'prgb':
       return color.toPercentageRgb()
-    case 'hex':
-    case 'hex6':
-      return color.toHex()
-    case 'hex3':
-      return color.toHex(true)
-    case 'hex4':
-      return color.toHex8(true)
-    case 'hex8':
-      return color.toHex8()
     case 'name':
       return color.toName()
     case 'hsl':
       return color.toHsl()
     case 'hsv':
       return color.toHsv()
+    case 'hex3':
+      return `#${color.toHex(true)}`
+    case 'hex4':
+      return `#${color.toHex8(true)}`
+    case 'hex8':
+      return `#${color.toHex8()}`
+    case 'hex':
+    case 'hex6':
     default:
-      return color.toHex()
+      return `#${color.toHex()}`
   }
 }
 </script>

package/src/types/DitoTypeLabel.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 DitoLabel.dito-label-component(
-  :label="value ?? label"
+  :label="value"
   :dataPath="dataPath"
 )
 </template>

package/src/types/DitoTypeMarkup.vue

@@ -39,6 +39,8 @@ import { Code } from '@tiptap/extension-code'
 import { Italic } from '@tiptap/extension-italic'
 import { Link } from '@tiptap/extension-link'
 import { Strike } from '@tiptap/extension-strike'
+import { Subscript } from '@tiptap/extension-subscript'
+import { Superscript } from '@tiptap/extension-superscript'
 import { Underline } from '@tiptap/extension-underline'
 // Nodes:
 import { Blockquote } from '@tiptap/extension-blockquote'
@@ -87,6 +89,10 @@ export default DitoTypeComponent.register('markup', {
       return this.schema.lines || 10
     },
 
+    hardBreak() {
+      return !!this.schema.hardBreak
+    },
+
     styles() {
       return {
         height: this.height || `calc(${this.lines}em * var(--line-height))`
@@ -101,6 +107,8 @@ export default DitoTypeComponent.register('markup', {
         strike: true,
         small: true,
         code: true,
+        subscript: true,
+        superscript: true,
         link: {
           onClick: editor => this.onClickLink(editor)
         }
@@ -196,48 +204,46 @@ export default DitoTypeComponent.register('markup', {
   },
 
   created() {
-    let changed = false
     let ignoreWatch = false
 
-    const onChange = () => {
-      if (!this.focused && changed) {
-        changed = false
-        this.onChange()
-      }
-    }
-
     const onFocus = () => this.onFocus()
 
-    const onBlur = ({ editor }) => {
-      // This change handling code on blur is only needed to make e2e testing
-      // through puppeteer work, since we couldn't figure out how to trigger
-      // tiptap's update events programmatically from the outside.
-      const value = editor.getHTML()
-      if (value !== this.value) {
-        this.value = value
-        changed = true
-      }
+    const onBlur = () => {
       this.onBlur()
-      onChange()
+      updateValue()
     }
 
-    const setValueDebounced = debounce(editor => {
+    const onUpdate = () => {
+      setValueDebounced()
+      this.onInput()
+    }
+
+    const setValueDebounced = debounce(() => {
       ignoreWatch = true
-      this.value = editor.getHTML()
-      changed = true
-      onChange()
+      updateValue()
     }, 100)
 
-    const onUpdate = ({ editor }) => {
-      setValueDebounced(editor)
-      this.onInput()
+    const updateValue = () => {
+      const content = this.editor.getHTML()
+      const value = this.hardBreak
+        ? content.replace(/^<p>(.*?)<\/p>$/s, '$1')
+        : content
+      if (value !== this.value) {
+        this.value = value
+        if (!this.focused) {
+          this.onChange()
+        }
+      }
     }
 
     this.$watch('value', value => {
       if (ignoreWatch) {
         ignoreWatch = false
       } else {
-        this.editor.commands.setContent(value, false, this.parseOptions)
+        const content = this.hardBreak
+          ? `<p>${value}</p>`
+          : value
+        this.editor.commands.setContent(content, false, this.parseOptions)
       }
     })
 
@@ -346,12 +352,13 @@ export default DitoTypeComponent.register('markup', {
         marks.strike && Strike,
         marks.small && Small,
         marks.code && Code,
+        marks.subscript && Superscript,
+        marks.superscript && Subscript,
         marks.link && LinkWithTitle,
 
         // Nodes: `schema.nodes`
         nodes.blockquote && Blockquote,
         nodes.codeBlock && CodeBlock,
-        HardBreak, // TODO: Should this always on?
         nodes.heading && Heading.configure({ levels: nodes.heading }),
         nodes.horizontalRule && HorizontalRule,
         (nodes.orderedList || nodes.bulletList) && ListItem,
@@ -362,7 +369,15 @@ export default DitoTypeComponent.register('markup', {
         // nodes.todoList && TodoList,
 
         // Tools: `schema.tools`
-        tools.history && History
+        tools.history && History,
+
+        HardBreak.extend({
+          addKeyboardShortcuts() {
+            return this.hardBreak
+              ? { Enter: () => this.editor.commands.setHardBreak() }
+              : {}
+          }
+        })
       ].filter(extension => !!extension)
     },