sprintify-ui 0.10.80 → 0.10.82

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

@@ -4,11 +4,9 @@ type __VLS_Props = {
     modelValue: string | null | undefined;
     editor?: 'classic' | 'inline' | 'balloon';
     size?: Size;
-    toolbar?: ToolbarOption[];
+    toolbar?: ToolbarOption[] | string[];
     placeholder?: string;
     disabled?: boolean;
-    required?: boolean;
-    name?: string;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {
     getEditorData(): string;
@@ -26,11 +24,9 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {
     onReady?: ((...args: any[]) => any) | undefined;
 }>, {
     size: Size;
-    required: boolean;
     disabled: boolean;
-    name: string;
     placeholder: string;
-    toolbar: ToolbarOption[];
+    toolbar: ToolbarOption[] | string[];
     editor: "classic" | "inline" | "balloon";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -71,7 +71,7 @@ declare const rowsInternal: import("vue").Ref<{
             minus: (duration: import("luxon").DurationLike) => import("luxon").DateTime<boolean>;
             startOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").StartOfOptions) => import("luxon").DateTime<boolean>;
             endOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").EndOfOptions) => import("luxon").DateTime<boolean>;
-            toFormat: (fmt: string, opts?: import("luxon").LocaleOptions) => string;
+            toFormat: (format: string, options?: import("luxon").LocaleOptions) => string;
             toLocaleString: (formatOpts?: import("luxon").DateTimeFormatOptions, opts?: import("luxon").LocaleOptions) => string;
             toLocaleParts: (opts?: import("luxon").DateTimeFormatOptions) => Intl.DateTimeFormatPart[];
             toISO: (opts?: import("luxon").ToISOTimeOptions) => string | null;
@@ -154,7 +154,7 @@ declare const rowsInternal: import("vue").Ref<{
             minus: (duration: import("luxon").DurationLike) => import("luxon").DateTime<boolean>;
             startOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").StartOfOptions) => import("luxon").DateTime<boolean>;
             endOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").EndOfOptions) => import("luxon").DateTime<boolean>;
-            toFormat: (fmt: string, opts?: import("luxon").LocaleOptions) => string;
+            toFormat: (format: string, options?: import("luxon").LocaleOptions) => string;
             toLocaleString: (formatOpts?: import("luxon").DateTimeFormatOptions, opts?: import("luxon").LocaleOptions) => string;
             toLocaleParts: (opts?: import("luxon").DateTimeFormatOptions) => Intl.DateTimeFormatPart[];
             toISO: (opts?: import("luxon").ToISOTimeOptions) => string | null;
@@ -252,7 +252,7 @@ declare const rowsInternal: import("vue").Ref<{
             minus: (duration: import("luxon").DurationLike) => import("luxon").DateTime<boolean>;
             startOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").StartOfOptions) => import("luxon").DateTime<boolean>;
             endOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").EndOfOptions) => import("luxon").DateTime<boolean>;
-            toFormat: (fmt: string, opts?: import("luxon").LocaleOptions) => string;
+            toFormat: (format: string, options?: import("luxon").LocaleOptions) => string;
             toLocaleString: (formatOpts?: import("luxon").DateTimeFormatOptions, opts?: import("luxon").LocaleOptions) => string;
             toLocaleParts: (opts?: import("luxon").DateTimeFormatOptions) => Intl.DateTimeFormatPart[];
             toISO: (opts?: import("luxon").ToISOTimeOptions) => string | null;
@@ -335,7 +335,7 @@ declare const rowsInternal: import("vue").Ref<{
             minus: (duration: import("luxon").DurationLike) => import("luxon").DateTime<boolean>;
             startOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").StartOfOptions) => import("luxon").DateTime<boolean>;
             endOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").EndOfOptions) => import("luxon").DateTime<boolean>;
-            toFormat: (fmt: string, opts?: import("luxon").LocaleOptions) => string;
+            toFormat: (format: string, options?: import("luxon").LocaleOptions) => string;
             toLocaleString: (formatOpts?: import("luxon").DateTimeFormatOptions, opts?: import("luxon").LocaleOptions) => string;
             toLocaleParts: (opts?: import("luxon").DateTimeFormatOptions) => Intl.DateTimeFormatPart[];
             toISO: (opts?: import("luxon").ToISOTimeOptions) => string | null;
@@ -429,7 +429,7 @@ declare const groups: import("vue").Ref<{
         minus: (duration: import("luxon").DurationLike) => import("luxon").DateTime<boolean>;
         startOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").StartOfOptions) => import("luxon").DateTime<boolean>;
         endOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").EndOfOptions) => import("luxon").DateTime<boolean>;
-        toFormat: (fmt: string, opts?: import("luxon").LocaleOptions) => string;
+        toFormat: (format: string, options?: import("luxon").LocaleOptions) => string;
         toLocaleString: (formatOpts?: import("luxon").DateTimeFormatOptions, opts?: import("luxon").LocaleOptions) => string;
         toLocaleParts: (opts?: import("luxon").DateTimeFormatOptions) => Intl.DateTimeFormatPart[];
         toISO: (opts?: import("luxon").ToISOTimeOptions) => string | null;
@@ -518,7 +518,7 @@ declare const groups: import("vue").Ref<{
         minus: (duration: import("luxon").DurationLike) => import("luxon").DateTime<boolean>;
         startOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").StartOfOptions) => import("luxon").DateTime<boolean>;
         endOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").EndOfOptions) => import("luxon").DateTime<boolean>;
-        toFormat: (fmt: string, opts?: import("luxon").LocaleOptions) => string;
+        toFormat: (format: string, options?: import("luxon").LocaleOptions) => string;
         toLocaleString: (formatOpts?: import("luxon").DateTimeFormatOptions, opts?: import("luxon").LocaleOptions) => string;
         toLocaleParts: (opts?: import("luxon").DateTimeFormatOptions) => Intl.DateTimeFormatPart[];
         toISO: (opts?: import("luxon").ToISOTimeOptions) => string | null;
@@ -608,7 +608,7 @@ declare const ticks: import("vue").Ref<{
         minus: (duration: import("luxon").DurationLike) => import("luxon").DateTime<boolean>;
         startOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").StartOfOptions) => import("luxon").DateTime<boolean>;
         endOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").EndOfOptions) => import("luxon").DateTime<boolean>;
-        toFormat: (fmt: string, opts?: import("luxon").LocaleOptions) => string;
+        toFormat: (format: string, options?: import("luxon").LocaleOptions) => string;
         toLocaleString: (formatOpts?: import("luxon").DateTimeFormatOptions, opts?: import("luxon").LocaleOptions) => string;
         toLocaleParts: (opts?: import("luxon").DateTimeFormatOptions) => Intl.DateTimeFormatPart[];
         toISO: (opts?: import("luxon").ToISOTimeOptions) => string | null;
@@ -697,7 +697,7 @@ declare const ticks: import("vue").Ref<{
         minus: (duration: import("luxon").DurationLike) => import("luxon").DateTime<boolean>;
         startOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").StartOfOptions) => import("luxon").DateTime<boolean>;
         endOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").EndOfOptions) => import("luxon").DateTime<boolean>;
-        toFormat: (fmt: string, opts?: import("luxon").LocaleOptions) => string;
+        toFormat: (format: string, options?: import("luxon").LocaleOptions) => string;
         toLocaleString: (formatOpts?: import("luxon").DateTimeFormatOptions, opts?: import("luxon").LocaleOptions) => string;
         toLocaleParts: (opts?: import("luxon").DateTimeFormatOptions) => Intl.DateTimeFormatPart[];
         toISO: (opts?: import("luxon").ToISOTimeOptions) => string | null;
@@ -802,7 +802,7 @@ declare var __VLS_1: {
                 minus: (duration: import("luxon").DurationLike) => import("luxon").DateTime<boolean>;
                 startOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").StartOfOptions) => import("luxon").DateTime<boolean>;
                 endOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").EndOfOptions) => import("luxon").DateTime<boolean>;
-                toFormat: (fmt: string, opts?: import("luxon").LocaleOptions) => string;
+                toFormat: (format: string, options?: import("luxon").LocaleOptions) => string;
                 toLocaleString: (formatOpts?: import("luxon").DateTimeFormatOptions, opts?: import("luxon").LocaleOptions) => string;
                 toLocaleParts: (opts?: import("luxon").DateTimeFormatOptions) => Intl.DateTimeFormatPart[];
                 toISO: (opts?: import("luxon").ToISOTimeOptions) => string | null;
@@ -885,7 +885,7 @@ declare var __VLS_1: {
                 minus: (duration: import("luxon").DurationLike) => import("luxon").DateTime<boolean>;
                 startOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").StartOfOptions) => import("luxon").DateTime<boolean>;
                 endOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").EndOfOptions) => import("luxon").DateTime<boolean>;
-                toFormat: (fmt: string, opts?: import("luxon").LocaleOptions) => string;
+                toFormat: (format: string, options?: import("luxon").LocaleOptions) => string;
                 toLocaleString: (formatOpts?: import("luxon").DateTimeFormatOptions, opts?: import("luxon").LocaleOptions) => string;
                 toLocaleParts: (opts?: import("luxon").DateTimeFormatOptions) => Intl.DateTimeFormatPart[];
                 toISO: (opts?: import("luxon").ToISOTimeOptions) => string | null;
@@ -981,7 +981,7 @@ declare var __VLS_1: {
             minus: (duration: import("luxon").DurationLike) => import("luxon").DateTime<boolean>;
             startOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").StartOfOptions) => import("luxon").DateTime<boolean>;
             endOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").EndOfOptions) => import("luxon").DateTime<boolean>;
-            toFormat: (fmt: string, opts?: import("luxon").LocaleOptions) => string;
+            toFormat: (format: string, options?: import("luxon").LocaleOptions) => string;
             toLocaleString: (formatOpts?: import("luxon").DateTimeFormatOptions, opts?: import("luxon").LocaleOptions) => string;
             toLocaleParts: (opts?: import("luxon").DateTimeFormatOptions) => Intl.DateTimeFormatPart[];
             toISO: (opts?: import("luxon").ToISOTimeOptions) => string | null;
@@ -1064,7 +1064,7 @@ declare var __VLS_1: {
             minus: (duration: import("luxon").DurationLike) => import("luxon").DateTime<boolean>;
             startOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").StartOfOptions) => import("luxon").DateTime<boolean>;
             endOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").EndOfOptions) => import("luxon").DateTime<boolean>;
-            toFormat: (fmt: string, opts?: import("luxon").LocaleOptions) => string;
+            toFormat: (format: string, options?: import("luxon").LocaleOptions) => string;
             toLocaleString: (formatOpts?: import("luxon").DateTimeFormatOptions, opts?: import("luxon").LocaleOptions) => string;
             toLocaleParts: (opts?: import("luxon").DateTimeFormatOptions) => Intl.DateTimeFormatPart[];
             toISO: (opts?: import("luxon").ToISOTimeOptions) => string | null;

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

@@ -2,9 +2,14 @@ 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[];
+    toolbar?: ToolbarOption[] | string[];
     placeholder?: string;
     disabled?: boolean;
     required?: boolean;
@@ -28,7 +33,8 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {
     name: string;
     placeholder: string;
     hasError: boolean;
-    toolbar: ToolbarOption[];
+    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

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    modelValue: string | null | undefined;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    hasError?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    toolbar?: string[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.10.80",
+  "version": "0.10.82",
   "type": "module",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
@@ -21,7 +21,7 @@
     "@tailwindcss/typography": "^0.5.8",
     "@vueuse/core": "^10.0.0",
     "axios": "^0.26.1",
-    "ckeditor5": "^44.1.0",
+    "ckeditor5": "^47.3.0",
     "croppie": "^2.6.5",
     "flatpickr": "^4.6.13",
     "humanize-duration": "^3.0.0",
@@ -43,8 +43,8 @@
     "tailwind-merge": "^2.4.0"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-vue": "^7.3.0",
     "@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",
@@ -57,6 +57,9 @@
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
+    "@tiptap/pm": "^3.13.0",
+    "@tiptap/starter-kit": "^3.13.0",
+    "@tiptap/vue-3": "^3.13.0",
     "@types/croppie": "^2.6.4",
     "@types/google.maps": "^3.55.4",
     "@types/humanize-duration": "^3.27.4",
@@ -74,6 +77,7 @@
     "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",
@@ -89,7 +93,6 @@
     "maska": "^3.0.4",
     "object-hash": "^3.0.0",
     "object-to-formdata": "^4.5.1",
-    "ckeditor5": "^44.1.0",
     "pinia": "^2.1.7",
     "postcss": "^8.4.36",
     "postcss-import": "^15.1.0",
@@ -102,6 +105,7 @@
     "standard-version": "^9.5.0",
     "storybook": "^8.3.0",
     "tailwindcss": "^3.4.1",
+    "tiptap-footnotes": "^3.0.1",
     "typescript": "^5.6.3",
     "unplugin-auto-import": "^0.12.2",
     "vite": "^5.4.5",

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

@@ -268,4 +268,35 @@ body {
       }
     }
   }
-}
+}
+
+/** TipTap */
+
+body .tiptap {
+
+    ol.footnotes {
+      margin-top: 20px;
+      padding: 20px 0;
+      list-style-type: decimal;
+      padding-left: 13px;
+      font-size: 0.8em;
+    }
+
+    ol.footnotes:has(li) {
+      @apply border-t border-slate-300;
+    }
+
+    ol.footnotes li p {
+      margin: 0px;
+      line-height: 0.9em;
+      @apply text-slate-500;
+    }
+
+    p.is-editor-empty:first-child::before {
+      @apply text-slate-400;
+      content: attr(data-placeholder);
+      float: left;
+      height: 0;
+      pointer-events: none;
+    }
+  }

package/src/components/BaseCkeditor.vue

@@ -4,7 +4,6 @@
     :editor="editorInternal"
     :config="config"
     :disabled="disabled"
-    :name="name"
     @update:model-value="emit('update:modelValue', $event)"
     @focus="emit('focus', $event)"
     @blur="emit('blur', $event)"
@@ -16,7 +15,6 @@
 <script lang="ts" setup>
 import { ClassicEditor, InlineEditor, BalloonEditor, Essentials, SourceEditing, MediaEmbed, Paragraph, Bold, Italic, List, Link, Autoformat, Heading, Underline, Code, CodeBlock, Table, TableToolbar, Image, ImageResize, ImageStyle, ImageToolbar, ImageInsert, AutoImage, Base64UploadAdapter, PasteFromOffice, BlockToolbar, Font, FindAndReplace, RemoveFormat } from 'ckeditor5';
 import { Ckeditor } from '@ckeditor/ckeditor5-vue';
-
 import { Size } from '@/utils/sizes';
 import { ToolbarOption } from '@/types/ToolbarOption';
 
@@ -24,21 +22,37 @@ const props = withDefaults(defineProps<{
   modelValue: string | null | undefined;
   editor?: 'classic' | 'inline' | 'balloon';
   size?: Size;
-  toolbar?: ToolbarOption[];
+  toolbar?: ToolbarOption[] | string[];
   placeholder?: string;
   disabled?: boolean;
-  required?: boolean;
-  name?: string;
 }>(), {
   editor: 'classic',
   size: 'md',
   toolbar() {
-    return ['undo', 'redo', '|', 'sourceEditing', 'heading', 'bold', 'italic', 'underline', '|', 'link', 'insertImage', '|', 'numberedList', 'bulletedList', '|', 'code', 'codeblock', '|', 'insertTable'] as ToolbarOption[];
+    return [
+      'undo',
+      'redo',
+      '|',
+      'sourceEditing',
+      'heading',
+      'bold',
+      'italic',
+      'underline',
+      '|',
+      'link',
+      'insertImage',
+      '|',
+      'numberedList',
+      'bulletedList',
+      '|',
+      'code',
+      'codeblock',
+      '|',
+      'insertTable'
+    ] as ToolbarOption[];
   },
   placeholder: '',
   disabled: false,
-  required: false,
-  name: '',
   hasError: false,
 });
 

package/src/components/BaseRichText.stories.js

@@ -19,6 +19,10 @@ export default {
     placeholder: "This is a custom placeholder...",
   },
   argTypes: {
+    driver: {
+      control: { type: "select" },
+      options: ["ckeditor", "tiptap"],
+    },
     editor: {
       control: { type: "select" },
       options: ["classic", "inline", "balloon"],
@@ -42,6 +46,11 @@ const Template = (args) => ({
   `,
 });
 
+export const TipTapEditor = Template.bind({});
+TipTapEditor.args = {
+  driver: "tiptap",
+};
+
 export const ClassicEditor = Template.bind({});
 ClassicEditor.args = {
   editor: "classic",

package/src/components/BaseRichText.vue

@@ -1,5 +1,17 @@
 <template>
+  <div v-if="driver == 'tiptap'">
+    <BaseTipTap
+      :model-value="modelValue"
+      :size="sizeInternal"
+      :disabled="disabled"
+      :has-error="hasErrorInternal"
+      :placeholder="placeholder"
+      :toolbar="toolbar"
+      @update:model-value="emitUpdate"
+    />
+  </div>
   <div
+    v-else
     class="base-rich-text relative"
     :class="[
       hasErrorInternal ? 'error' : '',
@@ -18,8 +30,6 @@
       :toolbar="toolbar"
       :placeholder="placeholder"
       :disabled="disabled"
-      :required="requiredInternal"
-      :name="nameInternal"
       @update:model-value="emitUpdate"
       @focus="emit('focus', $event)"
       @blur="emit('blur', $event)"
@@ -32,25 +42,30 @@
 import { useField } from '@/composables/field';
 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[];
+  toolbar?: ToolbarOption[] | string[];
   placeholder?: string;
   disabled?: boolean;
   required?: boolean;
   name?: string;
   hasError?: boolean;
 }>(), {
+  driver: 'ckeditor',
   editor: 'classic',
   size: 'md',
-  toolbar() {
-    return ['undo', 'redo', '|', 'heading', 'bold', 'italic', 'underline', '|', 'link', 'insertImage', '|', 'numberedList', 'bulletedList', '|', 'code', 'codeblock', '|', 'insertTable'] as ToolbarOption[];
-  },
+  toolbar: undefined,
   placeholder: '',
   disabled: false,
   required: false,

package/src/components/BaseTipTap.vue

@@ -0,0 +1,259 @@
+<template>
+  <div
+    class="border rounded-md overflow-hidden bg-white || tiptap"
+    :class="[
+      hasError ? 'border-red-500' : 'border-slate-300',
+    ]"
+  >
+    <div class="divide-x px-1 py-1 border-b flex">
+      <button
+        v-for="action in filteredActions"
+        :key="action.name"
+        :class="[buttonClass, editor.isActive(action.name) ? 'bg-slate-200' : '']"
+        type="button"
+        :disabled="disabled"
+        @click="action.command()"
+      >
+        <BaseIcon
+          class="h-5 w-5"
+          :icon="action.icon"
+        />
+      </button>
+    </div>
+
+    <div
+      class="bg-white p-5"
+      :class="[disabled ? 'cursor-not-allowed' : '']"
+    >
+      <editor-content
+        v-if="editor"
+        :editor="editor"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Editor, EditorContent } from '@tiptap/vue-3';
+import Document from '@tiptap/extension-document';
+import Link from '@tiptap/extension-link';
+import { Placeholder } from '@tiptap/extensions'
+import { Footnotes, FootnoteReference, Footnote } from "tiptap-footnotes";
+import StarterKit from '@tiptap/starter-kit';
+
+const emit = defineEmits(['update:modelValue']);
+
+const props = defineProps<{
+  modelValue: string | null | undefined;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  hasError?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+  toolbar?: string[];
+}>();
+
+const editor = new Editor({
+  editable: !props.disabled,
+  extensions: [
+    StarterKit.configure({
+      document: false,
+      link: false,
+    }),
+    Document.extend({
+      content: "block+ footnotes?",
+    }),
+    Link.configure({
+      openOnClick: false,
+      defaultProtocol: 'https',
+      enableClickSelection: true,
+    }),
+    Placeholder.configure({
+      placeholder: props.placeholder || 'Start typing here...',
+    }),
+    Footnotes,
+    Footnote,
+    FootnoteReference,
+  ],
+  editorProps: {
+    attributes: {
+      class: 'prose prose-sm mx-auto max-w-full focus:outline-none',
+    },
+  },
+  content: props.modelValue,
+  onUpdate: () => {
+    emit('update:modelValue', editor?.getHTML() || '');
+  },
+});
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    const isSame = editor?.getHTML() === newValue;
+
+    if (isSame) {
+      return;
+    }
+
+    editor?.commands.setContent(newValue ?? '');
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.disabled,
+  (newValue) => {
+    editor?.setEditable(!newValue);
+  },
+);
+
+watch(
+  () => props.size,
+  (newValue) => {
+
+    const lookup = {
+      'xs': 'prose-sm',
+      'sm': 'prose-sm',
+      'md': 'prose-sm',
+      'lg': 'prose-md',
+      'xl': 'prose-lg',
+    };
+
+    const sizeClass = lookup[newValue || 'md'] ?? '';
+
+    editor?.view.setProps({
+      attributes: {
+        class: `mx-auto max-w-full prose focus:outline-none ${sizeClass}`
+      }
+    })
+  },
+  { immediate: true },
+)
+
+onBeforeUnmount(() => {
+  if (editor) {
+    editor.destroy();
+  }
+});
+
+function setLink() {
+  const previousUrl = editor.getAttributes('link').href;
+  const url = window.prompt('URL', previousUrl);
+
+  // cancelled
+  if (url === null) {
+    return;
+  }
+
+  // empty
+  if (url === '') {
+    editor.chain().focus().extendMarkRange('link').unsetLink().run();
+
+    return;
+  }
+
+  // update link
+  editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
+}
+
+const buttonClass = computed(() => {
+  const sizeClass = {
+    xs: 'p-1',
+    sm: 'p-1.5',
+    md: 'p-2',
+    lg: 'p-2.5',
+    xl: 'p-3',
+  }
+
+  return [
+    'hover:bg-slate-100',
+    'disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white',
+    sizeClass[props.size || 'md'] || sizeClass['md'],
+  ];
+});
+
+interface Action {
+  name: string;
+  icon: string;
+  command: () => void;
+}
+
+const actions = computed<Action[]>(() => {
+  return [
+    {
+      name: 'undo',
+      icon: 'mdi:undo-variant',
+      command: () => editor.chain().focus().undo().run(),
+    },
+    {
+      name: 'redo',
+      icon: 'mdi:redo-variant',
+      command: () => editor.chain().focus().redo().run(),
+    },
+    {
+      name: 'paragraph',
+      icon: 'material-symbols:format-paragraph',
+      command: () => editor.chain().focus().setParagraph().run(),
+    },
+    {
+      name: 'heading-2',
+      icon: 'material-symbols:format-h2',
+      command: () => editor.chain().focus().setHeading({ level: 2 }).run(),
+    },
+    {
+      name: 'heading-3',
+      icon: 'material-symbols:format-h3',
+      command: () => editor.chain().focus().setHeading({ level: 3 }).run(),
+    },
+    {
+      name: 'bold',
+      icon: 'material-symbols:format-bold',
+      command: () => editor.chain().focus().toggleBold().run(),
+    },
+    {
+      name: 'italic',
+      icon: 'material-symbols:format-italic',
+      command: () => editor.chain().focus().toggleItalic().run(),
+    },
+    {
+      name: 'underline',
+      icon: 'material-symbols:format-underlined',
+      command: () => editor.chain().focus().toggleUnderline().run(),
+    },
+    {
+      name: 'link',
+      icon: 'material-symbols:link',
+      command: () => setLink(),
+    },
+    {
+      name: 'unlink',
+      icon: 'material-symbols:link-off',
+      command: () => editor.chain().focus().unsetLink().run(),
+    },
+    {
+      name: 'bulletList',
+      icon: 'material-symbols:format-list-bulleted',
+      command: () => editor.chain().focus().toggleBulletList().run(),
+    },
+    {
+      name: 'orderedList',
+      icon: 'material-symbols:format-list-numbered',
+      command: () => editor.chain().focus().toggleOrderedList().run(),
+    },
+    {
+      name: 'footnote',
+      icon: 'material-symbols:edit-note-outline',
+      command: () => editor?.commands.addFootnote(),
+    },
+
+  ];
+});
+
+const filteredActions = computed(() => {
+  if (!props.toolbar || props.toolbar.length === 0) {
+    return actions.value;
+  }
+
+  return actions.value.filter(action => props.toolbar?.includes(action.name));
+});
+
+</script>