@welshman/editor 0.0.1 → 0.0.3

package/README.md

@@ -1,3 +1,3 @@
 # @welshman/editor [![version](https://badgen.net/npm/v/@welshman/editor)](https://npmjs.com/package/@welshman/editor)
 
-A good batteries-included configuration of nostr-editor for svelte apps.
+A batteries-included nostr-editor.

package/dist/components/EditBolt11.svelte

@@ -0,0 +1,10 @@
+<script>import { NodeViewWrapper } from "svelte-tiptap";
+export let node;
+export let selected;
+</script>
+
+<NodeViewWrapper as="span">
+  <button class="tiptap-object {selected ? 'tiptap-active' : ''}">
+    {node.attrs.lnbc.slice(0, 16)}...
+  </button>
+</NodeViewWrapper>

package/dist/components/EditBolt11.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { NodeViewProps } from "@tiptap/core";
+declare const __propDef: {
+    props: {
+        node: NodeViewProps["node"];
+        selected: NodeViewProps["selected"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type EditBolt11Props = typeof __propDef.props;
+export type EditBolt11Events = typeof __propDef.events;
+export type EditBolt11Slots = typeof __propDef.slots;
+export default class EditBolt11 extends SvelteComponent<EditBolt11Props, EditBolt11Events, EditBolt11Slots> {
+}
+export {};

package/dist/components/EditEvent.svelte

@@ -0,0 +1,11 @@
+<script>import { fromNostrURI } from "@welshman/util";
+import { NodeViewWrapper } from "svelte-tiptap";
+export let node;
+export let selected;
+</script>
+
+<NodeViewWrapper as="span">
+  <button class="tiptap-object {selected ? 'tiptap-active' : ''}">
+    {fromNostrURI(node.attrs.nevent).slice(0, 16)}...
+  </button>
+</NodeViewWrapper>

package/dist/components/EditEvent.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { NodeViewProps } from "@tiptap/core";
+declare const __propDef: {
+    props: {
+        node: NodeViewProps["node"];
+        selected: NodeViewProps["selected"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type EditEventProps = typeof __propDef.props;
+export type EditEventEvents = typeof __propDef.events;
+export type EditEventSlots = typeof __propDef.slots;
+export default class EditEvent extends SvelteComponent<EditEventProps, EditEventEvents, EditEventSlots> {
+}
+export {};

package/dist/components/EditMedia.svelte

@@ -0,0 +1,10 @@
+<script>import { NodeViewWrapper } from "svelte-tiptap";
+export let node;
+export let selected;
+$: selectedClass = selected ? "tiptap-active" : "";
+$: uploadingClass = node.attrs.uploading ? "tiptap-uploading" : "";
+</script>
+
+<NodeViewWrapper as="span" class="tiptap-object {selectedClass} {uploadingClass}">
+  {node.attrs.file?.name || node.attrs.src}
+</NodeViewWrapper>

package/dist/components/EditMedia.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { NodeViewProps } from "@tiptap/core";
+declare const __propDef: {
+    props: {
+        node: NodeViewProps["node"];
+        selected: NodeViewProps["selected"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type EditMediaProps = typeof __propDef.props;
+export type EditMediaEvents = typeof __propDef.events;
+export type EditMediaSlots = typeof __propDef.slots;
+export default class EditMedia extends SvelteComponent<EditMediaProps, EditMediaEvents, EditMediaSlots> {
+}
+export {};

package/dist/components/EditMention.svelte

@@ -0,0 +1,10 @@
+<script>import { NodeViewWrapper } from "svelte-tiptap";
+export let node;
+export let selected;
+</script>
+
+<NodeViewWrapper as="span">
+  <button class="tiptap-object {selected ? 'tiptap-active' : ''}">
+    @{node.attrs.nprofile.slice(0, 16)}...
+  </button>
+</NodeViewWrapper>

package/dist/components/EditMention.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { NodeViewProps } from "@tiptap/core";
+declare const __propDef: {
+    props: {
+        node: NodeViewProps["node"];
+        selected: NodeViewProps["selected"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type EditMentionProps = typeof __propDef.props;
+export type EditMentionEvents = typeof __propDef.events;
+export type EditMentionSlots = typeof __propDef.slots;
+export default class EditMention extends SvelteComponent<EditMentionProps, EditMentionEvents, EditMentionSlots> {
+}
+export {};

package/dist/components/SuggestionString.svelte

@@ -0,0 +1,4 @@
+<script>export let value;
+</script>
+
+{value}

package/dist/components/SuggestionString.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type SuggestionStringProps = typeof __propDef.props;
+export type SuggestionStringEvents = typeof __propDef.events;
+export type SuggestionStringSlots = typeof __propDef.slots;
+export default class SuggestionString extends SvelteComponent<SuggestionStringProps, SuggestionStringEvents, SuggestionStringSlots> {
+}
+export {};

package/dist/components/Suggestions.svelte

@@ -0,0 +1,71 @@
+<svelte:options accessors />
+
+<script>import { fly } from "svelte/transition";
+import { throttle, clamp } from "@welshman/lib";
+export let term;
+export let search;
+export let select;
+export let component;
+export let allowCreate = false;
+let index = 0;
+let element;
+let items = [];
+$: populateItems(term);
+const populateItems = throttle(300, (term2) => {
+  items = $search(term2).slice(0, 5);
+});
+const setIndex = (newIndex, block) => {
+  index = clamp([0, items.length - 1], newIndex);
+};
+export const onKeyDown = (e) => {
+  if (["Enter", "Tab"].includes(e.code)) {
+    const value = items[index];
+    if (value) {
+      select(value);
+      return true;
+    } else if (term && allowCreate) {
+      select(term);
+      return true;
+    }
+  }
+  if (e.code === "Space" && term && allowCreate) {
+    select(term);
+    return true;
+  }
+  if (e.code === "ArrowUp") {
+    setIndex(index - 1, "start");
+    return true;
+  }
+  if (e.code === "ArrowDown") {
+    setIndex(index + 1, "start");
+    return true;
+  }
+};
+</script>
+
+{#if term}
+  <div bind:this={element} transition:fly|local={{duration: 200}} class="tiptap-suggestions">
+    <div class="tiptap-suggestions__content">
+      {#if term && allowCreate && !items.includes(term)}
+        <button
+          class="tiptap-suggestions__create"
+          on:mousedown|preventDefault|stopPropagation
+          on:click|preventDefault|stopPropagation={() => select(term)}>
+          Use "<svelte:component this={component} value={term} />"
+        </button>
+      {/if}
+      {#each items as value, i (value)}
+        <button
+          class="tiptap-suggestions__item"
+          class:tiptap-suggestions__selected={index === i}
+          on:mousedown|preventDefault|stopPropagation
+          on:click|preventDefault|stopPropagation={() => select(value)}>
+          <svelte:component this={component} {value} />
+        </button>
+      {/each}
+    </div>
+    {#if items.length === 0}
+      <div class="tiptap-suggestions__empty">No results</div>
+    {/if}
+  </div>
+{/if}

package/dist/components/Suggestions.svelte.d.ts

@@ -0,0 +1,41 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        term: any;
+        search: any;
+        select: any;
+        component: any;
+        allowCreate?: boolean;
+        onKeyDown?: (e: any) => true | undefined;
+    };
+    events: {
+        mousedown: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type SuggestionsProps = typeof __propDef.props;
+export type SuggestionsEvents = typeof __propDef.events;
+export type SuggestionsSlots = typeof __propDef.slots;
+export default class Suggestions extends SvelteComponent<SuggestionsProps, SuggestionsEvents, SuggestionsSlots> {
+    get onKeyDown(): (e: any) => true | undefined;
+    get term(): any;
+    /**accessor*/
+    set term(_: any);
+    get search(): any;
+    /**accessor*/
+    set search(_: any);
+    get select(): any;
+    /**accessor*/
+    set select(_: any);
+    get component(): any;
+    /**accessor*/
+    set component(_: any);
+    get allowCreate(): boolean | undefined;
+    /**accessor*/
+    set allowCreate(_: boolean | undefined);
+}
+export {};

package/dist/components/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Suggestions } from "./Suggestions.svelte";
+export { default as SuggestionString } from "./SuggestionString.svelte";
+export { default as EditBolt11 } from "./EditBolt11.svelte";
+export { default as EditMedia } from "./EditMedia.svelte";
+export { default as EditEvent } from "./EditEvent.svelte";
+export { default as EditMention } from "./EditMention.svelte";

package/dist/components/index.js

@@ -0,0 +1,6 @@
+export { default as Suggestions } from "./Suggestions.svelte";
+export { default as SuggestionString } from "./SuggestionString.svelte";
+export { default as EditBolt11 } from "./EditBolt11.svelte";
+export { default as EditMedia } from "./EditMedia.svelte";
+export { default as EditEvent } from "./EditEvent.svelte";
+export { default as EditMention } from "./EditMention.svelte";

package/dist/extensions/BreakOrSubmit.d.ts

@@ -0,0 +1,8 @@
+import { type HardBreakOptions } from "@tiptap/extension-hard-break";
+export interface BreakOrSubmitOptions extends HardBreakOptions {
+    /** Handler for when enter is pressed. */
+    submit: () => void;
+    /** Whether to call `submit` on unmodified Enter */
+    aggressive?: boolean;
+}
+export declare const BreakOrSubmit: import("@tiptap/core").Node<BreakOrSubmitOptions, any>;

package/dist/extensions/BreakOrSubmit.js

@@ -0,0 +1,12 @@
+import { HardBreak } from "@tiptap/extension-hard-break";
+export const BreakOrSubmit = HardBreak.extend({
+    addKeyboardShortcuts() {
+        return {
+            "Shift-Enter": () => this.editor.commands.setHardBreak(),
+            "Mod-Enter": () => {
+                this.options.submit();
+                return true;
+            },
+        };
+    },
+});

package/dist/extensions/CodeInline.d.ts

@@ -0,0 +1,4 @@
+import { Node } from "@tiptap/core";
+import type { CodeOptions } from "@tiptap/extension-code";
+export type CodeInlineOptions = object;
+export declare const CodeInline: Node<CodeOptions, any>;

package/dist/extensions/CodeInline.js

@@ -0,0 +1,65 @@
+import { InputRule, mergeAttributes, Node, PasteRule } from "@tiptap/core";
+const inputRegex = /(?:^|\s)(`(?!\s+`)((?:[^`]+))`(?!\s+`))$/;
+const pasteRegex = /(?:^|\s)(`(?!\s+`)((?:[^`]+))`(?!\s+`))/g;
+export const CodeInline = Node.create({
+    name: "codeInline",
+    content: "text*",
+    marks: "",
+    group: "inline",
+    inline: true,
+    code: true,
+    defining: true,
+    addOptions() {
+        return {
+            HTMLAttributes: {},
+        };
+    },
+    parseHTML() {
+        return [{ tag: "code" }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ["code", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+    },
+    addKeyboardShortcuts() {
+        return {
+            // remove code block when at start of document or code block is empty
+            Backspace: () => {
+                const { empty, $anchor, $from } = this.editor.state.selection;
+                const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2;
+                if (!empty || $anchor.parent.type.name !== this.name) {
+                    return false;
+                }
+                if (isAtEnd) {
+                    const { tr } = this.editor.state;
+                    tr.delete($from.start(), $from.end() + 1);
+                    this.editor.view.dispatch(tr);
+                }
+                return false;
+            },
+        };
+    },
+    addInputRules() {
+        return [
+            new InputRule({
+                find: inputRegex,
+                handler: ({ state, range, match }) => {
+                    const textNode = state.schema.text(match[2]);
+                    const codeNode = this.type.create(null, textNode);
+                    state.tr.replaceWith(range.from, range.to, codeNode).insertText(" ");
+                },
+            }),
+        ];
+    },
+    addPasteRules() {
+        return [
+            new PasteRule({
+                find: pasteRegex,
+                handler: ({ state, range, match }) => {
+                    const textNode = state.schema.text(match[2]);
+                    const codeNode = this.type.create(null, textNode);
+                    state.tr.replaceWith(range.from, range.to, codeNode).insertText(" ");
+                },
+            }),
+        ];
+    },
+});

package/dist/extensions/Welshman.d.ts

@@ -0,0 +1,45 @@
+import type { StampedEvent, SignedEvent } from "@welshman/util";
+import type { CodeBlockOptions } from "@tiptap/extension-code-block";
+import type { DropcursorOptions } from "@tiptap/extension-dropcursor";
+import type { HistoryOptions } from "@tiptap/extension-history";
+import type { ParagraphOptions } from "@tiptap/extension-paragraph";
+import type { PlaceholderOptions } from "@tiptap/extension-placeholder";
+import type { NostrOptions, FileUploadOptions, ImageOptions, LinkOptions, NSecRejectOptions } from "nostr-editor";
+import { type CodeInlineOptions } from "./CodeInline.js";
+import { type BreakOrSubmitOptions } from "./BreakOrSubmit.js";
+export type ChildExtensionOptions<C = any, E = any> = false | {
+    extend?: Partial<E>;
+    config?: Partial<C>;
+};
+export type EmptyOptions = object;
+export type WelshmanExtensionOptions = {
+    bolt11?: false;
+    breakOrSubmit: ChildExtensionOptions<BreakOrSubmitOptions>;
+    codeInline?: ChildExtensionOptions<CodeInlineOptions>;
+    codeBlock?: ChildExtensionOptions<CodeBlockOptions>;
+    document?: false;
+    dropcursor?: ChildExtensionOptions<DropcursorOptions>;
+    fileUpload?: ChildExtensionOptions<FileUploadOptions>;
+    gapcursor?: false;
+    history?: ChildExtensionOptions<HistoryOptions>;
+    image?: ChildExtensionOptions<ImageOptions>;
+    link?: ChildExtensionOptions<LinkOptions>;
+    naddr?: ChildExtensionOptions<EmptyOptions>;
+    nevent?: ChildExtensionOptions<EmptyOptions>;
+    nprofile?: ChildExtensionOptions<EmptyOptions>;
+    nsecReject?: ChildExtensionOptions<NSecRejectOptions>;
+    paragraph?: ChildExtensionOptions<ParagraphOptions>;
+    placeholder?: ChildExtensionOptions<PlaceholderOptions>;
+    tag?: false;
+    text?: false;
+    video?: false;
+    wordCount?: false;
+};
+export interface WelshmanOptions extends NostrOptions {
+    submit?: () => void;
+    sign?: (event: StampedEvent) => Promise<SignedEvent>;
+    defaultUploadUrl?: string;
+    defaultUploadType?: "nip96" | "blossom";
+    extensions?: WelshmanExtensionOptions;
+}
+export declare const WelshmanExtension: import("@tiptap/core").Extension<WelshmanOptions, import("nostr-editor").NostrStorage>;

package/dist/extensions/Welshman.js

@@ -0,0 +1,153 @@
+import { toNostrURI } from "@welshman/util";
+import { deepMergeLeft } from "@welshman/lib";
+import { SvelteNodeViewRenderer } from "svelte-tiptap";
+import { CodeBlock } from "@tiptap/extension-code-block";
+import { Document } from "@tiptap/extension-document";
+import { Dropcursor } from "@tiptap/extension-dropcursor";
+import { Gapcursor } from "@tiptap/extension-gapcursor";
+import { History } from "@tiptap/extension-history";
+import { Paragraph } from "@tiptap/extension-paragraph";
+import { Text } from "@tiptap/extension-text";
+import { Placeholder } from "@tiptap/extension-placeholder";
+import { NostrExtension, Bolt11Extension, FileUploadExtension, ImageExtension, LinkExtension, NAddrExtension, NEventExtension, NProfileExtension, TagExtension, VideoExtension, NSecRejectExtension, } from "nostr-editor";
+import { WordCount } from "./WordCount.js";
+import { CodeInline } from "./CodeInline.js";
+import { BreakOrSubmit } from "./BreakOrSubmit.js";
+import { EditBolt11, EditMedia, EditEvent, EditMention } from "../components/index.js";
+export const WelshmanExtension = NostrExtension.extend({
+    name: "welshman",
+    // Return an empty object or else options can't be passed
+    addOptions() {
+        return {};
+    },
+    addExtensions() {
+        const { sign, submit, defaultUploadUrl = "https://nostr.build", defaultUploadType = "nip96", } = this.options;
+        if (!sign)
+            throw new Error("sign is a required argument to WelshmanExtension");
+        if (!submit)
+            throw new Error("submit is a required argument to WelshmanExtension");
+        const extensionOptions = deepMergeLeft(this.options.extensions || {}, {
+            codeInline: {
+                extend: {
+                    renderText: (props) => "`" + props.node.textContent + "`",
+                },
+            },
+            codeBlock: {
+                extend: {
+                    renderText: (props) => "```" + props.node.textContent + "```",
+                },
+            },
+            bolt11: {
+                config: {
+                    inline: true,
+                    group: "inline",
+                },
+                extend: {
+                    addNodeView: () => SvelteNodeViewRenderer(EditBolt11),
+                },
+            },
+            image: {
+                config: {
+                    inline: true,
+                    group: "inline",
+                    defaultUploadUrl,
+                    defaultUploadType,
+                },
+                extend: {
+                    addNodeView: () => SvelteNodeViewRenderer(EditMedia),
+                },
+            },
+            video: {
+                config: {
+                    inline: true,
+                    group: "inline",
+                    defaultUploadUrl,
+                    defaultUploadType,
+                },
+                extend: {
+                    addNodeView: () => SvelteNodeViewRenderer(EditMedia),
+                },
+            },
+            nevent: {
+                config: {
+                    inline: true,
+                    group: "inline",
+                },
+                extend: {
+                    renderText: (props) => toNostrURI(props.node.attrs.nevent),
+                    addNodeView: () => SvelteNodeViewRenderer(EditEvent),
+                },
+            },
+            naddr: {
+                config: {
+                    inline: true,
+                    group: "inline",
+                },
+                extend: {
+                    renderText: (props) => toNostrURI(props.node.attrs.naddr),
+                    addNodeView: () => SvelteNodeViewRenderer(EditEvent),
+                },
+            },
+            nprofile: {
+                extend: {
+                    renderText: (props) => toNostrURI(props.node.attrs.nprofile),
+                    addNodeView: () => SvelteNodeViewRenderer(EditMention),
+                },
+            },
+            breakOrSubmit: {
+                config: {
+                    submit,
+                },
+            },
+            fileUpload: {
+                config: {
+                    sign,
+                    immediateUpload: true,
+                    allowedMimeTypes: [
+                        "image/jpeg",
+                        "image/png",
+                        "image/gif",
+                        "image/webp",
+                        "video/mp4",
+                        "video/mpeg",
+                        "video/webm",
+                    ],
+                },
+            },
+        });
+        const extensions = [];
+        const addExtension = (extension, options) => {
+            if (options === false)
+                return;
+            if (options?.extend) {
+                extension = extension.extend(options.extend);
+            }
+            if (options?.config) {
+                extension = extension.configure(options.config);
+            }
+            extensions.push(extension);
+        };
+        addExtension(Document, extensionOptions.document);
+        addExtension(Text, extensionOptions.text);
+        addExtension(Paragraph, extensionOptions.paragraph);
+        addExtension(History, extensionOptions.history);
+        addExtension(CodeBlock, extensionOptions.codeBlock);
+        addExtension(CodeInline, extensionOptions.codeInline);
+        addExtension(Dropcursor, extensionOptions.dropcursor);
+        addExtension(FileUploadExtension, extensionOptions.fileUpload);
+        addExtension(Gapcursor, extensionOptions.gapcursor);
+        addExtension(BreakOrSubmit, extensionOptions.breakOrSubmit);
+        addExtension(ImageExtension, extensionOptions.image);
+        addExtension(LinkExtension, extensionOptions.link);
+        addExtension(NAddrExtension, extensionOptions.naddr);
+        addExtension(NEventExtension, extensionOptions.nevent);
+        addExtension(NProfileExtension, extensionOptions.nprofile);
+        addExtension(NSecRejectExtension, extensionOptions.nsecReject);
+        addExtension(Placeholder, extensionOptions.placeholder);
+        addExtension(TagExtension, extensionOptions.tag);
+        addExtension(VideoExtension, extensionOptions.video);
+        addExtension(Bolt11Extension, extensionOptions.bolt11);
+        addExtension(WordCount, extensionOptions.wordCount);
+        return extensions;
+    },
+});

package/dist/extensions/WordCount.d.ts

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

package/dist/extensions/WordCount.js

@@ -0,0 +1,15 @@
+import { Extension } from "@tiptap/core";
+export const WordCount = Extension.create({
+    name: "wordCount",
+    addStorage() {
+        return {
+            words: 0,
+            chars: 0,
+        };
+    },
+    onUpdate() {
+        const text = this.editor.state.doc.textContent;
+        this.storage.words = text.split(/\s+/).filter(word => word.length > 0).length;
+        this.storage.chars = text.length;
+    },
+});

package/dist/extensions/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./BreakOrSubmit.js";
+export * from "./CodeInline.js";
+export * from "./Welshman.js";
+export * from "./WordCount.js";

package/dist/extensions/index.js

@@ -0,0 +1,4 @@
+export * from "./BreakOrSubmit.js";
+export * from "./CodeInline.js";
+export * from "./Welshman.js";
+export * from "./WordCount.js";