@estiva-app/ui 0.51.0 → 0.52.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ComposerTriggers.d.ts +169 -0
- package/dist/ComposerTriggers.d.ts.map +1 -0
- package/dist/editor.d.ts +1 -0
- package/dist/editor.d.ts.map +1 -1
- package/dist/editor.js +313 -12
- package/dist/editor.js.map +4 -4
- package/package.json +6 -1
- package/registry.json +314 -3
- package/src/ComposerTriggers.mdx +108 -0
- package/src/ComposerTriggers.stories.tsx +79 -0
- package/src/ComposerTriggers.test.tsx +207 -0
- package/src/ComposerTriggers.tsx +507 -0
- package/src/editor.ts +29 -0
- package/src/registry/registry.test.ts +8 -7
- package/stories/Choosing.mdx +1 -0
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import { Extension, type Editor } from '@tiptap/core';
|
|
3
|
+
import { type MentionOptions } from '@tiptap/extension-mention';
|
|
4
|
+
import type { SuggestionMenuRow } from './SuggestionMenu';
|
|
5
|
+
import { type SuggestionPopupOptions } from './suggestionPopup';
|
|
6
|
+
/** A person `@` and `!@` offer. */
|
|
7
|
+
export interface MentionPerson {
|
|
8
|
+
/** The app's own key for the person — the row's key and the chip's `id`. */
|
|
9
|
+
id: string;
|
|
10
|
+
name: string;
|
|
11
|
+
/** The second line of the row: a role, a team. */
|
|
12
|
+
description?: string;
|
|
13
|
+
/** Their Nostr key, when they have one — what the body is written with (SPEC §13.1). */
|
|
14
|
+
pubkey?: string | null;
|
|
15
|
+
/** The face at the row's start. Default: the package `Avatar` for the name. */
|
|
16
|
+
avatar?: ReactNode;
|
|
17
|
+
}
|
|
18
|
+
/** How many people the list shows. */
|
|
19
|
+
export declare const PEOPLE_LIMIT = 6;
|
|
20
|
+
/** The people whose name holds the query, the first {@link PEOPLE_LIMIT} of them. */
|
|
21
|
+
export declare function filterPeople(people: readonly MentionPerson[], query: string): MentionPerson[];
|
|
22
|
+
/**
|
|
23
|
+
* The people list `@` and `!@` open: the face, the name, the second line, and
|
|
24
|
+
* the Enter hint while highlighted — `MenuItem` at its tall size.
|
|
25
|
+
*/
|
|
26
|
+
export declare function peopleMenu(urgent: boolean): SuggestionPopupOptions<MentionPerson>;
|
|
27
|
+
export interface PersonMentionOptions {
|
|
28
|
+
/** Everyone the list can offer, asked each time the query changes. */
|
|
29
|
+
people: () => readonly MentionPerson[];
|
|
30
|
+
}
|
|
31
|
+
type Doc = {
|
|
32
|
+
descendants: (cb: (node: {
|
|
33
|
+
type: {
|
|
34
|
+
name: string;
|
|
35
|
+
};
|
|
36
|
+
attrs: Record<string, unknown>;
|
|
37
|
+
}) => boolean | void) => void;
|
|
38
|
+
};
|
|
39
|
+
/**
|
|
40
|
+
* `@` — a person, as a chip that writes their key (SPEC §13.1).
|
|
41
|
+
*
|
|
42
|
+
* PersonMention.configure({ people: () => directory })
|
|
43
|
+
*
|
|
44
|
+
* Its `pubkey` and `label` are what `mentionText` takes.
|
|
45
|
+
*/
|
|
46
|
+
export declare const PersonMention: import("@tiptap/core").Node<MentionOptions<MentionPerson, MentionPerson> & PersonMentionOptions, any>;
|
|
47
|
+
/**
|
|
48
|
+
* `!@` — a person, urgently: the same chip in the urgent tone. Its text is an
|
|
49
|
+
* ordinary mention; the urgency travels as a tag (`urgentTagsFor`), so hand the
|
|
50
|
+
* write {@link urgentPubkeys}.
|
|
51
|
+
*/
|
|
52
|
+
export declare const UrgentPersonMention: import("@tiptap/core").Node<MentionOptions<MentionPerson, MentionPerson> & PersonMentionOptions, any>;
|
|
53
|
+
/**
|
|
54
|
+
* The keys the document's urgent mentions name — what the write turns into
|
|
55
|
+
* `["urgent", <pubkey>]` tags. A chip with no key has no tag to carry; its text
|
|
56
|
+
* is the old `!@Name`.
|
|
57
|
+
*/
|
|
58
|
+
export declare function urgentPubkeys(editor: {
|
|
59
|
+
state: {
|
|
60
|
+
doc: Doc;
|
|
61
|
+
};
|
|
62
|
+
}): string[] | undefined;
|
|
63
|
+
/** Something `[` offers: a reference drawn as who said it and how it opens. */
|
|
64
|
+
export interface CaptionedItem {
|
|
65
|
+
/** The referenced thing's id — the row's key and the chip's `id`. */
|
|
66
|
+
id: string;
|
|
67
|
+
/** Who, as the list shows them. */
|
|
68
|
+
label: string;
|
|
69
|
+
/** The opening words, marks stripped: the caption the row and the chip wear. */
|
|
70
|
+
snippet: string;
|
|
71
|
+
/** `nostr:…`, exactly as the body will carry it (`messageReference`). */
|
|
72
|
+
uri: string;
|
|
73
|
+
/** What the query is matched against beside `label`. Default: `snippet`. */
|
|
74
|
+
search?: string;
|
|
75
|
+
}
|
|
76
|
+
/** How many references the list shows. */
|
|
77
|
+
export declare const REFERENCE_LIMIT = 6;
|
|
78
|
+
/**
|
|
79
|
+
* The references whose label or text holds the query — the last
|
|
80
|
+
* {@link REFERENCE_LIMIT}, in the order given: a thread is unbounded, and a
|
|
81
|
+
* list that grew with it would be a hundred rows of prose.
|
|
82
|
+
*/
|
|
83
|
+
export declare function filterReferences(items: readonly CaptionedItem[], query: string): CaptionedItem[];
|
|
84
|
+
export interface CaptionedReferenceOptions {
|
|
85
|
+
/** Drawn before the caption: a 14px icon. */
|
|
86
|
+
icon: ReactNode;
|
|
87
|
+
}
|
|
88
|
+
/**
|
|
89
|
+
* A reference mid-sentence, drawn as `label: snippet` and written as its `uri`
|
|
90
|
+
* verbatim (SPEC §13.1). The caption is the snapshot it was picked with — a
|
|
91
|
+
* caption, never parsed. Inserted by {@link ReferenceTrigger}, a paste or a
|
|
92
|
+
* draft; it opens no list of its own.
|
|
93
|
+
*/
|
|
94
|
+
export declare const CaptionedReference: import("@tiptap/core").Node<MentionOptions<any, import("@tiptap/extension-mention").MentionNodeAttrs> & CaptionedReferenceOptions, any>;
|
|
95
|
+
export interface ReferenceMenuOptions {
|
|
96
|
+
/** Names the list, e.g. what can be referenced. */
|
|
97
|
+
ariaLabel: string;
|
|
98
|
+
/** The section's heading. */
|
|
99
|
+
sectionLabel: string;
|
|
100
|
+
/** At each row's start: a 16px icon. */
|
|
101
|
+
icon: ReactNode;
|
|
102
|
+
}
|
|
103
|
+
/** The list `[` opens: one section of `label: snippet` rows, the same box as the people list. */
|
|
104
|
+
export declare function referenceMenu({ ariaLabel, sectionLabel, icon }: ReferenceMenuOptions): SuggestionPopupOptions<CaptionedItem>;
|
|
105
|
+
export interface ReferenceTriggerOptions extends ReferenceMenuOptions {
|
|
106
|
+
/** Everything `[` can offer, asked each time the query changes. */
|
|
107
|
+
items: () => readonly CaptionedItem[];
|
|
108
|
+
/** The node a pick inserts. Default `captionedReference`. */
|
|
109
|
+
nodeName: string;
|
|
110
|
+
}
|
|
111
|
+
/**
|
|
112
|
+
* `[` — reference something, inserted as a {@link CaptionedReference} chip.
|
|
113
|
+
*
|
|
114
|
+
* Its own extension rather than the chip's suggestion, so the chip's text (its
|
|
115
|
+
* `renderText`) does not change with the key that summons the list.
|
|
116
|
+
*/
|
|
117
|
+
export declare const ReferenceTrigger: Extension<ReferenceTriggerOptions, any>;
|
|
118
|
+
/** A row of the `/` list, and what choosing it does. */
|
|
119
|
+
export interface SlashCommand {
|
|
120
|
+
key: string;
|
|
121
|
+
row: SuggestionMenuRow;
|
|
122
|
+
/** Matched beside the row's label: an id, a trigger, a description. */
|
|
123
|
+
keywords?: readonly string[];
|
|
124
|
+
/** Runs once the `/query` that summoned the list has been removed. */
|
|
125
|
+
run: (editor: Editor) => void;
|
|
126
|
+
}
|
|
127
|
+
export interface SlashSection {
|
|
128
|
+
label: string;
|
|
129
|
+
commands: readonly SlashCommand[];
|
|
130
|
+
}
|
|
131
|
+
export type FormatId = 'paragraph' | 'heading' | 'subheading' | 'quote' | 'bulletList' | 'orderedList' | 'code';
|
|
132
|
+
export interface FormatDef {
|
|
133
|
+
id: FormatId;
|
|
134
|
+
label: string;
|
|
135
|
+
/** What you type to get it — the input rule the extension registers. Blank when there is none. */
|
|
136
|
+
trigger?: string;
|
|
137
|
+
}
|
|
138
|
+
/**
|
|
139
|
+
* The formats `/` offers, in order. The hint is what you would type, not a key
|
|
140
|
+
* chord. Bold, italic and underline are absent: they act on text already
|
|
141
|
+
* written, so they are the selection toolbar's.
|
|
142
|
+
*/
|
|
143
|
+
export declare const FORMATS: readonly FormatDef[];
|
|
144
|
+
/** Code as a mark inside the line, or as a block of its own. */
|
|
145
|
+
export type CodeFormat = 'inline' | 'block';
|
|
146
|
+
/**
|
|
147
|
+
* Apply one format to the current block. `set*` wherever Tiptap has one:
|
|
148
|
+
* choosing Heading should make a heading, not turn one off. `false` means
|
|
149
|
+
* nothing changed, not that anything failed.
|
|
150
|
+
*/
|
|
151
|
+
export declare function applyFormat(editor: Editor, id: FormatId, code?: CodeFormat): boolean;
|
|
152
|
+
/** The Format section every app's `/` opens with. */
|
|
153
|
+
export declare function formatSection(code?: CodeFormat): SlashSection;
|
|
154
|
+
/** A row that types another trigger, so its own list opens — `@` from `/`. */
|
|
155
|
+
export declare function typeTrigger(input: string): SlashCommand['run'];
|
|
156
|
+
/** The sections narrowed to a query — the text typed after the `/`. Empty sections stay. */
|
|
157
|
+
export declare function filterSlashSections(sections: readonly SlashSection[], query: string): SlashSection[];
|
|
158
|
+
export interface SlashCommandsOptions {
|
|
159
|
+
/** The sections, in order: {@link formatSection} first, then the app's own. */
|
|
160
|
+
sections: readonly SlashSection[];
|
|
161
|
+
}
|
|
162
|
+
/**
|
|
163
|
+
* `/` — format the line or insert something, at the caret, mid-sentence too.
|
|
164
|
+
* A `/` inside a word (`and/or`, a path) opens nothing: the plugin wants a
|
|
165
|
+
* space or the line's start before it.
|
|
166
|
+
*/
|
|
167
|
+
export declare const SlashCommands: Extension<SlashCommandsOptions, any>;
|
|
168
|
+
export {};
|
|
169
|
+
//# sourceMappingURL=ComposerTriggers.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ComposerTriggers.d.ts","sourceRoot":"","sources":["../src/ComposerTriggers.tsx"],"names":[],"mappings":"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"}
|
package/dist/editor.d.ts
CHANGED
|
@@ -9,5 +9,6 @@
|
|
|
9
9
|
*/
|
|
10
10
|
export { KeptSelection, SelectionToolbar, normalizeHref, type MarkId, type SelectionToolbarProps } from './SelectionToolbar';
|
|
11
11
|
export { suggestionPopup, isSuggestionActive, isSuggestionOpen, type SuggestionPopupOptions } from './suggestionPopup';
|
|
12
|
+
export { PersonMention, UrgentPersonMention, CaptionedReference, ReferenceTrigger, SlashCommands, peopleMenu, referenceMenu, filterPeople, urgentPubkeys, filterReferences, formatSection, applyFormat, typeTrigger, filterSlashSections, FORMATS, type MentionPerson, type PersonMentionOptions, type CaptionedItem, type CaptionedReferenceOptions, type ReferenceTriggerOptions, type ReferenceMenuOptions, type SlashCommand, type SlashSection, type SlashCommandsOptions, type FormatId, type FormatDef, type CodeFormat, } from './ComposerTriggers';
|
|
12
13
|
export { BlockId, UnknownBlock, ReferenceNode, AttachmentNode, type ReferenceNodeOptions, type ReferenceViewProps, type AttachmentNodeOptions, type AttachmentViewProps, } from './BlockNodes';
|
|
13
14
|
//# sourceMappingURL=editor.d.ts.map
|
package/dist/editor.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../src/editor.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,aAAa,EAAE,KAAK,MAAM,EAAE,KAAK,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAC5H,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,KAAK,sBAAsB,EAAE,MAAM,mBAAmB,CAAA;AACtH,OAAO,EACL,OAAO,EACP,YAAY,EACZ,aAAa,EACb,cAAc,EACd,KAAK,oBAAoB,EACzB,KAAK,kBAAkB,EACvB,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,GACzB,MAAM,cAAc,CAAA"}
|
|
1
|
+
{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../src/editor.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,aAAa,EAAE,KAAK,MAAM,EAAE,KAAK,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAC5H,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,KAAK,sBAAsB,EAAE,MAAM,mBAAmB,CAAA;AACtH,OAAO,EACL,aAAa,EACb,mBAAmB,EACnB,kBAAkB,EAClB,gBAAgB,EAChB,aAAa,EACb,UAAU,EACV,aAAa,EACb,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,WAAW,EACX,WAAW,EACX,mBAAmB,EACnB,OAAO,EACP,KAAK,aAAa,EAClB,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,yBAAyB,EAC9B,KAAK,uBAAuB,EAC5B,KAAK,oBAAoB,EACzB,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,oBAAoB,EACzB,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,KAAK,UAAU,GAChB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EACL,OAAO,EACP,YAAY,EACZ,aAAa,EACb,cAAc,EACd,KAAK,oBAAoB,EACzB,KAAK,kBAAkB,EACvB,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,GACzB,MAAM,cAAc,CAAA"}
|
package/dist/editor.js
CHANGED
|
@@ -347,12 +347,298 @@ function suggestionPopup(options) {
|
|
|
347
347
|
};
|
|
348
348
|
}
|
|
349
349
|
|
|
350
|
+
// src/ComposerTriggers.tsx
|
|
351
|
+
import { Extension as Extension2 } from "@tiptap/core";
|
|
352
|
+
import { PluginKey as PluginKey2 } from "@tiptap/pm/state";
|
|
353
|
+
import Mention from "@tiptap/extension-mention";
|
|
354
|
+
import Suggestion from "@tiptap/suggestion";
|
|
355
|
+
import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
|
|
356
|
+
import { Avatar } from "@estiva-app/ui";
|
|
357
|
+
import { EnterHint } from "@estiva-app/ui";
|
|
358
|
+
import { inlineChipClassName } from "@estiva-app/ui";
|
|
359
|
+
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
360
|
+
var PEOPLE_LIMIT = 6;
|
|
361
|
+
function filterPeople(people, query) {
|
|
362
|
+
const q = query.toLowerCase();
|
|
363
|
+
return people.filter((person) => q === "" || person.name.toLowerCase().includes(q)).slice(0, PEOPLE_LIMIT);
|
|
364
|
+
}
|
|
365
|
+
function peopleMenu(urgent) {
|
|
366
|
+
const section = urgent ? "Urgent mention" : "People";
|
|
367
|
+
return {
|
|
368
|
+
ariaLabel: section,
|
|
369
|
+
// The people and the reference lists are the same box: 658px, capped at 360.
|
|
370
|
+
width: "w-[658px]",
|
|
371
|
+
maxHeight: "max-h-[360px]",
|
|
372
|
+
sections: (people) => [{ label: section, items: people, className: "px-3 py-1" }],
|
|
373
|
+
itemKey: (person) => person.id,
|
|
374
|
+
row: (person) => ({
|
|
375
|
+
label: person.name,
|
|
376
|
+
description: person.description,
|
|
377
|
+
leading: person.avatar ?? /* @__PURE__ */ jsx3(Avatar, { size: 32, alt: person.name }),
|
|
378
|
+
hint: /* @__PURE__ */ jsx3(EnterHint, {}),
|
|
379
|
+
size: "tall"
|
|
380
|
+
})
|
|
381
|
+
};
|
|
382
|
+
}
|
|
383
|
+
function optionsOf(editor, name) {
|
|
384
|
+
return editor.extensionManager.extensions.find((one) => one.name === name)?.options;
|
|
385
|
+
}
|
|
386
|
+
function personSuggestion(urgent, name) {
|
|
387
|
+
return {
|
|
388
|
+
...urgent ? { char: "!@" } : {},
|
|
389
|
+
items: ({ query, editor }) => filterPeople(optionsOf(editor, name)?.people() ?? [], query),
|
|
390
|
+
render: suggestionPopup(peopleMenu(urgent)),
|
|
391
|
+
command: ({ editor, range, props: person }) => {
|
|
392
|
+
editor.chain().focus().insertContentAt(range, [
|
|
393
|
+
{ type: name, attrs: { id: person.id, label: person.name, pubkey: person.pubkey ?? null } },
|
|
394
|
+
{ type: "text", text: " " }
|
|
395
|
+
]).run();
|
|
396
|
+
}
|
|
397
|
+
};
|
|
398
|
+
}
|
|
399
|
+
var HEX_KEY = /^[0-9a-f]{64}$/;
|
|
400
|
+
var NOSTR_URI = /^nostr:[a-z0-9]+$/i;
|
|
401
|
+
var fromData = (name, valid) => ({
|
|
402
|
+
parseHTML: (element) => {
|
|
403
|
+
const value = element.getAttribute(`data-${name}`);
|
|
404
|
+
return value !== null && (!valid || valid.test(value)) ? value : null;
|
|
405
|
+
},
|
|
406
|
+
// The node's own `renderHTML` writes it.
|
|
407
|
+
renderHTML: () => ({})
|
|
408
|
+
});
|
|
409
|
+
var personAttributes = () => ({
|
|
410
|
+
id: { default: null, ...fromData("id") },
|
|
411
|
+
label: { default: null, ...fromData("label") },
|
|
412
|
+
/**
|
|
413
|
+
* The person's Nostr key, when they have one — SPEC §13.1. `id` is the app's
|
|
414
|
+
* own and means nothing to another app; this is what the body is written
|
|
415
|
+
* with, so a mention survives a rename.
|
|
416
|
+
*/
|
|
417
|
+
pubkey: { default: null, ...fromData("pubkey", HEX_KEY) }
|
|
418
|
+
});
|
|
419
|
+
function personData(attrs) {
|
|
420
|
+
return {
|
|
421
|
+
"data-id": String(attrs.id ?? ""),
|
|
422
|
+
"data-label": String(attrs.label ?? ""),
|
|
423
|
+
...typeof attrs.pubkey === "string" && attrs.pubkey ? { "data-pubkey": attrs.pubkey } : {}
|
|
424
|
+
};
|
|
425
|
+
}
|
|
426
|
+
var PersonMention = Mention.extend({
|
|
427
|
+
name: "mention",
|
|
428
|
+
addOptions() {
|
|
429
|
+
return { ...this.parent(), HTMLAttributes: {}, people: () => [], suggestion: personSuggestion(false, this.name) };
|
|
430
|
+
},
|
|
431
|
+
addAttributes: personAttributes,
|
|
432
|
+
renderHTML({ node }) {
|
|
433
|
+
return ["span", { "data-mention": "true", ...personData(node.attrs), class: inlineChipClassName("person", "cursor-default") }, `@${node.attrs.label}`];
|
|
434
|
+
},
|
|
435
|
+
parseHTML() {
|
|
436
|
+
return [{ tag: "span[data-mention]" }];
|
|
437
|
+
}
|
|
438
|
+
});
|
|
439
|
+
var UrgentPersonMention = Mention.extend({
|
|
440
|
+
name: "urgentMention",
|
|
441
|
+
addOptions() {
|
|
442
|
+
return { ...this.parent(), HTMLAttributes: {}, people: () => [], suggestion: personSuggestion(true, this.name) };
|
|
443
|
+
},
|
|
444
|
+
addAttributes: personAttributes,
|
|
445
|
+
renderHTML({ node }) {
|
|
446
|
+
return [
|
|
447
|
+
"span",
|
|
448
|
+
{ "data-urgent-mention": "true", ...personData(node.attrs), class: inlineChipClassName("urgent", "cursor-default") },
|
|
449
|
+
`@${node.attrs.label}`
|
|
450
|
+
];
|
|
451
|
+
},
|
|
452
|
+
parseHTML() {
|
|
453
|
+
return [{ tag: "span[data-urgent-mention]" }];
|
|
454
|
+
}
|
|
455
|
+
});
|
|
456
|
+
function urgentPubkeys(editor) {
|
|
457
|
+
const urgent = [];
|
|
458
|
+
editor.state.doc.descendants((node) => {
|
|
459
|
+
if (node.type.name === "urgentMention" && typeof node.attrs.pubkey === "string" && node.attrs.pubkey) urgent.push(node.attrs.pubkey);
|
|
460
|
+
});
|
|
461
|
+
return urgent.length > 0 ? urgent : void 0;
|
|
462
|
+
}
|
|
463
|
+
var REFERENCE_LIMIT = 6;
|
|
464
|
+
function filterReferences(items, query) {
|
|
465
|
+
const q = query.toLowerCase();
|
|
466
|
+
const shown = q ? items.filter((item) => (item.search ?? item.snippet).toLowerCase().includes(q) || item.label.toLowerCase().includes(q)) : [...items];
|
|
467
|
+
return shown.slice(-REFERENCE_LIMIT);
|
|
468
|
+
}
|
|
469
|
+
var captionOf = (label, snippet) => snippet ? `${label}: ${snippet}` : label;
|
|
470
|
+
var CaptionedReference = Mention.extend({
|
|
471
|
+
name: "captionedReference",
|
|
472
|
+
group: "inline",
|
|
473
|
+
inline: true,
|
|
474
|
+
atom: true,
|
|
475
|
+
addOptions() {
|
|
476
|
+
return { ...this.parent(), HTMLAttributes: {}, icon: null, suggestion: { char: "\0", items: () => [] } };
|
|
477
|
+
},
|
|
478
|
+
addAttributes() {
|
|
479
|
+
return {
|
|
480
|
+
id: { default: null, ...fromData("id") },
|
|
481
|
+
label: { default: null, ...fromData("label") },
|
|
482
|
+
snippet: { default: "", parseHTML: (element) => element.getAttribute("data-snippet") ?? "", renderHTML: () => ({}) },
|
|
483
|
+
uri: { default: null, ...fromData("uri", NOSTR_URI) }
|
|
484
|
+
};
|
|
485
|
+
},
|
|
486
|
+
renderHTML({ node }) {
|
|
487
|
+
return [
|
|
488
|
+
"span",
|
|
489
|
+
{ [`data-${this.name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)}`]: "true", "data-id": String(node.attrs.id ?? ""), "data-label": String(node.attrs.label ?? ""), "data-snippet": String(node.attrs.snippet ?? ""), ...node.attrs.uri ? { "data-uri": String(node.attrs.uri) } : {}, class: inlineChipClassName("neutral", "cursor-default") },
|
|
490
|
+
captionOf(node.attrs.label, node.attrs.snippet)
|
|
491
|
+
];
|
|
492
|
+
},
|
|
493
|
+
parseHTML() {
|
|
494
|
+
return [{ tag: `span[data-${this.name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)}]` }];
|
|
495
|
+
},
|
|
496
|
+
addNodeView() {
|
|
497
|
+
const icon = this.options.icon;
|
|
498
|
+
return ReactNodeViewRenderer(
|
|
499
|
+
({ node }) => /* @__PURE__ */ jsxs2(NodeViewWrapper, { as: "span", className: inlineChipClassName("neutral", "max-w-[24ch] cursor-default"), children: [
|
|
500
|
+
/* @__PURE__ */ jsx3("span", { className: "flex items-center justify-center w-4 h-4 shrink-0 text-text-secondary", children: icon }),
|
|
501
|
+
/* @__PURE__ */ jsx3("span", { className: "truncate", children: captionOf(node.attrs.label, node.attrs.snippet) })
|
|
502
|
+
] }),
|
|
503
|
+
{ as: "span" }
|
|
504
|
+
);
|
|
505
|
+
}
|
|
506
|
+
});
|
|
507
|
+
function referenceMenu({ ariaLabel, sectionLabel, icon }) {
|
|
508
|
+
return {
|
|
509
|
+
ariaLabel,
|
|
510
|
+
width: "w-[658px]",
|
|
511
|
+
maxHeight: "max-h-[360px]",
|
|
512
|
+
sections: (items) => [{ label: sectionLabel, items, className: "px-2" }],
|
|
513
|
+
itemKey: (item) => `reference-${item.id}`,
|
|
514
|
+
row: (item) => ({ leading: icon, label: captionOf(item.label, item.snippet), hint: /* @__PURE__ */ jsx3(EnterHint, {}) })
|
|
515
|
+
};
|
|
516
|
+
}
|
|
517
|
+
var ReferenceTrigger = Extension2.create({
|
|
518
|
+
name: "referenceTrigger",
|
|
519
|
+
addOptions() {
|
|
520
|
+
return { items: () => [], nodeName: "captionedReference", ariaLabel: "References", sectionLabel: "References", icon: null };
|
|
521
|
+
},
|
|
522
|
+
addProseMirrorPlugins() {
|
|
523
|
+
const options = this.options;
|
|
524
|
+
return [
|
|
525
|
+
Suggestion({
|
|
526
|
+
editor: this.editor,
|
|
527
|
+
char: "[",
|
|
528
|
+
pluginKey: new PluginKey2("referenceTrigger"),
|
|
529
|
+
// As a mention's: only where the chip may go.
|
|
530
|
+
allow: ({ state, range }) => {
|
|
531
|
+
const type = state.schema.nodes[options.nodeName];
|
|
532
|
+
return !!type && !!state.doc.resolve(range.from).parent.type.contentMatch.matchType(type);
|
|
533
|
+
},
|
|
534
|
+
items: ({ query }) => filterReferences(options.items(), query),
|
|
535
|
+
render: suggestionPopup(referenceMenu(options)),
|
|
536
|
+
command: ({ editor, range, props: item }) => {
|
|
537
|
+
editor.chain().focus().insertContentAt(range, [
|
|
538
|
+
{ type: options.nodeName, attrs: { id: item.id, label: item.label, snippet: item.snippet, uri: item.uri } },
|
|
539
|
+
{ type: "text", text: " " }
|
|
540
|
+
]).run();
|
|
541
|
+
}
|
|
542
|
+
})
|
|
543
|
+
];
|
|
544
|
+
}
|
|
545
|
+
});
|
|
546
|
+
var FORMATS = [
|
|
547
|
+
{ id: "paragraph", label: "Text" },
|
|
548
|
+
{ id: "heading", label: "Heading", trigger: "#" },
|
|
549
|
+
{ id: "subheading", label: "Subheading", trigger: "##" },
|
|
550
|
+
{ id: "quote", label: "Quote", trigger: ">" },
|
|
551
|
+
{ id: "code", label: "Code", trigger: "`" },
|
|
552
|
+
{ id: "bulletList", label: "Bulleted list", trigger: "-" },
|
|
553
|
+
{ id: "orderedList", label: "Numbered list", trigger: "1." }
|
|
554
|
+
];
|
|
555
|
+
function applyFormat(editor, id, code = "inline") {
|
|
556
|
+
const chain = editor.chain().focus();
|
|
557
|
+
const run = (command, ...args) => {
|
|
558
|
+
const named = chain[command];
|
|
559
|
+
return named ? named(...args).run() : false;
|
|
560
|
+
};
|
|
561
|
+
switch (id) {
|
|
562
|
+
case "paragraph":
|
|
563
|
+
return run("setParagraph");
|
|
564
|
+
case "heading":
|
|
565
|
+
return run("setHeading", { level: 1 });
|
|
566
|
+
case "subheading":
|
|
567
|
+
return run("setHeading", { level: 2 });
|
|
568
|
+
case "quote":
|
|
569
|
+
return run("toggleBlockquote");
|
|
570
|
+
case "bulletList":
|
|
571
|
+
return run("toggleBulletList");
|
|
572
|
+
case "orderedList":
|
|
573
|
+
return run("toggleOrderedList");
|
|
574
|
+
case "code":
|
|
575
|
+
return run(code === "block" ? "toggleCodeBlock" : "toggleCode");
|
|
576
|
+
default:
|
|
577
|
+
return false;
|
|
578
|
+
}
|
|
579
|
+
}
|
|
580
|
+
function formatSection(code = "inline") {
|
|
581
|
+
return {
|
|
582
|
+
label: "Format",
|
|
583
|
+
commands: FORMATS.map((format) => ({
|
|
584
|
+
key: `format-${format.id}`,
|
|
585
|
+
row: { label: format.label, shortcut: format.trigger },
|
|
586
|
+
keywords: [format.id],
|
|
587
|
+
run: (editor) => {
|
|
588
|
+
applyFormat(editor, format.id, code);
|
|
589
|
+
}
|
|
590
|
+
}))
|
|
591
|
+
};
|
|
592
|
+
}
|
|
593
|
+
function typeTrigger(input) {
|
|
594
|
+
return (editor) => {
|
|
595
|
+
requestAnimationFrame(() => editor.commands.insertContent(input));
|
|
596
|
+
};
|
|
597
|
+
}
|
|
598
|
+
function matches(command, q) {
|
|
599
|
+
return [command.row.label, ...command.keywords ?? []].some((text) => text.toLowerCase().includes(q));
|
|
600
|
+
}
|
|
601
|
+
function filterSlashSections(sections, query) {
|
|
602
|
+
const q = query.toLowerCase();
|
|
603
|
+
return sections.map((section) => ({ ...section, commands: q ? section.commands.filter((command) => matches(command, q)) : section.commands }));
|
|
604
|
+
}
|
|
605
|
+
var SlashCommands = Extension2.create({
|
|
606
|
+
name: "slashCommands",
|
|
607
|
+
addOptions() {
|
|
608
|
+
return { sections: [formatSection()] };
|
|
609
|
+
},
|
|
610
|
+
addProseMirrorPlugins() {
|
|
611
|
+
const sections = this.options.sections;
|
|
612
|
+
return [
|
|
613
|
+
Suggestion({
|
|
614
|
+
editor: this.editor,
|
|
615
|
+
char: "/",
|
|
616
|
+
startOfLine: false,
|
|
617
|
+
pluginKey: new PluginKey2("slashCommands"),
|
|
618
|
+
items: ({ query }) => filterSlashSections(sections, query).flatMap((section, at) => section.commands.map((command) => ({ ...command, section: at }))),
|
|
619
|
+
command: ({ editor, range, props }) => {
|
|
620
|
+
editor.chain().focus().deleteRange(range).run();
|
|
621
|
+
props.run(editor);
|
|
622
|
+
},
|
|
623
|
+
render: suggestionPopup({
|
|
624
|
+
ariaLabel: "Commands",
|
|
625
|
+
width: "w-[300px]",
|
|
626
|
+
maxHeight: "max-h-[400px]",
|
|
627
|
+
sections: (rows) => sections.map((section, at) => ({ label: section.label, items: rows.filter((row) => row.section === at) })),
|
|
628
|
+
itemKey: (row) => row.key,
|
|
629
|
+
row: (row) => row.row
|
|
630
|
+
})
|
|
631
|
+
})
|
|
632
|
+
];
|
|
633
|
+
}
|
|
634
|
+
});
|
|
635
|
+
|
|
350
636
|
// src/BlockNodes.tsx
|
|
351
|
-
import { Extension as
|
|
352
|
-
import { Plugin as Plugin2, PluginKey as
|
|
637
|
+
import { Extension as Extension3, Node as Node2 } from "@tiptap/core";
|
|
638
|
+
import { Plugin as Plugin2, PluginKey as PluginKey3 } from "@tiptap/pm/state";
|
|
353
639
|
import { Mapping, ReplaceAroundStep } from "@tiptap/pm/transform";
|
|
354
|
-
import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
|
|
355
|
-
import { jsx as
|
|
640
|
+
import { NodeViewWrapper as NodeViewWrapper2, ReactNodeViewRenderer as ReactNodeViewRenderer2 } from "@tiptap/react";
|
|
641
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
356
642
|
var BLOCK_TYPES = [
|
|
357
643
|
"paragraph",
|
|
358
644
|
"heading",
|
|
@@ -497,7 +783,7 @@ function bringsInBlocks(transactions) {
|
|
|
497
783
|
})
|
|
498
784
|
);
|
|
499
785
|
}
|
|
500
|
-
var BlockId =
|
|
786
|
+
var BlockId = Extension3.create({
|
|
501
787
|
name: "blockId",
|
|
502
788
|
onCreate() {
|
|
503
789
|
const { state, view } = this.editor;
|
|
@@ -510,7 +796,7 @@ var BlockId = Extension2.create({
|
|
|
510
796
|
addProseMirrorPlugins() {
|
|
511
797
|
return [
|
|
512
798
|
new Plugin2({
|
|
513
|
-
key: new
|
|
799
|
+
key: new PluginKey3("blockIdSplit"),
|
|
514
800
|
appendTransaction: (transactions, old, state) => {
|
|
515
801
|
if (!bringsInBlocks(transactions)) return null;
|
|
516
802
|
const mapping = new Mapping();
|
|
@@ -569,7 +855,7 @@ var ReferenceNode = Node2.create({
|
|
|
569
855
|
addNodeView() {
|
|
570
856
|
const View = this.options.view;
|
|
571
857
|
if (!View) return null;
|
|
572
|
-
return
|
|
858
|
+
return ReactNodeViewRenderer2(({ node }) => /* @__PURE__ */ jsx4(NodeViewWrapper2, { as: "span", className: "inline", children: /* @__PURE__ */ jsx4(View, { uri: String(node.attrs.uri ?? "") }) }));
|
|
573
859
|
}
|
|
574
860
|
});
|
|
575
861
|
var UnknownBlock = Node2.create({
|
|
@@ -591,14 +877,14 @@ var UnknownBlock = Node2.create({
|
|
|
591
877
|
return ["div", { "data-unknown-block": String(node.attrs.blockId ?? "") }, String(node.attrs.text ?? "")];
|
|
592
878
|
},
|
|
593
879
|
addNodeView() {
|
|
594
|
-
return
|
|
880
|
+
return ReactNodeViewRenderer2(UnknownBlockView);
|
|
595
881
|
}
|
|
596
882
|
});
|
|
597
883
|
function UnknownBlockView({ node }) {
|
|
598
884
|
const source = node.attrs.source;
|
|
599
885
|
const text = String(node.attrs.text ?? "");
|
|
600
|
-
return /* @__PURE__ */
|
|
601
|
-
|
|
886
|
+
return /* @__PURE__ */ jsx4(
|
|
887
|
+
NodeViewWrapper2,
|
|
602
888
|
{
|
|
603
889
|
"data-block-id": source?.id,
|
|
604
890
|
"data-block-type": source?.type,
|
|
@@ -637,19 +923,34 @@ var AttachmentNode = Node2.create({
|
|
|
637
923
|
addNodeView() {
|
|
638
924
|
const View = this.options.view;
|
|
639
925
|
if (!View) return null;
|
|
640
|
-
return
|
|
926
|
+
return ReactNodeViewRenderer2(({ node }) => /* @__PURE__ */ jsx4(NodeViewWrapper2, { className: "my-2", children: /* @__PURE__ */ jsx4(View, { attrs: node.attrs }) }));
|
|
641
927
|
}
|
|
642
928
|
});
|
|
643
929
|
export {
|
|
644
930
|
AttachmentNode,
|
|
645
931
|
BlockId,
|
|
932
|
+
CaptionedReference,
|
|
933
|
+
FORMATS,
|
|
646
934
|
KeptSelection,
|
|
935
|
+
PersonMention,
|
|
647
936
|
ReferenceNode,
|
|
937
|
+
ReferenceTrigger,
|
|
648
938
|
SelectionToolbar,
|
|
939
|
+
SlashCommands,
|
|
649
940
|
UnknownBlock,
|
|
941
|
+
UrgentPersonMention,
|
|
942
|
+
applyFormat,
|
|
943
|
+
filterPeople,
|
|
944
|
+
filterReferences,
|
|
945
|
+
filterSlashSections,
|
|
946
|
+
formatSection,
|
|
650
947
|
isSuggestionActive,
|
|
651
948
|
isSuggestionOpen,
|
|
652
949
|
normalizeHref,
|
|
653
|
-
|
|
950
|
+
peopleMenu,
|
|
951
|
+
referenceMenu,
|
|
952
|
+
suggestionPopup,
|
|
953
|
+
typeTrigger,
|
|
954
|
+
urgentPubkeys
|
|
654
955
|
};
|
|
655
956
|
//# sourceMappingURL=editor.js.map
|