sprintify-ui 0.10.79 → 0.10.82

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>