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

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @knime/kds-rich-text-editor
 
+## 11.1.1
+
+### Patch Changes
+
+- 7dbad9a: Ensure editor is always 100% height of its available container
+- Updated dependencies [7dbad9a, 2c0897f]
+  - @knime/kds-components@11.1.1
+  - @knime/kds-styles@11.1.1
+
+## 11.1.0
+
+### Patch Changes
+
+- Updated dependencies [1cbcad8]
+  - @knime/kds-styles@11.1.0
+  - @knime/kds-components@11.1.0
+
 ## 11.0.0
 
 ### Patch Changes

package/README.md

@@ -2,13 +2,13 @@
 
 This is part of the [KNIME Design System](../../README.md).
 
-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].
+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].
 
 It's published as npm package: [@knime/kds-rich-text-editor]
 
 ## Why a separate package?
 
-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.
+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.
 
 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.
 
@@ -33,18 +33,13 @@ pnpm run test:unit      # Run all unit tests (packages/*)
 pnpm run coverage       # Generate coverage reports
 ```
 
-### Logging
-
-You can log using the global `consola` variable (which the embedding application needs to provide).
-
-See https://github.com/nuxt/consola for details.
-
 ## Building
 
 To build the editor as a [Vue library]:
 
 ```sh
-pnpm run build      # Build only this package
+pnpm run build                    # From this package: build only the editor
+pnpm run build:rich-text-editor   # From the monorepo root: build only the editor
 ```
 
 Results are saved to `dist/`.
@@ -57,10 +52,16 @@ All `@knime/kds-*` packages (including this one) are versioned together via Chan
 
 ## Using the editor in a Vue application
 
-Install the [@knime/kds-rich-text-editor] npm package as a dependency. It requires `@knime/kds-components` and `vue` as peer dependencies:
+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):
 
 ```sh
-pnpm add @knime/kds-rich-text-editor @knime/kds-components @knime/kds-styles
+pnpm add @knime/kds-rich-text-editor @knime/kds-styles vue
+```
+
+The editor uses the KDS CSS variables but does not load them. Import them once in your app (e.g. in `main.ts`):
+
+```ts
+import "@knime/kds-styles/kds-variables.css";
 ```
 
 ```vue
@@ -82,16 +83,23 @@ const value = ref("<p>Hello world</p>");
 
 ### Public exports
 
-All public symbols follow the KDS `Kds` prefix convention:
+Public symbols follow the KDS `Kds` prefix convention, except `EditorTools`:
 
 | Export                      | Kind      | Description                                         |
 | --------------------------- | --------- | --------------------------------------------------- |
 | `KdsRichTextEditor`         | component | The editor (with built-in toolbar)                  |
+| `KdsRichTextInput`          | component | The editor as form field with label and description |
 | `KdsCreateLinkModal`        | component | Modal used by the link tool                         |
 | `kdsDefaultLinkToolOptions` | const     | Default URL validator / sanitizer for the link tool |
+| `kdsCharacterCountDisplay`  | const     | When to show the character counter                  |
+| `kdsCharacterCountDisplays` | const     | Array of all character counter display values       |
 | `KdsLinkToolOptions`        | type      | Options for the link tool                           |
 | `KdsRichTextEditorProps`    | type      | Props of `KdsRichTextEditor`                        |
+| `KdsRichTextInputProps`     | type      | Props of `KdsRichTextInput`                         |
 | `KdsBaseExtensionsConfig`   | type      | Opt-in map of built-in Tiptap extensions            |
+| `KdsCharacterLimit`         | type      | Character limit and counter display settings        |
+| `KdsCharacterCountDisplay`  | type      | Union of the character counter display values       |
+| `EditorTools`               | type      | Toolbar tool definitions (not `Kds`-prefixed)       |
 
 ### Using with Vitest, Nuxt, or Vite SSR
 
@@ -124,8 +132,8 @@ export default defineNuxtConfig({ build: { transpile: [/@knime\//] } });
 
 The editor expects that the embedding app provides the following:
 
-- Vue and Consola compatible to the versions defined in [`package.json`](package.json)
-- `@knime/kds-components` and the `@knime/kds-styles` CSS variables imported once in the app entry
+- `vue` matching the peer dependency range in [`package.json`](package.json)
+- the `@knime/kds-styles` CSS variables imported once in the app entry
 
 [Vue]: https://vuejs.org/
 [Tiptap]: https://tiptap.dev/

package/dist/index.css

@@ -27,7 +27,7 @@
 }
 
 .editor-wrapper {
-&[data-v-a230bf6c] {
+&[data-v-f0330e9f] {
   /* Fixed 44px toolbar height per the design (28px content + 8px padding on
    * each side); the small toolbar buttons (24px) center within the content
    * area. */
@@ -37,34 +37,35 @@
   );
 
   position: relative;
+  height: 100%;
   isolation: isolate;
 }
-&.disabled[data-v-a230bf6c] {
+&.disabled[data-v-f0330e9f] {
     color: var(--kds-color-text-and-icon-disabled);
 }
 }
 
 /* stylelint-disable selector-class-pattern */
 .rich-text-editor {
-&[data-v-a230bf6c] {
+&[data-v-f0330e9f] {
   height: 100%;
-  max-height: var(--v3c79e33b);
+  max-height: var(--v2a0392e8);
   overflow-y: auto;
 
   /* stylelint-disable knime/no-deep-nesting */
   /* stylelint-enable selector-class-pattern */
 }
 &.editable {
-&[data-v-a230bf6c] {
+&[data-v-f0330e9f] {
     padding: var(--kds-spacing-container-0-5x);
     cursor: text;
     background: var(--kds-color-background-input-initial);
 }
-&[data-v-a230bf6c] .ProseMirror {
-      min-height: var(--v63a1a18d);
+&[data-v-f0330e9f] .ProseMirror {
+      min-height: var(--v512b513a);
 }
 }
-&[data-v-a230bf6c] .ProseMirror {
+&[data-v-f0330e9f] .ProseMirror {
     height: 100%;
     font: var(--kds-font-base-body-small);
 
@@ -214,7 +215,7 @@ a {
           margin-left: var(--kds-spacing-container-0-12x);
           content: "";
           background-color: var(--link-color);
-          mask-image: var(--f8ef0ace);
+          mask-image: var(--v69243186);
           mask-repeat: no-repeat;
           mask-size: contain;
 }
@@ -263,34 +264,34 @@ td {
 }
 }
 }
-&[data-v-a230bf6c] .ProseMirror:focus-visible,
-  &[data-v-a230bf6c] .ProseMirror:focus {
+&[data-v-f0330e9f] .ProseMirror:focus-visible,
+  &[data-v-f0330e9f] .ProseMirror:focus {
     outline: transparent;
 }
 }
 .editor-wrapper.with-border {
-&[data-v-a230bf6c] {
+&[data-v-f0330e9f] {
   border: var(--kds-border-action-input);
   border-radius: var(--kds-border-radius-container-0-37x);
 }
-&.disabled[data-v-a230bf6c] {
+&.disabled[data-v-f0330e9f] {
     border: var(--kds-border-action-disabled);
 }
-& .toolbar-wrapper[data-v-a230bf6c] {
+& .toolbar-wrapper[data-v-f0330e9f] {
     border-top-left-radius: var(--kds-border-radius-container-0-37x);
     border-top-right-radius: var(--kds-border-radius-container-0-37x);
 }
-& .rich-text-editor[data-v-a230bf6c] {
+& .rich-text-editor[data-v-f0330e9f] {
     border-bottom-right-radius: var(--kds-border-radius-container-0-37x);
     border-bottom-left-radius: var(--kds-border-radius-container-0-37x);
 }
 }
-.editor-wrapper.show-focus-ring[data-v-a230bf6c] {
+.editor-wrapper.show-focus-ring[data-v-f0330e9f] {
   outline: var(--kds-border-action-focused);
   outline-offset: var(--kds-spacing-offset-focus);
 }
 .embedded-toolbar {
-&[data-v-a230bf6c] {
+&[data-v-f0330e9f] {
   height: var(--toolbar-height);
   padding: var(--kds-spacing-container-0-5x);
   overflow-x: auto;
@@ -301,7 +302,7 @@ td {
   border-bottom: var(--kds-border-base-muted);
   -ms-overflow-style: none; /* needed to hide scroll bar in edge */
 }
-&[data-v-a230bf6c]::-webkit-scrollbar {
+&[data-v-f0330e9f]::-webkit-scrollbar {
     display: none;
 }
 }

package/dist/index.js

@@ -3436,9 +3436,9 @@ var KdsRichTextEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 	emits: /*@__PURE__*/ mergeModels(["blur"], ["update:modelValue"]),
 	setup(__props, { expose: __expose, emit: __emit }) {
 		useCssVars((_ctx) => ({
-			"v3c79e33b": maxHeightStyle.value,
-			"v63a1a18d": minHeightStyle.value,
-			"f8ef0ace": externalIcon
+			"v2a0392e8": maxHeightStyle.value,
+			"v512b513a": minHeightStyle.value,
+			"v69243186": externalIcon
 		}));
 		const hardCharacterLimit = __props.editable ? Math.max(__props.characterLimit.maxCharacters ?? 1e3, MIN_CHARACTER_LIMIT) : Infinity;
 		const characterCountDisplay = __props.characterLimit.display ?? kdsCharacterCountDisplay.NEVER;
@@ -3608,7 +3608,7 @@ var KdsRichTextEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 			])]);
 		};
 	}
-}), [["__scopeId", "data-v-a230bf6c"]]);
+}), [["__scopeId", "data-v-f0330e9f"]]);
 //#endregion
 //#region src/KdsRichTextInput.vue
 var KdsRichTextInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({