@knime/kds-rich-text-editor 0.30.4

package/README.md

@@ -0,0 +1,116 @@
+# KNIME® Design System – Rich Text Editor
+
+This is part of the [KNIME Design System](../../README.md) maintained by the [UI Core Team](mailto:team-ui-core@knime.com).
+
+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](../../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.
+
+## Development
+
+This package is part of the [KNIME Design System monorepo](../../README.md). For setup instructions, see the **[root README](../../README.md)**.
+
+### Launch development server
+
+From the root of the monorepo:
+
+```sh
+pnpm dev       # Starts Storybook with all design system components
+```
+
+### Testing
+
+Unit tests are based on [Vitest]. Run from the monorepo root:
+
+```sh
+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:
+
+```sh
+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]:
+
+```sh
+pnpm run build      # Build only this package
+```
+
+Results are saved to `dist/`.
+
+## Versioning & Publishing
+
+Versioning and publishing are managed at the **[root level](../../README.md#changesets--publishing)**.
+
+All `@knime/kds-*` packages (including this one) are versioned together via Changesets. For release workflows, see the [root README](../../README.md).
+
+## 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:
+
+```sh
+pnpm add @knime/kds-rich-text-editor @knime/kds-components @knime/kds-styles
+```
+
+```vue
+<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            |
+
+### Requirements
+
+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]: https://vuejs.org/
+[Tiptap]: https://tiptap.dev/
+[ProseMirror]: https://prosemirror.net/
+[Vue library]: https://vitejs.dev/guide/build.html#library-mode
+[Vitest]: https://vitest.dev/
+[@knime/kds-rich-text-editor]: https://www.npmjs.com/package/@knime/kds-rich-text-editor

package/dist/index.css

@@ -0,0 +1,282 @@
+
+.modal[data-v-5b224eb0] {
+  --modal-width: var(--kds-dimension-component-width-32x);
+}
+.modal-footer {
+&[data-v-5b224eb0] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  }
+&.spread-buttons[data-v-5b224eb0] {
+    justify-content: space-between;
+}
+}
+.controls-apply-group[data-v-5b224eb0] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-5x);
+}
+
+.tools[data-v-f4d33607] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-25x);
+  align-items: center;
+  height: 100%;
+}
+
+.editor-wrapper {
+&[data-v-06a9c7b9] {
+  /* Fixed 44px toolbar height per the design (28px content + 8px padding on
+   * each side). Defined explicitly so the toolbar expand/collapse transition
+   * has a concrete target height; the small toolbar buttons (24px) center
+   * within the content area. */
+  --toolbar-height: calc(
+    var(--kds-dimension-component-height-1-75x) +
+      var(--kds-spacing-container-0-5x) * 2
+  );
+
+  position: relative;
+  isolation: isolate;
+}
+&.disabled[data-v-06a9c7b9] {
+    color: var(--kds-color-text-and-icon-disabled);
+}
+}
+
+/* stylelint-disable selector-class-pattern */
+.rich-text-editor {
+&[data-v-06a9c7b9] {
+  height: 100%;
+  max-height: var(--f4686d76);
+  padding: var(--kds-spacing-container-0-5x);
+  overflow-y: auto;
+
+  /* stylelint-disable knime/no-deep-nesting */
+  /* stylelint-enable selector-class-pattern */
+}
+&.editable {
+&[data-v-06a9c7b9] {
+    cursor: text;
+    background: var(--kds-color-background-input-initial);
+}
+&[data-v-06a9c7b9] .ProseMirror {
+      min-height: var(--a618f0d2);
+}
+}
+&[data-v-06a9c7b9] .ProseMirror {
+    height: 100%;
+
+    /* The following rich text styles are kept in sync with KdsDescription. */
+p {
+& {
+      padding: 0;
+      margin: 0 0 var(--kds-spacing-container-0-37x);
+      font: var(--kds-font-base-body-small);
+}
+&:last-child {
+        margin-bottom: 0;
+}
+}
+p.small-text {
+      font: var(--kds-font-base-subtext-xsmall);
+}
+strong,
+    b {
+      font-weight: var(--kds-core-font-weight-strong);
+}
+i,
+    em {
+      font-style: italic;
+}
+h3 {
+      margin: 0;
+      font: var(--kds-font-base-body-medium-strong);
+}
+h4 {
+      margin: 0;
+      font: var(--kds-font-base-body-small-strong);
+}
+pre {
+& {
+      width: fit-content;
+      padding: var(--kds-spacing-container-0-75x);
+      font: var(--kds-font-base-code-xsmall);
+      background: var(--kds-color-surface-subtle);
+      border-radius: var(--kds-border-radius-container-0-25x);
+}
+& > code {
+        padding: 0;
+        background: none;
+}
+}
+& :not(pre) > code {
+      padding: var(--kds-spacing-container-0-12x)
+        var(--kds-spacing-container-0-25x);
+      font: var(--kds-font-base-code-xsmall);
+      background: var(--kds-color-surface-subtle);
+      box-decoration-break: clone;
+      border-radius: var(--kds-border-radius-container-0-12x);
+}
+
+    /** keep in sync with KdsLink */
+a {
+& {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: fit-content;
+      max-width: 100%;
+      padding: var(--kds-spacing-container-none)
+        var(--kds-spacing-container-0-10x);
+      font: var(--kds-font-base-body-small);
+      color: var(--kds-color-text-and-icon-neutral);
+      white-space: nowrap;
+      text-decoration-line: underline;
+      cursor: pointer;
+      border-radius: var(--kds-border-radius-container-0-12x);
+
+      /** internal links */
+
+      /** external links */
+}
+&:focus-visible {
+        outline: var(--kds-border-action-focused);
+        outline-offset: var(--kds-spacing-container-none);
+}
+&[href^="http"] {
+& {
+        --link-color: var(--kds-color-text-and-icon-selected);
+
+        color: var(--link-color);
+}
+&:visited {
+          --link-color: var(--kds-color-text-and-icon-info);
+
+          color: var(--link-color);
+}
+&:hover {
+          --link-color: var(--kds-color-text-and-icon-primary-inverted);
+
+          color: var(--link-color);
+          background-color: var(--kds-color-background-primary-bold-hover);
+}
+&:active {
+          --link-color: var(--kds-color-text-and-icon-selected-inverted);
+
+          color: var(--link-color);
+          background-color: var(--kds-color-background-primary-bold-active);
+}
+&::after {
+          display: block;
+          width: var(--kds-dimension-icon-0-56x);
+          height: var(--kds-dimension-icon-0-56x);
+          margin-left: var(--kds-spacing-container-0-12x);
+          content: "";
+          background-color: var(--link-color);
+          mask-image: var(--c15f49ba);
+          mask-repeat: no-repeat;
+          mask-size: contain;
+}
+}
+&:not([href^="http"]) {
+& {
+        color: var(--kds-color-text-and-icon-neutral);
+}
+&:visited {
+          color: var(--kds-color-text-and-icon-info);
+}
+&:hover {
+          background-color: var(--kds-color-background-neutral-hover);
+}
+&:active {
+          background-color: var(--kds-color-background-neutral-active);
+}
+}
+}
+ol,
+    ul {
+      padding-left: var(--kds-spacing-container-2x);
+}
+dd {
+      margin-left: var(--kds-spacing-container-1x);
+}
+table {
+& {
+      border-spacing: var(--kds-spacing-container-0-25x) 0;
+      border-collapse: separate;
+}
+td,
+      th {
+        padding: var(--kds-spacing-container-0-25x);
+}
+th {
+        font: var(--kds-font-base-body-small-strong);
+        text-align: left;
+        border-bottom: var(--kds-border-width-icon-stroke-l) solid
+          var(--kds-color-border-neutral);
+}
+td {
+        font: var(--kds-font-base-body-small);
+        border-bottom: var(--kds-border-width-icon-stroke-s) solid
+          var(--kds-color-border-neutral);
+}
+}
+}
+&[data-v-06a9c7b9] :has(:deep(.ProseMirror:focus)) {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&[data-v-06a9c7b9] .ProseMirror:focus-visible,
+  &[data-v-06a9c7b9] .ProseMirror:focus {
+    outline: transparent;
+}
+}
+.editor-wrapper.with-border {
+&[data-v-06a9c7b9] {
+  border: var(--kds-border-action-input);
+  border-radius: var(--kds-border-radius-container-0-37x);
+}
+&.disabled[data-v-06a9c7b9] {
+    border: var(--kds-border-action-disabled);
+}
+& .toolbar-wrapper[data-v-06a9c7b9] {
+    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-06a9c7b9] {
+    border-bottom-right-radius: var(--kds-border-radius-container-0-37x);
+    border-bottom-left-radius: var(--kds-border-radius-container-0-37x);
+}
+}
+.embedded-toolbar {
+&[data-v-06a9c7b9] {
+  height: var(--toolbar-height);
+  padding: var(--kds-spacing-container-0-5x);
+  overflow-x: auto;
+  overscroll-behavior: contain;
+  white-space: pre;
+  scrollbar-width: none; /* for firefox */
+  background: var(--kds-color-background-input-initial);
+  border-bottom: var(--kds-border-base-muted);
+  -ms-overflow-style: none; /* needed to hide scroll bar in edge */
+}
+&[data-v-06a9c7b9]::-webkit-scrollbar {
+    display: none;
+}
+}
+.expand-enter-active[data-v-06a9c7b9],
+.expand-leave-active[data-v-06a9c7b9] {
+  transition: all 0.15s ease;
+}
+.expand-enter-from[data-v-06a9c7b9],
+.expand-leave-to[data-v-06a9c7b9] {
+  height: 0;
+  opacity: 0;
+}
+.expand-enter-to[data-v-06a9c7b9],
+.expand-leave-from[data-v-06a9c7b9] {
+  height: var(--toolbar-height);
+  opacity: 1;
+}