@vonage/vivid 5.12.0 → 5.15.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
@@ -9053,7 +9053,7 @@ class RteConfigImpl {
         (subFeature) => subFeature === f ? f : resolveFeatures([subFeature])
       )
     );
-    this.features = resolveFeatures(featuresFacades.map((f) => f[slottableRequest.impl]));
+    this.features = resolveFeatures(featuresFacades.map(slottableRequest.getFeatureImpl));
     this.featureMap = /* @__PURE__ */ new Map();
     for (const f of this.features) {
       if (this.featureMap.has(f.name)) {
@@ -9064,7 +9064,7 @@ class RteConfigImpl {
     this.featureFacadesMap = /* @__PURE__ */ new Map();
     for (const facade of featuresFacades) {
       const FacadeClass = facade.constructor;
-      const feature = facade[slottableRequest.impl];
+      const feature = slottableRequest.getFeatureImpl(facade);
       const instances = this.featureFacadesMap.get(FacadeClass);
       if (instances) {
         instances.push(feature);
@@ -11474,7 +11474,6 @@ class RteCursorFixFeatureImpl extends slottableRequest.RteFeatureImpl {
     ];
   }
 }
-slottableRequest.featureFacade(RteCursorFixFeatureImpl);
 
 const hostBridgePlugin = new Plugin({
   state: {
@@ -11505,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(
@@ -11541,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()),
@@ -11573,7 +11574,6 @@ class RteCoreImpl extends slottableRequest.RteFeatureImpl {
     ];
   }
 }
-slottableRequest.featureFacade(RteCoreImpl);
 
 const DEFAULT_ALLOWED_URI_REGEXP = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i;
 const ALLOWED_URI_REGEXP_WITH_BLOB = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|blob):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i;
@@ -11771,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.
@@ -11827,7 +11827,7 @@ class RteInstance {
   }
 }
 class RteInstanceImpl {
-  constructor(configFacade, options) {
+  constructor(instanceFacade, configFacade, options) {
     this.options = options;
     this.view = null;
     this.dispatchTransaction = (tr) => {
@@ -11839,6 +11839,7 @@ class RteInstanceImpl {
       }
       return this.state;
     };
+    this.facade = instanceFacade;
     const config = configFacade[slottableRequest.impl];
     this.config = config;
     this.schema = config.schema;
@@ -12754,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);
@@ -15181,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);
@@ -15566,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

@@ -1,6 +1,6 @@
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { ElementStyles, observable, ref, html, volatile } from '@microsoft/fast-element';
-import { S as Slice, F as Fragment, M as Mark, a as MarkType, R as ReplaceError, N as Node, D as DOMSerializer, b as DOMParser, i as impl, s as sortedContributions, c as Schema, e as RteFeatureImpl, f as featureFacade, g as contributionPriority, h as NodeRange, d as dispatchSlottableRequest, r as removeSymbol } from '../unbundled/slottable-request.js';
+import { S as Slice, F as Fragment, M as Mark, a as MarkType, R as ReplaceError, N as Node, D as DOMSerializer, b as DOMParser, i as impl, g as getFeatureImpl, s as sortedContributions, c as Schema, e as RteFeatureImpl, f as contributionPriority, h as featureFacade, j as NodeRange, d as dispatchSlottableRequest, r as removeSymbol } from '../unbundled/slottable-request.js';
 import { W as WithObservableLocale } from '../unbundled/localized.js';
 import { p as popupDefinition, P as Popup, a as PlacementStrategy } from '../unbundled/definition5.js';
 import { dividerDefinition } from '../divider/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
@@ -9049,7 +9049,7 @@ class RteConfigImpl {
         (subFeature) => subFeature === f ? f : resolveFeatures([subFeature])
       )
     );
-    this.features = resolveFeatures(featuresFacades.map((f) => f[impl]));
+    this.features = resolveFeatures(featuresFacades.map(getFeatureImpl));
     this.featureMap = /* @__PURE__ */ new Map();
     for (const f of this.features) {
       if (this.featureMap.has(f.name)) {
@@ -9060,7 +9060,7 @@ class RteConfigImpl {
     this.featureFacadesMap = /* @__PURE__ */ new Map();
     for (const facade of featuresFacades) {
       const FacadeClass = facade.constructor;
-      const feature = facade[impl];
+      const feature = getFeatureImpl(facade);
       const instances = this.featureFacadesMap.get(FacadeClass);
       if (instances) {
         instances.push(feature);
@@ -11470,7 +11470,6 @@ class RteCursorFixFeatureImpl extends RteFeatureImpl {
     ];
   }
 }
-featureFacade(RteCursorFixFeatureImpl);
 
 const hostBridgePlugin = new Plugin({
   state: {
@@ -11501,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(
@@ -11537,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()),
@@ -11569,7 +11570,6 @@ class RteCoreImpl extends RteFeatureImpl {
     ];
   }
 }
-featureFacade(RteCoreImpl);
 
 const DEFAULT_ALLOWED_URI_REGEXP = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i;
 const ALLOWED_URI_REGEXP_WITH_BLOB = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|blob):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i;
@@ -11767,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.
@@ -11823,7 +11823,7 @@ class RteInstance {
   }
 }
 class RteInstanceImpl {
-  constructor(configFacade, options) {
+  constructor(instanceFacade, configFacade, options) {
     this.options = options;
     this.view = null;
     this.dispatchTransaction = (tr) => {
@@ -11835,6 +11835,7 @@ class RteInstanceImpl {
       }
       return this.state;
     };
+    this.facade = instanceFacade;
     const config = configFacade[impl];
     this.config = config;
     this.schema = config.schema;
@@ -12750,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);
@@ -15177,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);
@@ -15548,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 };