Add editor
This commit is contained in:
Jon Staab
@@ -1,3 +1,5 @@
|
||||
--ignore-dir=docs
|
||||
--ignore-dir=dist
|
||||
--ignore-dir=build
|
||||
--ignore-dir=.svelte-kit
|
||||
--ignore-file=match:yarn.lock
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
node_modules
|
||||
docs
|
||||
dist
|
||||
build
|
||||
.vscode
|
||||
.svelte-kit
|
||||
|
||||
Generated
+2720
-10
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,3 @@
|
||||
# @welshman/editor [](https://npmjs.com/package/@welshman/editor)
|
||||
|
||||
A batteries-included nostr-editor.
|
||||
@@ -0,0 +1,80 @@
|
||||
{
|
||||
"name": "@welshman/editor",
|
||||
"version": "0.0.2",
|
||||
"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#d8dc03c",
|
||||
"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#d8dc03c",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
Vendored
+13
@@ -0,0 +1,13 @@
|
||||
// See https://svelte.dev/docs/kit/types#app.d.ts
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface PageState {}
|
||||
// interface Platform {}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div>%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,13 @@
|
||||
<script lang="ts">
|
||||
import type {NodeViewProps} from "@tiptap/core"
|
||||
import {NodeViewWrapper} from "svelte-tiptap"
|
||||
|
||||
export let node: NodeViewProps["node"]
|
||||
export let selected: NodeViewProps["selected"]
|
||||
</script>
|
||||
|
||||
<NodeViewWrapper as="span">
|
||||
<button class="tiptap-object {selected ? 'tiptap-active' : ''}">
|
||||
{node.attrs.lnbc.slice(0, 16)}...
|
||||
</button>
|
||||
</NodeViewWrapper>
|
||||
@@ -0,0 +1,14 @@
|
||||
<script lang="ts">
|
||||
import {fromNostrURI} from "@welshman/util"
|
||||
import type {NodeViewProps} from "@tiptap/core"
|
||||
import {NodeViewWrapper} from "svelte-tiptap"
|
||||
|
||||
export let node: NodeViewProps["node"]
|
||||
export let selected: NodeViewProps["selected"]
|
||||
</script>
|
||||
|
||||
<NodeViewWrapper as="span">
|
||||
<button class="tiptap-object {selected ? 'tiptap-active' : ''}">
|
||||
{fromNostrURI(node.attrs.nevent).slice(0, 16)}...
|
||||
</button>
|
||||
</NodeViewWrapper>
|
||||
@@ -0,0 +1,14 @@
|
||||
<script lang="ts">
|
||||
import type {NodeViewProps} from "@tiptap/core"
|
||||
import {NodeViewWrapper} from "svelte-tiptap"
|
||||
|
||||
export let node: NodeViewProps["node"]
|
||||
export let selected: NodeViewProps["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>
|
||||
@@ -0,0 +1,13 @@
|
||||
<script lang="ts">
|
||||
import type {NodeViewProps} from "@tiptap/core"
|
||||
import {NodeViewWrapper} from "svelte-tiptap"
|
||||
|
||||
export let node: NodeViewProps["node"]
|
||||
export let selected: NodeViewProps["selected"]
|
||||
</script>
|
||||
|
||||
<NodeViewWrapper as="span">
|
||||
<button class="tiptap-object {selected ? 'tiptap-active' : ''}">
|
||||
@{node.attrs.nprofile.slice(0, 16)}...
|
||||
</button>
|
||||
</NodeViewWrapper>
|
||||
@@ -0,0 +1,5 @@
|
||||
<script lang="ts">
|
||||
export let value
|
||||
</script>
|
||||
|
||||
{value}
|
||||
@@ -0,0 +1,84 @@
|
||||
<svelte:options accessors />
|
||||
|
||||
<script lang="ts">
|
||||
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: Element
|
||||
let items: string[] = []
|
||||
|
||||
$: populateItems(term)
|
||||
|
||||
const populateItems = throttle(300, term => {
|
||||
items = $search(term).slice(0, 5)
|
||||
})
|
||||
|
||||
const setIndex = (newIndex: number, block: any) => {
|
||||
index = clamp([0, items.length - 1], newIndex)
|
||||
}
|
||||
|
||||
export const onKeyDown = (e: any) => {
|
||||
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}
|
||||
@@ -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"
|
||||
@@ -0,0 +1,22 @@
|
||||
import {HardBreak, 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 const BreakOrSubmit = HardBreak.extend<BreakOrSubmitOptions>({
|
||||
addKeyboardShortcuts() {
|
||||
return {
|
||||
"Shift-Enter": () => this.editor.commands.setHardBreak(),
|
||||
"Mod-Enter": () => {
|
||||
this.options.submit()
|
||||
|
||||
return true
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,75 @@
|
||||
import {InputRule, mergeAttributes, Node, PasteRule} from "@tiptap/core"
|
||||
import type {CodeOptions} from "@tiptap/extension-code"
|
||||
|
||||
const inputRegex = /(?:^|\s)(`(?!\s+`)((?:[^`]+))`(?!\s+`))$/
|
||||
|
||||
const pasteRegex = /(?:^|\s)(`(?!\s+`)((?:[^`]+))`(?!\s+`))/g
|
||||
|
||||
export type CodeInlineOptions = object
|
||||
|
||||
export const CodeInline = Node.create<CodeOptions>({
|
||||
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(" ")
|
||||
},
|
||||
}),
|
||||
]
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,234 @@
|
||||
import type {StampedEvent, SignedEvent} from "@welshman/util"
|
||||
import {toNostrURI} from "@welshman/util"
|
||||
import {deepMergeLeft} from "@welshman/lib"
|
||||
import {SvelteNodeViewRenderer} from "svelte-tiptap"
|
||||
import type {Extensions, AnyExtension} from "@tiptap/core"
|
||||
import {CodeBlock} from "@tiptap/extension-code-block"
|
||||
import type {CodeBlockOptions} from "@tiptap/extension-code-block"
|
||||
import {Document} from "@tiptap/extension-document"
|
||||
import {Dropcursor} from "@tiptap/extension-dropcursor"
|
||||
import type {DropcursorOptions} from "@tiptap/extension-dropcursor"
|
||||
import {Gapcursor} from "@tiptap/extension-gapcursor"
|
||||
import {History} from "@tiptap/extension-history"
|
||||
import type {HistoryOptions} from "@tiptap/extension-history"
|
||||
import {Paragraph} from "@tiptap/extension-paragraph"
|
||||
import type {ParagraphOptions} from "@tiptap/extension-paragraph"
|
||||
import {Text} from "@tiptap/extension-text"
|
||||
import {Placeholder} from "@tiptap/extension-placeholder"
|
||||
import type {PlaceholderOptions} from "@tiptap/extension-placeholder"
|
||||
import type {
|
||||
NostrOptions,
|
||||
FileUploadOptions,
|
||||
ImageOptions,
|
||||
LinkOptions,
|
||||
NSecRejectOptions,
|
||||
} from "nostr-editor"
|
||||
import {
|
||||
NostrExtension,
|
||||
Bolt11Extension,
|
||||
FileUploadExtension,
|
||||
ImageExtension,
|
||||
LinkExtension,
|
||||
NAddrExtension,
|
||||
NEventExtension,
|
||||
NProfileExtension,
|
||||
TagExtension,
|
||||
VideoExtension,
|
||||
NSecRejectExtension,
|
||||
} from "nostr-editor"
|
||||
import {WordCount} from "./WordCount.js"
|
||||
import {CodeInline, type CodeInlineOptions} from "./CodeInline.js"
|
||||
import {BreakOrSubmit, type BreakOrSubmitOptions} from "./BreakOrSubmit.js"
|
||||
import {EditBolt11, EditMedia, EditEvent, EditMention} from "../components/index.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 const WelshmanExtension = NostrExtension.extend<WelshmanOptions>({
|
||||
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: any) => "`" + props.node.textContent + "`",
|
||||
},
|
||||
},
|
||||
codeBlock: {
|
||||
extend: {
|
||||
renderText: (props: any) => "```" + 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: any) => toNostrURI(props.node.attrs.nevent),
|
||||
addNodeView: () => SvelteNodeViewRenderer(EditEvent),
|
||||
},
|
||||
},
|
||||
naddr: {
|
||||
config: {
|
||||
inline: true,
|
||||
group: "inline",
|
||||
},
|
||||
extend: {
|
||||
renderText: (props: any) => toNostrURI(props.node.attrs.naddr),
|
||||
addNodeView: () => SvelteNodeViewRenderer(EditEvent),
|
||||
},
|
||||
},
|
||||
nprofile: {
|
||||
extend: {
|
||||
renderText: (props: any) => 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",
|
||||
],
|
||||
},
|
||||
},
|
||||
}) as WelshmanExtensionOptions
|
||||
|
||||
const extensions: Extensions = []
|
||||
|
||||
const addExtension = (extension: AnyExtension, options?: ChildExtensionOptions | false) => {
|
||||
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
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,19 @@
|
||||
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
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,4 @@
|
||||
export * from "./BreakOrSubmit.js"
|
||||
export * from "./CodeInline.js"
|
||||
export * from "./Welshman.js"
|
||||
export * from "./WordCount.js"
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import './index.css'
|
||||
|
||||
export * from './components/index.js'
|
||||
export * from './extensions/index.js'
|
||||
export * from './plugins/index.js'
|
||||
@@ -0,0 +1,145 @@
|
||||
import type {SvelteComponent, ComponentType} from "svelte"
|
||||
import type {Readable} from "svelte/store"
|
||||
import type {Instance} from "tippy.js"
|
||||
import tippy from "tippy.js"
|
||||
import {nprofileEncode} from "nostr-tools/nip19"
|
||||
// @ts-ignore
|
||||
import type {Editor} from "svelte-tiptap"
|
||||
import {PluginKey} from "@tiptap/pm/state"
|
||||
import Suggestion from "@tiptap/suggestion"
|
||||
import Suggestions from "../components/Suggestions.svelte"
|
||||
import SuggestionString from "../components/SuggestionString.svelte"
|
||||
|
||||
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 const TippySuggestion = ({
|
||||
char,
|
||||
name,
|
||||
editor,
|
||||
search,
|
||||
select,
|
||||
allowCreate,
|
||||
wrapper = Suggestions,
|
||||
component = SuggestionString,
|
||||
}: TippySuggestionOptions) =>
|
||||
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: Instance[]
|
||||
let suggestions: SvelteComponent
|
||||
|
||||
const mapProps = (props: any) => ({
|
||||
term: props.query,
|
||||
search,
|
||||
component,
|
||||
allowCreate,
|
||||
select: (value: string) => select(value, props),
|
||||
})
|
||||
|
||||
return {
|
||||
onStart: props => {
|
||||
const target = document.createElement("div")
|
||||
|
||||
// @ts-ignore
|
||||
popover = tippy("body", {
|
||||
getReferenceClientRect: props.clientRect as any,
|
||||
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 as any,
|
||||
})
|
||||
}
|
||||
},
|
||||
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 type MentionSuggestionOptions = Partial<TippySuggestionOptions> & {
|
||||
editor: Editor
|
||||
search: Readable<(term: string) => string[]>
|
||||
getRelays: (pubkey: string) => string[]
|
||||
}
|
||||
|
||||
export const MentionSuggestion = (options: MentionSuggestionOptions) =>
|
||||
TippySuggestion({
|
||||
char: "@",
|
||||
name: "nprofile",
|
||||
select: (pubkey: string, props: any) => {
|
||||
const relays = options.getRelays(pubkey)
|
||||
const nprofile = nprofileEncode({pubkey, relays})
|
||||
|
||||
return props.command({pubkey, relays, nprofile})
|
||||
},
|
||||
...options,
|
||||
})
|
||||
@@ -0,0 +1 @@
|
||||
export * from "./TippySuggestion.js"
|
||||
@@ -0,0 +1,3 @@
|
||||
<h1>Welcome to your library project</h1>
|
||||
<p>Create your package using @sveltejs/package and preview/showcase your work with SvelteKit</p>
|
||||
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,10 @@
|
||||
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
// Consult https://svelte.dev/docs/kit/integrations
|
||||
// for more information about preprocessors
|
||||
preprocess: vitePreprocess(),
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"extends": "./.svelte-kit/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"sourceMap": true,
|
||||
"strict": true,
|
||||
"module": "NodeNext",
|
||||
"moduleResolution": "NodeNext"
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"test/**/*.ts"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import { sveltekit } from '@sveltejs/kit/vite';
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [sveltekit()]
|
||||
});
|
||||
@@ -1,7 +1,7 @@
|
||||
#!/bin/bash
|
||||
|
||||
for package in $(./get_packages.py); do
|
||||
npx onchange packages/$package -e '**/build/**' -k -- ./build_and_link.sh $package &
|
||||
npx onchange packages/$package -e '**/build/**' -e '**/dist/**' -e '**/.svelte-kit/**' -k -- ./build_and_link.sh $package &
|
||||
done
|
||||
|
||||
wait
|
||||
|
||||
Reference in New Issue
Block a user