@seorii/tiptap 0.0.1

package/dist/plugin/table/style/table.scss

@@ -0,0 +1,83 @@
+.ProseMirror {
+  .tableWrapper {
+    position: relative;
+    margin-top: 0.75em;
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+    transition: all 0.1s ease-in-out;
+  }
+
+  .scrollable {
+    padding-left: 1em;
+    margin-left: -1em;
+    overflow: auto hidden;
+    border-left: 1px solid transparent;
+    border-right: 1px solid transparent;
+    transition: border 250ms ease-in-out 0s;
+  }
+
+  .scrollable-shadow {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: -1em;
+    width: 16px;
+    transition: box-shadow 250ms ease-in-out 0s;
+    border-width: 0 0 0 1em;
+    border-style: solid;
+    border-color: transparent;
+    border-image: initial;
+    pointer-events: none;
+
+    &.left {
+      box-shadow: 16px 0 16px -16px inset rgb(0 0 0 / 25%);
+    }
+
+    &.right {
+      right: 0;
+      left: auto;
+      box-shadow: rgb(0 0 0 / 25%) -16px 0 16px -16px inset;
+
+      &.is-editable {
+        &::after {
+          position: absolute;
+          top: 0;
+          right: 0;
+          width: 1em;
+          height: 1em;
+          background-color: var(--semi-color-nav-bg);
+          content: '';
+        }
+      }
+    }
+  }
+
+  table {
+    margin-top: 1em;
+    border-radius: 4px;
+    border-collapse: collapse;
+    box-sizing: border-box;
+    width: 100% !important;
+
+    h1, h2, h3, p {
+      margin: 0;
+    }
+
+    &.is-readonly {
+      margin-top: 0;
+    }
+  }
+}
+
+.editor {
+  .ProseMirror {
+    .tableWrapper {
+      padding: 10px;
+    }
+
+    .selectedCell {
+      border-style: double;
+      background: var(--primary-light3);
+    }
+  }
+}

package/dist/plugin/table/style/theme.scss

@@ -0,0 +1,6 @@
+$highlight-color: #00bcd4;
+
+.ProseMirror {
+  --highlight-color: #{$highlight-color};
+  --highlight-bg-color: #{$highlight-color}33;
+}

package/dist/plugin/table/style.scss

@@ -0,0 +1,5 @@
+@import './style/grip';
+@import './style/table';
+@import './style/theme';
+@import './style/cell';
+@import './style/resize';

package/dist/plugin/table/tableCell/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("@tiptap/core").Node<import("@tiptap/extension-table-cell").TableCellOptions, any>;
+export default _default;

package/dist/plugin/table/tableCell/index.js

@@ -0,0 +1,80 @@
+import { TableCell as BuiltInTableCell } from '@tiptap/extension-table-cell';
+import { Plugin } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { getCellsInColumn, isRowSelected, isTableSelected, selectRow, selectTable } from '../util';
+export default BuiltInTableCell.extend({
+    addAttributes() {
+        return {
+            colspan: { default: 1 },
+            rowspan: { default: 1 },
+            colwidth: {
+                default: null,
+                parseHTML: (element) => {
+                    const colwidth = element.getAttribute('colwidth');
+                    return colwidth ? colwidth.split(',').map((item) => parseInt(item, 10)) : null;
+                },
+            },
+            style: { default: null },
+        };
+    },
+    addProseMirrorPlugins() {
+        const { isEditable } = this.editor;
+        return [
+            new Plugin({
+                props: {
+                    decorations: (state) => {
+                        if (!isEditable) {
+                            //return DecorationSet.empty;
+                        }
+                        const { doc, selection } = state;
+                        const decorations = [];
+                        const cells = getCellsInColumn(0)(selection);
+                        if (cells) {
+                            cells.forEach(({ pos }, index) => {
+                                if (index === 0) {
+                                    decorations.push(Decoration.widget(pos + 1, () => {
+                                        let className = 'grip-table';
+                                        const selected = isTableSelected(selection);
+                                        if (selected)
+                                            className += ' selected';
+                                        const grip = document.createElement('a');
+                                        grip.className = className;
+                                        grip.addEventListener('mousedown', (event) => {
+                                            event.preventDefault();
+                                            event.stopImmediatePropagation();
+                                            this.editor.view.dispatch(selectTable(this.editor.state.tr));
+                                            // this.options.onSelectTable(state);
+                                        });
+                                        return grip;
+                                    }));
+                                }
+                                decorations.push(Decoration.widget(pos + 1, () => {
+                                    const rowSelected = isRowSelected(index)(selection);
+                                    let className = 'grip-row';
+                                    if (rowSelected) {
+                                        className += ' selected';
+                                    }
+                                    if (index === 0) {
+                                        className += ' first';
+                                    }
+                                    if (index === cells.length - 1) {
+                                        className += ' last';
+                                    }
+                                    const grip = document.createElement('a');
+                                    grip.className = className;
+                                    grip.addEventListener('mousedown', (event) => {
+                                        event.preventDefault();
+                                        event.stopImmediatePropagation();
+                                        this.editor.view.dispatch(selectRow(index)(this.editor.state.tr));
+                                    });
+                                    return grip;
+                                }));
+                            });
+                        }
+                        return DecorationSet.create(doc, decorations);
+                    },
+                },
+            }),
+        ];
+    },
+});

package/dist/plugin/table/tableHeader/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("@tiptap/core").Node<import("@tiptap/extension-table-header").TableHeaderOptions, any>;
+export default _default;

package/dist/plugin/table/tableHeader/index.js

@@ -0,0 +1,59 @@
+import { TableHeader as BuiltInTableHeader } from '@tiptap/extension-table-header';
+import { Plugin } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { getCellsInRow, isColumnSelected, selectColumn } from '../util';
+export default BuiltInTableHeader.extend({
+    addAttributes() {
+        return {
+            colspan: { default: 1 },
+            rowspan: { default: 1 },
+            colwidth: {
+                default: null,
+                parseHTML: (element) => {
+                    const colwidth = element.getAttribute('colwidth');
+                    return colwidth ? colwidth.split(',').map((item) => parseInt(item, 10)) : null;
+                },
+            },
+            style: { default: null },
+        };
+    },
+    addProseMirrorPlugins() {
+        const { isEditable } = this.editor;
+        return [
+            new Plugin({
+                props: {
+                    decorations: (state) => {
+                        if (!isEditable)
+                            return DecorationSet.empty;
+                        const { doc, selection } = state;
+                        const decorations = [];
+                        const cells = getCellsInRow(0)(selection);
+                        if (cells) {
+                            cells.forEach(({ pos }, index) => {
+                                decorations.push(Decoration.widget(pos + 1, () => {
+                                    const colSelected = isColumnSelected(index)(selection);
+                                    let className = 'grip-column';
+                                    if (colSelected)
+                                        className += ' selected';
+                                    if (index === 0)
+                                        className += ' first';
+                                    else if (index === cells.length - 1)
+                                        className += ' last';
+                                    const grip = document.createElement('a');
+                                    grip.className = className;
+                                    grip.addEventListener('mousedown', (event) => {
+                                        event.preventDefault();
+                                        event.stopImmediatePropagation();
+                                        this.editor.view.dispatch(selectColumn(index)(this.editor.state.tr));
+                                    });
+                                    return grip;
+                                }));
+                            });
+                        }
+                        return DecorationSet.create(doc, decorations);
+                    },
+                },
+            }),
+        ];
+    },
+});

package/dist/plugin/table/tableRow/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("@tiptap/core").Node<import("@tiptap/extension-table-row").TableRowOptions, any>;
+export default _default;

package/dist/plugin/table/tableRow/index.js

@@ -0,0 +1,4 @@
+import { TableRow as BuiltInTableRow } from '@tiptap/extension-table-row';
+export default BuiltInTableRow.extend({
+    allowGapCursor: false,
+});

package/dist/plugin/table/util.d.ts

@@ -0,0 +1,46 @@
+import type { Node, ResolvedPos } from 'prosemirror-model';
+import type { Selection, Transaction } from 'prosemirror-state';
+import { CellSelection, type TableRect } from 'prosemirror-tables';
+import type { EditorState } from "prosemirror-state";
+export declare const isRectSelected: (rect: any) => (selection: CellSelection) => boolean;
+export declare const findTable: (selection: Selection) => {
+    pos: number;
+    start: number;
+    depth: number;
+    node: Node;
+} | undefined;
+export declare const isCellSelection: (selection: any) => boolean;
+export declare const isColumnSelected: (columnIndex: number) => (selection: any) => boolean;
+export declare const isRowSelected: (rowIndex: number) => (selection: any) => boolean;
+export declare const isTableSelected: (selection: any) => boolean;
+export declare const getCellsInColumn: (columnIndex: number | number[]) => (selection: Selection) => {
+    pos: number;
+    start: number;
+    node: Node | null | undefined;
+}[] | undefined;
+export declare const getCellsInRow: (rowIndex: number | number[]) => (selection: Selection) => {
+    pos: number;
+    start: number;
+    node: Node | null | undefined;
+}[] | undefined;
+export declare const getCellsInTable: (selection: Selection) => {
+    pos: number;
+    start: number;
+    node: Node | null;
+}[] | undefined;
+export declare const findParentNodeClosestToPos: ($pos: ResolvedPos, predicate: (node: Node) => boolean) => {
+    pos: number;
+    start: number;
+    depth: number;
+    node: Node;
+} | undefined;
+export declare const findCellClosestToPos: ($pos: ResolvedPos) => {
+    pos: number;
+    start: number;
+    depth: number;
+    node: Node;
+} | undefined;
+export declare const selectColumn: (index: number) => (tr: Transaction) => Transaction;
+export declare const selectRow: (index: number) => (tr: Transaction) => Transaction;
+export declare const selectTable: (tr: Transaction) => Transaction;
+export declare function tableRect(state: EditorState): TableRect;

package/dist/plugin/table/util.js

@@ -0,0 +1,195 @@
+import { findParentNode } from '@tiptap/core';
+import { CellSelection, selectionCell, TableMap } from 'prosemirror-tables';
+export const isRectSelected = (rect) => (selection) => {
+    const map = TableMap.get(selection.$anchorCell.node(-1));
+    const start = selection.$anchorCell.start(-1);
+    const cells = map.cellsInRect(rect);
+    const selectedCells = map.cellsInRect(map.rectBetween(selection.$anchorCell.pos - start, selection.$headCell.pos - start));
+    for (let i = 0, count = cells.length; i < count; i++) {
+        if (selectedCells.indexOf(cells[i]) === -1) {
+            return false;
+        }
+    }
+    return true;
+};
+export const findTable = (selection) => findParentNode((node) => node.type.spec.tableRole && node.type.spec.tableRole === 'table')(selection);
+export const isCellSelection = (selection) => {
+    return selection instanceof CellSelection;
+};
+export const isColumnSelected = (columnIndex) => (selection) => {
+    if (isCellSelection(selection)) {
+        const map = TableMap.get(selection.$anchorCell.node(-1));
+        return isRectSelected({
+            left: columnIndex,
+            right: columnIndex + 1,
+            top: 0,
+            bottom: map.height,
+        })(selection);
+    }
+    return false;
+};
+export const isRowSelected = (rowIndex) => (selection) => {
+    if (isCellSelection(selection)) {
+        const map = TableMap.get(selection.$anchorCell.node(-1));
+        return isRectSelected({
+            left: 0,
+            right: map.width,
+            top: rowIndex,
+            bottom: rowIndex + 1,
+        })(selection);
+    }
+    return false;
+};
+export const isTableSelected = (selection) => {
+    if (isCellSelection(selection)) {
+        const map = TableMap.get(selection.$anchorCell.node(-1));
+        return isRectSelected({
+            left: 0,
+            right: map.width,
+            top: 0,
+            bottom: map.height,
+        })(selection);
+    }
+    return false;
+};
+export const getCellsInColumn = (columnIndex) => (selection) => {
+    const table = findTable(selection);
+    if (table) {
+        const map = TableMap.get(table.node);
+        const indexes = Array.isArray(columnIndex) ? columnIndex : Array.from([columnIndex]);
+        return indexes.reduce((acc, index) => {
+            if (index >= 0 && index <= map.width - 1) {
+                const cells = map.cellsInRect({
+                    left: index,
+                    right: index + 1,
+                    top: 0,
+                    bottom: map.height,
+                });
+                return acc.concat(cells.map((nodePos) => {
+                    const node = table.node.nodeAt(nodePos);
+                    const pos = nodePos + table.start;
+                    return { pos, start: pos + 1, node };
+                }));
+            }
+            return acc;
+        }, []);
+    }
+};
+export const getCellsInRow = (rowIndex) => (selection) => {
+    const table = findTable(selection);
+    if (table) {
+        const map = TableMap.get(table.node);
+        const indexes = Array.isArray(rowIndex) ? rowIndex : Array.from([rowIndex]);
+        return indexes.reduce((acc, index) => {
+            if (index >= 0 && index <= map.height - 1) {
+                const cells = map.cellsInRect({
+                    left: 0,
+                    right: map.width,
+                    top: index,
+                    bottom: index + 1,
+                });
+                return acc.concat(cells.map((nodePos) => {
+                    const node = table.node.nodeAt(nodePos);
+                    const pos = nodePos + table.start;
+                    return { pos, start: pos + 1, node };
+                }));
+            }
+            return acc;
+        }, []);
+    }
+};
+export const getCellsInTable = (selection) => {
+    const table = findTable(selection);
+    if (table) {
+        const map = TableMap.get(table.node);
+        const cells = map.cellsInRect({
+            left: 0,
+            right: map.width,
+            top: 0,
+            bottom: map.height,
+        });
+        return cells.map((nodePos) => {
+            const node = table.node.nodeAt(nodePos);
+            const pos = nodePos + table.start;
+            return { pos, start: pos + 1, node };
+        });
+    }
+};
+export const findParentNodeClosestToPos = ($pos, predicate) => {
+    for (let i = $pos.depth; i > 0; i--) {
+        const node = $pos.node(i);
+        if (predicate(node)) {
+            return {
+                pos: i > 0 ? $pos.before(i) : 0,
+                start: $pos.start(i),
+                depth: i,
+                node,
+            };
+        }
+    }
+};
+export const findCellClosestToPos = ($pos) => {
+    const predicate = (node) => node.type.spec.tableRole && /cell/i.test(node.type.spec.tableRole);
+    return findParentNodeClosestToPos($pos, predicate);
+};
+const select = (type) => (index) => (tr) => {
+    const table = findTable(tr.selection);
+    const isRowSelection = type === 'row';
+    if (table) {
+        const map = TableMap.get(table.node);
+        // Check if the index is valid
+        if (index >= 0 && index < (isRowSelection ? map.height : map.width)) {
+            const left = isRowSelection ? 0 : index;
+            const top = isRowSelection ? index : 0;
+            const right = isRowSelection ? map.width : index + 1;
+            const bottom = isRowSelection ? index + 1 : map.height;
+            const cellsInFirstRow = map.cellsInRect({
+                left,
+                top,
+                right: isRowSelection ? right : left + 1,
+                bottom: isRowSelection ? top + 1 : bottom,
+            });
+            const cellsInLastRow = bottom - top === 1
+                ? cellsInFirstRow
+                : map.cellsInRect({
+                    left: isRowSelection ? left : right - 1,
+                    top: isRowSelection ? bottom - 1 : top,
+                    right,
+                    bottom,
+                });
+            const head = table.start + cellsInFirstRow[0];
+            const anchor = table.start + cellsInLastRow[cellsInLastRow.length - 1];
+            const $head = tr.doc.resolve(head);
+            const $anchor = tr.doc.resolve(anchor);
+            // @ts-ignore
+            return tr.setSelection(new CellSelection($anchor, $head));
+        }
+    }
+    return tr;
+};
+export const selectColumn = select('column');
+export const selectRow = select('row');
+export const selectTable = (tr) => {
+    const table = findTable(tr.selection);
+    if (table) {
+        const { map } = TableMap.get(table.node);
+        if (map && map.length) {
+            const head = table.start + map[0];
+            const anchor = table.start + map[map.length - 1];
+            const $head = tr.doc.resolve(head);
+            const $anchor = tr.doc.resolve(anchor);
+            // @ts-ignore
+            return tr.setSelection(new CellSelection($anchor, $head));
+        }
+    }
+    return tr;
+};
+export function tableRect(state) {
+    const sel = state.selection;
+    const $pos = selectionCell(state);
+    const table = $pos.node(-1);
+    const tableStart = $pos.start(-1);
+    const map = TableMap.get(table);
+    const rect = map.rectBetween(sel.$anchorCell.pos - tableStart, sel.$headCell.pos - tableStart);
+    return { ...rect, tableStart, map, table };
+}

package/dist/tiptap/TipTap.svelte

@@ -0,0 +1,144 @@
+<script>import { browser } from "$app/environment";
+import { onMount, setContext } from 'svelte';
+import { Card, Input } from "nunui";
+import { writable } from "svelte/store";
+import "tiptap-katex/style.css";
+import sanitizeHtml from 'sanitize-html';
+const san = (body, force = false) => (editor || force) ? body : sanitizeHtml(body, {
+    allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img', 'math-inline', 'iframe', 'tiptap-file']),
+    allowedStyles: '*', allowedAttributes: {
+        '*': ['style', 'class'],
+        a: ['href', 'name', 'target'],
+        img: ['src', 'srcset', 'alt', 'title', 'width', 'height', 'loading'],
+        iframe: ['src', 'width', 'height', 'frameborder', 'allowfullscreen'],
+        'tiptap-file': ['id']
+    },
+});
+export let body = '', editor = false, style = '';
+const tiptap = setContext('editor', writable(null));
+let element, _body = san(body, true), fullscreen = false, html = false, mounted = false;
+$: _san = san(body);
+$: if (_san !== _body && $tiptap)
+    $tiptap?.commands.setContent(_body = _san);
+if (browser)
+    onMount(() => {
+        mounted = true;
+        import('./tiptap').then(({ default: tt }) => {
+            if (!mounted)
+                return;
+            $tiptap = tt(element, _body, {
+                editable: editor,
+                onTransaction: () => $tiptap = $tiptap,
+            });
+            $tiptap.on('update', ({ editor: tiptap }) => _body = body = editor ? tiptap.getHTML() : body);
+        });
+        return () => {
+            mounted = false;
+            $tiptap?.destroy?.();
+        };
+    });
+</script>
+
+<Card outlined={editor}
+      style="max-width:100%;margin-top:0;{editor ? '' : 'box-shadow:none;padding:0;border-radius:0;'}{style}">
+    <main class:fullscreen class:editor>
+        <div class="wrapper">
+            <div bind:this={element} class:hide={html} class="target"></div>
+            {#if !$tiptap}
+                로드 중...
+            {/if}
+            <div class:hide={!html}>
+                <Input multiline fullWidth placeholder="HTML" bind:value={body}/>
+            </div>
+        </div>
+    </main>
+</Card>
+
+<style>main {
+  position: relative;
+  overscroll-behavior: none;
+}
+main.fullscreen {
+  z-index: 9999999;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: var(--surface);
+  padding: 82px 12px 12px 12px;
+  width: calc(100% - 24px);
+  height: calc(100% - 94px);
+}
+main .wrapper {
+  position: relative;
+}
+main .wrapper .hide {
+  display: none;
+}
+
+.target > :global(div) > :global(*:first-child) {
+  margin-top: 0 !important;
+}
+.target > :global(div) > :global(*:last-child) {
+  margin-bottom: 0 !important;
+}
+
+.editor :global(.ProseMirror-selectednode img) {
+  transition: all 0.2s ease-in-out;
+  filter: drop-shadow(0 0 0.75rem var(--primary-light13));
+}
+
+.editor .iframe-wrapper.ProseMirror-selectednode {
+  outline: 3px solid var(--primary);
+}
+
+div > :global(div) {
+  outline: none !important;
+}
+div > :global(div) :global(.ProseMirror) :global(p.is-editor-empty:first-child::before) {
+  color: #adb5bd;
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+div > :global(div) :global(img) {
+  transition: all 0.2s ease-in-out;
+  max-width: 100%;
+  border-radius: 12px;
+  position: relative;
+}
+div > :global(div) :global(pre) {
+  background: var(--primary-light1);
+  padding: 12px;
+  border-radius: 12px;
+  max-width: 100%;
+}
+div > :global(div) :global(table) {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 8px 0;
+  border: 1px solid var(--primary-light1);
+  border-radius: 12px;
+}
+div > :global(div) :global(table) :global(th), div > :global(div) :global(table) :global(td) {
+  padding: 8px;
+  border: 1px solid var(--primary-light1);
+}
+div > :global(div) :global(.math-render) {
+  cursor: initial;
+}
+div > :global(div) :global(.iframe-wrapper) {
+  position: relative;
+  padding-bottom: 12px;
+  overflow: hidden;
+  width: 100%;
+  height: 600px;
+  border-radius: 12px;
+}
+div > :global(div) :global(.iframe-wrapper) :global(iframe) {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}</style>

package/dist/tiptap/TipTap.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import "tiptap-katex/style.css";
+declare const __propDef: {
+    props: {
+        body?: string | undefined;
+        editor?: boolean | undefined;
+        style?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TipTapProps = typeof __propDef.props;
+export type TipTapEvents = typeof __propDef.events;
+export type TipTapSlots = typeof __propDef.slots;
+export default class TipTap extends SvelteComponentTyped<TipTapProps, TipTapEvents, TipTapSlots> {
+}
+export {};

package/dist/tiptap/index.d.ts

@@ -0,0 +1,2 @@
+export default TipTap;
+import TipTap from "./TipTap.svelte";

package/dist/tiptap/index.js

@@ -0,0 +1,3 @@
+import TipTap from "./TipTap.svelte";
+
+export default TipTap;

package/dist/tiptap/tiptap.d.ts

@@ -0,0 +1,3 @@
+import { Editor } from "@tiptap/core";
+declare const _default: (element: Element, content: string, { placeholder, ...props }?: any) => Editor;
+export default _default;