sprintify-ui 0.11.34 → 0.12.0

package/dist/types/components/BaseRichText.vue.d.ts

@@ -2,12 +2,6 @@ import { Size } from '@/utils/sizes';
 import { ToolbarOption } from '@/types/ToolbarOption';
 type __VLS_Props = {
     modelValue: string | null | undefined;
-    driver?: 'ckeditor' | 'tiptap';
-    /**
-     * Defines the CKEditor layout style.
-     * Only applicable when `driver` is 'ckeditor'.
-     */
-    editor?: 'classic' | 'inline' | 'balloon';
     size?: Size;
     toolbar?: ToolbarOption[] | string[];
     placeholder?: string;
@@ -35,7 +29,5 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {
     name: string;
     hasError: boolean;
     toolbar: ToolbarOption[] | string[];
-    editor: "classic" | "inline" | "balloon";
-    driver: "ckeditor" | "tiptap";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/types/components/BaseTipTap.vue.d.ts

@@ -4,7 +4,8 @@ type __VLS_Props = {
     hasError?: boolean;
     disabled?: boolean;
     placeholder?: string;
-    toolbar?: string[];
+    toolbar?: string[] | 'simple' | 'complete';
+    noMargin?: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.11.34",
+  "version": "0.12.0",
   "type": "module",
   "scripts": {
     "generate-llm-txt": "node scripts/generate-llm-txt.js",
@@ -16,13 +16,11 @@
     "vue-tsc": "vue-tsc"
   },
   "peerDependencies": {
-    "@ckeditor/ckeditor5-vue": "^7.3.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.8",
     "@vueuse/core": "^10.0.0",
     "axios": "^0.26.1 || ^1.0.0",
-    "ckeditor5": "^47.3.0",
     "croppie": "^2.6.5",
     "flatpickr": "^4.6.13",
     "humanize-duration": "^3.0.0",
@@ -47,7 +45,6 @@
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
-    "@ckeditor/ckeditor5-vue": "^7.3.0",
     "@commitlint/cli": "^17.8.1",
     "@commitlint/config-conventional": "^17.8.1",
     "@iconify/vue": "^4.1.1",
@@ -77,7 +74,6 @@
     "autoprefixer": "^10.4.18",
     "axios": "^0.26.1",
     "babel-loader": "^8.3.0",
-    "ckeditor5": "^47.3.0",
     "croppie": "^2.6.5",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.57.0",

package/src/assets/base-rich-text.css

@@ -1,291 +1,4 @@
 body {
-  .base-rich-text {
-    
-    &.error {
-      .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content, .ck.ck-editor__main > .ck-editor__editable:not(.ck-focused) {
-        @apply border-red-500;
-      }
-    }
-  
-    /** Style Prose */
-    .ck-content {
-  
-      @apply p-3.5;
-
-      @apply leading-snug;
-  
-      h1, h2, h3, h4, h5, h6 {
-        @apply font-bold leading-snug tracking-normal;
-        margin-top: 0;
-        margin-bottom: 0.375em;
-      }
-  
-      h1 {
-        @apply text-4xl;
-      }
-  
-      h2 {
-        @apply text-3xl;
-      }
-  
-      h3 {
-        @apply text-2xl;
-      }
-  
-      h4 {
-        @apply text-xl;
-      }
-  
-      h5 {
-        @apply text-lg;
-      }
-  
-      h6 {
-        @apply text-base;
-      }
-  
-      p {
-        @apply text-base leading-snug;
-        margin: 1em 0;
-      }
-
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6,
-      p {
-        &:first-child {
-          margin-top: 0;
-        }
-      }
-  
-      ol,
-      ul {
-        @apply text-base leading-snug;
-        padding-left: 1.5em;
-        margin-bottom: 1em;
-  
-        li {
-          @apply leading-snug;
-          margin: 0.3em 0;
-  
-          &::before {
-            @apply text-slate-500;
-            width: 2em;
-            left: 3em;
-            text-align: left;
-            position: absolute;
-          }
-        }
-      }
-  
-      blockquote {
-        @apply text-base bg-slate-100;
-        margin: 1em 0;
-        padding: 1em;
-      }
-  
-      a {
-        @apply text-blue-600 underline;
-      }
-    }
-  }
-
-  /* Size: xs */
-  .base-rich-text-xs {
-    .ck-content {
-
-      @apply p-2.5;
-
-      h1 {
-        @apply text-2xl;
-      }
-
-      h2 {
-        @apply text-xl;
-      }
-
-      h3 {
-        @apply text-lg;
-      }
-
-      h4 {
-        @apply text-base;
-      }
-
-      p {
-        @apply text-xs;
-      }
-
-      ol,
-      ul {
-        li {
-          @apply text-xs;
-        }
-      }
-
-      blockquote {
-        @apply text-xs;
-      }
-
-      pre, .ql-syntax {
-        @apply text-xs;
-      }
-    }
-
-    
-  }
-
-  /* Size: sm */
-  .base-rich-text-sm {
-    .ck-content {
-
-      @apply p-3;
-
-      h1 {
-        @apply text-3xl;
-      }
-
-      h2 {
-        @apply text-2xl;
-      }
-
-      h3 {
-        @apply text-xl;
-      }
-
-      h4 {
-        @apply text-lg;
-      }
-
-      p {
-        @apply text-sm;
-      }
-
-      ol,
-      ul {
-        li {
-          @apply text-sm;
-        }
-      }
-
-      blockquote {
-        @apply text-sm;
-      }
-
-      pre, .ql-syntax {
-        @apply text-sm;
-      }
-    }
-  }
-
-  /* Size: md */
-  .base-rich-text-md {
-   
-  }
-
-  /* Size: lg */
-  .base-rich-text-lg {
-    .ck-content {
-
-      @apply p-5;
-
-      h1 {
-        @apply text-5xl;
-      }
-
-      h2 {
-        @apply text-4xl;
-      }
-
-      h3 {
-        @apply text-3xl;
-      }
-
-      h4 {
-        @apply text-2xl;
-      }
-
-      p {
-        @apply text-lg;
-      }
-
-      ol,
-      ul {
-        li {
-          @apply text-lg;
-        }
-      }
-
-      blockquote {
-        @apply text-lg;
-      }
-
-      pre, .ql-syntax {
-        @apply text-lg;
-      }
-    }
-  }
-
-  /* Size: xl */
-  .base-rich-text-xl {
-    .ck-content {
-
-      @apply p-6;
-
-      h1 {
-        @apply text-6xl;
-      }
-
-      h2 {
-        @apply text-5xl;
-      }
-
-      h3 {
-        @apply text-2xl;
-      }
-
-      h4 {
-        @apply text-xl;
-      }
-
-      p {
-        @apply text-xl;
-      }
-
-      ol,
-      ul {
-        li {
-          @apply text-xl;
-        }
-      }
-
-      blockquote {
-        @apply text-xl;
-      }
-
-      pre, .ql-syntax {
-        @apply text-xl;
-      }
-    }
-  }
-
-  .base-rich-text-no-margin {
-    .ck-content {
-      h1, h2, h3, h4, h5, h6, p, ol, ul {
-        margin: 0;
-      }
-
-      ol, ul {
-        li {
-          margin: 0;
-        }
-      }
-    }
-  }
-}
 
 /** TipTap */
 
@@ -317,3 +30,16 @@ body .tiptap {
       pointer-events: none;
     }
   }
+}
+
+body .tip-tap-no-margin .prose {
+  h1, h2, h3, h4, h5, h6, p, ol, ul {
+    margin: 0;
+  }
+
+  ol, ul {
+    li {
+      margin: 0;
+    }
+  }
+}

package/src/assets/main.css

@@ -11,9 +11,6 @@
 /** BaseCropper */
 @import "croppie/croppie.css";
 
-/** CK Editor */
-@import 'ckeditor5/ckeditor5.css';
-
 /** Global styles */
 
 @import "./flatpickr.css";

package/src/components/BaseRichText.stories.js

@@ -19,10 +19,6 @@ export default {
     placeholder: "This is a custom placeholder...",
   },
   argTypes: {
-    driver: {
-      control: { type: "select" },
-      options: ["ckeditor", "tiptap"],
-    },
     editor: {
       control: { type: "select" },
       options: ["classic", "inline", "balloon"],
@@ -47,35 +43,22 @@ const Template = (args) => ({
   `,
 });
 
-export const TipTapEditor = Template.bind({});
-TipTapEditor.args = {
-  driver: "tiptap",
-};
-
-export const ClassicEditor = Template.bind({});
-ClassicEditor.args = {
-  editor: "classic",
-};
-
-export const InlineEditor = Template.bind({});
-InlineEditor.args = {
-  editor: "inline",
+export const Demo = Template.bind({});
+Demo.args = {
 };
 
-export const BalloonEditor = Template.bind({});
-BalloonEditor.args = {
-  editor: "balloon",
+export const NoMargin = Template.bind({});
+NoMargin.args = {
+  noMargin: true,
 };
 
 export const CustomToolbar = Template.bind({});
 CustomToolbar.args = {
-  editor: "classic",
   toolbar: [
     "bold",
     "italic",
     "underline",
     "strikethrough",
-    "|",
     "undo",
     "redo",
   ]

package/src/components/BaseRichText.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="driver == 'tiptap'">
+  <div>
     <BaseTipTap
       :model-value="modelValue"
       :size="sizeInternal"
@@ -7,36 +7,10 @@
       :has-error="hasErrorInternal"
       :placeholder="placeholder"
       :toolbar="toolbar"
+      :no-margin="noMargin"
       @update:model-value="emitUpdate"
     />
   </div>
-  <div
-    v-else
-    class="base-rich-text relative"
-    :class="[
-      hasErrorInternal ? 'error' : '',
-      sizeInternal == 'xs' ? 'base-rich-text-xs' : '',
-      sizeInternal == 'sm' ? 'base-rich-text-sm' : '',
-      sizeInternal == 'md' ? 'base-rich-text-base' : '',
-      sizeInternal == 'lg' ? 'base-rich-text-lg' : '',
-      sizeInternal == 'xl' ? 'base-rich-text-xl' : '',
-      props.noMargin ? 'base-rich-text-no-margin' : '',
-    ]"
-  >
-    <BaseCkeditor
-      ref="baseCkeditorRef"
-      :model-value="modelValue"
-      :editor="editor"
-      :size="sizeInternal"
-      :toolbar="toolbar"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      @update:model-value="emitUpdate"
-      @focus="emit('focus', $event)"
-      @blur="emit('blur', $event)"
-      @input="emit('input', $event)"
-    />
-  </div>
 </template>
 
 <script lang="ts" setup>
@@ -45,16 +19,8 @@ import { Size } from '@/utils/sizes';
 import { ToolbarOption } from '@/types/ToolbarOption';
 import BaseTipTap from './BaseTipTap.vue';
 
-const BaseCkeditor = defineAsyncComponent(() => import('./BaseCkeditor.vue'));
-
 const props = withDefaults(defineProps<{
   modelValue: string | null | undefined;
-  driver?: 'ckeditor' | 'tiptap';
-  /**
-   * Defines the CKEditor layout style. 
-   * Only applicable when `driver` is 'ckeditor'.
-   */
-  editor?: 'classic' | 'inline' | 'balloon';
   size?: Size;
   toolbar?: ToolbarOption[] | string[];
   placeholder?: string;
@@ -64,7 +30,6 @@ const props = withDefaults(defineProps<{
   hasError?: boolean;
   noMargin?: boolean;
 }>(), {
-  driver: 'ckeditor',
   editor: 'classic',
   size: 'md',
   toolbar: undefined,
@@ -77,7 +42,7 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'input']);
 
-const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate, sizeInternal, addBeforeSubmitListener } =
+const { hasErrorInternal, emitUpdate, sizeInternal } =
   useField({
     name: computed(() => props.name),
     required: computed(() => props.required),
@@ -86,19 +51,4 @@ const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate, sizeIntern
     emit: emit,
   });
 
-const baseCkeditorRef = ref<InstanceType<typeof BaseCkeditor> | null>(null);
-
-// This make sure that the latest editor data is emitted when the form is submitted
-// If the user types really fast, then press submit really fast, the editor data might not be up to date
-// This is a workaround to make sure that the latest data is emitted
-addBeforeSubmitListener(() => {
-  if (!baseCkeditorRef.value) {
-    return;
-  }
-
-  const latestData = baseCkeditorRef.value.getEditorData();
-
-  emitUpdate(latestData);
-});
-
 </script>

package/src/components/BaseTipTap.vue

@@ -3,6 +3,7 @@
     class="border rounded-md overflow-hidden bg-white || tiptap"
     :class="[
       hasError ? 'border-red-500' : 'border-slate-300',
+      noMargin ? 'tip-tap-no-margin' : ''
     ]"
   >
     <div class="divide-x px-1 py-1 border-b flex">
@@ -23,7 +24,7 @@
 
     <div
       class="bg-white p-5"
-      :class="[disabled ? 'cursor-not-allowed' : '']"
+      :class="[disabled ? 'cursor-not-allowed opacity-80' : '']"
     >
       <editor-content
         v-if="editor"
@@ -39,6 +40,7 @@ import Document from '@tiptap/extension-document';
 import Link from '@tiptap/extension-link';
 import Superscript from '@tiptap/extension-superscript';
 import Subscript from '@tiptap/extension-subscript';
+import Strike from '@tiptap/extension-strike'
 import { Placeholder } from '@tiptap/extensions'
 import { Footnotes, FootnoteReference, Footnote } from "tiptap-footnotes";
 import StarterKit from '@tiptap/starter-kit';
@@ -51,7 +53,8 @@ const props = defineProps<{
   hasError?: boolean;
   disabled?: boolean;
   placeholder?: string;
-  toolbar?: string[];
+  toolbar?: string[] | 'simple' | 'complete';
+  noMargin?: boolean;
 }>();
 
 const editor = new Editor({
@@ -72,6 +75,7 @@ const editor = new Editor({
     Placeholder.configure({
       placeholder: props.placeholder || 'Start typing here...',
     }),
+    Strike,
     Superscript,
     Subscript,
     Footnotes,
@@ -223,6 +227,11 @@ const actions = computed<Action[]>(() => {
       icon: 'material-symbols:format-underlined',
       command: () => editor.chain().focus().toggleUnderline().run(),
     },
+    {
+      name: 'strikethrough',
+      icon: 'material-symbols:strikethrough-s',
+      command: () => editor.chain().focus().toggleStrike().run(),
+    },
     {
       name: 'superscript',
       icon: 'material-symbols:superscript',
@@ -267,12 +276,38 @@ const actions = computed<Action[]>(() => {
   ];
 });
 
+const toolbarTemplates: Record<string, string[]> = {
+  simple: ['bold', 'italic', 'underline', 'link'],
+  complete: [
+    'undo',
+    'redo',
+    'paragraph',
+    'heading-2',
+    'heading-3',
+    'bold',
+    'italic',
+    'underline',
+    'superscript',
+    'subscript',
+    'link',
+    'unlink',
+    'bulletList',
+    'orderedList',
+    'footnote',
+    'nonBreakingSpace',
+  ],
+};
+
 const filteredActions = computed(() => {
   if (!props.toolbar || props.toolbar.length === 0) {
     return actions.value;
   }
 
-  return actions.value.filter(action => props.toolbar?.includes(action.name));
+  const toolbar = typeof props.toolbar === 'string'
+    ? toolbarTemplates[props.toolbar] ?? []
+    : props.toolbar;
+
+  return actions.value.filter(action => toolbar.includes(action.name));
 });
 
 </script>