@vc-shell/framework 1.1.74 → 1.1.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vc-shell/framework",
-  "version": "1.1.74",
+  "version": "1.1.75",
   "type": "module",
   "main": "./dist/framework.js",
   "types": "./dist/index.d.ts",
@@ -39,29 +39,34 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@floating-ui/dom": "^1.7.4",
     "@floating-ui/vue": "^1.0.6",
     "@fontsource/plus-jakarta-sans": "^5.1.0",
     "@fortawesome/fontawesome-free": "^6.7.2",
     "@headlessui/vue": "^1.7.19",
     "@material-symbols/font-300": "^0.32.0",
     "@microsoft/signalr": "^8.0.0",
-    "@tiptap/extension-image": "^2.25.0",
-    "@tiptap/extension-link": "^2.25.0",
-    "@tiptap/extension-placeholder": "^2.25.0",
-    "@tiptap/extension-table": "^2.25.0",
-    "@tiptap/extension-table-cell": "^2.23.1",
-    "@tiptap/extension-table-header": "^2.23.1",
-    "@tiptap/extension-table-row": "^2.23.1",
-    "@tiptap/extension-underline": "^2.25.0",
-    "@tiptap/pm": "^2.25.0",
-    "@tiptap/starter-kit": "^2.25.0",
-    "@tiptap/vue-3": "^2.25.0",
+    "@tiptap/core": "^3.4.2",
+    "@tiptap/extension-font-size": "^3.0.0-next.3",
+    "@tiptap/extension-image": "^3.4.2",
+    "@tiptap/extension-link": "^3.4.2",
+    "@tiptap/extension-placeholder": "^3.4.2",
+    "@tiptap/extension-table": "^3.4.2",
+    "@tiptap/extension-table-cell": "^3.4.2",
+    "@tiptap/extension-table-header": "^3.4.2",
+    "@tiptap/extension-table-row": "^3.4.2",
+    "@tiptap/extension-text-style": "^3.4.2",
+    "@tiptap/extension-underline": "^3.4.2",
+    "@tiptap/extensions": "^3.4.2",
+    "@tiptap/pm": "^3.4.2",
+    "@tiptap/starter-kit": "^3.4.2",
+    "@tiptap/vue-3": "^3.4.2",
     "@vee-validate/i18n": "^4.12.4",
     "@vee-validate/rules": "^4.12.4",
     "@vuepic/vue-datepicker": "^11.0.2",
     "@vueuse/components": "^10.7.1",
-    "@vueuse/core": "^10.7.1",
-    "@vueuse/integrations": "^10.7.1",
+    "@vueuse/core": "^13.9.0",
+    "@vueuse/integrations": "^13.9.0",
     "bootstrap-icons": "^1.11.3",
     "core-js": "^3.35.0",
     "dompurify": "^3.0.11",
@@ -69,38 +74,39 @@
     "lucide-vue-next": "^0.503.0",
     "moment": "^2.30.1",
     "normalize.css": "^8.0.1",
-    "swiper": "^6.8.4",
-    "tiptap-markdown": "^0.8.10",
+    "swiper": "^11.2.10",
+    "tiptap-markdown": "^0.9.0",
     "truncate-html": "^1.1.1",
     "vee-validate": "^4.12.4",
-    "vue": "^3.5.13",
+    "vue": "^3.5.21",
     "vue-currency-input": "^3.0.5",
     "vue-i18n": "^11.1.11",
-    "vue-router": "^4.2.5",
+    "vue-router": "^4.5.1",
     "vue3-application-insights": "^1.1.0",
     "vue3-touch-events": "^4.1.8",
     "whatwg-fetch": "^3.6.19"
   },
   "devDependencies": {
     "@fullhuman/postcss-purgecss": "^7.0.2",
-    "@laynezh/vite-plugin-lib-assets": "v1.1.0",
+    "@laynezh/vite-plugin-lib-assets": "^2.1.3",
     "@types/dompurify": "^3.0.5",
-    "@vc-shell/api-client-generator": "^1.1.74",
-    "@vc-shell/config-generator": "^1.1.74",
-    "@vc-shell/ts-config": "^1.1.74",
-    "@vitejs/plugin-vue": "^5.2.3",
+    "@vc-shell/api-client-generator": "^1.1.75",
+    "@vc-shell/config-generator": "^1.1.75",
+    "@vc-shell/ts-config": "^1.1.75",
+    "@vitejs/plugin-vue": "^6.0.1",
     "@vue/test-utils": "^2.4.5",
     "cypress-signalr-mock": "^1.5.0",
     "esbuild": "^0.25.3",
+    "postcss": "^8.4.32",
     "sass": "^1.87.0",
     "shx": "^0.3.4",
     "tsc-alias": "^1.8.8",
     "tsx": "^4.7.1",
-    "typescript": "^5.8.3",
-    "vite": "^6.3.3",
+    "typescript": "^5.9.2",
+    "vite": "^7.1.5",
     "vitest": "^1.3.1",
-    "vue-component-type-helpers": "^2.2.10",
-    "vue-tsc": "^2.2.10"
+    "vue-component-type-helpers": "^3.0.6",
+    "vue-tsc": "^3.0.6"
   },
   "publishConfig": {
     "access": "public",

package/ui/components/molecules/vc-editor/_internal/extensions/font-size.ts

@@ -0,0 +1,59 @@
+import { Extension } from '@tiptap/core';
+import '@tiptap/extension-text-style';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    fontSize: {
+      setFontSize: (fontSize: string) => ReturnType;
+      unsetFontSize: () => ReturnType;
+    };
+  }
+}
+
+export const FontSize = Extension.create({
+  name: 'fontSize',
+
+  addOptions() {
+    return {
+      types: ['textStyle'],
+    };
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          fontSize: {
+            default: null,
+            parseHTML: element => element.style.fontSize?.replace(/['"]+/g, ''),
+            renderHTML: attributes => {
+              if (!attributes.fontSize) {
+                return {};
+              }
+
+              return {
+                style: `font-size: ${attributes.fontSize}`,
+              };
+            },
+          },
+        },
+      },
+    ];
+  },
+
+  addCommands() {
+    return {
+      setFontSize: (fontSize: string) => ({ chain }) => {
+        return chain()
+          .setMark('textStyle', { fontSize })
+          .run();
+      },
+      unsetFontSize: () => ({ chain }) => {
+        return chain()
+          .setMark('textStyle', { fontSize: null })
+          .run();
+      },
+    };
+  },
+});

package/ui/components/molecules/vc-editor/_internal/toolbar-types.ts

@@ -0,0 +1,57 @@
+import type { Editor } from "@tiptap/vue-3";
+
+export interface CustomToolbarButton {
+  /** Unique identifier for the button */
+  id: string;
+  /** Button label or title */
+  label: string;
+  /** Icon name (lucide icon) */
+  icon: string;
+  /** Action to execute when button is clicked */
+  action: (editor: Editor) => void;
+  /** Check if button should be active */
+  isActive?: (editor: Editor) => boolean;
+  /** Check if button should be disabled */
+  isDisabled?: (editor: Editor) => boolean;
+  /** Custom component to render instead of default button */
+  component?: any;
+  /** Props to pass to custom component */
+  componentProps?: Record<string, any>;
+  /** Button group for organizing buttons */
+  group?: string;
+  /** Sort order within group */
+  order?: number;
+}
+
+export interface CustomToolbarDropdown {
+  /** Unique identifier for the dropdown */
+  id: string;
+  /** Dropdown label */
+  label: string;
+  /** Dropdown options */
+  options: Array<{
+    value: string;
+    label: string;
+    action: (editor: Editor, value: string) => void;
+  }>;
+  /** Get current value */
+  getValue?: (editor: Editor) => string;
+  /** Check if dropdown should be disabled */
+  isDisabled?: (editor: Editor) => boolean;
+  /** Custom styles for dropdown */
+  style?: Record<string, any>;
+  /** Button group for organizing dropdowns */
+  group?: string;
+  /** Sort order within group */
+  order?: number;
+}
+
+export type CustomToolbarItem = CustomToolbarButton | CustomToolbarDropdown;
+
+export function isDropdown(item: CustomToolbarItem): item is CustomToolbarDropdown {
+  return 'options' in item;
+}
+
+export function isButton(item: CustomToolbarItem): item is CustomToolbarButton {
+  return !('options' in item);
+}

package/ui/components/molecules/vc-editor/_internal/vc-editor-custom-button.vue

@@ -0,0 +1,79 @@
+<template>
+  <component
+    v-if="isButton(customButton) && customButton.component"
+    :is="customButton.component"
+    :editor="editor"
+    :disabled="disabled || isDisabled"
+    v-bind="customButton.componentProps || {}"
+  />
+  <VcEditorButton
+    v-else-if="isButton(customButton)"
+    :icon="customButton.icon"
+    :active="isActive"
+    :disabled="disabled || isDisabled"
+    @action="handleAction"
+  />
+  <div
+    v-else-if="isDropdown(customButton)"
+    class="vc-editor-dropdown"
+  >
+    <select
+      :disabled="disabled || isDisabled"
+      @change="handleDropdownChange"
+    >
+      <option
+        v-for="option in customButton.options"
+        :key="option.value"
+        :value="option.value"
+      >
+        {{ option.label }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { Editor } from "@tiptap/vue-3";
+import { computed } from "vue";
+import VcEditorButton from "./vc-editor-button.vue";
+import type { CustomToolbarItem } from "./toolbar-types";
+import { isButton, isDropdown } from "./toolbar-types";
+
+interface Props {
+  editor: Editor;
+  customButton: CustomToolbarItem;
+  disabled: boolean;
+}
+
+const props = defineProps<Props>();
+
+const isActive = computed(() => {
+  if (isButton(props.customButton) && props.customButton.isActive) {
+    return props.customButton.isActive(props.editor);
+  }
+  return false;
+});
+
+const isDisabled = computed(() => {
+  if (props.customButton.isDisabled) {
+    return props.customButton.isDisabled(props.editor);
+  }
+  return false;
+});
+
+function handleAction() {
+  if (isButton(props.customButton)) {
+    props.customButton.action(props.editor);
+  }
+}
+
+function handleDropdownChange(event: Event) {
+  const target = event.target as HTMLSelectElement;
+  if (isDropdown(props.customButton)) {
+    const option = props.customButton.options.find(opt => opt.value === target.value);
+    if (option) {
+      option.action(props.editor, target.value);
+    }
+  }
+}
+</script>

package/ui/components/molecules/vc-editor/_internal/vc-editor-font-selector.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="vc-editor-font-selector">
+    <!-- Font Size Dropdown -->
+    <div class="vc-editor-font-selector__dropdown">
+      <button
+        type="button"
+        class="vc-editor-font-selector__button"
+        :disabled="disabled"
+        @click="toggleSizeDropdown"
+      >
+        <VcIcon icon="lucide-a-large-small" size="s" :use-container="false" />
+        <span v-if="currentFontSize" class="vc-editor-font-selector__size-value">{{ currentFontSize }}px</span>
+        <VcIcon icon="lucide-chevron-down" size="xs" :use-container="false" />
+      </button>
+      <div
+        v-if="showSizeDropdown"
+        class="vc-editor-font-selector__menu"
+        @click.stop
+      >
+        <div
+          v-for="size in fontSizes"
+          :key="size"
+          class="vc-editor-font-selector__option"
+          :class="{ 'vc-editor-font-selector__option--active': currentFontSize === size }"
+          @click="selectFontSize(size)"
+        >
+          {{ size }}px
+        </div>
+        <div class="vc-editor-font-selector__custom">
+          <input
+            v-model="customSize"
+            type="number"
+            min="8"
+            max="72"
+            placeholder="Custom"
+            class="vc-editor-font-selector__input"
+            @keydown.enter="selectCustomFontSize"
+            @blur="selectCustomFontSize"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { Editor } from "@tiptap/vue-3";
+import { ref, computed, onMounted, onUnmounted } from "vue";
+import { VcIcon } from "../../../atoms";
+
+interface Props {
+  editor: Editor;
+  disabled: boolean;
+}
+
+const props = defineProps<Props>();
+
+const showSizeDropdown = ref(false);
+const customSize = ref<number | null>(null);
+
+const fontSizes = [8, 10, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 72];
+
+const currentFontSize = computed(() => {
+  const attrs = props.editor.getAttributes('textStyle');
+  return attrs.fontSize ? parseInt(attrs.fontSize.replace('px', '')) : null;
+});
+
+function toggleSizeDropdown() {
+  showSizeDropdown.value = !showSizeDropdown.value;
+}
+
+function selectFontSize(size: number) {
+  props.editor.chain().focus().setFontSize(`${size}px`).run();
+  showSizeDropdown.value = false;
+}
+
+function selectCustomFontSize() {
+  if (customSize.value && customSize.value >= 8 && customSize.value <= 72) {
+    props.editor.chain().focus().setFontSize(`${customSize.value}px`).run();
+    customSize.value = null;
+    showSizeDropdown.value = false;
+  }
+}
+
+function closeDropdown() {
+  showSizeDropdown.value = false;
+}
+
+function handleClickOutside(event: MouseEvent) {
+  const target = event.target as HTMLElement;
+  if (!target.closest('.vc-editor-font-selector')) {
+    closeDropdown();
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+</script>
+
+<style lang="scss">
+.vc-editor-font-selector {
+  display: flex;
+  gap: 0.25rem;
+
+  &__dropdown {
+    position: relative;
+  }
+
+  &__button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+    height: 2rem;
+    padding: 0 0.5rem;
+    border: none;
+    border-radius: 6px;
+    background-color: transparent;
+    color: var(--neutrals-600);
+    cursor: pointer;
+    transition:
+      background-color 0.2s ease,
+      color 0.2s ease,
+      transform 0.1s ease;
+
+    &:hover:not(:disabled) {
+      background-color: var(--neutrals-100);
+      color: var(--neutrals-800);
+      transform: translateY(-1px);
+    }
+
+    &:active:not(:disabled) {
+      transform: translateY(0);
+    }
+
+    &:disabled {
+      color: var(--neutrals-400);
+      cursor: not-allowed;
+      opacity: 0.5;
+      transform: none;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--primary-500);
+      outline-offset: 2px;
+    }
+  }
+
+  &__size-value {
+    font-size: 0.75rem;
+    font-weight: 500;
+    min-width: 2rem;
+    text-align: center;
+  }
+
+  &__menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 100;
+    min-width: 160px;
+    max-height: 240px;
+    overflow-y: auto;
+    background: white;
+    border: 1px solid var(--neutrals-300);
+    border-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    margin-top: 0.25rem;
+  }
+
+  &__option {
+    padding: 0.5rem 0.75rem;
+    cursor: pointer;
+    border-bottom: 1px solid var(--neutrals-100);
+    transition: background-color 0.15s ease;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &:hover {
+      background-color: var(--neutrals-50);
+    }
+
+    &--active {
+      background-color: var(--primary-100);
+      color: var(--primary-700);
+      font-weight: 500;
+    }
+  }
+
+  &__custom {
+    padding: 0.5rem 0.75rem;
+    border-top: 1px solid var(--neutrals-200);
+  }
+
+  &__input {
+    width: 100%;
+    padding: 0.25rem 0.5rem;
+    border: 1px solid var(--neutrals-300);
+    border-radius: 4px;
+    font-size: 0.875rem;
+
+    &:focus {
+      outline: none;
+      border-color: var(--primary-500);
+    }
+  }
+}
+</style>

package/ui/components/molecules/vc-editor/_internal/vc-editor-toolbar.vue

@@ -125,6 +125,25 @@
         :disabled="disabled"
         @action="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()"
       />
+
+      <!-- Font Selector -->
+      <VcEditorFontSelector
+        v-else-if="item === 'fontSize'"
+        :editor="editor"
+        :disabled="disabled"
+      />
+    </template>
+
+    <!-- Custom buttons -->
+    <template v-if="props.customButtons.length > 0">
+      <div class="vc-editor-toolbar__separator" />
+      <VcEditorCustomButton
+        v-for="customButton in sortedCustomButtons"
+        :key="customButton.id"
+        :editor="editor"
+        :custom-button="customButton"
+        :disabled="disabled"
+      />
     </template>
 
     <!-- Table controls (always show when table is active) -->
@@ -173,12 +192,16 @@
 import type { Editor } from "@tiptap/vue-3";
 import { computed } from "vue";
 import VcEditorButton from "./vc-editor-button.vue";
+import VcEditorCustomButton from "./vc-editor-custom-button.vue";
+import VcEditorFontSelector from "./vc-editor-font-selector.vue";
+import type { CustomToolbarItem } from "./toolbar-types";
 
 export interface Props {
   editor: Editor;
   disabled: boolean;
   contentType: "html" | "markdown";
   toolbar: ToolbarNames[];
+  customButtons: CustomToolbarItem[];
 }
 
 // Define toolbar button types
@@ -196,10 +219,12 @@ type ToolbarNames =
   | "link"
   | "image"
   | "table"
+  | "fontSize"
   | "separator";
 
 const props = withDefaults(defineProps<Props>(), {
   contentType: "html",
+  customButtons: () => [],
 });
 
 const emit = defineEmits(["uploadImage"]);
@@ -209,6 +234,22 @@ const toolbarItems = computed(() => {
   return props.toolbar || [];
 });
 
+// Computed property to sort custom buttons
+const sortedCustomButtons = computed(() => {
+  return [...props.customButtons].sort((a, b) => {
+    const groupA = a.group || 'default';
+    const groupB = b.group || 'default';
+    const orderA = a.order || 0;
+    const orderB = b.order || 0;
+
+    if (groupA !== groupB) {
+      return groupA.localeCompare(groupB);
+    }
+
+    return orderA - orderB;
+  });
+});
+
 function setLink() {
   const previousUrl = props.editor.getAttributes("link").href;
   const url = window.prompt("URL", previousUrl);
@@ -248,5 +289,6 @@ function triggerImageUpload() {
     margin: 0 0.5rem;
     flex-shrink: 0;
   }
+
 }
 </style>

package/ui/components/molecules/vc-editor/index.ts

@@ -1 +1,6 @@
 export { default as VcEditor } from "./vc-editor.vue";
+export type {
+  CustomToolbarButton,
+  CustomToolbarDropdown,
+  CustomToolbarItem,
+} from "./_internal/toolbar-types";