Add blockquotes

packages/context-editor/src/commands/blocks.ts

@@ -48,6 +48,14 @@ const toggleBlockType = (options: ToggleOptions<NodeType>) => {
 	return setBlockFunction(state, dispatch);
 };
 
+const toggleWrap = (options: ToggleOptions<NodeType>) => {
+	const { state, type, dispatch } = options;
+	if (blockTypeIsActive(options)) {
+		return lift(state, dispatch);
+	}
+	return wrapIn(type)(state, dispatch);
+};
+
 const createBlockTypeToggle = (options: {
 	typeName: string;
 	withAttrs?: Attrs;
@@ -73,3 +81,9 @@ export const heading3Toggle = createHeadingBlockTypeToggle(3);
 export const heading4Toggle = createHeadingBlockTypeToggle(4);
 export const heading5Toggle = createHeadingBlockTypeToggle(5);
 export const heading6Toggle = createHeadingBlockTypeToggle(6);
+export const blockquoteToggle = createBlockTypeToggle({
+	typeName: "blockquote",
+	commandFn: toggleWrap,
+});
+// TODO
+export const codeBlockToggle = createBlockTypeToggle({ typeName: "code_block" });

packages/context-editor/src/commands/marks.ts

@@ -29,3 +29,4 @@ export const createMarkToggle = (typeName: string) => {
 
 export const strongToggle = createMarkToggle("strong");
 export const emToggle = createMarkToggle("em");
+export const codeToggle = createMarkToggle("code");

packages/context-editor/src/components/MenuBar.tsx

@@ -1,14 +1,16 @@
 import type { ReactNode } from "react";
 
-import React, { useState } from "react";
+import React from "react";
 import { usePluginViewContext } from "@prosemirror-adapter/react";
+import { Quote } from "lucide-react";
 
 import { Button } from "ui/button";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "ui/select";
 import { cn } from "utils";
 
 import type { CommandSpec } from "../commands/types";
 import {
+	blockquoteToggle,
 	heading1Toggle,
 	heading2Toggle,
 	heading3Toggle,
@@ -37,6 +39,11 @@ const menuItems: MenuItem[] = [
 		icon: <span className="italic">I</span>,
 		command: emToggle,
 	},
+	{
+		key: "blockquote",
+		icon: <Quote />,
+		command: blockquoteToggle,
+	},
 ];
 
 const paragraphTypeItems: MenuItem[] = [
@@ -90,6 +97,7 @@ const ParagraphDropdown = () => {
 		const { isActive } = item.command(view)(view.state);
 		return isActive;
 	})[0];
+
 	return (
 		<Select
 			value={activeType?.key}

packages/context-editor/src/plugins/inputRules.ts

@@ -1,7 +1,7 @@
-import type { MarkType } from "prosemirror-model";
+import type { MarkType, NodeType } from "prosemirror-model";
 import type { EditorState } from "prosemirror-state";
 
-import { InputRule, inputRules } from "prosemirror-inputrules";
+import { InputRule, inputRules, wrappingInputRule } from "prosemirror-inputrules";
 import { Fragment, Schema } from "prosemirror-model";
 
 import initialDoc from "../stories/initialDoc.json";
@@ -39,6 +39,7 @@ const applyMarkRule = (markType: MarkType, regex: RegExp) => {
 		}
 	);
 };
+const blockQuoteRule = (nodeType: NodeType) => wrappingInputRule(/^\s*>\s$/, nodeType);
 
 export default (schema: Schema) => {
 	const rules = [
@@ -54,6 +55,7 @@ export default (schema: Schema) => {
 		// Prosemirror applies the first rule that matches
 		applyMarkRule(schema.marks.strong, boldRegex),
 		applyMarkRule(schema.marks.em, italicsRegex),
+		blockQuoteRule(schema.nodes.blockquote),
 	];
 	return inputRules({ rules });
 };

packages/context-editor/src/schemas/blockquote.ts

@@ -0,0 +1,31 @@
+import type { DOMOutputSpec, MarkSpec, NodeSpec } from "prosemirror-model";
+
+export default {
+	attrs: {
+		id: { default: null },
+		class: { default: null },
+	},
+	content: "block+",
+	group: "block",
+	selectable: false,
+	parseDOM: [
+		{
+			tag: "blockquote",
+			getAttrs: (node) => {
+				return {
+					id: (node as Element).getAttribute("id"),
+				};
+			},
+		},
+	],
+	toDOM: (node) => {
+		return [
+			"blockquote",
+			{
+				class: node.attrs.class,
+				...(node.attrs.id && { id: node.attrs.id }),
+			},
+			0,
+		] as DOMOutputSpec;
+	},
+} satisfies NodeSpec;

packages/context-editor/src/schemas/code.ts

@@ -0,0 +1,18 @@
+import type { DOMOutputSpec, MarkSpec } from "prosemirror-model";
+
+export default {
+	attrs: {
+		id: { default: null },
+		class: { default: null },
+	},
+	parseDOM: [{ tag: "code" }],
+	toDOM: (mark) => {
+		return [
+			"code",
+			{
+				class: mark.attrs.class,
+				...(mark.attrs.id && { id: mark.attrs.id }),
+			},
+		] as DOMOutputSpec;
+	},
+} satisfies MarkSpec;

packages/context-editor/src/schemas/index.ts

@@ -1,5 +1,7 @@
 import { Schema } from "prosemirror-model";
 
+import blockquote from "./blockquote";
+import inlineCode from "./code";
 import contextAtom from "./contextAtom";
 import contextDoc from "./contextDoc";
 // import { marks, nodes } from "prosemirror-schema-basic";
@@ -21,10 +23,12 @@ export const baseSchema = new Schema({
 		heading,
 		contextDoc,
 		contextAtom,
+		blockquote,
 	},
 	marks: {
 		strong,
 		em,
+		code: inlineCode,
 	},
 	topNode: "doc",
 });

packages/context-editor/src/style.css

@@ -138,3 +138,7 @@
 	overflow: scroll;
 	position: relative;
 }
+.ProseMirror blockquote {
+	padding-left: 1rem;
+	border-left: solid 4px rgba(181, 181, 181, 0.5);
+}