@vonage/vivid 5.14.0 → 5.15.0

package/icon/definition.cjs

@@ -10,7 +10,7 @@ const fastWebUtilities = require('@microsoft/fast-web-utilities');
 const styles = ":host{display:inline-block;vertical-align:sub}.control.connotation-accent{--_connotation-color-primary: var(--vvd-icon-accent-primary, var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-icon-announcement-primary, var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-icon-cta-primary, var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary: var(--vvd-icon-success-primary, var(--vvd-color-success-500))}.control.connotation-warning{--_connotation-color-primary: var(--vvd-icon-warning-primary, var(--vvd-color-warning-300))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-icon-alert-primary, var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary: var(--vvd-icon-information-primary, var(--vvd-color-information-500))}.control.size--6{--_icon-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.control.size--5{--_icon-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--4{--_icon-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--3{--_icon-block-size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--2{--_icon-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--1{--_icon-block-size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-0{--_icon-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-1{--_icon-block-size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-2{--_icon-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-3{--_icon-block-size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-4{--_icon-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-5{--_icon-block-size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_icon-block-size: 1em}.control{display:flex;margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size)}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){margin:auto;block-size:inherit;inline-size:inherit}";
 
 const ICONS_BASE_URL = 'https://icon.resources.vonage.com';
-const ICONS_VERSION = '4.7.2';
+const ICONS_VERSION = '4.8.0';
 
 const numberConverter = {
   toView(value) {

package/icon/definition.js

@@ -6,7 +6,7 @@ import { classNames } from '@microsoft/fast-web-utilities';
 const styles = ":host{display:inline-block;vertical-align:sub}.control.connotation-accent{--_connotation-color-primary: var(--vvd-icon-accent-primary, var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-icon-announcement-primary, var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-icon-cta-primary, var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary: var(--vvd-icon-success-primary, var(--vvd-color-success-500))}.control.connotation-warning{--_connotation-color-primary: var(--vvd-icon-warning-primary, var(--vvd-color-warning-300))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-icon-alert-primary, var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary: var(--vvd-icon-information-primary, var(--vvd-color-information-500))}.control.size--6{--_icon-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.control.size--5{--_icon-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--4{--_icon-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--3{--_icon-block-size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--2{--_icon-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--1{--_icon-block-size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-0{--_icon-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-1{--_icon-block-size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-2{--_icon-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-3{--_icon-block-size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-4{--_icon-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-5{--_icon-block-size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_icon-block-size: 1em}.control{display:flex;margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size)}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){margin:auto;block-size:inherit;inline-size:inherit}";
 
 const ICONS_BASE_URL = 'https://icon.resources.vonage.com';
-const ICONS_VERSION = '4.7.2';
+const ICONS_VERSION = '4.8.0';
 
 const numberConverter = {
   toView(value) {

package/index.cjs

@@ -270,6 +270,7 @@ exports.RteHtmlSerializer = richTextEditor_definition.RteHtmlSerializer;
 exports.RteInlineImageFeature = richTextEditor_definition.RteInlineImageFeature;
 exports.RteInputRuleFeature = richTextEditor_definition.RteInputRuleFeature;
 exports.RteItalicFeature = richTextEditor_definition.RteItalicFeature;
+exports.RteKeyboardShortcutsFeature = richTextEditor_definition.RteKeyboardShortcutsFeature;
 exports.RteLinkFeature = richTextEditor_definition.RteLinkFeature;
 exports.RteListFeature = richTextEditor_definition.RteListFeature;
 exports.RteMonospaceFeature = richTextEditor_definition.RteMonospaceFeature;

package/index.js

@@ -51,7 +51,7 @@ export { VwcProgressElement, progressDefinition, registerProgress } from './prog
 export { VwcRadioGroupElement, radioGroupDefinition, registerRadioGroup } from './radio-group/definition.js';
 export { VwcRadioElement, radioDefinition, registerRadio } from './radio/definition.js';
 export { VwcRangeSliderElement, rangeSliderDefinition, registerRangeSlider } from './range-slider/definition.js';
-export { RteAlignmentFeature, RteAtomFeature, RteBase, RteBoldFeature, RteConfig, RteDropHandlerFeature, RteFileHandlerFeature, RteFontSizePickerFeature, RteHardBreakFeature, RteHtmlParser, RteHtmlSerializer, RteInlineImageFeature, RteInputRuleFeature, RteItalicFeature, RteLinkFeature, RteListFeature, RteMonospaceFeature, RtePlaceholderFeature, RteStrikethroughFeature, RteSuggestFeature, RteTextBlockPickerFeature, RteTextColorPickerFeature, RteToolbarButtonFeature, RteToolbarFeature, RteUnderlineFeature, VwcRichTextEditorElement, registerRichTextEditor, richTextEditorDefinition } from './rich-text-editor/definition.js';
+export { RteAlignmentFeature, RteAtomFeature, RteBase, RteBoldFeature, RteConfig, RteDropHandlerFeature, RteFileHandlerFeature, RteFontSizePickerFeature, RteHardBreakFeature, RteHtmlParser, RteHtmlSerializer, RteInlineImageFeature, RteInputRuleFeature, RteItalicFeature, RteKeyboardShortcutsFeature, RteLinkFeature, RteListFeature, RteMonospaceFeature, RtePlaceholderFeature, RteStrikethroughFeature, RteSuggestFeature, RteTextBlockPickerFeature, RteTextColorPickerFeature, RteToolbarButtonFeature, RteToolbarFeature, RteUnderlineFeature, VwcRichTextEditorElement, registerRichTextEditor, richTextEditorDefinition } from './rich-text-editor/definition.js';
 export { VwcRichTextViewElement, registerRichTextView, richTextViewDefinition } from './rich-text-view/definition.js';
 export { VwcSearchableSelectElement, registerSearchableSelect } from './searchable-select/definition.js';
 export { VwcSelectElement, registerSelect, selectDefinition } from './select/definition.js';

package/lib/rich-text-editor/rte/exports.d.ts

@@ -20,6 +20,7 @@ export { RteDropHandlerFeature } from './features/drop-handler';
 export { RteToolbarButtonFeature } from './features/toolbar-button';
 export { RteAtomFeature } from './features/atom';
 export { RteInputRuleFeature } from './features/input-rule';
+export { RteKeyboardShortcutsFeature } from './features/keyboard-shortcuts';
 export { RteSuggestFeature } from './features/suggest';
 export { RteHtmlParser } from './html-parser';
 export { RteHtmlSerializer } from './html-serializer';

package/lib/rich-text-editor/rte/features/keyboard-shortcuts.d.ts

@@ -0,0 +1,16 @@
+import { PluginContribution, RteFeatureImpl } from '../feature';
+import { RteInstance, RteInstanceImpl } from '../instance';
+export type KeyboardShortcutHandler = (rteInstance: RteInstance) => boolean;
+export interface RteKeyboardShortcutsFeatureOptions {
+    shortcuts: Record<string, KeyboardShortcutHandler>;
+}
+export declare class RteKeyboardShortcutsFeatureImpl extends RteFeatureImpl {
+    featureId: string;
+    protected readonly options: RteKeyboardShortcutsFeatureOptions;
+    name: string;
+    constructor(featureId: string, options: RteKeyboardShortcutsFeatureOptions);
+    getPlugins(rte: RteInstanceImpl): PluginContribution[];
+}
+export declare const RteKeyboardShortcutsFeature: {
+    new (featureId: string, options: RteKeyboardShortcutsFeatureOptions): {};
+};

package/lib/rich-text-editor/rte/instance.d.ts

@@ -35,6 +35,7 @@ export declare class RteInstance {
 }
 export declare class RteInstanceImpl {
     readonly options?: RteInstanceOptions | undefined;
+    readonly facade: RteInstance;
     state: EditorState;
     readonly config: RteConfigImpl;
     readonly schema: Schema;
@@ -45,7 +46,7 @@ export declare class RteInstanceImpl {
     readonly foreignHtmlSerializer: RteHtmlSerializer;
     getFeature<T extends RteFeatureImpl>(name: string): T;
     getPublicInterface(Feature: Constructor<RteFeature>, featureId?: string): any;
-    constructor(configFacade: RteConfig, options?: RteInstanceOptions | undefined);
+    constructor(instanceFacade: RteInstance, configFacade: RteConfig, options?: RteInstanceOptions | undefined);
     protected initState(initialDoc?: RteDocument): void;
     reset(initialDocument?: RteDocument): void;
     view: EditorView | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "5.14.0",
+  "version": "5.15.0",
   "homepage": "https://vivid.deno.dev",
   "bugs": {
     "url": "https://github.com/Vonage/vivid-3/issues"
@@ -88,14 +88,14 @@
     "vitest-axe": "^0.1.0",
     "vitest-fetch-mock": "^0.4.5",
     "wait-on": "^8.0.5",
-    "@repo/consts": "1.0.0",
     "@repo/eslint-config": "1.0.0",
-    "@repo/shared": "1.0.0",
-    "@repo/stylelint-config": "1.0.0",
     "@repo/cem-analyzer-plugins": "1.0.0",
     "@repo/eslint-plugin-repo": "1.0.0",
+    "@repo/stylelint-config": "1.0.0",
+    "@repo/shared": "1.0.0",
     "@repo/styles": "1.0.0",
     "@repo/tokens": "1.0.0",
+    "@repo/consts": "1.0.0",
     "@repo/tools": "1.0.0",
     "@repo/typescript-config": "1.0.0",
     "@repo/vitest-config": "1.0.0"

package/rich-text-editor/definition.cjs

@@ -20,7 +20,7 @@ const divider = require('../unbundled/divider.cjs');
 const DOMPurify = require('dompurify');
 const mixins = require('../unbundled/mixins.cjs');
 
-const styles = ":host{display:block}.rte{display:flex;flex-direction:column;block-size:100%}.editor{display:contents}.editor-viewport{position:relative;overflow:hidden;flex:1;contain:layout}.editor-scroll-area{--editor-padding-block: 8px;--editor-padding-inline: 16px;display:flex;flex-direction:column;background-color:var(--vvd-color-canvas);block-size:100%;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);overflow-y:auto;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.editor-scroll-area{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.editor-scroll-area ::-webkit-scrollbar{width:4px}.editor-scroll-area ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.editor-scroll-area ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.popovers--disabled>*{display:none!important}";
+const styles = ":host{display:flex;flex-direction:column}.rte{display:flex;flex-direction:column;block-size:100%;min-block-size:0}.editor{display:contents}.editor-viewport{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;contain:layout;min-block-size:0}.editor-scroll-area{--editor-padding-inline: var( --rich-text-editor-padding-inline, 16px );--editor-padding-block: var( --rich-text-editor-padding-block, 8px );display:flex;flex:1;flex-direction:column;background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);min-block-size:0;overflow-y:auto;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.editor-scroll-area{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.editor-scroll-area ::-webkit-scrollbar{width:4px}.editor-scroll-area ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.editor-scroll-area ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.popovers--disabled>*{display:none!important}";
 
 // Recovery values encode a range index and an offset. They are
 // represented as numbers, because tons of them will be created when
@@ -11504,6 +11504,22 @@ class RteCoreImpl extends slottableRequest.RteFeatureImpl {
     ];
   }
   getPlugins(rte) {
+    const enterKeyChainCommands = chainCommands(
+      newlineInCode,
+      createParagraphNear,
+      liftEmptyBlock,
+      splitBlockAs((node, atEnd, $from) => {
+        if (!atEnd) {
+          return { type: node.type, attrs: node.attrs };
+        }
+        return {
+          type: defaultTextblockForMatch(
+            $from.node($from.depth - 1).contentMatchAt($from.indexAfter($from.depth - 1))
+          ),
+          attrs: rte.textblockAttrs.extractFromNode(node)
+        };
+      })
+    );
     return [
       this.contribution(this.disabled.plugin),
       this.contribution(
@@ -11540,22 +11556,8 @@ class RteCoreImpl extends slottableRequest.RteFeatureImpl {
       this.contribution(
         keymap({
           ...baseKeymap,
-          Enter: chainCommands(
-            newlineInCode,
-            createParagraphNear,
-            liftEmptyBlock,
-            splitBlockAs((node, atEnd, $from) => {
-              if (!atEnd) {
-                return { type: node.type, attrs: node.attrs };
-              }
-              return {
-                type: defaultTextblockForMatch(
-                  $from.node($from.depth - 1).contentMatchAt($from.indexAfter($from.depth - 1))
-                ),
-                attrs: rte.textblockAttrs.extractFromNode(node)
-              };
-            })
-          )
+          Enter: enterKeyChainCommands,
+          "Shift-Enter": enterKeyChainCommands
         })
       ),
       this.contribution(dropCursor()),
@@ -11769,7 +11771,7 @@ class RteInstance {
     this.feature = (Feature, featureId) => {
       return this[slottableRequest.impl].getPublicInterface(Feature, featureId);
     };
-    this[slottableRequest.impl] = new RteInstanceImpl(config, options);
+    this[slottableRequest.impl] = new RteInstanceImpl(this, config, options);
   }
   /**
    * Returns the current document state.
@@ -11825,7 +11827,7 @@ class RteInstance {
   }
 }
 class RteInstanceImpl {
-  constructor(configFacade, options) {
+  constructor(instanceFacade, configFacade, options) {
     this.options = options;
     this.view = null;
     this.dispatchTransaction = (tr) => {
@@ -11837,6 +11839,7 @@ class RteInstanceImpl {
       }
       return this.state;
     };
+    this.facade = instanceFacade;
     const config = configFacade[slottableRequest.impl];
     this.config = config;
     this.schema = config.schema;
@@ -12752,7 +12755,7 @@ class RteHardBreakFeatureImpl extends slottableRequest.RteFeatureImpl {
     const keyBindings = {
       "Shift-Enter": forceBreak
     };
-    return [this.contribution(keymap(keyBindings))];
+    return [this.contribution(keymap(keyBindings), slottableRequest.contributionPriority.high)];
   }
 }
 const RteHardBreakFeature = slottableRequest.featureFacade(RteHardBreakFeatureImpl);
@@ -15179,6 +15182,31 @@ class RteInputRuleFeatureImpl extends slottableRequest.RteFeatureImpl {
 }
 const RteInputRuleFeature = slottableRequest.featureFacade(RteInputRuleFeatureImpl);
 
+function toCommand(handler, rteInstance) {
+  if (handler.length === 0) {
+    return (_state, _dispatch) => handler();
+  }
+  return (_state, _dispatch) => handler(rteInstance);
+}
+class RteKeyboardShortcutsFeatureImpl extends slottableRequest.RteFeatureImpl {
+  constructor(featureId, options) {
+    super();
+    this.featureId = featureId;
+    this.options = options;
+    this.name = `RteKeyboardShortcutsFeature[${featureId}]`;
+  }
+  getPlugins(rte) {
+    const bindings = {};
+    for (const [key, handler] of Object.entries(this.options.shortcuts)) {
+      bindings[key] = toCommand(handler, rte.facade);
+    }
+    return [this.contribution(keymap(bindings), slottableRequest.contributionPriority.high)];
+  }
+}
+const RteKeyboardShortcutsFeature = slottableRequest.featureFacade(
+  RteKeyboardShortcutsFeatureImpl
+);
+
 const suggestCss = ".suggest-popover{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:408px;max-inline-size:248px;min-inline-size:128px}.suggest-loading-widget{display:inline-flex;align-items:center;margin-inline-start:2px;vertical-align:middle;white-space:normal}.suggest-empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);min-block-size:40px;text-align:center}.suggest-item--visible-focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}";
 
 const isPopoverOpen = (state) => Boolean(state?.suggestions && !state.dismissed);
@@ -15564,6 +15592,7 @@ exports.RteHtmlSerializer = RteHtmlSerializer;
 exports.RteInlineImageFeature = RteInlineImageFeature;
 exports.RteInputRuleFeature = RteInputRuleFeature;
 exports.RteItalicFeature = RteItalicFeature;
+exports.RteKeyboardShortcutsFeature = RteKeyboardShortcutsFeature;
 exports.RteLinkFeature = RteLinkFeature;
 exports.RteListFeature = RteListFeature;
 exports.RteMonospaceFeature = RteMonospaceFeature;

package/rich-text-editor/definition.js

@@ -16,7 +16,7 @@ import { D as Divider } from '../unbundled/divider.js';
 import DOMPurify from 'dompurify';
 import { g as generateRandomId } from '../unbundled/mixins.js';
 
-const styles = ":host{display:block}.rte{display:flex;flex-direction:column;block-size:100%}.editor{display:contents}.editor-viewport{position:relative;overflow:hidden;flex:1;contain:layout}.editor-scroll-area{--editor-padding-block: 8px;--editor-padding-inline: 16px;display:flex;flex-direction:column;background-color:var(--vvd-color-canvas);block-size:100%;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);overflow-y:auto;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.editor-scroll-area{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.editor-scroll-area ::-webkit-scrollbar{width:4px}.editor-scroll-area ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.editor-scroll-area ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.popovers--disabled>*{display:none!important}";
+const styles = ":host{display:flex;flex-direction:column}.rte{display:flex;flex-direction:column;block-size:100%;min-block-size:0}.editor{display:contents}.editor-viewport{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;contain:layout;min-block-size:0}.editor-scroll-area{--editor-padding-inline: var( --rich-text-editor-padding-inline, 16px );--editor-padding-block: var( --rich-text-editor-padding-block, 8px );display:flex;flex:1;flex-direction:column;background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);min-block-size:0;overflow-y:auto;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.editor-scroll-area{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.editor-scroll-area ::-webkit-scrollbar{width:4px}.editor-scroll-area ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.editor-scroll-area ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.popovers--disabled>*{display:none!important}";
 
 // Recovery values encode a range index and an offset. They are
 // represented as numbers, because tons of them will be created when
@@ -11500,6 +11500,22 @@ class RteCoreImpl extends RteFeatureImpl {
     ];
   }
   getPlugins(rte) {
+    const enterKeyChainCommands = chainCommands(
+      newlineInCode,
+      createParagraphNear,
+      liftEmptyBlock,
+      splitBlockAs((node, atEnd, $from) => {
+        if (!atEnd) {
+          return { type: node.type, attrs: node.attrs };
+        }
+        return {
+          type: defaultTextblockForMatch(
+            $from.node($from.depth - 1).contentMatchAt($from.indexAfter($from.depth - 1))
+          ),
+          attrs: rte.textblockAttrs.extractFromNode(node)
+        };
+      })
+    );
     return [
       this.contribution(this.disabled.plugin),
       this.contribution(
@@ -11536,22 +11552,8 @@ class RteCoreImpl extends RteFeatureImpl {
       this.contribution(
         keymap({
           ...baseKeymap,
-          Enter: chainCommands(
-            newlineInCode,
-            createParagraphNear,
-            liftEmptyBlock,
-            splitBlockAs((node, atEnd, $from) => {
-              if (!atEnd) {
-                return { type: node.type, attrs: node.attrs };
-              }
-              return {
-                type: defaultTextblockForMatch(
-                  $from.node($from.depth - 1).contentMatchAt($from.indexAfter($from.depth - 1))
-                ),
-                attrs: rte.textblockAttrs.extractFromNode(node)
-              };
-            })
-          )
+          Enter: enterKeyChainCommands,
+          "Shift-Enter": enterKeyChainCommands
         })
       ),
       this.contribution(dropCursor()),
@@ -11765,7 +11767,7 @@ class RteInstance {
     this.feature = (Feature, featureId) => {
       return this[impl].getPublicInterface(Feature, featureId);
     };
-    this[impl] = new RteInstanceImpl(config, options);
+    this[impl] = new RteInstanceImpl(this, config, options);
   }
   /**
    * Returns the current document state.
@@ -11821,7 +11823,7 @@ class RteInstance {
   }
 }
 class RteInstanceImpl {
-  constructor(configFacade, options) {
+  constructor(instanceFacade, configFacade, options) {
     this.options = options;
     this.view = null;
     this.dispatchTransaction = (tr) => {
@@ -11833,6 +11835,7 @@ class RteInstanceImpl {
       }
       return this.state;
     };
+    this.facade = instanceFacade;
     const config = configFacade[impl];
     this.config = config;
     this.schema = config.schema;
@@ -12748,7 +12751,7 @@ class RteHardBreakFeatureImpl extends RteFeatureImpl {
     const keyBindings = {
       "Shift-Enter": forceBreak
     };
-    return [this.contribution(keymap(keyBindings))];
+    return [this.contribution(keymap(keyBindings), contributionPriority.high)];
   }
 }
 const RteHardBreakFeature = featureFacade(RteHardBreakFeatureImpl);
@@ -15175,6 +15178,31 @@ class RteInputRuleFeatureImpl extends RteFeatureImpl {
 }
 const RteInputRuleFeature = featureFacade(RteInputRuleFeatureImpl);
 
+function toCommand(handler, rteInstance) {
+  if (handler.length === 0) {
+    return (_state, _dispatch) => handler();
+  }
+  return (_state, _dispatch) => handler(rteInstance);
+}
+class RteKeyboardShortcutsFeatureImpl extends RteFeatureImpl {
+  constructor(featureId, options) {
+    super();
+    this.featureId = featureId;
+    this.options = options;
+    this.name = `RteKeyboardShortcutsFeature[${featureId}]`;
+  }
+  getPlugins(rte) {
+    const bindings = {};
+    for (const [key, handler] of Object.entries(this.options.shortcuts)) {
+      bindings[key] = toCommand(handler, rte.facade);
+    }
+    return [this.contribution(keymap(bindings), contributionPriority.high)];
+  }
+}
+const RteKeyboardShortcutsFeature = featureFacade(
+  RteKeyboardShortcutsFeatureImpl
+);
+
 const suggestCss = ".suggest-popover{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:408px;max-inline-size:248px;min-inline-size:128px}.suggest-loading-widget{display:inline-flex;align-items:center;margin-inline-start:2px;vertical-align:middle;white-space:normal}.suggest-empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);min-block-size:40px;text-align:center}.suggest-item--visible-focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}";
 
 const isPopoverOpen = (state) => Boolean(state?.suggestions && !state.dismissed);
@@ -15546,4 +15574,4 @@ const registerRichTextEditor = createRegisterFunction(
   richTextEditorDefinition
 );
 
-export { RteAlignmentFeature, RteAtomFeature, RteBase, RteBoldFeature, RteConfig, RteDropHandlerFeature, RteFileHandlerFeature, RteFontSizePickerFeature, RteHardBreakFeature, RteHtmlParser, RteHtmlSerializer, RteInlineImageFeature, RteInputRuleFeature, RteItalicFeature, RteLinkFeature, RteListFeature, RteMonospaceFeature, RtePlaceholderFeature, RteStrikethroughFeature, RteSuggestFeature, RteTextBlockPickerFeature, RteTextColorPickerFeature, RteToolbarButtonFeature, RteToolbarFeature, RteUnderlineFeature, RichTextEditor as VwcRichTextEditorElement, registerRichTextEditor, richTextEditorDefinition };
+export { RteAlignmentFeature, RteAtomFeature, RteBase, RteBoldFeature, RteConfig, RteDropHandlerFeature, RteFileHandlerFeature, RteFontSizePickerFeature, RteHardBreakFeature, RteHtmlParser, RteHtmlSerializer, RteInlineImageFeature, RteInputRuleFeature, RteItalicFeature, RteKeyboardShortcutsFeature, RteLinkFeature, RteListFeature, RteMonospaceFeature, RtePlaceholderFeature, RteStrikethroughFeature, RteSuggestFeature, RteTextBlockPickerFeature, RteTextColorPickerFeature, RteToolbarButtonFeature, RteToolbarFeature, RteUnderlineFeature, RichTextEditor as VwcRichTextEditorElement, registerRichTextEditor, richTextEditorDefinition };