@seorii/tiptap 0.0.1

package/README.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,4 @@
+// Reexport your entry components here
+import TipTap from "./tiptap";
+
+export default TipTap;

package/dist/plugin/iframe.d.ts

@@ -0,0 +1,18 @@
+import { Node } from '@tiptap/core';
+export interface IframeOptions {
+    allowFullscreen: boolean;
+    HTMLAttributes: {
+        [key: string]: any;
+    };
+}
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        iframe: {
+            setIframe: (options: {
+                src: string;
+            }) => ReturnType;
+        };
+    }
+}
+declare const _default: Node<IframeOptions, any>;
+export default _default;

package/dist/plugin/iframe.js

@@ -0,0 +1,43 @@
+import { mergeAttributes, Node } from '@tiptap/core';
+export default Node.create({
+    name: 'iframe',
+    group: 'block',
+    atom: true,
+    addOptions() {
+        return {
+            allowFullscreen: true,
+            HTMLAttributes: {
+                class: 'iframe-wrapper',
+            },
+        };
+    },
+    addAttributes() {
+        return {
+            src: { default: null },
+            frameborder: { default: 0 },
+            allowfullscreen: {
+                default: this.options.allowFullscreen,
+                parseHTML: () => this.options.allowFullscreen,
+            },
+        };
+    },
+    parseHTML() {
+        return [{
+                tag: 'iframe',
+            }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ['div', this.options.HTMLAttributes, ['iframe', mergeAttributes(HTMLAttributes, { credentialless: true })]];
+    },
+    addCommands() {
+        return {
+            setIframe: (options) => ({ tr, dispatch }) => {
+                const { selection } = tr;
+                const node = this.type.create(options);
+                if (dispatch)
+                    tr.replaceRangeWith(selection.from, selection.to, node);
+                return true;
+            },
+        };
+    },
+});

package/dist/plugin/indent.d.ts

@@ -0,0 +1,20 @@
+import { Extension } from '@tiptap/core';
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        indent: {
+            indent: () => ReturnType;
+            outdent: () => ReturnType;
+        };
+    }
+}
+type IndentOptions = {
+    names: Array<string>;
+    indentRange: number;
+    minIndentLevel: number;
+    maxIndentLevel: number;
+    defaultIndentLevel: number;
+    HTMLAttributes: Record<string, any>;
+};
+export declare const Indent: Extension<IndentOptions, never>;
+export declare const clamp: (val: number, min: number, max: number) => number;
+export {};

package/dist/plugin/indent.js

@@ -0,0 +1,116 @@
+/* eslint-disable no-param-reassign */
+// Sources:
+// https://github.com/ueberdosis/tiptap/issues/1036#issuecomment-981094752
+// https://github.com/django-tiptap/django_tiptap/blob/main/django_tiptap/templates/forms/tiptap_textarea.html#L453-L602
+import { Extension, isList, } from '@tiptap/core';
+import { TextSelection, Transaction } from 'prosemirror-state';
+export const Indent = Extension.create({
+    name: 'indent',
+    addOptions() {
+        return {
+            names: ['heading', 'paragraph'],
+            indentRange: 24,
+            minIndentLevel: 0,
+            maxIndentLevel: 24 * 10,
+            defaultIndentLevel: 0,
+            HTMLAttributes: {},
+        };
+    },
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.names,
+                attributes: {
+                    indent: {
+                        default: this.options.defaultIndentLevel,
+                        renderHTML: (attributes) => ({
+                            style: `margin-left: ${attributes.indent}px!important;`,
+                        }),
+                        parseHTML: (element) => parseInt(element.style.marginLeft, 10) ||
+                            this.options.defaultIndentLevel,
+                    },
+                },
+            },
+        ];
+    },
+    addCommands() {
+        return {
+            indent: () => ({ tr, state, dispatch, editor }) => {
+                const { selection } = state;
+                tr = tr.setSelection(selection);
+                tr = updateIndentLevel(tr, this.options, editor.extensionManager.extensions, 'indent');
+                if (tr.docChanged && dispatch) {
+                    dispatch(tr);
+                    return true;
+                }
+                editor.chain().focus().run();
+                return false;
+            },
+            outdent: () => ({ tr, state, dispatch, editor }) => {
+                const { selection } = state;
+                tr = tr.setSelection(selection);
+                tr = updateIndentLevel(tr, this.options, editor.extensionManager.extensions, 'outdent');
+                if (tr.docChanged && dispatch) {
+                    dispatch(tr);
+                    return true;
+                }
+                editor.chain().focus().run();
+                return false;
+            },
+        };
+    },
+    addKeyboardShortcuts() {
+        return {
+            Tab: indent(),
+            'Shift-Tab': outdent(false),
+            Backspace: outdent(true),
+            'Mod-]': indent(),
+            'Mod-[': outdent(false),
+        };
+    },
+});
+export const clamp = (val, min, max) => {
+    if (val < min)
+        return min;
+    if (val > max)
+        return max;
+    return val;
+};
+function setNodeIndentMarkup(tr, pos, delta, min, max) {
+    if (!tr.doc)
+        return tr;
+    const node = tr.doc.nodeAt(pos);
+    if (!node)
+        return tr;
+    const indent = clamp((node.attrs.indent || 0) + delta, min, max);
+    if (indent === node.attrs.indent)
+        return tr;
+    const nodeAttrs = { ...node.attrs, indent };
+    return tr.setNodeMarkup(pos, node.type, nodeAttrs, node.marks);
+}
+const updateIndentLevel = (tr, options, extensions, type) => {
+    const { doc, selection } = tr;
+    if (!doc || !selection)
+        return tr;
+    if (!(selection instanceof TextSelection))
+        return tr;
+    const { from, to } = selection;
+    doc.nodesBetween(from, to, (node, pos) => {
+        if (options.names.includes(node.type.name)) {
+            tr = setNodeIndentMarkup(tr, pos, options.indentRange * (type === 'indent' ? 1 : -1), options.minIndentLevel, options.maxIndentLevel);
+            return false;
+        }
+        return !isList(node.type.name, extensions);
+    });
+    return tr;
+};
+const indent = () => ({ editor }) => {
+    if (!isList(editor.state.doc.type.name, editor.extensionManager.extensions))
+        return editor.commands.indent();
+    return false;
+};
+const outdent = (outdentOnlyAtHead) => ({ editor }) => {
+    if (!(isList(editor.state.doc.type.name, editor.extensionManager.extensions) || (outdentOnlyAtHead && editor.state.selection.$head.parentOffset !== 0)))
+        return editor.commands.outdent();
+    return false;
+};

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

@@ -0,0 +1,3 @@
+import './korean.scss';
+declare const _default: import("@tiptap/core").Node<import("@tiptap/extension-ordered-list").OrderedListOptions, any>;
+export default _default;

package/dist/plugin/orderedlist/index.js

@@ -0,0 +1,81 @@
+import { wrappingInputRule } from "@tiptap/core";
+import OrderedListBase from '@tiptap/extension-ordered-list';
+import toggleList from "./toggleList";
+import './korean.scss';
+export default OrderedListBase.extend({
+    priority: 20,
+    addAttributes() {
+        return {
+            start: {
+                default: 1,
+                parseHTML: (element) => {
+                    return element.hasAttribute('start')
+                        ? parseInt(element.getAttribute('start') || '', 10)
+                        : 1;
+                },
+            },
+            type: {
+                default: '1',
+            }
+        };
+    },
+    addInputRules() {
+        return [
+            wrappingInputRule({
+                find: /^(\d+)\.\s$/,
+                type: this.type,
+                getAttributes: match => ({ start: +match[1], type: '1' }),
+                joinPredicate: (match, node) => node.childCount + node.attrs.start === +match[1],
+            }),
+            wrappingInputRule({
+                find: /^([i])\.\s$/,
+                type: this.type,
+                getAttributes: match => ({ start: 1, type: 'i' }),
+                joinPredicate: (match, node) => node.childCount + node.attrs.start === +match[1],
+            }),
+            wrappingInputRule({
+                find: /^([I])\.\s$/,
+                type: this.type,
+                getAttributes: match => ({ start: 1, type: 'I' }),
+                joinPredicate: (match, node) => node.childCount + node.attrs.start === +match[1],
+            }),
+            wrappingInputRule({
+                find: /^([A-Z])\.\s$/,
+                type: this.type,
+                getAttributes: match => ({ start: match[1].charCodeAt(0) - 64, type: 'A' }),
+                joinPredicate: (match, node) => node.childCount + node.attrs.start === +match[1],
+            }),
+            wrappingInputRule({
+                find: /^([a-z])\.\s$/,
+                type: this.type,
+                getAttributes: match => ({ start: match[1].charCodeAt(0) - 96, type: 'a' }),
+                joinPredicate: (match, node) => node.childCount + node.attrs.start === +match[1],
+            }),
+            wrappingInputRule({
+                find: /^([ㄱ-ㅎ])\.\s$/,
+                type: this.type,
+                getAttributes: match => ({
+                    start: 1 + ['ㄱ', 'ㄴ', 'ㄷ', 'ㄹ', 'ㅁ', 'ㅂ', 'ㅅ', 'ㅇ', 'ㅈ', 'ㅊ', 'ㅋ', 'ㅌ', 'ㅍ', 'ㅎ'].indexOf(match[1]),
+                    type: 'kors'
+                }),
+                joinPredicate: (match, node) => node.childCount + node.attrs.start === +match[1],
+            }),
+            wrappingInputRule({
+                find: /^([가-하])\.\s$/,
+                type: this.type,
+                getAttributes: match => ({
+                    start: 1 + ['가', '나', '다', '라', '마', '바', '사', '아', '자', '차', '카', '타', '파', '하'].indexOf(match[1]),
+                    type: 'korc'
+                }),
+                joinPredicate: (match, node) => node.childCount + node.attrs.start === +match[1],
+            }),
+        ];
+    },
+    addCommands() {
+        return {
+            toggleOrderedList: (option) => (context) => {
+                return toggleList(this.name, this.options.itemTypeName, option)(context);
+            },
+        };
+    },
+});

package/dist/plugin/orderedlist/korean.scss

@@ -0,0 +1,22 @@
+@counter-style kors {
+  system: cyclic;
+  symbols: "ㄱ." "ㄴ." "ㄷ." "ㄹ." "ㅁ." "ㅂ." "ㅅ." "ㅇ." "ㅈ." "ㅊ." "ㅋ." "ㅌ." "ㅍ." "ㅎ.";
+  suffix: " ";
+}
+
+@counter-style korc {
+  system: cyclic;
+  symbols: "가." "나." "다." "라." "마." "바." "사." "아." "자." "차." "카." "타." "파." "하.";
+  suffix: " ";
+}
+
+.ProseMirror {
+  ol[type="kors"] {
+    list-style-type: kors;
+  }
+
+  ol[type="korc"] {
+    list-style-type: korc;
+  }
+}
+

package/dist/plugin/orderedlist/toggleList.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (listTypeOrName: string, itemTypeOrName: string, attrs: any) => ({ editor, tr, state, dispatch, chain, commands, can }: any) => any;
+export default _default;

package/dist/plugin/orderedlist/toggleList.js

@@ -0,0 +1,67 @@
+import { canJoin } from 'prosemirror-transform';
+import { getNodeType, findParentNode, isList } from "@tiptap/core";
+const joinListBackwards = (tr, listType) => {
+    const list = findParentNode(node => node.type === listType)(tr.selection);
+    if (!list)
+        return true;
+    const before = tr.doc.resolve(Math.max(0, list.pos - 1)).before(list.depth);
+    if (before === undefined)
+        return true;
+    const nodeBefore = tr.doc.nodeAt(before);
+    const canJoinBackwards = list.node.type === nodeBefore?.type && canJoin(tr.doc, list.pos);
+    if (!canJoinBackwards)
+        return true;
+    tr.join(list.pos);
+    return true;
+};
+const joinListForwards = (tr, listType) => {
+    const list = findParentNode(node => node.type === listType)(tr.selection);
+    if (!list)
+        return true;
+    const after = tr.doc.resolve(list.start).after(list.depth);
+    if (after === undefined)
+        return true;
+    const nodeAfter = tr.doc.nodeAt(after);
+    const canJoinForwards = list.node.type === nodeAfter?.type && canJoin(tr.doc, after);
+    if (!canJoinForwards)
+        return true;
+    tr.join(after);
+    return true;
+};
+export default (listTypeOrName, itemTypeOrName, attrs) => ({ editor, tr, state, dispatch, chain, commands, can }) => {
+    const { extensions } = editor.extensionManager;
+    const listType = getNodeType(listTypeOrName, state.schema);
+    const itemType = getNodeType(itemTypeOrName, state.schema);
+    const { selection } = state;
+    const { $from, $to } = selection;
+    const range = $from.blockRange($to);
+    if (!range)
+        return false;
+    const parentList = findParentNode(node => isList(node.type.name, extensions))(selection);
+    if (range.depth >= 1 && parentList && range.depth - parentList.depth <= 1) {
+        if (parentList.node.type === listType && parentList?.node?.attrs?.type === attrs?.type)
+            return commands.liftListItem(itemType);
+        if (isList(parentList.node.type.name, extensions)
+            && listType.validContent(parentList.node.content)
+            && dispatch)
+            return chain()
+                .command(() => {
+                tr.setNodeMarkup(parentList.pos, listType, attrs);
+                return true;
+            })
+                .command(() => joinListBackwards(tr, listType))
+                .command(() => joinListForwards(tr, listType))
+                .run();
+    }
+    return chain()
+        .command(() => {
+        const canWrapInList = can().wrapInList(listType, attrs);
+        if (canWrapInList)
+            return true;
+        return commands.clearNodes();
+    })
+        .wrapInList(listType, attrs)
+        .command(() => joinListBackwards(tr, listType))
+        .command(() => joinListForwards(tr, listType))
+        .run();
+};

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

@@ -0,0 +1,3 @@
+import type { KeyboardShortcutCommand } from "@tiptap/core";
+export declare const deleteTable: KeyboardShortcutCommand;
+export default deleteTable;

package/dist/plugin/table/deleteTable.js

@@ -0,0 +1,24 @@
+import { isColumnSelected, isTableSelected } from "./util";
+import { TableMap } from "prosemirror-tables";
+export const deleteTable = ({ editor }) => {
+    const { selection } = editor.state;
+    if (!selection || !selection.$anchorCell)
+        return false;
+    if (isTableSelected(selection))
+        return editor.commands.deleteTable();
+    const { height, width } = TableMap.get(selection.$anchorCell.node(-1));
+    for (let i = width - 1; i >= 0; i--) {
+        if (isColumnSelected(i)(selection)) {
+            editor.commands.deleteColumn();
+            return true;
+        }
+    }
+    for (let i = height - 1; i >= 0; i--) {
+        if (isColumnSelected(i)(selection)) {
+            editor.commands.deleteRow();
+            return true;
+        }
+    }
+    return false;
+};
+export default deleteTable;

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

@@ -0,0 +1,3 @@
+import './style.scss';
+declare const _default: import("@tiptap/core").Node<import("@tiptap/extension-table").TableOptions, any>;
+export default _default;

package/dist/plugin/table/index.js

@@ -0,0 +1,69 @@
+import BuiltInTable from '@tiptap/extension-table';
+import { Plugin } from 'prosemirror-state';
+import { tableEditing, columnResizing } from 'prosemirror-tables';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import deleteTable from './deleteTable';
+import './style.scss';
+export default BuiltInTable.extend({
+    renderHTML() {
+        return [
+            'div',
+            { class: 'node-table' },
+            ['div', { class: `scrollable` }, ['table', { class: `as-table render-wrapper` }, ['tbody', 0]]],
+        ];
+    },
+    addProseMirrorPlugins() {
+        const { isEditable } = this.editor;
+        return [
+            tableEditing(),
+            columnResizing({}),
+            new Plugin({
+                props: {
+                    decorations: (state) => {
+                        const { doc } = state;
+                        const decorations = [];
+                        let index = 0;
+                        doc.descendants((node, pos) => {
+                            if (node.type.name !== this.name)
+                                return;
+                            const elements = document.getElementsByClassName('as-table');
+                            const table = elements[index];
+                            if (!table)
+                                return;
+                            if (!isEditable)
+                                table.classList.add('is-readonly');
+                            const element = table.parentElement;
+                            const shadowRight = !!(element && element.scrollWidth > element.clientWidth);
+                            if (shadowRight)
+                                decorations.push(Decoration.widget(pos + 1, () => {
+                                    const shadow = document.createElement('div');
+                                    shadow.className = `scrollable-shadow right ${isEditable ? 'is-editable' : ''}`;
+                                    return shadow;
+                                }));
+                            index++;
+                        });
+                        return DecorationSet.create(doc, decorations);
+                    },
+                },
+            }),
+        ];
+    },
+    addKeyboardShortcuts() {
+        return {
+            Tab: () => {
+                if (this.editor.commands.goToNextCell()) {
+                    return true;
+                }
+                if (!this.editor.can().addRowAfter()) {
+                    return false;
+                }
+                return this.editor.chain().addRowAfter().goToNextCell().run();
+            },
+            'Shift-Tab': () => this.editor.commands.goToPreviousCell(),
+            Backspace: deleteTable,
+            'Mod-Backspace': deleteTable,
+            Delete: deleteTable,
+            'Mod-Delete': deleteTable,
+        };
+    },
+}).configure({ resizable: true, lastColumnResizable: false });

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

@@ -0,0 +1,16 @@
+.ProseMirror table {
+  td, th {
+    position: relative;
+    min-width: 100px;
+    padding: 4px 8px;
+    text-align: left;
+    vertical-align: center;
+    border: 1px solid var(--primary-light3) !important;
+    transition: all 0.1s ease-in-out;
+    font-weight: normal;
+
+    > * {
+      margin-bottom: 0;
+    }
+  }
+}

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

@@ -0,0 +1,72 @@
+$grip-margin: 3px;
+
+.ProseMirror table {
+  .grip-column {
+    position: absolute;
+    top: -0.7em;
+    left: 0;
+    z-index: 10;
+    display: block;
+    width: calc(100% - 2 * #{$grip-margin});
+    height: 0.4em;
+    margin: 0 $grip-margin 3px $grip-margin;
+    background: var(--primary-light3);
+    opacity: 0;
+    border-radius: 10px;
+
+    transition: all 0.1s ease-in-out;
+
+    &:hover,
+    &.selected {
+      background: var(--primary-light6);
+    }
+  }
+
+  .grip-row {
+    position: absolute;
+    top: 0;
+    left: -0.7em;
+    z-index: 10;
+    display: block;
+    width: 0.4em;
+    height: calc(100% - 2 * #{$grip-margin});
+    margin: $grip-margin 3px $grip-margin 0;
+    background: var(--primary-light3);
+    opacity: 0;
+    border-radius: 10px;
+
+    transition: all 0.1s ease-in-out;
+
+    &:hover,
+    &.selected {
+      background: var(--primary-light6);
+    }
+  }
+
+  .grip-table {
+    position: absolute;
+    top: -0.8em;
+    left: -0.8em;
+    z-index: 10;
+    display: block;
+    width: 0.6em;
+    height: 0.6em;
+    background: var(--primary-light3);
+    border-radius: 50%;
+    opacity: 0;
+
+    transition: all 0.1s ease-in-out;
+
+    &:hover,
+    &.selected {
+      background: var(--primary-light6);
+    }
+  }
+
+  .editor & {
+    .grip-column, .grip-row, .grip-table {
+      opacity: 1;
+      cursor: pointer;
+    }
+  }
+}

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

@@ -0,0 +1,28 @@
+.ProseMirror {
+  table .column-resize-handle {
+    position: absolute;
+    top: 0;
+    right: -2px;
+    bottom: -2px;
+    width: 4px;
+    pointer-events: none;
+    background-color: var(--primary-light6);
+    opacity: 0;
+
+    .editor & {
+      opacity: 1;
+    }
+  }
+
+  &.resize-cursor {
+    pointer-events: none;
+
+    .editor & {
+      pointer-events: initial;
+      cursor: ew-resize;
+      cursor: col-resize; /* stylelint-disable declaration-block-no-duplicate-properties */
+    }
+  }
+}
+
+