feat: add markdown editing and rendering in jobs.

ARCHITECTURE.md

@@ -166,7 +166,7 @@ High-level responsibilities:
 - `dashboard`: role-specific metrics and dashboard data
 - `entitlements`: `deriveEntitlements()`, server enforcement, `useEntitlements()` hook
 - `interviews`: interview lifecycle, routes, agent chat hooks/components, server functions
-- `jobs`: job CRUD, lifecycle, requirements, screening questions
+- `jobs`: job CRUD, lifecycle, Markdown descriptions, screening questions
 - `notifications`: inbox UI, payload rendering, email delivery
 - `pre-evaluations`: pre-screening queries and server functions
 - `reports`: post-evaluation reports, report pages, reusable report components
@@ -265,8 +265,7 @@ Source of truth:
 
 - owned by a company
 - stores:
-  - title, description
-  - requirements
+  - title and canonical Markdown description (including requirements/qualifications)
   - screening questions
   - lifecycle status (`draft`, `open`, `closed`)
   - salary / workplace / experience fields

PLATFORM.md

@@ -316,8 +316,7 @@ Company profile should contain:
 Job should contain:
 
 - title
-- description
-- requirements
+- Markdown description (including responsibilities and qualifications)
 - location
 - type
 - experience level

app/components/editor/plugins/basic-blocks-kit.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { BlockquoteRules, HeadingRules, HorizontalRuleRules } from "@platejs/basic-nodes";
+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({
+    inputRules: [HeadingRules.markdown()],
+    node: {
+      component: H1Element,
+    },
+    rules: {
+      break: { empty: "reset" },
+    },
+    shortcuts: { toggle: { keys: "mod+alt+1" } },
+  }),
+  H2Plugin.configure({
+    inputRules: [HeadingRules.markdown()],
+    node: {
+      component: H2Element,
+    },
+    rules: {
+      break: { empty: "reset" },
+    },
+    shortcuts: { toggle: { keys: "mod+alt+2" } },
+  }),
+  H3Plugin.configure({
+    inputRules: [HeadingRules.markdown()],
+    node: {
+      component: H3Element,
+    },
+    rules: {
+      break: { empty: "reset" },
+    },
+    shortcuts: { toggle: { keys: "mod+alt+3" } },
+  }),
+  H4Plugin.configure({
+    inputRules: [HeadingRules.markdown()],
+    node: {
+      component: H4Element,
+    },
+    rules: {
+      break: { empty: "reset" },
+    },
+    shortcuts: { toggle: { keys: "mod+alt+4" } },
+  }),
+  H5Plugin.configure({
+    inputRules: [HeadingRules.markdown()],
+    node: {
+      component: H5Element,
+    },
+    rules: {
+      break: { empty: "reset" },
+    },
+    shortcuts: { toggle: { keys: "mod+alt+5" } },
+  }),
+  H6Plugin.configure({
+    inputRules: [HeadingRules.markdown()],
+    node: {
+      component: H6Element,
+    },
+    rules: {
+      break: { empty: "reset" },
+    },
+    shortcuts: { toggle: { keys: "mod+alt+6" } },
+  }),
+  BlockquotePlugin.configure({
+    inputRules: [BlockquoteRules.markdown()],
+    node: { component: BlockquoteElement },
+    shortcuts: { toggle: { keys: "mod+shift+period" } },
+  }),
+  HorizontalRulePlugin.configure({
+    inputRules: [
+      HorizontalRuleRules.markdown({ variant: "-" }),
+      HorizontalRuleRules.markdown({ variant: "_" }),
+    ],
+    node: {
+      component: HrElement,
+    },
+  }),
+];

app/components/editor/plugins/basic-marks-kit.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { BoldRules, CodeRules, ItalicRules, StrikethroughRules } from "@platejs/basic-nodes";
+import {
+  BoldPlugin,
+  CodePlugin,
+  ItalicPlugin,
+  StrikethroughPlugin,
+} from "@platejs/basic-nodes/react";
+
+import { CodeLeaf } from "@/components/ui/code-node";
+
+export const BasicMarksKit = [
+  BoldPlugin.configure({
+    inputRules: [BoldRules.markdown({ variant: "*" }), BoldRules.markdown({ variant: "_" })],
+  }),
+  ItalicPlugin.configure({
+    inputRules: [ItalicRules.markdown({ variant: "*" }), ItalicRules.markdown({ variant: "_" })],
+  }),
+  CodePlugin.configure({
+    inputRules: [CodeRules.markdown()],
+    node: { component: CodeLeaf },
+    shortcuts: { toggle: { keys: "mod+e" } },
+  }),
+  StrikethroughPlugin.configure({
+    inputRules: [StrikethroughRules.markdown()],
+    shortcuts: { toggle: { keys: "mod+shift+x" } },
+  }),
+];

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

@@ -0,0 +1,22 @@
+"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,
+        KEYS.img,
+      ],
+    },
+    options: {
+      offset: 24,
+    },
+  }),
+];

app/components/editor/plugins/link-kit.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { LinkRules } from "@platejs/link";
+import { LinkPlugin } from "@platejs/link/react";
+
+import { LinkElement } from "@/components/ui/link-node";
+import { LinkFloatingToolbar } from "@/components/ui/link-toolbar";
+
+export const LinkKit = [
+  LinkPlugin.configure({
+    inputRules: [
+      LinkRules.markdown(),
+      LinkRules.autolink({ variant: "paste" }),
+      LinkRules.autolink({ variant: "space" }),
+      LinkRules.autolink({ variant: "break" }),
+    ],
+    render: {
+      node: LinkElement,
+      afterEditable: () => <LinkFloatingToolbar />,
+    },
+  }),
+];

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

@@ -0,0 +1,46 @@
+"use client";
+
+import { BulletedListRules, isOrderedList, OrderedListRules } from "@platejs/list";
+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({
+    inputRules: [
+      BulletedListRules.markdown({ variant: "-" }),
+      BulletedListRules.markdown({ variant: "*" }),
+      OrderedListRules.markdown({ variant: "." }),
+      OrderedListRules.markdown({ variant: ")" }),
+    ],
+    inject: {
+      nodeProps: {
+        nodeKey: KEYS.listType,
+        query: ({ nodeProps }) => {
+          const element = nodeProps.element;
+
+          return !!element?.listStyleType && !isOrderedList(element);
+        },
+        transformProps: ({ props }) => ({
+          ...props,
+          role: "listitem",
+          style: Object.assign({}, props.style, { display: "list-item" }),
+        }),
+      },
+      targetPlugins: [
+        ...KEYS.heading,
+        KEYS.p,
+        KEYS.blockquote,
+        KEYS.codeBlock,
+        KEYS.toggle,
+        KEYS.img,
+      ],
+    },
+    render: {
+      belowNodes: BlockList,
+    },
+  }),
+];

app/components/ui/block-list.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import type { TListElement } from 'platejs';
+import type { ReactNode } from 'react';
+
+import { isOrderedList } from '@platejs/list';
+import {
+  type PlateElementProps,
+  type RenderNodeWrapper,
+} from 'platejs/react';
+
+export const BlockList: RenderNodeWrapper = (props) => {
+  if (!props.element.listStyleType) return;
+  if (!isOrderedList(props.element)) return;
+
+  return (props) => <List {...props} />;
+};
+
+function List(props: PlateElementProps & { lineBreakBadge?: ReactNode }) {
+  const { listStart, listStyleType } = props.element as TListElement;
+
+  return (
+    <ol
+      className="relative m-0 p-0"
+      style={{ listStyleType }}
+      start={listStart}
+    >
+      <li>
+      {props.children}
+      {props.lineBreakBadge}
+      </li>
+    </ol>
+  );
+}

app/components/ui/blockquote-node.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { type PlateElementProps, PlateElement } from 'platejs/react';
+
+export function BlockquoteElement(props: PlateElementProps) {
+  return (
+    <PlateElement
+      as="blockquote"
+      className="my-1 border-l-2 pl-6 italic"
+      {...props}
+    />
+  );
+}

app/components/ui/code-node.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import type { PlateLeafProps } from 'platejs/react';
+
+import { PlateLeaf } from 'platejs/react';
+
+export function CodeLeaf(props: PlateLeafProps) {
+  return (
+    <PlateLeaf
+      {...props}
+      as="code"
+      className="whitespace-pre-wrap rounded-md bg-muted px-[0.3em] py-[0.2em] font-mono text-sm"
+    >
+      {props.children}
+    </PlateLeaf>
+  );
+}