tiptapify 0.0.1

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "tiptapify",
+  "version": "0.0.1",
+  "description": "Tiptap3 editor with Vuetify3 menu implementation",
+  "exports": {
+    ".": {
+      "import": "./dist/tiptapify.es.js",
+      "require": "./dist/tiptapify.umd.js"
+    },
+    "./style.css": "./dist/tiptapify.css"
+  },
+  "main": "./dist/tiptapify.umd.cjs",
+  "module": "./dist/tiptapify.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "vue", "vue3", "vue.js", "typescript", "vuetify", "vuetify3", "tiptap", "tiptap3", "editor", "material design",
+    "wysiwyg", "markdown"
+  ],
+  "author": "Igor Voytovich",
+  "license": "MIT",
+  "packageManager": "pnpm@10.11.0",
+  "dependencies": {
+    "@intlify/unplugin-vue-i18n": "^6.0.8",
+    "@tiptap/core": "next",
+    "@tiptap/extension-blockquote": "next",
+    "@tiptap/extension-bold": "next",
+    "@tiptap/extension-bubble-menu": "next",
+    "@tiptap/extension-code": "next",
+    "@tiptap/extension-code-block": "next",
+    "@tiptap/extension-code-block-lowlight": "next",
+    "@tiptap/extension-color": "next",
+    "@tiptap/extension-document": "next",
+    "@tiptap/extension-floating-menu": "next",
+    "@tiptap/extension-font-family": "next",
+    "@tiptap/extension-hard-break": "next",
+    "@tiptap/extension-heading": "next",
+    "@tiptap/extension-highlight": "next",
+    "@tiptap/extension-horizontal-rule": "next",
+    "@tiptap/extension-image": "next",
+    "@tiptap/extension-italic": "next",
+    "@tiptap/extension-link": "next",
+    "@tiptap/extension-list": "next",
+    "@tiptap/extension-list-item": "next",
+    "@tiptap/extension-paragraph": "next",
+    "@tiptap/extension-placeholder": "next",
+    "@tiptap/extension-strike": "next",
+    "@tiptap/extension-subscript": "next",
+    "@tiptap/extension-superscript": "next",
+    "@tiptap/extension-table": "next",
+    "@tiptap/extension-task-item": "next",
+    "@tiptap/extension-task-list": "next",
+    "@tiptap/extension-text": "next",
+    "@tiptap/extension-text-align": "next",
+    "@tiptap/extension-text-style": "next",
+    "@tiptap/extension-typography": "next",
+    "@tiptap/extension-underline": "next",
+    "@tiptap/extensions": "next",
+    "@tiptap/pm": "next",
+    "@tiptap/starter-kit": "next",
+    "@tiptap/suggestion": "next",
+    "@tiptap/vue-3": "next",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitejs/plugin-vue-jsx": "^4.2.0",
+    "highlight.js": "^11.11.1",
+    "linkifyjs": "^4.3.1",
+    "lowlight": "^3.3.0",
+    "tippy.js": "^6.3.7",
+    "unplugin-vue-components": "^28.5.0",
+    "vite": "^6.3.5",
+    "vite-plugin-vuetify": "^2.1.1",
+    "vite-svg-loader": "^5.1.0",
+    "vue-i18n": "^11.1.3"
+  },
+  "peerDependencies": {
+    "@mdi/js": "^7.4.47",
+    "vue": "^3.5.14",
+    "vuetify": "^3.8.5"
+  },
+  "devDependencies": {
+    "@rollup/plugin-alias": "^5.1.1",
+    "@types/node": "^22.15.21",
+    "rollup-plugin-tsconfig-paths": "^1.5.2",
+    "sass-embedded": "^1.89.0",
+    "typescript": "^5.8.3",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vue-tsc": "^2.2.10"
+  }
+}

package/src/components/CodeBlockComponent.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { NodeViewContent, nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
+
+const props = defineProps({
+  ...nodeViewProps
+})
+
+const languages = props.extension.options.lowlight.listLanguages()
+
+const selectedLanguage = computed({
+  get() {
+    return props.node.attrs.language
+  },
+  set(language) {
+    props.updateAttributes({ language })
+  }
+})
+</script>
+
+<template>
+  <NodeViewWrapper class="code-block">
+    <select contenteditable="false" v-model="selectedLanguage">
+      <option :value="null">
+        auto
+      </option>
+      <option disabled>
+        —
+      </option>
+      <option v-for="(language, index) in languages" :value="language" :key="index">
+        {{ language }}
+      </option>
+    </select>
+    <pre><code><NodeViewContent /></code></pre>
+  </NodeViewWrapper>
+</template>
+
+<style scoped lang="scss">
+.tiptap {
+  .code-block {
+    position: relative;
+
+    select {
+      position: absolute;
+      background-color: var(--white);
+      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="Black" d="M7 10l5 5 5-5z"/></svg>');
+      right: 0.5rem;
+      top: 0.5rem;
+    }
+  }
+}
+</style>

package/src/components/Footer.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { useEditor } from "@tiptapify/composable/useEditor";
+import { ref } from 'vue'
+
+const { editor } = useEditor()
+const editorInstance = ref(editor.getInstance())
+</script>
+
+<template>
+  <div v-if="editorInstance" class="tiptapify-footer">
+    <VRow>
+      <VCol class="d-flex justify-end">
+        <span class="words-count">
+          {{ editorInstance.storage.characterCount.words() }} words
+        </span>
+      </VCol>
+    </VRow>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.tiptapify-footer {
+  padding: 8px;
+  border-top: var(--border);
+}
+
+.words-count {
+  color: #999;
+}
+</style>

package/src/components/MenuBubble.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import LinkDialog from "@tiptapify/components/extensions/components/LinkDialog.vue";
+import { useEditor } from "@tiptapify/composable/useEditor";
+import { defineProps, ref } from "vue";
+import { BubbleMenu } from '@tiptap/vue-3/menus'
+import * as mdi from '@mdi/js'
+
+defineProps({
+  variant: { type: String, default () { return 'flat' }},
+})
+
+const { editor } = useEditor()
+const editorInstance = ref(editor.getInstance())
+
+const bubbleMenuLinkButton = ref(null)
+
+function linkAction() {
+  return editorInstance.value.isActive('link')
+      ? editorInstance.value.chain().focus().unsetLink().run()
+      : bubbleMenuLinkButton.value?.open()
+}
+</script>
+
+<template>
+<!--  <BubbleMenu v-if="editorInstance" :editor="editorInstance" :tippy-options="{ duration: 100 }">-->
+  <BubbleMenu v-if="editorInstance" :editor="editorInstance">
+    <div class="bubble-menu">
+      <VBtnToggle divided density="compact" :variant="variant">
+        <VBtn
+            @click="editorInstance.chain().focus().toggleBold().run()"
+            :active="editorInstance.isActive('bold')"
+            size="small"
+        >
+          <VIcon :icon="mdi.mdiFormatBold" size="16" />
+        </VBtn>
+        <VBtn
+            @click="editorInstance.chain().focus().toggleItalic().run()"
+            :active="editorInstance.isActive('italic')"
+            size="small"
+        >
+          <VIcon :icon="mdi.mdiFormatItalic" size="16" />
+        </VBtn>
+        <VBtn
+            @click="editorInstance.chain().focus().toggleStrike().run()"
+            :active="editorInstance.isActive('strike')"
+            size="small"
+        >
+          <VIcon :icon="mdi.mdiFormatStrikethroughVariant" size="16" />
+        </VBtn>
+        <VBtn @click="linkAction" :active="editorInstance.isActive('link')" size="small">
+          <VIcon :icon="`${ editorInstance.isActive('link') ? mdi.mdiLinkOff : mdi.mdiLink}`" size="16" />
+        </VBtn>
+      </VBtnToggle>
+    </div>
+  </BubbleMenu>
+
+  <LinkDialog ref="bubbleMenuLinkButton" />
+</template>
+
+<style scoped lang="scss">
+.bubble-menu {
+  border-radius: 4px;
+  border-color: var(--gray-3);
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: var(--shadow);
+}
+</style>

package/src/components/MenuFloating.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { useEditor } from "@tiptapify/composable/useEditor";
+import { defineProps, ref } from "vue";
+import { FloatingMenu } from '@tiptap/vue-3/menus'
+import * as mdi from '@mdi/js'
+
+defineProps({
+  variant: { type: String, default () { return '' }},
+})
+
+const { editor } = useEditor()
+const editorInstance = ref(editor.getInstance())
+</script>
+
+<template>
+<!--  <FloatingMenu v-if="editorInstance" :editor="editorInstance" :tippy-options="{ duration: 100 }" >-->
+  <FloatingMenu v-if="editorInstance" :editor="editorInstance">
+    <div class="floating-menu">
+      <VBtnToggle divided density="compact" :variant="`${variant || 'plain'}`">
+        <VBtn
+            @click="editorInstance.chain().focus().toggleHeading({ level: 1 }).run()"
+            :color="`${editorInstance.isActive('heading', { level: 1 }) ? 'primary' : ''}`"
+            size="small"
+        >
+          <VIcon :icon="mdi['mdiFormatHeader1']" size="16" />
+        </VBtn>
+        <VBtn
+            @click="editorInstance.chain().focus().toggleHeading({ level: 2 }).run()"
+            :color="`${editorInstance.isActive('heading', { level: 2 }) ? 'primary' : ''}`"
+            size="small"
+        >
+          <VIcon :icon="mdi['mdiFormatHeader2']" size="16" />
+        </VBtn>
+        <VBtn
+            @click="editorInstance.chain().focus().toggleBulletList().run()"
+            :color="`${editorInstance.isActive('bulletList') ? 'primary' : ''}`"
+            size="small"
+        >
+          <VIcon :icon="mdi['mdiFormatListBulleted']" size="16" />
+        </VBtn>
+      </VBtnToggle>
+    </div>
+  </FloatingMenu>
+</template>
+
+<style scoped lang="scss">
+.floating-menu {
+  border-radius: 4px;
+  border-color: var(--gray-3);
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: var(--shadow);
+}
+</style>

package/src/components/Tiptapify.vue

@@ -0,0 +1,254 @@
+<script setup lang="ts">
+
+import { onBeforeUnmount, ref } from "vue";
+import Toolbar from "@tiptapify/components/Toolbar.vue";
+import { EditorContent } from '@tiptap/vue-3'
+import { useEditor } from '@tiptapify/composable/useEditor'
+import MenuBubble from '@tiptapify/components/MenuBubble.vue'
+import MenuFloating from '@tiptapify/components/MenuFloating.vue'
+
+import Footer from '@tiptapify/components/Footer.vue'
+
+const props = defineProps({
+  content: String|Object,
+  variant: { type: String, default () { return 'outline' } },
+  menu: { type: Boolean, default () { return true } },
+  bubbleMenu: { type: Boolean, default () { return true } },
+  floatingMenu: { type: Boolean, default () { return true } },
+  placeholder: { type: String, default () { return 'Write something here...' } },
+  showCharacterCount: { type: Boolean, default () { return true } },
+  defaultFontFamily: { type: String, default () { return 'Inter' } },
+})
+
+const editor = useEditor(props.content, props.placeholder).editor
+const editorInstance = ref(editor.getInstance())
+editorInstance?.value?.chain().setFontFamily(props.defaultFontFamily).run()
+
+onBeforeUnmount(() => {
+  editor.destroy()
+})
+
+</script>
+
+<template>
+  <VContainer>
+    <VRow>
+      <VCol>
+        <div class="border rounded">
+          <template v-if="menu">
+            <Toolbar v-if="editorInstance" :variant="variant" />
+          </template>
+
+          <div class="pa-2 tiptapify-container">
+            <MenuFloating v-if="floatingMenu" />
+
+            <MenuBubble v-if="bubbleMenu" />
+
+            <EditorContent :editor="editorInstance" class="tiptapify-editor" />
+          </div>
+
+          <template v-if="showCharacterCount">
+            <Footer />
+          </template>
+        </div>
+      </VCol>
+    </VRow>
+  </VContainer>
+</template>
+
+<style scoped lang="scss">
+.tiptapify-editor::v-deep(.ProseMirror:focus) {
+  outline: none;
+}
+</style>
+
+<style lang="scss">
+:root {
+  --white: #FFF;
+  --black: #2E2B29;
+  --black-contrast: #110F0E;
+  --gray-1: rgba(61, 37, 20, .05);
+  --gray-2: rgba(61, 37, 20, .08);
+  --gray-3: rgba(61, 37, 20, .12);
+  --gray-4: rgba(53, 38, 28, .3);
+  --gray-5: rgba(28, 25, 23, .6);
+  --green: #22C55E;
+  --purple: #6A00F5;
+  --purple-contrast: #5800CC;
+  --purple-light: rgba(88, 5, 255, .05);
+  --yellow-contrast: #FACC15;
+  --yellow: rgba(250, 204, 21, .4);
+  --yellow-light: #FFFAE5;
+  --red: #FF5C33;
+  --red-light: #FFEBE5;
+  --shadow: 0px 12px 33px 0px rgba(0, 0, 0, .06), 0px 3.618px 9.949px 0px rgba(0, 0, 0, .04);
+  --border: 1px solid var(--gray-2);
+}
+
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+
+  select {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="Gray" d="M7 10l5 5 5-5z"/></svg>');
+    background-repeat: no-repeat;
+    background-position: right .1rem center;
+    background-size: 1.25rem 1.25rem;
+    /* padding-right: 1.25rem; */
+
+    border-radius: .5rem;
+    border: none;
+    color: var(--black);
+    font-family: inherit;
+    font-size: .875rem;
+    font-weight: 500;
+    line-height: 1.15;
+    margin: none;
+    padding: .375rem .625rem;
+    transition: all .2s cubic-bezier(.65,.05,.36,1);
+  }
+
+  /* List styles */
+  ul,
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+
+    /* Code styling */
+    .hljs-comment,
+    .hljs-quote {
+      color: #616161;
+    }
+
+    .hljs-variable,
+    .hljs-template-variable,
+    .hljs-attribute,
+    .hljs-tag,
+    .hljs-name,
+    .hljs-regexp,
+    .hljs-link,
+    .hljs-name,
+    .hljs-selector-id,
+    .hljs-selector-class {
+      color: #f98181;
+    }
+
+    .hljs-number,
+    .hljs-meta,
+    .hljs-built_in,
+    .hljs-builtin-name,
+    .hljs-literal,
+    .hljs-type,
+    .hljs-params {
+      color: #fbbc88;
+    }
+
+    .hljs-string,
+    .hljs-symbol,
+    .hljs-bullet {
+      color: #b9f18d;
+    }
+
+    .hljs-title,
+    .hljs-section {
+      color: #faf594;
+    }
+
+    .hljs-keyword,
+    .hljs-selector-tag {
+      color: #70cff8;
+    }
+
+    .hljs-emphasis {
+      font-style: italic;
+    }
+
+    .hljs-strong {
+      font-weight: 700;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  }
+}
+</style>