@peteai/presentation-editor 0.0.6 → 0.0.7

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

@@ -0,0 +1,264 @@
+import { findParentNode, findParentNodeClosestToPos, getNodeType, getSplittedAttributes, isList, mergeAttributes, Node as TiptapNode, } from '@tiptap/core';
+import { sinkListItem as originalSinkListItem, liftListItem as originalLiftListItem, } from '@tiptap/pm/schema-list';
+import { Fragment, Node, Slice } from '@tiptap/pm/model';
+import { canSplit, ReplaceAroundStep } from '@tiptap/pm/transform';
+import { TextSelection } from '@tiptap/pm/state';
+/**
+ * This extension allows you to create list items.
+ */
+export const ListItem = TiptapNode.create({
+    name: 'listItem',
+    addOptions() {
+        return {
+            HTMLAttributes: {},
+        };
+    },
+    content: 'listItemParagraph (listItemParagraph|list)*',
+    defining: true,
+    parseHTML() {
+        return [
+            {
+                tag: 'li',
+            },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ['li', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+    },
+    addCommands() {
+        return {
+            splitListItem: (typeOrName, overrideAttrs) => ({ editor, tr, state, dispatch }) => {
+                console.log('splitListItem overwritten');
+                const type = getNodeType(typeOrName, state.schema);
+                const { $from, $to } = state.selection;
+                // @ts-ignore
+                // eslint-disable-next-line
+                const node = state.selection.node;
+                if ((node && node.isBlock) || $from.depth < 2 || !$from.sameParent($to)) {
+                    return false;
+                }
+                const grandParent = $from.node(-1);
+                if (grandParent.type !== type) {
+                    return false;
+                }
+                const extensionAttributes = editor.extensionManager.attributes;
+                if ($from.parent.content.size === 0 &&
+                    $from.node(-1).childCount === $from.indexAfter(-1)) {
+                    // In an empty block. If this is a nested list, the wrapping
+                    // list item should be split. Otherwise, bail out and let next
+                    // command handle lifting.
+                    if ($from.depth === 2 || $from.node(-3).type !== type) {
+                        // PATCH: replace the list item with a paragraph if not nested list
+                        if (dispatch) {
+                            const paragraphType = state.schema.nodes.paragraph;
+                            const range = state.selection.$from.blockRange(state.selection.$to);
+                            const target = 0;
+                            if (!range)
+                                return false;
+                            let { $from, $to, depth } = range;
+                            let gapStart = $from.before(depth + 1), gapEnd = $to.after(depth + 1);
+                            let start = gapStart, end = gapEnd;
+                            let before = Fragment.empty, openStart = 0;
+                            for (let d = depth, splitting = false; d > target; d--) {
+                                if (splitting || $from.index(d) > 0) {
+                                    splitting = true;
+                                    before = Fragment.from($from.node(d).copy(before));
+                                    openStart++;
+                                }
+                                else {
+                                    start--;
+                                }
+                            }
+                            let after = Fragment.empty, openEnd = 0;
+                            for (let d = depth, splitting = false; d > target; d--) {
+                                if (splitting || $to.after(d + 1) < $to.end(d)) {
+                                    splitting = true;
+                                    after = Fragment.from($to.node(d).copy(after));
+                                    openEnd++;
+                                }
+                                else {
+                                    end++;
+                                }
+                            }
+                            tr.step(new ReplaceAroundStep(start, end, gapStart + 1, gapEnd - 1, new Slice(before
+                                .append(Fragment.from(paragraphType.create(grandParent.attrs || {})))
+                                .append(after), openStart, openEnd), before.size - openStart + 1, true));
+                            dispatch(tr.scrollIntoView());
+                        }
+                        return true;
+                    }
+                    if ($from.index(-2) !== $from.node(-2).childCount - 1)
+                        return false;
+                    return true;
+                }
+                const nextType = $to.pos === $from.end() ? grandParent.contentMatchAt(0).defaultType : null;
+                const newTypeAttributes = {
+                    ...getSplittedAttributes(extensionAttributes, grandParent.type.name, grandParent.attrs),
+                    ...overrideAttrs,
+                };
+                const newNextTypeAttributes = {
+                    ...getSplittedAttributes(extensionAttributes, $from.node().type.name, $from.node().attrs),
+                    ...overrideAttrs,
+                };
+                tr.delete($from.pos, $to.pos);
+                const types = nextType
+                    ? [
+                        { type, attrs: newTypeAttributes },
+                        { type: nextType, attrs: newNextTypeAttributes },
+                    ]
+                    : [{ type, attrs: newTypeAttributes }];
+                if (!canSplit(tr.doc, $from.pos, 2)) {
+                    return false;
+                }
+                if (dispatch) {
+                    const { selection, storedMarks } = state;
+                    const { splittableMarks } = editor.extensionManager;
+                    const marks = storedMarks || (selection.$to.parentOffset && selection.$from.marks());
+                    tr.split($from.pos, 2, types).scrollIntoView();
+                    if (!marks || !dispatch) {
+                        return true;
+                    }
+                    const filteredMarks = marks.filter((mark) => splittableMarks.includes(mark.type.name));
+                    tr.ensureMarks(filteredMarks);
+                }
+                return true;
+            },
+            sinkListItem: () => ({ editor, tr, state, dispatch }) => {
+                const { extensions } = editor.extensionManager;
+                const type = getNodeType(this.name, state.schema);
+                // // Check if there's a paragraph node within the current selection
+                // const paragraphType = getNodeType('paragraph', state.schema);
+                // let hasParagraph = false;
+                // state.doc.nodesBetween($from.pos, $to.pos, (node) => {
+                // 	if (node.type === paragraphType) {
+                // 		hasParagraph = true;
+                // 		return false; // Stop traversal once we find a paragraph
+                // 	}
+                // });
+                // if (hasParagraph) {
+                // 	if (!dispatch) return true;
+                // 	state.doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
+                // 		if (node.type == paragraphType && node.attrs.indent < 8) {
+                // 			tr.setNodeMarkup(pos, null, {
+                // 				...node.attrs,
+                // 				indent: node.attrs.indent + 1,
+                // 			});
+                // 			return false;
+                // 		}
+                // 	});
+                // 	dispatch(tr.scrollIntoView());
+                // 	return true;
+                // }
+                const oldParentList = findParentNode((node) => isList(node.type.name, extensions))(state.selection);
+                return originalSinkListItem(type)(state, (tr) => {
+                    if (!dispatch)
+                        return;
+                    dispatch(tr);
+                    // apply old list attributes if new list is created
+                    const newParentList = findParentNode((node) => isList(node.type.name, extensions))(tr.selection);
+                    if (oldParentList && newParentList) {
+                        // Check if selection is in first list item
+                        const firstListItem = findParentNodeClosestToPos(tr.selection.$from, (node) => node.type.name === this.name);
+                        if (firstListItem && newParentList.node.firstChild === firstListItem.node) {
+                            console.log('firstListItem', firstListItem);
+                            const attrs = {
+                                ...newParentList.node.attrs,
+                                ...oldParentList.node.attrs,
+                            };
+                            const newTr = tr.setNodeMarkup(newParentList.pos, undefined, attrs);
+                            dispatch(newTr);
+                        }
+                    }
+                });
+            },
+            liftListItem: () => ({ tr, state, dispatch }) => {
+                const type = getNodeType(this.name, state.schema);
+                const { selection } = state;
+                const { $from, $to, from, to } = selection;
+                // TODO: if root list items selected move them out of the list and replace with a paragraph
+                let range = $from.blockRange($to, (node) => node.childCount > 0 && node.firstChild.type == type);
+                if (!range)
+                    return false;
+                if (!dispatch)
+                    return true;
+                // lift out of list
+                if ($from.node(range.depth - 1).type != type) {
+                    const listItems = [];
+                    state.doc.nodesBetween(range.start, range.end, (node, pos) => {
+                        if (node.type == type) {
+                            // include if the listItem overlaps with selection
+                            const end = pos + node.nodeSize;
+                            if (end > range.start && pos < range.end) {
+                                listItems.push(node);
+                            }
+                            return false;
+                        }
+                    });
+                    const paragraphType = state.schema.nodes.paragraph;
+                    const fragment = Fragment.from(listItems.flatMap((node) => {
+                        const nodes = [];
+                        node.forEach((child) => {
+                            if (child.type.name === 'listItemParagraph') {
+                                nodes.push(paragraphType.create(node.attrs, child.content));
+                            }
+                            else {
+                                nodes.push(child);
+                            }
+                        });
+                        return nodes;
+                    }));
+                    const list = range.parent;
+                    const $start = tr.doc.resolve(range.start);
+                    const $end = tr.doc.resolve(range.end);
+                    const atStart = range.startIndex == 0;
+                    const atEnd = range.endIndex == list.childCount;
+                    const parent = $start.node(-1);
+                    const indexBefore = $start.index(-1);
+                    const indexAfter = $end.index(-1);
+                    if (!parent.canReplace(indexBefore + (atStart ? 0 : 1), indexAfter + (atEnd ? 0 : 1), fragment))
+                        return false;
+                    tr.replaceWith(range.start - (atStart ? 1 : 0), range.end + (atEnd ? 1 : 0), fragment);
+                    const offset = atStart ? 2 : 0;
+                    const shrink = (listItems.length - 1) * 2;
+                    tr.setSelection(TextSelection.create(tr.doc, from - offset, to - offset - shrink));
+                    dispatch(tr.scrollIntoView());
+                    return true;
+                }
+                // // Check if there's a paragraph node within the current selection
+                // const paragraphType = getNodeType('paragraph', state.schema);
+                // let hasParagraph = false;
+                // state.doc.nodesBetween($from.pos, $to.pos, (node) => {
+                // 	console.log('node', node, node.type.name);
+                // 	if (node.type === paragraphType) {
+                // 		hasParagraph = true;
+                // 		return false; // Stop traversal once we find a paragraph
+                // 	}
+                // });
+                // console.log('hasParagraph', hasParagraph);
+                // if (hasParagraph) {
+                // 	if (!dispatch) return true;
+                // 	state.doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
+                // 		if (node.type == paragraphType && node.attrs.indent > 0) {
+                // 			tr.setNodeMarkup(pos, null, {
+                // 				...node.attrs,
+                // 				indent: node.attrs.indent - 1,
+                // 			});
+                // 			return false;
+                // 		}
+                // 	});
+                // 	dispatch(tr.scrollIntoView());
+                // 	return true;
+                // }
+                // First apply the original liftListItem command
+                return originalLiftListItem(type)(state, dispatch);
+            },
+        };
+    },
+    addKeyboardShortcuts() {
+        return {
+            Enter: ({ editor }) => editor.commands.splitListItem(this.name),
+            Tab: () => this.editor.commands.sinkListItem(this.name),
+            'Shift-Tab': () => this.editor.commands.liftListItem(this.name),
+        };
+    },
+});

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { Node } from '@tiptap/core';
+export interface ListItemParagraphOptions {
+    /**
+     * The HTML attributes for a list item paragraph node.
+     * @default {}
+     * @example { class: 'foo' }
+     */
+    HTMLAttributes: Record<string, any>;
+}
+/**
+ * This extension allows you to create list item paragraphs.
+ * To be used as a child of a list item and distinct from a regular paragraph.
+ */
+export declare const ListItemParagraph: Node<ListItemParagraphOptions, any>;

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

@@ -0,0 +1,27 @@
+import { mergeAttributes, Node } from '@tiptap/core';
+/**
+ * This extension allows you to create list item paragraphs.
+ * To be used as a child of a list item and distinct from a regular paragraph.
+ */
+export const ListItemParagraph = Node.create({
+    name: 'listItemParagraph',
+    priority: 1000,
+    addOptions() {
+        return {
+            HTMLAttributes: {},
+        };
+    },
+    content: 'inline*',
+    parseHTML() {
+        return [{ tag: 'p', 'data-type': 'list-item-paragraph' }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return [
+            'p',
+            mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+                'data-type': 'list-item-paragraph',
+            }),
+            0,
+        ];
+    },
+});

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

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

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

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

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

@@ -0,0 +1,6 @@
+declare module '@tiptap/extension-paragraph' {
+    interface ParagraphOptions {
+        maxIndent: number;
+    }
+}
+export declare const Paragraph: import("@tiptap/core").Node<import("@tiptap/extension-paragraph").ParagraphOptions, any>;

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

@@ -0,0 +1,28 @@
+import { Paragraph as OriginalParagraph } from '@tiptap/extension-paragraph';
+export const Paragraph = OriginalParagraph.extend({
+    group: 'block',
+    addOptions() {
+        return {
+            ...this.parent?.(),
+            maxIndent: 6,
+        };
+    },
+    addAttributes() {
+        return {
+            indent: {
+                default: 0,
+                parseHTML: (element) => {
+                    return parseInt(element.style.getPropertyValue('--list-item-indent')) || 0;
+                },
+                renderHTML: (attributes) => {
+                    if (!attributes.indent) {
+                        return {};
+                    }
+                    return {
+                        style: `--list-item-indent: ${attributes.indent}; margin-left: calc(var(--list-item-indent)*1.7em)`,
+                    };
+                },
+            },
+        };
+    },
+});

package/dist/components/editor/layers/types/text/extensions/preserve-formatting-on-clear/index.d.ts

@@ -0,0 +1,3 @@
+import { PreserveFormattingOnClear } from './preserve-formatting-on-clear.js';
+export * from './preserve-formatting-on-clear.js';
+export default PreserveFormattingOnClear;

package/dist/components/editor/layers/types/text/extensions/preserve-formatting-on-clear/index.js

@@ -0,0 +1,3 @@
+import { PreserveFormattingOnClear } from './preserve-formatting-on-clear.js';
+export * from './preserve-formatting-on-clear.js';
+export default PreserveFormattingOnClear;

package/dist/components/editor/layers/types/text/extensions/preserve-formatting-on-clear/preserve-formatting-on-clear.d.ts

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

package/dist/components/editor/layers/types/text/extensions/preserve-formatting-on-clear/preserve-formatting-on-clear.js

@@ -0,0 +1,74 @@
+import { Extension } from '@tiptap/core';
+import { Plugin, TextSelection } from 'prosemirror-state';
+export const PreserveFormattingOnClear = Extension.create({
+    name: 'preserveFormattingOnClear',
+    addCommands() {
+        return {
+            selectAll: () => ({ state, tr, dispatch, chain }) => {
+                if (dispatch) {
+                    let firstPos = null;
+                    let lastPos = null;
+                    state.doc.descendants((node, pos) => {
+                        if (node.isTextblock) {
+                            if (firstPos == null)
+                                firstPos = pos + 1; // +1 = inside textblock
+                            lastPos = pos + node.nodeSize - 1; // before end of textblock
+                        }
+                    });
+                    if (firstPos != null && lastPos != null) {
+                        tr.setSelection(TextSelection.create(tr.doc, firstPos, lastPos));
+                    }
+                    dispatch(tr);
+                }
+                return true;
+            },
+        };
+    },
+    addProseMirrorPlugins() {
+        return [
+            new Plugin({
+                props: {
+                    handleKeyDown: (view, event) => {
+                        if (!(event.key === 'Backspace' || event.key === 'Delete'))
+                            return false;
+                        const { state } = view;
+                        const { selection, schema } = state;
+                        const docSize = state.doc.content.size;
+                        // const isSelectAll = selection.from === 1 && selection.to === docSize - 1;
+                        const selectedText = state.doc.textBetween(selection.from, selection.to);
+                        const isSelectAll = selectedText.length === state.doc.textContent.length;
+                        if (!isSelectAll)
+                            return false;
+                        // reference block (top-level block where the cursor was)
+                        const firstNode = state.doc.firstChild;
+                        if (!firstNode)
+                            return false;
+                        const refNode = firstNode.isTextblock ? firstNode : firstNode.firstChild;
+                        if (!refNode)
+                            return false;
+                        const nodeType = refNode.type;
+                        const nodeAttrs = { ...refNode.attrs };
+                        const marks = selection.$from.marks();
+                        // create a valid node instance with same attrs and marks
+                        let emptyNode = nodeType.createAndFill(nodeAttrs, null, marks);
+                        if (!emptyNode && schema.nodes.paragraph) {
+                            emptyNode = schema.nodes.paragraph.createAndFill({ ...nodeAttrs }, null, marks);
+                        }
+                        if (!emptyNode)
+                            return false;
+                        // replace whole doc content with the new node
+                        let tr = state.tr.replaceWith(0, docSize, emptyNode);
+                        // Resolve the inserted node in the new doc
+                        const $pos = tr.doc.resolve(1);
+                        tr.setSelection(TextSelection.create(tr.doc, $pos.pos + 1));
+                        // ensure inline marks persist for the first typed characters
+                        tr = tr.setStoredMarks(marks);
+                        view.dispatch(tr.scrollIntoView());
+                        event.preventDefault();
+                        return true;
+                    },
+                },
+            }),
+        ];
+    },
+});

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

@@ -16,11 +16,8 @@ export const TextTransform = Extension.create({
                         default: null,
                         parseHTML: (element) => element.style.textTransform,
                         renderHTML: (attributes) => {
-                            if (!attributes.textTransform) {
-                                return {};
-                            }
                             return {
-                                style: `text-transform: ${attributes.textTransform}`,
+                                style: `text-transform: ${attributes.textTransform || 'none'}`,
                             };
                         },
                     },

package/dist/components/{presentation-editor/layers/types/html → editor/layers/types/text}/extensions.js

@@ -1,10 +1,5 @@
 import { Document } from '@tiptap/extension-document';
-import { Paragraph } from '@tiptap/extension-paragraph';
 import { Text } from '@tiptap/extension-text';
-import { ListItem } from '@tiptap/extension-list-item';
-import { BulletList } from '@tiptap/extension-bullet-list';
-import { OrderedList } from '@tiptap/extension-ordered-list';
-import { UnstyledList } from './extensions/unstyled-list/index.js';
 import { ListKeymap } from '@tiptap/extension-list-keymap';
 import { TextStyle } from '@tiptap/extension-text-style';
 import { TextAlign } from '@tiptap/extension-text-align';
@@ -17,28 +12,22 @@ import { Bold } from '@tiptap/extension-bold';
 import { Italic } from '@tiptap/extension-italic';
 import { Underline } from '@tiptap/extension-underline';
 import { Strike } from '@tiptap/extension-strike';
+import { Paragraph } from './extensions/paragraph/index.js';
+import { ListItemParagraph } from './extensions/list-item-paragraph/index.js';
+import { ListItem } from './extensions/list-item/index.js';
+import { List } from './extensions/list/index.js';
 import { Selection } from './extensions/selection/index.js';
+import { PreserveFormattingOnClear } from './extensions/preserve-formatting-on-clear/index.js';
 export const extensions = [
     Document,
-    Paragraph,
     Text,
+    Paragraph,
+    ListItemParagraph,
     ListItem.configure({
-        HTMLAttributes: { style: 'margin-left: calc(var(--list-item-ident)*1em)' },
-    }),
-    BulletList.configure({
-        HTMLAttributes: { class: 'list-disc', style: '--list-item-ident: 1' },
-        keepAttributes: true,
-        keepMarks: true,
-    }),
-    OrderedList.configure({
-        HTMLAttributes: { class: 'list-decimal', style: '--list-item-ident: 1' },
-        keepAttributes: true,
-        keepMarks: true,
+        HTMLAttributes: { style: 'margin-left: calc(var(--list-item-indent)*1.7em)' },
     }),
-    UnstyledList.configure({
-        HTMLAttributes: { class: 'list-none', style: '--list-item-ident: 0' },
-        keepAttributes: true,
-        keepMarks: true,
+    List.configure({
+        HTMLAttributes: { style: '--list-item-indent: 1' },
     }),
     ListKeymap,
     TextStyle,
@@ -46,11 +35,12 @@ export const extensions = [
     TextAlign.configure({ types: ['paragraph', 'listItem'] }),
     LineHeight.configure({ types: ['paragraph', 'listItem'] }),
     TextTransform.configure({ types: ['paragraph', 'listItem'] }),
-    FontSize.configure({ types: ['paragraph', 'listItem', 'textStyle'] }),
-    Color.configure({ types: ['paragraph', 'listItem', 'textStyle'] }),
+    FontSize.configure({ types: ['paragraph', 'listItem'] }),
+    Color.configure({ types: ['textStyle'] }),
     Bold,
     Italic,
     Underline,
     Strike,
     Selection,
+    PreserveFormattingOnClear,
 ];

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

@@ -2,18 +2,9 @@
 	import { BROWSER } from 'esm-env';
 	import { generateHTML, type JSONContent } from '@tiptap/core';
 	import { extensions } from './extensions.js';
-	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
-	import { extractNodeFonts } from './editor/utils.js';
 
 	let { html } = $props();
 
-	const editor = getPresentationEditorContext();
-
-	if (BROWSER) {
-		const fontFamilies = extractNodeFonts(html);
-		Promise.all(fontFamilies.map(editor.loadFont));
-	}
-
 	const getHtml = (html: JSONContent) => {
 		try {
 			return generateHTML(html, extensions);

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

@@ -0,0 +1,5 @@
+import Root from './text-layer.svelte';
+import TextLayerContent from './text-layer-content.svelte';
+import HtmlContent from './html-content.svelte';
+import TextLayerEdit from './text-layer-edit.svelte';
+export { Root, Root as TextLayer, TextLayerContent, HtmlContent, TextLayerEdit };

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

@@ -0,0 +1,5 @@
+import Root from './text-layer.svelte';
+import TextLayerContent from './text-layer-content.svelte';
+import HtmlContent from './html-content.svelte';
+import TextLayerEdit from './text-layer-edit.svelte';
+export { Root, Root as TextLayer, TextLayerContent, HtmlContent, TextLayerEdit };

package/dist/components/{presentation-editor/layers/types/html/html-layer-content.svelte → editor/layers/types/text/text-layer-content.svelte}

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import type { HtmlLayer } from '../../../types.js';
+	import type { TextLayer } from '../../../types.js';
 	import { cn } from '../../../../../utils.js';
 	import HtmlContent from './html-content.svelte';
 
 	interface Props {
-		layer: HtmlLayer;
+		layer: TextLayer;
 		thumbScale?: number;
 		ref?: HTMLElement | null;
 	}

package/dist/components/editor/layers/types/text/text-layer-content.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { TextLayer } from '../../../types.js';
+interface Props {
+    layer: TextLayer;
+    thumbScale?: number;
+    ref?: HTMLElement | null;
+}
+declare const TextLayerContent: import("svelte").Component<Props, {}, "ref">;
+type TextLayerContent = ReturnType<typeof TextLayerContent>;
+export default TextLayerContent;