@edifice.io/tiptap-extensions/dist/image/image.cjs.map

Edifice Rich Text Editor Extensions

{"version":3,"file":"image.cjs","sources":["../../src/image/image.ts"],"sourcesContent":["import { WorkspaceElement } from '@edifice.io/client';\nimport { ImageResizer } from '@edifice.io/utilities';\nimport { mergeAttributes, nodeInputRule } from '@tiptap/core';\nimport TiptapImage from '@tiptap/extension-image';\nimport { Plugin } from 'prosemirror-state';\n\nexport const IMAGE_INPUT_REGEX =\n  /(?:^|\\s)(!\\[(.+|:?)]\\((\\S+)(?:(?:\\s+)[\"'](\\S+)[\"'])?\\))$/;\n\nexport interface CustomImageOptions {\n  HTMLAttributes: Record<string, string>;\n  sizes: string[];\n  uploadFile?: (file: File) => Promise<WorkspaceElement | null>;\n}\n\ninterface AttributesProps {\n  width: number | string;\n  height: number | string;\n  size: string;\n}\n\ndeclare module '@tiptap/core' {\n  interface Commands<ReturnType> {\n    customImage: {\n      setAttributes: (options: AttributesProps) => ReturnType;\n      setNewImage: (options: {\n        src: string;\n        alt?: string;\n        title?: string;\n      }) => ReturnType;\n    };\n  }\n}\n\nexport const Image = TiptapImage.extend<CustomImageOptions>({\n  name: 'custom-image',\n  draggable: true,\n  selectable: true,\n\n  addOptions() {\n    return {\n      ...this.parent?.(),\n      inline: true,\n      content: 'inline*',\n      sizes: ['small', 'medium', 'large'],\n      HTMLAttributes: {\n        class: 'custom-image',\n      },\n      uploadFile: () => {\n        return Promise.resolve(null);\n      },\n    };\n  },\n\n  addAttributes() {\n    return {\n      ...this.parent?.(),\n      size: {\n        default: 'medium',\n        rendered: false,\n      },\n      alt: {\n        renderHTML: (attributes) => {\n          return {\n            alt: attributes.alt,\n          };\n        },\n        parseHTML: (element) => element.getAttribute('alt'),\n      },\n      title: {\n        renderHTML: (attributes) => {\n          return {\n            title: attributes.title,\n          };\n        },\n        parseHTML: (element) => element.getAttribute('title'),\n      },\n      width: {\n        default: '350',\n        renderHTML: (attributes) => {\n          if (\n            attributes.width !== null &&\n            attributes.width !== undefined &&\n            !Number.isNaN(attributes.width)\n          ) {\n            return {\n              width: parseInt(attributes.width),\n            };\n          }\n          return {};\n        },\n        parseHTML: (element) => element.getAttribute('width'),\n      },\n      height: {\n        renderHTML: (attributes) => {\n          if (\n            attributes.height !== null &&\n            attributes.height !== undefined &&\n            !Number.isNaN(attributes.height)\n          ) {\n            return {\n              height: parseInt(attributes.height),\n            };\n          }\n          return {};\n        },\n        parseHTML: (element) => element.getAttribute('height'),\n      },\n      style: {\n        renderHTML: (attributes) => {\n          return attributes.style\n            ? {\n                style: attributes.style,\n              }\n            : {};\n        },\n        parseHTML: (element) => {\n          return null;\n        },\n      },\n    };\n  },\n\n  parseHTML() {\n    return [\n      {\n        tag: 'img[src]:not([src^=\"data:\"])',\n        getAttrs: (el: HTMLImageElement) => {\n          const attr = { src: el.getAttribute('src') };\n          // Check old content format and get the width from the parent element\n          if (el.parentElement?.className.includes('image-container')) {\n            if (el.parentElement.style?.width) {\n              attr['width'] = el.parentElement.style.width;\n            }\n          }\n          if (el.style?.width) {\n            attr['width'] = el.style.width;\n          }\n\n          // Check old content smiley\n          const oldSmileyList = [\n            'happy',\n            'proud',\n            'dreamy',\n            'love',\n            'tired',\n            'angry',\n            'worried',\n            'sick',\n            'joker',\n            'sad',\n          ];\n          if (\n            oldSmileyList.filter((smiley) => attr.src.includes(smiley + '.png'))\n              .length > 0\n          ) {\n            attr['style'] = {\n              width: '1.5em',\n              height: '1.5em',\n              fontSize: '16px',\n            };\n            attr['width'] = 'null';\n            attr['height'] = 'null';\n          }\n\n          return attr;\n        },\n      },\n    ];\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    return [\n      'img',\n      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),\n    ];\n  },\n\n  addInputRules() {\n    return [\n      nodeInputRule({\n        find: IMAGE_INPUT_REGEX,\n        type: this.type,\n        getAttributes: (match) => {\n          const [, , alt, src, title] = match;\n\n          return {\n            src,\n            alt,\n            title,\n          };\n        },\n      }),\n    ];\n  },\n\n  addCommands() {\n    return {\n      setNewImage:\n        (attrs) =>\n        ({ tr, dispatch }) => {\n          const { selection } = tr;\n          const node = this.type.create(attrs);\n\n          if (dispatch) {\n            tr.replaceRangeWith(selection.from, selection.to, node);\n          }\n\n          return true;\n        },\n      setAttributes:\n        (attributes) =>\n        ({ tr, dispatch }) => {\n          const { selection } = tr;\n\n          const nodeAttrs = tr.doc.nodeAt(tr.selection.from);\n          const options = {\n            ...nodeAttrs.attrs,\n            ...attributes,\n          };\n          const node = this.type.create(options);\n\n          if (dispatch) {\n            tr.replaceRangeWith(selection.from, selection.to, node);\n          }\n\n          return true;\n        },\n    };\n  },\n\n  addProseMirrorPlugins() {\n    const uploadNode = async (file: File) => {\n      /**\n       * Resize the image\n       */\n      const resizedImage = await ImageResizer.resizeImageFile(file);\n\n      /**\n       * Upload the image\n       */\n      const image = await this.options.uploadFile(resizedImage);\n\n      /**\n       * Get the image url\n       */\n      const imageUrl = `/workspace/${image.public ? 'pub/' : ''}document/${\n        image._id\n      }?timestamp=${new Date().getTime()}`;\n\n      /**\n       * Create the image node\n       */\n\n      const node = this.type.create({\n        src: imageUrl,\n        alt: image.alt,\n        title: image.title,\n      });\n\n      return node;\n    };\n\n    const getFilteredFiles = (files: FileList) => {\n      return Array.from(files).filter((file) =>\n        /image\\/(png|jpeg|jpg|gif|webp|heic|avif)/.test(file.type),\n      );\n    };\n\n    const handleImageInsert = async (\n      editor: any,\n      file: File,\n      position?: number,\n    ) => {\n      const node = await uploadNode(file);\n      if (!node) return;\n\n      const transaction =\n        position !== undefined\n          ? editor.state.tr.insert(position, node)\n          : editor.state.tr.replaceSelectionWith(node);\n\n      editor.dispatch(transaction);\n    };\n\n    return [\n      new Plugin({\n        props: {\n          handlePaste: (editor, e) => {\n            const files = getFilteredFiles(e.clipboardData?.files);\n            if (files.length === 0) return false;\n\n            for (const file of files) {\n              handleImageInsert(editor, file);\n            }\n\n            return true;\n          },\n          handleDrop: (editor, e, _s, moved) => {\n            if (moved) return false;\n\n            const files = getFilteredFiles(e.dataTransfer.files);\n            if (files.length === 0) return false;\n\n            const { pos: position } = editor.posAtCoords({\n              left: e.clientX,\n              top: e.clientY,\n            });\n\n            for (const file of files) {\n              handleImageInsert(editor, file, position);\n            }\n            return true;\n          },\n        },\n      }),\n    ];\n  },\n});\n"],"names":["mergeAttributes","nodeInputRule","ImageResizer","Plugin"],"mappings":"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"}