@welshman/editor 0.0.1 → 0.0.3

package/dist/index.css

@@ -0,0 +1,105 @@
+:root {
+  --tiptap-object-bg: #eee;
+  --tiptap-object-fg: #111;
+  --tiptap-active-bg: #ddd;
+  --tiptap-active-fg: #111;
+}
+
+.tiptap {
+  outline: none;
+  min-height: 0;
+  height: 100%;
+}
+
+.tiptap p.is-editor-empty:first-child::before {
+  color: #adb5bd;
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+
+.tiptap pre code {
+  display: block;
+  max-width: 100%;
+  overflow: auto;
+  padding: 0.25rem;
+  background-color: var(--tiptap-object-bg);
+  color: var(--tiptap-object-fg);
+}
+
+.tiptap .tiptap-object,
+.tiptap p code,
+.tiptap [tag] {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-radius: 3px;
+  padding: 0 0.25rem;
+  background-color: var(--tiptap-object-bg);
+  color: var(--tiptap-object-fg);
+}
+
+.tiptap .tiptap-active {
+  background-color: var(--tiptap-active-bg);
+  color: var(--tiptap-active-fg);
+}
+
+.tiptap .tiptap-uploading {
+  animation: tiptapFileUpload 1.5s infinite;
+}
+
+.tiptap-suggestions {
+  margin-top: 0.5rem;
+  max-height: 350px;
+}
+
+.tiptap-suggestions__content {
+  border-radius: 3px;
+  box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.2);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.tiptap-suggestions__create,
+.tiptap-suggestions__item {
+  white-space: nowrap;
+  display: block;
+  width: 100%;
+  min-width: 0px;
+  cursor: pointer;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  padding: 0.5rem 1rem;
+  text-align: left;
+  transition-duration: 100ms;
+  transition-property: color background-color;
+  background-color: var(--tiptap-object-bg);
+  color: var(--tiptap-object-fg);
+}
+
+.tiptap-suggestions__selected,
+.tiptap-suggestions__create:hover,
+.tiptap-suggestions__item:hover {
+  background-color: var(--tiptap-active-bg);
+  color: var(--tiptap-active-fg);
+}
+
+.tiptap-suggestions__empty {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+}
+
+@keyframes tiptapFileUpload {
+  0% {
+    opacity: 0.2;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.2;
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import './index.css';
+export * from './components/index.js';
+export * from './extensions/index.js';
+export * from './plugins/index.js';

package/dist/index.js

@@ -0,0 +1,4 @@
+import './index.css';
+export * from './components/index.js';
+export * from './extensions/index.js';
+export * from './plugins/index.js';

package/dist/plugins/TippySuggestion.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentType } from "svelte";
+import type { Readable } from "svelte/store";
+import type { Editor } from "svelte-tiptap";
+export type TippySuggestionOptions = {
+    char: string;
+    name: string;
+    editor: Editor;
+    search: Readable<(term: string) => string[]>;
+    select: (value: string, props: any) => void;
+    allowCreate?: boolean;
+    wrapper?: ComponentType;
+    component?: ComponentType;
+};
+export declare const TippySuggestion: ({ char, name, editor, search, select, allowCreate, wrapper, component, }: TippySuggestionOptions) => import("prosemirror-state").Plugin<any>;
+export type MentionSuggestionOptions = Partial<TippySuggestionOptions> & {
+    editor: Editor;
+    search: Readable<(term: string) => string[]>;
+    getRelays: (pubkey: string) => string[];
+};
+export declare const MentionSuggestion: (options: MentionSuggestionOptions) => import("prosemirror-state").Plugin<any>;

package/dist/plugins/TippySuggestion.js

@@ -0,0 +1,98 @@
+import tippy from "tippy.js";
+import { nprofileEncode } from "nostr-tools/nip19";
+import { PluginKey } from "@tiptap/pm/state";
+import Suggestion from "@tiptap/suggestion";
+import Suggestions from "../components/Suggestions.svelte";
+import SuggestionString from "../components/SuggestionString.svelte";
+export const TippySuggestion = ({ char, name, editor, search, select, allowCreate, wrapper = Suggestions, component = SuggestionString, }) => Suggestion({
+    char,
+    editor,
+    pluginKey: new PluginKey(`suggest-${name}`),
+    command: ({ editor, range, props }) => {
+        // increase range.to by one when the next node is of type "text"
+        // and starts with a space character
+        const nodeAfter = editor.view.state.selection.$to.nodeAfter;
+        const overrideSpace = nodeAfter?.text?.startsWith(" ");
+        if (overrideSpace) {
+            range.to += 1;
+        }
+        editor
+            .chain()
+            .focus()
+            .insertContentAt(range, [
+            { type: name, attrs: props },
+            { type: "text", text: " " },
+        ])
+            .run();
+        window.getSelection()?.collapseToEnd();
+    },
+    allow: ({ state, range }) => {
+        const $from = state.doc.resolve(range.from);
+        const type = state.schema.nodes[name];
+        return !!$from.parent.type.contentMatch.matchType(type);
+    },
+    render: () => {
+        let popover;
+        let suggestions;
+        const mapProps = (props) => ({
+            term: props.query,
+            search,
+            component,
+            allowCreate,
+            select: (value) => select(value, props),
+        });
+        return {
+            onStart: props => {
+                const target = document.createElement("div");
+                // @ts-ignore
+                popover = tippy("body", {
+                    getReferenceClientRect: props.clientRect,
+                    appendTo: document.querySelector("dialog[open]") || document.body,
+                    content: target,
+                    showOnCreate: true,
+                    interactive: true,
+                    trigger: "manual",
+                    placement: "bottom-start",
+                });
+                if (!props.query)
+                    popover[0].hide();
+                suggestions = new wrapper({ target, props: mapProps(props) });
+            },
+            onUpdate: props => {
+                if (props.query) {
+                    popover[0].show();
+                }
+                else {
+                    popover[0].hide();
+                }
+                suggestions.$set(mapProps(props));
+                if (props.clientRect) {
+                    popover[0].setProps({
+                        getReferenceClientRect: props.clientRect,
+                    });
+                }
+            },
+            onKeyDown: props => {
+                if (props.event.key === "Escape") {
+                    popover[0].hide();
+                    return true;
+                }
+                return Boolean(suggestions.onKeyDown?.(props.event));
+            },
+            onExit: () => {
+                popover[0].destroy();
+                suggestions.$destroy();
+            },
+        };
+    },
+});
+export const MentionSuggestion = (options) => TippySuggestion({
+    char: "@",
+    name: "nprofile",
+    select: (pubkey, props) => {
+        const relays = options.getRelays(pubkey);
+        const nprofile = nprofileEncode({ pubkey, relays });
+        return props.command({ pubkey, relays, nprofile });
+    },
+    ...options,
+});

package/dist/plugins/index.d.ts

@@ -0,0 +1 @@
+export * from "./TippySuggestion.js";

package/dist/plugins/index.js

@@ -0,0 +1 @@
+export * from "./TippySuggestion.js";

package/package.json

@@ -1,58 +1,80 @@
 {
-  "name": "@welshman/editor",
-  "version": "0.0.1",
-  "author": "hodlbod",
-  "license": "MIT",
-  "description": "A good batteries-included configuration of nostr-editor for svelte apps.",
-  "publishConfig": {
-    "access": "public"
-  },
-  "type": "module",
-  "files": [
-    "build"
-  ],
-  "engines": {
-    "node": ">=10.0.0"
-  },
-  "types": "./build/src/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./build/src/index.d.ts",
-      "import": "./build/src/index.mjs",
-      "require": "./build/src/index.cjs"
-    }
-  },
-  "scripts": {
-    "pub": "npm run lint && npm run build && npm publish",
-    "build": "gts clean && rollup -c rollup.config.js",
-    "lint": "gts lint",
-    "fix": "gts fix"
-  },
-  "dependencies": {
-    "@tiptap/core": "^2.10.3",
-    "@tiptap/extension-code": "^2.10.3",
-    "@tiptap/extension-code-block": "^2.10.3",
-    "@tiptap/extension-document": "^2.10.3",
-    "@tiptap/extension-dropcursor": "^2.10.3",
-    "@tiptap/extension-gapcursor": "^2.10.3",
-    "@tiptap/extension-hard-break": "^2.10.3",
-    "@tiptap/extension-history": "^2.10.3",
-    "@tiptap/extension-paragraph": "^2.10.3",
-    "@tiptap/extension-placeholder": "^2.10.3",
-    "@tiptap/extension-text": "^2.10.3",
-    "@tiptap/extension-youtube": "^2.10.3",
-    "@tiptap/pm": "^2.10.3",
-    "@tiptap/starter-kit": "^2.10.3",
-    "@tiptap/suggestion": "^2.10.3",
-    "@welshman/app": "^0.0.34",
-    "@welshman/lib": "^0.0.34",
-    "@welshman/util": "^0.0.52",
-    "nostr-editor": "^0.0.3",
-    "nostr-tools": "^2.10.4",
-    "prosemirror-model": "^1.24.1",
-    "prosemirror-state": "^1.4.3",
-    "svelte": "^4.2.19",
-    "svelte-tiptap": "^1.1.3",
-    "tippy.js": "^6.3.7"
-  }
+	"name": "@welshman/editor",
+	"version": "0.0.3",
+	"scripts": {
+		"pub": "npm run check && npm run build && npm publish",
+		"fix": "",
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"peerDependencies": {
+		"@tiptap/core": "^2.9.1",
+		"@tiptap/extension-code": "^2.9.1",
+		"@tiptap/extension-code-block": "^2.9.1",
+		"@tiptap/extension-document": "^2.9.1",
+		"@tiptap/extension-dropcursor": "^2.9.1",
+		"@tiptap/extension-gapcursor": "^2.9.1",
+		"@tiptap/extension-hard-break": "^2.9.1",
+		"@tiptap/extension-history": "^2.9.1",
+		"@tiptap/extension-paragraph": "^2.9.1",
+		"@tiptap/extension-placeholder": "^2.9.1",
+		"@tiptap/extension-text": "^2.9.1",
+		"@tiptap/pm": "^2.9.1",
+		"@tiptap/suggestion": "^2.9.1",
+		"@welshman/lib": "^0.0.36",
+		"@welshman/util": "^0.0.53",
+		"nostr-editor": "github:cesardeazevedo/nostr-editor#a211491c",
+		"nostr-tools": "^2.8.1",
+		"svelte": "^4.0.0",
+		"svelte-tiptap": "^1.0.0"
+	},
+	"devDependencies": {
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@tiptap/core": "^2.9.1",
+		"@tiptap/extension-code": "^2.9.1",
+		"@tiptap/extension-code-block": "^2.9.1",
+		"@tiptap/extension-document": "^2.9.1",
+		"@tiptap/extension-dropcursor": "^2.9.1",
+		"@tiptap/extension-gapcursor": "^2.9.1",
+		"@tiptap/extension-hard-break": "^2.9.1",
+		"@tiptap/extension-history": "^2.9.1",
+		"@tiptap/extension-paragraph": "^2.9.1",
+		"@tiptap/extension-placeholder": "^2.9.1",
+		"@tiptap/extension-text": "^2.9.1",
+		"@tiptap/pm": "^2.9.1",
+		"@welshman/lib": "^0.0.36",
+		"@welshman/util": "^0.0.53",
+		"nostr-editor": "github:cesardeazevedo/nostr-editor#a211491c",
+		"nostr-tools": "^2.10.4",
+		"publint": "^0.2.0",
+		"svelte": "^4.0.0",
+		"svelte-check": "^4.0.0",
+		"svelte-tiptap": "^1.0.0",
+		"tippy.js": "^6.0.0",
+		"typescript": "^5.0.0",
+		"vite": "^6.0.0"
+	}
 }