@peteai/presentation-editor 0.0.6 → 0.0.8

package/dist/components/{presentation-editor/layers/types/html → editor/layers/types/text}/buttons/strikethrough-button/strikethrough-button.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-	import StrikethroughIcon from 'lucide-svelte/icons/strikethrough';
+	import StrikethroughIcon from '@lucide/svelte/icons/strikethrough';
 	import { Toggle } from '../../../../../../ui/toggle/index.js';
-	import type { HtmlLayer } from '../../../../../types.js';
-	import { getPresentationEditorContext } from '../../../../../presentation-editor.svelte.js';
+	import type { TextLayer } from '../../../../../types.js';
+	import { getEditorContext } from '../../../../../editor.svelte.js';
 	import { createEditorNotReactive } from '../../editor/utils.js';
 
 	interface Props {
-		layers: HtmlLayer[];
+		layers: TextLayer[];
 	}
 
 	let { layers = $bindable() }: Props = $props();
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	const { htmlEditor } = editor;
 
@@ -36,9 +36,8 @@
 				$htmlEditor.chain().focus().unsetStrike().run();
 			}
 		} else {
-			editor.historyPush({
-				type: 'layersGroup',
-				actions: layers.map((layer) => {
+			editor.historyPush(
+				layers.map((layer) => {
 					let chain = editorNotReactive.chain().setContent(layer.html).selectAll();
 					if (value) {
 						chain = chain.setStrike();
@@ -48,14 +47,14 @@
 					chain.run();
 
 					return {
-						type: 'layer',
-						slideId: editor.activeSlide.id,
+						type: 'layerUpdate',
+						pageId: editor.activePage.id,
 						layer: { id: layer.id, type: layer.type },
 						undo: { html: layer.html },
 						redo: { html: editorNotReactive.getJSON() },
 					};
 				}),
-			});
+			);
 		}
 	};
 </script>

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

@@ -1,6 +1,6 @@
-import type { HtmlLayer } from '../../../../../types.js';
+import type { TextLayer } from '../../../../../types.js';
 interface Props {
-    layers: HtmlLayer[];
+    layers: TextLayer[];
 }
 declare const StrikethroughButton: import("svelte").Component<Props, {}, "layers">;
 type StrikethroughButton = ReturnType<typeof StrikethroughButton>;

package/dist/components/{presentation-editor/layers/types/html → editor/layers/types/text}/buttons/underline-button/underline-button.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-	import UnderlineIcon from 'lucide-svelte/icons/underline';
+	import UnderlineIcon from '@lucide/svelte/icons/underline';
 	import { Toggle } from '../../../../../../ui/toggle/index.js';
-	import type { HtmlLayer } from '../../../../../types.js';
-	import { getPresentationEditorContext } from '../../../../../presentation-editor.svelte.js';
+	import type { TextLayer } from '../../../../../types.js';
+	import { getEditorContext } from '../../../../../editor.svelte.js';
 	import { createEditorNotReactive } from '../../editor/utils.js';
 
 	interface Props {
-		layers: HtmlLayer[];
+		layers: TextLayer[];
 	}
 
 	let { layers = $bindable() }: Props = $props();
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	const { htmlEditor } = editor;
 
@@ -36,9 +36,8 @@
 				$htmlEditor.chain().focus().unsetUnderline().run();
 			}
 		} else {
-			editor.historyPush({
-				type: 'layersGroup',
-				actions: layers.map((layer) => {
+			editor.historyPush(
+				layers.map((layer) => {
 					let chain = editorNotReactive.chain().setContent(layer.html).selectAll();
 					if (value) {
 						chain = chain.setUnderline();
@@ -48,14 +47,14 @@
 					chain.run();
 
 					return {
-						type: 'layer',
-						slideId: editor.activeSlide.id,
+						type: 'layerUpdate',
+						pageId: editor.activePage.id,
 						layer: { id: layer.id, type: layer.type },
 						undo: { html: layer.html },
 						redo: { html: editorNotReactive.getJSON() },
 					};
 				}),
-			});
+			);
 		}
 	};
 </script>

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

@@ -1,6 +1,6 @@
-import type { HtmlLayer } from '../../../../../types.js';
+import type { TextLayer } from '../../../../../types.js';
 interface Props {
-    layers: HtmlLayer[];
+    layers: TextLayer[];
 }
 declare const UnderlineButton: import("svelte").Component<Props, {}, "layers">;
 type UnderlineButton = ReturnType<typeof UnderlineButton>;

package/dist/components/{presentation-editor/layers/types/html → editor/layers/types/text}/editor/utils.d.ts

@@ -2,6 +2,8 @@ import { type JSONContent } from '@tiptap/core';
 import { Editor } from './Editor.js';
 export declare const DEFAULT_COLOR = "#000000";
 export declare const createEditorNotReactive: (content?: JSONContent) => Editor;
+export declare const extractSelectionListStyleTypes: (editor: Editor, set?: Set<string>) => string[];
+export declare const extractNodeListStyleTypes: (content: JSONContent, set?: Set<string>) => string[];
 export declare const extractSelectionFonts: (editor: Editor) => string[];
 export declare const extractNodeFonts: (content: JSONContent, set?: Set<string>) => string[];
 export declare const extractSelectionFontSizes: (editor: Editor) => number[];

package/dist/components/editor/layers/types/text/editor/utils.js

@@ -0,0 +1,166 @@
+import {} from '@tiptap/core';
+import { Editor } from './Editor.js';
+import { extensions } from '../extensions.js';
+export const DEFAULT_COLOR = '#000000';
+export const createEditorNotReactive = (content) => {
+    return new Editor({
+        extensions,
+        injectCSS: false,
+        content,
+    });
+};
+export const extractSelectionListStyleTypes = (editor, set = new Set()) => {
+    const { state } = editor.view;
+    const { from, to } = state.selection;
+    state.doc.nodesBetween(from, to, (node, pos) => {
+        if (node.type.name === 'list') {
+            if (node.attrs.listStyleType) {
+                node.forEach((item, itemOffset) => {
+                    item.forEach((child, childOffset) => {
+                        if (child.isTextblock) {
+                            const start = pos + itemOffset + childOffset;
+                            const end = start + child.nodeSize;
+                            if (start <= to && end >= from) {
+                                set.add(node.attrs.listStyleType);
+                            }
+                            return false;
+                        }
+                    });
+                });
+            }
+        }
+    });
+    return Array.from(set);
+};
+export const extractNodeListStyleTypes = (content, set = new Set()) => {
+    if (content.type === 'list') {
+        if (content.attrs?.listStyleType) {
+            set.add(content.attrs.listStyleType);
+        }
+    }
+    content.content?.forEach((content) => extractNodeListStyleTypes(content, set));
+    return Array.from(set);
+};
+export const extractSelectionFonts = (editor) => {
+    const { state } = editor.view;
+    const { from, to } = state.selection;
+    const set = new Set();
+    state.doc.nodesBetween(from, to, (node, pos) => {
+        if (node.attrs.fontFamily) {
+            if (node.isTextblock) {
+                set.add(node.attrs.fontFamily);
+                return false;
+            }
+            else {
+                node.forEach((child, offset) => {
+                    if (child.isTextblock) {
+                        const start = pos + offset;
+                        const end = start + child.nodeSize;
+                        if (start <= to && end >= from) {
+                            set.add(node.attrs.fontFamily);
+                        }
+                        return false;
+                    }
+                });
+            }
+        }
+    });
+    return Array.from(set);
+};
+export const extractNodeFonts = (content, set = new Set()) => {
+    if (content.type !== 'text') {
+        if (content.attrs?.fontFamily) {
+            set.add(content.attrs.fontFamily);
+        }
+        content.content?.forEach((content) => extractNodeFonts(content, set));
+    }
+    return Array.from(set);
+};
+export const extractSelectionFontSizes = (editor) => {
+    const { state } = editor.view;
+    const { from, to } = state.selection;
+    const set = new Set();
+    state.doc.nodesBetween(from, to, (node, pos) => {
+        if (node.attrs.fontSize) {
+            if (node.isTextblock) {
+                set.add(node.attrs.fontSize);
+                return false;
+            }
+            else {
+                node.forEach((child, offset) => {
+                    if (child.isTextblock) {
+                        const start = pos + offset;
+                        const end = start + child.nodeSize;
+                        if (start <= to && end >= from) {
+                            set.add(node.attrs.fontSize);
+                        }
+                        return false;
+                    }
+                });
+            }
+        }
+    });
+    return Array.from(set);
+};
+export const extractNodeFontSizes = (content, set = new Set()) => {
+    if (content.type !== 'text') {
+        if (content.attrs?.fontSize) {
+            set.add(content.attrs.fontSize);
+        }
+        content.content?.forEach((content) => extractNodeFontSizes(content, set));
+    }
+    return Array.from(set);
+};
+export const extractSelectionColors = (editor) => {
+    const selection = editor.view.state.selection;
+    const set = new Set();
+    editor.view.state.doc.nodesBetween(selection.from, selection.to, (node) => {
+        if (node.isText && node.text?.trim().length) {
+            const color = node.marks?.find((mark) => mark.type.name === 'textStyle')?.attrs?.color;
+            set.add(color || DEFAULT_COLOR);
+        }
+    });
+    return Array.from(set);
+};
+export const extractNodeColors = (content, set = new Set()) => {
+    if (content.type === 'text') {
+        const color = content.marks?.find((mark) => mark.type === 'textStyle')?.attrs?.color;
+        set.add(color || DEFAULT_COLOR);
+    }
+    else {
+        if (content.attrs?.color) {
+            set.add(content.attrs.color);
+        }
+    }
+    content.content?.forEach((content) => extractNodeColors(content, set));
+    return Array.from(set);
+};
+export const extractUppercase = (editor) => {
+    const { state } = editor.view;
+    const { from, to } = state.selection;
+    let uppercase = null;
+    const checkUppercase = (node) => {
+        uppercase = uppercase !== false && node.attrs.textTransform === 'uppercase';
+    };
+    state.doc.nodesBetween(from, to, (node, pos) => {
+        if (node.type.spec.attrs?.['textTransform'] !== undefined) {
+            if (node.isTextblock) {
+                checkUppercase(node);
+                return false;
+            }
+            else {
+                node.forEach((child, offset) => {
+                    if (child.isTextblock) {
+                        const start = pos + offset;
+                        const end = start + child.nodeSize;
+                        if (start <= to && end >= from) {
+                            checkUppercase(node);
+                        }
+                        return false;
+                    }
+                });
+            }
+        }
+    });
+    return !!uppercase;
+};

package/dist/components/editor/layers/types/text/extensions/list/index.d.ts

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

package/dist/components/editor/layers/types/text/extensions/list/index.js

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

package/dist/components/editor/layers/types/text/extensions/list/list.d.ts

@@ -0,0 +1,67 @@
+import { Node, type InputRuleFinder, type ExtendedRegExpMatchArray, InputRule } from '@tiptap/core';
+import type { Node as ProseMirrorNode, NodeType } from '@tiptap/pm/model';
+export interface ListOptions {
+    /**
+     * The node name for the list items
+     * @default 'listItem'
+     * @example 'paragraph'
+     */
+    itemTypeName: string;
+    /**
+     * HTML attributes to add to the list element
+     * @default {}
+     * @example { class: 'foo' }
+     */
+    HTMLAttributes: Record<string, any>;
+    /**
+     * A list of list style types.
+     * @default ['disc', 'decimal', 'lower-alpha', 'lower-roman', 'upper-alpha', 'upper-roman']
+     * @example ['disc', 'decimal']
+     */
+    styleTypes: string[];
+}
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        list: {
+            /**
+             * Toggle a list
+             */
+            toggleListStyleType: (listStyleType?: string) => ReturnType;
+        };
+    }
+}
+/**
+ * Matches a list to a dash or asterisk.
+ */
+export declare const bulletListInputRegex: RegExp;
+/**
+ * Matches an ordered list to a 1. on input (or any number followed by a dot).
+ */
+export declare const orderedListInputRegex: RegExp;
+/**
+ * Build an input rule for automatically wrapping a textblock when a
+ * given string is typed. When using a regular expresion you’ll
+ * probably want the regexp to start with `^`, so that the pattern can
+ * only occur at the start of a textblock.
+ *
+ * `type` is the type of node to wrap in.
+ *
+ * By default, if there’s a node with the same type above the newly
+ * wrapped node, the rule will try to join those
+ * two nodes. You can pass a join predicate, which takes a regular
+ * expression match and the node before the wrapped node, and can
+ * return a boolean to indicate whether a join should happen.
+ * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#input-rules
+ */
+export declare function wrappingInputRule(config: {
+    find: InputRuleFinder;
+    type: NodeType;
+    getAttributes?: Record<string, any> | ((match: ExtendedRegExpMatchArray) => Record<string, any>) | false | null;
+    joinPredicate?: (match: ExtendedRegExpMatchArray, node: ProseMirrorNode) => boolean;
+}): InputRule;
+/**
+ * This extension allows you to create lists.
+ * This requires the ListItem extension
+ * @see https://tiptap.dev/api/nodes/list-item.
+ */
+export declare const List: Node<ListOptions, any>;

package/dist/components/editor/layers/types/text/extensions/list/list.js

@@ -0,0 +1,237 @@
+import { mergeAttributes, Node, InputRule, callOrReturn, getNodeType, } from '@tiptap/core';
+import { TextSelection } from '@tiptap/pm/state';
+import { canJoin } from '@tiptap/pm/transform';
+/**
+ * Matches a list to a dash or asterisk.
+ */
+export const bulletListInputRegex = /^\s*([-+*])\s$/;
+/**
+ * Matches an ordered list to a 1. on input (or any number followed by a dot).
+ */
+export const orderedListInputRegex = /^(\d+)\.\s$/;
+/**
+ * Build an input rule for automatically wrapping a textblock when a
+ * given string is typed. When using a regular expresion you’ll
+ * probably want the regexp to start with `^`, so that the pattern can
+ * only occur at the start of a textblock.
+ *
+ * `type` is the type of node to wrap in.
+ *
+ * By default, if there’s a node with the same type above the newly
+ * wrapped node, the rule will try to join those
+ * two nodes. You can pass a join predicate, which takes a regular
+ * expression match and the node before the wrapped node, and can
+ * return a boolean to indicate whether a join should happen.
+ * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#input-rules
+ */
+export function wrappingInputRule(config) {
+    return new InputRule({
+        find: config.find,
+        handler: ({ state, range, match, chain }) => {
+            const attributes = callOrReturn(config.getAttributes, undefined, match) || {};
+            const tr = state.tr.delete(range.from, range.to);
+            const $start = tr.doc.resolve(range.from);
+            const paragraph = $start.node();
+            if (paragraph.type.name !== 'paragraph')
+                return null;
+            const blockRange = $start.blockRange();
+            if (!blockRange)
+                return null;
+            const { schema } = state;
+            const listItemType = schema.nodes.listItem;
+            const listItemParagraphType = schema.nodes.listItemParagraph;
+            if (!listItemType || !listItemParagraphType)
+                return null;
+            // Create the wrapper list node
+            const list = config.type.create(attributes, [
+                listItemType.createChecked(paragraph.attrs, listItemParagraphType.create(null, paragraph.content)),
+            ]);
+            // Replace the current block with the new list
+            tr.replaceRangeWith($start.pos, tr.mapping.map($start.pos + paragraph.nodeSize), list);
+            // Put cursor inside the new paragraph
+            const $pos = state.tr.doc.resolve(range.from + 2); // inside listItemParagraph
+            tr.setSelection(TextSelection.near($pos));
+            tr.scrollIntoView();
+            const before = tr.doc.resolve(range.from - 1).nodeBefore;
+            if (before &&
+                before.type === config.type &&
+                canJoin(tr.doc, range.from - 1) &&
+                (!config.joinPredicate || config.joinPredicate(match, before))) {
+                tr.join(range.from - 1);
+            }
+        },
+    });
+}
+/**
+ * This extension allows you to create lists.
+ * This requires the ListItem extension
+ * @see https://tiptap.dev/api/nodes/list-item.
+ */
+export const List = Node.create({
+    name: 'list',
+    addOptions() {
+        return {
+            itemTypeName: 'listItem',
+            HTMLAttributes: {},
+            styleTypes: [
+                'disc',
+                'circle',
+                'square',
+                'decimal',
+                'lower-alpha',
+                'upper-alpha',
+                'upper-roman',
+            ],
+        };
+    },
+    group: 'block list',
+    content() {
+        return `${this.options.itemTypeName}+`;
+    },
+    parseHTML() {
+        return [{ tag: 'ul' }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ['ul', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+    },
+    addAttributes() {
+        return {
+            listStyleType: {
+                default: 'disc',
+                parseHTML: (element) => {
+                    return element.style.getPropertyValue('list-style-type');
+                },
+                renderHTML: (attributes) => {
+                    return { style: `list-style-type: ${attributes.listStyleType}` };
+                },
+            },
+        };
+    },
+    addCommands() {
+        return {
+            toggleListStyleType: (listStyleType) => ({ tr, state, dispatch }) => {
+                if (listStyleType && !this.options.styleTypes.includes(listStyleType))
+                    return false;
+                const listType = getNodeType('list', state.schema);
+                const listItemType = getNodeType('listItem', state.schema);
+                const listItemParagraphType = getNodeType('listItemParagraph', state.schema);
+                const paragraphType = getNodeType('paragraph', state.schema);
+                const { from, to } = state.selection;
+                if (!dispatch)
+                    return true;
+                if (!listStyleType) {
+                    const blocksToConvert = [];
+                    state.doc.nodesBetween(from, to, (node, pos) => {
+                        if (node.type === listType) {
+                            const block = {
+                                nodes: [],
+                                pos,
+                                nodesSize: node.nodeSize,
+                            };
+                            state.doc.nodesBetween(pos, pos + node.nodeSize, (node, pos) => {
+                                if (node.type === listItemType) {
+                                    block.nodes.push(node);
+                                }
+                            });
+                            if (block.nodes.length > 0) {
+                                blocksToConvert.push(block);
+                            }
+                            return false;
+                        }
+                    });
+                    blocksToConvert.reverse().forEach(({ nodes, pos, nodesSize }) => {
+                        const paragraphs = [];
+                        nodes.forEach((item) => {
+                            item.forEach((child) => {
+                                if (child.isTextblock) {
+                                    // Create paragraph with item attributes
+                                    paragraphs.push(paragraphType.create(item.attrs, child.content));
+                                }
+                            });
+                        });
+                        tr.replaceWith(pos, pos + nodesSize, paragraphs);
+                    });
+                    return true;
+                }
+                const blocksToConvert = [];
+                state.doc.nodesBetween(from, to, (node, pos) => {
+                    if (node.type === listType) {
+                        // convert if the any child textblock node overlaps with selection
+                        let shouldConvert = false;
+                        node.forEach((item, itemOffset) => {
+                            item.forEach((child, childOffset) => {
+                                if (child.isTextblock) {
+                                    const start = pos + itemOffset + childOffset;
+                                    const end = start + child.nodeSize;
+                                    if (!shouldConvert && start < to && end > from) {
+                                        shouldConvert = true;
+                                    }
+                                }
+                            });
+                        });
+                        if (shouldConvert) {
+                            tr.setNodeMarkup(pos, null, { ...node.attrs, listStyleType });
+                        }
+                    }
+                    else if (node.type === paragraphType) {
+                        const block = blocksToConvert.find((block) => block.pos + block.nodesSize === pos);
+                        if (block) {
+                            block.nodes.push(node);
+                            block.nodesSize += node.nodeSize;
+                        }
+                        else {
+                            blocksToConvert.push({
+                                nodes: [node],
+                                pos,
+                                nodesSize: node.nodeSize,
+                            });
+                        }
+                        return false;
+                    }
+                });
+                // Convert collected paragraphs to lists
+                blocksToConvert.reverse().forEach(({ nodes, pos, nodesSize }) => {
+                    const listItems = nodes.map((node) => {
+                        // Create list item with paragraph attributes and content
+                        const paragraphContent = listItemParagraphType.create(null, node.content);
+                        return listItemType.create(node.attrs, [paragraphContent]);
+                    });
+                    const list = listType.create({ listStyleType }, listItems);
+                    tr.replaceWith(pos, pos + nodesSize, list);
+                    const listDepth = tr.doc.resolve(pos + 1).depth;
+                    const before = tr.doc.resolve(Math.max(0, pos - 1)).before(listDepth);
+                    if (before !== undefined) {
+                        const nodeBefore = tr.doc.nodeAt(before);
+                        const canJoinBackwards = list.type === nodeBefore?.type && canJoin(tr.doc, pos);
+                        if (canJoinBackwards) {
+                            tr.join(pos);
+                        }
+                    }
+                    const after = tr.doc.resolve(pos + 1).after(listDepth);
+                    if (after !== undefined) {
+                        const nodeAfter = tr.doc.nodeAt(after);
+                        const canJoinForwards = list.type === nodeAfter?.type && canJoin(tr.doc, after);
+                        if (canJoinForwards) {
+                            tr.join(after);
+                        }
+                    }
+                });
+                return true;
+            },
+        };
+    },
+    addInputRules() {
+        return [
+            { regex: bulletListInputRegex, attributes: { listStyleType: 'disc' } },
+            { regex: orderedListInputRegex, attributes: { listStyleType: 'decimal' } },
+        ]
+            .filter((rule) => this.options.styleTypes.includes(rule.attributes.listStyleType))
+            .map(({ regex, attributes }) => {
+            return wrappingInputRule({
+                find: regex,
+                type: this.type,
+                getAttributes: () => attributes,
+            });
+        });
+    },
+});

package/dist/components/editor/layers/types/text/extensions/list-item/index.d.ts

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

package/dist/components/editor/layers/types/text/extensions/list-item/index.js

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

package/dist/components/editor/layers/types/text/extensions/list-item/list-item.d.ts

@@ -0,0 +1,13 @@
+import { Node as TiptapNode } from '@tiptap/core';
+export interface ListItemOptions {
+    /**
+     * The HTML attributes for a list item node.
+     * @default {}
+     * @example { class: 'foo' }
+     */
+    HTMLAttributes: Record<string, any>;
+}
+/**
+ * This extension allows you to create list items.
+ */
+export declare const ListItem: TiptapNode<ListItemOptions, any>;