@seorii/tiptap 0.3.0 → 0.4.1

package/dist/i18n/en-us/index.d.ts

@@ -24,6 +24,8 @@ declare const _default: {
     codeBlock: string;
     mathBlock: string;
     table: string;
+    twoColumns: string;
+    threeColumns: string;
     image: string;
     iframe: string;
     youtube: string;
@@ -36,6 +38,8 @@ declare const _default: {
     codeBlockInfo: string;
     mathBlockInfo: string;
     tableInfo: string;
+    twoColumnsInfo: string;
+    threeColumnsInfo: string;
     imageInfo: string;
     iframeInfo: string;
     youtubeInfo: string;

package/dist/i18n/en-us/index.js

@@ -24,6 +24,8 @@ export default {
     codeBlock: 'Code block',
     mathBlock: 'Math block',
     table: 'Table',
+    twoColumns: '2 Columns',
+    threeColumns: '3 Columns',
     image: 'Image',
     iframe: 'iframe',
     youtube: 'Youtube',
@@ -36,6 +38,8 @@ export default {
     codeBlockInfo: 'Code block with syntax highlighting',
     mathBlockInfo: 'Math block',
     tableInfo: 'Table',
+    twoColumnsInfo: 'Two-column layout',
+    threeColumnsInfo: 'Three-column layout',
     imageInfo: 'Image',
     iframeInfo: 'Embed another website',
     youtubeInfo: 'Embed Youtube video',

package/dist/i18n/index.d.ts

@@ -24,6 +24,8 @@ declare const locales: readonly [{
     codeBlock: string;
     mathBlock: string;
     table: string;
+    twoColumns: string;
+    threeColumns: string;
     image: string;
     iframe: string;
     youtube: string;
@@ -36,6 +38,8 @@ declare const locales: readonly [{
     codeBlockInfo: string;
     mathBlockInfo: string;
     tableInfo: string;
+    twoColumnsInfo: string;
+    threeColumnsInfo: string;
     imageInfo: string;
     iframeInfo: string;
     youtubeInfo: string;
@@ -69,6 +73,8 @@ declare const locales: readonly [{
     codeBlock: string;
     mathBlock: string;
     table: string;
+    twoColumns: string;
+    threeColumns: string;
     image: string;
     iframe: string;
     youtube: string;
@@ -81,6 +87,8 @@ declare const locales: readonly [{
     codeBlockInfo: string;
     mathBlockInfo: string;
     tableInfo: string;
+    twoColumnsInfo: string;
+    threeColumnsInfo: string;
     imageInfo: string;
     iframeInfo: string;
     youtubeInfo: string;

package/dist/i18n/ko-kr/index.d.ts

@@ -24,6 +24,8 @@ declare const _default: {
     codeBlock: string;
     mathBlock: string;
     table: string;
+    twoColumns: string;
+    threeColumns: string;
     image: string;
     iframe: string;
     youtube: string;
@@ -36,6 +38,8 @@ declare const _default: {
     codeBlockInfo: string;
     mathBlockInfo: string;
     tableInfo: string;
+    twoColumnsInfo: string;
+    threeColumnsInfo: string;
     imageInfo: string;
     iframeInfo: string;
     youtubeInfo: string;

package/dist/i18n/ko-kr/index.js

@@ -24,6 +24,8 @@ export default {
     codeBlock: '코드 블록',
     mathBlock: '수식 블록',
     table: '테이블',
+    twoColumns: '2열',
+    threeColumns: '3열',
     image: '이미지',
     iframe: 'iframe',
     youtube: '유튜브',
@@ -36,6 +38,8 @@ export default {
     codeBlockInfo: '하이라이팅되는 코드 블록',
     mathBlockInfo: '가운데로 정렬되는 수식 블록',
     tableInfo: '표 삽입',
+    twoColumnsInfo: '2열 레이아웃',
+    threeColumnsInfo: '3열 레이아웃',
     imageInfo: '이미지',
     iframeInfo: '다른 웹사이트 삽입',
     youtubeInfo: 'Youtube 동영상 삽입',

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export default TipTap;
-export { getDetail };
 import TipTap from './tiptap/index.js';
 import { getDetail } from './plugin/command/suggest.js';
+import { insertUploadSkeleton } from './plugin/upload/skeleton/index.js';
+export { getDetail, insertUploadSkeleton };

package/dist/index.js

@@ -1,6 +1,7 @@
 // Reexport your entry components here
 import TipTap from './tiptap/index.js';
 import { getDetail } from './plugin/command/suggest.js';
+import { insertUploadSkeleton } from './plugin/upload/skeleton/index.js';
 
 export default TipTap;
-export { getDetail };
+export { getDetail, insertUploadSkeleton };

package/dist/plugin/columns/index.d.ts

@@ -0,0 +1,14 @@
+import { Node } from '@tiptap/core';
+import './style.css';
+type ColumnCount = 2 | 3;
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        columnLayout: {
+            setColumns: (count: ColumnCount) => ReturnType;
+            setTwoColumns: () => ReturnType;
+            setThreeColumns: () => ReturnType;
+        };
+    }
+}
+declare const _default: Node<any, any>[];
+export default _default;

package/dist/plugin/columns/index.js

@@ -0,0 +1,88 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+import './style.css';
+const normalizeColumnCount = (value) => (Number(value) === 3 ? 3 : 2);
+const Column = Node.create({
+    name: 'column',
+    content: 'block+',
+    isolating: true,
+    defining: true,
+    addOptions() {
+        return {
+            HTMLAttributes: {}
+        };
+    },
+    parseHTML() {
+        return [{ tag: 'div.tiptap-column' }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return [
+            'div',
+            mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+                class: 'tiptap-column'
+            }),
+            0
+        ];
+    }
+});
+const Columns = Node.create({
+    name: 'columns',
+    group: 'block',
+    content: 'column{2,3}',
+    isolating: true,
+    defining: true,
+    draggable: true,
+    addOptions() {
+        return {
+            HTMLAttributes: {}
+        };
+    },
+    addAttributes() {
+        return {
+            count: {
+                default: 2,
+                parseHTML: (element) => {
+                    if (!(element instanceof HTMLElement))
+                        return 2;
+                    if (element.classList.contains('columns-3'))
+                        return 3;
+                    if (element.classList.contains('columns-2'))
+                        return 2;
+                    const columnCount = Array.from(element.children).filter((child) => child instanceof HTMLElement && child.classList.contains('tiptap-column')).length;
+                    return columnCount >= 3 ? 3 : 2;
+                },
+                renderHTML: () => ({})
+            }
+        };
+    },
+    parseHTML() {
+        return [{ tag: 'div.tiptap-columns' }];
+    },
+    renderHTML({ node, HTMLAttributes }) {
+        const count = normalizeColumnCount(node.attrs.count);
+        return [
+            'div',
+            mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+                class: `tiptap-columns columns-${count}`
+            }),
+            0
+        ];
+    },
+    addCommands() {
+        return {
+            setColumns: (count) => ({ commands }) => {
+                const normalizedCount = normalizeColumnCount(count);
+                return commands.insertContent({
+                    type: this.name,
+                    attrs: { count: normalizedCount },
+                    content: Array.from({ length: normalizedCount }, () => ({
+                        type: 'column',
+                        content: [{ type: 'paragraph' }]
+                    }))
+                });
+            },
+            setTwoColumns: () => ({ commands }) => commands.setColumns(2),
+            setThreeColumns: () => ({ commands }) => commands.setColumns(3)
+        };
+    }
+});
+export default [Columns, Column];

package/dist/plugin/columns/style.css

@@ -0,0 +1,37 @@
+.tiptap-columns {
+	display: grid;
+	gap: 12px;
+	margin: 12px 0;
+}
+
+.tiptap-columns.columns-2 {
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.tiptap-columns.columns-3 {
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.tiptap-column {
+	min-width: 0;
+	padding: 10px 12px;
+	border: 0;
+	border-radius: 10px;
+	background: transparent;
+}
+
+.tiptap-column > :first-child {
+	margin-top: 0;
+}
+
+.tiptap-column > :last-child {
+	margin-bottom: 0;
+}
+
+.editable .tiptap-column {
+	border: 1px dashed var(--primary-light3, rgba(112, 112, 112, 0.35));
+}
+
+.editable .tiptap-column:hover {
+	border-color: var(--primary-light7, rgba(112, 112, 112, 0.65));
+}

package/dist/plugin/command/suggest.js

@@ -3,6 +3,7 @@ import i18n from '../../i18n';
 import enUs from '../../i18n/en-us/index';
 import koKr from '../../i18n/ko-kr/index';
 import { fallbackUpload, releaseObjectUrlOnImageSettled } from '../image/dragdrop';
+import { insertUploadSkeleton } from '../upload/skeleton';
 import { PluginKey, TextSelection } from '@tiptap/pm/state';
 import Suggestion, {} from '@tiptap/suggestion';
 const normalizeSearch = (value) => value.toLowerCase().trim();
@@ -156,10 +157,27 @@ export const suggest = {
                                 const file = input.files[0];
                                 if (!file)
                                     return;
-                                const upload = window.__image_uploader ?? fallbackUpload;
-                                const src = await upload(file);
-                                editor.chain().focus().deleteRange(range).setImage({ src }).run();
-                                releaseObjectUrlOnImageSettled(editor.view, src);
+                                const skeleton = insertUploadSkeleton(editor, {
+                                    kind: 'image',
+                                    height: 220
+                                });
+                                try {
+                                    const upload = window.__image_uploader ?? fallbackUpload;
+                                    const src = await upload(file);
+                                    if (skeleton) {
+                                        skeleton.replaceWith({
+                                            type: 'image',
+                                            attrs: { src }
+                                        });
+                                    }
+                                    else {
+                                        editor.chain().focus().setImage({ src }).run();
+                                    }
+                                    releaseObjectUrlOnImageSettled(editor.view, src);
+                                }
+                                catch {
+                                    skeleton?.remove();
+                                }
                             };
                             input.click();
                         }
@@ -230,6 +248,24 @@ export const suggest = {
                                 .run();
                         }
                     },
+                    {
+                        icon: 'view_column_2',
+                        title: i18n('twoColumns'),
+                        subtitle: i18n('twoColumnsInfo'),
+                        keywords: createKeywords(['twoColumns', 'twoColumnsInfo'], ['2 columns', 'two columns', 'notion']),
+                        command: ({ editor, range }) => {
+                            editor.chain().focus().deleteRange(fixRange(editor, range)).setTwoColumns().run();
+                        }
+                    },
+                    {
+                        icon: 'view_week',
+                        title: i18n('threeColumns'),
+                        subtitle: i18n('threeColumnsInfo'),
+                        keywords: createKeywords(['threeColumns', 'threeColumnsInfo'], ['3 columns', 'three columns', 'notion']),
+                        command: ({ editor, range }) => {
+                            editor.chain().focus().deleteRange(fixRange(editor, range)).setThreeColumns().run();
+                        }
+                    },
                     {
                         icon: 'format_quote',
                         title: i18n('blockquote'),

package/dist/plugin/embed.js

@@ -34,7 +34,7 @@ export default Node.create({
     renderHTML({ HTMLAttributes }) {
         return [
             'div',
-            this.options.HTMLAttributes,
+            mergeAttributes(this.options.HTMLAttributes, { 'data-bubble-menu': 'false' }),
             ['embed', mergeAttributes(HTMLAttributes, { credentialless: true, crossorigin: 'anonymous' })]
         ];
     },

package/dist/plugin/iframe.js

@@ -31,7 +31,7 @@ export default Node.create({
     renderHTML({ HTMLAttributes }) {
         return [
             'div',
-            this.options.HTMLAttributes,
+            mergeAttributes(this.options.HTMLAttributes, { 'data-bubble-menu': 'false' }),
             [
                 'iframe',
                 mergeAttributes(HTMLAttributes, { credentialless: true, crossorigin: 'anonymous' })

package/dist/plugin/image/dragdrop.js

@@ -1,4 +1,5 @@
 import { Plugin } from 'prosemirror-state';
+import { insertUploadSkeleton } from '../upload/skeleton';
 export const fallbackUpload = async (image) => URL.createObjectURL(image);
 const OBJECT_URL_PREFIX = 'blob:';
 const OBJECT_URL_REVOKE_TIMEOUT_MS = 30_000;
@@ -73,14 +74,31 @@ export const dropImagePlugin = () => {
                         const image = item.getAsFile();
                         if (item.type.indexOf('image') === 0) {
                             event.preventDefault();
+                            const skeleton = insertUploadSkeleton({
+                                state: view.state,
+                                view
+                            }, {
+                                kind: 'image',
+                                height: 220
+                            });
                             if (upload && image) {
-                                upload(image).then((src) => {
-                                    const node = schema.nodes.image.create({
-                                        src: src
-                                    });
-                                    const transaction = view.state.tr.replaceSelectionWith(node);
-                                    view.dispatch(transaction);
+                                upload(image)
+                                    .then((src) => {
+                                    if (skeleton) {
+                                        skeleton.replaceWith({
+                                            type: 'image',
+                                            attrs: { src }
+                                        });
+                                    }
+                                    else {
+                                        const node = schema.nodes.image.create({ src });
+                                        const transaction = view.state.tr.replaceSelectionWith(node);
+                                        view.dispatch(transaction);
+                                    }
                                     releaseObjectUrlOnImageSettled(view, src);
+                                })
+                                    .catch(() => {
+                                    skeleton?.remove();
                                 });
                             }
                         }
@@ -120,20 +138,49 @@ export const dropImagePlugin = () => {
                         return false;
                     images.forEach(async (image) => {
                         const reader = new FileReader();
+                        const skeleton = insertUploadSkeleton({
+                            state: view.state,
+                            view
+                        }, {
+                            kind: 'image',
+                            height: 220,
+                            at: coordinates.pos
+                        });
                         if (upload) {
-                            const src = await upload(image);
-                            const node = schema.nodes.image.create({
-                                src
-                            });
-                            const transaction = view.state.tr.insert(coordinates.pos, node);
-                            view.dispatch(transaction);
-                            releaseObjectUrlOnImageSettled(view, src);
+                            try {
+                                const src = await upload(image);
+                                if (skeleton) {
+                                    skeleton.replaceWith({
+                                        type: 'image',
+                                        attrs: { src }
+                                    });
+                                }
+                                else {
+                                    const node = schema.nodes.image.create({ src });
+                                    const transaction = view.state.tr.insert(coordinates.pos, node);
+                                    view.dispatch(transaction);
+                                }
+                                releaseObjectUrlOnImageSettled(view, src);
+                            }
+                            catch {
+                                skeleton?.remove();
+                            }
                         }
                         else {
                             reader.onload = (readerEvent) => {
-                                const node = schema.nodes.image.create({
-                                    src: readerEvent.target?.result
-                                });
+                                const src = readerEvent.target?.result;
+                                if (typeof src !== 'string') {
+                                    skeleton?.remove();
+                                    return;
+                                }
+                                if (skeleton) {
+                                    skeleton.replaceWith({
+                                        type: 'image',
+                                        attrs: { src }
+                                    });
+                                    return;
+                                }
+                                const node = schema.nodes.image.create({ src });
                                 const transaction = view.state.tr.insert(coordinates.pos, node);
                                 view.dispatch(transaction);
                             };

package/dist/plugin/image/index.js

@@ -14,7 +14,7 @@ export default (crossorigin = 'anonymous') => Image.extend({
         const style = HTMLAttributes.style;
         return [
             'figure',
-            { style },
+            { style, 'data-bubble-menu': 'false' },
             ['img', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)]
         ];
     },

package/dist/plugin/resize/index.d.ts

@@ -0,0 +1,8 @@
+import { Extension } from '@tiptap/core';
+export type ResizeOptions = {
+    attributeTypes: string[];
+    showHandleAlways?: boolean;
+    showHandleOnActive?: boolean;
+};
+declare const _default: Extension<ResizeOptions, any>;
+export default _default;