KNIME® Design System – Rich Text Editor

This is part of the KNIME Design System.

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.

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 for the package overview.

The Tiptap/ProseMirror packages are declared as regular dependencies but are externalized in the build (see 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.

Development

This package is part of the KNIME Design System monorepo. For setup instructions, see the root README.

Launch development server

From the root of the monorepo:

pnpm dev       # Starts Storybook with all design system components

Testing

Unit tests are based on Vitest. Run from the monorepo root:

pnpm run test:unit      # Run all unit tests (packages/*)
pnpm run coverage       # Generate coverage reports

Running security audit

Security audits are run at the monorepo root:

pnpm run audit

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:

pnpm run build      # Build only this package

Results are saved to dist/.

Versioning & Publishing

Versioning and publishing are managed at the root level.

All @knime/kds-* packages (including this one) are versioned together via Changesets. For release workflows, see the root README.

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:

pnpm add @knime/kds-rich-text-editor @knime/kds-components @knime/kds-styles

<script setup lang="ts">
import { ref } from "vue";

import { KdsRichTextEditor } from "@knime/kds-rich-text-editor";

const value = ref("<p>Hello world</p>");
</script>

<template>
  <KdsRichTextEditor
    v-model="value"
    :base-extensions="{ bold: true, italic: true, link: true }"
  />
</template>

Public exports

All public symbols follow the KDS Kds prefix convention:

| Export | Kind | Description | | --------------------------- | --------- | --------------------------------------------------- | | KdsRichTextEditor | component | The editor (with built-in toolbar) | | KdsCreateLinkModal | component | Modal used by the link tool | | kdsDefaultLinkToolOptions | const | Default URL validator / sanitizer for the link tool | | KdsLinkToolOptions | type | Options for the link tool | | KdsRichTextEditorProps | type | Props of KdsRichTextEditor | | KdsBaseExtensionsConfig | type | Opt-in map of built-in Tiptap extensions |

Using with Vitest, Nuxt, or Vite SSR

The published JavaScript imports its CSS as a side effect (e.g. import "./index.css"), which bundlers handle automatically. When the package is instead evaluated by Node's native ESM loader — as Vitest and Vite/Nuxt SSR do by default, since they externalize node_modules — Node has no .css loader and throws Unknown file extension ".css". Configure the consuming project once so @knime/* packages are processed instead of externalized:

// Vitest — vitest.config.ts
export default defineConfig({
  test: { server: { deps: { inline: [/@knime\//] } } },
});

// Vite SSR — vite.config.ts
export default defineConfig({ ssr: { noExternal: [/@knime\//] } });

// Nuxt — nuxt.config.ts
export default defineNuxtConfig({ build: { transpile: [/@knime\//] } });

Requirements

The editor expects that the embedding app provides the following:

• Vue and Consola compatible to the versions defined in package.json
• @knime/kds-components and the @knime/kds-styles CSS variables imported once in the app entry