@homecode/ui 5.20.20 → 5.20.21

package/dist/esm/index.js

@@ -24,7 +24,7 @@ export { Flex } from './src/components/Flex/Flex.js';
 export { FoldedLine } from './src/components/FoldedLine/FoldedLine.js';
 export { FoldedLineAction, FoldedLineActionsProvider, useFoldedLineActionsRegister } from './src/components/FoldedLine/FoldedLineActionsContext.js';
 export { Form } from './src/components/Form/Form.js';
-export { FormattedText } from './src/components/FormattedText/FormattedText.js';
+export { FormattedText, findJsonEndExclusive } from './src/components/FormattedText/FormattedText.js';
 export { Gap } from './src/components/Gap/Gap.js';
 export { Gallery, normalizeGalleryItem } from './src/components/Gallery/Gallery.js';
 export { GridLayout } from './src/components/GridLayout/GridLayout.js';

package/dist/esm/src/components/FormattedText/FormattedText.js

@@ -108,7 +108,24 @@ function applyInjectors(text, injectors) {
     });
     return result;
 }
-function FormattedText({ text, className, onButtonClick, }) {
+function FormattedText({ text, className, onButtonClick, quotes, injectors, breaks = true, }) {
+    // Without `<br>`s the text keeps its own newlines (pre-wrap), so a block, such
+    // as a table, swallows the blank lines after it instead of showing them.
+    const blankLinesAfter = (content, from) => breaks ? 0 : content.slice(from).match(/^\s*/)[0].length;
+    /** A run of `> ` lines, grayed with a bar down its left side. */
+    const injectQuote = (content) => {
+        const matches = content.match(/(?:^|\n)(>[^\n]*(?:\n>[^\n]*)*)(?:\n|$)/);
+        if (!matches)
+            return null;
+        const lines = matches[1]
+            .split('\n')
+            .map(line => line.replace(/^>[ \t]?/, ''));
+        return {
+            elem: (jsx("div", { className: S.quote, "data-quote": true, children: lines.join('\n') })),
+            index: matches.index,
+            length: matches[0].length,
+        };
+    };
     const injectLines = (content) => {
         const matches = content.match(/(^|\n)---[ \t]*(?:\n|$)/);
         if (!matches)
@@ -266,6 +283,7 @@ function FormattedText({ text, className, onButtonClick, }) {
     const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
     const processCellContent = (value, depth = 0) => applyInjectors(value, [
         injectCodeBlock,
+        ...(injectors ?? []),
         injectPrettyJson,
         ...(depth === 0
             ? [
@@ -291,7 +309,10 @@ function FormattedText({ text, className, onButtonClick, }) {
         injectButtons,
     ]);
     const injectHeading = (content) => {
-        const matches = content.match(/(^|\n)(#{1,6})\s+([^\n]+)/);
+        // Without `<br>`s the text keeps its own newlines (pre-wrap), so a heading,
+        // which is a block, swallows the blank lines around it instead of leaving
+        // an extra empty line.
+        const matches = content.match(breaks ? /(^|\n)(#{1,6})\s+([^\n]+)/ : /(^|\n+)(#{1,6})[ \t]+([^\n]+)\n*/);
         if (!matches)
             return null;
         const Tag = headingTags[Math.min(matches[2].length, 6) - 1];
@@ -350,13 +371,18 @@ function FormattedText({ text, className, onButtonClick, }) {
         return {
             elem: (jsx(Table, { size: "s", variant: "plain", columns: columns, data: tableData, className: S.table })),
             index: matches.index + (matches[1]?.length || 0),
-            length: matches[0].length - (matches[1]?.length || 0),
+            length: matches[0].length -
+                (matches[1]?.length || 0) +
+                blankLinesAfter(content, matches.index + matches[0].length),
         };
     };
     return (jsx("div", { className: className, children: applyInjectors(text, [
             injectTables,
             injectCodeBlock,
+            ...(injectors ?? []),
             injectPrettyJson,
+            // After code, so a `> ` line inside a code block stays code.
+            ...(quotes ? [injectQuote] : []),
             injectHeading,
             injectLines,
             injectLinks,
@@ -365,8 +391,8 @@ function FormattedText({ text, className, onButtonClick, }) {
             injectBullet,
             injectNumbered,
             injectButtons,
-            injectBreaks,
+            ...(breaks ? [injectBreaks] : []),
         ]) }));
 }
 
-export { FormattedText, hrefForFormattedLink };
+export { FormattedText, findJsonEndExclusive, hrefForFormattedLink };

package/dist/esm/src/components/FormattedText/FormattedText.styl.js

@@ -1,5 +1,5 @@
-var css_248z = ".FormattedText_bullet__vbqlq{display:inline-block;margin-bottom:2px;margin-left:var(--p-2);margin-right:2px}.FormattedText_bullet__vbqlq:before{background-color:var(--accent-color);border-radius:50%;content:\"\";display:block;height:6px;margin:0 4px;width:6px}.FormattedText_numberedIndex__rZ6Kt{font-feature-settings:\"tnum\";color:var(--accent-color);display:inline-block;font-variant-numeric:tabular-nums;margin-left:var(--p-2);margin-right:6px;min-width:1.25em}.FormattedText_line__c2bmE{background-color:var(--accent-color-alpha-200);border-radius:2px;height:2px;margin:var(--p-2) 0;width:100%}.FormattedText_codeBlock__Xrbvn,.FormattedText_codeInline__jCbNL{background-color:var(--decent-color-alpha-400);border-radius:var(--p-2);box-shadow:0 1px 1px var(--accent-color-alpha-50),inset 0 1px 1px var(--decent-color-alpha-500);font-family:monospace;-webkit-user-select:text;-moz-user-select:text;user-select:text}.FormattedText_codeInline__jCbNL{border-radius:3px;display:inline;font-size:90%;padding:0 4px}.FormattedText_codeBlock__Xrbvn,.FormattedText_jsonPre__qOGmo{display:block;font-size:90%;margin:var(--p-2) 0;overflow-x:auto;padding:var(--p-2);white-space:pre-wrap}.FormattedText_jsonPre__qOGmo{background-color:var(--decent-color-alpha-300);border-radius:var(--p-2);box-shadow:0 1px 1px var(--accent-color-alpha-50),inset 0 1px 1px var(--accent-color-alpha-50);font-family:monospace;max-width:100%;-webkit-user-select:text;-moz-user-select:text;user-select:text}.FormattedText_table__ipMMS{margin-bottom:10px}";
-var S = {"bullet":"FormattedText_bullet__vbqlq","numberedIndex":"FormattedText_numberedIndex__rZ6Kt","line":"FormattedText_line__c2bmE","codeInline":"FormattedText_codeInline__jCbNL","codeBlock":"FormattedText_codeBlock__Xrbvn","jsonPre":"FormattedText_jsonPre__qOGmo","table":"FormattedText_table__ipMMS"};
+var css_248z = ".FormattedText_bullet__vbqlq{display:inline-block;margin-bottom:2px;margin-left:var(--p-2);margin-right:2px}.FormattedText_bullet__vbqlq:before{background-color:var(--accent-color);border-radius:50%;content:\"\";display:block;height:6px;margin:0 4px;width:6px}.FormattedText_numberedIndex__rZ6Kt{font-feature-settings:\"tnum\";color:var(--accent-color);display:inline-block;font-variant-numeric:tabular-nums;margin-left:var(--p-2);margin-right:6px;min-width:1.25em}.FormattedText_quote__BBm-M{color:var(--accent-color-alpha-600);font-size:85%;margin:0 0 var(--p-1);padding:2px 0 2px calc(4px + var(--p-2));position:relative;white-space:pre-wrap}.FormattedText_quote__BBm-M:before{background-color:var(--accent-color);border-radius:2px;bottom:2px;content:\"\";left:2px;opacity:.3;position:absolute;top:2px;width:4px}.FormattedText_line__c2bmE{background-color:var(--accent-color-alpha-200);border-radius:2px;height:2px;margin:var(--p-2) 0;width:100%}.FormattedText_codeBlock__Xrbvn,.FormattedText_codeInline__jCbNL{background-color:var(--decent-color-alpha-400);border-radius:var(--p-2);box-shadow:0 1px 1px var(--accent-color-alpha-50),inset 0 1px 1px var(--decent-color-alpha-500);font-family:monospace;-webkit-user-select:text;-moz-user-select:text;user-select:text}.FormattedText_codeInline__jCbNL{border-radius:3px;display:inline;font-size:90%;padding:0 4px}.FormattedText_codeBlock__Xrbvn,.FormattedText_jsonPre__qOGmo{display:block;font-size:90%;margin:var(--p-2) 0;overflow-x:auto;padding:var(--p-2);white-space:pre-wrap}.FormattedText_jsonPre__qOGmo{background-color:var(--decent-color-alpha-300);border-radius:var(--p-2);box-shadow:0 1px 1px var(--accent-color-alpha-50),inset 0 1px 1px var(--accent-color-alpha-50);font-family:monospace;max-width:100%;-webkit-user-select:text;-moz-user-select:text;user-select:text}.FormattedText_table__ipMMS{margin-bottom:10px}";
+var S = {"bullet":"FormattedText_bullet__vbqlq","numberedIndex":"FormattedText_numberedIndex__rZ6Kt","quote":"FormattedText_quote__BBm-M","line":"FormattedText_line__c2bmE","codeInline":"FormattedText_codeInline__jCbNL","codeBlock":"FormattedText_codeBlock__Xrbvn","jsonPre":"FormattedText_jsonPre__qOGmo","table":"FormattedText_table__ipMMS"};
             if (typeof document !== 'undefined') {
               var __uilibHead = document.head || document.getElementsByTagName('head')[0];
               if (__uilibHead) {

package/dist/esm/src/components/PromptComposer/promptComposerPlaceholder.js

@@ -0,0 +1,10 @@
+/**
+ * Placeholder text for the composer's empty paragraphs. Only a wholly empty
+ * composer shows it: a quote or list with an empty line after it already is
+ * content, so it keeps no hint.
+ */
+function promptComposerPlaceholder(text) {
+    return ({ editor }) => (editor.isEmpty ? text : '');
+}
+
+export { promptComposerPlaceholder };

package/dist/esm/src/components/PromptComposer/usePromptComposerEditor.js

@@ -3,6 +3,7 @@ import { Placeholder } from '@tiptap/extensions';
 import { useEditor } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import S from './PromptComposer.styl.js';
+import { promptComposerPlaceholder } from './promptComposerPlaceholder.js';
 import { createPromptBlocksExtension, isInPromptBlock } from '../../tiptap/prompt-blocks/createPromptBlocksExtension.js';
 import { promptBlocksDoc } from '../../tiptap/prompt-blocks/promptBlocksText.js';
 import { createLinkHighlightExtension } from '../../tiptap/link-highlight/createLinkHighlightExtension.js';
@@ -110,7 +111,7 @@ function usePromptComposerEditor({ disabled, placeholder, slashCommandItems, sla
             }),
             NonInclusiveLink,
             Placeholder.configure({
-                placeholder: placeholderText,
+                placeholder: promptComposerPlaceholder(placeholderText),
                 showOnlyWhenEditable: true,
                 emptyNodeClass: S.promptComposerEmptyNode,
             }),

package/dist/esm/types/src/components/FormattedText/FormattedText.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import type { FormattedTextProps } from './FormattedText.types';
 export declare function hrefForFormattedLink(url: string): string;
-export declare function FormattedText({ text, className, onButtonClick, }: FormattedTextProps): React.JSX.Element;
+export declare function findJsonEndExclusive(content: string, start: number): number;
+export declare function FormattedText({ text, className, onButtonClick, quotes, injectors, breaks, }: FormattedTextProps): React.JSX.Element;

package/dist/esm/types/src/components/FormattedText/FormattedText.types.d.ts

@@ -1,3 +1,10 @@
+import type React from 'react';
+export type InjectionResult = {
+    elem: React.ReactNode;
+    index: number;
+    length: number;
+} | null;
+export type Injector = (content: string) => InjectionResult;
 export type FormattedTextProps = {
     text: string;
     className?: string;
@@ -5,4 +12,7 @@ export type FormattedTextProps = {
         text: string;
         [name: string]: string;
     }) => void;
+    quotes?: boolean;
+    injectors?: Injector[];
+    breaks?: boolean;
 };

package/dist/esm/types/src/components/FormattedText/index.d.ts

@@ -1,2 +1,2 @@
-export { FormattedText } from './FormattedText';
-export type { FormattedTextProps } from './FormattedText.types';
+export { FormattedText, findJsonEndExclusive } from './FormattedText';
+export type { FormattedTextProps, InjectionResult, Injector, } from './FormattedText.types';

package/dist/esm/types/src/components/PromptComposer/promptComposerPlaceholder.d.ts

@@ -0,0 +1,9 @@
+import type { Editor } from '@tiptap/core';
+/**
+ * Placeholder text for the composer's empty paragraphs. Only a wholly empty
+ * composer shows it: a quote or list with an empty line after it already is
+ * content, so it keeps no hint.
+ */
+export declare function promptComposerPlaceholder(text: string): ({ editor }: {
+    editor: Editor;
+}) => string;

package/dist/esm/types/src/components/PromptComposer/promptComposerPlaceholder.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "5.20.20",
+  "version": "5.20.21",
   "description": "React UI components library",
   "scripts": {
     "tests": "jest",