@knime/kds-rich-text-editor 1.3.1 → 2.0.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @knime/kds-rich-text-editor
 
+## 2.0.1
+
+### Patch Changes
+
+- Updated dependencies [d8bb77a]
+  - @knime/kds-styles@2.0.1
+  - @knime/kds-components@2.0.1
+
+## 2.0.0
+
+### Patch Changes
+
+- Updated dependencies [b698be1]
+- Updated dependencies [7d7918f]
+- Updated dependencies [d6af8e5]
+- Updated dependencies [d6af8e5]
+- Updated dependencies [d6af8e5]
+- Updated dependencies [c2d135a]
+- Updated dependencies [2779db1]
+- Updated dependencies [e774645]
+- Updated dependencies [c2d135a]
+  - @knime/kds-styles@2.0.0
+  - @knime/kds-components@2.0.0
+  - @knime/utils@1.12.0
+
 ## 1.3.1
 
 ### Patch Changes

package/dist/index.css

@@ -19,7 +19,7 @@
   gap: var(--kds-spacing-container-0-5x);
 }
 
-.tools[data-v-0163d303] {
+.tools[data-v-b3a757e3] {
   display: flex;
   gap: var(--kds-spacing-container-0-25x);
   align-items: center;
@@ -27,7 +27,7 @@
 }
 
 .editor-wrapper {
-&[data-v-7342ae63] {
+&[data-v-2bc5f7d4] {
   /* Fixed 44px toolbar height per the design (28px content + 8px padding on
    * each side); the small toolbar buttons (24px) center within the content
    * area. */
@@ -39,16 +39,16 @@
   position: relative;
   isolation: isolate;
 }
-&.disabled[data-v-7342ae63] {
+&.disabled[data-v-2bc5f7d4] {
     color: var(--kds-color-text-and-icon-disabled);
 }
 }
 
 /* stylelint-disable selector-class-pattern */
 .rich-text-editor {
-&[data-v-7342ae63] {
+&[data-v-2bc5f7d4] {
   height: 100%;
-  max-height: var(--v688daf92);
+  max-height: var(--b5683582);
   padding: var(--kds-spacing-container-0-5x);
   overflow-y: auto;
 
@@ -56,15 +56,15 @@
   /* stylelint-enable selector-class-pattern */
 }
 &.editable {
-&[data-v-7342ae63] {
+&[data-v-2bc5f7d4] {
     cursor: text;
     background: var(--kds-color-background-input-initial);
 }
-&[data-v-7342ae63] .ProseMirror {
-      min-height: var(--v1a3e32ee);
+&[data-v-2bc5f7d4] .ProseMirror {
+      min-height: var(--v6718b8de);
 }
 }
-&[data-v-7342ae63] .ProseMirror {
+&[data-v-2bc5f7d4] .ProseMirror {
     height: 100%;
     font: var(--kds-font-base-body-small);
 
@@ -175,7 +175,7 @@ a {
           margin-left: var(--kds-spacing-container-0-12x);
           content: "";
           background-color: var(--link-color);
-          mask-image: var(--v7ae662d6);
+          mask-image: var(--v6389a4c6);
           mask-repeat: no-repeat;
           mask-size: contain;
 }
@@ -224,34 +224,34 @@ td {
 }
 }
 }
-&[data-v-7342ae63] .ProseMirror:focus-visible,
-  &[data-v-7342ae63] .ProseMirror:focus {
+&[data-v-2bc5f7d4] .ProseMirror:focus-visible,
+  &[data-v-2bc5f7d4] .ProseMirror:focus {
     outline: transparent;
 }
 }
 .editor-wrapper.with-border {
-&[data-v-7342ae63] {
+&[data-v-2bc5f7d4] {
   border: var(--kds-border-action-input);
   border-radius: var(--kds-border-radius-container-0-37x);
 }
-&.disabled[data-v-7342ae63] {
+&.disabled[data-v-2bc5f7d4] {
     border: var(--kds-border-action-disabled);
 }
-& .toolbar-wrapper[data-v-7342ae63] {
+& .toolbar-wrapper[data-v-2bc5f7d4] {
     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-7342ae63] {
+& .rich-text-editor[data-v-2bc5f7d4] {
     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-7342ae63] {
+.editor-wrapper.show-focus-ring[data-v-2bc5f7d4] {
   outline: var(--kds-border-action-focused);
   outline-offset: var(--kds-spacing-offset-focus);
 }
 .embedded-toolbar {
-&[data-v-7342ae63] {
+&[data-v-2bc5f7d4] {
   height: var(--toolbar-height);
   padding: var(--kds-spacing-container-0-5x);
   overflow-x: auto;
@@ -262,7 +262,7 @@ td {
   border-bottom: var(--kds-border-base-muted);
   -ms-overflow-style: none; /* needed to hide scroll bar in edge */
 }
-&[data-v-7342ae63]::-webkit-scrollbar {
+&[data-v-2bc5f7d4]::-webkit-scrollbar {
     display: none;
 }
 }

package/dist/index.js

@@ -2323,15 +2323,6 @@ const modeDefinitions = [
   }
 ];
 Object.assign({}, ...modeDefinitions.map((obj) => ({ [obj.id]: obj })));
-
-const isMac = () => navigator?.userAgent?.toLowerCase()?.includes("mac");
-const isWindows = () => navigator?.userAgent?.toLowerCase()?.includes("windows");
-
-const navigator$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
-  __proto__: null,
-  isMac,
-  isWindows
-}, Symbol.toStringTag, { value: 'Module' }));
 const yearsPart = "(\\d+)\\s*y(?:ears?)?";
 const monthsPart = "(\\d+)\\s*m(?:o(?:nths?)?)?";
 const weeksPart = "(\\d+)\\s*w(?:eeks?)?";
@@ -2355,10 +2346,60 @@ new RegExp(
   `^\\s*-\\s*\\(\\s*${humanReadableDurationRegex.source.replace(/[$^]/g, "")}\\s*\\)\\s*$`,
   "i"
 );
+
+const hotkeyPlatform = {
+  MAC_OS: "macOS"};
+
+const isMac = () => navigator?.userAgent?.toLowerCase()?.includes("mac");
+const isWindows = () => navigator?.userAgent?.toLowerCase()?.includes("windows");
+
+const navigator$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  isMac,
+  isWindows
+}, Symbol.toStringTag, { value: 'Module' }));
+
+const globalKeyMap = {
+  ArrowUp: "↑",
+  ArrowDown: "↓",
+  ArrowLeft: "←",
+  ArrowRight: "→",
+  Enter: "↵",
+  " ": "Space",
+  // we use event.key and there space is an actual space not the code "Space"
+  CtrlOrCmd: "Ctrl"
+};
+const MacOSkeyMap = {
+  Shift: "⇧",
+  Delete: "⌫",
+  CtrlOrCmd: "⌘",
+  Ctrl: "⌃",
+  Alt: "⌥",
+  Enter: "↩"
+};
+const formatHotkey = (hotkey, platform) => {
+  const mapSymbols = (formatMap) => (key) => formatMap[key] ?? key;
+  const pipe = (...fns) => fns.reduce(
+    (f, g) => (arg) => g(f(arg)),
+    (arg) => arg
+  );
+  const macKeyFormatter = pipe(
+    mapSymbols(MacOSkeyMap),
+    mapSymbols(globalKeyMap)
+  );
+  const generalKeyFormatter = mapSymbols(globalKeyMap);
+  const useMacFormatter = platform === void 0 ? isMac() : platform === hotkeyPlatform.MAC_OS;
+  return useMacFormatter ? macKeyFormatter(hotkey) : generalKeyFormatter(hotkey);
+};
+const getDefaultSeparator = () => isMac() ? " " : "+";
+const formatHotkeys = (hotkeys, getSeparator = getDefaultSeparator) => hotkeys.map((hotkey) => formatHotkey(hotkey)).join(getSeparator());
 const getMetaOrCtrlKey = () => {
   return isMac() ? "metaKey" : "ctrlKey";
 };
 
+const hotkeys = {
+  formatHotkeys};
+
 const ExternalLinkIconUrl = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20stroke='currentColor'%20stroke-linecap='round'%20stroke-linejoin='round'%20viewBox='0%200%2012%2012'%3e%3cpath%20d='M5.5%201.5h-3a1%201%200%200%200-1%201v7a1%201%200%200%200%201%201h7a1%201%200%200%200%201-1v-3m0-5L6%205.892M10.5%201.5v2.75m0-2.75H7.75'%20vector-effect='non-scaling-stroke'/%3e%3c/svg%3e";
 
 const kdsCharacterCountDisplay = {
@@ -2505,7 +2546,7 @@ const clearHeading = (editor) => {
 const getHeadingOptionChild = (level, getEditor) => ({
   id: `${level}`,
   text: `Heading ${level}`,
-  hotkey: ["Ctrl", "Alt", `${level}`],
+  hotkey: ["CtrlOrCmd", "Alt", `${level}`],
   active: () => getEditor().isActive("heading", { level }),
   handler: () => {
     const editor = getEditor();
@@ -2522,7 +2563,7 @@ const getParagraphTextStyleTool = (getEditor) => {
       {
         id: "standard",
         text: "Standard",
-        hotkey: ["Ctrl", "Alt", "0"],
+        hotkey: ["CtrlOrCmd", "Alt", "0"],
         handler: () => {
           const editor = getEditor();
           clearHeading(editor);
@@ -2532,7 +2573,7 @@ const getParagraphTextStyleTool = (getEditor) => {
       {
         id: "small",
         text: "Small text",
-        hotkey: ["Ctrl", "Alt", "−"],
+        hotkey: ["CtrlOrCmd", "Alt", "−"],
         // this is a wider minus character for aesthetic reasons
         active: () => getEditor().isActive({ smallText: true }),
         handler: () => {
@@ -2694,7 +2735,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         id: "bold",
         type: "primary",
         text: "Bold",
-        hotkey: ["Ctrl", "B"],
+        hotkey: ["CtrlOrCmd", "B"],
         icon: "bold",
         active: () => props.editor.isActive("bold"),
         handler: () => props.editor.chain().focus().toggleBold().run()
@@ -2704,7 +2745,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         type: "primary",
         text: "Italic",
         icon: "italic",
-        hotkey: ["Ctrl", "I"],
+        hotkey: ["CtrlOrCmd", "I"],
         active: () => props.editor.isActive("italic"),
         handler: () => props.editor.chain().focus().toggleItalic().run()
       }),
@@ -2713,7 +2754,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         type: "primary",
         text: "Underline",
         icon: "underline",
-        hotkey: ["Ctrl", "U"],
+        hotkey: ["CtrlOrCmd", "U"],
         active: () => props.editor.isActive("underline"),
         handler: () => props.editor.chain().focus().toggleUnderline().run()
       }),
@@ -2722,7 +2763,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         type: "primary",
         text: "Bullet list",
         icon: "list-bulletpoint",
-        hotkey: ["Ctrl", "Shift", "8"],
+        hotkey: ["CtrlOrCmd", "Shift", "8"],
         active: () => props.editor.isActive("bulletList"),
         handler: () => {
           const commandChain = props.editor.chain().focus();
@@ -2737,7 +2778,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         type: "primary",
         text: "Ordered list",
         icon: "list-number",
-        hotkey: ["Ctrl", "Shift", "7"],
+        hotkey: ["CtrlOrCmd", "Shift", "7"],
         active: () => props.editor.isActive("orderedList"),
         handler: () => {
           const commandChain = props.editor.chain().focus();
@@ -2752,7 +2793,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         type: "primary",
         icon: "left-aligned",
         text: "Align left",
-        hotkey: ["Ctrl", "Shift", "L"],
+        hotkey: ["CtrlOrCmd", "Shift", "L"],
         active: () => !isListActive() && props.editor.isActive({ textAlign: "left" }),
         handler: () => props.editor.chain().focus().setTextAlign("left").run(),
         disabled: () => isListActive()
@@ -2762,7 +2803,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         type: "primary",
         icon: "center-aligned",
         text: "Align center",
-        hotkey: ["Ctrl", "Shift", "E"],
+        hotkey: ["CtrlOrCmd", "Shift", "E"],
         active: () => !isListActive() && props.editor.isActive({ textAlign: "center" }),
         handler: () => props.editor.chain().focus().setTextAlign("center").run(),
         disabled: () => isListActive()
@@ -2772,7 +2813,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         type: "primary",
         icon: "right-aligned",
         text: "Align right",
-        hotkey: ["Ctrl", "Shift", "R"],
+        hotkey: ["CtrlOrCmd", "Shift", "R"],
         active: () => !isListActive() && props.editor.isActive({ textAlign: "right" }),
         handler: () => props.editor.chain().focus().setTextAlign("right").run(),
         disabled: () => isListActive()
@@ -2782,7 +2823,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         type: "primary",
         icon: "link",
         text: "Link",
-        hotkey: ["Ctrl", "K"],
+        hotkey: ["CtrlOrCmd", "K"],
         active: () => props.editor.isActive("link"),
         handler: () => linkTool?.onLinkToolClick()
       }),
@@ -2803,7 +2844,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         type: "secondary",
         icon: "code-block",
         text: "Code block",
-        hotkey: ["Ctrl", "Alt", "C"],
+        hotkey: ["CtrlOrCmd", "Alt", "C"],
         active: () => props.editor.isActive("codeBlock"),
         handler: () => props.editor.chain().focus().toggleCodeBlock().run()
       }),
@@ -2812,7 +2853,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         type: "secondary",
         icon: "strikethrough",
         text: "Strikethrough",
-        hotkey: ["Ctrl", "Shift", "X"],
+        hotkey: ["CtrlOrCmd", "Shift", "X"],
         active: () => props.editor.isActive("strike"),
         handler: () => props.editor.chain().focus().toggleStrike().run()
       }),
@@ -2860,7 +2901,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           id: tool.id,
           text: tool.text,
           disabled: tool.disabled?.(),
-          shortcut: props.hotkeyFormatter(tool.hotkey ?? []),
+          shortcut: tool.hotkey ?? [],
           accessory: {
             type: "icon",
             name: tool.icon
@@ -2873,7 +2914,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               return {
                 id: toolChild.id,
                 text: toolChild.text,
-                shortcut: props.hotkeyFormatter(toolChild.hotkey ?? []),
+                shortcut: toolChild.hotkey ?? [],
                 handler: () => toolChild.handler(toolChild.id)
               };
             })
@@ -2917,7 +2958,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const RichTextEditorToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-0163d303"]]);
+const RichTextEditorToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-b3a757e3"]]);
 
 const CustomEscape = Extension.create({
   name: "OverrideEscape",
@@ -3053,16 +3094,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     minHeight: { default: null },
     maxHeight: { default: null },
     baseExtensions: { default: () => ({}) },
-    hotkeyFormatter: { type: Function, default: (hotkey) => {
-      const MacOSkeyMap = {
-        Shift: "⇧",
-        Ctrl: "⌘",
-        Alt: "⌥"
-      };
-      const mapSymbols = (key) => MacOSkeyMap[key] || key;
-      const identityFn = (value) => value;
-      return hotkey.map(navigator$1.isMac() ? mapSymbols : identityFn).join(" ");
-    } },
+    hotkeyFormatter: { type: Function, default: hotkeys.formatHotkeys },
     customExtensions: { default: () => [] },
     autofocus: { type: Boolean, default: false },
     withBorder: { type: Boolean, default: true },
@@ -3084,9 +3116,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   emits: /* @__PURE__ */ mergeModels(["blur"], ["update:modelValue"]),
   setup(__props, { expose: __expose, emit: __emit }) {
     useCssVars((_ctx) => ({
-      "v688daf92": maxHeightStyle.value,
-      "v1a3e32ee": minHeightStyle.value,
-      "v7ae662d6": externalIcon
+      "b5683582": maxHeightStyle.value,
+      "v6718b8de": minHeightStyle.value,
+      "v6389a4c6": externalIcon
     }));
     const hardCharacterLimit = Math.max(
       __props.characterLimit.maxCharacters ?? 1e3,
@@ -3295,7 +3327,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsRichTextEditor = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-7342ae63"]]);
+const KdsRichTextEditor = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-2bc5f7d4"]]);
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "KdsRichTextInput",