@crystallize/design-system 1.8.0 → 1.9.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @crystallize/design-system
 
+## 1.9.0
+
+### Minor Changes
+
+- dd3c347: Added h4, h5 and h6 for rich text editor
+
 ## 1.8.0
 
 ### Minor Changes

package/dist/index.js

@@ -5730,16 +5730,20 @@ function InsertTableDialog({ activeEditor }) {
 
 // src/rich-text-editor/plugins/ToolbarPlugin/index.tsx
 var import_jsx_runtime88 = require("react/jsx-runtime");
-var blockTypeToBlockName = {
-  bullet: "Bulleted List",
-  check: "Check List",
-  code: "Code Block",
+var headingTypeToBlockName = {
   h1: "Heading 1",
   h2: "Heading 2",
   h3: "Heading 3",
   h4: "Heading 4",
   h5: "Heading 5",
-  h6: "Heading 6",
+  h6: "Heading 6"
+};
+var headings = Object.keys(headingTypeToBlockName);
+var blockTypeToBlockName = {
+  ...headingTypeToBlockName,
+  bullet: "Bulleted List",
+  check: "Check List",
+  code: "Code Block",
   number: "Numbered List",
   paragraph: "Normal",
   quote: "Quote"
@@ -5849,42 +5853,18 @@ function BlockFormatDropDown({
             })
           ]
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(DropdownMenu.Item, {
-          onClick: () => formatHeading("h1"),
+        headings.map((headingSize) => /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(DropdownMenu.Item, {
+          onClick: () => formatHeading(headingSize),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("i", {
-              className: `icon h1 border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px]  ${blockType === "h1" ? "opacity-100 bg-purple-50-900" : "opacity-60"}`
+              className: `icon ${headingSize} border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px]  ${blockType === headingSize ? "opacity-100 bg-purple-50-900" : "opacity-60"}`
             }),
             /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", {
-              className: `${blockType === "h1" ? "font-bold" : "font-normal"} text-sm px-3 min-w-[150px]`,
-              children: "Heading 1"
+              className: `${blockType === headingSize ? "font-bold" : "font-normal"} text-sm px-3 min-w-[150px]`,
+              children: headingTypeToBlockName[headingSize]
             })
           ]
-        }),
-        /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(DropdownMenu.Item, {
-          onClick: () => formatHeading("h2"),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("i", {
-              className: `icon h2 border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px] ${blockType === "h2" ? "opacity-100 bg-purple-50-900" : "opacity-60"}`
-            }),
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", {
-              className: `${blockType === "h2" ? "font-bold" : "font-normal"} text-sm px-3  min-w-[150px]`,
-              children: "Heading 2"
-            })
-          ]
-        }),
-        /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(DropdownMenu.Item, {
-          onClick: () => formatHeading("h3"),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("i", {
-              className: `icon h3 border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px] ${blockType === "h3" ? "opacity-100 bg-purple-50-900" : "opacity-60"}`
-            }),
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", {
-              className: `${blockType === "h3" ? "font-bold" : "font-normal"} text-sm px-3  min-w-[150px]`,
-              children: "Heading 3"
-            })
-          ]
-        }),
+        }, headingSize)),
         /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(DropdownMenu.Item, {
           onClick: formatBulletList,
           children: [

package/dist/index.mjs

@@ -5756,16 +5756,20 @@ function InsertTableDialog({ activeEditor }) {
 
 // src/rich-text-editor/plugins/ToolbarPlugin/index.tsx
 import { Fragment as Fragment8, jsx as jsx88, jsxs as jsxs66 } from "react/jsx-runtime";
-var blockTypeToBlockName = {
-  bullet: "Bulleted List",
-  check: "Check List",
-  code: "Code Block",
+var headingTypeToBlockName = {
   h1: "Heading 1",
   h2: "Heading 2",
   h3: "Heading 3",
   h4: "Heading 4",
   h5: "Heading 5",
-  h6: "Heading 6",
+  h6: "Heading 6"
+};
+var headings = Object.keys(headingTypeToBlockName);
+var blockTypeToBlockName = {
+  ...headingTypeToBlockName,
+  bullet: "Bulleted List",
+  check: "Check List",
+  code: "Code Block",
   number: "Numbered List",
   paragraph: "Normal",
   quote: "Quote"
@@ -5875,42 +5879,18 @@ function BlockFormatDropDown({
             })
           ]
         }),
-        /* @__PURE__ */ jsxs66(DropdownMenu.Item, {
-          onClick: () => formatHeading("h1"),
+        headings.map((headingSize) => /* @__PURE__ */ jsxs66(DropdownMenu.Item, {
+          onClick: () => formatHeading(headingSize),
           children: [
             /* @__PURE__ */ jsx88("i", {
-              className: `icon h1 border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px]  ${blockType === "h1" ? "opacity-100 bg-purple-50-900" : "opacity-60"}`
+              className: `icon ${headingSize} border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px]  ${blockType === headingSize ? "opacity-100 bg-purple-50-900" : "opacity-60"}`
             }),
             /* @__PURE__ */ jsx88("span", {
-              className: `${blockType === "h1" ? "font-bold" : "font-normal"} text-sm px-3 min-w-[150px]`,
-              children: "Heading 1"
+              className: `${blockType === headingSize ? "font-bold" : "font-normal"} text-sm px-3 min-w-[150px]`,
+              children: headingTypeToBlockName[headingSize]
             })
           ]
-        }),
-        /* @__PURE__ */ jsxs66(DropdownMenu.Item, {
-          onClick: () => formatHeading("h2"),
-          children: [
-            /* @__PURE__ */ jsx88("i", {
-              className: `icon h2 border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px] ${blockType === "h2" ? "opacity-100 bg-purple-50-900" : "opacity-60"}`
-            }),
-            /* @__PURE__ */ jsx88("span", {
-              className: `${blockType === "h2" ? "font-bold" : "font-normal"} text-sm px-3  min-w-[150px]`,
-              children: "Heading 2"
-            })
-          ]
-        }),
-        /* @__PURE__ */ jsxs66(DropdownMenu.Item, {
-          onClick: () => formatHeading("h3"),
-          children: [
-            /* @__PURE__ */ jsx88("i", {
-              className: `icon h3 border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px] ${blockType === "h3" ? "opacity-100 bg-purple-50-900" : "opacity-60"}`
-            }),
-            /* @__PURE__ */ jsx88("span", {
-              className: `${blockType === "h3" ? "font-bold" : "font-normal"} text-sm px-3  min-w-[150px]`,
-              children: "Heading 3"
-            })
-          ]
-        }),
+        }, headingSize)),
         /* @__PURE__ */ jsxs66(DropdownMenu.Item, {
           onClick: formatBulletList,
           children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/rich-text-editor/plugins/ToolbarPlugin/index.tsx

@@ -65,16 +65,21 @@ import { sanitizeUrl } from '../../utils/url';
 import ActionsPlugin from './../ActionsPlugin';
 import { InsertTableDialog } from './insert-table';
 
-const blockTypeToBlockName = {
-  bullet: 'Bulleted List',
-  check: 'Check List',
-  code: 'Code Block',
+const headingTypeToBlockName: Record<HeadingTagType, string> = {
   h1: 'Heading 1',
   h2: 'Heading 2',
   h3: 'Heading 3',
   h4: 'Heading 4',
   h5: 'Heading 5',
   h6: 'Heading 6',
+};
+const headings = Object.keys(headingTypeToBlockName) as HeadingTagType[];
+
+const blockTypeToBlockName = {
+  ...headingTypeToBlockName,
+  bullet: 'Bulleted List',
+  check: 'Check List',
+  code: 'Code Block',
   number: 'Numbered List',
   paragraph: 'Normal',
   quote: 'Quote',
@@ -204,36 +209,18 @@ function BlockFormatDropDown({
               Normal
             </span>
           </DropdownMenu.Item>
-          <DropdownMenu.Item onClick={() => formatHeading('h1')}>
-            <i
-              className={`icon h1 border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px]  ${
-                blockType === 'h1' ? 'opacity-100 bg-purple-50-900' : 'opacity-60'
-              }`}
-            />
-            <span className={`${blockType === 'h1' ? 'font-bold' : 'font-normal'} text-sm px-3 min-w-[150px]`}>
-              Heading 1
-            </span>
-          </DropdownMenu.Item>
-          <DropdownMenu.Item onClick={() => formatHeading('h2')}>
-            <i
-              className={`icon h2 border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px] ${
-                blockType === 'h2' ? 'opacity-100 bg-purple-50-900' : 'opacity-60'
-              }`}
-            />
-            <span className={`${blockType === 'h2' ? 'font-bold' : 'font-normal'} text-sm px-3  min-w-[150px]`}>
-              Heading 2
-            </span>
-          </DropdownMenu.Item>
-          <DropdownMenu.Item onClick={() => formatHeading('h3')}>
-            <i
-              className={`icon h3 border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px] ${
-                blockType === 'h3' ? 'opacity-100 bg-purple-50-900' : 'opacity-60'
-              }`}
-            />
-            <span className={`${blockType === 'h3' ? 'font-bold' : 'font-normal'} text-sm px-3  min-w-[150px]`}>
-              Heading 3
-            </span>
-          </DropdownMenu.Item>
+          {headings.map(headingSize => (
+            <DropdownMenu.Item key={headingSize} onClick={() => formatHeading(headingSize)}>
+              <i
+                className={`icon ${headingSize} border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px]  ${
+                  blockType === headingSize ? 'opacity-100 bg-purple-50-900' : 'opacity-60'
+                }`}
+              />
+              <span className={`${blockType === headingSize ? 'font-bold' : 'font-normal'} text-sm px-3 min-w-[150px]`}>
+                {headingTypeToBlockName[headingSize]}
+              </span>
+            </DropdownMenu.Item>
+          ))}
           <DropdownMenu.Item onClick={formatBulletList}>
             <i
               className={`icon bullet-list border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px] ${