@seorii/tiptap 0.0.7 → 0.0.10

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

@@ -0,0 +1,4 @@
+import { Extension } from '@tiptap/core';
+export declare const Command: Extension<any, any>;
+declare const _default: Extension<any, any>;
+export default _default;

package/dist/plugin/command/index.js

@@ -0,0 +1,27 @@
+import { Extension } from '@tiptap/core';
+import Suggestion from '@tiptap/suggestion';
+import suggestion from "./suggest";
+export const Command = Extension.create({
+    name: 'slash',
+    addOptions() {
+        return {
+            suggestion: {
+                char: '/',
+                command: ({ editor, range, props }) => {
+                    props.command({ editor, range });
+                }
+            }
+        };
+    },
+    addProseMirrorPlugins() {
+        return [
+            Suggestion({
+                editor: this.editor,
+                ...this.options.suggestion
+            })
+        ];
+    }
+});
+export default Command.configure({
+    suggestion
+});

package/dist/plugin/command/stores.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="svelte" />
+export declare const slashVisible: import("svelte/store").Writable<boolean>;
+export declare const slashItems: import("svelte/store").Writable<never[]>;
+export declare const slashLocaltion: import("svelte/store").Writable<{
+    x: number;
+    y: number;
+    height: number;
+}>;
+export declare const slashProps: import("svelte/store").Writable<{
+    editor: null;
+    range: null;
+}>;
+export declare const slashDetail: import("svelte/store").Writable<null>;

package/dist/plugin/command/stores.js

@@ -0,0 +1,6 @@
+import { writable } from 'svelte/store';
+export const slashVisible = writable(false);
+export const slashItems = writable([]);
+export const slashLocaltion = writable({ x: 0, y: 0, height: 0 });
+export const slashProps = writable({ editor: null, range: null });
+export const slashDetail = writable(null);

package/dist/plugin/command/suggest.d.ts

@@ -0,0 +1,23 @@
+declare const _default: {
+    items: ({ query }: {
+        query: any;
+    }) => {
+        section: string;
+        list: {
+            icon: string;
+            title: string;
+            subtitle: string;
+            command: ({ editor, range }: {
+                editor: any;
+                range: any;
+            }) => void;
+        }[];
+    }[];
+    render: () => {
+        onStart: (props: any) => void;
+        onUpdate(props: any): void;
+        onKeyDown(props: any): true | undefined;
+        onExit(): void;
+    };
+};
+export default _default;

package/dist/plugin/command/suggest.js

@@ -0,0 +1,126 @@
+import { slashVisible, slashItems, slashLocaltion, slashProps, slashDetail } from './stores';
+export default {
+    items: ({ query }) => {
+        const raw = [
+            {
+                section: '텍스트', list: [
+                    {
+                        icon: 'title',
+                        title: '제목 1',
+                        subtitle: '큰 제목',
+                        command: ({ editor, range }) => {
+                            editor.chain().focus().deleteRange(range).setNode('heading', { level: 1 }).run();
+                        }
+                    },
+                    {
+                        icon: 'title',
+                        title: '제목 2',
+                        subtitle: '좀 더 작은 제목',
+                        command: ({ editor, range }) => {
+                            editor.chain().focus().deleteRange(range).setNode('heading', { level: 2 }).run();
+                        }
+                    },
+                    {
+                        icon: 'title',
+                        title: '제목 3',
+                        subtitle: '적당히 큰 제목',
+                        command: ({ editor, range }) => {
+                            editor.chain().focus().deleteRange(range).setNode('heading', { level: 3 }).run();
+                        }
+                    },
+                    {
+                        icon: 'format_list_bulleted',
+                        title: '리스트',
+                        subtitle: '순서 없는 리스트',
+                        command: ({ editor, range }) => {
+                            editor.commands.deleteRange(range);
+                            editor.commands.toggleBulletList();
+                        }
+                    },
+                    {
+                        icon: 'format_list_numbered',
+                        title: '숫자 리스트',
+                        subtitle: '1, 2, 3, 4',
+                        command: ({ editor, range }) => {
+                            editor.commands.deleteRange(range);
+                            editor.commands.toggleOrderedList();
+                        }
+                    }
+                ]
+            },
+            {
+                section: '블록', list: [
+                    {
+                        icon: 'code',
+                        title: '코드 블록',
+                        subtitle: '하이라이팅되는 코드 블록',
+                        command: ({ editor, range }) => {
+                            editor.chain().focus().deleteRange(range).setNode('codeBlock').run();
+                        }
+                    },
+                    {
+                        icon: 'functions',
+                        title: '수식 블록',
+                        subtitle: '가운데로 정렬된 큰 수식',
+                        command: ({ editor, range }) => {
+                            const { to } = range;
+                            editor.chain().focus().deleteRange(range).setNode('math_display').focus().run();
+                        }
+                    },
+                    {
+                        icon: 'table_chart',
+                        title: '테이블',
+                        subtitle: '표',
+                        command: ({ editor, range }) => {
+                            editor.chain().focus().insertTable({ rows: 2, cols: 3 }).run();
+                        }
+                    },
+                    {
+                        icon: 'iframe',
+                        title: '프레임',
+                        subtitle: '다른 웹사이트 삽입',
+                        command: ({ editor, range }) => {
+                            slashDetail.set('iframe');
+                        }
+                    },
+                    {
+                        icon: 'youtube_activity',
+                        title: '유튜브',
+                        subtitle: '유튜브 임베드',
+                        command: ({ editor, range }) => {
+                            slashDetail.set('youtube');
+                        }
+                    }
+                ]
+            }
+        ];
+        const filtered = raw.map(({ section, list }) => ({ section, list: list.filter((item) => item.title.toLowerCase().includes(query.toLowerCase())) })).filter(({ list }) => list.length > 0);
+        return filtered;
+    },
+    render: () => {
+        return {
+            onStart: (props) => {
+                let editor = props.editor;
+                let range = props.range;
+                let location = props.clientRect();
+                slashProps.set({ editor, range });
+                slashVisible.set(true);
+                slashLocaltion.set({ x: location.x, y: location.y, height: location.height });
+                slashItems.set(props.items);
+                slashDetail.set(null);
+            },
+            onUpdate(props) {
+                slashItems.set(props.items);
+            },
+            onKeyDown(props) {
+                if (props.event.key === 'Escape') {
+                    slashVisible.set(false);
+                    return true;
+                }
+            },
+            onExit() {
+                slashVisible.set(false);
+            }
+        };
+    }
+};

package/dist/plugin/table/deleteTable.js

@@ -1,4 +1,4 @@
-import { isColumnSelected, isTableSelected } from "./util";
+import { isColumnSelected, isRowSelected, isTableSelected } from "./util";
 import { TableMap } from "prosemirror-tables";
 export const deleteTable = ({ editor }) => {
     const { selection } = editor.state;
@@ -14,7 +14,7 @@ export const deleteTable = ({ editor }) => {
         }
     }
     for (let i = height - 1; i >= 0; i--) {
-        if (isColumnSelected(i)(selection)) {
+        if (isRowSelected(i)(selection)) {
             editor.commands.deleteRow();
             return true;
         }

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

@@ -1,7 +1,6 @@
 import type { Node, ResolvedPos } from 'prosemirror-model';
-import type { Selection, Transaction } from 'prosemirror-state';
+import type { EditorState, 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;
@@ -10,6 +9,7 @@ export declare const findTable: (selection: Selection) => {
     node: Node;
 } | undefined;
 export declare const isCellSelection: (selection: any) => boolean;
+export declare const isTableAnySelected: (selection: any) => false | number[];
 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;

package/dist/plugin/table/util.js

@@ -16,6 +16,14 @@ export const findTable = (selection) => findParentNode((node) => node.type.spec.
 export const isCellSelection = (selection) => {
     return selection instanceof CellSelection;
 };
+export const isTableAnySelected = (selection) => {
+    if (isCellSelection(selection)) {
+        const map = TableMap.get(selection.$anchorCell.node(-1));
+        const start = selection.$anchorCell.start(-1);
+        return map.cellsInRect(map.rectBetween(selection.$anchorCell.pos - start, selection.$headCell.pos - start));
+    }
+    return false;
+};
 export const isColumnSelected = (columnIndex) => (selection) => {
     if (isCellSelection(selection)) {
         const map = TableMap.get(selection.$anchorCell.node(-1));

package/dist/plugin/youtube.d.ts

@@ -0,0 +1,15 @@
+import { Node } from "@tiptap/core";
+export interface VideoPlayerOptions {
+    HTMLAttributes: Record<string, any>;
+}
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        videoPlayer: {
+            insertVideoPlayer: (options: {
+                url: string;
+            }) => ReturnType;
+        };
+    }
+}
+declare const _default: Node<VideoPlayerOptions, any>;
+export default _default;

package/dist/plugin/youtube.js

@@ -0,0 +1,100 @@
+import { Node, mergeAttributes } from "@tiptap/core";
+import { Plugin, PluginKey } from "prosemirror-state";
+const youtubeRegExp = /^(?:(?:https?:)?\/\/)?(?:www\.)?(?:m\.)?(?:youtu(?:be)?\.com\/(?:v\/|embed\/|watch(?:\/|\?v=))|youtu\.be\/)((?:\w|-){11})(?:\S+)?$/;
+const youtubeExtractId = (url) => {
+    const match = youtubeRegExp.exec(url.trim());
+    return match ? match[1] : false;
+};
+const videoPlayerStaticAttributes = { nocookie: true };
+export default Node.create({
+    name: "lite-youtube",
+    content: "",
+    marks: "",
+    group: "block",
+    draggable: true,
+    addAttributes() {
+        return {
+            videoid: {
+                default: null,
+            },
+            provider: {
+                default: "youtube",
+            },
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: "lite-youtube",
+            },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return [
+            "lite-youtube",
+            mergeAttributes(videoPlayerStaticAttributes, this.options.HTMLAttributes, HTMLAttributes),
+        ];
+    },
+    addCommands() {
+        return {
+            insertVideoPlayer: (options) => ({ chain, editor }) => {
+                const { url } = options;
+                const videoid = youtubeExtractId(url);
+                if (videoid) {
+                    const { selection } = editor.state;
+                    const pos = selection.$head;
+                    return chain().insertContentAt(pos.before(), [{
+                            type: this.name,
+                            attrs: { videoid, provider: "youtube" },
+                        }]).run();
+                }
+                return false;
+            },
+        };
+    },
+    addProseMirrorPlugins() {
+        return [
+            new Plugin({
+                key: new PluginKey("handlePasteVideoURL"),
+                props: {
+                    handlePaste: (view, _event, slice) => {
+                        if (slice.content.childCount !== 1)
+                            return false;
+                        const { state } = view;
+                        const { selection } = state;
+                        const { empty } = selection;
+                        if (!empty)
+                            return false;
+                        const pos = selection.$head;
+                        const node = pos.node();
+                        if (node.content.size > 0)
+                            return false;
+                        let textContent = "", href = "";
+                        slice.content.forEach((node) => {
+                            textContent += node.textContent;
+                        });
+                        textContent = textContent.trim();
+                        let videoid = youtubeExtractId(textContent);
+                        if (!videoid)
+                            for (const mark of slice?.content?.content?.[0]?.marks) {
+                                if (mark.attrs.href) {
+                                    const id = youtubeExtractId(mark.attrs.href);
+                                    if (id) {
+                                        videoid = id;
+                                        break;
+                                    }
+                                }
+                            }
+                        if (!videoid)
+                            return false;
+                        this.editor.chain().insertContentAt(pos.before(), [{
+                                type: this.name,
+                                attrs: { videoid, provider: "youtube" },
+                            }]).run();
+                        return true;
+                    },
+                },
+            }),
+        ];
+    },
+});

package/dist/tiptap/Bubble.svelte

@@ -0,0 +1,135 @@
+<script>import { BubbleMenu } from "svelte-tiptap";
+import { getContext, tick } from "svelte";
+import 'tippy.js/animations/shift-away-subtle.css';
+import ToolbarButton from "./ToolbarButton.svelte";
+import { isTableAnySelected } from "../plugin/table/util";
+import deleteTable from "../plugin/table/deleteTable";
+import setMath from "./setMath";
+import { Button, Icon, IconButton, Input, List, OneLine, Tooltip } from "nunui";
+const tiptap = getContext('editor');
+let link = false, href = '', sel = '', _sel = '';
+$: selection = $tiptap?.state?.selection;
+$: table = isTableAnySelected(selection);
+$: sel = selection?.from + '-' + selection?.to;
+$: if ($tiptap && sel !== _sel) {
+    _sel = sel;
+    link = false;
+    href = $tiptap.getAttributes('link').href;
+}
+$: if ($tiptap) {
+    if (href)
+        $tiptap.chain().setLink({ href }).run();
+    else
+        $tiptap.chain().unsetLink().run();
+}
+</script>
+
+
+{#if $tiptap}
+    <BubbleMenu editor={$tiptap} updateDelay={50}
+                tippyOptions={{moveTransition: 'transform 0.2s cubic-bezier(1,.5,0,.85)', animation:'shift-away-subtle', duration: [200, 50]}}>
+        {#if $$slots.default}
+            <slot/>
+        {:else}
+            <main>
+                {#if link}
+                    <div class="link">
+                        <p>
+                            <Icon icon="link"/>
+                            링크
+                        </p>
+                        <Input placeholder="url" fullWidth bind:value={href} autofocus/>
+                        <div>
+                            <Button tabindex="0" transparent small on:click={() => {
+                                href = ''
+                                $tiptap.chain().focus().unsetLink().run()
+                                tick().then(() => link = false)
+                            }}>삭제
+                            </Button>
+                            <Button tabindex="0" transparent small on:click={() => link = false}>닫기</Button>
+                        </div>
+                    </div>
+                {:else if table}
+                    {#if table.length > 1}
+                        <ToolbarButton icon="cell_merge" handler={() => $tiptap.commands.mergeCells()}/>
+                    {:else}
+                        <ToolbarButton icon="splitscreen_left" handler={() => $tiptap.commands.splitCell()}/>
+                    {/if}
+                    <ToolbarButton icon="keyboard_double_arrow_left"
+                                   handler={() => $tiptap.chain().focus().addColumnBefore().run()}/>
+                    <ToolbarButton icon="keyboard_double_arrow_right"
+                                   handler={() => $tiptap.chain().focus().addColumnAfter().run()}/>
+                    <ToolbarButton icon="keyboard_double_arrow_up"
+                                   handler={() => $tiptap.chain().focus().addRowBefore().run()}/>
+                    <ToolbarButton icon="keyboard_double_arrow_down"
+                                   handler={() => $tiptap.chain().focus().addRowAfter().run()}/>
+                    <ToolbarButton icon="close" handler={() => deleteTable({editor: $tiptap})}/>
+                {:else}
+                    <Tooltip bottom left xstack width="160px">
+                        <IconButton size="1.2em" icon="format_align_left" slot="target"/>
+                        <div style="margin: -6px;font-size: 0.6em">
+                            <List>
+                                <OneLine icon="format_align_left" title="왼쪽 정렬"
+                                         on:click={() => $tiptap.chain().focus().setTextAlign('left').run()}
+                                         active={$tiptap.isActive({ textAlign: 'left' })}/>
+                                <OneLine icon="format_align_center" title="가운데 정렬"
+                                         on:click={() => $tiptap.chain().focus().setTextAlign('center').run()}
+                                         active={$tiptap.isActive({ textAlign: 'center' })}/>
+                                <OneLine icon="format_align_right" title="오른쪽 정렬"
+                                         on:click={() => $tiptap.chain().focus().setTextAlign('right').run()}
+                                         active={$tiptap.isActive({ textAlign: 'right' })}/>
+                                <OneLine icon="format_align_justify" title="양쪽 정렬"
+                                         on:click={() => $tiptap.chain().focus().setTextAlign('justify').run()}
+                                         active={$tiptap.isActive({ textAlign: 'justify' })}/>
+                            </List>
+                        </div>
+                    </Tooltip>
+                    <ToolbarButton icon="format_bold" prop="bold"/>
+                    <ToolbarButton icon="format_italic" prop="italic"/>
+                    <ToolbarButton icon="format_strikethrough" prop="strike"/>
+                    <ToolbarButton icon="format_underlined" prop="underline"/>
+                    <ToolbarButton icon="superscript" prop="superscript"/>
+                    <ToolbarButton icon="subscript" prop="subscript"/>
+                    <ToolbarButton icon="functions" handler={() => setMath($tiptap)}/>
+                    <ToolbarButton icon="code" prop="code"/>
+                    <ToolbarButton icon="link" prop="link" handler={() => link = true}/>
+                {/if}
+            </main>
+        {/if}
+    </BubbleMenu>
+{/if}
+
+<style>main {
+  box-shadow: var(--shadow);
+  background: var(--surface, #fff);
+  color: var(--on-surface, #000);
+  padding: 8px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2em;
+}
+main > :global(*) {
+  margin: 0 2px;
+}
+main > :global(*):first-child {
+  margin-left: 0;
+}
+main > :global(*):last-child {
+  margin-right: 0;
+}
+
+.link {
+  display: flex;
+  flex-direction: column;
+  font-size: 0.7em;
+}
+.link p {
+  margin: 0 0 0.6em 0;
+}
+.link div {
+  margin-top: 0.6em;
+  display: flex;
+  justify-content: flex-end;
+}</style>

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import 'tippy.js/animations/shift-away-subtle.css';
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type BubbleProps = typeof __propDef.props;
+export type BubbleEvents = typeof __propDef.events;
+export type BubbleSlots = typeof __propDef.slots;
+export default class Bubble extends SvelteComponentTyped<BubbleProps, BubbleEvents, BubbleSlots> {
+}
+export {};

package/dist/tiptap/Command.svelte

@@ -0,0 +1,150 @@
+<script>import { Button, IconButton, Input, List, TwoLine } from "nunui";
+import { getContext } from "svelte";
+import { slashVisible, slashItems, slashLocaltion, slashProps, slashDetail } from '../plugin/command/stores';
+import { fly, slide } from "svelte/transition";
+import { quartOut } from "svelte/easing";
+const tiptap = getContext('editor');
+export let selectedIndex = 0;
+let height = 0, elements = [];
+let iframe = '';
+$: if ($slashVisible) {
+    iframe = '';
+}
+</script>
+
+<svelte:window bind:innerHeight={height}/>
+
+{#if $slashVisible}
+    <div class="scrim" on:click={() => $slashVisible = false}/>
+    <main style="left: {$slashLocaltion.x}px; top: {$slashLocaltion.y + $slashLocaltion.height + 384 > height
+			? $slashLocaltion.y - $slashLocaltion.height - 384
+			: $slashLocaltion.y + $slashLocaltion.height}px;" transition:fly={{y: 10, duration: 200, easing: quartOut}}>
+        {#if $slashDetail === 'iframe'}
+            <div class="detail">
+                <header>
+                    <IconButton icon="arrow_back" on:click={() => $slashDetail = ''}/>
+                    <div class="title">iframe</div>
+                </header>
+                <Input placeholder="url" fullWidth bind:value={iframe} autofocus
+                       on:submit={() => $tiptap.commands.insertContent({type: 'iframe', attrs: {src: iframe}})}/>
+                <footer>
+                    <Button tabindex="0" transparent small on:click={() => {
+                                iframe = ''
+                                $slashDetail = ''
+                            }}>취소
+                    </Button>
+                    <Button tabindex="0" transparent small
+                            on:click={() => $tiptap.commands.insertContent({type: 'iframe', attrs: {src: iframe}})}>삽입
+                    </Button>
+                </footer>
+            </div>
+        {:else if $slashDetail === 'youtube'}
+            <div class="detail">
+                <header>
+                    <IconButton icon="arrow_back" on:click={() => $slashDetail = ''}/>
+                    <div class="title">youtube</div>
+                </header>
+                <Input placeholder="url" fullWidth bind:value={iframe} autofocus
+                       on:submit={() => $tiptap.commands.insertVideoPlayer({url: iframe})}/>
+                <footer>
+                    <Button tabindex="0" transparent small on:click={() => {
+                                iframe = ''
+                                $slashDetail = ''
+                            }}>취소
+                    </Button>
+                    <Button tabindex="0" transparent small
+                            on:click={() => $tiptap.commands.insertVideoPlayer({url: iframe})}>삽입
+                    </Button>
+                </footer>
+            </div>
+        {:else}
+            <div class="list">
+                <List>
+                    {#each $slashItems as {section, list}(section)}
+                        <div class="section" transition:slide={{duration: 400, easing: quartOut}}>{section}</div>
+                        <div transition:slide={{duration: 400, easing: quartOut}}>
+                            {#each list || [] as {title, subtitle, icon, command, section}, i(title)}
+                                <div transition:slide={{duration: 400, easing: quartOut}}>
+                                    <TwoLine on:mouseenter={() => (selectedIndex = i)} on:click={() => {
+                                    command?.($slashProps);
+                                    setTimeout(() => $tiptap.commands.focus());
+                                }} bind:this={elements[i]} {icon} {title} subtitle={subtitle || ''}/>
+                                </div>
+                            {/each}
+                        </div>
+                    {/each}
+                    {#if !$slashItems.length}
+                        <div class="section" transition:slide={{duration: 400, easing: quartOut}}>결과 없음</div>
+                    {/if}
+                </List>
+            </div>
+        {/if}
+    </main>
+{/if}
+
+<style>.scrim {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  cursor: default;
+  z-index: 0;
+}
+
+main {
+  position: fixed;
+  background: var(--surface, #fff);
+  width: 220px;
+  border-radius: 4px;
+  overflow-y: scroll;
+  z-index: 10;
+  box-shadow: var(--shadow);
+}
+
+.section {
+  padding: 8px 16px;
+  font-size: 0.8em;
+  font-weight: 300;
+  color: var(--on-surface, #000);
+  opacity: 0.8;
+}
+
+.list {
+  color: var(--primary-dark7);
+}
+.list :global(.title) {
+  font-size: 0.7em !important;
+  font-weight: 300 !important;
+  margin-bottom: 4px;
+}
+.list :global(.subtitle) {
+  font-size: 0.8em !important;
+  font-weight: 300 !important;
+  color: var(--primary-dark1);
+}
+
+.detail {
+  font-size: 0.8em;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+}
+
+header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+}
+header > :global(*) {
+  margin-right: 8px;
+}
+header > :global(*):last-child {
+  margin-right: 0;
+}
+
+footer {
+  margin-top: 0.6em;
+  display: flex;
+  justify-content: flex-end;
+}</style>

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

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        selectedIndex?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CommandProps = typeof __propDef.props;
+export type CommandEvents = typeof __propDef.events;
+export type CommandSlots = typeof __propDef.slots;
+export default class Command extends SvelteComponentTyped<CommandProps, CommandEvents, CommandSlots> {
+}
+export {};

package/dist/tiptap/Floating.svelte

@@ -0,0 +1,54 @@
+<script>import { BubbleMenu, FloatingMenu } from "svelte-tiptap";
+import { getContext } from "svelte";
+import { Button, IconButton, List, OneLine, Tooltip } from "nunui";
+import ToolbarButton from "./ToolbarButton.svelte";
+import setMath from "./setMath";
+const tiptap = getContext('editor');
+</script>
+
+{#if $tiptap}
+    <FloatingMenu editor={$tiptap}
+                  tippyOptions={{animation:'fade', duration: [200, 50]}}>
+        <main on:mousedown={() => setTimeout(() => $tiptap.commands.focus())}>
+            <span>
+                /로 명령어 입력. 또는
+            </span>
+            <Tooltip bottom left xstack width="160px">
+                <IconButton size="1.2em" icon="text_fields" slot="target"/>
+                <div style="margin: -6px">
+                    <List>
+                        <OneLine icon="counter_1" title="제목 1" on:click={() => $tiptap.commands.setHeading({level: 1})}/>
+                        <OneLine icon="counter_2" title="제목 2" on:click={() => $tiptap.commands.setHeading({level: 2})}/>
+                        <OneLine icon="counter_3" title="제목 3" on:click={() => $tiptap.commands.setHeading({level: 3})}/>
+                        <OneLine icon="segment" title="본문" on:click={() => $tiptap.commands.setParagraph()}/>
+                    </List>
+                </div>
+            </Tooltip>
+            <ToolbarButton icon="format_bold" prop="bold"/>
+            <ToolbarButton icon="format_italic" prop="italic"/>
+            <ToolbarButton icon="format_strikethrough" prop="strike"/>
+            <ToolbarButton icon="format_underlined" prop="underline"/>
+            <ToolbarButton icon="functions" handler={() => {
+                const end = $tiptap.state.selection.$to.pos;
+                $tiptap.chain().focus().insertContent({
+                  type: 'math_inline',
+                }).insertContent(' ').run();
+            }}/>
+            <ToolbarButton icon="code" prop="code"/>
+        </main>
+    </FloatingMenu>
+{/if}
+
+<style>span {
+  opacity: 0.6;
+}
+
+main {
+  display: flex;
+  flex-wrap: wrap;
+  width: max-content;
+  align-items: center;
+}
+main > :global(*) {
+  margin-right: 4px;
+}</style>

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

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FloatingProps = typeof __propDef.props;
+export type FloatingEvents = typeof __propDef.events;
+export type FloatingSlots = typeof __propDef.slots;
+export default class Floating extends SvelteComponentTyped<FloatingProps, FloatingEvents, FloatingSlots> {
+}
+export {};

package/dist/tiptap/TipTap.svelte

@@ -1,34 +1,38 @@
 <script>import { browser } from "$app/environment";
-import { onMount, setContext } from 'svelte';
-import { Card, Input } from "nunui";
+import { beforeUpdate, onMount, setContext } from 'svelte';
 import { writable } from "svelte/store";
 import sanitizeHtml from 'sanitize-html';
 import "@seorii/prosemirror-math/style.css";
-const san = (body, force = false) => (editor || force) ? body : sanitizeHtml(body, {
-    allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img', 'math-inline', 'math-node', 'iframe', 'tiptap-file']),
+import Bubble from "./Bubble.svelte";
+import Floating from "./Floating.svelte";
+import Command from "./Command.svelte";
+import { slashItems, slashProps, slashVisible } from "../plugin/command/stores";
+const san = (body) => sanitizeHtml(body, {
+    allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img', 'math-inline', 'math-node', 'iframe', 'tiptap-file', 'lite-youtube']),
     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']
+        th: ['colwidth', 'colspan', 'rowspan'],
+        td: ['colwidth', 'colspan', 'rowspan'],
+        'tiptap-file': ['id'],
+        'lite-youtube': ['videoid', 'params', 'nocookie', 'title', 'provider'],
     },
 });
 export let body = '', editor = false, style = '', ref = null, options = {};
 const tiptap = setContext('editor', writable(null));
-let element, _body = san(body, true), fullscreen = false, html = false, mounted = false;
+let element, fullscreen = false, mounted = false, last = '';
 $: ref = $tiptap;
-$: _san = san(body);
-$: if (_san !== _body && $tiptap)
-    $tiptap?.commands.setContent(_body = _san);
 $: $tiptap && $tiptap.setEditable(editor);
-if (browser)
+if (browser) {
     onMount(() => {
+        body = last = san(body);
         mounted = true;
-        import('./tiptap').then(({ default: tt }) => {
+        Promise.all([import('./tiptap'), import("@justinribeiro/lite-youtube")]).then(([{ default: tt }]) => {
             if (!mounted)
                 return;
-            $tiptap = tt(element, _body, {
+            $tiptap = tt(element, body, {
                 editable: editor,
                 onTransaction: () => $tiptap = $tiptap,
                 ...options,
@@ -37,7 +41,7 @@ if (browser)
                 let content = tiptap.getHTML(), json = tiptap.getJSON().content;
                 if (Array.isArray(json) && json.length === 1 && !json[0].hasOwnProperty("content"))
                     content = null;
-                _body = body = editor ? content : body;
+                body = last = content;
             });
         });
         return () => {
@@ -45,43 +49,88 @@ if (browser)
             $tiptap?.destroy?.();
         };
     });
+    beforeUpdate(() => {
+        if (last === body)
+            return;
+        body = san(body);
+        $tiptap?.commands?.setContent?.(body);
+    });
+}
+let selectedIndex = 0;
+$: selectedIndex = $slashVisible ? selectedIndex : 0;
+function handleKeydown(event) {
+    if (!$slashVisible)
+        return;
+    if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        selectedIndex = (selectedIndex + $slashItems.length - 1) % $slashItems.length;
+        return true;
+    }
+    if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        selectedIndex = (selectedIndex + 1) % $slashItems.length;
+        return true;
+    }
+    if (event.key === 'Enter') {
+        event.preventDefault();
+        selectItem(selectedIndex);
+        return true;
+    }
+    return false;
+}
+function selectItem(index) {
+    const item = $slashItems[index];
+    if (item) {
+        let range = $slashProps.range;
+        item.command({ editor, range });
+    }
+}
 </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>
+<main class:fullscreen class:editor>
+    <div class="wrapper">
+        <div bind:this={element} class="target" on:keydown|capture={handleKeydown}></div>
+        {#if !$tiptap}
+            로드 중...
+        {/if}
+    </div>
+    {#if editor}
+        <Command {selectedIndex}/>
+        <Floating/>
+        {#if $$slots.bubble}
+            <Bubble>
+                <slot name="bubble"/>
+            </Bubble>
+        {:else}
+            <Bubble/>
+        {/if}
+    {/if}
+</main>
+
 
 <style>main {
   position: relative;
   overscroll-behavior: none;
+  --shadow: 0 1px 2px rgba(127, 127, 127, 0.07),
+  0 2px 4px rgba(127, 127, 127, 0.07),
+  0 4px 8px rgba(127, 127, 127, 0.07),
+  0 8px 16px rgba(127, 127, 127, 0.07),
+  0 16px 32px rgba(127, 127, 127, 0.07),
+  0 32px 64px rgba(127, 127, 127, 0.07);
 }
 main.fullscreen {
-  z-index: 9999999;
+  z-index: 999999999;
   position: fixed;
   top: 0;
   left: 0;
+  right: 0;
+  bottom: 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;
@@ -95,7 +144,7 @@ main .wrapper .hide {
   filter: drop-shadow(0 0 0.75rem var(--primary-light13));
 }
 
-.editor .iframe-wrapper.ProseMirror-selectednode {
+.editor :global(.iframe-wrapper.ProseMirror-selectednode) {
   outline: 3px solid var(--primary);
 }
 

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

@@ -11,7 +11,9 @@ declare const __propDef: {
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        bubble: {};
+    };
 };
 export type TipTapProps = typeof __propDef.props;
 export type TipTapEvents = typeof __propDef.events;

package/dist/tiptap/ToolbarButton.svelte

@@ -0,0 +1,26 @@
+<script>import { getContext } from "svelte";
+import { Button, IconButton } from "nunui";
+const editor = getContext("editor");
+export let prop = '', attrs = '', label = '', icon = '', methodName = 'toggle' + prop.charAt(0).toUpperCase() + prop.slice(1), tooltip, handler;
+$: isActive = () => {
+    return editor && prop && $editor.isActive(prop, attrs);
+};
+function toggle() {
+    if (!$editor)
+        return;
+    //$editor.chain().focus().clearNodes().run()
+    if (handler)
+        return handler();
+    setTimeout(() => $editor.chain().focus()[methodName](attrs)?.run(), 0);
+}
+</script>
+
+{#if icon}
+    <IconButton size="1.2em" {icon} active={isActive()} on:click={toggle} tooltip={tooltip} tabindex="0"/>
+{:else}
+    <Button outlined={!isActive()} on:click={handler || toggle} small {...$$restProps}>
+        {label}
+        <slot/>
+    </Button>
+{/if}
+

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

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        prop?: string | undefined;
+        attrs?: string | undefined;
+        label?: string | undefined;
+        icon?: string | undefined;
+        methodName?: string | undefined;
+        tooltip: any;
+        handler: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ToolbarButtonProps = typeof __propDef.props;
+export type ToolbarButtonEvents = typeof __propDef.events;
+export type ToolbarButtonSlots = typeof __propDef.slots;
+export default class ToolbarButton extends SvelteComponentTyped<ToolbarButtonProps, ToolbarButtonEvents, ToolbarButtonSlots> {
+}
+export {};

package/dist/tiptap/setMath.d.ts

@@ -0,0 +1 @@
+export default function setMath(tiptap: any): void;

package/dist/tiptap/setMath.js

@@ -0,0 +1,14 @@
+export default function setMath(tiptap) {
+    const { selection } = tiptap.state;
+    tiptap.chain().command(({ state, tr }) => state.doc.nodesBetween(selection.from, selection.to, (node, position) => {
+        if (!node.isTextblock || selection.from === selection.to)
+            return;
+        const startPosition = Math.max(position + 1, selection.from);
+        const endPosition = Math.min(position + node.nodeSize, selection.to);
+        const substringFrom = Math.max(0, selection.from - position - 1);
+        const substringTo = Math.max(0, selection.to - position - 1);
+        const updatedText = node.textContent.substring(substringFrom, substringTo);
+        const newNode = state.schema.nodes.math_inline.create(null, state.schema.text(updatedText));
+        tr = tr.replaceWith(startPosition, endPosition, newNode);
+    })).run();
+}

package/dist/tiptap/tiptap.d.ts

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

package/dist/tiptap/tiptap.js

@@ -16,42 +16,50 @@ import tableRow from "../plugin/table/tableRow";
 import tableCell from "../plugin/table/tableCell";
 import Superscript from '@tiptap/extension-superscript';
 import Subscript from "@tiptap/extension-subscript";
-import Placeholder from "@tiptap/extension-placeholder";
 import { Indent } from "../plugin/indent";
 import { Color } from '@tiptap/extension-color';
 import TextStyle from '@tiptap/extension-text-style';
 import Iframe from "../plugin/iframe";
 // @ts-ignore
-import { Katex } from "@seorii/prosemirror-math/tiptap";
-export default (element, content, { placeholder = '내용을 입력하세요...', plugins = [], ...props } = {}) => new Editor({
+import { MathInline, MathBlock } from "@seorii/prosemirror-math/tiptap";
+import Youtube from "../plugin/youtube";
+import command from "../plugin/command";
+export default (element, content, { plugins = [], ...props } = {}) => new Editor({
     element, content, ...props,
     extensions: [
         CodeBlockLowlight.configure({ lowlight }),
         Image,
+        Youtube,
         StarterKit,
         Underline,
         Highlight.configure({ multicolor: true }),
-        Link.configure({ openOnClick: true }),
+        Link.configure({
+            openOnClick: true, protocols: ['ftp', 'mailto', {
+                    scheme: 'tel',
+                    optionalSlashes: true
+                }]
+        }),
         TextAlign.configure({ types: ['heading', 'paragraph', 'image'] }),
         DropCursor,
         orderedlist,
+        MathInline,
+        MathBlock,
         table,
         tableHeader,
         tableRow,
         tableCell,
         Superscript,
         Subscript,
-        Placeholder.configure({ placeholder }),
         Indent,
         Color,
         TextStyle,
-        Katex,
         Iframe,
         Code.extend({
             renderHTML({ HTMLAttributes }) {
                 return ['code', mergeAttributes(HTMLAttributes, { class: 'inline' })];
             }
         }),
+        command,
         ...plugins,
     ],
 });

package/package.json

@@ -1,28 +1,33 @@
 {
   "name": "@seorii/tiptap",
-  "version": "0.0.7",
+  "version": "0.0.10",
   "scripts": {
     "dev": "vite dev",
     "build": "svelte-kit sync && svelte-package",
+    "build-page": "vite build",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "prettier --plugin-search-dir . --check . && eslint .",
     "format": "prettier --plugin-search-dir . --write .",
-    "deploy": "svelte-kit sync && svelte-package && npm publish --access public"
+    "deploy": "svelte-kit sync && svelte-package && npm publish --access public",
+    "page": "npm run build-page && node gh-pages.js"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.1.0",
-    "@sveltejs/kit": "^1.22.3",
+    "@sveltejs/adapter-static": "^2.0.3",
+    "@sveltejs/kit": "^1.22.4",
     "@sveltejs/package": "^2.2.0",
+    "@types/sanitize-html": "^2.9.0",
     "@typescript-eslint/eslint-plugin": "^6.2.0",
     "@typescript-eslint/parser": "^6.2.0",
     "eslint": "^8.46.0",
     "eslint-config-prettier": "^8.9.0",
     "eslint-plugin-svelte3": "^4.0.0",
+    "gh-pages": "^5.0.0",
     "prettier": "^3.0.0",
     "prettier-plugin-svelte": "^3.0.3",
     "sass": "^1.64.1",
-    "svelte": "^4.1.1",
+    "svelte": "^4.1.2",
     "svelte-check": "^3.4.6",
     "svelte-preprocess": "^5.0.4",
     "tslib": "^2.6.1",
@@ -31,7 +36,8 @@
   },
   "type": "module",
   "dependencies": {
-    "@seorii/prosemirror-math": "^0.3.7",
+    "@justinribeiro/lite-youtube": "^1.5.0",
+    "@seorii/prosemirror-math": "^0.4.2",
     "@tiptap/core": "^2.0.4",
     "@tiptap/extension-code": "^2.0.4",
     "@tiptap/extension-code-block-lowlight": "^2.0.4",
@@ -51,15 +57,20 @@
     "@tiptap/extension-text-align": "^2.0.4",
     "@tiptap/extension-text-style": "^2.0.4",
     "@tiptap/extension-underline": "^2.0.4",
+    "@tiptap/pm": "^2.0.4",
     "@tiptap/starter-kit": "^2.0.4",
+    "@tiptap/suggestion": "^2.0.4",
     "lowlight": "^2.9.0",
-    "nunui": "^0.0.97",
+    "nunui": "^0.0.99",
+    "prosemirror-commands": "^1.5.2",
     "prosemirror-model": "^1.19.3",
     "prosemirror-state": "^1.4.3",
     "prosemirror-tables": "^1.3.4",
     "prosemirror-transform": "^1.7.4",
     "prosemirror-view": "^1.31.7",
-    "sanitize-html": "^2.11.0"
+    "sanitize-html": "^2.11.0",
+    "svelte-tiptap": "^1.1.2",
+    "tippy.js": "^6.3.7"
   },
   "exports": {
     ".": {