@docyrus/ui-pro-ai-assistant 0.0.1

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

@@ -0,0 +1,17 @@
+'use client';
+
+import { SlashInputPlugin, SlashPlugin } from '@platejs/slash-command/react';
+import { KEYS } from 'platejs';
+
+import { SlashInputElement } from '../../plate-ui/slash-node';
+
+export const SlashKit = [
+  SlashPlugin.configure({
+    options: {
+      triggerQuery: editor => !editor.api.some({
+        match: { type: editor.getType(KEYS.codeBlock) }
+      })
+    }
+  }),
+  SlashInputPlugin.withComponent(SlashInputElement)
+];

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

@@ -0,0 +1,5 @@
+import { BaseSuggestionPlugin } from '@platejs/suggestion';
+
+import { SuggestionLeafStatic } from '../../plate-ui/suggestion-node-static';
+
+export const BaseSuggestionKit = [BaseSuggestionPlugin.withComponent(SuggestionLeafStatic)];

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

@@ -0,0 +1,95 @@
+'use client';
+
+import {
+  type BaseSuggestionConfig,
+  BaseSuggestionPlugin
+} from '@platejs/suggestion';
+import {
+  type ExtendConfig,
+  type Path,
+  isSlateEditor,
+  isSlateString
+} from 'platejs';
+import { toTPlatePlugin } from 'platejs/react';
+
+import { discussionPlugin } from './discussion-kit';
+
+import {
+  SuggestionLeaf,
+  SuggestionLineBreak
+} from '../../plate-ui/suggestion-node';
+
+export type SuggestionConfig = ExtendConfig<
+  BaseSuggestionConfig,
+  {
+    activeId: string | null;
+    hoverId: string | null;
+    uniquePathMap: Map<string, Path>;
+  }
+>;
+
+export const suggestionPlugin = toTPlatePlugin<SuggestionConfig>(
+  BaseSuggestionPlugin,
+  ({ editor }) => ({
+    handlers: {
+      onClick: ({
+        api, event, setOption, type
+      }) => {
+        let leaf = event.target as HTMLElement;
+        let isSet = false;
+
+        const isBlockLeaf = leaf.dataset.blockSuggestion === 'true';
+
+        const unsetActiveSuggestion = () => {
+          setOption('activeId', null);
+          isSet = true;
+        };
+
+        if (!isSlateString(leaf) && !isBlockLeaf) {
+          unsetActiveSuggestion();
+        }
+
+        while (leaf.parentElement && !isSlateEditor(leaf.parentElement)) {
+          const isBlockSuggestion = leaf.dataset.blockSuggestion === 'true';
+
+          if (leaf.classList.contains(`slate-${type}`) || isBlockSuggestion) {
+            const suggestionEntry = api.suggestion!.node({
+              isText: !isBlockSuggestion
+            });
+
+            if (!suggestionEntry) {
+              unsetActiveSuggestion();
+
+              break;
+            }
+
+            const id = api.suggestion!.nodeId(suggestionEntry[0]);
+
+            setOption('activeId', id ?? null);
+
+            isSet = true;
+
+            break;
+          }
+
+          leaf = leaf.parentElement;
+        }
+
+        if (!isSet) unsetActiveSuggestion();
+      }
+    },
+    options: {
+      activeId: null,
+      currentUserId: editor.getOption(discussionPlugin, 'currentUserId'),
+      hoverId: null,
+      uniquePathMap: new Map()
+    }
+  })
+).configure({
+  render: {
+    belowNodes: SuggestionLineBreak as any,
+    node: SuggestionLeaf
+  }
+});
+
+export const SuggestionKit = [suggestionPlugin];

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

@@ -0,0 +1,20 @@
+import {
+  BaseTableCellHeaderPlugin,
+  BaseTableCellPlugin,
+  BaseTablePlugin,
+  BaseTableRowPlugin
+} from '@platejs/table';
+
+import {
+  TableCellElementStatic,
+  TableCellHeaderElementStatic,
+  TableElementStatic,
+  TableRowElementStatic
+} from '../../plate-ui/table-node-static';
+
+export const BaseTableKit = [
+  BaseTablePlugin.withComponent(TableElementStatic),
+  BaseTableRowPlugin.withComponent(TableRowElementStatic),
+  BaseTableCellPlugin.withComponent(TableCellElementStatic),
+  BaseTableCellHeaderPlugin.withComponent(TableCellHeaderElementStatic)
+];

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

@@ -0,0 +1,22 @@
+'use client';
+
+import {
+  TableCellHeaderPlugin,
+  TableCellPlugin,
+  TablePlugin,
+  TableRowPlugin
+} from '@platejs/table/react';
+
+import {
+  TableCellElement,
+  TableCellHeaderElement,
+  TableElement,
+  TableRowElement
+} from '../../plate-ui/table-node';
+
+export const TableKit = [
+  TablePlugin.withComponent(TableElement),
+  TableRowPlugin.withComponent(TableRowElement),
+  TableCellPlugin.withComponent(TableCellElement),
+  TableCellHeaderPlugin.withComponent(TableCellHeaderElement)
+];

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

@@ -0,0 +1,5 @@
+import { BaseTocPlugin } from '@platejs/toc';
+
+import { TocElementStatic } from '../../plate-ui/toc-node-static';
+
+export const BaseTocKit = [BaseTocPlugin.withComponent(TocElementStatic)];

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

@@ -0,0 +1,14 @@
+'use client';
+
+import { TocPlugin } from '@platejs/toc/react';
+
+import { TocElement } from '../../plate-ui/toc-node';
+
+export const TocKit = [
+  TocPlugin.configure({
+    options: {
+      isScroll: true,
+      topOffset: 80
+    }
+  }).withComponent(TocElement)
+];

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

@@ -0,0 +1,5 @@
+import { BaseTogglePlugin } from '@platejs/toggle';
+
+import { ToggleElementStatic } from '../../plate-ui/toggle-node-static';
+
+export const BaseToggleKit = [BaseTogglePlugin.withComponent(ToggleElementStatic)];

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

@@ -0,0 +1,9 @@
+'use client';
+
+import { TogglePlugin } from '@platejs/toggle/react';
+
+import { IndentKit } from './indent-kit';
+
+import { ToggleElement } from '../../plate-ui/toggle-node';
+
+export const ToggleKit = [...IndentKit, TogglePlugin.withComponent(ToggleElement)];

package/src/internal/plate-editor/editor/transforms.ts

@@ -0,0 +1,165 @@
+import { type PlateEditor } from 'platejs/react';
+
+import { insertCallout } from '@platejs/callout';
+import { insertCodeBlock } from '@platejs/code-block';
+import { insertDate } from '@platejs/date';
+import { insertColumnGroup, toggleColumnGroup } from '@platejs/layout';
+import { insertEquation, insertInlineEquation } from '@platejs/math';
+import {
+  insertAudioPlaceholder,
+  insertFilePlaceholder,
+  insertImagePlaceholder,
+  insertVideoPlaceholder
+} from '@platejs/media';
+import { insertTable } from '@platejs/table';
+import { insertToc } from '@platejs/toc';
+import {
+  KEYS,
+  type NodeEntry,
+  type Path,
+  PathApi,
+  type TElement
+} from 'platejs';
+
+const ACTION_THREE_COLUMNS = 'action_three_columns';
+
+const insertList = (editor: PlateEditor, type: string) => {
+  editor.tf.insertNodes(
+    editor.api.create.block({
+      indent: 1,
+      listStyleType: type
+    }),
+    { select: true }
+  );
+};
+
+const insertBlockMap: Record<
+  string,
+  (editor: PlateEditor, type: string) => void
+> = {
+  [KEYS.listTodo]: insertList,
+  [KEYS.ol]: insertList,
+  [KEYS.ul]: insertList,
+  [ACTION_THREE_COLUMNS]: editor => insertColumnGroup(editor, { columns: 3, select: true }),
+  [KEYS.audio]: editor => insertAudioPlaceholder(editor, { select: true }),
+  [KEYS.callout]: editor => insertCallout(editor, { select: true }),
+  [KEYS.codeBlock]: editor => insertCodeBlock(editor, { select: true }),
+  [KEYS.equation]: editor => insertEquation(editor, { select: true }),
+  [KEYS.file]: editor => insertFilePlaceholder(editor, { select: true }),
+  [KEYS.img]: editor => insertImagePlaceholder(editor, { select: true }),
+  [KEYS.table]: editor => insertTable(editor, {}, { select: true }),
+  [KEYS.toc]: editor => insertToc(editor, { select: true }),
+  [KEYS.video]: editor => insertVideoPlaceholder(editor, { select: true })
+};
+
+const insertInlineMap: Record<
+  string,
+  (editor: PlateEditor, type: string) => void
+> = {
+  [KEYS.date]: editor => insertDate(editor, { select: true }),
+  [KEYS.inlineEquation]: editor => insertInlineEquation(editor, '', { select: true })
+};
+
+export const insertBlock = (editor: PlateEditor, type: string) => {
+  editor.tf.withoutNormalizing(() => {
+    const block = editor.api.block();
+
+    if (!block) return;
+    if (type in insertBlockMap) {
+      insertBlockMap[type](editor, type);
+    } else {
+      editor.tf.insertNodes(editor.api.create.block({ type }), {
+        at: PathApi.next(block[1]),
+        select: true
+      });
+    }
+    if (getBlockType(block[0]) !== type) {
+      editor.tf.removeNodes({ previousEmptyBlock: true });
+    }
+  });
+};
+
+export const insertInlineElement = (editor: PlateEditor, type: string) => {
+  if (insertInlineMap[type]) {
+    insertInlineMap[type](editor, type);
+  }
+};
+
+const setList = (
+  editor: PlateEditor,
+  type: string,
+  entry: NodeEntry<TElement>
+) => {
+  editor.tf.setNodes(
+    editor.api.create.block({
+      indent: 1,
+      listStyleType: type
+    }),
+    {
+      at: entry[1]
+    }
+  );
+};
+
+const setBlockMap: Record<
+  string,
+  (editor: PlateEditor, type: string, entry: NodeEntry<TElement>) => void
+> = {
+  [KEYS.listTodo]: setList,
+  [KEYS.ol]: setList,
+  [KEYS.ul]: setList,
+  [ACTION_THREE_COLUMNS]: editor => toggleColumnGroup(editor, { columns: 3 })
+};
+
+export const setBlockType = (
+  editor: PlateEditor,
+  type: string,
+  { at }: { at?: Path } = {}
+) => {
+  editor.tf.withoutNormalizing(() => {
+    const setEntry = (entry: NodeEntry<TElement>) => {
+      const [node, path] = entry;
+
+      if (node[KEYS.listType]) {
+        editor.tf.unsetNodes([KEYS.listType, 'indent'], { at: path });
+      }
+      if (type in setBlockMap) {
+        return setBlockMap[type](editor, type, entry);
+      }
+      if (node.type !== type) {
+        editor.tf.setNodes<TElement>({ type }, { at: path });
+      }
+    };
+
+    if (at) {
+      const entry = editor.api.node<TElement>(at);
+
+      if (entry) {
+        setEntry(entry);
+
+        return;
+      }
+    }
+
+    const entries = editor.api.blocks({ mode: 'lowest' });
+
+    entries.forEach((entry) => {
+      setEntry(entry);
+    });
+  });
+};
+
+export const getBlockType = (block: TElement) => {
+  if (block[KEYS.listType]) {
+    if (block[KEYS.listType] === KEYS.ol) {
+      return KEYS.ol;
+    }
+    if (block[KEYS.listType] === KEYS.listTodo) {
+      return KEYS.listTodo;
+    }
+
+    return KEYS.ul;
+  }
+
+  return block.type;
+};

package/src/internal/plate-editor/editor/use-chat.ts

@@ -0,0 +1,152 @@
+'use client';
+
+import { useEffect } from 'react';
+
+import { type UseChatHelpers, useChat as useBaseChat } from '@ai-sdk/react';
+import { withAIBatch } from '@platejs/ai';
+import {
+  AIChatPlugin,
+  aiCommentToRange,
+  applyTableCellSuggestion
+} from '@platejs/ai/react';
+import { getCommentKey, getTransientCommentKey } from '@platejs/comment';
+import { deserializeMd } from '@platejs/markdown';
+import { DefaultChatTransport, type UIMessage } from 'ai';
+import {
+  KEYS, NodeApi, nanoid, TextApi, type TNode
+} from 'platejs';
+import { useEditorRef } from 'platejs/react';
+
+import { useAuthContext } from './auth-context';
+import { discussionPlugin } from './plugins/discussion-kit';
+
+export type Chat = UseChatHelpers<ChatMessage>;
+
+export type ChatMessage = UIMessage<{}, MessageDataPart>;
+
+export type MessageDataPart = {
+  toolName: ToolName;
+  comment?: TComment;
+  table?: TTableCellUpdate;
+};
+
+export type TComment = {
+  comment: {
+    blockId: string;
+    comment: string;
+    content: string;
+  } | null;
+  status: 'finished' | 'streaming';
+};
+
+export type TTableCellUpdate = {
+  cell: {
+    content: string;
+    id: string;
+  } | null;
+  status: 'finished' | 'streaming';
+};
+
+export type ToolName = 'comment' | 'edit' | 'generate';
+
+export const useChat = () => {
+  const editor = useEditorRef();
+  const { getAccessToken } = useAuthContext();
+  const baseChat = useBaseChat<ChatMessage>({
+    id: 'editor',
+    transport: new DefaultChatTransport({
+      api: '/api/ai/command',
+      headers: async () => {
+        const token = getAccessToken ? await getAccessToken() : null;
+
+        return {
+          'Content-Type': 'application/json',
+          ...(token && { Authorization: `Bearer ${token}` })
+        };
+      }
+    }),
+    onData(data) {
+      if (data.type === 'data-toolName') {
+        editor.setOption(AIChatPlugin, 'toolName', data.data as ToolName);
+      }
+      // Handle table cell updates
+      if (data.type === 'data-table' && data.data) {
+        const tableData = data.data as TTableCellUpdate;
+
+        if (tableData.status === 'streaming' && tableData.cell) {
+          withAIBatch(editor, () => {
+            applyTableCellSuggestion(editor, tableData.cell!);
+          });
+        }
+      }
+      // Handle comment data
+      if (data.type === 'data-comment' && data.data) {
+        const commentData = data.data as TComment;
+
+        if (commentData.status !== 'streaming' || !commentData.comment) return;
+
+        const aiComment = commentData.comment;
+
+        const range = aiCommentToRange(editor, aiComment);
+
+        if (!range) return;
+
+        const discussions
+          = editor.getOption(discussionPlugin, 'discussions') || [];
+
+        // Generate a new discussion ID
+        const discussionId = nanoid();
+
+        // Create a new comment
+        const newComment = {
+          id: nanoid(),
+          contentRich: [{ children: [{ text: aiComment.comment }], type: 'p' }],
+          createdAt: new Date(),
+          discussionId,
+          isEdited: false,
+          userId: editor.getOption(discussionPlugin, 'currentUserId')
+        };
+
+        // Create a new discussion
+        const newDiscussion = {
+          id: discussionId,
+          comments: [newComment],
+          createdAt: new Date(),
+          documentContent: deserializeMd(editor, aiComment.content)
+            .map((node: TNode) => NodeApi.string(node))
+            .join('\n'),
+          isResolved: false,
+          userId: editor.getOption(discussionPlugin, 'currentUserId')
+        };
+
+        // Update discussions
+        const updatedDiscussions = [...discussions, newDiscussion];
+
+        editor.setOption(discussionPlugin, 'discussions', updatedDiscussions);
+
+        // Apply comment marks to the editor
+        editor.tf.withMerging(() => {
+          editor.tf.setNodes(
+            {
+              [getCommentKey(newDiscussion.id)]: true,
+              [getTransientCommentKey()]: true,
+              [KEYS.comment]: true
+            },
+            {
+              at: range,
+              match: TextApi.isText,
+              split: true
+            }
+          );
+        });
+      }
+    }
+  });
+
+  useEffect(() => {
+    editor.setOption(AIChatPlugin, 'chat', baseChat as any);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [baseChat.status, baseChat.messages, baseChat.error]);
+
+  return baseChat;
+};

package/src/internal/plate-editor/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useCopyToClipboard } from './use-copy-to-clipboard';
+export { useIsTouchDevice } from './use-is-touch-device';
+export { useLockScroll } from './use-lock-scroll';

package/src/internal/plate-editor/hooks/use-copy-to-clipboard.ts

@@ -0,0 +1,31 @@
+'use client';
+
+import { useCallback, useState } from 'react';
+
+export function useCopyToClipboard() {
+  const [isCopied, setIsCopied] = useState(false);
+
+  const copyToClipboard = useCallback(
+    async (text: string, _options?: { tooltip?: string }) => {
+      try {
+        await navigator.clipboard.writeText(text);
+        setIsCopied(true);
+        setTimeout(() => setIsCopied(false), 2000);
+      } catch {
+        // Fallback
+        const textarea = document.createElement('textarea');
+
+        textarea.value = text;
+        document.body.appendChild(textarea);
+        textarea.select();
+        document.execCommand('copy');
+        document.body.removeChild(textarea);
+        setIsCopied(true);
+        setTimeout(() => setIsCopied(false), 2000);
+      }
+    },
+    []
+  );
+
+  return { copyToClipboard, isCopied };
+}

package/src/internal/plate-editor/hooks/use-is-touch-device.ts

@@ -0,0 +1,26 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export function useIsTouchDevice() {
+  const [isTouchDevice, setIsTouchDevice] = useState(false);
+
+  useEffect(() => {
+    function onResize() {
+      setIsTouchDevice(
+        'ontouchstart' in window
+        || navigator.maxTouchPoints > 0
+        || navigator.maxTouchPoints > 0
+      );
+    }
+
+    window.addEventListener('resize', onResize);
+    onResize();
+
+    return () => {
+      window.removeEventListener('resize', onResize);
+    };
+  }, []);
+
+  return isTouchDevice;
+}

package/src/internal/plate-editor/hooks/use-lock-scroll.ts

@@ -0,0 +1,21 @@
+'use client';
+
+import { useEffect } from 'react';
+
+export function useLockScroll(lock: boolean, selector?: string) {
+  useEffect(() => {
+    if (!lock) return;
+
+    const target = selector ? document.querySelector(selector) : document.body;
+
+    if (!target) return;
+
+    const prev = (target as HTMLElement).style.overflow;
+
+    (target as HTMLElement).style.overflow = 'hidden';
+
+    return () => {
+      (target as HTMLElement).style.overflow = prev;
+    };
+  }, [lock, selector]);
+}

package/src/internal/plate-editor/hooks/use-media-query.ts

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+
+/** Checks if the current viewport matches the specified media query. */
+export const useMediaQuery = (query: string): boolean => {
+  const getMatches = (query: string): boolean => {
+    // Prevents SSR issues
+    if (typeof window !== 'undefined') {
+      return window.matchMedia(query).matches;
+    }
+
+    return false;
+  };
+
+  const [matches, setMatches] = useState<boolean>(getMatches(query));
+
+  function handleChange() {
+    setMatches(getMatches(query));
+  }
+
+  useEffect(() => {
+    const matchMedia = window.matchMedia(query);
+
+    // Triggered at the first client-side load and if query changes
+    handleChange();
+
+    // Listen matchMedia
+    if (matchMedia.addListener) {
+      matchMedia.addListener(handleChange);
+    } else {
+      matchMedia.addEventListener('change', handleChange);
+    }
+
+    return () => {
+      if (matchMedia.removeListener) {
+        matchMedia.removeListener(handleChange);
+      } else {
+        matchMedia.removeEventListener('change', handleChange);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [query]);
+
+  return matches;
+};

package/src/internal/plate-editor/hooks/use-mounted.ts

@@ -0,0 +1,18 @@
+'use client';
+
+import { useSyncExternalStore } from 'react';
+
+/**
+ * A custom hook that returns a boolean value indicating whether the component
+ * is mounted (client-side) or not. Useful for preventing hydration mismatches
+ * when rendering different content on server vs client.
+ */
+export const useMounted = () => {
+  return useSyncExternalStore(
+    subscribe, // subscribe: no-op, never changes
+    () => true, // getSnapshot (client): always true
+    () => false // getServerSnapshot (SSR): always false
+  );
+};
+
+const subscribe = () => () => {};