doclific 0.1.0

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

@@ -0,0 +1,236 @@
+'use client';
+
+import type { AutoformatRule } from '@platejs/autoformat';
+
+import {
+  autoformatArrow,
+  autoformatLegal,
+  autoformatLegalHtml,
+  autoformatMath,
+  AutoformatPlugin,
+  autoformatPunctuation,
+  autoformatSmartQuotes,
+} from '@platejs/autoformat';
+import { insertEmptyCodeBlock } from '@platejs/code-block';
+import { toggleList } from '@platejs/list';
+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.highlight,
+  },
+  {
+    match: '≡',
+    mode: 'mark',
+    type: KEYS.highlight,
+  },
+  {
+    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.h4,
+  },
+  {
+    match: '##### ',
+    mode: 'block',
+    type: KEYS.h5,
+  },
+  {
+    match: '###### ',
+    mode: 'block',
+    type: KEYS.h6,
+  },
+  {
+    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: ['---', '—-', '___ '],
+    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/frontend/src/components/editor/plugins/basic-blocks-base-kit.tsx

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

package/frontend/src/components/editor/plugins/basic-blocks-kit.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import {
+  BlockquotePlugin,
+  H1Plugin,
+  H2Plugin,
+  H3Plugin,
+  H4Plugin,
+  H5Plugin,
+  H6Plugin,
+  HorizontalRulePlugin,
+} from '@platejs/basic-nodes/react';
+import { ParagraphPlugin } from 'platejs/react';
+
+import { BlockquoteElement } from '@/components/ui/blockquote-node';
+import {
+  H1Element,
+  H2Element,
+  H3Element,
+  H4Element,
+  H5Element,
+  H6Element,
+} from '@/components/ui/heading-node';
+import { HrElement } from '@/components/ui/hr-node';
+import { ParagraphElement } from '@/components/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' } },
+  }),
+  H4Plugin.configure({
+    node: {
+      component: H4Element,
+    },
+    rules: {
+      break: { empty: 'reset' },
+    },
+    shortcuts: { toggle: { keys: 'mod+alt+4' } },
+  }),
+  H5Plugin.configure({
+    node: {
+      component: H5Element,
+    },
+    rules: {
+      break: { empty: 'reset' },
+    },
+    shortcuts: { toggle: { keys: 'mod+alt+5' } },
+  }),
+  H6Plugin.configure({
+    node: {
+      component: H6Element,
+    },
+    rules: {
+      break: { empty: 'reset' },
+    },
+    shortcuts: { toggle: { keys: 'mod+alt+6' } },
+  }),
+  BlockquotePlugin.configure({
+    node: { component: BlockquoteElement },
+    shortcuts: { toggle: { keys: 'mod+shift+period' } },
+  }),
+  HorizontalRulePlugin.withComponent(HrElement),
+];

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

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

package/frontend/src/components/editor/plugins/basic-marks-kit.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import {
+  BoldPlugin,
+  CodePlugin,
+  HighlightPlugin,
+  ItalicPlugin,
+  KbdPlugin,
+  StrikethroughPlugin,
+  SubscriptPlugin,
+  SuperscriptPlugin,
+  UnderlinePlugin,
+} from '@platejs/basic-nodes/react';
+
+import { CodeLeaf } from '@/components/ui/code-node';
+import { HighlightLeaf } from '@/components/ui/highlight-node';
+import { KbdLeaf } from '@/components/ui/kbd-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' } },
+  }),
+  KbdPlugin.withComponent(KbdLeaf),
+];

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

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

package/frontend/src/components/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 something...',
+      },
+      query: ({ path }) => path.length === 1,
+    },
+  }),
+];

package/frontend/src/components/editor/plugins/block-selection-kit.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { AIChatPlugin } from '@platejs/ai/react';
+import { BlockSelectionPlugin } from '@platejs/selection/react';
+import { getPluginTypes, isHotkey, KEYS } from 'platejs';
+
+import { BlockSelection } from '@/components/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/frontend/src/components/editor/plugins/callout-base-kit.tsx

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

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

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

package/frontend/src/components/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 '@/components/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/frontend/src/components/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 '@/components/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/frontend/src/components/editor/plugins/codebase-kit.tsx

@@ -0,0 +1,23 @@
+import { createPlatePlugin } from "platejs/react";
+import { CodebaseSnippetElement } from "@/components/ui/codebase-snippet-node";
+
+export const CodebaseSnippetType = 'CodebaseSnippet';
+
+export interface CodebaseSnippetElementType {
+    type: typeof CodebaseSnippetType;
+    filePath?: string;
+    lineStart?: string;
+    lineEnd?: string;
+    children: [{ text: '' }];
+    [key: string]: any;
+}
+
+
+export const CodebaseSnippetPlugin = createPlatePlugin({
+    key: CodebaseSnippetType,
+    node: {
+        isElement: true,
+        isVoid: true,
+        component: CodebaseSnippetElement
+    }
+})

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

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

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

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

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

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