@seorii/tiptap 0.4.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/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

@@ -248,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/resize/index.js

@@ -158,7 +158,8 @@ function buildResizeAttrs(kind, node, height, imageRatio) {
     const roundedHeight = String(Math.round(height));
     if (kind === 'image') {
         const roundedWidth = String(Math.max(1, Math.round(height * imageRatio)));
-        return { ...attrs, width: roundedWidth, height: roundedHeight };
+        // Keep image responsive by storing width only; fixed height causes ratio distortion on narrow layouts.
+        return { ...attrs, width: roundedWidth, height: null };
     }
     if (kind === 'iframe' || kind === 'embed') {
         return { ...attrs, width: attrs.width || '100%', height: roundedHeight };

package/dist/tiptap/TipTap.svelte

@@ -410,6 +410,7 @@
 		& :global(img) {
 			transition: all 0.2s ease-in-out;
 			max-width: 100%;
+			object-fit: contain;
 			border-radius: 12px;
 			position: relative;
 		}

package/dist/tiptap/tiptap.js

@@ -26,6 +26,7 @@ import UploadSkeleton from '../plugin/upload/skeleton';
 import { MathInline, MathBlock } from '@seorii/prosemirror-math/tiptap';
 import Youtube from '../plugin/youtube';
 import Placeholder from '@tiptap/extension-placeholder';
+import columns from '../plugin/columns';
 import command from '../plugin/command/suggest';
 import emoji from '../plugin/command/emoji';
 import { countSlashItems, moveSlashSelection, runSlashItemAt, slashState } from '../plugin/command/stores.svelte';
@@ -239,6 +240,7 @@ const extensions = (placeholder, plugins, crossorigin, codeBlockLanguageLabels)
     orderedlist,
     MathInline,
     MathBlock,
+    ...columns,
     table,
     tableHeader,
     tableRow,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@seorii/tiptap",
-	"version": "0.4.0",
+	"version": "0.4.1",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "svelte-kit sync && svelte-package",