doclific 0.2.0 → 0.2.2

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

@@ -1,46 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,13 +0,0 @@
-'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

@@ -1,31 +0,0 @@
-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,
-];

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

@@ -1,43 +0,0 @@
-'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

@@ -1,7 +0,0 @@
-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

@@ -1,15 +0,0 @@
-'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

@@ -1,18 +0,0 @@
-'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

@@ -1,7 +0,0 @@
-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

@@ -1,90 +0,0 @@
-'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

@@ -1,20 +0,0 @@
-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

@@ -1,22 +0,0 @@
-'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

@@ -1,5 +0,0 @@
-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

@@ -1,14 +0,0 @@
-'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

@@ -1,7 +0,0 @@
-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

@@ -1,11 +0,0 @@
-'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

@@ -1,194 +0,0 @@
-'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

@@ -1,50 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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>
-    )
-}