tiptapify 0.0.2 → 0.0.5

package/package.json

@@ -1,16 +1,29 @@
 {
   "name": "tiptapify",
-  "version": "0.0.2",
+  "version": "0.0.5",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {
-      "import": "./dist/tiptapify.es.js",
-      "require": "./dist/tiptapify.umd.js"
+      "import": {
+        "default": "./dist/tiptapify.es.js",
+        "development": "./src/index.ts"
+      },
+      "require": {
+        "default": "./dist/tiptapify.umd.js",
+        "development": "./src/index.ts"
+      }
     },
+    "./src/*": "./src/*",
+    "./dist/*": "./dist/*",
     "./style.css": "./dist/tiptapify.css"
   },
   "main": "./dist/tiptapify.umd.cjs",
   "module": "./dist/tiptapify.js",
+  "source": "./src/index.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -38,7 +51,6 @@
   "repository": "https://github.com/IVoyt/tiptapify",
   "packageManager": "pnpm@10.11.0",
   "dependencies": {
-    "@intlify/unplugin-vue-i18n": "^6.0.8",
     "@tiptap/core": "next",
     "@tiptap/extension-blockquote": "next",
     "@tiptap/extension-bold": "next",
@@ -77,15 +89,9 @@
     "@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",
-    "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.4"
   },
   "peerDependencies": {
@@ -94,11 +100,18 @@
     "vuetify": "^3.8.5"
   },
   "devDependencies": {
+    "@intlify/unplugin-vue-i18n": "^6.0.8",
     "@rollup/plugin-alias": "^5.1.1",
     "@types/node": "^22.15.21",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitejs/plugin-vue-jsx": "^4.2.0",
     "rollup-plugin-tsconfig-paths": "^1.5.2",
     "sass-embedded": "^1.89.0",
     "typescript": "^5.8.3",
+    "unplugin-vue-components": "^28.5.0",
+    "vite": "^6.3.5",
+    "vite-plugin-vuetify": "^2.1.1",
+    "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^5.1.4",
     "vue-tsc": "^2.2.10"
   }

package/src/components/MenuBubble.vue

@@ -74,6 +74,14 @@ const items = ref([
       disabled: computed(() => editorInstance.value.isActive('code') || editorInstance.value.isActive('codeBlock')),
     },
     click: () => linkAction(),
+  },
+  {
+    name: 'format clear',
+    icon: mdi.mdiFormatClear,
+    props: {
+      active: false,
+    },
+    click: () => editorInstance.value.chain().focus().unsetAllMarks().clearNodes().run(),
   }
 ])
 
@@ -86,7 +94,7 @@ function linkAction() {
 
 <template>
 <!--  <BubbleMenu v-if="editorInstance" :editor="editorInstance" :tippy-options="{ duration: 100 }">-->
-  <BubbleMenu v-if="editorInstance" :editor="editorInstance">
+  <BubbleMenu v-if="editorInstance" :editor="editorInstance" :options="{ placement: 'bottom' }">
     <div class="bubble-menu">
       <VBtnToggle divided density="compact" :variant="variant">
         <VBtn v-for="(item, key) in items" :key="key" v-bind="item.props" @click="item.click" size="small">

package/src/components/Toolbar/Index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import LinkDialog from "@tiptapify/components/extensions/components/LinkDialog.vue";
+import ShowSource from "@tiptapify/components/extensions/components/ShowSource.vue";
 import { useEditor } from "@tiptapify/composable/useEditor";
 import { computed, defineProps, Ref, ref } from 'vue'
 import { useI18n } from "vue-i18n";
@@ -69,7 +70,7 @@ const toolbarItemsRef: Ref<ToolbarItemSections> = ref(items)
                 </VBtn>
               </template>
 
-              <VList v-model="toolbarItem.modelValue">
+              <VList v-model="toolbarItem.modelValue" max-height="430px">
                 <VListItem
                     v-for="(item, menuItemKey) in toolbarItem.children"
                     :key="menuItemKey"
@@ -111,6 +112,7 @@ const toolbarItemsRef: Ref<ToolbarItemSections> = ref(items)
     </template>
 
     <LinkDialog ref="toolbarLinkButton" />
+    <ShowSource />
   </div>
 </template>
 

package/src/components/Toolbar/fonts.ts

@@ -0,0 +1,118 @@
+export const fonts = [
+  {
+    name: 'Arial',
+    fontFamily: 'arial'
+  },
+  {
+    name: 'Arial Black',
+    fontFamily: 'arial black'
+  },
+  {
+    name: 'Baskerville',
+    fontFamily: 'baskerville'
+  },
+  {
+    name: 'Bodoni MT',
+    fontFamily: 'bodoni mt'
+  },
+  {
+    name: 'Brush Script MT',
+    fontFamily: 'brush script mt'
+  },
+  {
+    name: 'Calibri',
+    fontFamily: 'calibri'
+  },
+  {
+    name: 'Calisto MT',
+    fontFamily: 'calisto mt'
+  },
+  {
+    name: 'Cambria',
+    fontFamily: 'cambria'
+  },
+  {
+    name: 'Century Gothic',
+    fontFamily: 'century gothic'
+  },
+  {
+    name: 'Consolas',
+    fontFamily: 'consolas'
+  },
+  {
+    name: 'Comic Sans',
+    fontFamily: 'comic sans ms, comic sans'
+  },
+  {
+    name: 'Courier',
+    fontFamily: 'Courier'
+  },
+  {
+    name: 'Courier New',
+    fontFamily: 'courier new'
+  },
+  {
+    name: 'Cursive',
+    fontFamily: 'cursive'
+  },
+  {
+    name: 'Dejavu Sans',
+    fontFamily: 'dejavu sans'
+  },
+  {
+    name: 'Franklin Gothic',
+    fontFamily: 'franklin gothic'
+  },
+  {
+    name: 'Garamond',
+    fontFamily: 'garamond'
+  },
+  {
+    name: 'Georgia',
+    fontFamily: 'georgia'
+  },
+  {
+    name: 'Helvetica',
+    fontFamily: 'helvetica'
+  },
+  {
+    name: 'Impact',
+    fontFamily: 'impact'
+  },
+  {
+    name: 'Inter',
+    fontFamily: 'inter'
+  },
+  {
+    name: 'Monospace',
+    fontFamily: 'monospace'
+  },
+  {
+    name: 'Optima',
+    fontFamily: 'optima'
+  },
+  {
+    name: 'Segoe UI',
+    fontFamily: 'segoe ui'
+  },
+  {
+    name: 'Serif',
+    fontFamily: 'serif'
+  },
+  {
+    name: 'Tahoma',
+    fontFamily: 'tahoma'
+  },
+  {
+    name: 'Time New Roman',
+    fontFamily: 'times new roman'
+  },
+  {
+    name: 'Trebuchet MS',
+    fontFamily: 'trebuchet ms'
+  },
+  {
+    name: 'Verdana',
+    fontFamily: 'verdana'
+  },
+]

package/src/components/Toolbar/items.ts

@@ -1,28 +1,6 @@
 import { computed, ComputedRef, Ref, ref } from "vue";
 import * as mdi from '@mdi/js'
-
-const fonts = ref([
-  {
-    name: 'Inter',
-    fontFamily: 'Inter'
-  },
-  {
-    name: 'Comic Sans',
-    fontFamily: 'Comic Sans MS, Comic Sans'
-  },
-  {
-    name: 'Serif',
-    fontFamily: 'serif'
-  },
-  {
-    name: 'Monospace',
-    fontFamily: 'monospace'
-  },
-  {
-    name: 'Cursive',
-    fontFamily: 'cursive'
-  },
-])
+import { fonts } from './fonts'
 
 interface MDIIcons {
   [key: string]: string
@@ -88,7 +66,6 @@ export function toolbarItems(
      * font color, backgroundcolor
      * tables
      * media (image, video)
-     * unsetmarks, clearnodes
      */
     heading: {
       name: 'heading',
@@ -103,23 +80,41 @@ export function toolbarItems(
       props: {
         color: computed(() => editor.value.isActive('heading') ? 'primary' : ''),
       },
-      children: headingLevels.value.map(level => {
-        return {
-          name: `H${level}`,
-          tooltip: `style.headings.h${level}`,
-          icon: mdiIcons[`mdiFormatHeader${level}`],
+      children: [
+        {
+          name: `paragraph`,
+          tooltip: `style.paragraph`,
+          icon: mdiIcons[`mdiFormatParagraph`],
           noI18n: true,
           enabled: true,
           props: {
             color: computed(() => {
-              return editor.value.isActive('heading', { level }) ? 'primary' : ''
+              return editor.value.isActive('paragraph') ? 'primary' : ''
             }),
           },
           attrs: {
-            click: () => editor.value.chain().focus().toggleHeading({ level }).run()
+            click: () => editor.value.chain().focus().setParagraph().run()
           }
         }
-      })
+      ].concat(
+        headingLevels.value.map(level => {
+          return {
+            name: `H${level}`,
+            tooltip: `style.headings.h${level}`,
+            icon: mdiIcons[`mdiFormatHeader${level}`],
+            noI18n: true,
+            enabled: true,
+            props: {
+              color: computed(() => {
+                return editor.value.isActive('heading', { level }) ? 'primary' : ''
+              }),
+            },
+            attrs: {
+              click: () => editor.value.chain().focus().toggleHeading({ level }).run()
+            }
+          }
+        })
+      )
     },
     fontFamily: {
       name: 'font-family',
@@ -131,7 +126,7 @@ export function toolbarItems(
       attrs: {
         click: () => editor.value.chain().focus().unsetFontFamily().run()
       },
-      children: fonts.value.map((font) => {
+      children: fonts.map((font) => {
         return {
           name: font.name,
           tooltip: '',
@@ -271,6 +266,19 @@ export function toolbarItems(
         click: () => editor.value.chain().focus().toggleHighlight().run()
       }
     },
+    formatClear: {
+      name: 'format clear',
+      tooltip: 'format.formatClear',
+      icon: mdi.mdiFormatClear,
+      section: 'format',
+      enabled: true,
+      props: {
+        disabled: computed(() => !editor.value.can().chain().focus().unsetAllMarks().run()),
+      },
+      attrs: {
+        click: () => editor.value.chain().focus().unsetAllMarks().clearNodes().run()
+      }
+    },
 
     code: {
       name: 'code',
@@ -542,6 +550,17 @@ export function toolbarItems(
         click: () => editor.value.chain().focus().setHardBreak().run()
       }
     },
+    source: {
+      name: 'source',
+      tooltip: 'misc.source',
+      icon: mdi.mdiCodeTags,
+      section: 'misc',
+      enabled: true,
+      props: {},
+      attrs: {
+        click: () => editor.value.commands.showSource()
+      }
+    },
   }
 
 

package/src/components/editorExtensions.ts

@@ -25,6 +25,7 @@ import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight'
 
 import { Link } from '@tiptap/extension-link'
 import CodeBlockComponent from '@tiptapify/components/CodeBlockComponent.vue'
+import { ViewSource } from '@tiptapify/components/extensions/view-source'
 import SlashCommands from '@tiptapify/components/extensions/slash-commands'
 import suggestion from '@tiptapify/components/extensions/components/slashCommands/suggestion'
 
@@ -92,7 +93,8 @@ export function editorExtensions (placeholder: string, slashCommands: boolean) {
       types: ['heading', 'paragraph'],
     }),
     Placeholder.configure({ placeholder }),
-    CharacterCount
+    CharacterCount,
+    ViewSource
   ]
 
   if (slashCommands) {

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

@@ -90,7 +90,7 @@ watch(dialog, val => {
 
       <VCardActions>
         <VBtn :disabled="isDisabled" @click="apply">
-          {{ t('dialog.link.apply') }}
+          {{ t('dialog.apply') }}
         </VBtn>
       </VCardActions>
     </VCard>

package/src/components/extensions/components/ShowSource.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { useEditor } from "@tiptapify/composable/useEditor";
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { useI18n } from "vue-i18n";
+
+const props = defineProps({
+  indent: { type: Number, default: 2 },
+})
+
+const { t } = useI18n();
+
+const editor = useEditor().editor.getInstance()
+
+const dialog = ref(false)
+const formatted = ref(false)
+const sourceCode = ref('')
+
+const formatHtml = (html: string): string => {
+  let formatted = html.replace(/>/g, '>\n');
+
+  formatted = formatted.replace(/\n</g, '\n<');
+  formatted = formatted.replace(/([^>\n])</g, '$1\n<');
+
+  const lines = formatted.split('\n');
+  let indentLevel = 0;
+
+  return lines
+      .map(line => {
+        if (line.match(/<\//)) {
+          indentLevel = Math.max(0, indentLevel - 1);
+        }
+
+        const indentedLine = ' '.repeat(indentLevel * props.indent) + line;
+
+        if (line.match(/<[^\/][^>]*>/) && !line.match(/<.*\/>/)) {
+          indentLevel++;
+        }
+
+        return indentedLine;
+      })
+      .filter(line => line.trim())
+      .join('\n');
+}
+
+const unformatHtml = (html: string): string => {
+  return html
+      .replace(/\n/g, '')
+      .replace(/\s+/g, ' ')
+      .replace(/>\s+</g, '><')
+}
+
+const showDialog = (event: CustomEvent) => {
+  sourceCode.value = event.detail.html
+  dialog.value = true;
+}
+
+const saveChanges = () => {
+  dialog.value = false
+
+  editor.value.commands.setContent(sourceCode.value, true)
+}
+
+onMounted(() => {
+  window.addEventListener('tiptapify-show-source', showDialog as EventListener)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('tiptapify-show-source', showDialog as EventListener)
+})
+
+watch(() => formatted.value, () => {
+  sourceCode.value = formatted.value ? formatHtml(sourceCode.value) : unformatHtml(sourceCode.value)
+})
+</script>
+
+<template>
+  <VDialog v-model="dialog" max-width="1500">
+    <VCard>
+      <VCardTitle>{{ t('dialog.source.title') }}</VCardTitle>
+
+      <VCardText>
+        <VContainer fluid class="pt-0 pl-0 pr-0">
+          <VRow>
+            <VCol>
+              <VBtn v-model="formatted" :color="`${formatted ? 'primary' : ''}`" @click="formatted = !formatted">
+                {{ t('dialog.source.prettify') }}
+              </VBtn>
+            </VCol>
+          </VRow>
+        </VContainer>
+
+        <VTextarea
+            v-model="sourceCode"
+            no-resize
+            rows="100"
+            variant="outlined"
+            class="source-code-area"
+        />
+      </VCardText>
+
+      <VCardActions>
+        <VSpacer></VSpacer>
+        <VBtn color="primary" @click="dialog = false">
+          {{ t('dialog.close') }}
+        </VBtn>
+        <VBtn color="primary" @click="saveChanges">
+          {{ t('dialog.apply') }}
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>
+
+<style scoped lang="scss">
+.source-code-area {
+  font-family: monospace;
+  white-space: pre-wrap;
+}
+
+:deep(.source-code-area textarea) {
+  max-height: 900px;
+  overflow-y: auto;
+}
+</style>

package/src/components/extensions/view-source.ts

@@ -0,0 +1,53 @@
+import { Extension } from '@tiptap/core'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+
+export interface ViewSourceOptions {
+  HTMLAttributes: Record<string, any>
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    viewSource: {
+      /**
+       * Показать исходный HTML-код
+       */
+      showSource: () => ReturnType
+    }
+  }
+}
+
+export const ViewSource = Extension.create<ViewSourceOptions>({
+  name: 'viewSource',
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    }
+  },
+
+  addCommands() {
+    return {
+      showSource: () => ({ editor }) => {
+        const event = new CustomEvent('tiptapify-show-source', {
+          detail: {
+            // html: editor.getHTML()
+            html: editor.getHTML({ blockSeparator: '\n\n' })
+            // html: editor.getText({ blockSeparator: '\n\n' })
+          }
+        })
+
+        window.dispatchEvent(event)
+
+        return true
+      },
+    }
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey('viewSource'),
+      }),
+    ]
+  },
+})

package/src/i18n/locales/de.json

@@ -0,0 +1,67 @@
+{
+  "style": {
+    "paragraph": "Absatz",
+    "heading": "Überschrift",
+    "headings": {
+      "h1": "Überschrift Ebene 1",
+      "h2": "Überschrift Ebene 2",
+      "h3": "Überschrift Ebene 3",
+      "h4": "Überschrift Ebene 4",
+      "h5": "Überschrift Ebene 5",
+      "h6": "Überschrift Ebene 6"
+    },
+    "fontFamily": "Schriftart",
+    "fontSize": "Schriftgröße",
+    "lineHeight": "Zeilenhöhe"
+  },
+  "format": {
+    "bold": "Fett",
+    "italic": "Kursiv",
+    "strike": "Durchgestrichen",
+    "underline": "Unterstrichen",
+    "sup": "Hochgestellt",
+    "sub": "Tiefgestellt",
+    "break": "Zeilenumbruch",
+    "highlight": "Hervorheben",
+    "line": "Horizontale Linie",
+    "blockquote": "Zitat",
+    "code": "Code",
+    "codeblock": "Codeblock",
+    "link": "Externer Link",
+    "formatClear": "Formatierung löschen"
+  },
+  "action": {
+    "undo": "Rückgängig",
+    "redo": "Wiederherstellen"
+  },
+  "alignment": "Ausrichtung",
+  "alignments": {
+    "left": "Linksbündig",
+    "center": "Zentriert",
+    "right": "Rechtsbündig",
+    "justify": "Blocksatz"
+  },
+  "list": "Liste",
+  "lists": {
+    "bullet": "Aufzählungsliste",
+    "numbered": "Nummerierte Liste",
+    "task": "Aufgabenliste",
+    "indent": "Einzug vergrößern",
+    "outdent": "Einzug verkleinern"
+  },
+  "dialog": {
+    "close": "Schließen",
+    "apply": "Anwenden",
+    "link": {
+      "title": "Link hinzufügen/bearbeiten",
+      "placeholder": "Linkadresse"
+    },
+    "source": {
+      "title": "Quellcode anzeigen",
+      "prettify": "prettify"
+    }
+  },
+  "misc": {
+    "source": "Quellcode anzeigen"
+  }
+}

package/src/i18n/locales/en.json

@@ -1,5 +1,6 @@
 {
   "style": {
+    "paragraph": "paragraph",
     "heading": "heading",
     "headings": {
       "h1": "heading level 1",
@@ -26,7 +27,8 @@
     "blockquote": "cite",
     "code": "code",
     "codeblock": "code block",
-    "link": "external link"
+    "link": "external link",
+    "formatClear": "format clear"
   },
   "action": {
     "undo": "undo",
@@ -48,10 +50,18 @@
     "outdent": "list item outdent"
   },
   "dialog": {
+    "close": "close",
+    "apply": "apply",
     "link": {
       "title": "add/edit link",
-      "placeholder": "link address",
-      "apply": "apply"
+      "placeholder": "link address"
+    },
+    "source": {
+      "title": "view source code",
+      "prettify": "prettify"
     }
+  },
+  "misc": {
+    "source": "view source code"
   }
 }