@docyrus/ui-pro-ai-assistant 0.0.1

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

@@ -0,0 +1,211 @@
+'use client';
+
+import {
+  type AutoformatRule,
+  AutoformatPlugin,
+  autoformatArrow,
+  autoformatLegal,
+  autoformatLegalHtml,
+  autoformatMath,
+  autoformatPunctuation,
+  autoformatSmartQuotes
+} from '@platejs/autoformat';
+
+import { insertEmptyCodeBlock } from '@platejs/code-block';
+import { toggleList } from '@platejs/list';
+import { openNextToggles } from '@platejs/toggle/react';
+import { KEYS } from 'platejs';
+
+const autoformatMarks: AutoformatRule[] = [
+  {
+    match: '***',
+    mode: 'mark',
+    type: [KEYS.bold, KEYS.italic]
+  },
+  {
+    match: '__*',
+    mode: 'mark',
+    type: [KEYS.underline, KEYS.italic]
+  },
+  {
+    match: '__**',
+    mode: 'mark',
+    type: [KEYS.underline, KEYS.bold]
+  },
+  {
+    match: '___***',
+    mode: 'mark',
+    type: [KEYS.underline, KEYS.bold, KEYS.italic]
+  },
+  {
+    match: '**',
+    mode: 'mark',
+    type: KEYS.bold
+  },
+  {
+    match: '__',
+    mode: 'mark',
+    type: KEYS.underline
+  },
+  {
+    match: '*',
+    mode: 'mark',
+    type: KEYS.italic
+  },
+  {
+    match: '_',
+    mode: 'mark',
+    type: KEYS.italic
+  },
+  {
+    match: '~~',
+    mode: 'mark',
+    type: KEYS.strikethrough
+  },
+  {
+    match: '^',
+    mode: 'mark',
+    type: KEYS.sup
+  },
+  {
+    match: '~',
+    mode: 'mark',
+    type: KEYS.sub
+  },
+  {
+    match: '`',
+    mode: 'mark',
+    type: KEYS.code
+  }
+];
+
+const autoformatBlocks: AutoformatRule[] = [
+  {
+    match: '# ',
+    mode: 'block',
+    type: KEYS.h1
+  },
+  {
+    match: '## ',
+    mode: 'block',
+    type: KEYS.h2
+  },
+  {
+    match: '### ',
+    mode: 'block',
+    type: KEYS.h3
+  },
+  {
+    match: '> ',
+    mode: 'block',
+    type: KEYS.blockquote
+  },
+  {
+    match: '```',
+    mode: 'block',
+    type: KEYS.codeBlock,
+    format: (editor) => {
+      insertEmptyCodeBlock(editor, {
+        defaultType: KEYS.p,
+        insertNodesOptions: { select: true }
+      });
+    }
+  },
+  {
+    match: '+ ',
+    mode: 'block',
+    preFormat: openNextToggles,
+    type: KEYS.toggle
+  },
+  {
+    match: ['---', '\u2014-', '___ '],
+    mode: 'block',
+    type: KEYS.hr,
+    format: (editor) => {
+      editor.tf.setNodes({ type: KEYS.hr });
+      editor.tf.insertNodes({
+        children: [{ text: '' }],
+        type: KEYS.p
+      });
+    }
+  }
+];
+
+const autoformatLists: AutoformatRule[] = [
+  {
+    match: ['* ', '- '],
+    mode: 'block',
+    type: 'list',
+    format: (editor) => {
+      toggleList(editor, {
+        listStyleType: KEYS.ul
+      });
+    }
+  },
+  {
+    match: [String.raw`^\d+\.$ `, String.raw`^\d+\)$ `],
+    matchByRegex: true,
+    mode: 'block',
+    type: 'list',
+    format: (editor, { matchString }) => {
+      toggleList(editor, {
+        listRestartPolite: Number(matchString) || 1,
+        listStyleType: KEYS.ol
+      });
+    }
+  },
+  {
+    match: ['[] '],
+    mode: 'block',
+    type: 'list',
+    format: (editor) => {
+      toggleList(editor, {
+        listStyleType: KEYS.listTodo
+      });
+      editor.tf.setNodes({
+        checked: false,
+        listStyleType: KEYS.listTodo
+      });
+    }
+  },
+  {
+    match: ['[x] '],
+    mode: 'block',
+    type: 'list',
+    format: (editor) => {
+      toggleList(editor, {
+        listStyleType: KEYS.listTodo
+      });
+      editor.tf.setNodes({
+        checked: true,
+        listStyleType: KEYS.listTodo
+      });
+    }
+  }
+];
+
+export const AutoformatKit = [
+  AutoformatPlugin.configure({
+    options: {
+      enableUndoOnDelete: true,
+      rules: [
+        ...autoformatBlocks,
+        ...autoformatMarks,
+        ...autoformatSmartQuotes,
+        ...autoformatPunctuation,
+        ...autoformatLegal,
+        ...autoformatLegalHtml,
+        ...autoformatArrow,
+        ...autoformatMath,
+        ...autoformatLists
+      ].map(
+        (rule): AutoformatRule => ({
+          ...rule,
+          query: editor => !editor.api.some({
+            match: { type: editor.getType(KEYS.codeBlock) }
+          })
+        })
+      )
+    }
+  })
+];

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

@@ -0,0 +1,26 @@
+import {
+  BaseBlockquotePlugin,
+  BaseH1Plugin,
+  BaseH2Plugin,
+  BaseH3Plugin,
+  BaseHorizontalRulePlugin
+} from '@platejs/basic-nodes';
+import { BaseParagraphPlugin } from 'platejs';
+
+import { BlockquoteElementStatic } from '../../plate-ui/blockquote-node-static';
+import {
+  H1ElementStatic,
+  H2ElementStatic,
+  H3ElementStatic
+} from '../../plate-ui/heading-node-static';
+import { HrElementStatic } from '../../plate-ui/hr-node-static';
+import { ParagraphElementStatic } from '../../plate-ui/paragraph-node-static';
+
+export const BaseBasicBlocksKit = [
+  BaseParagraphPlugin.withComponent(ParagraphElementStatic),
+  BaseH1Plugin.withComponent(H1ElementStatic),
+  BaseH2Plugin.withComponent(H2ElementStatic),
+  BaseH3Plugin.withComponent(H3ElementStatic),
+  BaseBlockquotePlugin.withComponent(BlockquoteElementStatic),
+  BaseHorizontalRulePlugin.withComponent(HrElementStatic)
+];

package/src/internal/plate-editor/editor/plugins/basic-blocks-kit.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import {
+  BlockquotePlugin,
+  H1Plugin,
+  H2Plugin,
+  H3Plugin,
+  HorizontalRulePlugin
+} from '@platejs/basic-nodes/react';
+import { ParagraphPlugin } from 'platejs/react';
+
+import { BlockquoteElement } from '../../plate-ui/blockquote-node';
+import { H1Element, H2Element, H3Element } from '../../plate-ui/heading-node';
+import { HrElement } from '../../plate-ui/hr-node';
+import { ParagraphElement } from '../../plate-ui/paragraph-node';
+
+export const BasicBlocksKit = [
+  ParagraphPlugin.withComponent(ParagraphElement),
+  H1Plugin.configure({
+    node: {
+      component: H1Element
+    },
+    rules: {
+      break: { empty: 'reset' }
+    },
+    shortcuts: { toggle: { keys: 'mod+alt+1' } }
+  }),
+  H2Plugin.configure({
+    node: {
+      component: H2Element
+    },
+    rules: {
+      break: { empty: 'reset' }
+    },
+    shortcuts: { toggle: { keys: 'mod+alt+2' } }
+  }),
+  H3Plugin.configure({
+    node: {
+      component: H3Element
+    },
+    rules: {
+      break: { empty: 'reset' }
+    },
+    shortcuts: { toggle: { keys: 'mod+alt+3' } }
+  }),
+  BlockquotePlugin.configure({
+    node: { component: BlockquoteElement },
+    shortcuts: { toggle: { keys: 'mod+shift+period' } }
+  }),
+  HorizontalRulePlugin.withComponent(HrElement)
+];

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

@@ -0,0 +1,24 @@
+import {
+  BaseBoldPlugin,
+  BaseCodePlugin,
+  BaseHighlightPlugin,
+  BaseItalicPlugin,
+  BaseStrikethroughPlugin,
+  BaseSubscriptPlugin,
+  BaseSuperscriptPlugin,
+  BaseUnderlinePlugin
+} from '@platejs/basic-nodes';
+
+import { CodeLeafStatic } from '../../plate-ui/code-node-static';
+import { HighlightLeafStatic } from '../../plate-ui/highlight-node-static';
+
+export const BaseBasicMarksKit = [
+  BaseBoldPlugin,
+  BaseItalicPlugin,
+  BaseUnderlinePlugin,
+  BaseCodePlugin.withComponent(CodeLeafStatic),
+  BaseStrikethroughPlugin,
+  BaseSubscriptPlugin,
+  BaseSuperscriptPlugin,
+  BaseHighlightPlugin.withComponent(HighlightLeafStatic)
+];

package/src/internal/plate-editor/editor/plugins/basic-marks-kit.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import {
+  BoldPlugin,
+  CodePlugin,
+  HighlightPlugin,
+  ItalicPlugin,
+  StrikethroughPlugin,
+  SubscriptPlugin,
+  SuperscriptPlugin,
+  UnderlinePlugin
+} from '@platejs/basic-nodes/react';
+
+import { CodeLeaf } from '../../plate-ui/code-node';
+import { HighlightLeaf } from '../../plate-ui/highlight-node';
+
+export const BasicMarksKit = [
+  BoldPlugin,
+  ItalicPlugin,
+  UnderlinePlugin,
+  CodePlugin.configure({
+    node: { component: CodeLeaf },
+    shortcuts: { toggle: { keys: 'mod+e' } }
+  }),
+  StrikethroughPlugin.configure({
+    shortcuts: { toggle: { keys: 'mod+shift+x' } }
+  }),
+  SubscriptPlugin.configure({
+    shortcuts: { toggle: { keys: 'mod+comma' } }
+  }),
+  SuperscriptPlugin.configure({
+    shortcuts: { toggle: { keys: 'mod+period' } }
+  }),
+  HighlightPlugin.configure({
+    node: { component: HighlightLeaf },
+    shortcuts: { toggle: { keys: 'mod+shift+h' } }
+  })
+];

package/src/internal/plate-editor/editor/plugins/basic-nodes-kit.tsx

@@ -0,0 +1,6 @@
+'use client';
+
+import { BasicBlocksKit } from './basic-blocks-kit';
+import { BasicMarksKit } from './basic-marks-kit';
+
+export const BasicNodesKit = [...BasicBlocksKit, ...BasicMarksKit];

package/src/internal/plate-editor/editor/plugins/block-menu-kit.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import { BlockMenuPlugin } from '@platejs/selection/react';
+
+import { BlockSelectionKit } from './block-selection-kit';
+
+import { BlockContextMenu } from '../../plate-ui/block-context-menu';
+
+export const BlockMenuKit = [
+  ...BlockSelectionKit,
+  BlockMenuPlugin.configure({
+    render: { aboveSlate: BlockContextMenu }
+  })
+];

package/src/internal/plate-editor/editor/plugins/block-placeholder-kit.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { KEYS } from 'platejs';
+import { BlockPlaceholderPlugin } from 'platejs/react';
+
+export const BlockPlaceholderKit = [
+  BlockPlaceholderPlugin.configure({
+    options: {
+      className:
+        'before:absolute before:cursor-text before:text-muted-foreground/80 before:content-[attr(placeholder)]',
+      placeholders: {
+        [KEYS.p]: 'Type a paragraph'
+      },
+      query: ({ path }: { path: number[] }) => path.length === 1
+    }
+  })
+];

package/src/internal/plate-editor/editor/plugins/block-selection-kit.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { AIChatPlugin } from '@platejs/ai/react';
+import { BlockSelectionPlugin } from '@platejs/selection/react';
+import { getPluginTypes, isHotkey, KEYS } from 'platejs';
+
+import { BlockSelection } from '../../plate-ui/block-selection';
+
+export const BlockSelectionKit = [
+  BlockSelectionPlugin.configure(({ editor }) => ({
+    options: {
+      enableContextMenu: true,
+      isSelectable: element => !getPluginTypes(editor, [KEYS.column, KEYS.codeLine, KEYS.td]).includes(
+        element.type
+      ),
+      onKeyDownSelecting: (_editor, e) => {
+        if (isHotkey('mod+j')(e)) {
+          editor.getApi(AIChatPlugin).aiChat.show();
+        }
+      }
+    },
+    render: {
+      belowRootNodes: (props) => {
+        if (!props.attributes.className?.includes('slate-selectable'))
+          return null;
+
+        return <BlockSelection {...(props as any)} />;
+      }
+    }
+  }))
+];

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

@@ -0,0 +1,5 @@
+import { BaseCalloutPlugin } from '@platejs/callout';
+
+import { CalloutElementStatic } from '../../plate-ui/callout-node-static';
+
+export const BaseCalloutKit = [BaseCalloutPlugin.withComponent(CalloutElementStatic)];

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

@@ -0,0 +1,7 @@
+'use client';
+
+import { CalloutPlugin } from '@platejs/callout/react';
+
+import { CalloutElement } from '../../plate-ui/callout-node';
+
+export const CalloutKit = [CalloutPlugin.withComponent(CalloutElement)];

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

@@ -0,0 +1,23 @@
+import {
+  BaseCodeBlockPlugin,
+  BaseCodeLinePlugin,
+  BaseCodeSyntaxPlugin
+} from '@platejs/code-block';
+import { all, createLowlight } from 'lowlight';
+
+import {
+  CodeBlockElementStatic,
+  CodeLineElementStatic,
+  CodeSyntaxLeafStatic
+} from '../../plate-ui/code-block-node-static';
+
+const lowlight = createLowlight(all);
+
+export const BaseCodeBlockKit = [
+  BaseCodeBlockPlugin.configure({
+    node: { component: CodeBlockElementStatic },
+    options: { lowlight }
+  }),
+  BaseCodeLinePlugin.withComponent(CodeLineElementStatic),
+  BaseCodeSyntaxPlugin.withComponent(CodeSyntaxLeafStatic)
+];

package/src/internal/plate-editor/editor/plugins/code-block-kit.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import {
+  CodeBlockPlugin,
+  CodeLinePlugin,
+  CodeSyntaxPlugin
+} from '@platejs/code-block/react';
+import { all, createLowlight } from 'lowlight';
+
+import {
+  CodeBlockElement,
+  CodeLineElement,
+  CodeSyntaxLeaf
+} from '../../plate-ui/code-block-node';
+
+const lowlight = createLowlight(all);
+
+export const CodeBlockKit = [
+  CodeBlockPlugin.configure({
+    node: { component: CodeBlockElement },
+    options: { lowlight },
+    shortcuts: { toggle: { keys: 'mod+alt+8' } }
+  }),
+  CodeLinePlugin.withComponent(CodeLineElement),
+  CodeSyntaxPlugin.withComponent(CodeSyntaxLeaf)
+];

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

@@ -0,0 +1,8 @@
+import { BaseColumnItemPlugin, BaseColumnPlugin } from '@platejs/layout';
+
+import {
+  ColumnElementStatic,
+  ColumnGroupElementStatic
+} from '../../plate-ui/column-node-static';
+
+export const BaseColumnKit = [BaseColumnPlugin.withComponent(ColumnGroupElementStatic), BaseColumnItemPlugin.withComponent(ColumnElementStatic)];

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

@@ -0,0 +1,7 @@
+'use client';
+
+import { ColumnItemPlugin, ColumnPlugin } from '@platejs/layout/react';
+
+import { ColumnElement, ColumnGroupElement } from '../../plate-ui/column-node';
+
+export const ColumnKit = [ColumnPlugin.withComponent(ColumnGroupElement), ColumnItemPlugin.withComponent(ColumnElement)];

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

@@ -0,0 +1,5 @@
+import { BaseCommentPlugin } from '@platejs/comment';
+
+import { CommentLeafStatic } from '../../plate-ui/comment-node-static';
+
+export const BaseCommentKit = [BaseCommentPlugin.withComponent(CommentLeafStatic)];

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

@@ -0,0 +1,174 @@
+'use client';
+
+import { useEffect } from 'react';
+
+import {
+  type BaseCommentConfig,
+  BaseCommentPlugin,
+  getDraftCommentKey
+} from '@platejs/comment';
+import {
+  type ExtendConfig, type Path, isSlateElement, isSlateString
+} from 'platejs';
+import { toTPlatePlugin, useEditorContainerRef } from 'platejs/react';
+
+import { CommentLeaf } from '../../plate-ui/comment-node';
+// import { FloatingDiscussion } from '../../plate-ui/floating-discussion';
+
+type CommentConfig = ExtendConfig<
+  BaseCommentConfig,
+  {
+    activeId: string | null;
+    commentingBlock: Path | null;
+    hoverId: string | null;
+    isOverlapWithEditor: boolean;
+    uniquePathMap: Map<string, Path>;
+    updateTimestamp: number | null;
+  }
+>;
+
+export const commentPlugin = toTPlatePlugin<CommentConfig>(BaseCommentPlugin, {
+  handlers: {
+    onClick: ({
+      api, event, setOption, type
+    }) => {
+      let leaf = event.target as HTMLElement;
+      let isSet = false;
+
+      const unsetActiveSuggestion = () => {
+        setOption('activeId', null);
+        isSet = true;
+      };
+
+      if (!isSlateString(leaf)) unsetActiveSuggestion();
+
+      while (leaf.parentElement && !isSlateElement(leaf.parentElement)) {
+        if (leaf.classList.contains(`slate-${type}`)) {
+          const commentsEntry = api.comment!.node();
+
+          if (!commentsEntry) {
+            unsetActiveSuggestion();
+
+            break;
+          }
+
+          const id = api.comment!.nodeId(commentsEntry[0]) ?? null;
+          const isDraft = commentsEntry[0][getDraftCommentKey()];
+
+          setOption('activeId', isDraft ? getDraftCommentKey() : id);
+          isSet = true;
+
+          break;
+        }
+
+        leaf = leaf.parentElement;
+      }
+
+      if (!isSet) unsetActiveSuggestion();
+    }
+  },
+  options: {
+    activeId: null,
+    commentingBlock: null,
+    hoverId: null,
+    isOverlapWithEditor: false,
+    uniquePathMap: new Map(),
+    updateTimestamp: null
+  },
+  useHooks: ({ editor, setOption }) => {
+    const editorContainerRef = useEditorContainerRef();
+
+    useEffect(() => {
+      if (!editorContainerRef.current) return;
+
+      const editable = editor.api.toDOMNode(editor);
+
+      if (!editable) return;
+
+      const observer = new ResizeObserver((entries) => {
+        const { width } = entries[0].contentRect;
+        const isOverlap = width < 700;
+
+        setOption('isOverlapWithEditor', isOverlap);
+      });
+
+      observer.observe(editable);
+
+      return () => {
+        observer.disconnect();
+      };
+    }, [editor, editorContainerRef, setOption]);
+  }
+})
+  .extendTransforms(
+    ({
+      editor,
+      setOption,
+      tf: {
+        comment: { setDraft }
+      }
+    }) => ({
+      setDraft: () => {
+        if (editor.api.isCollapsed()) {
+          editor.tf.select(editor.api.block()![1]);
+        }
+
+        setDraft();
+
+        editor.tf.collapse();
+        setOption('activeId', getDraftCommentKey());
+        setOption('commentingBlock', editor.selection!.focus.path.slice(0, 1));
+      }
+    })
+  )
+  .overrideEditor(
+    ({
+      editor, setOption, tf: { apply, insertBreak }, tf, type
+    }) => ({
+      transforms: {
+        apply(operation) {
+          if (
+            operation.type !== 'set_selection'
+            && operation.type !== 'set_node'
+            && operation.type !== 'split_node'
+            && operation.type !== 'merge_node'
+          ) {
+            const { newProperties, properties } = operation;
+
+            if (
+              (properties as any)?.[getDraftCommentKey()]
+              || (newProperties as any)?.[getDraftCommentKey()]
+            ) {
+              return;
+            }
+
+            setOption('updateTimestamp', Date.now());
+          }
+
+          apply(operation);
+        },
+        insertBreak() {
+          setOption('updateTimestamp', Date.now());
+
+          tf.comment.removeMark();
+          insertBreak();
+          editor.tf.unsetNodes([type], {
+            at: editor.selection?.focus,
+            mode: 'lowest'
+          });
+        }
+      }
+    })
+  )
+  .extend({
+    shortcuts: {
+      setDraft: { keys: 'mod+shift+m' }
+    }
+  })
+  .configure({
+    render: {
+      node: CommentLeaf
+    }
+  });
+
+export const CommentKit = [commentPlugin];