@design.estate/dees-catalog 12.4.0 → 12.5.0

package/ts_web/elements/00group-kanban/dees-kanban-ticket-detail/dees-kanban-ticket-detail.ts

@@ -0,0 +1,114 @@
+import { DeesElement, customElement, property, state, html, css } from '@design.estate/dees-element';
+import type { IKanbanColumn, IKanbanComment, IKanbanPerson, IKanbanProvider, IKanbanTicket, IKanbanTicketDraft, TKanbanPriority } from '../interfaces.js';
+import type { TReferenceContent, TReferenceSearch } from '../../00group-input/dees-input-reference/interfaces.js';
+import { kanbanStyles } from '../kanban.styles.js';
+import { kanbanEvent, sortKanbanTickets, ticketDraft, ticketLabel } from '../kanban.helpers.js';
+import type { DeesInputText } from '../../00group-input/dees-input-text/dees-input-text.js';
+import type { DeesInputTextarea } from '../../00group-input/dees-input-textarea/dees-input-textarea.js';
+import '../../00group-input/dees-input-text/dees-input-text.js';
+import '../../00group-input/dees-input-textarea/dees-input-textarea.js';
+import '../../00group-input/dees-input-dropdown/dees-input-dropdown.js';
+import '../dees-kanban-discussion/dees-kanban-discussion.js';
+
+declare global { interface HTMLElementTagNameMap { 'dees-kanban-ticket-detail': DeesKanbanTicketDetail; } }
+
+@customElement('dees-kanban-ticket-detail')
+export class DeesKanbanTicketDetail extends DeesElement {
+  @property({ attribute: false }) accessor ticket: IKanbanTicket | undefined;
+  @property({ attribute: false }) accessor tickets: IKanbanTicket[] = [];
+  @property({ attribute: false }) accessor columns: IKanbanColumn[] = [];
+  @property({ attribute: false }) accessor people: IKanbanPerson[] = [];
+  @property({ attribute: false }) accessor provider: IKanbanProvider = {};
+  @property({ attribute: false }) accessor draft: IKanbanTicketDraft | undefined;
+  @property({ attribute: false }) accessor commentDraft: TReferenceContent = [];
+  @property({ attribute: false }) accessor comments: IKanbanComment[] = [];
+  @property({ attribute: false }) accessor searchTickets: TReferenceSearch | undefined;
+  @property({ type: Boolean }) accessor loadingComments = false;
+  @property({ type: String }) accessor commentsError = '';
+  @property({ type: String }) accessor error = '';
+  @property({ type: Boolean }) accessor saving = false;
+  @property({ type: Boolean }) accessor canGoBack = false;
+  @state() private accessor editing = false;
+  public static styles = [...kanbanStyles, css`
+    .layout { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 28px; }
+    .main { min-width: 0; }
+    .toolbar { margin-bottom: 16px; }
+    h2 { font-size: var(--dees-font-title2-size); line-height: 1.3; font-weight: 600; margin-bottom: 18px; overflow-wrap: anywhere; }
+    .description { white-space: pre-wrap; line-height: 1.65; overflow-wrap: anywhere; margin-bottom: 24px; }
+    aside { border-left: 1px solid var(--dees-color-border-subtle); padding-left: 22px; }
+    .fields { display: grid; gap: 16px; }
+    .fields label { display: block; margin-bottom: 6px; }
+    h3 { font-size: var(--dees-font-body-size); margin-bottom: 12px; }
+    .children { margin-bottom: 24px; }
+    .child { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--dees-color-border-subtle); }
+    .discussion { border-top: 1px solid var(--dees-color-border-subtle); padding-top: 22px; }
+    .edit { display: grid; gap: 14px; margin-bottom: 22px; }
+    @media (max-width: 700px) { .layout { grid-template-columns: minmax(0, 1fr); gap: 24px; } aside { grid-row: 1; border-left: 0; padding-left: 0; } .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+  `];
+  public updated(changed: Map<string, unknown>): void {
+    const previous = changed.get('ticket') as IKanbanTicket | undefined;
+    if (changed.has('ticket') && previous?.id !== this.ticket?.id) this.editing = Boolean(this.draft);
+  }
+  private changeDraft(change: Partial<IKanbanTicketDraft>): void {
+    this.draft = { ...(this.draft ?? ticketDraft(this.ticket!)), ...change };
+    kanbanEvent(this, 'kanban-ticket-draft', { ticketId: this.ticket!.id, draft: this.draft });
+  }
+  private addComment = (input: Parameters<NonNullable<IKanbanProvider['addComment']>>[0]) => this.provider.addComment!(input);
+  public render() {
+    const ticket = this.ticket;
+    if (!ticket) return html``;
+    const draft = this.draft ?? ticketDraft(ticket);
+    const parent = this.tickets.find(item => item.id === ticket.parentId);
+    const children = sortKanbanTickets(this.tickets.filter(item => item.parentId === ticket.id));
+    const editable = Boolean(this.provider.updateTicket) && ticket.permissions?.edit !== false;
+    const movable = Boolean(this.provider.moveTicket) && ticket.permissions?.move !== false;
+    const parents = this.tickets.filter(item => item.kind === (ticket.kind === 'subtask' ? 'task' : 'epic'));
+    return html`<div class="toolbar row">
+      ${this.canGoBack ? html`<dees-button size="sm" type="ghost" icon="lucide:ArrowLeft" text="Back" @clicked=${() => kanbanEvent(this, 'kanban-detail-back', {})}></dees-button>` : ''}
+      <span class="badge">${ticket.kind}</span><span class="caption">${ticket.key}</span>
+      ${parent ? html`<span class="caption">/</span><button class="link caption" @click=${() => kanbanEvent(this, 'kanban-ticket-open', { ticketId: parent.id })}>${parent.title}</button>` : ''}
+      <span class="spacer"></span>${editable && !this.editing ? html`<dees-button size="sm" type="ghost" text="Edit ticket" icon="lucide:Pencil" @clicked=${() => { this.editing = true; this.changeDraft({}); }}></dees-button>` : ''}
+    </div>
+    ${this.error ? html`<p class="error" role="alert">${this.error}</p>` : ''}
+    <div class="layout"><div class="main">
+      ${this.editing && editable ? html`<div class="edit">
+        <dees-input-text label="Title" .value=${draft.title} .disabled=${this.saving}
+          @input=${(event: Event) => this.changeDraft({ title: String((event.currentTarget as DeesInputText).value ?? '') })}></dees-input-text>
+        <dees-input-textarea label="Description" .value=${draft.description} .rows=${5} .disabled=${this.saving}
+          @input=${(event: Event) => this.changeDraft({ description: (event.currentTarget as DeesInputTextarea).value })}></dees-input-textarea>
+        <div class="row"><dees-button size="sm" type="accent" text="Save changes" .disabled=${this.saving || !draft.title.trim()} .status=${this.saving ? 'pending' : 'normal'}
+          @clicked=${() => kanbanEvent(this, 'kanban-ticket-save', { ticketId: ticket.id, draft })}></dees-button>
+          <dees-button size="sm" type="ghost" text="Cancel" .disabled=${this.saving} @clicked=${() => {
+            this.editing = false; this.draft = undefined; kanbanEvent(this, 'kanban-ticket-draft', { ticketId: ticket.id, draft: undefined });
+          }}></dees-button></div>
+      </div>` : html`<h2>${ticket.title}</h2><div class="description ${ticket.description ? '' : 'muted'}">${ticket.description || 'No description yet.'}</div>`}
+      ${ticket.kind !== 'subtask' ? html`<section class="children"><div class="row"><h3>${ticket.kind === 'epic' ? 'Tasks' : 'Subtasks'}</h3><span class="spacer"></span>
+        ${this.provider.createTicket && ticket.permissions?.createChild !== false ? html`<dees-button size="sm" type="ghost" icon="lucide:Plus" text=${ticket.kind === 'epic' ? 'Add task' : 'Add subtask'}
+          @clicked=${() => kanbanEvent(this, 'kanban-ticket-create', { kind: ticket.kind === 'epic' ? 'task' : 'subtask', parentId: ticket.id, columnId: this.columns[0]?.id ?? ticket.columnId })}></dees-button>` : ''}</div>
+        ${children.map(child => html`<div class="child"><button class="link" @click=${() => kanbanEvent(this, 'kanban-ticket-open', { ticketId: child.id })}>${ticketLabel(child)}</button>
+          <span class="badge">${this.columns.find(column => column.id === child.columnId)?.title ?? child.columnId}</span></div>`)}
+        ${!children.length ? html`<p class="caption">No ${ticket.kind === 'epic' ? 'tasks' : 'subtasks'} yet.</p>` : ''}</section>` : ''}
+      <dees-kanban-discussion class="discussion" .ticketId=${ticket.id} .comments=${this.comments} .draft=${this.commentDraft}
+        .loading=${this.loadingComments} .error=${this.commentsError} .readOnly=${ticket.permissions?.comment === false}
+        .searchTickets=${this.searchTickets} .addComment=${this.provider.addComment ? this.addComment : undefined}></dees-kanban-discussion>
+    </div><aside><div class="fields">
+      <dees-input-dropdown label="Status" .options=${this.columns.map(column => ({ key: column.id, option: column.title }))}
+        .value=${{ key: ticket.columnId, option: this.columns.find(column => column.id === ticket.columnId)?.title ?? ticket.columnId }}
+        .disabled=${!movable || this.saving} @selectedOption=${(event: CustomEvent<{ key: string }>) => kanbanEvent(this, 'kanban-ticket-move', { ticketId: ticket.id, columnId: event.detail.key })}></dees-input-dropdown>
+      ${this.editing && editable ? html`
+        <dees-input-dropdown label="Priority" .disabled=${this.saving} .value=${{ key: draft.priority, option: draft.priority }}
+          .options=${['none', 'low', 'normal', 'high', 'urgent'].map(key => ({ key, option: key }))}
+          @selectedOption=${(event: CustomEvent<{ key: TKanbanPriority }>) => this.changeDraft({ priority: event.detail.key })}></dees-input-dropdown>
+        <dees-input-dropdown label="Assignee" .disabled=${this.saving} .value=${{ key: draft.assigneeId, option: this.people.find(person => person.id === draft.assigneeId)?.name ?? ticket.assignee?.name ?? 'Unassigned' }}
+          .options=${[{ key: '', option: 'Unassigned' }, ...this.people.map(person => ({ key: person.id, option: person.name }))]}
+          @selectedOption=${(event: CustomEvent<{ key: string }>) => this.changeDraft({ assigneeId: event.detail.key })}></dees-input-dropdown>
+        ${ticket.kind !== 'epic' ? html`<dees-input-dropdown label=${ticket.kind === 'task' ? 'Epic' : 'Parent task'} .disabled=${this.saving}
+          .value=${{ key: draft.parentId, option: parents.find(item => item.id === draft.parentId)?.title ?? 'None' }}
+          .options=${[...(ticket.kind === 'task' ? [{ key: '', option: 'None' }] : []), ...parents.map(item => ({ key: item.id, option: ticketLabel(item) }))]}
+          @selectedOption=${(event: CustomEvent<{ key: string }>) => this.changeDraft({ parentId: event.detail.key })}></dees-input-dropdown>` : ''}
+      ` : html`<div><label class="caption">Priority</label>${ticket.priority ?? 'none'}</div><div><label class="caption">Assignee</label>${ticket.assignee?.name ?? 'Unassigned'}</div>`}
+      ${ticket.labels?.length ? html`<div><label class="caption">Labels</label><div class="row">${ticket.labels.map(label => html`<span class="badge">${label}</span>`)}</div></div>` : ''}
+    </div></aside></div>`;
+  }
+  public finishEditing(): void { this.editing = false; }
+}

package/ts_web/elements/00group-kanban/index.ts

@@ -0,0 +1,6 @@
+export * from './interfaces.js';
+export * from './dees-kanban/dees-kanban.js';
+export * from './dees-kanban-card/dees-kanban-card.js';
+export * from './dees-kanban-column/dees-kanban-column.js';
+export * from './dees-kanban-ticket-detail/dees-kanban-ticket-detail.js';
+export * from './dees-kanban-discussion/dees-kanban-discussion.js';

package/ts_web/elements/00group-kanban/interfaces.ts

@@ -0,0 +1,67 @@
+import type { TReferenceContent } from '../00group-input/dees-input-reference/interfaces.js';
+
+export type TKanbanTicketKind = 'epic' | 'task' | 'subtask';
+export type TKanbanPriority = 'none' | 'low' | 'normal' | 'high' | 'urgent';
+export interface IKanbanPerson { id: string; name: string; }
+export interface IKanbanColumn { id: string; title: string; /** Marks completed subtasks. */ done?: boolean; }
+export interface IKanbanTicket {
+  id: string;
+  key: string;
+  kind: TKanbanTicketKind;
+  title: string;
+  description?: string;
+  /** Task -> epic, subtask -> task. Epics have no parent. */
+  parentId?: string;
+  columnId: string;
+  order: number;
+  priority?: TKanbanPriority;
+  assignee?: IKanbanPerson;
+  labels?: string[];
+  /** UI capabilities; the provider must enforce authorization independently. */
+  permissions?: { edit?: boolean; move?: boolean; comment?: boolean; createChild?: boolean };
+}
+export interface IKanbanComment {
+  id: string;
+  ticketId: string;
+  author: IKanbanPerson;
+  /** ISO 8601 timestamp. */
+  createdAt: string;
+  body: TReferenceContent;
+}
+export interface IKanbanTicketChanges {
+  title?: string;
+  description?: string;
+  priority?: TKanbanPriority;
+  assignee?: IKanbanPerson | null;
+  parentId?: string | null;
+}
+export interface IKanbanTicketDraft {
+  title: string;
+  description: string;
+  priority: TKanbanPriority;
+  assigneeId: string;
+  parentId: string;
+}
+export interface IKanbanMove {
+  ticketId: string;
+  columnId: string;
+  /** Omitted means append. Provider assigns ordering atomically with the move. */
+  beforeTicketId?: string;
+}
+export interface IKanbanCreate {
+  kind: TKanbanTicketKind;
+  title: string;
+  columnId: string;
+  parentId?: string;
+}
+/** Missing mutation callbacks make the corresponding controls read-only. AbortSignals cancel obsolete reads. */
+export interface IKanbanProvider {
+  getTicket?: (id: string, signal: AbortSignal) => Promise<IKanbanTicket>;
+  searchTickets?: (query: string, signal: AbortSignal) => Promise<IKanbanTicket[]>;
+  loadComments?: (ticketId: string, signal: AbortSignal) => Promise<IKanbanComment[]>;
+  addComment?: (input: { ticketId: string; body: TReferenceContent }) => Promise<IKanbanComment>;
+  updateTicket?: (input: { ticketId: string; changes: IKanbanTicketChanges }) => Promise<IKanbanTicket>;
+  /** Return all records whose order or column changed. */
+  moveTicket?: (input: IKanbanMove) => Promise<IKanbanTicket[]>;
+  createTicket?: (input: IKanbanCreate) => Promise<IKanbanTicket>;
+}

package/ts_web/elements/00group-kanban/kanban.demodata.ts

@@ -0,0 +1,56 @@
+import type { IKanbanColumn, IKanbanComment, IKanbanPerson, IKanbanProvider, IKanbanTicket } from './interfaces.js';
+
+export const kanbanDemoPeople: IKanbanPerson[] = [{ id: 'mara', name: 'Mara Chen' }, { id: 'jonas', name: 'Jonas Berg' }, { id: 'alex', name: 'Alex Rivera' }];
+export const kanbanDemoColumns: IKanbanColumn[] = [{ id: 'backlog', title: 'Backlog' }, { id: 'progress', title: 'In progress' }, { id: 'review', title: 'In review' }, { id: 'done', title: 'Done', done: true }];
+export const createKanbanDemo = (): { tickets: IKanbanTicket[]; provider: IKanbanProvider } => {
+  let tickets: IKanbanTicket[] = [
+    { id: 'epic-1', key: 'CAT-100', kind: 'epic', title: 'A calmer workspace', description: 'Make daily work feel focused, connected and easy to navigate.', columnId: 'progress', order: 0 },
+    { id: 'epic-2', key: 'CAT-200', kind: 'epic', title: 'Built for teams', description: 'Keep everyone close to the work and the decisions behind it.', columnId: 'progress', order: 1 },
+    { id: 'task-1', key: 'CAT-101', kind: 'task', title: 'Design the project overview', description: 'Give each project a clear home. Surface the next action, recent activity and open questions.', parentId: 'epic-1', columnId: 'backlog', order: 0, priority: 'normal', assignee: kanbanDemoPeople[0], labels: ['Design'] },
+    { id: 'task-2', key: 'CAT-102', kind: 'task', title: 'Connect related tickets', description: 'Type #_ in a comment to search for another ticket. Keep the reference connected when its title changes.', parentId: 'epic-2', columnId: 'progress', order: 0, priority: 'high', assignee: kanbanDemoPeople[1], labels: ['Collaboration'] },
+    { id: 'task-3', key: 'CAT-103', kind: 'task', title: 'Make every action keyboard accessible', description: 'Support focus, selection, navigation and moving tickets without a mouse.', parentId: 'epic-1', columnId: 'progress', order: 1, priority: 'normal', assignee: kanbanDemoPeople[2], labels: ['Accessibility'] },
+    { id: 'task-4', key: 'CAT-104', kind: 'task', title: 'Review the ticket detail experience', description: 'Check hierarchy navigation, discussion drafts and small-screen layouts.', parentId: 'epic-2', columnId: 'review', order: 0, priority: 'low', assignee: kanbanDemoPeople[0] },
+    { id: 'task-5', key: 'CAT-105', kind: 'task', title: 'Unify status and priority styles', description: 'Use shared catalog tokens in light and dark themes.', parentId: 'epic-1', columnId: 'done', order: 0, assignee: kanbanDemoPeople[2], labels: ['Foundations'] },
+    { id: 'sub-1', key: 'CAT-106', kind: 'subtask', title: 'Anchor search to the cursor', parentId: 'task-2', columnId: 'done', order: 0, assignee: kanbanDemoPeople[1] },
+    { id: 'sub-2', key: 'CAT-107', kind: 'subtask', title: 'Restore focus after selection', parentId: 'task-2', columnId: 'progress', order: 1, assignee: kanbanDemoPeople[1] },
+    { id: 'sub-3', key: 'CAT-108', kind: 'subtask', title: 'Check arrow-key navigation', parentId: 'task-3', columnId: 'done', order: 0, assignee: kanbanDemoPeople[2] },
+  ];
+  let comments: IKanbanComment[] = [
+    { id: 'comment-1', ticketId: 'task-2', author: kanbanDemoPeople[0], createdAt: '2026-09-18T09:30:00Z', body: [{ type: 'text', text: 'The picker should feel like part of the conversation. Can we check this together with ' }, { type: 'reference', id: 'task-3', label: '#CAT-103 Keyboard accessibility' }, { type: 'text', text: '?' }] },
+    { id: 'comment-2', ticketId: 'task-2', author: kanbanDemoPeople[1], createdAt: '2026-09-18T09:42:00Z', body: [{ type: 'text', text: 'Yes. Search receives focus immediately, and choosing a ticket returns you to exactly where you were writing.' }] },
+  ];
+  let nextKey = 300;
+  // Demo-only in-memory provider. Applications persist through their own authorized APIs.
+  const provider: IKanbanProvider = {
+    getTicket: async id => {
+      const ticket = tickets.find(item => item.id === id);
+      if (!ticket) throw new Error('Ticket not found.');
+      return ticket;
+    },
+    searchTickets: async query => tickets.filter(ticket => `${ticket.key} ${ticket.title}`.toLowerCase().includes(query.toLowerCase())),
+    loadComments: async id => comments.filter(comment => comment.ticketId === id),
+    addComment: async input => {
+      const comment: IKanbanComment = { ...input, id: crypto.randomUUID(), author: kanbanDemoPeople[0], createdAt: new Date().toISOString() };
+      comments = [...comments, comment]; return comment;
+    },
+    updateTicket: async ({ ticketId, changes }) => {
+      const previous = tickets.find(ticket => ticket.id === ticketId)!;
+      const ticket: IKanbanTicket = { ...previous, ...changes, assignee: changes.assignee === null ? undefined : changes.assignee ?? previous.assignee,
+        parentId: changes.parentId === null ? undefined : changes.parentId ?? previous.parentId };
+      tickets = tickets.map(item => item.id === ticketId ? ticket : item); return ticket;
+    },
+    moveTicket: async ({ ticketId, columnId, beforeTicketId }) => {
+      const ticket = tickets.find(item => item.id === ticketId)!;
+      const destination = tickets.filter(item => item.id !== ticketId && item.columnId === columnId && item.kind === ticket.kind).sort((a, b) => a.order - b.order);
+      const index = beforeTicketId ? destination.findIndex(item => item.id === beforeTicketId) : destination.length;
+      destination.splice(index < 0 ? destination.length : index, 0, { ...ticket, columnId });
+      const changed = destination.map((item, order) => ({ ...item, order }));
+      tickets = tickets.map(item => changed.find(record => record.id === item.id) ?? item); return changed;
+    },
+    createTicket: async input => {
+      const ticket: IKanbanTicket = { ...input, id: crypto.randomUUID(), key: `CAT-${nextKey++}`, order: tickets.length };
+      tickets = [...tickets, ticket]; return ticket;
+    },
+  };
+  return { tickets, provider };
+};

package/ts_web/elements/00group-kanban/kanban.helpers.ts

@@ -0,0 +1,13 @@
+import type { IKanbanTicket, IKanbanTicketDraft } from './interfaces.js';
+
+export const sortKanbanTickets = (tickets: readonly IKanbanTicket[]): IKanbanTicket[] =>
+  [...tickets].sort((a, b) => a.order - b.order || a.id.localeCompare(b.id));
+export const ticketLabel = (ticket: IKanbanTicket): string => `#${ticket.key} ${ticket.title}`;
+export const ticketDraft = (ticket: IKanbanTicket): IKanbanTicketDraft => ({
+  title: ticket.title, description: ticket.description ?? '', priority: ticket.priority ?? 'none',
+  assigneeId: ticket.assignee?.id ?? '', parentId: ticket.parentId ?? '',
+});
+export const kanbanEvent = <T>(owner: HTMLElement, name: string, detail: T): void => {
+  owner.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+};
+export const kanbanError = (error: unknown): string => error instanceof Error ? error.message : String(error);

package/ts_web/elements/00group-kanban/kanban.styles.ts

@@ -0,0 +1,18 @@
+import { css, cssManager } from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../00theme.js';
+
+export const kanbanStyles = [themeDefaultStyles, cssManager.defaultStyles, css`
+  :host { display: block; min-width: 0; font-family: var(--dees-font-family); color: var(--dees-color-text-primary); font-size: var(--dees-font-body-size); }
+  * { box-sizing: border-box; }
+  h2, h3, p { margin: 0; }
+  .muted { color: var(--dees-color-text-secondary); }
+  .caption { font-size: var(--dees-font-footnote-size); color: var(--dees-color-text-secondary); }
+  .error { color: var(--dees-color-text-error); padding: 10px 0; font-size: var(--dees-font-footnote-size); }
+  .empty { padding: 24px 12px; text-align: center; color: var(--dees-color-text-secondary); font-size: var(--dees-font-footnote-size); }
+  .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+  .spacer { flex: 1; }
+  button.link { border: 0; background: transparent; font: inherit; color: var(--dees-color-link); padding: 2px 0; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
+  button:focus-visible, summary:focus-visible { outline: 2px solid var(--dees-color-focus-ring); outline-offset: 3px; border-radius: var(--dees-radius-sm); }
+  dees-icon { font-size: 16px; }
+  .badge { display: inline-flex; align-items: center; gap: 4px; background: var(--dees-color-badge-default-bg); padding: 3px 7px; border-radius: var(--dees-radius-sm); font-size: var(--dees-font-caption1-size); color: var(--dees-color-text-secondary); }
+`];

package/ts_web/elements/index.ts

@@ -10,6 +10,7 @@ export * from './00group-dataview/index.js';
 export * from './00group-feedback/index.js';
 export * from './00group-form/index.js';
 export * from './00group-harness/index.js';
+export * from './00group-kanban/index.js';
 export * from './00group-input/index.js';
 export * from './00group-layout/index.js';
 export * from './00group-media/index.js';

package/ts_web/services/DeesServiceLibLoader.ts

@@ -101,6 +101,7 @@ export interface IEchartsBundle {
  */
 export interface ITiptapBundle {
   Editor: typeof Editor;
+  Node: typeof import('@tiptap/core').Node;
   StarterKit: { configure: (options?: Partial<StarterKitOptions>) => any };
   Underline: { configure: (options?: Partial<UnderlineOptions>) => any };
   TextAlign: { configure: (options?: Partial<TextAlignOptions>) => any };
@@ -464,6 +465,7 @@ export class DeesServiceLibLoader {
 
         this.tiptapLib = {
           Editor: coreModule.Editor,
+          Node: coreModule.Node,
           StarterKit: starterKitModule.default || starterKitModule.StarterKit,
           Underline: underlineModule.default || underlineModule.Underline,
           TextAlign: textAlignModule.default || textAlignModule.TextAlign,