ToS Editor

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),
+];

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),
+];

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,
+    },
+  }),
+];

src/components/editor/plugins/indent-kit.tsx

@@ -0,0 +1,21 @@
+'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,
+      ],
+    },
+    options: {
+      offset: 24,
+    },
+  }),
+];

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,
+    },
+  }),
+];

src/components/editor/plugins/list-kit.tsx

@@ -0,0 +1,25 @@
+'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,
+      ],
+    },
+    render: {
+      belowNodes: BlockList,
+    },
+  }),
+];

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

@@ -0,0 +1,13 @@
+import { MarkdownPlugin, remarkMdx, remarkMention } from '@platejs/markdown';
+import { KEYS } from 'platejs';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+
+export const MarkdownKit = [
+  MarkdownPlugin.configure({
+    options: {
+      disallowedNodes: [KEYS.suggestion],
+      remarkPlugins: [remarkMath, remarkGfm, remarkMdx, remarkMention],
+    },
+  }),
+];