sprintify-ui 0.11.34 → 0.12.1

package/src/components/BaseTipTap.vue

@@ -3,33 +3,144 @@
     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">
-      <button
+    <div class="px-1 py-1 border-b flex items-center">
+      <template
         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>
+        <BaseDropdown
+          v-if="action.name === 'highlight'"
+          placement="bottom"
+          tw-button="block"
+        >
+          <template #button>
+            <div :class="[buttonClass, editor.isActive('highlight') ? 'bg-slate-200' : '']">
+              <BaseIcon
+                class="h-4 w-4 text-slate-600"
+                :icon="action.icon"
+              />
+            </div>
+          </template>
+          <template #dropdown="{ close }">
+            <div class="bg-white rounded-full shadow-lg border border-slate-200 px-4 py-3 flex items-center gap-2">
+              <button
+                v-for="color in highlightColors"
+                :key="color"
+                type="button"
+                class="w-5 h-5 rounded-full ring-inset ring-1 ring-black/20"
+                :style="{ backgroundColor: color }"
+                @click="setHighlight(color); close()"
+              />
+              <div class="w-px h-5 bg-slate-200" />
+              <button
+                type="button"
+                class="w-5 h-5 flex items-center justify-center bg-white "
+                @click="unsetHighlight(); close()"
+              >
+                <BaseIcon
+                  class="h-5 w-5 text-slate-600"
+                  icon="lucide:ban"
+                />
+              </button>
+            </div>
+          </template>
+        </BaseDropdown>
+        <BaseDropdown
+          v-else-if="action.name === 'link'"
+          placement="bottom"
+          tw-button="block"
+        >
+          <template #button>
+            <div
+              :class="[buttonClass, editor.isActive('link') ? 'bg-slate-200' : '']"
+              @click="openLinkDropdown"
+            >
+              <BaseIcon
+                class="h-4 w-4 text-slate-600"
+                :icon="action.icon"
+              />
+            </div>
+          </template>
+          <template #dropdown="{ close }">
+            <div class="bg-white rounded-full shadow-lg border border-slate-200 pl-4 pr-3 py-2 flex items-center gap-2 focus:outline-none outline-none">
+              <input
+                :ref="focusLinkInput"
+                v-model="linkUrl"
+                type="text"
+                class="bg-transparent border-none border-0 border-transparent shadow-none focus:border-none focus:outline-none focus:ring-0 focus:shadow-none outline-none ring-0 text-sm text-slate-700 placeholder-slate-400 w-56 py-1 px-2"
+                :placeholder="t('sui.paste_link')"
+                @keydown.enter.prevent="applyLink(); close()"
+              >
+              <button
+                type="button"
+                class="w-7 h-7 flex items-center justify-center rounded-full hover:bg-slate-100"
+                @click="applyLink(); close()"
+              >
+                <BaseIcon
+                  class="h-4 w-4 text-slate-600"
+                  icon="lucide:corner-down-left"
+                />
+              </button>
+              <div class="w-px h-5 bg-slate-200" />
+              <button
+                type="button"
+                class="w-7 h-7 flex items-center justify-center rounded-full hover:bg-slate-100 disabled:opacity-40 disabled:hover:bg-transparent"
+                :disabled="!linkUrl"
+                @click="openLink(linkUrl)"
+              >
+                <BaseIcon
+                  class="h-4 w-4 text-slate-600"
+                  icon="lucide:external-link"
+                />
+              </button>
+              <button
+                type="button"
+                class="w-7 h-7 flex items-center justify-center rounded-full hover:bg-slate-100"
+                @click="removeLink(); close()"
+              >
+                <BaseIcon
+                  class="h-4 w-4 text-slate-600"
+                  icon="lucide:trash-2"
+                />
+              </button>
+            </div>
+          </template>
+        </BaseDropdown>
+        <button
+          v-else
+          :class="[buttonClass, editor.isActive(action.name) ? 'bg-slate-200' : '']"
+          type="button"
+          :disabled="disabled"
+          @click="action.command()"
+        >
+          <BaseIcon
+            class="h-4 w-4 text-slate-600"
+            :icon="action.icon"
+          />
+        </button>
+      </template>
     </div>
 
     <div
       class="bg-white p-5"
-      :class="[disabled ? 'cursor-not-allowed' : '']"
+      :class="[disabled ? 'cursor-not-allowed opacity-80' : '']"
     >
       <editor-content
         v-if="editor"
         :editor="editor"
       />
     </div>
+
+    <input
+      ref="imageInput"
+      type="file"
+      accept="image/*"
+      class="hidden"
+      @change="onImageSelected"
+    >
   </div>
 </template>
 
@@ -39,9 +150,15 @@ 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 Image from '@tiptap/extension-image';
+import Highlight from '@tiptap/extension-highlight';
 import { Placeholder } from '@tiptap/extensions'
 import { Footnotes, FootnoteReference, Footnote } from "tiptap-footnotes";
 import StarterKit from '@tiptap/starter-kit';
+import resizeImageForUpload from '@/utils/resizeImageForUpload';
+import BaseDropdown from './BaseDropdown.vue';
+import { t } from '@/i18n';
 
 const emit = defineEmits(['update:modelValue']);
 
@@ -51,7 +168,8 @@ const props = defineProps<{
   hasError?: boolean;
   disabled?: boolean;
   placeholder?: string;
-  toolbar?: string[];
+  toolbar?: string[] | 'simple' | 'complete';
+  noMargin?: boolean;
 }>();
 
 const editor = new Editor({
@@ -72,15 +190,23 @@ const editor = new Editor({
     Placeholder.configure({
       placeholder: props.placeholder || 'Start typing here...',
     }),
+    Strike,
     Superscript,
     Subscript,
+    Image.configure({
+      inline: false,
+      allowBase64: true,
+    }),
+    Highlight.configure({
+      multicolor: true,
+    }),
     Footnotes,
     Footnote,
     FootnoteReference,
   ],
   editorProps: {
     attributes: {
-      class: 'prose prose-sm mx-auto max-w-full focus:outline-none',
+      class: 'prose prose-sm focus:outline-none',
     },
   },
   content: props.modelValue,
@@ -139,37 +265,117 @@ onBeforeUnmount(() => {
   }
 });
 
-function setLink() {
-  const previousUrl = editor.getAttributes('link').href;
-  const url = window.prompt('URL', previousUrl);
+const imageInput = ref<HTMLInputElement | null>(null);
+
+function pickImage() {
+  imageInput.value?.click();
+}
+
+const highlightColors = [
+  '#BBF7D0',
+  '#BFDBFE',
+  '#FECACA',
+  '#E9D5FF',
+  '#FEF08A',
+];
+
+function setHighlight(color: string) {
+  editor.chain().focus().setHighlight({ color }).run();
+}
+
+function unsetHighlight() {
+  editor.chain().focus().unsetHighlight().run();
+}
+
+const MAX_IMAGE_BYTES = 1024 * 1024;
 
-  // cancelled
-  if (url === null) {
+async function onImageSelected(event: Event) {
+  const target = event.target as HTMLInputElement;
+  const file = target.files?.[0];
+  target.value = '';
+
+  if (!file) {
     return;
   }
 
-  // empty
+  let blob: Blob = file;
+
+  try {
+    blob = await resizeImageForUpload(file, { maxBytes: MAX_IMAGE_BYTES });
+  } catch (error) {
+    console.error(error);
+  }
+
+  const reader = new FileReader();
+
+  reader.onload = () => {
+    const src = reader.result;
+
+    if (typeof src === 'string') {
+      editor.chain().focus().setImage({ src }).run();
+    }
+  };
+
+  reader.readAsDataURL(blob);
+}
+
+const linkUrl = ref('');
+
+function openLinkDropdown() {
+  linkUrl.value = editor.getAttributes('link').href ?? '';
+}
+
+let focusedLinkInput: HTMLInputElement | null = null;
+
+function focusLinkInput(el: unknown) {
+  if (el instanceof HTMLInputElement) {
+    if (focusedLinkInput === el) {
+      return;
+    }
+
+    focusedLinkInput = el;
+    el.focus();
+    el.select();
+  } else {
+    focusedLinkInput = null;
+  }
+}
+
+function applyLink() {
+  const url = linkUrl.value.trim();
+
   if (url === '') {
     editor.chain().focus().extendMarkRange('link').unsetLink().run();
 
     return;
   }
 
-  // update link
   editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
 }
 
+function removeLink() {
+  editor.chain().focus().extendMarkRange('link').unsetLink().run();
+}
+
+function openLink(url: string) {
+  if (!url) {
+    return;
+  }
+
+  window.open(url, '_blank', 'noopener,noreferrer');
+}
+
 const buttonClass = computed(() => {
   const sizeClass = {
     xs: 'p-1',
     sm: 'p-1.5',
-    md: 'p-2',
-    lg: 'p-2.5',
-    xl: 'p-3',
+    md: 'px-2 py-1.5',
+    lg: 'px-2.5 py-2',
+    xl: 'px-3 py-2.5',
   }
 
   return [
-    'hover:bg-slate-100',
+    'block hover:bg-slate-100 rounded-lg',
     'disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white',
     sizeClass[props.size || 'md'] || sizeClass['md'],
   ];
@@ -185,94 +391,132 @@ const actions = computed<Action[]>(() => {
   return [
     {
       name: 'undo',
-      icon: 'mdi:undo-variant',
+      icon: 'lucide:undo-2',
       command: () => editor.chain().focus().undo().run(),
     },
     {
       name: 'redo',
-      icon: 'mdi:redo-variant',
+      icon: 'lucide:redo-2',
       command: () => editor.chain().focus().redo().run(),
     },
     {
       name: 'paragraph',
-      icon: 'material-symbols:format-paragraph',
+      icon: 'lucide:pilcrow',
       command: () => editor.chain().focus().setParagraph().run(),
     },
     {
       name: 'heading-2',
-      icon: 'material-symbols:format-h2',
+      icon: 'lucide:heading-2',
       command: () => editor.chain().focus().setHeading({ level: 2 }).run(),
     },
     {
       name: 'heading-3',
-      icon: 'material-symbols:format-h3',
+      icon: 'lucide:heading-3',
       command: () => editor.chain().focus().setHeading({ level: 3 }).run(),
     },
     {
       name: 'bold',
-      icon: 'material-symbols:format-bold',
+      icon: 'lucide:bold',
       command: () => editor.chain().focus().toggleBold().run(),
     },
     {
       name: 'italic',
-      icon: 'material-symbols:format-italic',
+      icon: 'lucide:italic',
       command: () => editor.chain().focus().toggleItalic().run(),
     },
     {
       name: 'underline',
-      icon: 'material-symbols:format-underlined',
+      icon: 'lucide:underline',
       command: () => editor.chain().focus().toggleUnderline().run(),
     },
+    {
+      name: 'strikethrough',
+      icon: 'lucide:strikethrough',
+      command: () => editor.chain().focus().toggleStrike().run(),
+    },
     {
       name: 'superscript',
-      icon: 'material-symbols:superscript',
+      icon: 'lucide:superscript',
       command: () => editor.chain().focus().toggleSuperscript().run(),
     },
     {
       name: 'subscript',
-      icon: 'material-symbols:subscript',
+      icon: 'lucide:subscript',
       command: () => editor.chain().focus().toggleSubscript().run(),
     },
+    {
+      name: 'highlight',
+      icon: 'lucide:highlighter',
+      command: () => { },
+    },
     {
       name: 'link',
-      icon: 'material-symbols:link',
-      command: () => setLink(),
+      icon: 'lucide:link',
+      command: () => { },
     },
     {
-      name: 'unlink',
-      icon: 'material-symbols:link-off',
-      command: () => editor.chain().focus().unsetLink().run(),
+      name: 'image',
+      icon: 'lucide:image',
+      command: () => pickImage(),
     },
     {
       name: 'bulletList',
-      icon: 'material-symbols:format-list-bulleted',
+      icon: 'lucide:list',
       command: () => editor.chain().focus().toggleBulletList().run(),
     },
     {
       name: 'orderedList',
-      icon: 'material-symbols:format-list-numbered',
+      icon: 'lucide:list-ordered',
       command: () => editor.chain().focus().toggleOrderedList().run(),
     },
     {
       name: 'footnote',
-      icon: 'material-symbols:edit-note-outline',
+      icon: 'lucide:asterisk',
       command: () => editor?.commands.addFootnote(),
     },
     {
       name: 'nonBreakingSpace',
-      icon: 'material-symbols:space-bar',
+      icon: 'lucide:space',
       command: () => editor.chain().focus().insertContent('\u00A0').run(),
     },
 
   ];
 });
 
+const toolbarTemplates: Record<string, string[]> = {
+  simple: ['bold', 'italic', 'underline', 'link'],
+  complete: [
+    'undo',
+    'redo',
+    'paragraph',
+    'heading-2',
+    'heading-3',
+    'bold',
+    'italic',
+    'underline',
+    'superscript',
+    'subscript',
+    'highlight',
+    'link',
+    'unlink',
+    'image',
+    '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>

package/src/lang/en.json

@@ -60,6 +60,7 @@
     "page": "Page",
     "pagination_detail_1": "Viewing",
     "pagination_detail_2": "of",
+    "paste_link": "Paste link...",
     "postal_code_zip_code": "Postal Code / Zip Code",
     "previous": "Previous",
     "previous_month": "Previous month",

package/src/lang/fr.json

@@ -60,6 +60,7 @@
     "page": "Page",
     "pagination_detail_1": "Affichage de",
     "pagination_detail_2": "de",
+    "paste_link": "Coller le lien...",
     "postal_code_zip_code": "Code postal",
     "previous": "Précédent",
     "previous_month": "Mois précédent",

package/dist/BaseCkeditor-D39KO4I5.js

@@ -1,143 +0,0 @@
-import { defineComponent as c, computed as i, openBlock as f, createBlock as I, unref as n } from "vue";
-import { ClassicEditor as B, BalloonEditor as k, InlineEditor as y, Essentials as h, SourceEditing as z, Paragraph as C, Bold as S, Italic as v, Underline as E, Strikethrough as T, Subscript as V, Superscript as w, Code as F, CodeBlock as L, List as R, Indent as A, IndentBlock as x, Link as D, Autoformat as P, Heading as U, Image as G, AutoImage as O, ImageStyle as H, ImageResize as K, ImageToolbar as M, ImageInsert as N, Base64UploadAdapter as W, Table as j, TableToolbar as q, MediaEmbed as J, PasteFromOffice as Q, BlockToolbar as X, Font as Y, FindAndReplace as Z, RemoveFormat as $ } from "ckeditor5";
-import { Ckeditor as _ } from "@ckeditor/ckeditor5-vue";
-const te = /* @__PURE__ */ c({
-  __name: "BaseCkeditor",
-  props: {
-    modelValue: {},
-    editor: { default: "classic" },
-    size: { default: "md" },
-    toolbar: { default() {
-      return [
-        "undo",
-        "redo",
-        "|",
-        "heading",
-        "bold",
-        "italic",
-        "underline",
-        "fontBackgroundColor",
-        "|",
-        "link",
-        "insertImage",
-        "|",
-        "numberedList",
-        "bulletedList",
-        "|",
-        "insertTable"
-      ];
-    } },
-    placeholder: { default: "" },
-    disabled: { type: Boolean, default: !1 }
-  },
-  emits: ["update:modelValue", "focus", "blur", "input", "ready"],
-  setup(d, { expose: u, emit: s }) {
-    const o = d, t = s;
-    let a = null;
-    function m(r) {
-      a = r, t("ready", r);
-    }
-    const g = i(() => {
-      switch (o.editor) {
-        case "inline":
-          return y;
-        case "balloon":
-          return k;
-        default:
-          return B;
-      }
-    }), p = i(() => o.modelValue === null ? "" : o.modelValue), b = i(() => ({
-      licenseKey: "GPL",
-      plugins: [
-        h,
-        z,
-        C,
-        S,
-        v,
-        E,
-        T,
-        V,
-        w,
-        F,
-        L,
-        R,
-        A,
-        x,
-        D,
-        P,
-        U,
-        G,
-        O,
-        H,
-        K,
-        M,
-        N,
-        W,
-        j,
-        q,
-        J,
-        Q,
-        X,
-        Y,
-        Z,
-        $
-      ],
-      toolbar: {
-        items: o.toolbar,
-        shouldNotGroupWhenFull: !0
-      },
-      table: {
-        contentToolbar: ["tableColumn", "tableRow"]
-      },
-      image: {
-        resizeOptions: [
-          {
-            name: "resizeImage:original",
-            label: "Default image width",
-            value: null
-          },
-          {
-            name: "resizeImage:50",
-            label: "50% page width",
-            value: "50"
-          },
-          {
-            name: "resizeImage:75",
-            label: "75% page width",
-            value: "75"
-          },
-          {
-            name: "resizeImage:100",
-            label: "100% page width",
-            value: "100"
-          }
-        ],
-        toolbar: [
-          "imageStyle:alignBlockLeft",
-          "imageStyle:block",
-          "imageStyle:alignBlockRight",
-          "resizeImage"
-        ]
-      },
-      placeholder: o.placeholder
-    }));
-    return u({
-      getEditorData() {
-        return (a == null ? void 0 : a.getData()) || "";
-      }
-    }), (r, e) => (f(), I(n(_), {
-      "model-value": n(p),
-      editor: n(g),
-      config: n(b),
-      disabled: d.disabled,
-      "onUpdate:modelValue": e[0] || (e[0] = (l) => t("update:modelValue", l)),
-      onFocus: e[1] || (e[1] = (l) => t("focus", l)),
-      onBlur: e[2] || (e[2] = (l) => t("blur", l)),
-      onInput: e[3] || (e[3] = (l) => t("input", l)),
-      onReady: m
-    }, null, 8, ["model-value", "editor", "config", "disabled"]));
-  }
-});
-export {
-  te as default
-};

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

@@ -1,32 +0,0 @@
-import { Size } from '@/utils/sizes';
-import { ToolbarOption } from '@/types/ToolbarOption';
-type __VLS_Props = {
-    modelValue: string | null | undefined;
-    editor?: 'classic' | 'inline' | 'balloon';
-    size?: Size;
-    toolbar?: ToolbarOption[] | string[];
-    placeholder?: string;
-    disabled?: boolean;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {
-    getEditorData(): string;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    blur: (...args: any[]) => void;
-    focus: (...args: any[]) => void;
-    input: (...args: any[]) => void;
-    "update:modelValue": (...args: any[]) => void;
-    ready: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onBlur?: ((...args: any[]) => any) | undefined;
-    onFocus?: ((...args: any[]) => any) | undefined;
-    onInput?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    onReady?: ((...args: any[]) => any) | undefined;
-}>, {
-    placeholder: string;
-    size: Size;
-    disabled: boolean;
-    toolbar: ToolbarOption[] | string[];
-    editor: "classic" | "inline" | "balloon";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;