파일 이식(0.31.1)

hwe/ts/tiptap-ext/BackgroundColor.ts

@@ -0,0 +1,70 @@
+import { Extension } from '@tiptap/core'
+import '@tiptap/extension-text-style'
+
+export type BackgroundColorOptions = {
+    types: string[],
+}
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        backgroundColor: {
+            /**
+             * Set the text color
+             */
+            setBackgroundColor: (color: string) => ReturnType,
+            /**
+             * Unset the text color
+             */
+            unsetBackgroundColor: () => ReturnType,
+        }
+    }
+}
+
+export const BackgroundColor = Extension.create<BackgroundColorOptions>({
+    name: 'backgroundColor',
+
+    addOptions() {
+        return {
+            types: ['textStyle'],
+        }
+    },
+
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    backgroundColor: {
+                        default: null,
+                        parseHTML: element => element.style.backgroundColor.replace(/['"]+/g, ''),
+                        renderHTML: attributes => {
+                            if (!attributes.backgroundColor) {
+                                return {}
+                            }
+
+                            return {
+                                style: `background-color: ${attributes.backgroundColor}`,
+                            }
+                        },
+                    },
+                },
+            },
+        ]
+    },
+
+    addCommands() {
+        return {
+            setBackgroundColor: backgroundColor => ({ chain }) => {
+                return chain()
+                    .setMark('textStyle', { backgroundColor })
+                    .run()
+            },
+            unsetBackgroundColor: () => ({ chain }) => {
+                return chain()
+                    .setMark('textStyle', { backgroundColor: null })
+                    .removeEmptyTextStyle()
+                    .run()
+            },
+        }
+    },
+})

hwe/ts/tiptap-ext/CustomImage.ts

@@ -0,0 +1,90 @@
+import { mergeAttributes } from '@tiptap/core'
+//https://github.com/joevallender/tiptap2-image-example/blob/main/src/extensions/custom-image-3.js
+import Image, { type ImageOptions } from '@tiptap/extension-image'
+
+export interface CustomImageOptions extends ImageOptions {
+    sizes: string[],
+}
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        imageEx: {
+            setImageEx: (options: {
+                src?: string,
+                alt?: string,
+                title?: string,
+                size?: string,
+                align?: string,
+            }) => ReturnType,
+        }
+    }
+}
+
+export default Image.extend<CustomImageOptions>({
+    name: 'custom-image',
+
+    addOptions() {
+        return {
+            ...Image.options,
+            sizes: ['original', 'small', 'medium', 'large'],
+        }
+    },
+    addAttributes() {
+        return {
+            src: {
+                default: null,
+            },
+            alt: {
+                default: null,
+            },
+            title: {
+                default: null,
+            },
+            size: {
+                default: 'original',
+                rendered: false
+            },
+            align: {
+                default: 'center',
+                rendered: false
+            }
+        }
+    },
+
+    addCommands() {
+        return {
+            // This is unchanged from the original
+            // Image setImage function
+            // However, if I extended addComands in
+            // the same way as addAttributes `this`
+            // seemed to lose context, so I've just
+            // copied it in here directly
+            setImageEx: (options) => ({ tr, commands }) => {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                if (tr.selection?.node?.type?.name == 'custom-image') {
+                    return commands.updateAttributes('custom-image', options)
+                }
+                else {
+                    return commands.insertContent({
+                        type: this.name,
+                        attrs: options
+                    })
+                }
+            },
+        }
+    },
+
+    renderHTML({ node, HTMLAttributes }) {
+        // When we render the HTML, grab the
+        // size and add an appropriate
+        // corresponding class
+
+        HTMLAttributes.class = ' custom-image-' + node.attrs.size;
+        HTMLAttributes.class += ' custom-image-align-' + node.attrs.align;
+        return [
+            'img',
+            mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)
+        ]
+    }
+})

hwe/ts/tiptap-ext/FontSize.ts

@@ -0,0 +1,70 @@
+import { Extension } from '@tiptap/core';
+import '@tiptap/extension-text-style';
+
+type FontSizeOptions = {
+    types: string[],
+}
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        fontSize: {
+            /**
+             * Set the font size attribute
+             */
+            setFontSize: (size: string) => ReturnType,
+            /**
+             * Unset the font size attribute
+             */
+            unsetFontSize: () => ReturnType,
+        }
+    }
+}
+
+export const FontSize = Extension.create<FontSizeOptions>({
+    name: 'fontSize',
+
+    addOptions() {
+        return {
+            types: ['textStyle'],
+        }
+    },
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    fontSize: {
+                        default: null,
+                        parseHTML: element => element.style.fontSize.replace(/['"]+/g, ''),
+                        renderHTML: attributes => {
+                            if (!attributes.fontSize) {
+                                return {}
+                            }
+
+                            return {
+                                style: `font-size: ${attributes.fontSize}`,
+                            }
+                        },
+                    },
+                },
+            },
+        ]
+    },
+
+    addCommands() {
+        return {
+            setFontSize: fontSize => ({ chain }) => {
+                return chain()
+                    .setMark('textStyle', { fontSize })
+                    .run()
+            },
+            unsetFontSize: () => ({ chain }) => {
+                return chain()
+                    .setMark('textStyle', { fontSize: null })
+                    .removeEmptyTextStyle()
+                    .run()
+            },
+        }
+    },
+
+});