@docyrus/ui-pro-ai-assistant 0.0.1

package/src/internal/plate-editor/editor/plugins/copilot-kit.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { type TElement } from 'platejs';
+
+import { CopilotPlugin } from '@platejs/ai/react';
+import { serializeMd, stripMarkdown } from '@platejs/markdown';
+
+import { MarkdownKit } from './markdown-kit';
+
+import { GhostText } from '../../plate-ui/ghost-text';
+
+export const CopilotKit = [
+  ...MarkdownKit,
+  CopilotPlugin.configure(({ api }) => ({
+    options: {
+      completeOptions: {
+        api: '/api/ai/copilot',
+        fetch: (input, init) => {
+          const token = localStorage.getItem('docyrus_access_token');
+          const headers = new Headers(init?.headers);
+
+          if (token) {
+            headers.set('Authorization', `Bearer ${token}`);
+          }
+
+          return globalThis.fetch(input, { ...init, headers });
+        },
+        onFinish: (_, completion) => {
+          if (completion === '0') return;
+
+          api.copilot.setBlockSuggestion({
+            text: stripMarkdown(completion)
+          });
+        }
+      },
+      debounceDelay: 500,
+      renderGhostText: GhostText as any,
+      getPrompt: ({ editor }) => {
+        const contextEntry = editor.api.block({ highest: true });
+
+        if (!contextEntry) return '';
+
+        const prompt = serializeMd(editor, {
+          value: [contextEntry[0] as TElement]
+        });
+
+        return `Continue the text up to the next punctuation mark:
+"""
+${prompt}
+"""`;
+      }
+    },
+    shortcuts: {
+      accept: {
+        keys: 'tab'
+      },
+      acceptNextWord: {
+        keys: 'mod+right'
+      },
+      reject: {
+        keys: 'escape'
+      },
+      triggerSuggestion: {
+        keys: 'ctrl+space'
+      }
+    }
+  }))
+];

package/src/internal/plate-editor/editor/plugins/cursor-overlay-kit.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { CursorOverlayPlugin } from '@platejs/selection/react';
+
+import { CursorOverlay } from '../../plate-ui/cursor-overlay';
+
+export const CursorOverlayKit = [
+  CursorOverlayPlugin.configure({
+    render: {
+      afterEditable: () => <CursorOverlay />
+    }
+  })
+];

package/src/internal/plate-editor/editor/plugins/date-base-kit.tsx

@@ -0,0 +1,5 @@
+import { BaseDatePlugin } from '@platejs/date';
+
+import { DateElementStatic } from '../../plate-ui/date-node-static';
+
+export const BaseDateKit = [BaseDatePlugin.withComponent(DateElementStatic)];

package/src/internal/plate-editor/editor/plugins/date-kit.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import { DatePlugin } from '@platejs/date/react';
+
+import { DateElement } from '../../plate-ui/date-node';
+
+export const DateKit = [DatePlugin.withComponent(DateElement)];

package/src/internal/plate-editor/editor/plugins/discussion-kit.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { createPlatePlugin } from 'platejs/react';
+
+import { type TComment } from '../../plate-ui/comment';
+
+import { BlockDiscussion } from '../../plate-ui/block-discussion';
+
+export type TDiscussion = {
+  id: string;
+  comments: TComment[];
+  createdAt: Date;
+  isResolved: boolean;
+  userId: string;
+  documentContent?: string;
+};
+
+export const discussionPlugin = createPlatePlugin({
+  key: 'discussion',
+  options: {
+    currentUserId: 'default',
+    discussions: [] as TDiscussion[],
+    users: {} as Record<string, {
+      id: string; avatarUrl: string; name: string; hue?: number;
+    }>
+  }
+})
+  .configure({
+    render: { aboveNodes: BlockDiscussion }
+  })
+  .extendSelectors(({ getOption }) => ({
+    currentUser: () => getOption('users')[getOption('currentUserId')],
+    user: (id: string) => getOption('users')[id]
+  }));
+
+export const DiscussionKit = [discussionPlugin];

package/src/internal/plate-editor/editor/plugins/dnd-kit.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { DndPlugin } from '@platejs/dnd';
+import { PlaceholderPlugin } from '@platejs/media/react';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+
+import { BlockDraggable } from '../../plate-ui/block-draggable';
+
+export const DndKit = [
+  DndPlugin.configure({
+    options: {
+      enableScroller: true,
+      onDropFiles: ({ dragItem, editor, target }) => {
+        editor
+          .getTransforms(PlaceholderPlugin)
+          .insert.media(dragItem.files, { at: target, nextBlock: false });
+      }
+    },
+    render: {
+      aboveNodes: BlockDraggable,
+      aboveSlate: ({ children }) => (
+        <DndProvider backend={HTML5Backend}>{children}</DndProvider>
+      )
+    }
+  })
+];

package/src/internal/plate-editor/editor/plugins/docx-export-kit.tsx

@@ -0,0 +1,43 @@
+/**
+ * Editor kit for DOCX export.
+ *
+ * Uses DocxExportPlugin with custom DOCX-compatible components for elements
+ * that need inline styles instead of Tailwind classes (which don't work in DOCX).
+ */
+
+import { DocxExportPlugin } from '@platejs/docx-io';
+import { KEYS } from 'platejs';
+
+import { CalloutElementDocx } from '../../plate-ui/callout-node-static';
+import {
+  CodeBlockElementDocx,
+  CodeLineElementDocx,
+  CodeSyntaxLeafDocx
+} from '../../plate-ui/code-block-node-static';
+import {
+  ColumnElementDocx,
+  ColumnGroupElementDocx
+} from '../../plate-ui/column-node-static';
+import {
+  EquationElementDocx,
+  InlineEquationElementDocx
+} from '../../plate-ui/equation-node-static';
+import { TocElementDocx } from '../../plate-ui/toc-node-static';
+
+export const DocxExportKit = [
+  DocxExportPlugin.configure({
+    override: {
+      components: {
+        [KEYS.callout]: CalloutElementDocx,
+        [KEYS.codeBlock]: CodeBlockElementDocx,
+        [KEYS.codeLine]: CodeLineElementDocx,
+        [KEYS.codeSyntax]: CodeSyntaxLeafDocx,
+        [KEYS.column]: ColumnElementDocx,
+        [KEYS.columnGroup]: ColumnGroupElementDocx,
+        [KEYS.equation]: EquationElementDocx,
+        [KEYS.inlineEquation]: InlineEquationElementDocx,
+        [KEYS.toc]: TocElementDocx
+      }
+    }
+  })
+];

package/src/internal/plate-editor/editor/plugins/docx-kit.tsx

@@ -0,0 +1,6 @@
+'use client';
+
+import { DocxPlugin } from '@platejs/docx';
+import { JuicePlugin } from '@platejs/juice';
+
+export const DocxKit = [DocxPlugin, JuicePlugin];

package/src/internal/plate-editor/editor/plugins/emoji-kit.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import emojiMartData from '@emoji-mart/data';
+import { EmojiInputPlugin, EmojiPlugin } from '@platejs/emoji/react';
+
+import { EmojiInputElement } from '../../plate-ui/emoji-node';
+
+export const EmojiKit = [
+  EmojiPlugin.configure({
+    options: {
+      data: emojiMartData as any
+    }
+  }),
+  EmojiInputPlugin.withComponent(EmojiInputElement)
+];

package/src/internal/plate-editor/editor/plugins/exit-break-kit.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import { ExitBreakPlugin } from 'platejs';
+
+export const ExitBreakKit = [
+  ExitBreakPlugin.configure({
+    shortcuts: {
+      insert: { keys: 'mod+enter' },
+      insertBefore: { keys: 'mod+shift+enter' }
+    }
+  })
+];

package/src/internal/plate-editor/editor/plugins/floating-toolbar-kit.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { createPlatePlugin } from 'platejs/react';
+
+import { FloatingToolbar } from '../../plate-ui/floating-toolbar';
+import { FloatingToolbarButtons } from '../../plate-ui/floating-toolbar-buttons';
+
+export const FloatingToolbarKit = [
+  createPlatePlugin({
+    key: 'floating-toolbar',
+    render: {
+      afterEditable: () => (
+        <FloatingToolbar>
+          <FloatingToolbarButtons />
+        </FloatingToolbar>
+      )
+    }
+  })
+];

package/src/internal/plate-editor/editor/plugins/font-base-kit.tsx

@@ -0,0 +1,36 @@
+import { type SlatePluginConfig, KEYS } from 'platejs';
+
+import {
+  BaseFontBackgroundColorPlugin,
+  BaseFontColorPlugin,
+  BaseFontFamilyPlugin,
+  BaseFontSizePlugin
+} from '@platejs/basic-styles';
+import { LineHeightPlugin, TextAlignPlugin } from '@platejs/basic-styles/react';
+
+const options = {
+  inject: { targetPlugins: [KEYS.p] }
+} satisfies SlatePluginConfig;
+
+export const BaseFontKit = [
+  BaseFontColorPlugin.configure(options),
+  BaseFontBackgroundColorPlugin.configure(options),
+  BaseFontSizePlugin.configure(options),
+  BaseFontFamilyPlugin.configure(options),
+  LineHeightPlugin.configure({
+    inject: {
+      nodeProps: {
+        defaultNodeValue: 1.5,
+        validNodeValues: [
+          1,
+          1.2,
+          1.5,
+          2,
+          3
+        ]
+      },
+      targetPlugins: [...KEYS.heading, KEYS.p]
+    }
+  }),
+  TextAlignPlugin
+];

package/src/internal/plate-editor/editor/plugins/font-kit.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { type PlatePluginConfig } from 'platejs/react';
+
+import {
+  FontBackgroundColorPlugin,
+  FontColorPlugin,
+  FontFamilyPlugin,
+  FontSizePlugin,
+  LineHeightPlugin,
+  TextAlignPlugin
+} from '@platejs/basic-styles/react';
+import { KEYS } from 'platejs';
+
+const options = {
+  inject: { targetPlugins: [KEYS.p] }
+} satisfies PlatePluginConfig;
+
+export const FontKit = [
+  FontColorPlugin.configure({
+    inject: {
+      ...options.inject,
+      nodeProps: {
+        defaultNodeValue: 'black'
+      }
+    }
+  }),
+  FontBackgroundColorPlugin.configure(options),
+  FontSizePlugin.configure(options),
+  FontFamilyPlugin.configure(options),
+  LineHeightPlugin.configure({
+    inject: {
+      nodeProps: {
+        defaultNodeValue: 1.5,
+        validNodeValues: [
+          1,
+          1.2,
+          1.5,
+          2,
+          3
+        ]
+      },
+      targetPlugins: [...KEYS.heading, KEYS.p]
+    }
+  }),
+  TextAlignPlugin
+];

package/src/internal/plate-editor/editor/plugins/indent-base-kit.tsx

@@ -0,0 +1,19 @@
+import { BaseIndentPlugin } from '@platejs/indent';
+import { KEYS } from 'platejs';
+
+export const BaseIndentKit = [
+  BaseIndentPlugin.configure({
+    inject: {
+      targetPlugins: [
+        ...KEYS.heading,
+        KEYS.p,
+        KEYS.blockquote,
+        KEYS.codeBlock,
+        KEYS.toggle
+      ]
+    },
+    options: {
+      offset: 24
+    }
+  })
+];

package/src/internal/plate-editor/editor/plugins/indent-kit.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { IndentPlugin } from '@platejs/indent/react';
+import { KEYS } from 'platejs';
+
+export const IndentKit = [
+  IndentPlugin.configure({
+    inject: {
+      targetPlugins: [
+        ...KEYS.heading,
+        KEYS.p,
+        KEYS.blockquote,
+        KEYS.codeBlock,
+        KEYS.toggle,
+        KEYS.img
+      ]
+    },
+    options: {
+      offset: 24
+    }
+  })
+];

package/src/internal/plate-editor/editor/plugins/link-base-kit.tsx

@@ -0,0 +1,5 @@
+import { BaseLinkPlugin } from '@platejs/link';
+
+import { LinkElementStatic } from '../../plate-ui/link-node-static';
+
+export const BaseLinkKit = [BaseLinkPlugin.withComponent(LinkElementStatic)];

package/src/internal/plate-editor/editor/plugins/link-kit.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { upsertLink } from '@platejs/link';
+import { LinkPlugin } from '@platejs/link/react';
+import { Key } from 'platejs/react';
+
+import { LinkElement } from '../../plate-ui/link-node';
+import { LinkFloatingToolbar } from '../../plate-ui/link-toolbar';
+
+export const linkPlugin = LinkPlugin.configure({
+  options: {
+    defaultLinkAttributes: {
+      target: '_blank',
+      rel: 'noopener noreferrer'
+    }
+  }
+});
+
+export const LinkKit = [
+  linkPlugin.extend({
+    shortcuts: {
+      toggleLink: {
+        keys: [[Key.Mod, 'k']],
+        preventDefault: true,
+        handler: ({ editor }) => {
+          upsertLink(editor, { url: '' });
+        }
+      }
+    },
+    render: {
+      afterEditable: LinkFloatingToolbar,
+      node: LinkElement
+    }
+  })
+];

package/src/internal/plate-editor/editor/plugins/list-base-kit.tsx

@@ -0,0 +1,24 @@
+import { BaseListPlugin } from '@platejs/list';
+import { KEYS } from 'platejs';
+
+import { BaseIndentKit } from './indent-base-kit';
+
+import { BlockListStatic } from '../../plate-ui/block-list-static';
+
+export const BaseListKit = [
+  ...BaseIndentKit,
+  BaseListPlugin.configure({
+    inject: {
+      targetPlugins: [
+        ...KEYS.heading,
+        KEYS.p,
+        KEYS.blockquote,
+        KEYS.codeBlock,
+        KEYS.toggle
+      ]
+    },
+    render: {
+      belowNodes: BlockListStatic
+    }
+  })
+];

package/src/internal/plate-editor/editor/plugins/list-kit.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { ListPlugin } from '@platejs/list/react';
+import { KEYS } from 'platejs';
+
+import { IndentKit } from './indent-kit';
+
+import { BlockList } from '../../plate-ui/block-list';
+
+export const ListKit = [
+  ...IndentKit,
+  ListPlugin.configure({
+    inject: {
+      targetPlugins: [
+        ...KEYS.heading,
+        KEYS.p,
+        KEYS.blockquote,
+        KEYS.codeBlock,
+        KEYS.toggle,
+        KEYS.img
+      ]
+    },
+    render: {
+      belowNodes: BlockList
+    }
+  })
+];

package/src/internal/plate-editor/editor/plugins/markdown-kit.tsx

@@ -0,0 +1,18 @@
+import { MarkdownPlugin, remarkMdx, remarkMention } from '@platejs/markdown';
+import { KEYS } from 'platejs';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+
+export const MarkdownKit = [
+  MarkdownPlugin.configure({
+    options: {
+      disallowedNodes: [KEYS.suggestion],
+      remarkPlugins: [
+        remarkMath,
+        remarkGfm,
+        remarkMdx,
+        remarkMention
+      ]
+    }
+  })
+];

package/src/internal/plate-editor/editor/plugins/math-base-kit.tsx

@@ -0,0 +1,8 @@
+import { BaseEquationPlugin, BaseInlineEquationPlugin } from '@platejs/math';
+
+import {
+  EquationElementStatic,
+  InlineEquationElementStatic
+} from '../../plate-ui/equation-node-static';
+
+export const BaseMathKit = [BaseInlineEquationPlugin.withComponent(InlineEquationElementStatic), BaseEquationPlugin.withComponent(EquationElementStatic)];

package/src/internal/plate-editor/editor/plugins/math-kit.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+import { EquationPlugin, InlineEquationPlugin } from '@platejs/math/react';
+
+import {
+  EquationElement,
+  InlineEquationElement
+} from '../../plate-ui/equation-node';
+
+export const MathKit = [InlineEquationPlugin.withComponent(InlineEquationElement), EquationPlugin.withComponent(EquationElement)];

package/src/internal/plate-editor/editor/plugins/media-base-kit.tsx

@@ -0,0 +1,37 @@
+import { BaseCaptionPlugin } from '@platejs/caption';
+import {
+  BaseAudioPlugin,
+  BaseFilePlugin,
+  BaseImagePlugin,
+  BaseMediaEmbedPlugin,
+  BasePlaceholderPlugin,
+  BaseVideoPlugin
+} from '@platejs/media';
+import { KEYS } from 'platejs';
+
+import { MediaAudioElementStatic } from '../../plate-ui/media-audio-node-static';
+import { MediaFileElementStatic } from '../../plate-ui/media-file-node-static';
+import { ImageElementStatic } from '../../plate-ui/media-image-node-static';
+import { MediaVideoElementStatic } from '../../plate-ui/media-video-node-static';
+
+export const BaseMediaKit = [
+  BaseImagePlugin.withComponent(ImageElementStatic),
+  BaseVideoPlugin.withComponent(MediaVideoElementStatic),
+  BaseAudioPlugin.withComponent(MediaAudioElementStatic),
+  BaseFilePlugin.withComponent(MediaFileElementStatic),
+  BaseCaptionPlugin.configure({
+    options: {
+      query: {
+        allow: [
+          KEYS.img,
+          KEYS.video,
+          KEYS.audio,
+          KEYS.file,
+          KEYS.mediaEmbed
+        ]
+      }
+    }
+  }),
+  BaseMediaEmbedPlugin,
+  BasePlaceholderPlugin
+];

package/src/internal/plate-editor/editor/plugins/media-kit.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { CaptionPlugin } from '@platejs/caption/react';
+import {
+  AudioPlugin,
+  FilePlugin,
+  ImagePlugin,
+  MediaEmbedPlugin,
+  PlaceholderPlugin,
+  VideoPlugin
+} from '@platejs/media/react';
+import { KEYS } from 'platejs';
+
+import { MediaAudioElement } from '../../plate-ui/media-audio-node';
+import { MediaEmbedElement } from '../../plate-ui/media-embed-node';
+import { MediaFileElement } from '../../plate-ui/media-file-node';
+import { ImageElement } from '../../plate-ui/media-image-node';
+import { PlaceholderElement } from '../../plate-ui/media-placeholder-node';
+import { ImagePreview } from '../../plate-ui/media-preview-dialog';
+import { MediaUploadToast } from '../../plate-ui/media-upload-toast';
+import { MediaVideoElement } from '../../plate-ui/media-video-node';
+
+export const MediaKit = [
+  PlaceholderPlugin.configure({
+    render: {
+      afterEditable: MediaUploadToast,
+      node: PlaceholderElement
+    }
+  }),
+  ImagePlugin.configure({
+    options: { disableUploadInsert: true },
+    render: {
+      afterEditable: ImagePreview,
+      node: ImageElement
+    }
+  }),
+  MediaEmbedPlugin.withComponent(MediaEmbedElement),
+  VideoPlugin.withComponent(MediaVideoElement),
+  AudioPlugin.withComponent(MediaAudioElement),
+  FilePlugin.withComponent(MediaFileElement),
+  CaptionPlugin.configure({
+    options: {
+      query: {
+        allow: [
+          KEYS.img,
+          KEYS.video,
+          KEYS.audio,
+          KEYS.mediaEmbed
+        ]
+      }
+    }
+  })
+];

package/src/internal/plate-editor/editor/plugins/mention-base-kit.tsx

@@ -0,0 +1,5 @@
+import { BaseMentionPlugin } from '@platejs/mention';
+
+import { MentionElementStatic } from '../../plate-ui/mention-node-static';
+
+export const BaseMentionKit = [BaseMentionPlugin.withComponent(MentionElementStatic)];

package/src/internal/plate-editor/editor/plugins/mention-kit.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { MentionInputPlugin, MentionPlugin } from '@platejs/mention/react';
+import { KEYS } from 'platejs';
+
+import { type MyMentionElement } from '../plate-types';
+
+import {
+  MentionElement,
+  MentionInputElement
+} from '../../plate-ui/mention-node';
+
+export const MentionKit = [
+  MentionPlugin.configure({
+    options: {
+      triggerPreviousCharPattern: /^$|^[\s"']$/
+    }
+  })
+    .withComponent(MentionElement)
+    .overrideEditor(({ api: { isSelectable } }) => ({
+      api: {
+        isSelectable(element) {
+          if (element.type === KEYS.mention) {
+            const mentionElement = element as unknown as MyMentionElement;
+
+            const isDocument = mentionElement.key!.startsWith('/');
+
+            return !!isDocument;
+          }
+
+          return isSelectable(element);
+        }
+      }
+    })),
+  MentionInputPlugin.withComponent(MentionInputElement)
+];