@estiva-app/ui 0.64.0 → 0.65.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.64.0",
+  "version": "0.65.0",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",

package/registry.json

@@ -4,7 +4,7 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.64.0",
+    "packageVersion": "0.65.0",
     "exports": 140,
     "typeExports": 145,
     "files": null
@@ -5415,7 +5415,7 @@
       "looks": [
         "[&_:is(ul,ol)]:pl-5 [&_li>p]:m-0 [&_li]:break-words [&_li]:marker:text-text-secondary [&_ol]:list-decimal [&_ul]:list-disc",
         "[&_blockquote>p]:m-0 [&_blockquote]:border-l-[3px] [&_blockquote]:border-text-muted [&_blockquote]:pl-2.5",
-        "[&_:not(pre)>code]:rounded-sm [&_:not(pre)>code]:bg-bg-code [&_:not(pre)>code]:px-1 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:text-text-code [&_code]:font-mono [&_code]:text-[0.85em] [&_code]:text-text-primary",
+        "[&_:not(pre)>code]:rounded-sm [&_:not(pre)>code]:bg-bg-code [&_:not(pre)>code]:px-1 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:border [&_:not(pre)>code]:border-border-default [&_code]:font-mono [&_code]:text-[0.85em] [&_code]:text-text-primary",
         "[&_pre>code]:text-[1em] [&_pre]:whitespace-pre-wrap [&_pre]:break-words [&_pre]:rounded-md [&_pre]:bg-bg-code [&_pre]:px-3 [&_pre]:py-2.5 [&_pre]:font-mono [&_pre]:text-[0.85em] [&_pre]:leading-relaxed [&_pre]:text-text-primary",
         "[&_:is(.hljs-keyword,.hljs-doctag,.hljs-type,.hljs-template-tag,.hljs-template-variable)]:text-syntax-keyword [&_.hljs-title]:text-syntax-function [&_:is(.hljs-number,.hljs-literal,.hljs-attr,.hljs-attribute,.hljs-meta,.hljs-variable,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id)]:text-syntax-constant [&_:is(.hljs-string,.hljs-regexp)]:text-syntax-string [&_:is(.hljs-built_in,.hljs-symbol)]:text-syntax-variable [&_.hljs-comment]:text-syntax-comment [&_:is(.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo)]:text-syntax-tag",
         "[&_:is(th,td)>p]:m-0 [&_:is(th,td)]:border [&_:is(th,td)]:border-border-default [&_:is(th,td)]:px-2 [&_:is(th,td)]:py-1 [&_:is(th,td)]:text-left [&_:is(th,td)]:align-top [&_table]:w-full [&_table]:border-collapse [&_th]:bg-bg-code [&_th]:font-medium [&_th]:text-text-primary",

package/src/CodeBlockColours.mdx

@@ -19,7 +19,7 @@ are the ones RichText reads it in, so writing looks the same as reading.
 
 - Drawing text that is already written → **RichText**, which colours its code
   blocks itself.
-- Code in a sentence → the code mark. It is amber and takes no other colours.
+- Code in a sentence → the code mark. It takes no colours.
 
 ## How
 
@@ -38,8 +38,9 @@ useEditor({
   class list; without it the words are named but drawn in one colour.
 - The block keeps the name `codeBlock` and its `language`, so text written
   before it was added reads the same.
-- It colours highlight.js's 37 everyday languages. A block in any other
-  language, or in none, stays one colour.
+- It colours highlight.js's 37 everyday languages, only by the language the
+  block names (```` ```ts ```` then Enter). A block in any other language, or
+  in none, stays one colour: it never guesses, so it looks the same once read.
 - The app installs `@tiptap/extension-code-block-lowlight`, as it installs the
   other Tiptap parts.
 

package/src/CodeBlockColours.test.ts

@@ -0,0 +1,36 @@
+// @vitest-environment jsdom
+/**
+ * CodeBlockColours colours a block only by the language it names, as RichText
+ * does when the text is read (Katerina, 9 October: never guess).
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { Editor } from '@tiptap/core'
+import StarterKit from '@tiptap/starter-kit'
+import { CodeBlockColours } from './CodeBlockColours'
+
+let editor: Editor | undefined
+afterEach(() => editor?.destroy())
+
+const coloured = (content: string) => {
+  editor = new Editor({ element: document.createElement('div'), extensions: [StarterKit.configure({ codeBlock: false }), CodeBlockColours], content })
+  return editor.view.dom.querySelectorAll('pre [class*="hljs-"]').length
+}
+
+describe('CodeBlockColours', () => {
+  it('colours a block that names its language', () => {
+    expect(coloured('<pre><code class="language-ts">const done = items.length</code></pre>')).toBeGreaterThan(0)
+  })
+
+  it('leaves a block that names no language in one colour, as RichText reads it', () => {
+    expect(coloured('<pre><code>const done = items.length</code></pre>')).toBe(0)
+  })
+
+  it('leaves a block in a language it does not know in one colour', () => {
+    expect(coloured('<pre><code class="language-nothing">const done = items.length</code></pre>')).toBe(0)
+  })
+
+  it('keeps the block a code block, with its language', () => {
+    coloured('<pre><code class="language-ts">const done = 1</code></pre>')
+    expect(editor!.getJSON().content?.[0]).toMatchObject({ type: 'codeBlock', attrs: { language: 'ts' } })
+  })
+})

package/src/CodeBlockColours.ts

@@ -2,6 +2,20 @@
 import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight'
 import { lowlight } from './codeColours'
 
+/*
+  The editor library guesses a language for a block that names none, or names
+  one it does not know, and colours it by the guess. RichText never guesses, so
+  that block was coloured while written and plain once read. A block is
+  coloured only by the language it names, while written and when read
+  (Katerina, 9 October: never guess).
+*/
+const namedOnly = {
+  highlight: (language: string, value: string) => lowlight().highlight(language, value),
+  highlightAuto: (value: string) => ({ type: 'root' as const, children: [{ type: 'text' as const, value }], data: { language: undefined, relevance: 0 } }),
+  listLanguages: () => lowlight().listLanguages(),
+  registered: (language: string) => lowlight().registered(language),
+}
+
 /**
  * A code block in the editor, with the colours RichText reads it in (Katerina,
  * 9 October): the same highlight.js languages, the same classes, and the
@@ -11,4 +25,4 @@ import { lowlight } from './codeColours'
  * then add `CodeBlockColours`. The block keeps its name, `codeBlock`, and its
  * `language` attribute, so nothing already written changes.
  */
-export const CodeBlockColours = CodeBlockLowlight.configure({ lowlight })
+export const CodeBlockColours = CodeBlockLowlight.configure({ lowlight: namedOnly })

package/src/RichText.tsx

@@ -95,9 +95,9 @@ const RICH_TEXT_CLASSES = {
   /* The line in the muted text grey, not the border grey: a border grey was 1.3 : 1 in Leaf (Katerina, 9 October). */
   // eslint-disable-next-line token-spacing/no-restricted-classes -- @estiva-escape: the quote line is Peek's, 3px, between the ramp's 2 and 4
   quote: '[&_blockquote>p]:m-0 [&_blockquote]:border-l-[3px] [&_blockquote]:border-text-muted [&_blockquote]:pl-2.5',
-  /* Code in a sentence is amber, its own colour (Katerina, 9 October: option I). */
+  /* Code in a sentence: the code fill and a thin border, in the heading colour (Katerina, 9 October: option B; the amber of 0.64.0 was too much). */
   // eslint-disable-next-line token-values/no-restricted-classes -- @estiva-escape: code is 0.85 of the text around it, so it scales with a heading and with `small`; a named size is fixed
-  code: '[&_:not(pre)>code]:rounded-sm [&_:not(pre)>code]:bg-bg-code [&_:not(pre)>code]:px-1 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:text-text-code [&_code]:font-mono [&_code]:text-[0.85em] [&_code]:text-text-primary',
+  code: '[&_:not(pre)>code]:rounded-sm [&_:not(pre)>code]:bg-bg-code [&_:not(pre)>code]:px-1 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:border [&_:not(pre)>code]:border-border-default [&_code]:font-mono [&_code]:text-[0.85em] [&_code]:text-text-primary',
   /* 12px either side, 10px above and below, looser lines than the text (Katerina, 9 October; 8px all round before). */
   // eslint-disable-next-line token-values/no-restricted-classes -- @estiva-escape: code is 0.85 of the text around it; the code inside the block is the block's own size, not 0.85 of it again
   codeBlock: '[&_pre>code]:text-[1em] [&_pre]:whitespace-pre-wrap [&_pre]:break-words [&_pre]:rounded-md [&_pre]:bg-bg-code [&_pre]:px-3 [&_pre]:py-2.5 [&_pre]:font-mono [&_pre]:text-[0.85em] [&_pre]:leading-relaxed [&_pre]:text-text-primary',

package/src/codeColours.ts

@@ -11,8 +11,16 @@ import { common, createLowlight } from 'lowlight'
  *
  * `common` is highlight.js's 37 everyday languages. A language outside them, or
  * none, leaves the code in one colour.
+ *
+ * Made the first time code is coloured, not when the package loads: a call at
+ * the top of the file is kept by every app's bundler, so an app that never draws
+ * code carried highlight.js too (measured: an app importing only `Link` was
+ * 55 KB gzipped).
  */
-export const lowlight = createLowlight(common)
+let instance: ReturnType<typeof createLowlight> | undefined
+export function lowlight() {
+  return (instance ??= createLowlight(common))
+}
 
 interface HastNode {
   type: string
@@ -28,6 +36,6 @@ function draw(node: HastNode, key: number): ReactNode {
 
 /** The code, its words wrapped in highlight.js's classes; the text as it is when the language is unknown. */
 export function codeColours(text: string, language?: string): ReactNode {
-  if (!language || !lowlight.registered(language)) return text
-  return (lowlight.highlight(language, text).children as HastNode[]).map(draw)
+  if (!language || !lowlight().registered(language)) return text
+  return (lowlight().highlight(language, text).children as HastNode[]).map(draw)
 }

package/tailwind-preset.js

@@ -155,7 +155,6 @@ export default {
         'bg-tooltip-key': 'var(--bg-tooltip-key)',
         'bg-field':     'var(--bg-field)',
         'bg-code':      'var(--bg-code)',
-        'text-code':    'var(--text-code)',
         'syntax-keyword': 'var(--syntax-keyword)',
         'syntax-function': 'var(--syntax-function)',
         'syntax-constant': 'var(--syntax-constant)',

package/tokens.css

@@ -101,8 +101,6 @@
   /* Code, in a sentence and as a block, and a table's header row (RichText, UIG-30).
      Here, the hover fill: bg-active, #D4D4D8, was the darkest thing on a white card (Katerina, 28 September). */
   --bg-code:     #E9E9EB;
-  /* Inline code's text: amber, on --bg-code (Katerina, 9 October: option I). Darker than the warning amber, which is 3.8 : 1 on the code fill; this is 4.8. */
-  --text-code:   #855f00;
   /* Colours inside a code block, by language (Katerina, 9 October). GitHub's light set; the keyword one shade darker (#cf222e is 4.4 : 1 on our fill, this 4.9). */
   --syntax-keyword: #c21f2b;
   --syntax-function: #6639ba;
@@ -194,8 +192,6 @@
   /* Code, in a sentence and as a block, and a table's header row (RichText, UIG-30).
      Here, bg-active, as Peek draws code (Katerina, 28 September). */
   --bg-code:     #2D2D31;
-  /* Inline code's text: amber, on --bg-code (Katerina, 9 October: option I). Amber 400, as on GitHub's dark ground. */
-  --text-code:   #fbbf24;
   /* Colours inside a code block, by language (Katerina, 9 October). GitHub's dark set. */
   --syntax-keyword: #ff7b72;
   --syntax-function: #d2a8ff;
@@ -291,8 +287,6 @@
   /* Code, in a sentence and as a block, and a table's header row (RichText, UIG-30).
      Here, bg-active, as Peek draws code (Katerina, 28 September). */
   --bg-code:     rgba(255, 255, 255, 0.08);
-  /* Inline code's text: amber, on --bg-code (Katerina, 9 October: option I). Signal's warning amber. */
-  --text-code:   #ffb020;
   /* Colours inside a code block, by language (Katerina, 9 October). GitHub's dark set. */
   --syntax-keyword: #ff7b72;
   --syntax-function: #d2a8ff;
@@ -402,8 +396,6 @@
   /* Code, in a sentence and as a block, and a table's header row (RichText, UIG-30).
      Here, bg-active, as Peek draws code (Katerina, 28 September). */
   --bg-code:     rgba(255, 255, 255, 0.08);
-  /* Inline code's text: amber, on --bg-code (Katerina, 9 October: option I). Ship's warning amber. */
-  --text-code:   #e0b04a;
   /* Colours inside a code block, by language (Katerina, 9 October). GitHub's dark set. */
   --syntax-keyword: #ff7b72;
   --syntax-function: #d2a8ff;
@@ -505,8 +497,6 @@
   /* Code, in a sentence and as a block, and a table's header row (RichText, UIG-30).
      Here, the inset fill: lighter than bg-active on a white card (Katerina, 28 September). */
   --bg-code:     #e9e9ea;
-  /* Inline code's text: amber, on --bg-code (Katerina, 9 October: option I). Darker than Leaf's warning amber (#967000, 3.8 : 1 on the code fill); this is 4.8. */
-  --text-code:   #855f00;
   /* Colours inside a code block, by language (Katerina, 9 October). GitHub's light set; the keyword one shade darker (#cf222e is 4.4 : 1 on our fill, this 4.9). */
   --syntax-keyword: #c21f2b;
   --syntax-function: #6639ba;