sprintify-ui 0.12.0 → 0.12.1

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

@@ -22,6 +22,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         default: string;
         type: PropType<Placement>;
     };
+    twButton: {
+        default: string;
+        type: StringConstructor;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     animated: {
         default: boolean;
@@ -35,8 +39,13 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         default: string;
         type: PropType<Placement>;
     };
+    twButton: {
+        default: string;
+        type: StringConstructor;
+    };
 }>> & Readonly<{}>, {
     placement: Placement;
+    twButton: string;
     animated: boolean;
     keepAlive: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/types/index.d.ts

@@ -68,6 +68,7 @@ declare const messages: {
             page: string;
             pagination_detail_1: string;
             pagination_detail_2: string;
+            paste_link: string;
             postal_code_zip_code: string;
             previous: string;
             previous_month: string;
@@ -170,6 +171,7 @@ declare const messages: {
             page: string;
             pagination_detail_1: string;
             pagination_detail_2: string;
+            paste_link: string;
             postal_code_zip_code: string;
             previous: string;
             previous_month: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "type": "module",
   "scripts": {
     "generate-llm-txt": "node scripts/generate-llm-txt.js",
@@ -38,6 +38,8 @@
   "dependencies": {
     "@floating-ui/vue": "^1.0.6",
     "@headlessui/vue": "^1.7.19",
+    "@tiptap/extension-highlight": "^3.22.4",
+    "@tiptap/extension-image": "^3.22.4",
     "@tiptap/extension-subscript": "^3.20.4",
     "@tiptap/extension-superscript": "^3.20.4",
     "color2k": "^2.0.3",

package/src/components/BaseDropdown.vue

@@ -1,6 +1,8 @@
 <template>
   <Popover v-slot="{ open }">
-    <PopoverButton class="outline-none">
+    <PopoverButton
+      :class="twButtonInternal"
+    >
       <div ref="buttonRef">
         <slot name="button" />
       </div>
@@ -43,6 +45,7 @@
 import { autoUpdate, offset, flip, shift, useFloating, Placement } from '@floating-ui/vue';
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue';
 import { unrefElement } from '@vueuse/core';
+import { twMerge } from 'tailwind-merge';
 import { PropType } from 'vue';
 
 const buttonRef = ref<InstanceType<typeof PopoverButton> | null>(null);
@@ -62,7 +65,11 @@ const props = defineProps({
   placement: {
     default: 'bottom-end',
     type: String as PropType<Placement>,
-  }
+  },
+  twButton: {
+    default: 'outline-none',
+    type: String,
+  },
 });
 
 const { floatingStyles } = useFloating(buttonRefEl, dropdownRef, {
@@ -71,4 +78,11 @@ const { floatingStyles } = useFloating(buttonRefEl, dropdownRef, {
   whileElementsMounted: autoUpdate,
 });
 
+const twButtonInternal = computed(() => {
+  return twMerge(
+    'outline-none',
+    props.twButton,
+  );
+});
+
 </script>

package/src/components/BaseTipTap.vue

@@ -6,20 +6,122 @@
       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
@@ -31,6 +133,14 @@
         :editor="editor"
       />
     </div>
+
+    <input
+      ref="imageInput"
+      type="file"
+      accept="image/*"
+      class="hidden"
+      @change="onImageSelected"
+    >
   </div>
 </template>
 
@@ -41,9 +151,14 @@ 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']);
 
@@ -78,13 +193,20 @@ const editor = new Editor({
     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,
@@ -143,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();
+}
 
-  // cancelled
-  if (url === null) {
+const MAX_IMAGE_BYTES = 1024 * 1024;
+
+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'],
   ];
@@ -189,87 +391,92 @@ 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: 'material-symbols:strikethrough-s',
+      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(),
     },
 
@@ -289,8 +496,10 @@ const toolbarTemplates: Record<string, string[]> = {
     'underline',
     'superscript',
     'subscript',
+    'highlight',
     'link',
     'unlink',
+    'image',
     'bulletList',
     'orderedList',
     'footnote',

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",