refactor: restructure extensions

packages/extension-image/src/image.ts

@@ -0,0 +1,96 @@
+import {
+  Command,
+  Node,
+  nodeInputRule,
+  mergeAttributes,
+} from '@tiptap/core'
+
+export interface ImageOptions {
+  inline: boolean,
+  HTMLAttributes: {
+    [key: string]: any
+  },
+}
+
+export const inputRegex = /!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\)/
+
+const Image = Node.create({
+  name: 'image',
+
+  defaultOptions: <ImageOptions>{
+    inline: false,
+    HTMLAttributes: {},
+  },
+
+  inline() {
+    return this.options.inline
+  },
+
+  group() {
+    return this.options.inline ? 'inline' : 'block'
+  },
+
+  draggable: true,
+
+  addAttributes() {
+    return {
+      src: {
+        default: null,
+      },
+      alt: {
+        default: null,
+      },
+      title: {
+        default: null,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'img[src]',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['img', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)]
+  },
+
+  addCommands() {
+    return {
+      /**
+       * Add an image
+       */
+      setImage: (options: { src: string, alt?: string, title?: string }): Command => ({ tr, dispatch }) => {
+        const { selection } = tr
+        const node = this.type.create(options)
+
+        if (dispatch) {
+          tr.replaceRangeWith(selection.from, selection.to, node)
+        }
+
+        return true
+      },
+    }
+  },
+
+  addInputRules() {
+    return [
+      nodeInputRule(inputRegex, this.type, match => {
+        const [, alt, src, title] = match
+
+        return { src, alt, title }
+      }),
+    ]
+  },
+})
+
+export default Image
+
+declare module '@tiptap/core' {
+  interface AllExtensions {
+    Image: typeof Image,
+  }
+}