tiptapify 0.3.1 → 0.3.3

package/index.d.ts

@@ -192,6 +192,7 @@ export {
   TIPTAPIFY_CONFIG_KEY,
   useTiptapifyConfig,
   TiptapEditor,
+  TiptapEditor as TipTapEditor,
   nodeViewProps,
   NodeViewWrapper,
   VueNodeViewRenderer,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiptapify",
   "types": "./index.d.ts",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {

package/src/components/Footer.vue

@@ -57,16 +57,16 @@ function showFooter() {
     <VRow>
       <VCol class="d-flex align-center" :class="`justify-${alignment}`">
         <template v-if="limit > 0">
-          <VTooltip :open-delay="1500">
+          <VTooltip :open-delay="200" location="top">
             <template #default>
               <span v-html="limitText" />
             </template>
             <template #activator="{ props }">
+              <span class="tiptapify-footer--limit" v-bind="props" :aria-label="limitText.replace('<br>', ': ')">
               <svg
                 height="25"
                 width="25"
                 viewBox="0 0 20 20"
-                v-bind="props"
                 :class="{
                   'character-count': true,
                   'character-count--alert': percentage > 75,
@@ -86,6 +86,8 @@ function showFooter() {
                 />
                 <circle r="6" cx="10" cy="10" fill="white" />
               </svg>
+              <span class="tiptapify-footer--status-item">{{ Math.min(percentage, 999) }}%</span>
+              </span>
             </template>
           </VTooltip>
 
@@ -113,6 +115,14 @@ function showFooter() {
   color: #999;
 }
 
+/* The limit ring with its percentage; the tooltip spells out the limit */
+.tiptapify-footer--limit {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  cursor: help;
+}
+
 .tiptapify-footer--divider:not(:last-child) {
   margin: 0 8px;
 }

package/src/components/ImageBubbleMenu.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import * as mdi from '@mdi/js'
+import { Editor } from '@tiptap/vue-3'
+import { BubbleMenu } from '@tiptap/vue-3/menus'
+import { NodeSelection } from '@tiptap/pm/state'
+import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { ImageAlign } from '@tiptapify/extensions/components/media/image/caption'
+import { inject, Ref, ref } from 'vue'
+import { ComposerTranslation } from 'vue-i18n'
+
+// The toolbar on a selected image: float toggles (or, for a slide, its place in the slider), download, edit, removal
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+// The menu follows its text or image when the editor scrolls inside its own box; it is created once the
+// box is there, as the menu reads its options only when it is created
+const scrollTarget = inject<Ref<HTMLElement | null>>('tiptapifyScrollContainer', ref(null))
+
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
+
+// Without a float the image stands centered on its own line; a second click on a float removes it
+const alignments: Array<{ value: ImageAlign, icon: string, label: string }> = [
+  { value: 'left', icon: mdi.mdiFormatFloatLeft, label: 'media.image_toolbar.align_left' },
+  { value: 'right', icon: mdi.mdiFormatFloatRight, label: 'media.image_toolbar.align_right' },
+]
+
+function isImageSelected({ state }: { state: Editor['state'] }): boolean {
+  return state.selection instanceof NodeSelection && state.selection.node.type.name === 'image'
+}
+
+function toggleAlign(align: ImageAlign) {
+  const current = editor.value.getAttributes('image').align ?? null
+  editor.value.chain().focus().updateAttributes('image', { align: current === align ? null : align }).run()
+}
+
+// A slide of a slider (extensions/components/media/image/slider.ts) moves among the slides instead of floating
+function isSlide(): boolean {
+  if (!isImageSelected(editor.value)) {
+    return false
+  }
+
+  // The selection may sit in text while the menu hides, where the node at it is a text node
+  const dom = editor.value.view.nodeDOM(editor.value.state.selection.from)
+
+  return dom instanceof HTMLElement && dom.classList.contains('tiptapify-slide')
+}
+
+function download() {
+  const { src } = editor.value.getAttributes('image')
+  if (src) {
+    window.open(src, '_blank', 'noopener')
+  }
+}
+
+</script>
+
+<template>
+  <BubbleMenu
+    v-if="editor && scrollTarget"
+    :editor="editor"
+    plugin-key="tiptapifyImageMenu"
+    :options="{ placement: 'top', offset: -52, flip: false, scrollTarget }"
+    :should-show="isImageSelected"
+  >
+    <div class="tiptapify-image-menu tiptapify-quiet-buttons">
+      <template v-if="isSlide()">
+        <VBtn size="32" variant="text" color="" :disabled="!editor.can().moveImage(-1)" @click="editor.chain().focus().moveImage(-1).run()">
+          <Tooltip :label="t('media.image_toolbar.move_back')" />
+          <BtnIcon :icon="`mdiSvg:${mdi.mdiArrowLeft}`" />
+        </VBtn>
+        <VBtn size="32" variant="text" color="" :disabled="!editor.can().moveImage(1)" @click="editor.chain().focus().moveImage(1).run()">
+          <Tooltip :label="t('media.image_toolbar.move_forward')" />
+          <BtnIcon :icon="`mdiSvg:${mdi.mdiArrowRight}`" />
+        </VBtn>
+      </template>
+      <template v-else>
+        <VBtn
+          v-for="alignment in alignments"
+          :key="alignment.label"
+          size="32"
+          variant="text"
+          color=""
+          :class="{ 'tiptapify-btn--active': (editor.getAttributes('image').align ?? null) === alignment.value }"
+          @click="toggleAlign(alignment.value)"
+        >
+          <Tooltip :label="t(alignment.label)" />
+          <BtnIcon :icon="`mdiSvg:${alignment.icon}`" />
+        </VBtn>
+      </template>
+
+      <div class="tiptapify-image-menu__divider" />
+
+      <VBtn size="32" variant="text" color="" @click="download">
+        <Tooltip :label="t('media.image_toolbar.download')" />
+        <BtnIcon :icon="`mdiSvg:${mdi.mdiTrayArrowDown}`" />
+      </VBtn>
+      <VBtn size="32" variant="text" color="" @click="editor.commands.showTiptapifyImage()">
+        <Tooltip :label="t('media.image_toolbar.edit')" />
+        <BtnIcon :icon="`mdiSvg:${mdi.mdiImageEditOutline}`" />
+      </VBtn>
+
+      <div class="tiptapify-image-menu__divider" />
+
+      <VBtn size="32" variant="text" color="" @click="editor.chain().focus().deleteSelection().run()">
+        <Tooltip :label="t('media.image_toolbar.delete')" />
+        <BtnIcon :icon="`mdiSvg:${mdi.mdiTrashCanOutline}`" />
+      </VBtn>
+    </div>
+  </BubbleMenu>
+</template>
+
+<style scoped lang="scss">
+.tiptapify-image-menu {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px;
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 10px;
+  background: rgb(var(--v-theme-surface));
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+}
+
+.tiptapify-image-menu__divider {
+  width: 1px;
+  height: 20px;
+  margin: 0 4px;
+  background: rgba(var(--v-border-color), var(--v-border-opacity));
+}
+</style>

package/src/components/MenuBubble.vue

@@ -2,6 +2,7 @@
 import { Editor } from '@tiptap/vue-3'
 import { computed, inject, Ref, ref } from 'vue'
 import { BubbleMenu } from '@tiptap/vue-3/menus'
+import { NodeSelection } from '@tiptap/pm/state'
 import * as mdi from '@mdi/js'
 
 defineProps({
@@ -11,6 +12,10 @@ defineProps({
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
+// The menu follows its text or image when the editor scrolls inside its own box; it is created once the
+// box is there, as the menu reads its options only when it is created
+const scrollTarget = inject<Ref<HTMLElement | null>>('tiptapifyScrollContainer', ref(null))
+
 const items = ref([
   {
     name: 'bold',
@@ -85,11 +90,16 @@ const items = ref([
 
 <template>
   <BubbleMenu
-    v-if="editor"
+    v-if="editor && scrollTarget"
     :editor="editor"
-    :options="{ placement: 'bottom' }"
-    :should-show="({ editor, view, state, from, to }) => {
-      if (editor.isActive('image') || editor.isActive('code') || editor.isActive('codeBlock')) {
+    :options="{ placement: 'bottom', scrollTarget }"
+    :should-show="({ editor, state, from, to }) => {
+      // A selected block (image, paywall, widget) is not text to format
+      if (state.selection instanceof NodeSelection) {
+        return false
+      }
+
+      if (editor.isActive('code') || editor.isActive('codeBlock')) {
         return false
       }
 
@@ -99,27 +109,32 @@ const items = ref([
       return (from !== to) && !isAllSelected
     }"
   >
-    <div class="bubble-menu">
-      <VCard>
-        <VCardText class="pa-0">
-          <VToolbar :theme="theme" density="compact" height="auto" class="p-0">
-            <VToolbarItems>
-              <VBtnGroup divided density="compact">
-                <VBtn v-for="(item, key) in items" :key="key" v-bind="item.props" size="x-small" @click="item.click">
-                  <VIcon :icon="item.icon" size="20" />
-                </VBtn>
-              </VBtnGroup>
-            </VToolbarItems>
-          </VToolbar>
-        </VCardText>
-      </VCard>
+    <div class="tiptapify-bubble-menu tiptapify-quiet-buttons">
+      <VBtn
+        v-for="(item, key) in items"
+        :key="key"
+        size="32"
+        variant="text"
+        color=""
+        :disabled="item.props?.disabled"
+        :class="{ 'tiptapify-btn--active': item.props?.color === 'primary' }"
+        @click="item.click"
+      >
+        <VIcon :icon="item.icon" size="20" />
+      </VBtn>
     </div>
   </BubbleMenu>
 </template>
 
 <style scoped lang="scss">
-.bubble-menu {
-  border-radius: 6px;
-  box-shadow: 4px 4px 20px var(--dark-gray);
+.tiptapify-bubble-menu {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px;
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 10px;
+  background: rgb(var(--v-theme-surface));
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
 }
 </style>

package/src/components/Tiptapify.vue

@@ -9,6 +9,7 @@ import { Editor, EditorContent } from '@tiptap/vue-3'
 import { TiptapifyAiOptions, TiptapifyAiResolvedOptions, TiptapifyEditor, TiptapifyFooterAlignment, variantBtnTypes, variantFieldTypes } from '@tiptapify/types/editor'
 import MenuBubble from '@tiptapify/components/MenuBubble.vue'
 import MenuFloating from '@tiptapify/components/MenuFloating.vue'
+import ImageBubbleMenu from '@tiptapify/components/ImageBubbleMenu.vue'
 
 import { useI18n } from 'vue-i18n'
 
@@ -49,6 +50,8 @@ const props = defineProps({
   loading: { type: Boolean, default() { return false } },
   loadingColor: { type: String, default() { return 'default' } },
   loadingHeight: { type: String, default() { return '1px' } },
+  // From this many images in a row the editor shows them as a slider grid; 0 turns it off
+  imageSlider: { type: Number, default() { return 0 } },
 })
 
 const emit = defineEmits(['update:modelValue', 'editor-ready', 'content-changed'])
@@ -135,9 +138,17 @@ const editor: ShallowRef<Editor | undefined> = getTiptapEditor(
         getJSON: () => editorInstance.getJSON(),
       })
     },
+    {
+      captionPlaceholder: t('dialog.image.caption_placeholder'),
+      sliderMinImages: props.imageSlider,
+      sliderLabel: t('media.slider'),
+    },
 )
 
 provide('tiptapifyEditor', editor)
+
+const scrollContainer = ref<HTMLElement | null>(null)
+provide('tiptapifyScrollContainer', scrollContainer)
 provide('tiptapifyI18n', { t })
 provide('tiptapifyAi', tiptapifyAi)
 provide(TIPTAPIFY_CONFIG_KEY, {
@@ -163,7 +174,7 @@ onBeforeUnmount(() => {
 
 <template>
   <div :id="`tiptapify-editor-${editor?.instanceId}`">
-    <div :class="`border border-t-0 rounded-t-${rounded} rounded-b-${rounded}`">
+    <div :class="`tiptapify-frame rounded-${rounded}`">
       <template v-if="toolbar">
         <Toolbar
           v-if="editor"
@@ -179,11 +190,13 @@ onBeforeUnmount(() => {
 
       <VProgressLinear v-model="loadingProgress" :color="loadingColor" :height="loadingHeight" :indeterminate="loading" />
 
-      <div class="pa-2 tiptapify-container resizable" :style="computeResizableHeight" @click="onContainerClick">
+      <div ref="scrollContainer" class="pa-2 tiptapify-container resizable" :style="computeResizableHeight" @click="onContainerClick">
         <MenuFloating v-if="floatingMenu" :variant="variantBtn" :theme="currentTheme" />
 
         <MenuBubble v-if="bubbleMenu" :variant="variantBtn" :theme="currentTheme" />
 
+        <ImageBubbleMenu />
+
         <EditorContent :editor="editor" class="tiptapify-editor" />
       </div>
 
@@ -232,12 +245,21 @@ onBeforeUnmount(() => {
   --border: 1px solid var(--gray-2);
 }
 
+.tiptapify-frame {
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-bottom-color: rgba(var(--v-border-color), calc(var(--v-border-opacity) * 1.6));
+  background: rgb(var(--v-theme-surface));
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
 .resizable {
   resize: vertical;
   overflow: auto;
 }
 
 .tiptapify-container {
+  /* The containing block of the bubble menus, so they scroll with the text they belong to */
+  position: relative;
   display: flex;
   flex-direction: column;
 }
@@ -281,6 +303,8 @@ onBeforeUnmount(() => {
 
   /* List styles */
   ul, ol {
+    /* Next to a floated image the markers stay out of it */
+    display: flow-root;
     padding: 0 1rem;
     margin: 1.25rem 1rem 1.25rem 0.4rem;
 
@@ -518,92 +542,185 @@ onBeforeUnmount(() => {
     display: block;
   }
 
-  [data-node="image"].has-focus {
-    [data-resize-handle] {
-      position: absolute;
-      background: rgba(0, 0, 0, 0.5);
-      border: 1px solid rgba(255, 255, 255, 0.8);
-      border-radius: 2px;
-      z-index: 10;
+  /* Image with the caption under it (see extensions/components/media/image/caption.ts) */
+  .tiptapify-image {
+    --tiptapify-image-max-height: 400px;
 
-      &:hover {
-        background: rgba(0, 0, 0, 0.8);
-      }
+    flex-direction: column;
+    gap: 4px;
+    width: fit-content;
+    max-width: 100%;
+    margin: 1rem 0;
 
-      /* Corner handles */
-      &[data-resize-handle='top-left'],
-      &[data-resize-handle='top-right'],
-      &[data-resize-handle='bottom-left'],
-      &[data-resize-handle='bottom-right'] {
-        width: 8px;
-        height: 8px;
-      }
+    /* Never wider than the text, never taller than the max height: big photos stay out of the way */
+    img {
+      max-width: 100%;
+      height: auto !important;
+      margin: 0;
+      border-radius: 4px;
+      background: rgba(var(--v-theme-on-surface), 0.04);
+    }
 
-      &[data-resize-handle='top-left'] {
-        top: -4px;
-        left: -4px;
-        cursor: nwse-resize;
-      }
+    [data-resize-wrapper] {
+      max-width: min(100%, calc(var(--tiptapify-image-max-height) * var(--tiptapify-image-ratio, 100)));
+      border-radius: 4px;
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+      transition: outline-color 0.15s;
+    }
 
-      &[data-resize-handle='top-right'] {
-        top: -4px;
-        right: -4px;
-        cursor: nesw-resize;
-      }
+    /* One block: hovering outlines it, a click selects it and shows its toolbar */
+    img {
+      cursor: pointer;
+    }
 
-      &[data-resize-handle='bottom-left'] {
-        bottom: -4px;
-        left: -4px;
-        cursor: nesw-resize;
-      }
+    &:hover [data-resize-wrapper] {
+      outline-color: rgba(var(--v-theme-primary), 0.35);
+    }
 
-      &[data-resize-handle='bottom-right'] {
-        bottom: -4px;
-        right: -4px;
-        cursor: nwse-resize;
-      }
+    &.ProseMirror-selectednode [data-resize-wrapper] {
+      outline-color: rgb(var(--v-theme-primary));
+    }
 
-      /* Edge handles */
-      &[data-resize-handle='top'],
-      &[data-resize-handle='bottom'] {
-        height: 6px;
-        left: 8px;
-        right: 8px;
-      }
+    /* Centered unless floated; a floated image lets the text wrap around it */
+    &:not([data-align]):not(.tiptapify-slide) {
+      align-items: center;
+      margin-inline: auto;
 
-      &[data-resize-handle='top'] {
-        top: -3px;
-        cursor: ns-resize;
+      .tiptapify-image-caption {
+        text-align: center;
       }
+    }
 
-      &[data-resize-handle='bottom'] {
-        bottom: -3px;
-        cursor: ns-resize;
-      }
+    &[data-align='left'],
+    &[data-align='right'] {
+      max-width: 50%;
+      margin-top: 0.25rem;
+    }
 
-      &[data-resize-handle='left'],
-      &[data-resize-handle='right'] {
-        width: 6px;
-        top: 8px;
-        bottom: 8px;
-      }
+    &[data-align='left'] {
+      float: left;
+      margin-right: 1.25rem;
+    }
 
-      &[data-resize-handle='left'] {
-        left: -3px;
-        cursor: ew-resize;
-      }
+    &[data-align='right'] {
+      float: right;
+      margin-left: 1.25rem;
+    }
+  }
 
-      &[data-resize-handle='right'] {
-        right: -3px;
-        cursor: ew-resize;
-      }
+  /* Images in a row shown as a slider (extensions/components/media/image/slider.ts): a numbered grid */
+  .tiptapify-image.tiptapify-slide {
+    position: relative;
+    display: inline-flex !important;
+    box-sizing: border-box;
+    width: calc(100% / 3);
+    margin: 0;
+    padding: 8px 6px;
+    vertical-align: top;
+    background: rgba(var(--v-theme-primary), 0.06);
+
+    [data-resize-wrapper] {
+      width: 100%;
+    }
+
+    img {
+      width: 100% !important;
+      max-width: none;
+      aspect-ratio: 4 / 3;
+      object-fit: cover;
     }
 
-    [data-resize-state='true'] [data-resize-wrapper] {
-      outline: 1px solid rgba(0, 0, 0, 0.25);
-      border-radius: 0.125rem;
+    [data-resize-handle] {
+      display: none !important;
+    }
+
+    &::before {
+      position: absolute;
+      top: 14px;
+      left: 12px;
+      z-index: 1;
+      padding: 0 6px;
+      border-radius: 4px;
+      background: rgba(0, 0, 0, 0.6);
+      color: #fff;
+      content: attr(data-slide-label);
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 20px;
+      pointer-events: none;
+    }
+  }
+
+  &:has(.tiptapify-slide) {
+    container-type: inline-size;
+  }
+
+  /* The caret between two slides: a vertical line at the edge of the slide before it */
+  .tiptapify-slide + .ProseMirror-gapcursor:has(+ .tiptapify-slide) {
+    display: inline-block;
+
+    &::after {
+      top: 8px;
+      width: 0;
+      height: calc((100cqw / 3 - 12px) * 0.75);
+      border-top: 0;
+      border-left: 2px solid currentColor;
     }
   }
+
+  .tiptapify-image-caption {
+    width: 100%;
+    min-width: 0;
+    padding: 2px 0 3px;
+    border: 0;
+    border-bottom: 1px dashed transparent;
+    background: transparent;
+    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+    font: inherit;
+    font-size: 0.875em;
+    outline: none;
+    transition: border-color 0.15s;
+
+    &::placeholder {
+      color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+    }
+
+    &:hover:not(:disabled),
+    &:focus {
+      border-bottom-color: rgba(var(--v-border-color), 0.4);
+    }
+
+    &:disabled:placeholder-shown {
+      display: none;
+    }
+  }
+
+  /* Resize handles of a selected image: dots on its corners and edge middles */
+  [data-node='image'] [data-resize-handle] {
+    display: none;
+  }
+
+  [data-node='image'].ProseMirror-selectednode [data-resize-handle] {
+    position: absolute;
+    z-index: 10;
+    display: block;
+    width: 10px;
+    height: 10px;
+    border: 2px solid rgb(var(--v-theme-surface));
+    border-radius: 50%;
+    background: rgb(var(--v-theme-primary));
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
+
+    &[data-resize-handle='top-left'] { top: -5px !important; left: -5px !important; cursor: nwse-resize; }
+    &[data-resize-handle='top-right'] { top: -5px !important; right: -5px !important; left: auto !important; cursor: nesw-resize; }
+    &[data-resize-handle='bottom-left'] { bottom: -5px !important; left: -5px !important; top: auto !important; cursor: nesw-resize; }
+    &[data-resize-handle='bottom-right'] { right: -5px !important; bottom: -5px !important; top: auto !important; left: auto !important; cursor: nwse-resize; }
+    &[data-resize-handle='top'] { top: -5px !important; left: calc(50% - 5px) !important; right: auto !important; cursor: ns-resize; }
+    &[data-resize-handle='bottom'] { bottom: -5px !important; top: auto !important; left: calc(50% - 5px) !important; right: auto !important; cursor: ns-resize; }
+    &[data-resize-handle='left'] { left: -5px !important; top: calc(50% - 5px) !important; bottom: auto !important; cursor: ew-resize; }
+    &[data-resize-handle='right'] { right: -5px !important; left: auto !important; top: calc(50% - 5px) !important; bottom: auto !important; cursor: ew-resize; }
+  }
 }
 
 /*
@@ -622,7 +739,7 @@ onBeforeUnmount(() => {
  */
 .tiptapify-dialog-grid {
   display: grid;
-  gap: 24px;
+  gap: 16px;
   grid-template-columns: repeat(12, minmax(0, 1fr));
 
   > .tiptapify-dialog-col {