@knime/kds-rich-text-editor 12.0.0 → 13.0.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @knime/kds-rich-text-editor
 
+## 13.0.0
+
+### Patch Changes
+
+- d61ae48: `KdsRichTextEditor`: render micro icons at 8px instead of 9px.
+- 40af2ac: `KdsRichTextEditor`: show the toolbar button tooltips as action followed by shortcut (e.g. `Bold – ⌘B`) instead of showing just the shortcut.
+- Updated dependencies [d61ae48]
+  - @knime/kds-components@13.0.0
+  - @knime/kds-styles@13.0.0
+
 ## 12.0.0
 
 ### Patch Changes

package/dist/index.css

@@ -19,7 +19,7 @@
   gap: var(--kds-spacing-container-0-5x);
 }
 
-.tools[data-v-b3a757e3] {
+.tools[data-v-7519cb37] {
   display: flex;
   gap: var(--kds-spacing-container-0-25x);
   align-items: center;
@@ -27,7 +27,7 @@
 }
 
 .editor-wrapper {
-&[data-v-f0330e9f] {
+&[data-v-a47355b9] {
   /* Fixed 44px toolbar height per the design (28px content + 8px padding on
    * each side); the small toolbar buttons (24px) center within the content
    * area. */
@@ -40,32 +40,32 @@
   height: 100%;
   isolation: isolate;
 }
-&.disabled[data-v-f0330e9f] {
+&.disabled[data-v-a47355b9] {
     color: var(--kds-color-text-and-icon-disabled);
 }
 }
 
 /* stylelint-disable selector-class-pattern */
 .rich-text-editor {
-&[data-v-f0330e9f] {
+&[data-v-a47355b9] {
   height: 100%;
-  max-height: var(--v2a0392e8);
+  max-height: var(--v661cc302);
   overflow-y: auto;
 
   /* stylelint-disable knime/no-deep-nesting */
   /* stylelint-enable selector-class-pattern */
 }
 &.editable {
-&[data-v-f0330e9f] {
+&[data-v-a47355b9] {
     padding: var(--kds-spacing-container-0-5x);
     cursor: text;
     background: var(--kds-color-background-input-initial);
 }
-&[data-v-f0330e9f] .ProseMirror {
-      min-height: var(--v512b513a);
+&[data-v-a47355b9] .ProseMirror {
+      min-height: var(--e576fd58);
 }
 }
-&[data-v-f0330e9f] .ProseMirror {
+&[data-v-a47355b9] .ProseMirror {
     height: 100%;
     font: var(--kds-font-base-body-small);
 
@@ -210,12 +210,12 @@ a {
 }
 &::after {
           display: block;
-          width: var(--kds-dimension-icon-0-56x);
-          height: var(--kds-dimension-icon-0-56x);
+          width: var(--kds-dimension-icon-0-5x);
+          height: var(--kds-dimension-icon-0-5x);
           margin-left: var(--kds-spacing-container-0-12x);
           content: "";
           background-color: var(--link-color);
-          mask-image: var(--v69243186);
+          mask-image: var(--v0bc2bfc0);
           mask-repeat: no-repeat;
           mask-size: contain;
 }
@@ -264,34 +264,34 @@ td {
 }
 }
 }
-&[data-v-f0330e9f] .ProseMirror:focus-visible,
-  &[data-v-f0330e9f] .ProseMirror:focus {
+&[data-v-a47355b9] .ProseMirror:focus-visible,
+  &[data-v-a47355b9] .ProseMirror:focus {
     outline: transparent;
 }
 }
 .editor-wrapper.with-border {
-&[data-v-f0330e9f] {
+&[data-v-a47355b9] {
   border: var(--kds-border-action-input);
   border-radius: var(--kds-border-radius-container-0-37x);
 }
-&.disabled[data-v-f0330e9f] {
+&.disabled[data-v-a47355b9] {
     border: var(--kds-border-action-disabled);
 }
-& .toolbar-wrapper[data-v-f0330e9f] {
+& .toolbar-wrapper[data-v-a47355b9] {
     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-f0330e9f] {
+& .rich-text-editor[data-v-a47355b9] {
     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-f0330e9f] {
+.editor-wrapper.show-focus-ring[data-v-a47355b9] {
   outline: var(--kds-border-action-focused);
   outline-offset: var(--kds-spacing-offset-focus);
 }
 .embedded-toolbar {
-&[data-v-f0330e9f] {
+&[data-v-a47355b9] {
   height: var(--toolbar-height);
   padding: var(--kds-spacing-container-0-5x);
   overflow-x: auto;
@@ -302,7 +302,7 @@ td {
   border-bottom: var(--kds-border-base-muted);
   -ms-overflow-style: none; /* needed to hide scroll bar in edge */
 }
-&[data-v-f0330e9f]::-webkit-scrollbar {
+&[data-v-a47355b9]::-webkit-scrollbar {
     display: none;
 }
 }

package/dist/index.js

@@ -3282,6 +3282,10 @@ var RichTextEditorToolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_defa
 		const props = __props;
 		const baseTools = computed(() => props.tools.filter(({ type }) => type === "primary"));
 		const secondaryTools = computed(() => props.tools.filter(({ type }) => type === "secondary"));
+		const getTooltip = (tool) => {
+			const hotkey = tool.hotkey ?? [];
+			return hotkey.length > 0 ? `${tool.text} – ${props.hotkeyFormatter(hotkey)}` : tool.text;
+		};
 		const secondaryToolsMenuItems = computed(() => {
 			return secondaryTools.value.map((tool) => {
 				const base = {
@@ -3321,7 +3325,7 @@ var RichTextEditorToolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_defa
 					disabled: tool.disabled?.(),
 					toggled: tool.active?.(),
 					"leading-icon": tool.icon,
-					tooltip: __props.hotkeyFormatter(tool.hotkey ?? []),
+					tooltip: getTooltip(tool),
 					variant: "transparent",
 					size: "small",
 					onKeydown: withKeys(withModifiers(($event) => tool.handler?.(tool.id), ["prevent"]), ["enter"]),
@@ -3346,7 +3350,7 @@ var RichTextEditorToolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_defa
 			}, null, 8, ["items"])) : createCommentVNode("", true)]);
 		};
 	}
-}), [["__scopeId", "data-v-b3a757e3"]]);
+}), [["__scopeId", "data-v-7519cb37"]]);
 //#endregion
 //#region src/utils/custom-escape.ts
 var CustomEscape = Extension.create({
@@ -3512,9 +3516,9 @@ var KdsRichTextEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 	emits: /*@__PURE__*/ mergeModels(["blur"], ["update:modelValue"]),
 	setup(__props, { expose: __expose, emit: __emit }) {
 		useCssVars((_ctx) => ({
-			"v2a0392e8": maxHeightStyle.value,
-			"v512b513a": minHeightStyle.value,
-			"v69243186": externalIcon
+			"v661cc302": maxHeightStyle.value,
+			"e576fd58": minHeightStyle.value,
+			"v0bc2bfc0": externalIcon
 		}));
 		const hardCharacterLimit = __props.editable ? Math.max(__props.characterLimit.maxCharacters ?? 1e3, MIN_CHARACTER_LIMIT) : Infinity;
 		const characterCountDisplay = __props.characterLimit.display ?? kdsCharacterCountDisplay.NEVER;
@@ -3684,7 +3688,7 @@ var KdsRichTextEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 			])]);
 		};
 	}
-}), [["__scopeId", "data-v-f0330e9f"]]);
+}), [["__scopeId", "data-v-a47355b9"]]);
 //#endregion
 //#region src/KdsRichTextInput.vue
 var KdsRichTextInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({