doclific 0.1.0

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

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

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

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

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

@@ -0,0 +1,15 @@
+'use client';
+
+import { MentionInputPlugin, MentionPlugin } from '@platejs/mention/react';
+
+import {
+  MentionElement,
+  MentionInputElement,
+} from '@/components/ui/mention-node';
+
+export const MentionKit = [
+  MentionPlugin.configure({
+    options: { triggerPreviousCharPattern: /^$|^[\s"']$/ },
+  }).withComponent(MentionElement),
+  MentionInputPlugin.withComponent(MentionInputElement),
+];

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

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

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

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

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

@@ -0,0 +1,90 @@
+'use client';
+
+import type { ExtendConfig, Path } from 'platejs';
+
+import {
+  type BaseSuggestionConfig,
+  BaseSuggestionPlugin,
+} from '@platejs/suggestion';
+import { isSlateEditor, isSlateString } from 'platejs';
+import { toTPlatePlugin } from 'platejs/react';
+
+import {
+  SuggestionLeaf,
+  SuggestionLineBreak,
+} from '@/components/ui/suggestion-node';
+
+import { discussionPlugin } from './discussion-kit';
+
+export type SuggestionConfig = ExtendConfig<
+  BaseSuggestionConfig,
+  {
+    activeId: string | null;
+    hoverId: string | null;
+    uniquePathMap: Map<string, Path>;
+  }
+>;
+
+export const suggestionPlugin = toTPlatePlugin<SuggestionConfig>(
+  BaseSuggestionPlugin,
+  ({ editor }) => ({
+    options: {
+      activeId: null,
+      currentUserId: editor.getOption(discussionPlugin, 'currentUserId'),
+      hoverId: null,
+      uniquePathMap: new Map(),
+    },
+  })
+).configure({
+  handlers: {
+    // unset active suggestion when clicking outside of suggestion
+    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();
+    },
+  },
+  render: {
+    belowNodes: SuggestionLineBreak as any,
+    node: SuggestionLeaf,
+  },
+});
+
+export const SuggestionKit = [suggestionPlugin];

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

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

package/frontend/src/components/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 '@/components/ui/table-node';
+
+export const TableKit = [
+  TablePlugin.withComponent(TableElement),
+  TableRowPlugin.withComponent(TableRowElement),
+  TableCellPlugin.withComponent(TableCellElement),
+  TableCellHeaderPlugin.withComponent(TableCellHeaderElement),
+];

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

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

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

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

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

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

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

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

package/frontend/src/components/editor/transforms.ts

@@ -0,0 +1,194 @@
+'use client';
+
+import type { PlateEditor } from 'platejs/react';
+
+import { insertCallout } from '@platejs/callout';
+import { insertCodeBlock, toggleCodeBlock } from '@platejs/code-block';
+import { insertDate } from '@platejs/date';
+import { insertExcalidraw } from '@platejs/excalidraw';
+import { insertColumnGroup, toggleColumnGroup } from '@platejs/layout';
+import { triggerFloatingLink } from '@platejs/link/react';
+import { insertEquation, insertInlineEquation } from '@platejs/math';
+import {
+	insertAudioPlaceholder,
+	insertFilePlaceholder,
+	insertMedia,
+	insertVideoPlaceholder,
+} from '@platejs/media';
+import { SuggestionPlugin } from '@platejs/suggestion/react';
+import { TablePlugin } from '@platejs/table/react';
+import { insertToc } from '@platejs/toc';
+import { type NodeEntry, type Path, type TElement, KEYS, PathApi } from 'platejs';
+import { CodebaseSnippetType } from './plugins/codebase-kit';
+
+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.excalidraw]: (editor) => insertExcalidraw(editor, {}, { select: true }),
+	[KEYS.file]: (editor) => insertFilePlaceholder(editor, { select: true }),
+	[KEYS.img]: (editor) =>
+		insertMedia(editor, {
+			select: true,
+			type: KEYS.img,
+		}),
+	[KEYS.mediaEmbed]: (editor) =>
+		insertMedia(editor, {
+			select: true,
+			type: KEYS.mediaEmbed,
+		}),
+	[KEYS.table]: (editor) => editor.getTransforms(TablePlugin).insert.table({}, { 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 }),
+	[KEYS.link]: (editor) => triggerFloatingLink(editor, { focused: true }),
+};
+
+type InsertBlockOptions = {
+	upsert?: boolean;
+};
+
+export const insertBlock = (
+	editor: PlateEditor,
+	type: string,
+	options: InsertBlockOptions = {}
+) => {
+	const { upsert = false } = options;
+
+	editor.tf.withoutNormalizing(() => {
+		const block = editor.api.block();
+
+		if (!block) return;
+
+		const [currentNode, path] = block;
+		const isCurrentBlockEmpty = editor.api.isEmpty(currentNode);
+		const currentBlockType = getBlockType(currentNode);
+
+		const isSameBlockType = type === currentBlockType;
+
+		if (upsert && isCurrentBlockEmpty && isSameBlockType) {
+			return;
+		}
+
+		if (type in insertBlockMap) {
+			insertBlockMap[type](editor, type);
+		} else if (type === CodebaseSnippetType) {
+			editor.tf.insertNodes({
+				type: CodebaseSnippetType,
+				filePath: '',
+				lineStart: '',
+				lineEnd: '',
+				children: [{ text: '' }],
+			});
+		} else {
+			editor.tf.insertNodes(editor.api.create.block({ type }), {
+				at: PathApi.next(path),
+				select: true,
+			});
+		}
+
+		if (!isSameBlockType) {
+			editor.getApi(SuggestionPlugin).suggestion.withoutSuggestions(() => {
+				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 }),
+	[KEYS.codeBlock]: (editor) => toggleCodeBlock(editor),
+};
+
+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({ 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/frontend/src/components/markdown-to-slate-demo.tsx

@@ -0,0 +1,50 @@
+import { MarkdownPlugin, remarkMdx, remarkMention } from '@platejs/markdown';
+import { Plate, usePlateEditor } from 'platejs/react';
+import remarkEmoji from 'remark-emoji';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import { useEffect, useRef } from 'react';
+
+import { EditorKit } from '@/components/editor/editor-kit';
+import { Editor, EditorContainer } from '@/components/ui/editor';
+
+export default function MarkdownDemo(
+  { initialMarkdown, onUpdate }: { initialMarkdown: string, onUpdate: (content: string) => void }
+) {
+  const previousMarkdown = useRef<string>('');
+  const editor = usePlateEditor(
+    {
+      plugins: EditorKit,
+      value: (editor) => editor.getApi(MarkdownPlugin).markdown.deserialize(initialMarkdown, {
+        remarkPlugins: [
+          remarkMath,
+          remarkGfm,
+          remarkMdx,
+          remarkMention,
+          remarkEmoji as any,
+        ],
+      })
+    },
+    []
+  );
+
+  // useEffect that runs every 250ms and logs the serialized markdown to the console
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const serialized = editor.getApi(MarkdownPlugin).markdown.serialize();
+      if (serialized !== previousMarkdown.current) {
+        previousMarkdown.current = serialized;
+        onUpdate(serialized);
+      }
+    }, 500);
+    return () => clearInterval(interval);
+  }, [editor, onUpdate]);
+
+  return (
+    <Plate editor={editor}>
+      <EditorContainer>
+        <Editor variant="none" className="px-8 py-2" />
+      </EditorContainer>
+    </Plate>
+  );
+}

package/frontend/src/components/mode-toggle.tsx

@@ -0,0 +1,15 @@
+import { Moon, Sun } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { useTheme } from "@/components/theme-provider"
+
+export function ModeToggle() {
+    const { setTheme, theme } = useTheme()
+
+    return (
+        <Button variant="outline" size="icon" onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
+            <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+            <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+            <span className="sr-only">Toggle theme</span>
+        </Button>
+    )
+}

package/frontend/src/components/theme-provider.tsx

@@ -0,0 +1,73 @@
+import { createContext, useContext, useEffect, useState } from "react"
+
+type Theme = "dark" | "light" | "system"
+
+type ThemeProviderProps = {
+    children: React.ReactNode
+    defaultTheme?: Theme
+    storageKey?: string
+}
+
+type ThemeProviderState = {
+    theme: Theme
+    setTheme: (theme: Theme) => void
+}
+
+const initialState: ThemeProviderState = {
+    theme: "system",
+    setTheme: () => null,
+}
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
+
+export function ThemeProvider({
+    children,
+    defaultTheme = "system",
+    storageKey = "vite-ui-theme",
+    ...props
+}: ThemeProviderProps) {
+    const [theme, setTheme] = useState<Theme>(
+        () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+    )
+
+    useEffect(() => {
+        const root = window.document.documentElement
+
+        root.classList.remove("light", "dark")
+
+        if (theme === "system") {
+            const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+                .matches
+                ? "dark"
+                : "light"
+
+            root.classList.add(systemTheme)
+            return
+        }
+
+        root.classList.add(theme)
+    }, [theme])
+
+    const value = {
+        theme,
+        setTheme: (theme: Theme) => {
+            localStorage.setItem(storageKey, theme)
+            setTheme(theme)
+        },
+    }
+
+    return (
+        <ThemeProviderContext.Provider {...props} value={value}>
+            {children}
+        </ThemeProviderContext.Provider>
+    )
+}
+
+export const useTheme = () => {
+    const context = useContext(ThemeProviderContext)
+
+    if (context === undefined)
+        throw new Error("useTheme must be used within a ThemeProvider")
+
+    return context
+}