@globalbrain/sefirot 4.23.1 → 4.25.0

package/config/vite.js

@@ -46,8 +46,10 @@ export const baseConfig = {
       'sefirot/': fileURLToPath(new URL('../lib/', import.meta.url))
     },
 
+    // list the client-side direct dependencies/peerDependencies which get bundled
     dedupe: [
       '@sentry/browser',
+      '@sentry/vue',
       '@tanstack/vue-virtual',
       '@tinyhttp/content-disposition',
       '@tinyhttp/cookie',
@@ -56,10 +58,12 @@ export const baseConfig = {
       '@vuelidate/validators',
       '@vueuse/core',
       'body-scroll-lock',
-      'dayjs',
       'd3',
+      'dayjs',
+      'dompurify',
       'file-saver',
       'fuse.js',
+      'html2canvas',
       'lodash-es',
       'markdown-it',
       'normalize.css',
@@ -67,8 +71,8 @@ export const baseConfig = {
       'pinia',
       'qs',
       'v-calendar',
-      'vue-router',
-      'vue'
+      'vue',
+      'vue-router'
     ]
   },
 

package/lib/components/SActionMenu.vue

@@ -8,7 +8,7 @@ import SDropdown from './SDropdown.vue'
 export type { Mode, Size, Tooltip, Type }
 
 const props = defineProps<{
-  tag?: string
+  tag?: Component | string
   size?: Size
   type?: Type
   mode?: Mode

package/lib/components/SButton.vue

@@ -22,8 +22,8 @@ export type Mode =
   | 'danger'
 
 export interface Tooltip {
-  tag?: string
-  triggerTag?: string
+  tag?: Component | string
+  triggerTag?: Component | string
   text?: MaybeRef<string | null>
   position?: Position
   display?: 'inline' | 'inline-block' | 'block'
@@ -32,7 +32,7 @@ export interface Tooltip {
 }
 
 const props = defineProps<{
-  tag?: string
+  tag?: Component | string
   size?: Size
   type?: Type
   mode?: Mode

package/lib/components/SControlActionMenu.vue

@@ -5,7 +5,7 @@ import { type DropdownSection } from '../composables/Dropdown'
 import SActionMenu, { type Mode, type Tooltip, type Type } from './SActionMenu.vue'
 
 defineProps<{
-  tag?: string
+  tag?: Component | string
   type?: Type
   mode?: Mode
   icon?: Component

package/lib/components/SControlButton.vue

@@ -4,7 +4,7 @@ import { useControlSize } from '../composables/Control'
 import SButton, { type Mode, type Tooltip, type Type } from './SButton.vue'
 
 defineProps<{
-  tag?: string
+  tag?: Component | string
   type?: Type
   mode?: Mode
   icon?: Component

package/lib/components/SLocalNavActions.vue

@@ -3,7 +3,7 @@ import { type Component } from 'vue'
 import SButton, { type Mode, type Tooltip, type Type } from './SButton.vue'
 
 export interface Action {
-  tag?: string
+  tag?: Component | string
   type?: Type
   mode?: Mode
   icon?: Component
@@ -29,6 +29,7 @@ defineProps<{
     <div v-for="action, i in actions" :key="i" class="action">
       <SButton
         size="small"
+        :tag="action.tag"
         :type="action.type"
         :mode="action.mode"
         :icon="action.icon"

package/lib/components/SMarkdown.vue

@@ -1,52 +1,24 @@
 <script setup lang="ts">
-import { computed, nextTick, shallowRef, watch } from 'vue'
-import { type LinkCallback, type LinkSubscriberPayload, useLink, useMarkdown } from '../composables/Markdown'
+import { type Component, computed } from 'vue'
+import { useMarkdown } from '../composables/Markdown'
 
-const props = defineProps<{
-  tag?: string
+const props = withDefaults(defineProps<{
+  tag?: Component | string
   content: string
-  callbacks?: LinkCallback[]
+  html?: boolean
   inline?: boolean
-}>()
-
-const emit = defineEmits<{
-  clicked: [payload: LinkSubscriberPayload]
-}>()
-
-const container = shallowRef<Element | null>(null)
-
-const { addListeners, subscribe } = useLink({
-  container,
-  callbacks: props.callbacks
+}>(), {
+  tag: 'div',
+  html: true
 })
 
-const markdown = useMarkdown()
-const rendered = computed(() => markdown(props.content, props.inline ?? false))
-
-watch(
-  rendered,
-  () => nextTick(() => addListeners()),
-  { immediate: true }
-)
-
-subscribe((payload) => emit('clicked', payload))
+const markdown = useMarkdown({ html: props.html, inline: props.inline })
+const rendered = computed(() => markdown(props.content))
 </script>
 
 <template>
-  <component
-    v-if="$slots.default"
-    :is="tag ?? 'div'"
-    class="SMarkdown-container"
-    ref="container"
-  >
+  <component v-if="$slots.default" :is="tag" class="SMarkdown-container">
     <slot v-bind="{ rendered }" />
   </component>
-
-  <component
-    v-else
-    :is="tag ?? 'div'"
-    class="SMarkdown-container"
-    ref="container"
-    v-html="rendered"
-  />
+  <component v-else :is="tag" class="SMarkdown-container" v-html="rendered" />
 </template>

package/lib/components/SMount.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { type Component, onMounted, ref } from 'vue'
 
 defineProps<{
-  tag?: string
+  tag?: Component | string
 }>()
 
 const mount = ref(true)

package/lib/components/STooltip.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { onClickOutside, onKeyStroke, useElementHover, useFocusWithin } from '@vueuse/core'
-import { computed, onBeforeUnmount, ref, shallowRef, watch } from 'vue'
+import { type Component, computed, onBeforeUnmount, ref, shallowRef, watch } from 'vue'
 import { type Position, useTooltip } from '../composables/Tooltip'
 
 const props = withDefaults(defineProps<{
-  tag?: string
-  triggerTag?: string
+  tag?: Component | string
+  triggerTag?: Component | string
   text?: string
   position?: Position
   display?: 'inline' | 'inline-block' | 'block'

package/lib/composables/Markdown.ts

@@ -1,34 +1,54 @@
+import DOMPurify, { type Config } from 'dompurify'
 import MarkdownIt, { type Options as MarkdownItOptions } from 'markdown-it'
-import { type Ref, onUnmounted } from 'vue'
-import { useRouter } from 'vue-router'
-import { type LinkAttrs, isCallbackUrl, isExternalUrl, linkPlugin } from './markdown/LinkPlugin'
 
-export type UseMarkdown = (source: string, inline: boolean) => string
+export type UseMarkdown = (source: string, inline?: boolean) => string
 
 export interface UseMarkdownOptions extends MarkdownItOptions {
-  linkAttrs?: LinkAttrs
   config?: (md: MarkdownIt) => void
+  /** @default false */
+  inline?: boolean
+  domPurifyOptions?: Config
 }
 
-export function useMarkdown(options: UseMarkdownOptions = {}): UseMarkdown {
-  const md = new MarkdownIt({
-    html: true,
-    linkify: true,
-    ...options
-  })
+const EXTERNAL_URL_RE = /^(?:[a-z]+:|\/\/)/i
 
-  md.use(linkPlugin, {
-    target: '_blank',
-    rel: 'noopener noreferrer',
-    ...options.linkAttrs
-  })
+if (typeof document !== 'undefined') {
+  DOMPurify.addHook('afterSanitizeAttributes', (node) => {
+    if (node.tagName === 'A') {
+      const target = node.getAttribute('target')
+      if (target && target !== '_blank' && target !== '_self') {
+        node.removeAttribute('target')
+      }
 
-  if (options.config) {
-    options.config(md)
-  }
+      const href = node.getAttribute('href')
+      if (href && EXTERNAL_URL_RE.test(href)) {
+        node.setAttribute('target', '_blank')
+        node.setAttribute('rel', 'noreferrer')
+      }
 
-  return (source, inline) => {
-    return inline ? md.renderInline(source) : md.render(source)
+      node.classList.add('SMarkdown-link')
+    }
+  })
+}
+
+export function useMarkdown({
+  config,
+  inline: _inline,
+  domPurifyOptions,
+  ...options
+}: UseMarkdownOptions = {}): UseMarkdown {
+  //
+
+  const md = new MarkdownIt({ html: true, linkify: true, ...options })
+  config?.(md)
+
+  return (source, inline = _inline) => {
+    const html = inline ? md.renderInline(source) : md.render(source)
+    return DOMPurify.sanitize(html, {
+      USE_PROFILES: { html: true },
+      ADD_ATTR: ['target'],
+      ...domPurifyOptions
+    })
   }
 }
 
@@ -45,109 +65,3 @@ export function useLinkifyIt() {
 
   return (source: string) => md.renderInline(source)
 }
-
-export interface UseLink {
-  addListeners(): void
-  removeListeners(): void
-  subscribe(cb: LinkSubscriber): () => void
-}
-
-export interface UseLinkOptions {
-  container: Ref<Element | null>
-  callbacks?: LinkCallback[]
-}
-
-export interface LinkSubscriberPayload {
-  event: Event
-  target: HTMLAnchorElement
-  isExternal: boolean
-  isCallback: boolean
-}
-
-export type LinkSubscriber = (payload: LinkSubscriberPayload) => void
-
-export type LinkCallback = () => void
-
-export function useLink({ container, callbacks }: UseLinkOptions): UseLink {
-  const router = useRouter()
-  const subscribers: LinkSubscriber[] = []
-
-  onUnmounted(() => removeListeners())
-
-  function handler(event: Event): void {
-    const target = event.target as HTMLAnchorElement
-    const href = target.getAttribute('href')!
-
-    if (!href) {
-      return
-    }
-
-    const isExternal = isExternalUrl(href)
-    const isCallback = isCallbackUrl(href)
-
-    subscribers.forEach((sub) => sub({
-      event,
-      target,
-      isExternal,
-      isCallback
-    }))
-
-    if (isExternal) {
-      return
-    }
-
-    if (!event.defaultPrevented) {
-      event.preventDefault()
-    }
-
-    if (isCallback) {
-      const idx = Number.parseInt(target.dataset.callbackId || '')
-      const callback = (callbacks ?? [])[idx]
-
-      if (!callback) {
-        throw new Error(`Callback not found at index: ${idx}`)
-      }
-
-      return callback()
-    }
-
-    router.push(href)
-  }
-
-  function addListeners(): void {
-    removeListeners()
-
-    if (container.value) {
-      findLinks(container.value).forEach((element) => {
-        element.addEventListener('click', handler)
-      })
-    }
-  }
-
-  function removeListeners(): void {
-    if (container.value) {
-      findLinks(container.value).forEach((element) => {
-        element.removeEventListener('click', handler)
-      })
-    }
-  }
-
-  function subscribe(fn: LinkSubscriber): () => void {
-    subscribers.push(fn)
-
-    return () => {
-      const idx = subscribers.indexOf(fn)
-      idx > -1 && subscribers.splice(idx, 1)
-    }
-  }
-
-  return {
-    addListeners,
-    removeListeners,
-    subscribe
-  }
-}
-
-function findLinks(target: Element) {
-  return target.querySelectorAll('a.SMarkdown-link')
-}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@globalbrain/sefirot",
   "type": "module",
-  "version": "4.23.1",
+  "version": "4.25.0",
   "packageManager": "pnpm@9.15.4",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
@@ -48,7 +48,7 @@
     "@types/body-scroll-lock": "^3.1.2",
     "@types/lodash-es": "^4.17.12",
     "@types/markdown-it": "^14.1.2",
-    "@vue/reactivity": "^3.5.13",
+    "@vue/reactivity": "^3.5.16",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
     "@vueuse/core": "^12 || ^13",
@@ -58,23 +58,24 @@
     "lodash-es": "^4.17.21",
     "markdown-it": "^14.1.0",
     "normalize.css": "^8.0.1",
-    "pinia": "^3.0.2",
-    "postcss": "^8.5.3",
+    "pinia": "^3.0.3",
+    "postcss": "^8.5.5",
     "postcss-nested": "^7.0.2",
     "v-calendar": "3.0.1",
-    "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
+    "vue": "^3.5.16",
+    "vue-router": "^4.5.1"
   },
   "dependencies": {
-    "@sentry/browser": "^9.14.0",
-    "@sentry/vue": "^9.14.0",
+    "@sentry/browser": "^9.29.0",
+    "@sentry/vue": "^9.29.0",
     "@tanstack/vue-virtual": "3.0.0-beta.62",
     "@tinyhttp/content-disposition": "^2.2.2",
     "@tinyhttp/cookie": "^2.1.1",
     "@types/d3": "^7.4.3",
     "@types/file-saver": "^2.0.7",
-    "@types/qs": "^6.9.18",
+    "@types/qs": "^6.14.0",
     "d3": "^7.9.0",
+    "dompurify": "^3.2.6",
     "file-saver": "^2.0.5",
     "html2canvas": "^1.4.1",
     "magic-string": "^0.30.17",
@@ -91,10 +92,10 @@
     "@types/body-scroll-lock": "^3.1.2",
     "@types/lodash-es": "^4.17.12",
     "@types/markdown-it": "^14.1.2",
-    "@types/node": "^22.14.1",
-    "@vitejs/plugin-vue": "^5.2.3",
-    "@vitest/coverage-v8": "^3.1.2",
-    "@vue/reactivity": "^3.5.13",
+    "@types/node": "^24.0.1",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitest/coverage-v8": "^3.2.3",
+    "@vue/reactivity": "^3.5.16",
     "@vue/test-utils": "^2.4.6",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
@@ -103,23 +104,23 @@
     "dayjs": "^1.11.13",
     "eslint": "8.57.0",
     "fuse.js": "^7.1.0",
-    "happy-dom": "^17.4.4",
+    "happy-dom": "^18.0.1",
     "histoire": "0.16.5",
     "lodash-es": "^4.17.21",
     "markdown-it": "^14.1.0",
     "normalize.css": "^8.0.1",
-    "pinia": "^3.0.2",
-    "postcss": "^8.5.3",
+    "pinia": "^3.0.3",
+    "postcss": "^8.5.5",
     "postcss-nested": "^7.0.2",
     "punycode": "^2.3.1",
-    "release-it": "^19.0.1",
+    "release-it": "^19.0.3",
     "typescript": "~5.8.3",
     "v-calendar": "3.0.1",
-    "vite": "^6.3.3",
-    "vitepress": ">=2.0.0-alpha.3",
-    "vitest": "^3.1.2",
-    "vue": "^3.5.13",
-    "vue-router": "^4.5.0",
+    "vite": "^6.3.5",
+    "vitepress": "^2.0.0-alpha.6",
+    "vitest": "^3.2.3",
+    "vue": "^3.5.16",
+    "vue-router": "^4.5.1",
     "vue-tsc": "^2.2.10"
   }
 }

package/lib/composables/markdown/LinkPlugin.ts

@@ -1,45 +0,0 @@
-import type MarkdownIt from 'markdown-it'
-
-export type LinkAttrs = Record<string, string>
-
-const EXTERNAL_REGEX = /^https?:/
-const CALLBACK_REGEX = /\{([\d}]+)\}/
-const CALLBACK_HREF = '#callback'
-
-export function linkPlugin(md: MarkdownIt, linkAttrs: LinkAttrs = {}): void {
-  md.renderer.rules.link_open = (tokens, idx, options, _env, self) => {
-    const token = tokens[idx]
-    const hrefIndex = token.attrIndex('href')
-
-    if (hrefIndex >= 0) {
-      const hrefAttr = token.attrs![hrefIndex]
-      const url = decodeURIComponent(hrefAttr[1])
-
-      if (isExternalUrl(url)) {
-        Object.entries(linkAttrs).forEach(([key, val]) => {
-          token.attrSet(key, val)
-        })
-      }
-
-      if (isCallbackUrl(url)) {
-        const matched = url.match(CALLBACK_REGEX)![1]
-
-        token.attrSet('data-callback-id', matched)
-
-        hrefAttr[1] = CALLBACK_HREF
-      }
-
-      token.attrSet('class', 'SMarkdown-link')
-    }
-
-    return self.renderToken(tokens, idx, options)
-  }
-}
-
-export function isExternalUrl(url: string): boolean {
-  return EXTERNAL_REGEX.test(url)
-}
-
-export function isCallbackUrl(url: string): boolean {
-  return url === CALLBACK_HREF || CALLBACK_REGEX.test(decodeURIComponent(url))
-}