@vc-shell/framework 1.1.74 → 1.1.76

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3";
-import { VcEditor } from "./";
-import { ref } from "vue";
+import { VcEditor, type CustomToolbarButton, type CustomToolbarDropdown } from "./";
+import { ref, defineComponent, h } from "vue";
+import type { Editor } from "@tiptap/vue-3";
 
 const meta = {
   title: "molecules/VcEditor",
@@ -235,7 +236,7 @@ export const WithInitialContent: Story = {
 export const CustomToolbar: Story = {
   args: {
     label: "Editor with custom toolbar",
-    toolbar: ["bold", "italic", "title", "link", "image", "preview"],
+    toolbar: ["bold", "italic", "heading1", "heading2", "link", "image", "fontSize"],
   },
   render: (args) => ({
     components: { VcEditor },
@@ -246,3 +247,171 @@ export const CustomToolbar: Story = {
     template: '<vc-editor v-bind="args" v-model="content"></vc-editor>',
   }),
 };
+
+export const WithCustomButtons: Story = {
+  args: {
+    label: "Editor with custom plugin buttons",
+    customButtons: [
+      {
+        id: "clear-format",
+        label: "Clear Format",
+        icon: "lucide-remove-formatting",
+        action: (editor: Editor) => {
+          editor.chain().focus().clearNodes().unsetAllMarks().run();
+        },
+        isActive: () => false,
+        group: "format",
+        order: 1,
+      } as CustomToolbarButton,
+      {
+        id: "highlight",
+        label: "Highlight",
+        icon: "lucide-highlighter",
+        action: (editor: Editor) => {
+          editor.chain().focus().toggleHighlight().run();
+        },
+        isActive: (editor: Editor) => editor.isActive('highlight'),
+        group: "format",
+        order: 2,
+      } as CustomToolbarButton,
+      {
+        id: "text-align",
+        label: "Text Align",
+        options: [
+          { value: 'left', label: 'Left', action: (editor: Editor) => editor.chain().focus().setTextAlign('left').run() },
+          { value: 'center', label: 'Center', action: (editor: Editor) => editor.chain().focus().setTextAlign('center').run() },
+          { value: 'right', label: 'Right', action: (editor: Editor) => editor.chain().focus().setTextAlign('right').run() },
+          { value: 'justify', label: 'Justify', action: (editor: Editor) => editor.chain().focus().setTextAlign('justify').run() },
+        ],
+        getValue: (editor: Editor) => editor.getAttributes('paragraph').textAlign || 'left',
+        group: "align",
+        order: 1,
+      } as CustomToolbarDropdown,
+    ],
+  },
+  render: (args) => ({
+    components: { VcEditor },
+    setup() {
+      const content = ref("");
+      return { args, content };
+    },
+    template: '<vc-editor v-bind="args" v-model="content"></vc-editor>',
+  }),
+};
+
+// Custom component example
+const CustomEmojiButton = defineComponent({
+  props: {
+    editor: {
+      type: Object as () => Editor,
+      required: true,
+    },
+    disabled: Boolean,
+  },
+  setup(props) {
+    const emojis = ['😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇'];
+    const showPicker = ref(false);
+    
+    const insertEmoji = (emoji: string) => {
+      props.editor.chain().focus().insertContent(emoji).run();
+      showPicker.value = false;
+    };
+    
+    return () => h('div', { class: 'emoji-picker', style: { position: 'relative' } }, [
+      h('button', {
+        class: 'vc-editor-button',
+        disabled: props.disabled,
+        onClick: () => showPicker.value = !showPicker.value,
+        style: {
+          padding: '0.25rem 0.5rem',
+          borderRadius: '6px',
+          border: 'none',
+          background: 'transparent',
+          cursor: props.disabled ? 'not-allowed' : 'pointer',
+        }
+      }, '😊'),
+      showPicker.value && h('div', {
+        class: 'emoji-picker-menu',
+        style: {
+          position: 'absolute',
+          top: '100%',
+          left: 0,
+          background: 'white',
+          border: '1px solid #ccc',
+          borderRadius: '6px',
+          padding: '0.5rem',
+          display: 'flex',
+          gap: '0.25rem',
+          zIndex: 100,
+          boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+        }
+      }, emojis.map(emoji => 
+        h('button', {
+          onClick: () => insertEmoji(emoji),
+          style: {
+            border: 'none',
+            background: 'transparent',
+            cursor: 'pointer',
+            fontSize: '1.25rem',
+            padding: '0.25rem',
+          }
+        }, emoji)
+      ))
+    ]);
+  },
+});
+
+export const WithCustomComponent: Story = {
+  args: {
+    label: "Editor with custom component plugin",
+    customButtons: [
+      {
+        id: "emoji",
+        label: "Insert Emoji",
+        icon: "lucide-smile",
+        action: () => {}, // Not used when component is provided
+        component: CustomEmojiButton,
+        group: "insert",
+        order: 1,
+      } as CustomToolbarButton,
+      {
+        id: "word-count",
+        label: "Word Count",
+        icon: "lucide-file-text",
+        action: (editor: Editor) => {
+          const text = editor.getText();
+          const wordCount = text.split(/\s+/).filter(word => word.length > 0).length;
+          alert(`Word count: ${wordCount}`);
+        },
+        group: "tools",
+        order: 1,
+      } as CustomToolbarButton,
+    ],
+  },
+  render: (args) => ({
+    components: { VcEditor },
+    setup() {
+      const content = ref("");
+      return { args, content };
+    },
+    template: '<vc-editor v-bind="args" v-model="content"></vc-editor>',
+  }),
+};
+
+export const WithTipTapExtensions: Story = {
+  args: {
+    label: "Editor with custom TipTap extensions",
+    extensions: [
+      // Add any custom TipTap extensions here
+      // For example: Highlight.configure({ multicolor: true })
+    ],
+  },
+  render: (args) => ({
+    components: { VcEditor },
+    setup() {
+      const content = ref("# Custom Extensions\n\nYou can add any TipTap extension to enhance the editor functionality.");
+      return { args, content };
+    },
+    template: '<vc-editor v-bind="args" v-model="content"></vc-editor>',
+  }),
+};

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

@@ -35,6 +35,7 @@
         :disabled="disabled"
         :content-type="detectedType"
         :toolbar="filteredToolbar"
+        :custom-buttons="props.customButtons || []"
         @upload-image="triggerImageUpload"
       />
 
@@ -139,7 +140,7 @@
     </slot>
   </div>
 </template>
-
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { ref, watch, onBeforeUnmount, computed } from "vue";
 import { useEditor, EditorContent } from "@tiptap/vue-3";
@@ -152,7 +153,9 @@ import { TableCell } from "@tiptap/extension-table-cell";
 import { Link } from "@tiptap/extension-link";
 import { Image } from "@tiptap/extension-image";
 import { Placeholder } from "@tiptap/extension-placeholder";
+import { TextStyle } from "@tiptap/extension-text-style";
 import { Markdown } from "tiptap-markdown";
+import { FontSize } from "./_internal/extensions/font-size";
 import { format } from "prettier/standalone";
 import * as prettierPluginHtml from "prettier/parser-html";
 // eslint-disable-next-line import/no-named-as-default
@@ -160,6 +163,10 @@ import DOMPurify from "dompurify";
 import { VcLabel, VcHint } from "../..";
 import VcEditorToolbar from "./_internal/vc-editor-toolbar.vue";
 import VcEditorButton from "./_internal/vc-editor-button.vue";
+import type { CustomToolbarItem } from "./_internal/toolbar-types";
+
+// Export types for external use
+export type { CustomToolbarItem, CustomToolbarButton, CustomToolbarDropdown } from "./_internal/toolbar-types";
 
 // Define toolbar button types
 type ToolbarNames =
@@ -176,6 +183,7 @@ type ToolbarNames =
   | "link"
   | "image"
   | "table"
+  | "fontSize"
   | "separator";
 
 export interface Props {
@@ -191,6 +199,8 @@ export interface Props {
   currentLanguage?: string;
   maxlength?: number;
   toolbar?: ToolbarNames[];
+  extensions?: any[];
+  customButtons?: CustomToolbarItem[];
 }
 
 export interface Emits {
@@ -231,6 +241,7 @@ const filteredToolbar = computed(() => {
       "link",
       "image",
       "table",
+      "fontSize",
     ] as ToolbarNames[];
   }
   return props.toolbar;
@@ -294,27 +305,38 @@ function detectContentType(content: string): "html" | "markdown" {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const extensions: any[] = [
-  StarterKit,
-  Underline,
-  Table.configure({ resizable: true }),
-  TableRow,
-  TableHeader,
-  TableCell,
-  Link.configure({ openOnClick: false }),
-  Image,
-  Placeholder.configure({ placeholder: props.placeholder }),
-  Markdown.configure({
-    html: true, // Allow HTML input/output
-    tightLists: true, // No <p> inside <li> in markdown output
-    tightListClass: "tight", // Add class to <ul> allowing you to remove <p> margins when tight
-    bulletListMarker: "-", // <li> prefix in markdown output
-    linkify: false, // Create links from "https://..." text
-    breaks: true, // New lines (\n) in markdown input are converted to <br>
-    transformPastedText: false, // Allow to paste markdown text in the editor
-    transformCopiedText: false, // Copied text is transformed to markdown
-  }),
-];
+const extensions = computed(() => {
+  const baseExtensions: any[] = [
+    StarterKit,
+    Underline,
+    TextStyle,
+    FontSize,
+    Table.configure({ resizable: true }),
+    TableRow,
+    TableHeader,
+    TableCell,
+    Link.configure({ openOnClick: false }),
+    Image,
+    Placeholder.configure({ placeholder: props.placeholder }),
+    Markdown.configure({
+      html: true, // Allow HTML input/output
+      tightLists: true, // No <p> inside <li> in markdown output
+      tightListClass: "tight", // Add class to <ul> allowing you to remove <p> margins when tight
+      bulletListMarker: "-", // <li> prefix in markdown output
+      linkify: false, // Create links from "https://..." text
+      breaks: true, // New lines (\n) in markdown input are converted to <br>
+      transformPastedText: false, // Allow to paste markdown text in the editor
+      transformCopiedText: false, // Copied text is transformed to markdown
+    }),
+  ];
+
+  // Add custom extensions if provided
+  if (props.extensions && props.extensions.length > 0) {
+    baseExtensions.push(...props.extensions);
+  }
+
+  return baseExtensions;
+});
 
 const formattedSource = ref(props.modelValue || "");
 
@@ -417,13 +439,13 @@ function toggleSideBySideView() {
 const editor = useEditor({
   content: props.modelValue,
   editable: !props.disabled,
-  extensions,
+  extensions: extensions.value,
   onUpdate: ({ editor: tipTapEditor }) => {
     // Always output in Markdown by default, unless HTML is detected
     const output =
       detectedType.value === "html"
         ? tipTapEditor.getHTML()
-        : (tipTapEditor.storage.markdown as { getMarkdown: () => string }).getMarkdown();
+        : (tipTapEditor.storage as any).markdown?.getMarkdown?.() || tipTapEditor.getHTML();
 
     // Check maxlength if specified
     if (props.maxlength && output.length > props.maxlength) {
@@ -448,10 +470,10 @@ watch(
     const editorContent =
       detectedType.value === "html"
         ? editor.value.getHTML()
-        : (editor.value.storage.markdown as { getMarkdown: () => string }).getMarkdown();
+        : (editor.value.storage as any).markdown?.getMarkdown?.() || editor.value.getHTML();
 
     if (editorContent !== value) {
-      editor.value.commands.setContent(value || "", false);
+      editor.value.commands.setContent(value || "");
     }
   },
 );
@@ -508,6 +530,7 @@ async function handleImageSelection(event: Event) {
     console.error("Image upload failed:", error);
   }
 }
+
 </script>
 
 <style lang="scss">

package/ui/components/molecules/vc-slider/vc-slider.vue

@@ -6,15 +6,16 @@
         'vc-slider__swiper_overflow-visible': overflow,
         'vc-slider__swiper_navigation': navigation,
       }"
+      :modules="modules"
       :space-between="spaceBetweenSlides"
-      :navigation="buttonsList as any"
+      :navigation="navigation ? buttonsList : false"
       :slides-per-view="slidesPerView as any"
-      :resize-observer="true"
+      :observer="true"
+      :observe-parents="true"
     >
       <swiper-slide
         v-for="(slide, i) in slides"
         :key="i"
-        :swiper-ref="SwiperCore"
       >
         <slot :slide="slide"></slot>
       </swiper-slide>
@@ -43,10 +44,9 @@
 import { VcIcon } from "./../../";
 import { computed } from "vue";
 import { Swiper, SwiperSlide } from "swiper/vue";
-import SwiperCore, { Navigation } from "swiper";
-import "swiper/swiper-bundle.min.css";
-import "swiper/swiper.min.css";
-import "swiper/components/navigation/navigation.min.css";
+import { Navigation } from "swiper/modules";
+import "swiper/css";
+import "swiper/css/navigation";
 
 export interface Props {
   slides?: Record<string, unknown>[] | unknown[];
@@ -62,7 +62,7 @@ withDefaults(defineProps<Props>(), {
   spaceBetweenSlides: 10,
 });
 
-SwiperCore.use([Navigation]);
+const modules = [Navigation];
 
 const buttonsList = computed(() => ({
   nextEl: ".vc-slider__next",