Add global things from old app

src/components/editor/plate-editor.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { Plate, usePlateEditor } from 'platejs/react';
+
+import { BasicNodesKit } from '@/components/editor/plugins/basic-nodes-kit';
+import { Editor, EditorContainer } from '@/components/ui/editor';
+
+export function PlateEditor() {
+  const editor = usePlateEditor({
+    plugins: BasicNodesKit,
+    value,
+  });
+
+  return (
+    <Plate editor={editor}>
+      <EditorContainer>
+        <Editor variant="demo" placeholder="Type..." />
+      </EditorContainer>
+    </Plate>
+  );
+}
+
+const value = [
+  {
+    children: [{ text: 'Basic Editor' }],
+    type: 'h1',
+  },
+  {
+    children: [{ text: 'Heading 2' }],
+    type: 'h2',
+  },
+  {
+    children: [{ text: 'Heading 3' }],
+    type: 'h3',
+  },
+  {
+    children: [{ text: 'This is a blockquote element' }],
+    type: 'blockquote',
+  },
+  {
+    children: [
+      { text: 'Basic marks: ' },
+      { bold: true, text: 'bold' },
+      { text: ', ' },
+      { italic: true, text: 'italic' },
+      { text: ', ' },
+      { text: 'underline', underline: true },
+      { text: ', ' },
+      { strikethrough: true, text: 'strikethrough' },
+      { text: '.' },
+    ],
+    type: 'p',
+  },
+];

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

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

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

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

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];

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