alinea 2.0.0-preview.13 → 2.0.0-preview.14

package/dist/field/richtext/RichTextBlock.js

@@ -36,6 +36,7 @@ import { getType } from "alinea/core/Internal";
 import { Type } from "alinea/core/Type";
 import { slugify } from "alinea/core/util/Slugs";
 import { Badge } from "alinea/components";
+import { BlockSettings } from "alinea/dashboard/app/BlockSettings";
 import { BlockSheet, useBlockSheet } from "alinea/dashboard/app/BlockSheet";
 import { NodeEditor } from "alinea/dashboard/app/NodeEditor";
 import { ReactiveNode } from "alinea/dashboard/atoms/ReactiveNode";
@@ -51,13 +52,13 @@ import { memo, useMemo, useState } from "react";
 
 // src/field/richtext/RichTextBlock.module.css
 var RichTextBlock_default = {
+  "RichTextBlock-anchor": "alinea-RichTextBlock-anchor",
+  "RichTextBlockAnchor": "alinea-RichTextBlock-anchor",
   "RichTextBlock": "alinea-RichTextBlock",
-  "RichTextBlock-header": "alinea-RichTextBlock-header",
-  "RichTextBlockHeader": "alinea-RichTextBlock-header",
   "RichTextBlock-anchor-field": "alinea-RichTextBlock-anchor-field",
   "RichTextBlockAnchorField": "alinea-RichTextBlock-anchor-field",
-  "RichTextBlock-anchor": "alinea-RichTextBlock-anchor",
-  "RichTextBlockAnchor": "alinea-RichTextBlock-anchor"
+  "RichTextBlock-header": "alinea-RichTextBlock-header",
+  "RichTextBlockHeader": "alinea-RichTextBlock-header"
 };
 
 // src/field/richtext/RichTextBlock.tsx
@@ -173,42 +174,45 @@ var RichTextBlock = memo(function RichTextBlock2({
         /* @__PURE__ */ jsx(SheetTitle, { children: displayLabel || displayAnchor && `#${displayAnchor}` || label }),
         /* @__PURE__ */ jsx(SheetClose, { "aria-label": "Close block settings" })
       ] }),
-      /* @__PURE__ */ jsx(SheetBody, { children: /* @__PURE__ */ jsxs(SheetSection, { children: [
-        /* @__PURE__ */ jsx(
-          TextField,
-          {
-            label: "Label",
-            disabled: readOnly,
-            onValueChange: updateCustomLabel,
-            value: customLabel
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: styles.RichTextBlock.anchor(), children: [
-          /* @__PURE__ */ jsx("div", { className: styles.RichTextBlock.anchor.field(), children: /* @__PURE__ */ jsx(
-            SlugField,
+      /* @__PURE__ */ jsxs(SheetBody, { children: [
+        /* @__PURE__ */ jsxs(SheetSection, { children: [
+          /* @__PURE__ */ jsx(
+            TextField,
             {
-              fieldValue: anchor,
-              label: "Anchor",
-              isDisabled: readOnly,
-              onChange: updateAnchor,
-              source: customLabel
+              label: "Label",
+              disabled: readOnly,
+              onValueChange: updateCustomLabel,
+              value: customLabel
             }
-          ) }),
-          link && /* @__PURE__ */ jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsx(
-              TooltipTrigger,
+          ),
+          /* @__PURE__ */ jsxs("div", { className: styles.RichTextBlock.anchor(), children: [
+            /* @__PURE__ */ jsx("div", { className: styles.RichTextBlock.anchor.field(), children: /* @__PURE__ */ jsx(
+              SlugField,
               {
-                variant: "ghost",
-                size: "icon",
-                icon: IcRoundLink,
-                "aria-label": "Copy link to block",
-                onClick: () => navigator.clipboard.writeText(link)
+                fieldValue: anchor,
+                label: "Anchor",
+                isDisabled: readOnly,
+                onChange: updateAnchor,
+                source: customLabel
               }
-            ),
-            /* @__PURE__ */ jsx(TooltipContent, { children: "Copy link to block" })
+            ) }),
+            link && /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(
+                TooltipTrigger,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  icon: IcRoundLink,
+                  "aria-label": "Copy link to block",
+                  onClick: () => navigator.clipboard.writeText(link)
+                }
+              ),
+              /* @__PURE__ */ jsx(TooltipContent, { children: "Copy link to block" })
+            ] })
           ] })
-        ] })
-      ] }) }),
+        ] }),
+        /* @__PURE__ */ jsx(BlockSettings, { node, type, readOnly })
+      ] }),
       /* @__PURE__ */ jsx(SheetFooter, { children: /* @__PURE__ */ jsx(
         Button,
         {

package/dist/field/richtext/RichTextExtensions.js

@@ -2972,44 +2972,44 @@ import Small from "./extensions/Small.js";
 var RichTextExtensions_default = {
   "RichTextExtensions-bulletList": "alinea-RichTextExtensions-bulletList",
   "RichTextExtensionsBulletList": "alinea-RichTextExtensions-bulletList",
-  "RichTextExtensions-image": "alinea-RichTextExtensions-image",
-  "RichTextExtensionsImage": "alinea-RichTextExtensions-image",
-  "is-level6": "alinea-is-level6",
-  "isLevel6": "alinea-is-level6",
-  "is-level2": "alinea-is-level2",
-  "isLevel2": "alinea-is-level2",
   "is-level3": "alinea-is-level3",
   "isLevel3": "alinea-is-level3",
-  "RichTextExtensions-link": "alinea-RichTextExtensions-link",
-  "RichTextExtensionsLink": "alinea-RichTextExtensions-link",
-  "RichTextExtensions-blockquote": "alinea-RichTextExtensions-blockquote",
-  "RichTextExtensionsBlockquote": "alinea-RichTextExtensions-blockquote",
+  "is-level1": "alinea-is-level1",
+  "isLevel1": "alinea-is-level1",
+  "is-level6": "alinea-is-level6",
+  "isLevel6": "alinea-is-level6",
+  "RichTextExtensions-tableHeader": "alinea-RichTextExtensions-tableHeader",
+  "RichTextExtensionsTableHeader": "alinea-RichTextExtensions-tableHeader",
   "is-level4": "alinea-is-level4",
   "isLevel4": "alinea-is-level4",
-  "RichTextExtensions-rule": "alinea-RichTextExtensions-rule",
-  "RichTextExtensionsRule": "alinea-RichTextExtensions-rule",
   "is-level5": "alinea-is-level5",
   "isLevel5": "alinea-is-level5",
+  "RichTextExtensions-paragraph": "alinea-RichTextExtensions-paragraph",
+  "RichTextExtensionsParagraph": "alinea-RichTextExtensions-paragraph",
   "RichTextExtensions-orderedList": "alinea-RichTextExtensions-orderedList",
   "RichTextExtensionsOrderedList": "alinea-RichTextExtensions-orderedList",
-  "is-level1": "alinea-is-level1",
-  "isLevel1": "alinea-is-level1",
-  "RichTextExtensions-tableCell": "alinea-RichTextExtensions-tableCell",
-  "RichTextExtensionsTableCell": "alinea-RichTextExtensions-tableCell",
-  "RichTextExtensions-table": "alinea-RichTextExtensions-table",
-  "RichTextExtensionsTable": "alinea-RichTextExtensions-table",
   "RichTextExtensions-heading": "alinea-RichTextExtensions-heading",
   "RichTextExtensionsHeading": "alinea-RichTextExtensions-heading",
+  "RichTextExtensions-tableCell": "alinea-RichTextExtensions-tableCell",
+  "RichTextExtensionsTableCell": "alinea-RichTextExtensions-tableCell",
+  "RichTextExtensions-blockquote": "alinea-RichTextExtensions-blockquote",
+  "RichTextExtensionsBlockquote": "alinea-RichTextExtensions-blockquote",
   "RichTextExtensions-listItem": "alinea-RichTextExtensions-listItem",
   "RichTextExtensionsListItem": "alinea-RichTextExtensions-listItem",
   "RichTextExtensions-anchor": "alinea-RichTextExtensions-anchor",
   "RichTextExtensionsAnchor": "alinea-RichTextExtensions-anchor",
-  "RichTextExtensions-paragraph": "alinea-RichTextExtensions-paragraph",
-  "RichTextExtensionsParagraph": "alinea-RichTextExtensions-paragraph",
-  "RichTextExtensions-tableHeader": "alinea-RichTextExtensions-tableHeader",
-  "RichTextExtensionsTableHeader": "alinea-RichTextExtensions-tableHeader",
+  "RichTextExtensions-rule": "alinea-RichTextExtensions-rule",
+  "RichTextExtensionsRule": "alinea-RichTextExtensions-rule",
+  "RichTextExtensions-table": "alinea-RichTextExtensions-table",
+  "RichTextExtensionsTable": "alinea-RichTextExtensions-table",
+  "is-level2": "alinea-is-level2",
+  "isLevel2": "alinea-is-level2",
   "RichTextExtensions-highlight": "alinea-RichTextExtensions-highlight",
-  "RichTextExtensionsHighlight": "alinea-RichTextExtensions-highlight"
+  "RichTextExtensionsHighlight": "alinea-RichTextExtensions-highlight",
+  "RichTextExtensions-link": "alinea-RichTextExtensions-link",
+  "RichTextExtensionsLink": "alinea-RichTextExtensions-link",
+  "RichTextExtensions-image": "alinea-RichTextExtensions-image",
+  "RichTextExtensionsImage": "alinea-RichTextExtensions-image"
 };
 
 // src/field/richtext/RichTextExtensions.ts

package/dist/field/richtext/RichTextField.view.js

@@ -1,10 +1,10 @@
-import {
-  Placeholder
-} from "../../chunks/chunk-AC5ATYI3.js";
 import {
   EditorContent,
   useEditor
 } from "../../chunks/chunk-NP4M2257.js";
+import {
+  Placeholder
+} from "../../chunks/chunk-AC5ATYI3.js";
 import "../../chunks/chunk-A3XXZBOQ.js";
 import {
   useAtomValueRaw,
@@ -68,12 +68,12 @@ import {
 
 // src/field/richtext/RichTextField.module.css
 var RichTextField_default = {
-  "RichTextFieldCompactView": "alinea-RichTextFieldCompactView",
   "RichTextFieldView-empty": "alinea-RichTextFieldView-empty",
   "RichTextFieldViewEmpty": "alinea-RichTextFieldView-empty",
-  "RichTextFieldView": "alinea-RichTextFieldView",
   "RichTextFieldView-unsupportedBlock": "alinea-RichTextFieldView-unsupportedBlock",
-  "RichTextFieldViewUnsupportedBlock": "alinea-RichTextFieldView-unsupportedBlock"
+  "RichTextFieldViewUnsupportedBlock": "alinea-RichTextFieldView-unsupportedBlock",
+  "RichTextFieldView": "alinea-RichTextFieldView",
+  "RichTextFieldCompactView": "alinea-RichTextFieldCompactView"
 };
 
 // src/field/richtext/RichTextField.view.tsx

package/dist/field/richtext/RichTextInsertMenu.js

@@ -1,3 +1,6 @@
+import {
+  useCurrentEditor
+} from "../../chunks/chunk-NP4M2257.js";
 import {
   CellSelection,
   FloatingMenuPlugin,
@@ -11,9 +14,6 @@ import {
   shift,
   size
 } from "../../chunks/chunk-PAYSVIYI.js";
-import {
-  useCurrentEditor
-} from "../../chunks/chunk-NP4M2257.js";
 import {
   Extension,
   NodeSelection,
@@ -744,9 +744,9 @@ import { useMemo, useState as useState2 } from "react";
 
 // src/field/richtext/RichTextInsertMenu.module.css
 var RichTextInsertMenu_default = {
+  "RichTextInsertMenu": "alinea-RichTextInsertMenu",
   "RichTextInsertMenu-popover": "alinea-RichTextInsertMenu-popover",
-  "RichTextInsertMenuPopover": "alinea-RichTextInsertMenu-popover",
-  "RichTextInsertMenu": "alinea-RichTextInsertMenu"
+  "RichTextInsertMenuPopover": "alinea-RichTextInsertMenu-popover"
 };
 
 // src/field/richtext/RichTextInsertMenu.tsx

package/dist/field/richtext/RichTextToolbar.js

@@ -11,6 +11,7 @@ import "../../chunks/chunk-CQ52GEHY.js";
 // src/field/richtext/RichTextToolbar.tsx
 import {
   DropdownMenu,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
@@ -159,7 +160,16 @@ function renderEntry(name, entry, context, menu, ownerId) {
         )
       ] }, name);
     return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx(DropdownMenuTrigger, { variant: "ghost", icon, children: label2 }),
+      /* @__PURE__ */ jsx(
+        DropdownMenuTrigger,
+        {
+          variant: "ghost",
+          icon,
+          "aria-label": label2 ? void 0 : ariaLabel,
+          active: entry.active?.(context),
+          children: label2
+        }
+      ),
       /* @__PURE__ */ jsx(
         DropdownMenuContent,
         {
@@ -179,6 +189,21 @@ function renderEntry(name, entry, context, menu, ownerId) {
   }
   const label = resolve(entry.label, context);
   const title = entry.title ?? text(label) ?? humanize(name);
+  if (menu && entry.active) {
+    return /* @__PURE__ */ jsx(
+      DropdownMenuCheckboxItem,
+      {
+        icon: entry.icon?.(context),
+        textValue: title,
+        disabled: entry.disabled?.(context),
+        checked: entry.active(context),
+        onCheckedChange: () => entry.onSelect(context),
+        closeOnSelect: true,
+        children: label ?? title
+      },
+      name
+    );
+  }
   if (menu) {
     return /* @__PURE__ */ jsx(
       DropdownMenuItem,

package/dist/field/richtext/Toolbar.d.ts

@@ -17,6 +17,8 @@ export interface ToolbarButton {
 export interface ToolbarMenu {
     icon?: (ctx: RichTextToolbarContext) => IconType;
     label?: ReactNode | ((ctx: RichTextToolbarContext) => ReactNode);
+    /** Marks the menu trigger, eg. while a value other than the default applies */
+    active?: (ctx: RichTextToolbarContext) => boolean;
     items: ToolbarConfig | ((ctx: RichTextToolbarContext) => ToolbarConfig);
 }
 export interface ToolbarGroup {
@@ -41,6 +43,7 @@ export interface RichTextToolbarContext {
 export declare const headings: {
     icon: () => import("react").JSX.Element;
     label({ editor }: RichTextToolbarContext): string;
+    active: ({ editor }: RichTextToolbarContext) => boolean;
     items: {
         styles: {
             group: {
@@ -50,22 +53,27 @@ export declare const headings: {
                 };
                 h1: {
                     label: () => import("react").JSX.Element;
+                    active: ({ editor }: RichTextToolbarContext) => boolean;
                     onSelect: ({ exec }: RichTextToolbarContext) => boolean;
                 };
                 h2: {
                     label: () => import("react").JSX.Element;
+                    active: ({ editor }: RichTextToolbarContext) => boolean;
                     onSelect: ({ exec }: RichTextToolbarContext) => boolean;
                 };
                 h3: {
                     label: () => import("react").JSX.Element;
+                    active: ({ editor }: RichTextToolbarContext) => boolean;
                     onSelect: ({ exec }: RichTextToolbarContext) => boolean;
                 };
                 h4: {
                     label: () => import("react").JSX.Element;
+                    active: ({ editor }: RichTextToolbarContext) => boolean;
                     onSelect: ({ exec }: RichTextToolbarContext) => boolean;
                 };
                 h5: {
                     label: () => import("react").JSX.Element;
+                    active: ({ editor }: RichTextToolbarContext) => boolean;
                     onSelect: ({ exec }: RichTextToolbarContext) => boolean;
                 };
             };
@@ -130,11 +138,11 @@ export declare const formatting: {
 };
 export declare const alignment: {
     icon({ editor }: RichTextToolbarContext): import("react").JSX.Element;
+    active: ({ editor }: RichTextToolbarContext) => boolean;
     items: {
         left: {
             icon: () => import("react").JSX.Element;
             label: string;
-            active: ({ editor }: RichTextToolbarContext) => boolean;
             onSelect: ({ exec }: RichTextToolbarContext) => boolean;
         };
         center: {

package/dist/field/richtext/Toolbar.js

@@ -45,14 +45,16 @@ var styleLabels = {
   h4: "Heading 4",
   h5: "Heading 5"
 };
+var headingLevels = [1, 2, 3, 4, 5];
 var headings = {
   icon: () => /* @__PURE__ */ jsx(IcRoundUnfoldMore, {}),
   label({ editor }) {
-    const level = [1, 2, 3, 4, 5].find(
+    const level = headingLevels.find(
       (level2) => editor.isActive("heading", { level: level2 })
     );
     return level ? styleLabels[`h${level}`] : styleLabels.paragraph;
   },
+  active: ({ editor }) => editor.isActive("heading"),
   items: {
     styles: {
       group: {
@@ -62,22 +64,27 @@ var headings = {
         },
         h1: {
           label: () => /* @__PURE__ */ jsx("h1", { children: "Heading 1" }),
+          active: ({ editor }) => editor.isActive("heading", { level: 1 }),
           onSelect: ({ exec }) => exec().setHeading({ level: 1 }).run()
         },
         h2: {
           label: () => /* @__PURE__ */ jsx("h2", { children: "Heading 2" }),
+          active: ({ editor }) => editor.isActive("heading", { level: 2 }),
           onSelect: ({ exec }) => exec().setHeading({ level: 2 }).run()
         },
         h3: {
           label: () => /* @__PURE__ */ jsx("h3", { children: "Heading 3" }),
+          active: ({ editor }) => editor.isActive("heading", { level: 3 }),
           onSelect: ({ exec }) => exec().setHeading({ level: 3 }).run()
         },
         h4: {
           label: () => /* @__PURE__ */ jsx("h4", { children: "Heading 4" }),
+          active: ({ editor }) => editor.isActive("heading", { level: 4 }),
           onSelect: ({ exec }) => exec().setHeading({ level: 4 }).run()
         },
         h5: {
           label: () => /* @__PURE__ */ jsx("h5", { children: "Heading 5" }),
+          active: ({ editor }) => editor.isActive("heading", { level: 5 }),
           onSelect: ({ exec }) => exec().setHeading({ level: 5 }).run()
         }
       }
@@ -233,11 +240,14 @@ var alignment = {
     if (editor.isActive({ textAlign: "justify" })) return /* @__PURE__ */ jsx(IcAlignJustify, {});
     return /* @__PURE__ */ jsx(IcAlignLeft, {});
   },
+  // Left is the default alignment, it needs no active state
+  active: ({ editor }) => ["center", "right", "justify"].some(
+    (textAlign) => editor.isActive({ textAlign })
+  ),
   items: {
     left: {
       icon: () => /* @__PURE__ */ jsx(IcAlignLeft, {}),
       label: "Left",
-      active: ({ editor }) => editor.isActive({ textAlign: "left" }),
       onSelect: ({ exec }) => exec().setTextAlign("left").run()
     },
     center: {

package/dist/field/select/SelectField.view.js

@@ -20,6 +20,7 @@ function SelectFieldView({ field }) {
       error,
       disabled: options.readOnly,
       required: options.required,
+      clearable: !options.required,
       "aria-label": options.inline ? options.label : void 0,
       label: options.inline ? void 0 : options.label,
       shared: options.shared,