feat: Block quote

docs/pages/docs/editor-basics/default-schema.mdx

@@ -56,6 +56,20 @@ type HeadingBlock = {
 
 `level:` The heading level, representing a title (`level: 1`), heading (`level: 2`), and subheading (`level: 3`).
 
+#### Quote
+
+**Type & Props**
+
+```typescript
+type QuoteBlock = {
+  id: string;
+  type: "quote";
+  props: DefaultProps;
+  content: InlineContent[];
+  children: Block[];
+};
+```
+
 #### Bullet List Item
 
 **Type & Props**

examples/01-basic/04-default-blocks/App.tsx

@@ -32,6 +32,10 @@ export default function App() {
         type: "heading",
         content: "Heading",
       },
+      {
+        type: "quote",
+        content: "Quote",
+      },
       {
         type: "bulletListItem",
         content: "Bullet List Item",

packages/core/src/blocks/QuoteBlockContent/QuoteBlockContent.ts

@@ -0,0 +1,98 @@
+import {
+  createBlockSpecFromStronglyTypedTiptapNode,
+  createStronglyTypedTiptapNode,
+} from "../../schema/index.js";
+import { createDefaultBlockDOMOutputSpec } from "../defaultBlockHelpers.js";
+import { defaultProps } from "../defaultProps.js";
+import { getBlockInfoFromSelection } from "../../api/getBlockInfoFromPos.js";
+import { updateBlockCommand } from "../../api/blockManipulation/commands/updateBlock/updateBlock.js";
+import { InputRule } from "@tiptap/core";
+
+export const quotePropSchema = {
+  ...defaultProps,
+};
+
+export const QuoteBlockContent = createStronglyTypedTiptapNode({
+  name: "quote",
+  content: "inline*",
+  group: "blockContent",
+
+  addInputRules() {
+    return [
+      // Creates a block quote when starting with ">".
+      new InputRule({
+        find: new RegExp(`^>\\s$`),
+        handler: ({ state, chain, range }) => {
+          const blockInfo = getBlockInfoFromSelection(state);
+          if (
+            !blockInfo.isBlockContainer ||
+            blockInfo.blockContent.node.type.spec.content !== "inline*"
+          ) {
+            return;
+          }
+
+          chain()
+            .command(
+              updateBlockCommand(
+                this.options.editor,
+                blockInfo.bnBlock.beforePos,
+                {
+                  type: "quote",
+                  props: {},
+                }
+              )
+            )
+            // Removes the ">" character used to set the list.
+            .deleteRange({ from: range.from, to: range.to });
+        },
+      }),
+    ];
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      "Mod-Alt-q": () => {
+        const blockInfo = getBlockInfoFromSelection(this.editor.state);
+        if (
+          !blockInfo.isBlockContainer ||
+          blockInfo.blockContent.node.type.spec.content !== "inline*"
+        ) {
+          return true;
+        }
+
+        return this.editor.commands.command(
+          updateBlockCommand(this.options.editor, blockInfo.bnBlock.beforePos, {
+            type: "quote",
+          })
+        );
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      { tag: "div[data-content-type=" + this.name + "]" },
+      {
+        tag: "blockquote",
+        node: "quote",
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return createDefaultBlockDOMOutputSpec(
+      this.name,
+      "blockquote",
+      {
+        ...(this.options.domAttributes?.blockContent || {}),
+        ...HTMLAttributes,
+      },
+      this.options.domAttributes?.inlineContent || {}
+    );
+  },
+});
+
+export const Quote = createBlockSpecFromStronglyTypedTiptapNode(
+  QuoteBlockContent,
+  quotePropSchema
+);

packages/core/src/blocks/defaultBlocks.ts

@@ -29,6 +29,7 @@ import { BulletListItem } from "./ListItemBlockContent/BulletListItemBlockConten
 import { CheckListItem } from "./ListItemBlockContent/CheckListItemBlockContent/CheckListItemBlockContent.js";
 import { NumberedListItem } from "./ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.js";
 import { Paragraph } from "./ParagraphBlockContent/ParagraphBlockContent.js";
+import { Quote } from "./QuoteBlockContent/QuoteBlockContent.js";
 import { Table } from "./TableBlockContent/TableBlockContent.js";
 import { VideoBlock } from "./VideoBlockContent/VideoBlockContent.js";
 
@@ -37,6 +38,7 @@ export { customizeCodeBlock } from "./CodeBlockContent/CodeBlockContent.js";
 export const defaultBlockSpecs = {
   paragraph: Paragraph,
   heading: Heading,
+  quote: Quote,
   codeBlock: CodeBlock,
   bulletListItem: BulletListItem,
   numberedListItem: NumberedListItem,

packages/core/src/editor/Block.css

@@ -146,6 +146,14 @@ NESTED BLOCKS
   font-weight: bold;
 }
 
+/* QUOTES */
+[data-content-type="quote"] blockquote {
+  border-left: 2px solid rgb(125, 121, 122);
+  color: rgb(125, 121, 122);
+  margin: 0;
+  padding-left: 1em;
+}
+
 /* LISTS */
 
 .bn-block-content::before {

packages/core/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts

@@ -125,6 +125,18 @@ export function getDefaultSlashMenuItems<
     );
   }
 
+  if (checkDefaultBlockTypeInSchema("quote", editor)) {
+    items.push({
+      onItemClick: () => {
+        insertOrUpdateBlock(editor, {
+          type: "quote",
+        });
+      },
+      key: "quote",
+      ...editor.dictionary.slash_menu.quote,
+    });
+  }
+
   if (checkDefaultBlockTypeInSchema("numberedListItem", editor)) {
     items.push({
       onItemClick: () => {

packages/core/src/i18n/locales/ar.ts

@@ -20,6 +20,12 @@ export const ar: Dictionary = {
       aliases: ["ع3", "عنوان3", "عنوان فرعي"],
       group: "العناوين",
     },
+    quote: {
+      title: "اقتباس",
+      subtext: "اقتباس أو مقتطف",
+      aliases: ["quotation", "blockquote", "bq"],
+      group: "الكتل الأساسية",
+    },
     numbered_list: {
       title: "قائمة مرقمة",
       subtext: "تستخدم لعرض قائمة مرقمة",

packages/core/src/i18n/locales/de.ts

@@ -20,6 +20,12 @@ export const de: Dictionary = {
       aliases: ["h3", "überschrift3", "unterüberschrift"],
       group: "Überschriften",
     },
+    quote: {
+      title: "Zitat",
+      subtext: "Zitat oder Auszug",
+      aliases: ["quotation", "blockquote", "bq"],
+      group: "Grundlegende blöcke",
+    },
     numbered_list: {
       title: "Nummerierte Liste",
       subtext: "Liste mit nummerierten Elementen",

packages/core/src/i18n/locales/en.ts

@@ -18,6 +18,12 @@ export const en = {
       aliases: ["h3", "heading3", "subheading"],
       group: "Headings",
     },
+    quote: {
+      title: "Quote",
+      subtext: "Quote or excerpt",
+      aliases: ["quotation", "blockquote", "bq"],
+      group: "Basic blocks",
+    },
     numbered_list: {
       title: "Numbered List",
       subtext: "List with ordered items",

packages/core/src/i18n/locales/es.ts

@@ -20,6 +20,12 @@ export const es: Dictionary = {
       aliases: ["h3", "encabezado3", "subencabezado"],
       group: "Encabezados",
     },
+    quote: {
+      title: "Cita",
+      subtext: "Cita o extracto",
+      aliases: ["quotation", "blockquote", "bq"],
+      group: "Bloques básicos",
+    },
     numbered_list: {
       title: "Lista Numerada",
       subtext: "Lista con elementos ordenados",

packages/core/src/i18n/locales/fr.ts

@@ -21,6 +21,12 @@ export const fr: Dictionary = {
       aliases: ["h3", "titre3", "sous-titre"],
       group: "Titres",
     },
+    quote: {
+      title: "Citation",
+      subtext: "Citation ou extrait",
+      aliases: ["quotation", "blockquote", "bq"],
+      group: "Blocs de base",
+    },
     numbered_list: {
       title: "Liste Numérotée",
       subtext: "Utilisé pour afficher une liste numérotée",

packages/core/src/i18n/locales/hr.ts

@@ -20,6 +20,12 @@ export const hr: Dictionary = {
       aliases: ["h3", "naslov3", "podnaslov"],
       group: "Naslovi",
     },
+    quote: {
+      title: "Citat",
+      subtext: "Citat ili izvadak",
+      aliases: ["quotation", "blockquote", "bq"],
+      group: "Osnovni blokovi",
+    },
     numbered_list: {
       title: "Numerirani popis",
       subtext: "Popis s numeriranim stavkama",

packages/core/src/i18n/locales/is.ts

@@ -20,6 +20,12 @@ export const is: Dictionary = {
       aliases: ["h3", "fyrirsogn3", "undirfyrirsogn"],
       group: "Fyrirsagnir",
     },
+    quote: {
+      title: "Tilvitnun",
+      subtext: "Tilvitnun eða útdráttur",
+      aliases: ["quotation", "blockquote", "bq"],
+      group: "Grunnblokkar",
+    },
     numbered_list: {
       title: "Númeruð listi",
       subtext: "Notað til að birta númeraðan lista",

packages/core/src/i18n/locales/it.ts

@@ -20,6 +20,12 @@ export const it: Dictionary = {
       aliases: ["h3", "intestazione3", "sottotitolo"],
       group: "Intestazioni",
     },
+    quote: {
+      title: "Citazione",
+      subtext: "Citazione o estratto",
+      aliases: ["quotation", "blockquote", "bq"],
+      group: "Blocchi Base",
+    },
     numbered_list: {
       title: "Elenco Numerato",
       subtext: "Elenco con elementi ordinati",

packages/core/src/i18n/locales/ja.ts

@@ -20,6 +20,12 @@ export const ja: Dictionary = {
       aliases: ["h3", "見出し3", "subheading", "小見出し"],
       group: "見出し",
     },
+    quote: {
+      title: "引用",
+      subtext: "引用または抜粋",
+      aliases: ["quotation", "blockquote", "bq"],
+      group: "基本ブロック",
+    },
     numbered_list: {
       title: "番号付リスト",
       subtext: "番号付リストを表示するために使用",

packages/core/src/i18n/locales/ko.ts

@@ -20,6 +20,12 @@ export const ko: Dictionary = {
       aliases: ["h3", "제목3", "subheading"],
       group: "제목",
     },
+    quote: {
+      title: "인용",
+      subtext: "인용문 또는 발췌",
+      aliases: ["quotation", "blockquote", "bq"],
+      group: "기본 블록",
+    },
     numbered_list: {
       title: "번호 매기기 목록",
       subtext: "번호가 매겨진 목록을 추가합니다.",

packages/core/src/i18n/locales/nl.ts

@@ -20,6 +20,12 @@ export const nl: Dictionary = {
       aliases: ["h3", "kop3", "subkop"],
       group: "Koppen",
     },
+    quote: {
+      title: "Citaat",
+      subtext: "Citaat of uittreksel",
+      aliases: ["quotation", "blockquote", "bq"],
+      group: "Basisblokken",
+    },
     numbered_list: {
       title: "Genummerde Lijst",
       subtext: "Gebruikt om een genummerde lijst weer te geven",

packages/core/src/i18n/locales/no.ts

@@ -20,6 +20,12 @@ export const no: Dictionary = {
       aliases: ["h3", "overskrift3", "underoverskrift"],
       group: "Overskrifter",
     },
+    quote: {
+      title: "Sitat",
+      subtext: "Sitat eller utdrag",
+      aliases: ["quotation", "blockquote", "bq"],
+      group: "Grunnleggende blokker",
+    },
     numbered_list: {
       title: "Nummerert liste",
       subtext: "Liste med ordnede elementer",

packages/core/src/i18n/locales/pl.ts

@@ -20,6 +20,12 @@ export const pl: Dictionary = {
       aliases: ["h3", "naglowek3", "podnaglowek"],
       group: "Nagłówki",
     },
+    quote: {
+      title: "Cytat",
+      subtext: "Cytat lub fragment",
+      aliases: ["quotation", "blockquote", "bq"],
+      group: "Podstawowe bloki",
+    },
     numbered_list: {
       title: "Lista numerowana",
       subtext: "Używana do wyświetlania listy numerowanej",

packages/core/src/i18n/locales/pt.ts

@@ -20,6 +20,12 @@ export const pt: Dictionary = {
       aliases: ["h3", "titulo3", "subtitulo"],
       group: "Títulos",
     },
+    quote: {
+      title: "Citação",
+      subtext: "Citação ou trecho",
+      aliases: ["quotation", "blockquote", "bq"],
+      group: "Blocos básicos",
+    },
     numbered_list: {
       title: "Lista Numerada",
       subtext: "Usado para exibir uma lista numerada",

packages/core/src/i18n/locales/ru.ts

@@ -20,6 +20,12 @@ export const ru: Dictionary = {
       aliases: ["h3", "heading3", "subheading", "заголовок3", "подзаголовок"],
       group: "Заголовки",
     },
+    quote: {
+      title: "Цитата",
+      subtext: "Цитата или отрывок",
+      aliases: ["quotation", "blockquote", "bq"],
+      group: "Базовые блоки",
+    },
     numbered_list: {
       title: "Нумерованный список",
       subtext: "Используется для отображения нумерованного списка",

packages/core/src/i18n/locales/uk.ts

@@ -20,6 +20,12 @@ export const uk: Dictionary = {
       aliases: ["h3", "heading3", "subheading", "заголовок3"],
       group: "Заголовки",
     },
+    quote: {
+      title: "Цитата",
+      subtext: "Цитата або уривок",
+      aliases: ["quotation", "blockquote", "bq"],
+      group: "Базові блоки",
+    },
     numbered_list: {
       title: "Нумерований список",
       subtext: "Список із впорядкованими елементами",