TypeCellOS · matthewlipski · Mar 26, 2025 · Mar 25, 2025 · Mar 25, 2025 · Mar 25, 2025
diff --git a/docs/pages/docs/editor-basics/default-schema.mdx b/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**

diff --git a/examples/01-basic/04-default-blocks/App.tsx b/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",

diff --git a/packages/core/src/blocks/QuoteBlockContent/QuoteBlockContent.ts b/packages/core/src/blocks/QuoteBlockContent/QuoteBlockContent.ts
@@ -0,0 +1,65 @@
+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";
+
+export const quotePropSchema = {
+  ...defaultProps,
+};
+
+export const QuoteBlockContent = createStronglyTypedTiptapNode({
+  name: "quote",
+  content: "inline*",
+  group: "blockContent",
+
+  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
+);
diff --git a/packages/core/src/blocks/defaultBlocks.ts b/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,

diff --git a/packages/core/src/editor/Block.css b/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 {

diff --git a/packages/core/src/editor/BlockNoteEditor.ts b/packages/core/src/editor/BlockNoteEditor.ts
@@ -233,6 +233,11 @@ export type BlockNoteEditorOptions<
    */
   setIdAttribute?: boolean;
 
+  /**
+   * A flag indicating whether to show the grey left border on nested blocks.
+   */
+  showNestingIndicator: boolean;
+
   /**
    * The detection mode for showing the side menu - "viewport" always shows the
    * side menu for the block next to the mouse cursor, while "editor" only shows
@@ -494,6 +499,7 @@ export class BlockNoteEditor<
     // apply defaults
     const newOptions = {
       defaultStyles: true,
+      showNestingIndicator: options.showNestingIndicator || true,
       schema: options.schema || BlockNoteSchema.create(),
       _headless: false,
       ...options,
@@ -651,7 +657,8 @@ export class BlockNoteEditor<
           class: mergeCSSClasses(
             "bn-editor",
             newOptions.defaultStyles ? "bn-default-styles" : "",
-            newOptions.domAttributes?.editor?.class || ""
+            newOptions.domAttributes?.editor?.class || "",
+            newOptions.showNestingIndicator ? "bn-show-nesting-indicator" : ""
           ),
         },
         transformPasted,

diff --git a/packages/core/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts b/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: () => {

diff --git a/packages/core/src/i18n/locales/ar.ts b/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: "تستخدم لعرض قائمة مرقمة",

diff --git a/packages/core/src/i18n/locales/de.ts b/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",

diff --git a/packages/core/src/i18n/locales/en.ts b/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",

diff --git a/packages/core/src/i18n/locales/es.ts b/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",

diff --git a/packages/core/src/i18n/locales/fr.ts b/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",

diff --git a/packages/core/src/i18n/locales/hr.ts b/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",

diff --git a/packages/core/src/i18n/locales/is.ts b/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",

diff --git a/packages/core/src/i18n/locales/it.ts b/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",

diff --git a/packages/core/src/i18n/locales/ja.ts b/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: "番号付リストを表示するために使用",

diff --git a/packages/core/src/i18n/locales/ko.ts b/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: "번호가 매겨진 목록을 추가합니다.",

diff --git a/packages/core/src/i18n/locales/nl.ts b/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",

diff --git a/packages/core/src/i18n/locales/no.ts b/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",

diff --git a/packages/core/src/i18n/locales/pl.ts b/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",

diff --git a/packages/core/src/i18n/locales/pt.ts b/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",

diff --git a/packages/core/src/i18n/locales/ru.ts b/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: "Используется для отображения нумерованного списка",

diff --git a/packages/core/src/i18n/locales/uk.ts b/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: "Список із впорядкованими елементами",

diff --git a/packages/core/src/i18n/locales/vi.ts b/packages/core/src/i18n/locales/vi.ts
@@ -20,6 +20,12 @@ export const vi: Dictionary = {
       aliases: ["h3", "tieude3", "tieudephu"],
       group: "Tiêu đề",
     },
+    quote: {
+      title: "Trích dẫn",
+      subtext: "Trích dẫn hoặc đoạn trích",
+      aliases: ["quotation", "blockquote", "bq"],
+      group: "Khối cơ bản",
+    },
     numbered_list: {
       title: "Danh sách đánh số",
       subtext: "Sử dụng để hiển thị danh sách có đánh số",