tiptapify 0.0.6 → 0.0.7

package/src/components/Toolbar/items/media.ts

@@ -1,8 +1,9 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
-import { computed } from "vue";
+import TableBuilder from "@tiptapify/extensions/components/TableBuilder.vue";
+import { computed, markRaw, Ref } from "vue";
 
-export function getMediaItems(editor: Editor, toolbarLinkButton: any) {
+export function getMediaItems(editor: Editor, toolbarLinkButton: Ref) {
   return {
     link: {
       name: 'format.link',
@@ -20,6 +21,182 @@ export function getMediaItems(editor: Editor, toolbarLinkButton: any) {
             : toolbarLinkButton?.value?.open
         })
       }
+    },
+    table: {
+      name: 'tables',
+      tooltip: 'format.tables.table',
+      icon: mdi.mdiTable,
+      modelValue: false,
+      enabled: true,
+      props: {
+        color: computed(() => editor.isActive('table') ? 'primary' : ''),
+        disabled: computed(() => !editor.can().chain().focus().insertTable().run()),
+      },
+      children: [
+        {
+          name: 'insert table',
+          tooltip: 'format.tables.insertTable',
+          icon: mdi.mdiTablePlus,
+          enabled: true,
+          props: {
+            disabled: computed(() => !editor.can().chain().focus().insertTable().run()),
+            activator: 'parent',
+            openOnClick: true,
+            openOnHover: false,
+            closeOnContentClick: false,
+            submenu: true
+          },
+          component: markRaw(TableBuilder),
+        },
+        {
+          name: 'insert table',
+          tooltip: 'format.tables.deleteTable',
+          icon: mdi.mdiTableMinus,
+          enabled: true,
+          props: {
+            disabled: computed(() => !editor.can().chain().focus().deleteTable().run()),
+          },
+          attrs: {
+            click: () => editor.chain().focus().deleteTable().run()
+          }
+        },
+        {
+          name: 'table row',
+          tooltip: 'format.tables.row',
+          icon: mdi.mdiTableRow,
+          enabled: true,
+          props: {
+            disabled: computed(
+              () =>
+                !editor.can().chain().focus().addRowBefore().run() &&
+                !editor.can().chain().focus().addRowAfter().run() &&
+                !editor.can().chain().focus().deleteRow().run()
+            ),
+            openOnHover: true,
+            openOnClick: true,
+            activator: 'parent',
+            submenu: true
+          },
+          children: [
+            {
+              name: 'insert row before',
+              tooltip: 'format.tables.insertRowBefore',
+              icon: mdi.mdiTableRowPlusBefore,
+              enabled: true,
+              props: {
+                disabled: computed(() => !editor.can().chain().focus().addRowBefore().run()),
+              },
+              attrs: {
+                click: () => editor.chain().focus().addRowBefore().run()
+              }
+            },
+            {
+              name: 'insert row after',
+              tooltip: 'format.tables.insertRowAfter',
+              icon: mdi.mdiTableRowPlusAfter,
+              enabled: true,
+              props: {
+                disabled: computed(() => !editor.can().chain().focus().addRowAfter().run()),
+              },
+              attrs: {
+                click: () => editor.chain().focus().addRowAfter().run()
+              }
+            },
+            {
+              name: 'delete row',
+              tooltip: 'format.tables.deleteRow',
+              icon: mdi.mdiTableRowRemove,
+              enabled: true,
+              props: {
+                disabled: computed(() => !editor.can().chain().focus().deleteRow().run()),
+              },
+              attrs: {
+                click: () => editor.chain().focus().deleteRow().run()
+              }
+            },
+          ]
+        },
+        {
+          name: 'column',
+          tooltip: 'format.tables.col',
+          icon: mdi.mdiTableColumn,
+          enabled: true,
+          props: {
+            disabled: computed(
+              () =>
+                !editor.can().chain().focus().addColumnBefore().run() &&
+                !editor.can().chain().focus().addColumnAfter().run() &&
+                !editor.can().chain().focus().deleteColumn().run()
+            ),
+            openOnHover: true,
+            openOnClick: true,
+            activator: 'parent',
+            submenu: true
+          },
+          children: [
+            {
+              name: 'insert col before',
+              tooltip: 'format.tables.insertColBefore',
+              icon: mdi.mdiTableColumnPlusBefore,
+              enabled: true,
+              props: {
+                disabled: computed(() => !editor.can().chain().focus().addColumnBefore().run()),
+              },
+              attrs: {
+                click: () => editor.chain().focus().addColumnBefore().run()
+              }
+            },
+            {
+              name: 'insert column after',
+              tooltip: 'format.tables.insertColAfter',
+              icon: mdi.mdiTableColumnPlusAfter,
+              enabled: true,
+              props: {
+                disabled: computed(() => !editor.can().chain().focus().addColumnAfter().run()),
+              },
+              attrs: {
+                click: () => editor.chain().focus().addColumnAfter().run()
+              }
+            },
+            {
+              name: 'delete column',
+              tooltip: 'format.tables.deleteCol',
+              icon: mdi.mdiTableColumnRemove,
+              enabled: true,
+              props: {
+                disabled: computed(() => !editor.can().chain().focus().deleteColumn().run()),
+              },
+              attrs: {
+                click: () => editor.chain().focus().deleteColumn().run()
+              }
+            }
+          ]
+        },
+        {
+          name: 'merge cells',
+          tooltip: 'format.tables.mergeCells',
+          icon: mdi.mdiTableMergeCells,
+          enabled: true,
+          props: {
+            disabled: computed(() => !editor.can().chain().focus().mergeCells().run()),
+          },
+          attrs: {
+            click: () => editor.chain().focus().mergeCells().run()
+          }
+        },
+        {
+          name: 'split cell',
+          tooltip: 'format.tables.splitCell',
+          icon: mdi.mdiTableSplitCell,
+          enabled: true,
+          props: {
+            disabled: computed(() => !editor.can().chain().focus().splitCell().run()),
+          },
+          attrs: {
+            click: () => editor.chain().focus().splitCell().run()
+          }
+        }
+      ]
     }
   }
 }

package/src/components/Toolbar/items/misc.ts

@@ -1,6 +1,6 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
-import { computed } from "vue";
+import { computed, Ref } from "vue";
 
 export function getMiscItems(editor: Editor) {
   return {
@@ -34,6 +34,15 @@ export function getMiscItems(editor: Editor) {
         click: () => editor.commands.showSource()
       }
     },
+    preview: {
+      name: 'preview',
+      tooltip: 'misc.preview',
+      icon: mdi.mdiFileEyeOutline,
+      enabled: true,
+      attrs: {
+        click: () => editor.commands.showPreview()
+      }
+    },
     formatClear: {
       name: 'format clear',
       tooltip: 'format.formatClear',

package/src/components/Toolbar/items/style.ts

@@ -70,7 +70,7 @@ export function getStyleItems(editor: Editor, fontMeasure: string, customHeading
       name: 'font-family',
       tooltip: 'style.fontFamily',
       icon: mdi.mdiFormatFont,
-      modelValue: null,
+      modelValue: false,
       enabled: true,
       attrs: {
         click: () => editor.chain().focus().unsetFontFamily().run()
@@ -96,7 +96,7 @@ export function getStyleItems(editor: Editor, fontMeasure: string, customHeading
       name: 'font-size',
       tooltip: 'style.fontSize',
       icon: mdi.mdiFormatSize,
-      modelValue: computed(() => editor.getAttributes('textStyle').fontSize || null),
+      modelValue: false,
       enabled: true,
       attrs: {
         click: () => editor.chain().focus().unsetFontSize().run()

package/src/components/Toolbar/items.ts

@@ -22,6 +22,7 @@ export interface ToolbarItem {
   icon: string|ComputedRef<string>,
   noI18n?: boolean,
   enabled: boolean,
+  component?: any,
   modelValue?: any,
   group?: boolean,
   toggle?: boolean,

package/src/components/editorExtensions.ts

@@ -25,9 +25,10 @@ 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'
+import { ViewSource } from '@tiptapify/extensions/view-source'
+import { Preview } from '@tiptapify/extensions/preview'
+import SlashCommands from '@tiptapify/extensions/slash-commands'
+import suggestion from '@tiptapify/extensions/components/slashCommands/suggestion'
 
 // load all languages with "all" or common languages with "common"
 import { common, createLowlight } from 'lowlight'
@@ -94,7 +95,8 @@ export function editorExtensions (placeholder: string, slashCommands: boolean) {
     }),
     Placeholder.configure({ placeholder }),
     CharacterCount,
-    ViewSource
+    ViewSource,
+    Preview
   ]
 
   if (slashCommands) {

package/src/components/index.ts

@@ -0,0 +1,13 @@
+import { Editor, useEditor } from "@tiptap/vue-3";
+import { editorExtensions } from "@tiptapify/components/editorExtensions";
+import { ShallowRef } from "vue";
+
+export function getTiptapEditor (content: any, placeholder: string, slashCommands: boolean = true): ShallowRef<Editor | undefined> {
+  const extensions = editorExtensions(placeholder, slashCommands)
+  const editor: ShallowRef<Editor | undefined> = useEditor({
+    content,
+    extensions,
+  })
+
+  return editor
+}

package/src/{components/extensions → extensions}/components/LinkDialog.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
 
 import * as mdi from '@mdi/js'
-import { useEditor } from "@tiptapify/composable/useEditor";
+import { Editor } from "@tiptap/vue-3";
 
 import { useI18n } from 'vue-i18n'
-import { computed, ref, watch } from 'vue'
+import { computed, inject, Ref, ref, watch } from 'vue'
+
+import helpers from '@tiptapify/utils/helpers'
 
 defineExpose({ open })
 
+const { ucFirst } = helpers
+
 interface Props {
   value?: string
   target?: '_self' | '_blank'
@@ -20,8 +24,7 @@ const props = withDefaults(defineProps<Props>(), {
   destroy: undefined
 })
 
-const editor = useEditor().editor
-const editorInstance = editor.getInstance()
+const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = useI18n()
 
@@ -45,7 +48,7 @@ function apply() {
   const { href, target } = attrs.value
 
   if (href) {
-    editorInstance.value.chain().focus().extendMarkRange('link').setLink({ href, target }).run()
+    editor.value.chain().focus().extendMarkRange('link').setLink({ href, target }).run()
   }
   close()
 }
@@ -75,7 +78,7 @@ watch(dialog, val => {
   <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>
+        <span class="headline">{{ ucFirst(t('dialog.link.title')) }}</span>
 
         <VSpacer />
 
@@ -85,12 +88,12 @@ watch(dialog, val => {
       </VToolbar>
 
       <VCardText>
-        <VTextField v-model="attrs.href" :label="t('dialog.link.placeholder')" autofocus />
+        <VTextField v-model="attrs.href" :label="ucFirst(t('dialog.link.placeholder'))" autofocus />
       </VCardText>
 
       <VCardActions>
         <VBtn :disabled="isDisabled" @click="apply">
-          {{ t('dialog.apply') }}
+          {{ ucFirst(t('dialog.apply')) }}
         </VBtn>
       </VCardActions>
     </VCard>

package/src/extensions/components/PreviewDialog.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useI18n } from "vue-i18n";
+import * as mdi from '@mdi/js'
+
+const { t } = useI18n();
+
+const content = ref()
+
+const dialog = ref(false)
+
+const showDialog = (event: CustomEvent) => {
+  console.log('preview event', event)
+  content.value = event.detail.html
+  dialog.value = true;
+}
+
+onMounted(() => {
+  window.addEventListener('tiptapify-show-preview', showDialog as EventListener)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('tiptapify-show-preview', showDialog as EventListener)
+})
+</script>
+
+<template>
+  <VDialog v-model="dialog" fullscreen>
+    <VCard>
+      <VToolbar>
+        <VBtn :icon="mdi.mdiClose" @click="dialog = false" />
+
+        <VToolbarTitle>Preview</VToolbarTitle>
+      </VToolbar>
+
+      <VCardItem>
+        <div class="tiptap" v-html="content"></div>
+      </VCardItem>
+    </VCard>
+  </VDialog>
+</template>
+
+<style lang="scss">
+
+</style>

package/src/{components/extensions/components/ShowSource.vue → extensions/components/ShowSourceDialog.vue}

@@ -1,15 +1,19 @@
 <script setup lang="ts">
-import { useEditor } from "@tiptapify/composable/useEditor";
-import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { Editor } from "@tiptap/vue-3";
+import { ref, onMounted, onUnmounted, watch, inject, Ref } from 'vue'
 import { useI18n } from "vue-i18n";
 
+import helpers from "@tiptapify/utils/helpers";
+
 const props = defineProps({
   indent: { type: Number, default: 2 },
 })
 
+const { ucFirst } = helpers;
+
 const { t } = useI18n();
 
-const editor = useEditor().editor.getInstance()
+const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const dialog = ref(false)
 const formatted = ref(false)
@@ -76,14 +80,14 @@ watch(() => formatted.value, () => {
 <template>
   <VDialog v-model="dialog" max-width="1500">
     <VCard>
-      <VCardTitle>{{ t('dialog.source.title') }}</VCardTitle>
+      <VCardTitle>{{ ucFirst(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') }}
+                {{ ucFirst(t('dialog.source.prettify')) }}
               </VBtn>
             </VCol>
           </VRow>
@@ -101,10 +105,10 @@ watch(() => formatted.value, () => {
       <VCardActions>
         <VSpacer></VSpacer>
         <VBtn color="primary" @click="dialog = false">
-          {{ t('dialog.close') }}
+          {{ ucFirst(t('dialog.close')) }}
         </VBtn>
         <VBtn color="primary" @click="saveChanges">
-          {{ t('dialog.apply') }}
+          {{ ucFirst(t('dialog.apply')) }}
         </VBtn>
       </VCardActions>
     </VCard>

package/src/extensions/components/TableBuilder.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+
+import { Editor } from "@tiptap/vue-3";
+import helpers from '@tiptapify/utils/helpers'
+import { useI18n } from 'vue-i18n'
+
+import { inject, Ref, ref } from 'vue'
+
+const { t } = useI18n()
+
+const { ucFirst } = helpers
+
+defineExpose({ open })
+
+defineProps({
+  show: { type: Boolean, default: false },
+  maxCols: { type: Number, default: 10 },
+  maxRows: { type: Number, default: 10 },
+})
+
+const emit = defineEmits(['close'])
+
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const withHeaderRow = ref(false)
+
+const colHover = ref(0)
+const rowHover = ref(0)
+
+function hoverCell(elm: Element, row: number, col: number) {
+  rowHover.value = row
+  colHover.value = col
+  elm.classList.add('tiptapify-insert-table-col-hover')
+}
+
+function leaveCell(elm: Element) {
+  rowHover.value = 0
+  colHover.value = 0
+  elm.classList.remove('tiptapify-insert-table-col-hover')
+}
+
+function insertTable(rows: number, cols: number) {
+  editor.value.chain().focus().insertTable({ rows, cols, withHeaderRow: withHeaderRow.value }).run()
+
+  emit('close')
+}
+
+function printSelection() {
+  return rowHover.value && colHover.value ? `${rowHover.value} x ${colHover.value}` : ''
+}
+</script>
+
+<template>
+  <VSheet class="pa-2">
+    <VCheckbox
+        v-model="withHeaderRow"
+        density="compact"
+        color="primary"
+        :label="ucFirst(t('format.tables.insertWithHeaderRow'))" hide-details
+    />
+
+    <div v-for="rowNum in maxRows" :key="`row-${rowNum}`" class="tiptapify-insert-table-row">
+      <div
+          v-for="colNum in maxCols"
+          class="tiptapify-insert-table-col"
+          :class="{'tiptapify-insert-table-col-hovered': rowNum <= rowHover && colNum <= colHover}"
+          @click="insertTable(rowNum, colNum)"
+          @mouseover="hoverCell($el.querySelector('.tiptapify-insert-table-col'), rowNum, colNum)"
+          @mouseout="leaveCell($el.querySelector('.tiptapify-insert-table-col'))"
+      >
+        <div class="tiptapify-insert-table-col-button"></div>
+      </div>
+    </div>
+
+    <div class="tiptapify-table-builder-info">
+      <span>
+        {{ ucFirst(t('format.tables.rows')) }}: {{ rowHover }}
+        {{ ucFirst(t('format.tables.cols')) }}: {{ colHover }}
+      </span>
+      <span>
+        {{ printSelection() }}
+      </span>
+    </div>
+  </VSheet>
+</template>
+
+<style lang="scss">
+:root {
+  --tiptapify-table-builder-col-hover: #5454ff88;
+}
+
+$primaryColor: var(--v-theme-primary-color, var(--tiptapify-table-builder-col-hover));
+$mutedColor: var(--v-theme-muted-color, #888888);
+
+.tiptapify-insert-table-row {
+  display: flex;
+  justify-content: center;
+}
+
+.tiptapify-insert-table-col {
+  width: 30px;
+  height: 30px;
+  background: #fff;
+  padding: 2px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tiptapify-insert-table-col-button {
+  margin: 2px;
+  width: 100%;
+  height: 100%;
+  border: 1px solid #888;
+  background: #fff;
+  border-radius: 4px;
+  filter: drop-shadow(2px 2px 4px #88888888);
+}
+
+.tiptapify-insert-table-col-hovered {
+  cursor: pointer;
+}
+
+.tiptapify-insert-table-col-hovered > .tiptapify-insert-table-col-button, .tiptapify-insert-table-col-button:hover {
+  background: $primaryColor;
+  border: 1px solid $primaryColor;
+  filter: drop-shadow(2px 2px 4px $primaryColor);
+  cursor: pointer;
+}
+
+.tiptapify-table-builder-info {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
+  font-size: 12px;
+  color: $mutedColor;
+}
+</style>

package/src/extensions/preview.ts

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

package/src/{components/extensions → extensions}/view-source.ts

@@ -30,9 +30,7 @@ export const ViewSource = Extension.create<ViewSourceOptions>({
       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' })
+            html: editor.getHTML()
           }
         })