@peteai/presentation-editor 0.0.1

package/dist/components/presentation-editor/layers/types/html/buttons/strikethrough-button/strikethrough-button.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Editor } from '../../editor/Editor.js';
+interface Props {
+    editor: Editor;
+}
+declare const StrikethroughButton: import("svelte").Component<Props, {}, "">;
+type StrikethroughButton = ReturnType<typeof StrikethroughButton>;
+export default StrikethroughButton;

package/dist/components/presentation-editor/layers/types/html/buttons/underline-button/index.d.ts

@@ -0,0 +1,2 @@
+import UnderlineButton from './underline-button.svelte';
+export { UnderlineButton };

package/dist/components/presentation-editor/layers/types/html/buttons/underline-button/index.js

@@ -0,0 +1,2 @@
+import UnderlineButton from './underline-button.svelte';
+export { UnderlineButton };

package/dist/components/presentation-editor/layers/types/html/buttons/underline-button/underline-button.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { Editor } from '../../editor/index.js';
+	import UnderlineIcon from 'lucide-svelte/icons/underline';
+	import { Toggle } from '../../../../../../ui/toggle/index.js';
+
+	interface Props {
+		editor: Editor;
+	}
+
+	let { editor }: Props = $props();
+</script>
+
+<Toggle
+	size="xs"
+	pressed={editor.isActive('underline')}
+	onPressedChange={(val) =>
+		val ? editor.commands.setUnderline() : editor.commands.unsetUnderline()}
+>
+	<UnderlineIcon class="h-6 w-6" />
+</Toggle>

package/dist/components/presentation-editor/layers/types/html/buttons/underline-button/underline-button.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Editor } from '../../editor/index.js';
+interface Props {
+    editor: Editor;
+}
+declare const UnderlineButton: import("svelte").Component<Props, {}, "">;
+type UnderlineButton = ReturnType<typeof UnderlineButton>;
+export default UnderlineButton;

package/dist/components/presentation-editor/layers/types/html/editor/Editor.d.ts

@@ -0,0 +1,4 @@
+import { Editor as CoreEditor } from '@tiptap/core';
+export declare class Editor extends CoreEditor {
+    contentElement: HTMLElement | null;
+}

package/dist/components/presentation-editor/layers/types/html/editor/Editor.js

@@ -0,0 +1,4 @@
+import { Editor as CoreEditor } from '@tiptap/core';
+export class Editor extends CoreEditor {
+    contentElement = null;
+}

package/dist/components/presentation-editor/layers/types/html/editor/createEditor.d.ts

@@ -0,0 +1,5 @@
+import type { EditorOptions } from '@tiptap/core';
+import { type Readable } from 'svelte/store';
+import { Editor } from './Editor.js';
+declare const createEditor: (options: Partial<EditorOptions>) => Readable<Editor>;
+export default createEditor;

package/dist/components/presentation-editor/layers/types/html/editor/createEditor.js

@@ -0,0 +1,18 @@
+import { readable } from 'svelte/store';
+import { Editor } from './Editor.js';
+import { tick } from 'svelte';
+const createEditor = (options) => {
+    const editor = new Editor(options);
+    return readable(editor, (set) => {
+        editor.on('transaction', () => {
+            tick().then(() => {
+                set(editor);
+            });
+        });
+        return () => {
+            console.log('destroying editor');
+            editor.destroy();
+        };
+    });
+};
+export default createEditor;

package/dist/components/presentation-editor/layers/types/html/editor/editor-content.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { onDestroy, onMount, tick } from 'svelte';
+	import type { ComponentInputProps } from './types.js';
+
+	type Props = ComponentInputProps<{}>;
+
+	const { editor, children }: Props = $props();
+	let element: HTMLElement;
+
+	const init = async () => {
+		console.log('init editor content', editor);
+		await tick();
+		if (!element) {
+			return;
+		}
+
+		if (!editor?.options.element) {
+			return;
+		}
+
+		if (editor.contentElement) {
+			return;
+		}
+
+		element.append(...Array.from(editor.options.element.childNodes));
+		editor.setOptions({ element });
+
+		editor.contentElement = element;
+
+		editor.commands.focus('all');
+	};
+
+	onMount(init);
+
+	onDestroy(() => {
+		console.log('destroy editor content', editor);
+		if (!editor) {
+			return;
+		}
+
+		editor.contentElement = null;
+
+		if (!editor.options.element.firstChild) {
+			return;
+		}
+
+		const newElement = document.createElement('div');
+		newElement.append(...Array.from(editor.options.element.childNodes));
+
+		editor.setOptions({
+			element: newElement,
+		});
+	});
+</script>
+
+<div bind:this={element}></div>
+
+{#if children}
+	{@render children()}
+{/if}

package/dist/components/presentation-editor/layers/types/html/editor/editor-content.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentInputProps } from './types.js';
+type Props = ComponentInputProps<{}>;
+declare const EditorContent: import("svelte").Component<Props, {}, "">;
+type EditorContent = ReturnType<typeof EditorContent>;
+export default EditorContent;

package/dist/components/presentation-editor/layers/types/html/editor/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Editor.js';
+export { default as createEditor } from './createEditor.js';
+export { default as EditorContent } from './editor-content.svelte';

package/dist/components/presentation-editor/layers/types/html/editor/index.js

@@ -0,0 +1,3 @@
+export * from './Editor.js';
+export { default as createEditor } from './createEditor.js';
+export { default as EditorContent } from './editor-content.svelte';

package/dist/components/presentation-editor/layers/types/html/editor/types.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { Editor } from './Editor.js';
+export interface TiptapNodeViewContext {
+    onDragStart: (event: DragEvent) => void;
+}
+export type ComponentInputProps<T> = Partial<T> & {
+    editor: Editor;
+    class?: string;
+    children?: Snippet;
+};

package/dist/components/presentation-editor/layers/types/html/editor/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/presentation-editor/layers/types/html/editor.css

@@ -0,0 +1,7 @@
+.ProseMirror {
+	@apply caret-black outline-0 selection:bg-black/10 dark:caret-white dark:selection:bg-white/20;
+
+	.selection {
+		@apply bg-black/10 dark:bg-white/20;
+	}
+}

package/dist/components/presentation-editor/layers/types/html/extensions/font-size/font-size.d.ts

@@ -0,0 +1,20 @@
+import { Extension } from '@tiptap/core';
+import '@tiptap/extension-text-style';
+export type FontSizeOptions = {
+    types: string[];
+};
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        fontSize: {
+            /**
+             * Set the font size
+             */
+            setFontSize: (fontSize: number) => ReturnType;
+            /**
+             * Unset the font size
+             */
+            unsetFontSize: () => ReturnType;
+        };
+    }
+}
+export declare const FontSize: Extension<FontSizeOptions, any>;

package/dist/components/presentation-editor/layers/types/html/extensions/font-size/font-size.js

@@ -0,0 +1,44 @@
+import { Extension } from '@tiptap/core';
+import '@tiptap/extension-text-style';
+export const FontSize = Extension.create({
+    name: 'fontSize',
+    addOptions() {
+        return {
+            types: [],
+        };
+    },
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    fontSize: {
+                        default: null,
+                        parseHTML: (element) => element.style.fontSize?.replace(/['"\D]+/g, ''),
+                        renderHTML: (attributes) => {
+                            if (!attributes.fontSize) {
+                                return {};
+                            }
+                            return {
+                                style: `font-size: ${attributes.fontSize}px`,
+                            };
+                        },
+                    },
+                },
+            },
+        ];
+    },
+    addCommands() {
+        return {
+            setFontSize: (fontSize) => ({ 
+            // chain,
+            commands, }) => {
+                return this.options.types.every((type) => commands.updateAttributes(type, { fontSize }));
+                // return chain().setMark('textStyle', { fontSize }).run();
+            },
+            unsetFontSize: () => ({ chain }) => {
+                return chain().setMark('textStyle', { fontSize: null }).removeEmptyTextStyle().run();
+            },
+        };
+    },
+});

package/dist/components/presentation-editor/layers/types/html/extensions/font-size/index.d.ts

@@ -0,0 +1,3 @@
+import { FontSize } from './font-size.js';
+export * from './font-size.js';
+export default FontSize;

package/dist/components/presentation-editor/layers/types/html/extensions/font-size/index.js

@@ -0,0 +1,3 @@
+import { FontSize } from './font-size.js';
+export * from './font-size.js';
+export default FontSize;

package/dist/components/presentation-editor/layers/types/html/extensions/line-height/index.d.ts

@@ -0,0 +1,3 @@
+import { LineHeight } from './line-height.js';
+export * from './line-height.js';
+export default LineHeight;

package/dist/components/presentation-editor/layers/types/html/extensions/line-height/index.js

@@ -0,0 +1,3 @@
+import { LineHeight } from './line-height.js';
+export * from './line-height.js';
+export default LineHeight;

package/dist/components/presentation-editor/layers/types/html/extensions/line-height/line-height.d.ts

@@ -0,0 +1,22 @@
+import { Extension } from '@tiptap/core';
+export interface LineHeightOptions {
+    types: string[];
+    min: number;
+    max: number;
+    defaultHeight: number;
+}
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        lineHeight: {
+            /**
+             * Set the line height attribute
+             */
+            setLineHeight: (height: number) => ReturnType;
+            /**
+             * Unset the text align attribute
+             */
+            unsetLineHeight: () => ReturnType;
+        };
+    }
+}
+export declare const LineHeight: Extension<LineHeightOptions, any>;

package/dist/components/presentation-editor/layers/types/html/extensions/line-height/line-height.js

@@ -0,0 +1,44 @@
+import { Extension } from '@tiptap/core';
+export const LineHeight = Extension.create({
+    name: 'lineHeight',
+    addOptions() {
+        return {
+            types: ['heading', 'paragraph'],
+            min: 0.5,
+            max: 2.5,
+            defaultHeight: 1.4,
+        };
+    },
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    lineHeight: {
+                        default: this.options.defaultHeight,
+                        parseHTML: (element) => element.style.lineHeight,
+                        renderHTML: (attributes) => {
+                            // if (attributes.lineHeight === this.options.defaultHeight) {
+                            //   return {};
+                            // }
+                            return { style: `line-height: ${attributes.lineHeight}` };
+                        },
+                    },
+                },
+            },
+        ];
+    },
+    addCommands() {
+        return {
+            setLineHeight: (height) => ({ commands }) => {
+                if (this.options.min > height || this.options.max < height) {
+                    return false;
+                }
+                return this.options.types.every((type) => commands.updateAttributes(type, { lineHeight: height }));
+            },
+            unsetLineHeight: () => ({ commands }) => {
+                return this.options.types.every((type) => commands.resetAttributes(type, 'lineHeight'));
+            },
+        };
+    },
+});

package/dist/components/presentation-editor/layers/types/html/extensions/selection/index.d.ts

@@ -0,0 +1,3 @@
+import { Selection } from './selection.js';
+export * from './selection.js';
+export default Selection;

package/dist/components/presentation-editor/layers/types/html/extensions/selection/index.js

@@ -0,0 +1,3 @@
+import { Selection } from './selection.js';
+export * from './selection.js';
+export default Selection;

package/dist/components/presentation-editor/layers/types/html/extensions/selection/selection.d.ts

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

package/dist/components/presentation-editor/layers/types/html/extensions/selection/selection.js

@@ -0,0 +1,30 @@
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { Decoration, DecorationSet } from '@tiptap/pm/view';
+export const Selection = Extension.create({
+    name: 'selection',
+    addProseMirrorPlugins() {
+        const { editor } = this;
+        return [
+            new Plugin({
+                key: new PluginKey('selection'),
+                props: {
+                    decorations(state) {
+                        if (state.selection.empty) {
+                            return null;
+                        }
+                        if (editor.isFocused === true) {
+                            return null;
+                        }
+                        return DecorationSet.create(state.doc, [
+                            Decoration.inline(state.selection.from, state.selection.to, {
+                                class: 'selection',
+                            }),
+                        ]);
+                    },
+                },
+            }),
+        ];
+    },
+});
+export default Selection;

package/dist/components/presentation-editor/layers/types/html/extensions/text-transform/index.d.ts

@@ -0,0 +1,3 @@
+import { TextTransform } from './text-transform.js';
+export * from './text-transform.js';
+export default TextTransform;

package/dist/components/presentation-editor/layers/types/html/extensions/text-transform/index.js

@@ -0,0 +1,3 @@
+import { TextTransform } from './text-transform.js';
+export * from './text-transform.js';
+export default TextTransform;

package/dist/components/presentation-editor/layers/types/html/extensions/text-transform/text-transform.d.ts

@@ -0,0 +1,20 @@
+import { Extension } from '@tiptap/core';
+import '@tiptap/extension-text-style';
+export type TextTransformOptions = {
+    types: string[];
+};
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        textTransform: {
+            /**
+             * Set the text transform
+             */
+            setTextTransform: (textTransform: string) => ReturnType;
+            /**
+             * Unset the text transform
+             */
+            unsetTextTransform: () => ReturnType;
+        };
+    }
+}
+export declare const TextTransform: Extension<TextTransformOptions, any>;

package/dist/components/presentation-editor/layers/types/html/extensions/text-transform/text-transform.js

@@ -0,0 +1,50 @@
+import { Extension } from '@tiptap/core';
+import '@tiptap/extension-text-style';
+export const TextTransform = Extension.create({
+    name: 'textTransform',
+    addOptions() {
+        return {
+            types: [],
+        };
+    },
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    textTransform: {
+                        default: null,
+                        parseHTML: (element) => element.style.textTransform,
+                        renderHTML: (attributes) => {
+                            if (!attributes.textTransform) {
+                                return {};
+                            }
+                            return {
+                                style: `text-transform: ${attributes.textTransform}`,
+                            };
+                        },
+                    },
+                },
+            },
+        ];
+    },
+    addCommands() {
+        return {
+            setTextTransform: (textTransform) => ({ 
+            // chain,
+            commands, }) => {
+                return this.options.types.every((type) => commands.updateAttributes(type, { textTransform }));
+                // return chain().setMark('textTransform', { textTransform }).run();
+            },
+            unsetTextTransform: () => ({ 
+            // chain,
+            commands, }) => {
+                return this.options.types.every((type) => commands.updateAttributes(type, { textTransform: null }));
+                // return chain()
+                //   .setMark('textTransform', { textTransform: null })
+                //   .removeEmptyTextStyle()
+                //   .run();
+            },
+        };
+    },
+});

package/dist/components/presentation-editor/layers/types/html/extensions/unstyled-list/index.d.ts

@@ -0,0 +1,3 @@
+import { UnstyledList } from './unstyled-list.js';
+export * from './unstyled-list.js';
+export default UnstyledList;

package/dist/components/presentation-editor/layers/types/html/extensions/unstyled-list/index.js

@@ -0,0 +1,3 @@
+import { UnstyledList } from './unstyled-list.js';
+export * from './unstyled-list.js';
+export default UnstyledList;

package/dist/components/presentation-editor/layers/types/html/extensions/unstyled-list/unstyled-list.d.ts

@@ -0,0 +1,47 @@
+import { Node } from '@tiptap/core';
+export interface UnstyledListOptions {
+    /**
+     * The node name for the list items
+     * @default 'listItem'
+     * @example 'paragraph'
+     */
+    itemTypeName: string;
+    /**
+     * HTML attributes to add to the unstyled list element
+     * @default {}
+     * @example { class: 'foo' }
+     */
+    HTMLAttributes: Record<string, any>;
+    /**
+     * Keep the marks when splitting the list
+     * @default false
+     * @example true
+     */
+    keepMarks: boolean;
+    /**
+     * Keep the attributes when splitting the list
+     * @default false
+     * @example true
+     */
+    keepAttributes: boolean;
+}
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        unstyledList: {
+            /**
+             * Toggle a unstyled list
+             */
+            toggleUnstyledList: () => ReturnType;
+        };
+    }
+}
+/**
+ * Matches a unstyled list to a dash or asterisk.
+ */
+export declare const inputRegex: RegExp;
+/**
+ * This extension allows you to create unstyled lists.
+ * This requires the ListItem extension
+ * @see https://tiptap.dev/api/nodes/list-item.
+ */
+export declare const UnstyledList: Node<UnstyledListOptions, any>;

package/dist/components/presentation-editor/layers/types/html/extensions/unstyled-list/unstyled-list.js

@@ -0,0 +1,74 @@
+import { mergeAttributes, Node, wrappingInputRule } from '@tiptap/core';
+import ListItem from '@tiptap/extension-list-item';
+import TextStyle from '@tiptap/extension-text-style';
+/**
+ * Matches a unstyled list to a dash or asterisk.
+ */
+export const inputRegex = /^\s*([-+*])\s$/;
+/**
+ * This extension allows you to create unstyled lists.
+ * This requires the ListItem extension
+ * @see https://tiptap.dev/api/nodes/list-item.
+ */
+export const UnstyledList = Node.create({
+    name: 'unstyledList',
+    addOptions() {
+        return {
+            itemTypeName: 'listItem',
+            HTMLAttributes: {},
+            keepMarks: false,
+            keepAttributes: false,
+        };
+    },
+    group: 'block list',
+    content() {
+        return `${this.options.itemTypeName}+`;
+    },
+    parseHTML() {
+        return [{ tag: 'ul' }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ['ul', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+    },
+    addCommands() {
+        return {
+            toggleUnstyledList: () => ({ commands, chain }) => {
+                const selection = this.editor.view.state.selection;
+                console.log('selection', selection.from, selection.to, selection);
+                if (this.options.keepAttributes) {
+                    console.log(TextStyle.name, this.editor.getAttributes(TextStyle.name));
+                    console.log('fontSize', this.editor.getAttributes('fontSize'));
+                    return chain()
+                        .toggleList(this.name, this.options.itemTypeName, this.options.keepMarks)
+                        .updateAttributes(ListItem.name, this.editor.getAttributes(TextStyle.name))
+                        .run();
+                }
+                return commands.toggleList(this.name, this.options.itemTypeName, this.options.keepMarks);
+            },
+        };
+    },
+    addKeyboardShortcuts() {
+        return {
+            'Mod-Shift-9': () => this.editor.commands.toggleUnstyledList(),
+        };
+    },
+    addInputRules() {
+        let inputRule = wrappingInputRule({
+            find: inputRegex,
+            type: this.type,
+        });
+        if (this.options.keepMarks || this.options.keepAttributes) {
+            inputRule = wrappingInputRule({
+                find: inputRegex,
+                type: this.type,
+                keepMarks: this.options.keepMarks,
+                keepAttributes: this.options.keepAttributes,
+                getAttributes: () => {
+                    return this.editor.getAttributes(TextStyle.name);
+                },
+                editor: this.editor,
+            });
+        }
+        return [inputRule];
+    },
+});

package/dist/components/presentation-editor/layers/types/html/html-content.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { BROWSER } from 'esm-env';
+	import { generateHTML, type JSONContent } from '@tiptap/core';
+	import { extensions } from './index.js';
+
+	let { html } = $props();
+
+	const getHtml = (html: JSONContent) => {
+		try {
+			return generateHTML(html, extensions);
+		} catch (err) {
+			console.error(err);
+			return '<p></p>';
+		}
+	};
+</script>
+
+{#if BROWSER}
+	<!-- eslint-disable svelte/no-at-html-tags -->
+	{@html getHtml(html)}
+{/if}

package/dist/components/presentation-editor/layers/types/html/html-content.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const HtmlContent: import("svelte").Component<{
+    html: any;
+}, {}, "">;
+type HtmlContent = ReturnType<typeof HtmlContent>;
+export default HtmlContent;