@zuilib/text-editor 0.10.1 → 0.11.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/README.md +18 -5
  3. package/dist/index.js +6 -3
  4. package/dist/styles.css +5 -5
  5. package/package.json +14 -10
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # Changelog — @zuilib/text-editor
2
2
 
3
+ ## 0.11.1
4
+
5
+ - Fix: mounting an editor no longer steals focus and scrolls to its first
6
+ code block. The initial markdown import and the one-off re-highlight of
7
+ existing code blocks now run with Lexical's `skip-dom-selection` tag, so
8
+ their selection stays internal until the user clicks in
9
+
10
+ ## 0.11.0
11
+
12
+ - Depends on **`@zuilib/tokens`** (optional peer) instead of `@zuilib/core`:
13
+ the editor only ever consumed the design tokens, never a component.
14
+ Load `@zuilib/tokens/styles.css` (or `tokens.css` without Tailwind) where
15
+ you previously loaded `@zuilib/core/styles.css`; without it the editor
16
+ falls back to its built-in defaults
17
+ - Documented that a Tailwind host must `@source` this package for the
18
+ document-content classes (headings, lists, code) to be generated
19
+
3
20
  ## 0.10.1
4
21
 
5
22
  - **Table columns** get the same rail as rows: a strip along the table's
package/README.md CHANGED
@@ -36,7 +36,7 @@ frontmatter as `---` blocks. Feature history: [CHANGELOG](./CHANGELOG.md).
36
36
  ## Installation
37
37
 
38
38
  ```bash
39
- pnpm add @zuilib/text-editor @zuilib/core \
39
+ pnpm add @zuilib/text-editor @zuilib/tokens \
40
40
  lexical @lexical/react @lexical/markdown @lexical/rich-text \
41
41
  @lexical/code @lexical/list @lexical/link @lexical/table @lexical/utils
42
42
  ```
@@ -48,7 +48,7 @@ All `lexical`/`@lexical/*` packages are peer dependencies at `^0.35.0`;
48
48
 
49
49
  ```tsx
50
50
  import { useState } from 'react'
51
- import '@zuilib/core/styles.css'
51
+ import '@zuilib/tokens/styles.css'
52
52
  import '@zuilib/text-editor/styles.css'
53
53
  import { MarkdownEditor } from '@zuilib/text-editor'
54
54
 
@@ -416,7 +416,7 @@ host theme in light and dark mode. Override any of them on
416
416
  | `--zui-drawing-chrome` | `var(--background)` | Header and property row background |
417
417
  | `--zui-drawing-popover` / `-foreground` | `var(--popover)` / `var(--popover-foreground)` | "More shapes" menu |
418
418
  | `--zui-drawing-danger` / `--zui-drawing-success` | `var(--destructive)` / `var(--success)` | Delete button, "copied" state |
419
- | `--zui-drawing-radius` / `--zui-drawing-control-radius` | `var(--radius-lg)` / `var(--radius)` | Block corners / buttons and menus |
419
+ | `--zui-drawing-radius` / `--zui-drawing-control-radius` | `var(--radius-lg)` / `var(--radius-sm)` | Block corners / buttons and menus |
420
420
  | `--zui-drawing-shadow` | `var(--shadow-medium)` | Popover |
421
421
  | `--zui-drawing-font` | system sans | Shape text and the inline editor |
422
422
  | `--zui-drawing-surface` / `--zui-drawing-grid` / `--zui-drawing-grid-size` | white / 9% black / `20px` | Drawing area and its dot grid, before the dark filter |
@@ -488,10 +488,22 @@ diagrams:
488
488
  </FormField>
489
489
  ```
490
490
 
491
- Load both CSS entry points (`@zuilib/core/styles.css`,
491
+ Load both CSS entry points (`@zuilib/tokens/styles.css`,
492
492
  `@zuilib/text-editor/styles.css`) in the app layout. Dark mode follows the
493
493
  ZUI convention: a `dark` class on `<html>`.
494
494
 
495
+ `@zuilib/tokens` is an optional peer: the editor's chrome reads the ZUI
496
+ custom properties (`--primary`, `--popover`, `--border`, …) and falls back
497
+ to its own defaults when they are unset. Document content (headings,
498
+ lists, code blocks) is styled with Tailwind utility classes, so a Tailwind
499
+ v4 host must scan this package for them to be generated:
500
+
501
+ ```css
502
+ @import "@zuilib/tokens/styles.css";
503
+ @source "../node_modules/@zuilib/text-editor/dist";
504
+ @import "@zuilib/text-editor/styles.css";
505
+ ```
506
+
495
507
  ## Architecture notes (for extenders)
496
508
 
497
509
  - Source: `src/EditorRoot.tsx` (composer + plugins), `src/EditorContent.tsx`,
@@ -511,7 +523,8 @@ ZUI convention: a `dark` class on `<html>`.
511
523
 
512
524
  ## Related packages
513
525
 
514
- - `@zuilib/core` — design tokens and base styles
526
+ - `@zuilib/tokens` — design tokens and base styles
527
+ - `@zuilib/components` — the UI primitives (Button, Input, …)
515
528
  - `@zuilib/form` — react-hook-form wiring
516
529
 
517
530
  ## Build & release (maintainers)
package/dist/index.js CHANGED
@@ -1,3 +1,6 @@
1
+ 'use client';
2
+ "use client";
3
+
1
4
  // src/EditorRoot.tsx
2
5
  import {
3
6
  useCallback as useCallback2,
@@ -1534,7 +1537,7 @@ function registerCodeBlockHighlighting(editor) {
1534
1537
  () => {
1535
1538
  for (const node of $nodesOfType(CodeNode)) node.markDirty();
1536
1539
  },
1537
- { tag: "history-merge" }
1540
+ { tag: ["history-merge", "skip-dom-selection"] }
1538
1541
  );
1539
1542
  return unregister;
1540
1543
  }
@@ -1589,7 +1592,7 @@ function MarkdownSyncPlugin({
1589
1592
  lastMarkdownRef.current = initialMarkdown;
1590
1593
  editor.update(() => {
1591
1594
  $convertFromMarkdownString(initialMarkdown, transformers);
1592
- }, { tag: "initial-load" });
1595
+ }, { tag: ["initial-load", "skip-dom-selection"] });
1593
1596
  }
1594
1597
  }, [editor, initialMarkdown]);
1595
1598
  useEffect4(() => {
@@ -6114,7 +6117,7 @@ var editorTheme = {
6114
6117
  link: "text-primary underline hover:opacity-80 cursor-pointer",
6115
6118
  text: {
6116
6119
  bold: "font-bold",
6117
- code: "bg-muted px-1.5 py-0.5 rounded font-mono text-sm",
6120
+ code: "bg-muted px-1.5 py-0.5 rounded-sm font-mono text-sm",
6118
6121
  italic: "italic",
6119
6122
  strikethrough: "line-through",
6120
6123
  subscript: "text-xs align-sub",
package/dist/styles.css CHANGED
@@ -552,17 +552,17 @@
552
552
  }
553
553
 
554
554
  .zui-drawing-canvas {
555
- --zui-drawing-accent: var(--primary, #3b82f6);
555
+ --zui-drawing-accent: var(--primary, #2563eb);
556
556
  --zui-drawing-foreground: var(--foreground, #0a0a0a);
557
- --zui-drawing-muted-foreground: var(--muted-foreground, #71717a);
557
+ --zui-drawing-muted-foreground: var(--muted-foreground, #65656d);
558
558
  --zui-drawing-border: var(--border, #e4e4e7);
559
559
  --zui-drawing-chrome: var(--background, #ffffff);
560
560
  --zui-drawing-popover: var(--popover, #ffffff);
561
561
  --zui-drawing-popover-foreground: var(--popover-foreground, var(--zui-drawing-foreground));
562
- --zui-drawing-danger: var(--destructive, #ef4444);
563
- --zui-drawing-success: var(--success, #22c55e);
562
+ --zui-drawing-danger: var(--destructive, #dc2626);
563
+ --zui-drawing-success: var(--success, #15803d);
564
564
  --zui-drawing-radius: var(--radius-lg, 0.75rem);
565
- --zui-drawing-control-radius: var(--radius, 0.375rem);
565
+ --zui-drawing-control-radius: var(--radius-sm, 0.375rem);
566
566
  --zui-drawing-shadow: var(--shadow-medium, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
567
567
  --zui-drawing-font: ui-sans-serif, system-ui, sans-serif;
568
568
  --zui-drawing-surface: #ffffff;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zuilib/text-editor",
3
- "version": "0.10.1",
3
+ "version": "0.11.1",
4
4
  "description": "ZUI — A markdown editor component wrapping Lexical",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -13,10 +13,6 @@
13
13
  "DRAWING_FORMAT.md",
14
14
  "CHANGELOG.md"
15
15
  ],
16
- "scripts": {
17
- "build": "tsup",
18
- "test": "node tests/roundtrip.mjs && node --test tests/*.test.mjs"
19
- },
20
16
  "exports": {
21
17
  ".": {
22
18
  "types": "./dist/index.d.ts",
@@ -34,12 +30,15 @@
34
30
  "@lexical/rich-text": "^0.35.0",
35
31
  "@lexical/table": "^0.35.0",
36
32
  "@lexical/utils": "^0.35.0",
33
+ "@zuilib/tokens": "^0.0.1",
37
34
  "lexical": "^0.35.0",
38
35
  "react": "^18.0.0 || ^19.0.0",
39
36
  "react-dom": "^18.0.0 || ^19.0.0"
40
37
  },
41
- "dependencies": {
42
- "@zuilib/core": "^0.0.0"
38
+ "peerDependenciesMeta": {
39
+ "@zuilib/tokens": {
40
+ "optional": true
41
+ }
43
42
  },
44
43
  "devDependencies": {
45
44
  "@lexical/code": "^0.35.0",
@@ -55,7 +54,8 @@
55
54
  "@types/react-dom": "^18.0.0 || ^19.0.0",
56
55
  "lexical": "^0.35.0",
57
56
  "react": "^18.0.0 || ^19.0.0",
58
- "react-dom": "^18.0.0 || ^19.0.0"
57
+ "react-dom": "^18.0.0 || ^19.0.0",
58
+ "@zuilib/tokens": "^0.1.0"
59
59
  },
60
60
  "keywords": [
61
61
  "lexical",
@@ -65,5 +65,9 @@
65
65
  "design-system",
66
66
  "react",
67
67
  "typescript"
68
- ]
69
- }
68
+ ],
69
+ "scripts": {
70
+ "build": "tsup",
71
+ "test": "node tests/roundtrip.mjs && node --test tests/*.test.mjs"
72
+ }
73
+ }