tiptapify 0.0.1

package/src/components/editorExtensions.ts

@@ -0,0 +1,98 @@
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+import { TextStyleKit } from '@tiptap/extension-text-style'
+import { BulletList, OrderedList, ListItem, ListKeymap, TaskList, TaskItem } from '@tiptap/extension-list'
+import { Selection, Focus, Placeholder, UndoRedo, Dropcursor, CharacterCount } from '@tiptap/extensions'
+import { Document } from '@tiptap/extension-document'
+import { Text } from '@tiptap/extension-text'
+import { Paragraph } from '@tiptap/extension-paragraph'
+import { Heading } from '@tiptap/extension-heading'
+import { Bold } from '@tiptap/extension-bold'
+import { Italic } from '@tiptap/extension-italic'
+import { Strike } from '@tiptap/extension-strike'
+import { Code } from '@tiptap/extension-code'
+import { Blockquote } from '@tiptap/extension-blockquote'
+import { HardBreak } from '@tiptap/extension-hard-break'
+import { HorizontalRule } from '@tiptap/extension-horizontal-rule'
+import { Typography } from '@tiptap/extension-typography'
+import { Highlight } from '@tiptap/extension-highlight'
+import { Image } from '@tiptap/extension-image'
+import { Superscript } from '@tiptap/extension-superscript'
+import { Subscript } from '@tiptap/extension-subscript'
+import { TextAlign } from '@tiptap/extension-text-align'
+import { Underline } from '@tiptap/extension-underline'
+import { TableKit } from '@tiptap/extension-table'
+import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight'
+
+import { Link } from '@tiptap/extension-link'
+import CodeBlockComponent from '@tiptapify/components/CodeBlockComponent.vue'
+import SlashCommands from '@tiptapify/components/extensions/slash-commands'
+import suggestion from '@tiptapify/components/extensions/components/slashCommands/suggestion'
+
+// load all languages with "all" or common languages with "common"
+import { common, createLowlight } from 'lowlight'
+
+// create a lowlight instance
+// using all available languages
+const lowlight = createLowlight(common)
+
+// or you can register specific languages
+// const lowlight = createLowlight()
+//
+// import language example
+// import ts from 'highlight.js/lib/languages/typescript'
+//
+// register language example
+// lowlight.register('ts', ts)
+
+export const editorExtensions = (placeholder: string = '') => [
+  TextStyleKit,
+  Document,
+  Text,
+  Paragraph,
+  Heading,
+  Bold,
+  Italic,
+  Strike,
+  Blockquote,
+  OrderedList,
+  BulletList,
+  TaskList,
+  TaskItem,
+  ListItem,
+  ListKeymap,
+  HardBreak,
+  HorizontalRule,
+  Dropcursor,
+  Typography,
+  Underline,
+  Highlight,
+  Link.configure({
+    openOnClick: false,
+    defaultProtocol: 'https',
+  }),
+  Image,
+  Superscript,
+  Subscript,
+  TableKit,
+  Code,
+  UndoRedo,
+  Focus,
+  CodeBlockLowlight
+    .extend({
+      addNodeView() {
+        return VueNodeViewRenderer(CodeBlockComponent)
+      },
+    })
+    .configure({ lowlight }),
+  Selection.configure({
+    className: 'selection',
+  }),
+  TextAlign.configure({
+    types: ['heading', 'paragraph'],
+  }),
+  Placeholder.configure({ placeholder }),
+  SlashCommands.configure({
+    suggestion,
+  }),
+  CharacterCount
+]

package/src/components/extensions/components/LinkDialog.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+
+import * as mdi from '@mdi/js'
+import { useEditor } from "@tiptapify/composable/useEditor";
+
+import { useI18n } from 'vue-i18n'
+import { computed, ref, watch } from 'vue'
+
+defineExpose({ open })
+
+interface Props {
+  value?: string
+  target?: '_self' | '_blank'
+  destroy?: () => void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: undefined,
+  target: '_blank',
+  destroy: undefined
+})
+
+const editor = useEditor().editor
+const editorInstance = editor.getInstance()
+
+const { t } = useI18n()
+
+const generateLinkAttrs = () => ({
+  href: '',
+  target: '_blank'
+})
+
+const attrs = ref(generateLinkAttrs())
+
+const dialog = ref<boolean>(false)
+
+const isDisabled = computed(() => {
+  const { href, target } = attrs.value
+  if (!href) return true
+
+  return props.value === href && props.target === target
+})
+
+function apply() {
+  const { href, target } = attrs.value
+
+  if (href) {
+    editorInstance.value.chain().focus().extendMarkRange('link').setLink({ href, target }).run()
+  }
+  close()
+}
+
+function open() {
+  dialog.value = true
+}
+
+function close() {
+  dialog.value = false
+  attrs.value = generateLinkAttrs()
+
+  setTimeout(() => props.destroy?.(), 300)
+}
+
+watch(dialog, val => {
+  if (!val) return
+
+  attrs.value = {
+    href: props.value,
+    target: props.target
+  }
+})
+</script>
+
+<template>
+  <VDialog v-model="dialog" max-width="400" absolute @click:outside="close">
+    <VCard>
+      <VToolbar class="px-6" density="compact">
+        <span class="headline">{{ t('dialog.link.title') }}</span>
+
+        <VSpacer />
+
+        <VBtn class="mx-0" icon @click="close">
+          <VIcon :icon="mdi.mdiClose" />
+        </VBtn>
+      </VToolbar>
+
+      <VCardText>
+        <VTextField v-model="attrs.href" :label="t('dialog.link.placeholder')" autofocus />
+      </VCardText>
+
+      <VCardActions>
+        <VBtn :disabled="isDisabled" @click="apply">
+          {{ t('dialog.link.apply') }}
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>

package/src/components/extensions/components/slashCommands/CommandsList.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import * as mdi from '@mdi/js'
+
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true,
+  },
+  command: {
+    type: Function,
+    required: true,
+  },
+})
+
+const selectedIndex = ref(0)
+
+watch(() => props.items, () => {
+  selectedIndex.value = 0
+}, { deep: true })
+
+function onKeyDown({ event }) {
+  if (event.key === 'ArrowUp') {
+    upHandler()
+    return true
+  }
+
+  if (event.key === 'ArrowDown') {
+    downHandler()
+    return true
+  }
+
+  if (event.key === 'Enter') {
+    enterHandler()
+    return true
+  }
+
+  return false
+}
+
+function upHandler() {
+  selectedIndex.value = (selectedIndex.value + props.items.length - 1) % props.items.length
+}
+
+function downHandler() {
+  selectedIndex.value = (selectedIndex.value + 1) % props.items.length
+}
+
+function enterHandler() {
+  selectItem(selectedIndex.value)
+}
+
+function selectItem(index) {
+  const item = props.items[index]
+
+  if (item) {
+    props.command(item)
+  }
+}
+
+defineExpose({
+  onKeyDown,
+  upHandler,
+  downHandler,
+  enterHandler,
+  selectItem
+})
+</script>
+
+<template>
+  <div class="dropdown-menu">
+    <template v-if="items.length">
+      <VBtn
+          variant="text"
+          v-for="(item, index) in items"
+          :key="index"
+          @click="selectItem(index)"
+          size="small"
+      >
+        <VIcon v-if="item.icon" :icon="mdi[`mdi${item.icon}`]" size="16" />
+        <span v-else>
+          {{ item.title }}
+        </span>
+      </VBtn>
+    </template>
+    <div class="item" v-else>No result</div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.dropdown-menu {
+  background: var(--white);
+  border: 1px solid var(--gray-1);
+  border-radius: 0.7rem;
+  box-shadow: var(--shadow);
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+  overflow: auto;
+  padding: 0.4rem;
+  position: relative;
+}
+</style>

package/src/components/extensions/components/slashCommands/suggestion.ts

@@ -0,0 +1,107 @@
+import { computePosition, flip, shift } from '@floating-ui/dom'
+import { posToDOMRect, VueRenderer } from '@tiptap/vue-3'
+
+import CommandsList from './CommandsList.vue'
+
+const updatePosition = (editor, element) => {
+  const virtualElement = {
+    getBoundingClientRect: () => posToDOMRect(editor.view, editor.state.selection.from, editor.state.selection.to),
+  }
+
+  computePosition(virtualElement, element, {
+    placement: 'bottom-start',
+    strategy: 'absolute',
+    middleware: [shift(), flip()],
+  }).then(({ x, y, strategy }) => {
+    element.style.width = 'max-content'
+    element.style.position = strategy
+    element.style.left = `${x}px`
+    element.style.top = `${y}px`
+  })
+}
+
+export default {
+  items: ({ query }) => {
+    return [
+      {
+        title: 'H1',
+        icon: 'FormatHeader1',
+        command: ({ editor, range }) => {
+          editor.chain().focus().deleteRange(range).setNode('heading', { level: 1 }).run()
+        },
+      },
+      {
+        title: 'H2',
+        icon: 'FormatHeader2',
+        command: ({ editor, range }) => {
+          editor.chain().focus().deleteRange(range).setNode('heading', { level: 2 }).run()
+        },
+      },
+      {
+        title: 'Bold',
+        icon: 'FormatBold',
+        command: ({ editor, range }) => {
+          editor.chain().focus().deleteRange(range).setMark('bold').run()
+        },
+      },
+      {
+        title: 'Italic',
+        icon: 'FormatItalic',
+        command: ({ editor, range }) => {
+          editor.chain().focus().deleteRange(range).setMark('italic').run()
+        },
+      },
+    ]
+      .filter(item => item.title.toLowerCase().startsWith(query.toLowerCase()))
+      .slice(0, 10)
+  },
+
+  render: () => {
+    let component
+
+    return {
+      onStart: props => {
+        component = new VueRenderer(CommandsList, {
+          props,
+          editor: props.editor,
+        })
+
+        if (!props.clientRect) {
+          return
+        }
+
+        component.element.style.position = 'absolute'
+
+        document.body.appendChild(component.element)
+
+        updatePosition(props.editor, component.element)
+      },
+
+      onUpdate(props) {
+        component.updateProps(props)
+
+        if (!props.clientRect) {
+          return
+        }
+
+        updatePosition(props.editor, component.element)
+      },
+
+      onKeyDown(props) {
+        if (props.event.key === 'Escape') {
+          component.destroy()
+          component.element.remove()
+
+          return true
+        }
+
+        return component.ref?.onKeyDown(props)
+      },
+
+      onExit() {
+        component.destroy()
+        component.element.remove()
+      },
+    }
+  },
+}

package/src/components/extensions/slash-commands.ts

@@ -0,0 +1,28 @@
+import { Extension } from '@tiptap/core'
+import Suggestion from '@tiptap/suggestion'
+
+export default Extension.create(
+  {
+    name: 'slash-commands',
+
+    addOptions() {
+      return {
+        suggestion: {
+          char: '/',
+          command: ({editor, range, props}) => {
+            props.command({editor, range})
+          },
+        },
+      }
+    },
+
+    addProseMirrorPlugins() {
+      return [
+        Suggestion(
+          {
+            editor: this.editor,
+            ...this.options.suggestion,
+          }),
+      ]
+    },
+  })

package/src/composable/useEditor.ts

@@ -0,0 +1,35 @@
+import { useEditor as useEditorOriginal } from '@tiptap/vue-3'
+
+import { editorExtensions } from '@tiptapify/components/editorExtensions'
+
+let editorInstance: any = null
+
+export function useEditor(content: any = '', placeholder: string = '') {
+  class TiptapifyEditor {
+    private editor
+
+    constructor() {
+      const extensions = editorExtensions(placeholder)
+      this.editor = useEditorOriginal({
+        content,
+        extensions,
+      })
+    }
+
+    getInstance() {
+      return this.editor
+    }
+
+    destroy() {
+      this.editor.value.destroy()
+    }
+  }
+
+  if (!editorInstance) {
+    editorInstance = new TiptapifyEditor()
+  }
+
+  return {
+    editor: editorInstance
+  }
+}

package/src/i18n/index.ts

@@ -0,0 +1,22 @@
+import { createI18n } from 'vue-i18n'
+
+const messages = Object.fromEntries(
+  Object.entries(
+    import.meta.glob<{ default: any }>('./locales/*.json', { eager: true }))
+    .map(([key, value]) => [key.slice(10, -5), value.default]),
+)
+
+let _i18n: any = null
+
+export const getI18n = (locale: string) => {
+  if (_i18n === null) {
+    _i18n = createI18n({
+      legacy: false,
+      locale: locale,
+      fallbackLocale: 'en',
+      messages
+    })
+  }
+
+  return _i18n
+}

package/src/i18n/locales/en.json

@@ -0,0 +1,50 @@
+{
+  "style": {
+    "heading": "heading",
+    "fontFamily": "font family",
+    "fontSize": "font size",
+    "lineHeight": "line height"
+  },
+  "format": {
+    "bold": "bold",
+    "italic": "italic",
+    "strike": "strikethrough",
+    "underline": "underline",
+    "sup": "superscript",
+    "sub": "subscript",
+    "break": "hard break",
+    "highlight": "highlight",
+    "line": "horizontal line",
+    "blockquote": "cite",
+    "code": "code",
+    "codeblock": "code block",
+    "codeblock_syntax": "code block w/ syntax highlighting",
+    "link": "external link"
+  },
+  "action": {
+    "undo": "undo",
+    "redo": "redo"
+  },
+  "alignment": "alignment",
+  "alignments": {
+    "left": "align left",
+    "center": "align center",
+    "right": "align right",
+    "justify": "justify"
+  },
+  "list": "list",
+  "lists": {
+    "bullet": "unordered list",
+    "numbered": "ordered list",
+    "task": "task list",
+    "indent": "list item indent",
+    "outdent": "list item outdent"
+  },
+  "dialog": {
+    "link": {
+      "title": "add/edit link",
+      "placeholder": "link address",
+      "apply": "apply"
+    }
+  }
+}

package/src/i18n/locales/ru.json

@@ -0,0 +1,50 @@
+{
+  "style": {
+    "heading": "заголовок",
+    "fontFamily": "шрифт",
+    "fontSize": "размер",
+    "lineHeight": "высота строки"
+  },
+  "format": {
+    "bold": "жирный",
+    "italic": "курсив",
+    "strike": "зачеркивание",
+    "underline": "подчеркивание",
+    "sup": "верхний индекс",
+    "sub": "нижний индекс",
+    "break": "разрыв строки",
+    "highlight": "выделение",
+    "line": "горизонтальная линия",
+    "blockquote": "цитата",
+    "code": "код",
+    "codeblock": "блок кода",
+    "codeblock_syntax": "блок кода с подсветкой синтаксиса",
+    "link": "внешняя ссылка"
+  },
+  "action": {
+    "undo": "отмена",
+    "redo": "повтор"
+  },
+  "alignment": "выравнивание",
+  "alignments": {
+    "left": "выравнивание по левому краю",
+    "center": "выравнивание по центру",
+    "right": "выравнивание по правому краю",
+    "justify": "выравнивание по ширине"
+  },
+  "list": "список",
+  "lists": {
+    "bullet": "ненумерованный список",
+    "numbered": "нумерованный список",
+    "task": "список задач",
+    "indent": "увеличить отступ элемента списка",
+    "outdent": "уменьшить отступ элемента списка"
+  },
+  "dialog": {
+    "link": {
+      "title": "добавление/изменение ссылки",
+      "placeholder": "адрес ссылки",
+      "apply": "применить"
+    }
+  }
+}

package/src/i18n/locales/ua.json

@@ -0,0 +1,50 @@
+{
+  "style": {
+    "heading": "заголовок",
+    "fontFamily": "шрифт",
+    "fontSize": "розмір",
+    "lineHeight": "висота строки"
+  },
+  "format": {
+    "bold": "жирний",
+    "italic": "курсив",
+    "strike": "закреслення",
+    "underline": "підкреслення",
+    "sup": "верхній індекс",
+    "sub": "нижній індекс",
+    "break": "розрив строки",
+    "highlight": "виділення",
+    "line": "горизонтальна лінія",
+    "blockquote": "цитата",
+    "code": "код",
+    "codeblock": "блок коду",
+    "codeblock_syntax": "блок коду з підсвіткою синтаксиса",
+    "link": "зовнішнє посилання"
+  },
+  "action": {
+    "undo": "відміна",
+    "redo": "повтор"
+  },
+  "alignment": "вирівнювання",
+  "alignments": {
+    "left": "вирівнювання по лівому краю",
+    "center": "вирівнювання по центру",
+    "right": "вирівнювання по правому краю",
+    "justify": "вирівнювання по ширині"
+  },
+  "list": "список",
+  "lists": {
+    "bullet": "ненумерований список",
+    "numbered": "нумерований список",
+    "task": "список задач",
+    "indent": "збільшити відступ елемента списку",
+    "outdent": "зменшити відступ елемента списку"
+  },
+  "dialog": {
+    "link": {
+      "title": "додавання/зміна посилання",
+      "placeholder": "адреса посилання",
+      "apply": "застосувати"
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,19 @@
+import { Plugin } from 'vue';
+import Tiptapify from '@tiptapify/components/Tiptapify.vue';
+import { getI18n } from "@tiptapify/i18n";
+
+interface PackageOptions {
+  locale?: string;
+}
+
+const TiptapifyPlugin: Plugin = {
+  install(app, options: PackageOptions = {}) {
+    const locale = options.locale || 'en'
+    app.use(getI18n(locale));
+    app.component('Tiptapify', Tiptapify);
+    app.component('v-tiptap', Tiptapify);
+  }
+};
+
+export { Tiptapify };
+export default TiptapifyPlugin;

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "jsx": "preserve",
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "lib": ["ESNext", "DOM"],
+    "types": ["vite/client", "node"],
+    "declaration": true,
+    "declarationDir": "lib",
+    "baseUrl": ".",
+    "paths": {
+      "@tiptapify/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*"]
+}