@crisp-ui-kit/crisp 0.11.0 → 0.12.0

package/dist/cjs/product/richtext/richtext.js

@@ -45,7 +45,7 @@ const exec = (cmd, value) => document.execCommand(cmd, false, value);
  * that appears over a text selection. Built on contentEditable, dependency-free.
  * Uncontrolled: seed with `defaultTitle`/`defaultHtml`, read via `onChange`.
  */
-function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlaceholder = "Untitled", placeholder = "Start writing, or press a toolbar button…", onChange, className, titleLabel = "Title", bodyLabel = "Note body", }) {
+function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlaceholder = "Untitled", placeholder = "Start writing, or press a toolbar button…", onChange, className, titleLabel = "Title", bodyLabel = "Note body", linkPromptLabel = "Link URL", }) {
     const titleRef = React.useRef(null);
     const bodyRef = React.useRef(null);
     const [bar, setBar] = React.useState(null);
@@ -128,13 +128,19 @@ function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlaceholder
         run("formatBlock", blockTag() === tag ? "p" : tag);
     };
     const addLink = () => {
-        const url = window.prompt("Link URL");
+        const url = window.prompt(linkPromptLabel);
         if (url)
             run("createLink", url);
     };
     // mousedown on the toolbar must not clear the selection
     const keepSel = (e) => e.preventDefault();
-    const tool = (key, label, icon, onClick) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "rte-tool", "aria-label": label, "aria-pressed": !!active[key], "data-active": active[key] ? "" : undefined, onMouseDown: keepSel, onClick: onClick, children: icon }));
+    /**
+     * `toggles` is false for a tool that performs an action rather than carrying
+     * a state. Link opens a prompt and has no "on" — giving it `aria-pressed`
+     * announces an un-pressed toggle that can never be pressed, which tells a
+     * screen-reader user there is a state here that does not exist.
+     */
+    const tool = (key, label, icon, onClick, toggles = true) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "rte-tool", "aria-label": label, "aria-pressed": toggles ? !!active[key] : undefined, "data-active": active[key] ? "" : undefined, onMouseDown: keepSel, onClick: onClick, children: icon }));
     const ic = { size: 15, strokeWidth: 2 };
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, richtext_recipe_1.richtextRecipe)({ className }), children: [(0, jsx_runtime_1.jsx)("div", { ref: titleRef, className: "rte-title", contentEditable: true, suppressContentEditableWarning: true, role: "textbox", tabIndex: 0, "aria-label": titleLabel, "data-placeholder": titlePlaceholder, onInput: () => {
                     syncEmpty(titleRef.current);
@@ -142,6 +148,6 @@ function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlaceholder
                 } }), (0, jsx_runtime_1.jsx)("div", { ref: bodyRef, className: "rte-body", contentEditable: true, suppressContentEditableWarning: true, role: "textbox", tabIndex: 0, "aria-multiline": "true", "aria-label": bodyLabel, "data-placeholder": placeholder, onInput: () => {
                     syncEmpty(bodyRef.current);
                     emit();
-                }, onMouseUp: updateBar, onKeyUp: updateBar }), bar && ((0, jsx_runtime_1.jsxs)("div", { className: "rte-toolbar", style: { left: bar.x, top: bar.y }, children: [tool("bold", "Bold", (0, jsx_runtime_1.jsx)(lucide_react_1.Bold, { ...ic }), () => run("bold")), tool("italic", "Italic", (0, jsx_runtime_1.jsx)(lucide_react_1.Italic, { ...ic }), () => run("italic")), tool("underline", "Underline", (0, jsx_runtime_1.jsx)(lucide_react_1.Underline, { ...ic }), () => run("underline")), tool("strikeThrough", "Strikethrough", (0, jsx_runtime_1.jsx)(lucide_react_1.Strikethrough, { ...ic }), () => run("strikeThrough")), tool("link", "Link", (0, jsx_runtime_1.jsx)(lucide_react_1.Link2, { ...ic }), addLink), (0, jsx_runtime_1.jsx)("span", { className: "rte-tool-sep" }), tool("h1", "Heading 1", (0, jsx_runtime_1.jsx)(lucide_react_1.Heading1, { ...ic }), () => toggleBlock("h1")), tool("h2", "Heading 2", (0, jsx_runtime_1.jsx)(lucide_react_1.Heading2, { ...ic }), () => toggleBlock("h2")), tool("ul", "Bullet list", (0, jsx_runtime_1.jsx)(lucide_react_1.List, { ...ic }), () => run("insertUnorderedList")), tool("ol", "Numbered list", (0, jsx_runtime_1.jsx)(lucide_react_1.ListOrdered, { ...ic }), () => run("insertOrderedList")), tool("blockquote", "Quote", (0, jsx_runtime_1.jsx)(lucide_react_1.Quote, { ...ic }), () => toggleBlock("blockquote"))] }))] }));
+                }, onMouseUp: updateBar, onKeyUp: updateBar }), bar && ((0, jsx_runtime_1.jsxs)("div", { className: "rte-toolbar", style: { left: bar.x, top: bar.y }, children: [tool("bold", "Bold", (0, jsx_runtime_1.jsx)(lucide_react_1.Bold, { ...ic }), () => run("bold")), tool("italic", "Italic", (0, jsx_runtime_1.jsx)(lucide_react_1.Italic, { ...ic }), () => run("italic")), tool("underline", "Underline", (0, jsx_runtime_1.jsx)(lucide_react_1.Underline, { ...ic }), () => run("underline")), tool("strikeThrough", "Strikethrough", (0, jsx_runtime_1.jsx)(lucide_react_1.Strikethrough, { ...ic }), () => run("strikeThrough")), tool("link", "Link", (0, jsx_runtime_1.jsx)(lucide_react_1.Link2, { ...ic }), addLink, false), (0, jsx_runtime_1.jsx)("span", { className: "rte-tool-sep" }), tool("h1", "Heading 1", (0, jsx_runtime_1.jsx)(lucide_react_1.Heading1, { ...ic }), () => toggleBlock("h1")), tool("h2", "Heading 2", (0, jsx_runtime_1.jsx)(lucide_react_1.Heading2, { ...ic }), () => toggleBlock("h2")), tool("ul", "Bullet list", (0, jsx_runtime_1.jsx)(lucide_react_1.List, { ...ic }), () => run("insertUnorderedList")), tool("ol", "Numbered list", (0, jsx_runtime_1.jsx)(lucide_react_1.ListOrdered, { ...ic }), () => run("insertOrderedList")), tool("blockquote", "Quote", (0, jsx_runtime_1.jsx)(lucide_react_1.Quote, { ...ic }), () => toggleBlock("blockquote"))] }))] }));
 }
 RichTextEditor.displayName = "RichTextEditor";

package/dist/esm/product/richtext/richtext.js

@@ -9,7 +9,7 @@ const exec = (cmd, value) => document.execCommand(cmd, false, value);
  * that appears over a text selection. Built on contentEditable, dependency-free.
  * Uncontrolled: seed with `defaultTitle`/`defaultHtml`, read via `onChange`.
  */
-export function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlaceholder = "Untitled", placeholder = "Start writing, or press a toolbar button…", onChange, className, titleLabel = "Title", bodyLabel = "Note body", }) {
+export function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlaceholder = "Untitled", placeholder = "Start writing, or press a toolbar button…", onChange, className, titleLabel = "Title", bodyLabel = "Note body", linkPromptLabel = "Link URL", }) {
     const titleRef = React.useRef(null);
     const bodyRef = React.useRef(null);
     const [bar, setBar] = React.useState(null);
@@ -92,13 +92,19 @@ export function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlace
         run("formatBlock", blockTag() === tag ? "p" : tag);
     };
     const addLink = () => {
-        const url = window.prompt("Link URL");
+        const url = window.prompt(linkPromptLabel);
         if (url)
             run("createLink", url);
     };
     // mousedown on the toolbar must not clear the selection
     const keepSel = (e) => e.preventDefault();
-    const tool = (key, label, icon, onClick) => (_jsx("button", { type: "button", className: "rte-tool", "aria-label": label, "aria-pressed": !!active[key], "data-active": active[key] ? "" : undefined, onMouseDown: keepSel, onClick: onClick, children: icon }));
+    /**
+     * `toggles` is false for a tool that performs an action rather than carrying
+     * a state. Link opens a prompt and has no "on" — giving it `aria-pressed`
+     * announces an un-pressed toggle that can never be pressed, which tells a
+     * screen-reader user there is a state here that does not exist.
+     */
+    const tool = (key, label, icon, onClick, toggles = true) => (_jsx("button", { type: "button", className: "rte-tool", "aria-label": label, "aria-pressed": toggles ? !!active[key] : undefined, "data-active": active[key] ? "" : undefined, onMouseDown: keepSel, onClick: onClick, children: icon }));
     const ic = { size: 15, strokeWidth: 2 };
     return (_jsxs("div", { className: richtextRecipe({ className }), children: [_jsx("div", { ref: titleRef, className: "rte-title", contentEditable: true, suppressContentEditableWarning: true, role: "textbox", tabIndex: 0, "aria-label": titleLabel, "data-placeholder": titlePlaceholder, onInput: () => {
                     syncEmpty(titleRef.current);
@@ -106,6 +112,6 @@ export function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlace
                 } }), _jsx("div", { ref: bodyRef, className: "rte-body", contentEditable: true, suppressContentEditableWarning: true, role: "textbox", tabIndex: 0, "aria-multiline": "true", "aria-label": bodyLabel, "data-placeholder": placeholder, onInput: () => {
                     syncEmpty(bodyRef.current);
                     emit();
-                }, onMouseUp: updateBar, onKeyUp: updateBar }), bar && (_jsxs("div", { className: "rte-toolbar", style: { left: bar.x, top: bar.y }, children: [tool("bold", "Bold", _jsx(Bold, { ...ic }), () => run("bold")), tool("italic", "Italic", _jsx(Italic, { ...ic }), () => run("italic")), tool("underline", "Underline", _jsx(Underline, { ...ic }), () => run("underline")), tool("strikeThrough", "Strikethrough", _jsx(Strikethrough, { ...ic }), () => run("strikeThrough")), tool("link", "Link", _jsx(Link2, { ...ic }), addLink), _jsx("span", { className: "rte-tool-sep" }), tool("h1", "Heading 1", _jsx(Heading1, { ...ic }), () => toggleBlock("h1")), tool("h2", "Heading 2", _jsx(Heading2, { ...ic }), () => toggleBlock("h2")), tool("ul", "Bullet list", _jsx(List, { ...ic }), () => run("insertUnorderedList")), tool("ol", "Numbered list", _jsx(ListOrdered, { ...ic }), () => run("insertOrderedList")), tool("blockquote", "Quote", _jsx(Quote, { ...ic }), () => toggleBlock("blockquote"))] }))] }));
+                }, onMouseUp: updateBar, onKeyUp: updateBar }), bar && (_jsxs("div", { className: "rte-toolbar", style: { left: bar.x, top: bar.y }, children: [tool("bold", "Bold", _jsx(Bold, { ...ic }), () => run("bold")), tool("italic", "Italic", _jsx(Italic, { ...ic }), () => run("italic")), tool("underline", "Underline", _jsx(Underline, { ...ic }), () => run("underline")), tool("strikeThrough", "Strikethrough", _jsx(Strikethrough, { ...ic }), () => run("strikeThrough")), tool("link", "Link", _jsx(Link2, { ...ic }), addLink, false), _jsx("span", { className: "rte-tool-sep" }), tool("h1", "Heading 1", _jsx(Heading1, { ...ic }), () => toggleBlock("h1")), tool("h2", "Heading 2", _jsx(Heading2, { ...ic }), () => toggleBlock("h2")), tool("ul", "Bullet list", _jsx(List, { ...ic }), () => run("insertUnorderedList")), tool("ol", "Numbered list", _jsx(ListOrdered, { ...ic }), () => run("insertOrderedList")), tool("blockquote", "Quote", _jsx(Quote, { ...ic }), () => toggleBlock("blockquote"))] }))] }));
 }
 RichTextEditor.displayName = "RichTextEditor";

package/dist/types/product/richtext/richtext.d.ts

@@ -8,6 +8,8 @@ export type RichTextEditorProps = {
     titleLabel?: string;
     /** Accessible name for the body editor. */
     bodyLabel?: string;
+    /** Message shown when asking for a link URL. */
+    linkPromptLabel?: string;
     defaultTitle?: string;
     /** Initial body HTML. */
     defaultHtml?: string;
@@ -22,7 +24,7 @@ export type RichTextEditorProps = {
  * that appears over a text selection. Built on contentEditable, dependency-free.
  * Uncontrolled: seed with `defaultTitle`/`defaultHtml`, read via `onChange`.
  */
-export declare function RichTextEditor({ defaultTitle, defaultHtml, titlePlaceholder, placeholder, onChange, className, titleLabel, bodyLabel, }: RichTextEditorProps): React.JSX.Element;
+export declare function RichTextEditor({ defaultTitle, defaultHtml, titlePlaceholder, placeholder, onChange, className, titleLabel, bodyLabel, linkPromptLabel, }: RichTextEditorProps): React.JSX.Element;
 export declare namespace RichTextEditor {
     var displayName: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",