@knime/kds-rich-text-editor 11.0.0 → 11.1.0

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 (3) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/README.md +22 -14
  3. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @knime/kds-rich-text-editor
2
2
 
3
+ ## 11.1.0
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [1cbcad8]
8
+ - @knime/kds-styles@11.1.0
9
+ - @knime/kds-components@11.1.0
10
+
3
11
  ## 11.0.0
4
12
 
5
13
  ### Patch Changes
package/README.md CHANGED
@@ -2,13 +2,13 @@
2
2
 
3
3
  This is part of the [KNIME Design System](../../README.md).
4
4
 
5
- This package contains the `KdsRichTextEditor` component and its toolbar, a WYSIWYG editor that follows the KNIME Design System. It is based on the [Vue] JavaScript framework, built on the KNIME Design System tokens, and powered by [Tiptap]/[ProseMirror].
5
+ This package contains the `KdsRichTextEditor` component (a WYSIWYG editor with toolbar) and the `KdsRichTextInput` form field built on it, following the KNIME Design System. They are based on the [Vue] JavaScript framework, built on the KNIME Design System tokens, and powered by [Tiptap]/[ProseMirror].
6
6
 
7
7
  It's published as npm package: [@knime/kds-rich-text-editor]
8
8
 
9
9
  ## Why a separate package?
10
10
 
11
- Tiptap and ProseMirror add a large, DOM-parsing dependency subtree (~50 packages) that is irrelevant to most consumers of `@knime/kds-components`. Keeping the editor in its own package keeps that dependency, bundle, and security-audit/SBOM surface **opt-in** — only apps that install this package pull it in. See the [root README](../../README.md) for the package overview.
11
+ Tiptap and ProseMirror add a large, DOM-parsing dependency subtree that is irrelevant to most consumers of `@knime/kds-components`. Keeping the editor in its own package keeps that dependency, bundle, and security-audit/SBOM surface **opt-in** — only apps that install this package pull it in. See the [root README](../../README.md) for the package overview.
12
12
 
13
13
  The Tiptap/ProseMirror packages are declared as regular `dependencies` but are **externalized** in the build (see [`vite.config.js`](vite.config.js)). They are resolved at consume time rather than bundled, so consumers dedupe a single ProseMirror instance and can pull CVE-patched transitive versions via their own lockfile without waiting on a republish.
14
14
 
@@ -33,18 +33,13 @@ pnpm run test:unit # Run all unit tests (packages/*)
33
33
  pnpm run coverage # Generate coverage reports
34
34
  ```
35
35
 
36
- ### Logging
37
-
38
- You can log using the global `consola` variable (which the embedding application needs to provide).
39
-
40
- See https://github.com/nuxt/consola for details.
41
-
42
36
  ## Building
43
37
 
44
38
  To build the editor as a [Vue library]:
45
39
 
46
40
  ```sh
47
- pnpm run build # Build only this package
41
+ pnpm run build # From this package: build only the editor
42
+ pnpm run build:rich-text-editor # From the monorepo root: build only the editor
48
43
  ```
49
44
 
50
45
  Results are saved to `dist/`.
@@ -57,10 +52,16 @@ All `@knime/kds-*` packages (including this one) are versioned together via Chan
57
52
 
58
53
  ## Using the editor in a Vue application
59
54
 
60
- Install the [@knime/kds-rich-text-editor] npm package as a dependency. It requires `@knime/kds-components` and `vue` as peer dependencies:
55
+ Install the [@knime/kds-rich-text-editor] npm package together with `@knime/kds-styles`. It declares `vue` as peer dependency (`@knime/kds-components` comes along as a regular dependency):
61
56
 
62
57
  ```sh
63
- pnpm add @knime/kds-rich-text-editor @knime/kds-components @knime/kds-styles
58
+ pnpm add @knime/kds-rich-text-editor @knime/kds-styles vue
59
+ ```
60
+
61
+ The editor uses the KDS CSS variables but does not load them. Import them once in your app (e.g. in `main.ts`):
62
+
63
+ ```ts
64
+ import "@knime/kds-styles/kds-variables.css";
64
65
  ```
65
66
 
66
67
  ```vue
@@ -82,16 +83,23 @@ const value = ref("<p>Hello world</p>");
82
83
 
83
84
  ### Public exports
84
85
 
85
- All public symbols follow the KDS `Kds` prefix convention:
86
+ Public symbols follow the KDS `Kds` prefix convention, except `EditorTools`:
86
87
 
87
88
  | Export | Kind | Description |
88
89
  | --------------------------- | --------- | --------------------------------------------------- |
89
90
  | `KdsRichTextEditor` | component | The editor (with built-in toolbar) |
91
+ | `KdsRichTextInput` | component | The editor as form field with label and description |
90
92
  | `KdsCreateLinkModal` | component | Modal used by the link tool |
91
93
  | `kdsDefaultLinkToolOptions` | const | Default URL validator / sanitizer for the link tool |
94
+ | `kdsCharacterCountDisplay` | const | When to show the character counter |
95
+ | `kdsCharacterCountDisplays` | const | Array of all character counter display values |
92
96
  | `KdsLinkToolOptions` | type | Options for the link tool |
93
97
  | `KdsRichTextEditorProps` | type | Props of `KdsRichTextEditor` |
98
+ | `KdsRichTextInputProps` | type | Props of `KdsRichTextInput` |
94
99
  | `KdsBaseExtensionsConfig` | type | Opt-in map of built-in Tiptap extensions |
100
+ | `KdsCharacterLimit` | type | Character limit and counter display settings |
101
+ | `KdsCharacterCountDisplay` | type | Union of the character counter display values |
102
+ | `EditorTools` | type | Toolbar tool definitions (not `Kds`-prefixed) |
95
103
 
96
104
  ### Using with Vitest, Nuxt, or Vite SSR
97
105
 
@@ -124,8 +132,8 @@ export default defineNuxtConfig({ build: { transpile: [/@knime\//] } });
124
132
 
125
133
  The editor expects that the embedding app provides the following:
126
134
 
127
- - Vue and Consola compatible to the versions defined in [`package.json`](package.json)
128
- - `@knime/kds-components` and the `@knime/kds-styles` CSS variables imported once in the app entry
135
+ - `vue` matching the peer dependency range in [`package.json`](package.json)
136
+ - the `@knime/kds-styles` CSS variables imported once in the app entry
129
137
 
130
138
  [Vue]: https://vuejs.org/
131
139
  [Tiptap]: https://tiptap.dev/
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@knime/kds-rich-text-editor",
3
- "version": "11.0.0",
3
+ "version": "11.1.0",
4
4
  "description": "Package containing the RichTextEditor component which follows the KNIME Design System",
5
5
  "repository": {
6
6
  "type": "git",
@@ -32,8 +32,8 @@
32
32
  "CHANGELOG.md"
33
33
  ],
34
34
  "dependencies": {
35
- "@knime/kds-components": "^11.0.0",
36
- "@knime/kds-styles": "^11.0.0",
35
+ "@knime/kds-components": "^11.1.0",
36
+ "@knime/kds-styles": "^11.1.0",
37
37
  "@knime/utils": "^2.0.3",
38
38
  "@tiptap/core": "^3.31.0",
39
39
  "@tiptap/extension-character-count": "^3.31.0",