frappe-ui 0.1.135 → 0.1.136

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.135",
+  "version": "0.1.136",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.ts",
   "scripts": {
@@ -27,10 +27,12 @@
   "author": "Frappe Technologies Pvt. Ltd.",
   "license": "MIT",
   "dependencies": {
+    "@floating-ui/vue": "^1.1.6",
     "@headlessui/vue": "^1.7.14",
     "@popperjs/core": "^2.11.2",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.16",
+    "@tiptap/core": "^2.11.7",
     "@tiptap/extension-code-block-lowlight": "^2.11.5",
     "@tiptap/extension-color": "^2.0.3",
     "@tiptap/extension-highlight": "^2.0.3",
@@ -58,6 +60,9 @@
     "lucide-static": "^0.479.0",
     "ora": "5.4.1",
     "prettier": "^3.3.2",
+    "prosemirror-model": "^1.25.1",
+    "prosemirror-state": "^1.4.3",
+    "prosemirror-view": "^1.39.2",
     "radix-vue": "^1.5.3",
     "reka-ui": "^2.0.2",
     "showdown": "^2.1.0",

package/src/components/ErrorMessage.vue

@@ -7,18 +7,18 @@
   ></div>
 </template>
 
-<script>
-export default {
-  name: 'ErrorMessage',
-  props: ['message'],
-  computed: {
-    errorMessage() {
-      if (!this.message) return ''
-      if (this.message instanceof Error) {
-        return this.message.messages || this.message.message
-      }
-      return this.message
-    },
-  },
-}
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  message?: string | Error
+}>()
+
+const errorMessage = computed(() => {
+  if (!props.message) return ''
+  if (props.message instanceof Error) {
+    return (props.message as any).messages || props.message.message
+  }
+  return props.message
+})
 </script>

package/src/components/Progress.vue

@@ -50,7 +50,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from '@vue/reactivity'
+import { computed } from 'vue'
 
 const MIN_VALUE = 0
 const MAX_VALUE = 100

package/src/components/TextEditor/TextEditor.vue

@@ -15,8 +15,7 @@
 </template>
 
 <script>
-import { normalizeClass } from 'vue'
-import { computed } from '@vue/reactivity'
+import { normalizeClass, computed } from 'vue'
 import { Editor, EditorContent, VueNodeViewRenderer } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import Placeholder from '@tiptap/extension-placeholder'
@@ -25,7 +24,7 @@ import Table from '@tiptap/extension-table'
 import TableCell from '@tiptap/extension-table-cell'
 import TableHeader from '@tiptap/extension-table-header'
 import TableRow from '@tiptap/extension-table-row'
-import ImageExtension from './image-extension'
+import { ImageExtension } from './extensions/image'
 import ImageViewerExtension from './image-viewer-extension'
 import VideoExtension from './video-extension'
 import LinkExtension from './link-extension'

package/src/components/TextEditor/extensions/image/ImageNodeView.vue

@@ -0,0 +1,263 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
+import LoadingIndicator from '../../../LoadingIndicator.vue'
+import ErrorMessage from '../../../ErrorMessage.vue'
+import LucideMoveDiagonal2 from '~icons/lucide/move-diagonal-2'
+import LucideAlignLeft from '~icons/lucide/align-left'
+import LucideAlignCenter from '~icons/lucide/align-center'
+import LucideAlignRight from '~icons/lucide/align-right'
+
+const props = defineProps(nodeViewProps)
+
+const imageRef = ref<HTMLImageElement | null>(null)
+const containerRef = ref<HTMLDivElement | null>(null)
+const isResizing = ref(false)
+const startDragX = ref(0)
+const startWidth = ref(0)
+const originalAspectRatio = ref(1)
+
+function selectImage() {
+  props.editor.commands.setNodeSelection(props.getPos())
+}
+
+const caption = ref(props.node.attrs.alt || '')
+const isEditable = ref(false)
+
+onMounted(() => {
+  isEditable.value = props.editor.isEditable
+  if (imageRef.value) {
+    // Ensure initial aspect ratio is captured if dimensions are available
+    const initialWidth = props.node.attrs.width || imageRef.value.naturalWidth
+    const initialHeight =
+      props.node.attrs.height || imageRef.value.naturalHeight
+    if (initialWidth && initialHeight) {
+      originalAspectRatio.value = initialHeight / initialWidth
+    }
+  }
+})
+
+props.editor.on('update', () => {
+  isEditable.value = props.editor.isEditable
+})
+
+function updateCaption(event: Event) {
+  const newCaption = (event.target as HTMLInputElement).value
+  caption.value = newCaption
+  props.updateAttributes({ alt: newCaption })
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Enter') {
+    event.preventDefault()
+    createParagraphAfterImage()
+  } else if (event.key === 'Escape' || event.key === 'ArrowDown') {
+    event.preventDefault()
+    setCursorAfterImage()
+  }
+  if (event.key === 'ArrowUp') {
+    event.preventDefault()
+    setCursorBeforeImage()
+  }
+}
+
+function setCursorAt(pos: number) {
+  props.editor.commands.focus()
+  props.editor.chain().setTextSelection(pos).scrollIntoView().run()
+}
+
+function createParagraphAfterImage() {
+  const pos = props.getPos()
+  props.editor.commands.focus()
+  props.editor
+    .chain()
+    .setTextSelection(pos + 1)
+    .createParagraphNear()
+    .scrollIntoView()
+    .run()
+}
+
+function setCursorAfterImage() {
+  const pos = props.getPos()
+  setCursorAt(pos + 1)
+}
+
+function setCursorBeforeImage() {
+  const pos = props.getPos()
+  setCursorAt(pos - 1)
+}
+
+function startResize(event: MouseEvent) {
+  if (!isEditable.value) return
+  selectImage()
+  isResizing.value = true
+  startDragX.value = event.clientX
+  startWidth.value = imageRef.value?.offsetWidth || props.node.attrs.width || 0
+
+  // Calculate aspect ratio from current attributes or natural dimensions
+  const width = props.node.attrs.width || imageRef.value?.naturalWidth
+  const height = props.node.attrs.height || imageRef.value?.naturalHeight
+  if (width && height) {
+    originalAspectRatio.value = height / width
+  } else {
+    originalAspectRatio.value = 1
+  }
+
+  window.addEventListener('mousemove', handleResize)
+  window.addEventListener('mouseup', stopResize)
+  document.body.style.cursor = 'ew-resize'
+}
+
+function handleResize(event: MouseEvent) {
+  if (!isResizing.value || !imageRef.value || !containerRef.value) return
+
+  const editorElement = props.editor.view.dom
+  const editorWidth = editorElement.clientWidth
+
+  const deltaX = event.clientX - startDragX.value
+  let newWidth = startWidth.value + deltaX
+
+  // Add constraints (e.g., minimum width and maximum width based on editor)
+  newWidth = Math.max(50, Math.min(newWidth, editorWidth))
+
+  const newHeight = newWidth * originalAspectRatio.value
+
+  // Apply temporary styles for visual feedback
+  imageRef.value.style.width = `${newWidth}px`
+  imageRef.value.style.height = `${newHeight}px`
+  containerRef.value.style.width = `${newWidth}px`
+}
+
+function stopResize() {
+  if (!isResizing.value) return
+
+  isResizing.value = false
+  window.removeEventListener('mousemove', handleResize)
+  window.removeEventListener('mouseup', stopResize)
+  document.body.style.cursor = ''
+
+  if (imageRef.value && containerRef.value) {
+    const finalWidth = imageRef.value.offsetWidth
+    const finalHeight = imageRef.value.offsetHeight
+    props.updateAttributes({ width: finalWidth, height: finalHeight })
+
+    // Clear temporary styles after updating attributes
+    imageRef.value.style.width = ''
+    imageRef.value.style.height = ''
+    containerRef.value.style.width = ''
+  }
+}
+
+function setAlignment(align: 'left' | 'center' | 'right') {
+  props.editor.commands.setImageAlign(align)
+}
+</script>
+
+<template>
+  <NodeViewWrapper>
+    <div
+      ref="containerRef"
+      class="relative overflow-hidden not-prose my-6 rounded-[2px] block max-w-full"
+      :class="[
+        { 'ring-2 ring-outline-gray-3 ring-offset-2': selected },
+        node.attrs.align === 'center' ? 'mx-auto' : '',
+        node.attrs.align === 'right' ? 'ml-auto mr-0' : '',
+        node.attrs.align === 'left' ? 'mr-auto ml-0' : '',
+      ]"
+      :style="{ width: node.attrs.width ? `${node.attrs.width}px` : 'auto' }"
+    >
+      <div class="relative">
+        <img
+          v-if="node.attrs.src"
+          ref="imageRef"
+          class="rounded-[2px]"
+          :src="node.attrs.src"
+          :alt="node.attrs.alt || ''"
+          :width="node.attrs.width"
+          :height="node.attrs.height"
+          @click.stop="selectImage"
+        />
+
+        <div class="absolute bottom-2 right-2 flex items-center gap-2">
+          <!-- Alignment Controls -->
+          <div
+            v-if="selected && isEditable"
+            class="flex divide-x divide-outline-gray-5 rounded bg-black/65"
+          >
+            <button
+              @click.stop="setAlignment('left')"
+              :class="[
+                'px-1.5 py-1 hover:text-ink-white',
+                node.attrs.align === 'left'
+                  ? 'text-ink-white'
+                  : 'text-ink-gray-4',
+              ]"
+            >
+              <LucideAlignLeft class="size-4" />
+            </button>
+            <button
+              @click.stop="setAlignment('center')"
+              :class="[
+                'px-1.5 py-1 hover:text-ink-white',
+                node.attrs.align === 'center'
+                  ? 'text-ink-white'
+                  : 'text-ink-gray-4',
+              ]"
+            >
+              <LucideAlignCenter class="size-4" />
+            </button>
+            <button
+              @click.stop="setAlignment('right')"
+              :class="[
+                'px-1.5 py-1 hover:text-ink-white',
+                node.attrs.align === 'right'
+                  ? 'text-ink-white'
+                  : 'text-ink-gray-4',
+              ]"
+            >
+              <LucideAlignRight class="size-4" />
+            </button>
+          </div>
+
+          <!-- Resize Handle -->
+          <button
+            v-if="selected && isEditable"
+            class="cursor-nw-resize bg-black/65 rounded p-1"
+            @mousedown.prevent="startResize"
+          >
+            <LucideMoveDiagonal2 class="text-white size-4" />
+          </button>
+        </div>
+
+        <!-- Loading indicator overlay -->
+        <div
+          v-if="node.attrs.loading"
+          class="inset-0 absolute flex items-center justify-center z-10"
+        >
+          <div
+            class="bg-gray-900/80 p-2 inset-0 leading-none rounded-sm flex flex-col items-center justify-center gap-2"
+          >
+            <div class="flex items-center gap-2">
+              <LoadingIndicator class="text-gray-100 size-4" />
+              <span class="text-gray-100">Uploading...</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <input
+        v-if="(isEditable || node.attrs.alt) && !node.attrs.error"
+        v-model="caption"
+        class="w-full text-center bg-transparent text-sm text-ink-gray-6 h-7 border-none focus:ring-0 placeholder-ink-gray-4"
+        placeholder="Add caption"
+        :disabled="!isEditable"
+        @change="updateCaption"
+        @keydown="handleKeydown"
+      />
+
+      <div v-if="node.attrs.error" class="w-full py-1.5">
+        <ErrorMessage :message="`Upload Failed: ${node.attrs.error}`" />
+      </div>
+    </div>
+  </NodeViewWrapper>
+</template>

package/src/components/TextEditor/{image-extension.ts → extensions/image/image-extension.ts}

@@ -8,9 +8,9 @@ import ImageNodeView from './ImageNodeView.vue'
 import { Plugin, Selection, Transaction, EditorState } from 'prosemirror-state'
 import { EditorView } from 'prosemirror-view'
 import { Node } from '@tiptap/pm/model'
-import fileToBase64 from '../../utils/file-to-base64'
+import { fileToBase64 } from '../../../../index'
 
-export interface ImageOptions {
+export interface ImageExtensionOptions {
   /**
    * Function to handle image uploads
    * @default null
@@ -51,6 +51,11 @@ declare module '@tiptap/core' {
        * Select an image file using the file picker and upload it
        */
       selectAndUploadImage: () => ReturnType
+
+      /**
+       * Set image alignment
+       */
+      setImageAlign: (align: 'left' | 'center' | 'right') => ReturnType
     }
   }
 }
@@ -58,10 +63,9 @@ declare module '@tiptap/core' {
 /**
  * Matches markdown image syntax: ![alt](src "title")
  */
-export const inputRegex =
-  /(?:^|\s)(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/
+const inputRegex = /(?:^|\s)(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/
 
-export default NodeExtension.create<ImageOptions>({
+export const ImageExtension = NodeExtension.create<ImageExtensionOptions>({
   name: 'image',
 
   group: 'block',
@@ -79,6 +83,26 @@ export default NodeExtension.create<ImageOptions>({
         default: false,
         parseHTML: () => false,
       },
+      align: {
+        default: 'left',
+        parseHTML: (element) => {
+          const align = (
+            element.getAttribute('data-align') ||
+            element.getAttribute('align') ||
+            'left'
+          ).toLowerCase()
+
+          if (['left', 'center', 'right'].includes(align)) {
+            return align as 'left' | 'center' | 'right'
+          }
+          return 'left'
+        },
+        renderHTML: (attributes) => {
+          return {
+            'data-align': attributes.align || 'left',
+          }
+        },
+      },
       uploadId: {
         default: null,
         parseHTML: () => null,
@@ -129,6 +153,12 @@ export default NodeExtension.create<ImageOptions>({
 
   addCommands() {
     return {
+      setImageAlign:
+        (align: 'left' | 'center' | 'right') =>
+        ({ commands }) => {
+          return commands.updateAttributes(this.name, { align })
+        },
+
       setImage:
         (attributes: SetImageOptions) =>
         ({ commands, editor }) => {
@@ -139,12 +169,7 @@ export default NodeExtension.create<ImageOptions>({
 
           if (result && attributes.src) {
             findImageNodeBySource(editor.view, attributes.src, (node, pos) => {
-              updateNodeWithDimensions(
-                attributes.src,
-                editor.view,
-                pos,
-                node.attrs,
-              )
+              updateNodeWithDimensions(attributes.src, editor.view, pos)
             })
           }
 
@@ -292,12 +317,7 @@ export default NodeExtension.create<ImageOptions>({
           newImageNodes.forEach(({ node, pos }) => {
             const editor = extensionThis.editor
             if (editor) {
-              updateNodeWithDimensions(
-                node.attrs.src,
-                editor.view,
-                pos,
-                node.attrs,
-              )
+              updateNodeWithDimensions(node.attrs.src, editor.view, pos)
             }
           })
 
@@ -491,19 +511,26 @@ function updateNodeWithDimensions(
   src: string,
   view: EditorView,
   pos: number,
-  attrs: any,
-) {
+): void {
   getImageDimensions(src)
     .then((dimensions) => {
-      const transaction = view.state.tr.setNodeMarkup(pos, undefined, {
-        ...attrs,
-        width: dimensions.width,
-        height: dimensions.height,
-      })
-      view.dispatch(transaction)
+      const node = view.state.doc.nodeAt(pos)
+      if (!node || node.type.name !== 'image') {
+        return
+      }
+      const currentAttrs = node.attrs
+
+      if (currentAttrs.width == null || currentAttrs.height == null) {
+        const transaction = view.state.tr.setNodeMarkup(pos, undefined, {
+          ...currentAttrs,
+          width: currentAttrs.width ?? dimensions.width,
+          height: currentAttrs.height ?? dimensions.height,
+        })
+        view.dispatch(transaction)
+      }
     })
     .catch((error) => {
-      console.error('Failed to get image dimensions:', error)
+      // Don't log error if it's just about dimensions for an existing node
     })
 }
 

package/src/components/TextEditor/extensions/image/index.ts

@@ -0,0 +1,5 @@
+export {
+  ImageExtension,
+  type ImageExtensionOptions,
+  type SetImageOptions,
+} from './image-extension'

package/src/index.ts

@@ -83,7 +83,7 @@ export { default as visibilityDirective } from './directives/visibility.js'
 // utilities
 export { default as call, createCall } from './utils/call.js'
 export { default as debounce } from './utils/debounce'
-export { default as fileToBase64 } from './utils/file-to-base64.js'
+export { default as fileToBase64 } from './utils/file-to-base64'
 export { default as FileUploadHandler } from './utils/fileUploadHandler'
 export { usePageMeta } from './utils/pageMeta.js'
 export { dayjsLocal, dayjs } from './utils/dayjs.js'

package/src/tailwind/plugin.js

@@ -328,6 +328,14 @@ module.exports = plugin(
               'h5 strong': {
                 fontWeight: 600,
               },
+              'img[data-align=right]': {
+                marginLeft: 'auto',
+                marginRight: '0',
+              },
+              'img[data-align=center]': {
+                marginLeft: 'auto',
+                marginRight: 'auto',
+              },
             },
           },
           sm: {

package/src/utils/file-to-base64.ts

@@ -0,0 +1,13 @@
+export default (file: File): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onloadend = () => {
+      if (reader.result == null) {
+        reject(new Error('FileReader result is null'))
+      } else if (typeof reader.result === 'string') {
+        resolve(reader.result)
+      }
+    }
+    reader.readAsDataURL(file)
+  })
+}

package/src/components/TextEditor/ImageNodeView.vue

@@ -1,125 +0,0 @@
-<script setup lang="ts">
-import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
-import LoadingIndicator from '../LoadingIndicator.vue'
-import { ref, onMounted } from 'vue'
-import ErrorMessage from '../ErrorMessage.vue'
-
-const props = defineProps(nodeViewProps)
-
-function selectImage() {
-  props.editor.commands.setNodeSelection(props.getPos())
-}
-
-const caption = ref(props.node.attrs.alt || '')
-const isEditable = ref(false)
-
-onMounted(() => {
-  isEditable.value = props.editor.isEditable
-})
-
-props.editor.on('update', () => {
-  isEditable.value = props.editor.isEditable
-})
-
-function updateCaption(event: Event) {
-  const newCaption = (event.target as HTMLInputElement).value
-  caption.value = newCaption
-  props.updateAttributes({ alt: newCaption })
-}
-
-function handleKeydown(event: KeyboardEvent) {
-  if (event.key === 'Enter') {
-    event.preventDefault()
-    createParagraphAfterImage()
-  } else if (event.key === 'Escape' || event.key === 'ArrowDown') {
-    event.preventDefault()
-    setCursorAfterImage()
-  }
-  if (event.key === 'ArrowUp') {
-    event.preventDefault()
-    setCursorBeforeImage()
-  }
-}
-
-function setCursorAt(pos: number) {
-  props.editor.commands.focus()
-  props.editor.chain().setTextSelection(pos).scrollIntoView().run()
-}
-
-function createParagraphAfterImage() {
-  const pos = props.getPos()
-  props.editor.commands.focus()
-  props.editor
-    .chain()
-    .setTextSelection(pos + 1)
-    .createParagraphNear()
-    .scrollIntoView()
-    .run()
-}
-
-function setCursorAfterImage() {
-  const pos = props.getPos()
-  setCursorAt(pos + 1)
-}
-
-function setCursorBeforeImage() {
-  const pos = props.getPos()
-  setCursorAt(pos - 1)
-}
-</script>
-
-<template>
-  <NodeViewWrapper>
-    <div class="relative overflow-hidden not-prose my-6">
-      <div class="relative">
-        <img
-          v-if="node.attrs.src"
-          class="rounded-[2px]"
-          :src="node.attrs.src"
-          :alt="node.attrs.alt || ''"
-          :width="node.attrs.width"
-          :height="node.attrs.height"
-          @click="selectImage"
-        />
-
-        <!-- Loading indicator overlay -->
-        <div
-          v-if="node.attrs.loading"
-          class="inset-0 absolute flex items-center justify-center z-10"
-        >
-          <div
-            class="bg-gray-900/80 p-2 inset-0 leading-none rounded-sm flex flex-col items-center justify-center gap-2"
-          >
-            <div class="flex items-center gap-2">
-              <LoadingIndicator class="text-gray-100 size-4" />
-              <span class="text-gray-100">Uploading...</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- Selection overlay -->
-        <div
-          class="absolute pointer-events-none inset-0 rounded-[2px] bg-black/20 dark:bg-white/20 z-5 transition-opacity"
-          :class="{
-            'opacity-100': selected,
-            'opacity-0': !selected,
-          }"
-        ></div>
-      </div>
-
-      <input
-        v-if="(isEditable || node.attrs.alt) && !node.attrs.error"
-        v-model="caption"
-        class="w-full text-center bg-transparent text-sm text-ink-gray-6 h-7 border-none focus:ring-0 placeholder-ink-gray-4"
-        placeholder="Add caption"
-        :disabled="!isEditable"
-        @change="updateCaption"
-        @keydown="handleKeydown"
-      />
-
-      <div v-if="node.attrs.error" class="w-full py-1.5">
-        <ErrorMessage :message="`Upload Failed: ${node.attrs.error}`" />
-      </div>
-    </div>
-  </NodeViewWrapper>
-</template>

package/src/utils/file-to-base64.js

@@ -1,9 +0,0 @@
-export default (file) => {
-  return new Promise((resolve) => {
-    let reader = new FileReader()
-    reader.onloadend = () => {
-      resolve(reader.result)
-    }
-    reader.readAsDataURL(file)
-  })
-}