doclific 0.1.0

package/frontend/src/components/editor/plugins/comment-kit.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import type { ExtendConfig, Path } from 'platejs';
+
+import {
+  type BaseCommentConfig,
+  BaseCommentPlugin,
+  getDraftCommentKey,
+} from '@platejs/comment';
+import { isSlateString } from 'platejs';
+import { toTPlatePlugin } from 'platejs/react';
+
+import { CommentLeaf } from '@/components/ui/comment-node';
+
+type CommentConfig = ExtendConfig<
+  BaseCommentConfig,
+  {
+    activeId: string | null;
+    commentingBlock: Path | null;
+    hoverId: string | null;
+    uniquePathMap: Map<string, Path>;
+  }
+>;
+
+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) {
+        if (leaf.classList.contains(`slate-${type}`)) {
+          const commentsEntry = api.comment!.node();
+
+          if (!commentsEntry) {
+            unsetActiveSuggestion();
+
+            break;
+          }
+
+          const id = api.comment!.nodeId(commentsEntry[0]);
+
+          setOption('activeId', id ?? null);
+          isSet = true;
+
+          break;
+        }
+
+        leaf = leaf.parentElement;
+      }
+
+      if (!isSet) unsetActiveSuggestion();
+    },
+  },
+  options: {
+    activeId: null,
+    commentingBlock: null,
+    hoverId: null,
+    uniquePathMap: new Map(),
+  },
+})
+  .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));
+      },
+    })
+  )
+  .configure({
+    node: { component: CommentLeaf },
+    shortcuts: {
+      setDraft: { keys: 'mod+shift+m' },
+    },
+  });
+
+export const CommentKit = [commentPlugin];

package/frontend/src/components/editor/plugins/cursor-overlay-kit.tsx

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

package/frontend/src/components/editor/plugins/date-base-kit.tsx

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

package/frontend/src/components/editor/plugins/date-kit.tsx

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

package/frontend/src/components/editor/plugins/discussion-kit.tsx

@@ -0,0 +1,148 @@
+'use client';
+
+import type { TComment } from '@/components/ui/comment';
+
+import { createPlatePlugin } from 'platejs/react';
+
+import { BlockDiscussion } from '@/components/ui/block-discussion';
+
+export type TDiscussion = {
+  id: string;
+  comments: TComment[];
+  createdAt: Date;
+  isResolved: boolean;
+  userId: string;
+  documentContent?: string;
+};
+
+const discussionsData: TDiscussion[] = [
+  {
+    id: 'discussion1',
+    comments: [
+      {
+        id: 'comment1',
+        contentRich: [
+          {
+            children: [
+              {
+                text: 'Comments are a great way to provide feedback and discuss changes.',
+              },
+            ],
+            type: 'p',
+          },
+        ],
+        createdAt: new Date(Date.now() - 600_000),
+        discussionId: 'discussion1',
+        isEdited: false,
+        userId: 'charlie',
+      },
+      {
+        id: 'comment2',
+        contentRich: [
+          {
+            children: [
+              {
+                text: 'Agreed! The link to the docs makes it easy to learn more.',
+              },
+            ],
+            type: 'p',
+          },
+        ],
+        createdAt: new Date(Date.now() - 500_000),
+        discussionId: 'discussion1',
+        isEdited: false,
+        userId: 'bob',
+      },
+    ],
+    createdAt: new Date(),
+    documentContent: 'comments',
+    isResolved: false,
+    userId: 'charlie',
+  },
+  {
+    id: 'discussion2',
+    comments: [
+      {
+        id: 'comment1',
+        contentRich: [
+          {
+            children: [
+              {
+                text: 'Nice demonstration of overlapping annotations with both comments and suggestions!',
+              },
+            ],
+            type: 'p',
+          },
+        ],
+        createdAt: new Date(Date.now() - 300_000),
+        discussionId: 'discussion2',
+        isEdited: false,
+        userId: 'bob',
+      },
+      {
+        id: 'comment2',
+        contentRich: [
+          {
+            children: [
+              {
+                text: 'This helps users understand how powerful the editor can be.',
+              },
+            ],
+            type: 'p',
+          },
+        ],
+        createdAt: new Date(Date.now() - 200_000),
+        discussionId: 'discussion2',
+        isEdited: false,
+        userId: 'charlie',
+      },
+    ],
+    createdAt: new Date(),
+    documentContent: 'overlapping',
+    isResolved: false,
+    userId: 'bob',
+  },
+];
+
+const avatarUrl = (seed: string) =>
+  `https://api.dicebear.com/9.x/glass/svg?seed=${seed}`;
+
+const usersData: Record<
+  string,
+  { id: string; avatarUrl: string; name: string; hue?: number }
+> = {
+  alice: {
+    id: 'alice',
+    avatarUrl: avatarUrl('alice6'),
+    name: 'Alice',
+  },
+  bob: {
+    id: 'bob',
+    avatarUrl: avatarUrl('bob4'),
+    name: 'Bob',
+  },
+  charlie: {
+    id: 'charlie',
+    avatarUrl: avatarUrl('charlie2'),
+    name: 'Charlie',
+  },
+};
+
+// This plugin is purely UI. It's only used to store the discussions and users data
+export const discussionPlugin = createPlatePlugin({
+  key: 'discussion',
+  options: {
+    currentUserId: 'alice',
+    discussions: discussionsData,
+    users: usersData,
+  },
+})
+  .configure({
+    render: { aboveNodes: BlockDiscussion },
+  })
+  .extendSelectors(({ getOption }) => ({
+    currentUser: () => getOption('users')[getOption('currentUserId')],
+    user: (id: string) => getOption('users')[id],
+  }));
+
+export const DiscussionKit = [discussionPlugin];

package/frontend/src/components/editor/plugins/dnd-kit.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+
+import { DndPlugin } from '@platejs/dnd';
+import { PlaceholderPlugin } from '@platejs/media/react';
+
+import { BlockDraggable } from '@/components/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/frontend/src/components/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/frontend/src/components/editor/plugins/emoji-kit.tsx

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

package/frontend/src/components/editor/plugins/excalidraw-kit.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { ExcalidrawPlugin } from '@platejs/excalidraw/react';
+
+import { ExcalidrawElement } from '@/components/ui/excalidraw-node';
+
+export const ExcalidrawKit = [
+  ExcalidrawPlugin.withComponent(ExcalidrawElement),
+];

package/frontend/src/components/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/frontend/src/components/editor/plugins/floating-toolbar-kit.tsx

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

package/frontend/src/components/editor/plugins/font-base-kit.tsx

@@ -0,0 +1,20 @@
+import type { SlatePluginConfig } from 'platejs';
+
+import {
+  BaseFontBackgroundColorPlugin,
+  BaseFontColorPlugin,
+  BaseFontFamilyPlugin,
+  BaseFontSizePlugin,
+} from '@platejs/basic-styles';
+import { KEYS } from 'platejs';
+
+const options = {
+  inject: { targetPlugins: [KEYS.p] },
+} satisfies SlatePluginConfig;
+
+export const BaseFontKit = [
+  BaseFontColorPlugin.configure(options),
+  BaseFontBackgroundColorPlugin.configure(options),
+  BaseFontSizePlugin.configure(options),
+  BaseFontFamilyPlugin.configure(options),
+];

package/frontend/src/components/editor/plugins/font-kit.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import type { PlatePluginConfig } from 'platejs/react';
+
+import {
+  FontBackgroundColorPlugin,
+  FontColorPlugin,
+  FontFamilyPlugin,
+  FontSizePlugin,
+} 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),
+];

package/frontend/src/components/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/frontend/src/components/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/frontend/src/components/editor/plugins/line-height-base-kit.tsx

@@ -0,0 +1,14 @@
+import { BaseLineHeightPlugin } from '@platejs/basic-styles';
+import { KEYS } from 'platejs';
+
+export const BaseLineHeightKit = [
+  BaseLineHeightPlugin.configure({
+    inject: {
+      nodeProps: {
+        defaultNodeValue: 1.5,
+        validNodeValues: [1, 1.2, 1.5, 2, 3],
+      },
+      targetPlugins: [...KEYS.heading, KEYS.p],
+    },
+  }),
+];

package/frontend/src/components/editor/plugins/line-height-kit.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { LineHeightPlugin } from '@platejs/basic-styles/react';
+import { KEYS } from 'platejs';
+
+export const LineHeightKit = [
+  LineHeightPlugin.configure({
+    inject: {
+      nodeProps: {
+        defaultNodeValue: 1.5,
+        validNodeValues: [1, 1.2, 1.5, 2, 3],
+      },
+      targetPlugins: [...KEYS.heading, KEYS.p],
+    },
+  }),
+];

package/frontend/src/components/editor/plugins/link-base-kit.tsx

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

package/frontend/src/components/editor/plugins/link-kit.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { LinkPlugin } from '@platejs/link/react';
+
+import { LinkElement } from '@/components/ui/link-node';
+import { LinkFloatingToolbar } from '@/components/ui/link-toolbar';
+
+export const LinkKit = [
+  LinkPlugin.configure({
+    render: {
+      node: LinkElement,
+      afterEditable: () => <LinkFloatingToolbar />,
+    },
+  }),
+];

package/frontend/src/components/editor/plugins/list-base-kit.tsx

@@ -0,0 +1,23 @@
+import { BaseListPlugin } from '@platejs/list';
+import { KEYS } from 'platejs';
+
+import { BaseIndentKit } from '@/components/editor/plugins/indent-base-kit';
+import { BlockListStatic } from '@/components/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/frontend/src/components/editor/plugins/list-kit.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { ListPlugin } from '@platejs/list/react';
+import { KEYS } from 'platejs';
+
+import { IndentKit } from '@/components/editor/plugins/indent-kit';
+import { BlockList } from '@/components/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/frontend/src/components/editor/plugins/markdown-kit.tsx

@@ -0,0 +1,46 @@
+import { MarkdownPlugin, remarkMdx, remarkMention } from '@platejs/markdown';
+import { KEYS } from 'platejs';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import { CodebaseSnippetType } from './codebase-kit';
+
+export const MarkdownKit = [
+  MarkdownPlugin.configure({
+    options: {
+      plainMarks: [KEYS.suggestion, KEYS.comment],
+      remarkPlugins: [remarkMath, remarkGfm, remarkMdx, remarkMention],
+      rules: {
+        [CodebaseSnippetType]: {
+          serialize: (slateNode) => {
+            return {
+              type: 'mdxJsxFlowElement',
+              name: 'CodebaseSnippet', // MDX tag name
+              attributes: [
+                { type: 'mdxJsxAttribute', name: 'filePath', value: slateNode.filePath || '' },
+                { type: 'mdxJsxAttribute', name: 'lineStart', value: slateNode.lineStart || '' },
+                { type: 'mdxJsxAttribute', name: 'lineEnd', value: slateNode.lineEnd || '' },
+              ],
+              children: [{ type: 'text', value: '' }],
+            };
+          },
+          deserialize: (mdastNode) => {
+            // Extract attributes from the mdast node
+            const getAttr = (name: string) => {
+              const attr = mdastNode.attributes?.find((a: { name: string }) => a.name === name);
+              return attr?.value || '';
+            };
+
+            // Return a Slate node structure
+            return {
+              type: CodebaseSnippetType,
+              filePath: getAttr('filePath'),
+              lineStart: getAttr('lineStart'),
+              lineEnd: getAttr('lineEnd'),
+              children: [{ text: '' }], // Required for void elements
+            };
+          }
+        },
+      },
+    }
+  })
+];

package/frontend/src/components/editor/plugins/math-base-kit.tsx

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

package/frontend/src/components/editor/plugins/math-kit.tsx

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

package/frontend/src/components/editor/plugins/media-base-kit.tsx

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