@knime/kds-rich-text-editor 0.30.4

package/dist/src/types.d.ts

@@ -0,0 +1,112 @@
+import { AnyExtension } from '@tiptap/core';
+import { KdsLinkToolOptions } from './utils/custom-link';
+export type KdsBaseExtensionsConfig = {
+    bold?: true;
+    italic?: true;
+    underline?: true;
+    textAlign?: true;
+    bulletList?: true;
+    orderedList?: true;
+    heading?: true;
+    paragraphTextStyle?: true;
+    blockquote?: true;
+    code?: true;
+    codeBlock?: true;
+    horizontalRule?: true;
+    strike?: true;
+    link?: true;
+};
+type BaseExtensions = KdsBaseExtensionsConfig | ({
+    [key in keyof KdsBaseExtensionsConfig]: never;
+} & {
+    all: boolean;
+});
+export type KdsRichTextEditorProps = {
+    editable?: boolean;
+    /**
+     * Min height the editor should have. By default this is unset, so
+     * the editor will fir the min content
+     */
+    minHeight?: number | null;
+    /**
+     * Max height the editor can have. The editor container will grow up to this
+     * value before it starts to overflow the content. By default this is unset, so
+     * the editor will grow with the content
+     */
+    maxHeight?: number | null;
+    /**
+     * Extensions that should be enabled. By default all are disabled and you
+     * have to opt-in to use them
+     */
+    baseExtensions?: BaseExtensions;
+    /**
+     * Function to format the display value of each tool's hotkeys as a title when hovered.
+     * Receives as parameter the key combinations of each tool and should return
+     * the string to be displayed in the title
+     * @param hotkey
+     */
+    hotkeyFormatter?: (hotkey: Array<string>) => string;
+    /**
+     * Custom extensions that you want to use for the editor
+     */
+    customExtensions?: Array<AnyExtension>;
+    /**
+     * Whether to automatically focus the editor on mount. Also applies when the
+     * editable prop changes. False by default
+     */
+    autofocus?: boolean;
+    /**
+     * Whether the editor renders with a border or not. e.g Workflow Annotations use a borderless editor
+     */
+    withBorder?: boolean;
+    /**
+     * Whether the editor is in a disabled state. This state changes its style, sets the
+     * editor to non-editable and hides the toolbar. In the disabled state, the editor won't
+     * react to changes of the editable prop.
+     */
+    disabled?: boolean;
+    /**
+     * Only used if the link tool is enabled. If not set, the url will not be checked.
+     * @param url
+     */
+    linkToolOptions?: KdsLinkToolOptions;
+    /**
+     * Max number of allowed characters in the editor. When the user has 100 characters
+     * or less left, then a visual counter will be displayed to the user.
+     *
+     * Notes:
+     * - Defaults to 1000 and cannot be under 200
+     * - When a number less than 200 is supplied, the editor will fallback to 200
+     * - This prop is *intentionally* **not** reactive. This is because this acts
+     *   as a configuration that is given to the editor upon usage rather than a
+     *   dynamic value. Having an increasingly changing value defeats
+     *   the purpose of having a limit
+     */
+    characterLimit?: number;
+    /**
+     * Whether the character counter (`x / limit characters`) is shown below the
+     * editor. The `characterLimit` is still enforced when hidden — this only
+     * controls the visibility of the counter, e.g. when the limit is high enough
+     * that surfacing it would only add noise.
+     *
+     * Defaults to `false`.
+     */
+    showCharacterCount?: boolean;
+    /**
+     * Custom handler when pressing `Esc` in the keyboard.
+     * @returns whether the shortcut command is handled or not
+     */
+    customEscapeHandler?: () => boolean;
+    /**
+     * Accessible label for the editor (for aria-label). Provide this when the
+     * editor has no visible label. Prefer `ariaLabelledby` when a visible label
+     * element exists.
+     */
+    ariaLabel?: string;
+    /**
+     * ID of the element that labels this editor (for aria-labelledby).
+     */
+    ariaLabelledby?: string;
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/src/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAE9D,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,IAAI,CAAC;IACd,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,UAAU,CAAC,EAAE,IAAI,CAAC;IAClB,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,kBAAkB,CAAC,EAAE,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,IAAI,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,cAAc,CAAC,EAAE,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,IAAI,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,CAAC;CACb,CAAC;AAEF,KAAK,cAAc,GACf,uBAAuB,GACvB,CAAC;KAAG,GAAG,IAAI,MAAM,uBAAuB,GAAG,KAAK;CAAE,GAAG;IAAE,GAAG,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAE3E,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;;;;OAKG;IACH,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,MAAM,CAAC;IACpD;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IACvC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,kBAAkB,CAAC;IACrC;;;;;;;;;;;OAWG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC;IACpC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC"}

package/dist/src/utils/custom-escape.d.ts

@@ -0,0 +1,15 @@
+import { Extension } from '@tiptap/vue-3';
+/**
+ * TODO UIEXT-1461 Remove and resolve properly with https://knime-com.atlassian.net/browse/UIEXT-1461-
+ */
+type CustomEscapeExtensionOptions = {
+    handler: () => boolean;
+};
+declare module "@tiptap/core" {
+    interface ExtensionOptions {
+        customEscape: CustomEscapeExtensionOptions;
+    }
+}
+export declare const CustomEscape: Extension<CustomEscapeExtensionOptions, any>;
+export {};
+//# sourceMappingURL=custom-escape.d.ts.map

package/dist/src/utils/custom-escape.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-escape.d.ts","sourceRoot":"","sources":["../../../src/utils/custom-escape.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C;;GAEG;AACH,KAAK,4BAA4B,GAAG;IAClC,OAAO,EAAE,MAAM,OAAO,CAAC;CACxB,CAAC;AAEF,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,gBAAgB;QACxB,YAAY,EAAE,4BAA4B,CAAC;KAC5C;CACF;AAED,eAAO,MAAM,YAAY,8CAcvB,CAAC"}

package/dist/src/utils/custom-hard-break.d.ts

@@ -0,0 +1,2 @@
+export declare const CustomHardBreak: import('@tiptap/core').Node<import('@tiptap/extension-hard-break').HardBreakOptions, any>;
+//# sourceMappingURL=custom-hard-break.d.ts.map

package/dist/src/utils/custom-hard-break.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-hard-break.d.ts","sourceRoot":"","sources":["../../../src/utils/custom-hard-break.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,2FAM1B,CAAC"}

package/dist/src/utils/custom-link.d.ts

@@ -0,0 +1,16 @@
+export declare const validateURL: (href: string) => boolean;
+export type KdsLinkToolOptions = {
+    /**
+     * Custom function that can be supplied to validate urls added with the link tool
+     * @param url The url of the link to be added
+     */
+    urlValidator: (url: string) => boolean;
+    /**
+     * Custom function that can, e.g., be used to append a protocol like https:// to a url if not present
+     * @param url The url of the link to be added
+     */
+    sanitizeUrlText: (url: string) => string;
+};
+export declare const kdsDefaultLinkToolOptions: KdsLinkToolOptions;
+export declare const CustomLink: import('@tiptap/core').Mark<import('@tiptap/extension-link').LinkOptions, any>;
+//# sourceMappingURL=custom-link.d.ts.map

package/dist/src/utils/custom-link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-link.d.ts","sourceRoot":"","sources":["../../../src/utils/custom-link.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,WAAW,GAAI,MAAM,MAAM,YAAyB,CAAC;AAElE,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;OAGG;IACH,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC;;;OAGG;IACH,eAAe,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,kBAQvC,CAAC;AAEF,eAAO,MAAM,UAAU,gFA+CrB,CAAC"}

package/dist/src/utils/custom-text-align.d.ts

@@ -0,0 +1,2 @@
+export declare const CustomTextAlign: import('@tiptap/core').Extension<import('@tiptap/extension-text-align').TextAlignOptions, any>;
+//# sourceMappingURL=custom-text-align.d.ts.map

package/dist/src/utils/custom-text-align.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-text-align.d.ts","sourceRoot":"","sources":["../../../src/utils/custom-text-align.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,gGAkB1B,CAAC"}

package/dist/src/utils/paragraphTextStyle/extension.d.ts

@@ -0,0 +1,17 @@
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        fontSize: {
+            /**
+             * Sets a custom class on the paragraph which is used to set a small font size
+             */
+            setSmallText: () => ReturnType;
+            /**
+             * Reverts setSmallText
+             */
+            unsetSmallText: () => ReturnType;
+        };
+    }
+}
+declare const SmallText: import('@tiptap/core').Node<import('@tiptap/extension-paragraph').ParagraphOptions, any>;
+export { SmallText };
+//# sourceMappingURL=extension.d.ts.map

package/dist/src/utils/paragraphTextStyle/extension.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extension.d.ts","sourceRoot":"","sources":["../../../../src/utils/paragraphTextStyle/extension.ts"],"names":[],"mappings":"AAEA,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,QAAQ,EAAE;YACR;;eAEG;YACH,YAAY,EAAE,MAAM,UAAU,CAAC;YAC/B;;eAEG;YACH,cAAc,EAAE,MAAM,UAAU,CAAC;SAClC,CAAC;KACH;CACF;AAED,QAAA,MAAM,SAAS,0FA6Cb,CAAC;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/src/utils/paragraphTextStyle/index.d.ts

@@ -0,0 +1,4 @@
+import { Editor } from '@tiptap/vue-3';
+import { EditorToolSecondaryItem } from '../../toolbar/types';
+export declare const getParagraphTextStyleTool: (getEditor: () => Editor) => EditorToolSecondaryItem;
+//# sourceMappingURL=index.d.ts.map

package/dist/src/utils/paragraphTextStyle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/paragraphTextStyle/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,KAAK,EACV,uBAAuB,EAExB,MAAM,qBAAqB,CAAC;AA4B7B,eAAO,MAAM,yBAAyB,GACpC,WAAW,MAAM,MAAM,KACtB,uBAiCF,CAAC"}

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@knime/kds-rich-text-editor",
+  "version": "0.30.4",
+  "description": "Package containing the RichTextEditor component which follows the KNIME Design System",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/knime/knime-designsystem.git",
+    "directory": "packages/rich-text-editor"
+  },
+  "license": "GPL 3 and Additional Permissions according to Sec. 7 (SEE the file LICENSE)",
+  "author": "KNIME AG, Zurich, Switzerland",
+  "keywords": [
+    "knime",
+    "design system",
+    "documentation",
+    "storybook",
+    "rich-text",
+    "editor"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "CHANGELOG.md"
+  ],
+  "peerDependencies": {
+    "vue": "~3.5.0",
+    "@knime/kds-components": "^0.30.4"
+  },
+  "dependencies": {
+    "@knime/utils": "^1.11.0",
+    "consola": "^3.4.2",
+    "@tiptap/core": "^3.25.0",
+    "@tiptap/extension-character-count": "^3.25.0",
+    "@tiptap/extension-hard-break": "^3.25.0",
+    "@tiptap/extension-heading": "^3.25.0",
+    "@tiptap/extension-link": "^3.25.0",
+    "@tiptap/extension-paragraph": "^3.25.0",
+    "@tiptap/extension-text-align": "^3.25.0",
+    "@tiptap/pm": "^3.25.0",
+    "@tiptap/starter-kit": "^3.25.0",
+    "@tiptap/vue-3": "^3.25.0",
+    "@knime/kds-styles": "^0.30.4"
+  },
+  "devDependencies": {
+    "@storybook/vue3-vite": "^10.4.3",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/tsconfig": "^0.9.1",
+    "storybook": "^10.4.3",
+    "ts-morph": "^28.0.0",
+    "vite": "^7.3.2",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-lib-inject-css": "^2.2.2",
+    "vite-svg-loader": "^5.1.1",
+    "vue": "3.5.32",
+    "vue-tsc": "^3.3.4",
+    "@knime/kds-components": "^0.30.4"
+  },
+  "engines": {
+    "node": "24.10.0",
+    "npm": "please-use-pnpm"
+  },
+  "scripts": {
+    "build": "vite build",
+    "type-check": "vue-tsc --build"
+  }
+}