@ni/nimble-components 20.14.8 → 20.14.9

package/dist/all-components-bundle.js

@@ -16298,7 +16298,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Tue, 21 Nov 2023 19:01:43 GMT
+   * Generated on Thu, 23 Nov 2023 07:56:58 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -58807,12 +58807,18 @@ img.ProseMirror-separator {
        * DOM structure using a DOMSerializer, and returns the serialized result.
        * If the markdown parser returns null, it will clear the viewer component by creating an empty document fragment.
        */
-      static parseMarkdownToDOM(value) {
-          const parsedMarkdownContent = this.markdownParser.parse(value);
-          if (parsedMarkdownContent === null) {
-              return document.createDocumentFragment();
+      static parseMarkdownToDOM(value, markdownParserMentionConfig) {
+          try {
+              this.mentionConfigs = markdownParserMentionConfig;
+              const parsedMarkdownContent = this.markdownParser.parse(value);
+              if (parsedMarkdownContent === null) {
+                  return document.createDocumentFragment();
+              }
+              return this.domSerializer.serializeFragment(parsedMarkdownContent.content);
+          }
+          finally {
+              this.mentionConfigs = undefined;
           }
-          return this.domSerializer.serializeFragment(parsedMarkdownContent.content);
       }
       static initializeMarkdownParser() {
           /**
@@ -58831,7 +58837,6 @@ img.ProseMirror-separator {
               'autolink',
               'newline'
           ]);
-          supportedTokenizerRules.validateLink = href => /^https?:\/\//i.test(href);
           /**
            * In order to display encoded characters, non-ASCII characters, emojis, and other special characters in their original form,
            * we bypass the default normalization of link text in markdown-it. This is done because we support only "AutoLink" feature in CommonMark flavor.
@@ -58843,7 +58848,7 @@ img.ProseMirror-separator {
           supportedTokenizerRules.normalizeLinkText = url => url;
           return new MarkdownParser(this.updatedSchema, supportedTokenizerRules, defaultMarkdownParser.tokens);
       }
-      static getSchemaWithLinkConfiguration() {
+      static getCustomSchemaConfiguration() {
           return new Schema({
               nodes: schema.spec.nodes,
               marks: {
@@ -58859,10 +58864,30 @@ img.ProseMirror-separator {
                       // See: https://github.com/ni/nimble/issues/1527
                       excludes: '_',
                       toDOM(node) {
+                          const href = node.attrs.href;
+                          const currentMention = RichTextMarkdownParser.mentionConfigs?.find(mention => mention.isValidMentionHref(href));
+                          const displayName = currentMention?.getDisplayName(href);
+                          if (currentMention && displayName) {
+                              return [
+                                  currentMention.viewElement,
+                                  {
+                                      'mention-href': href,
+                                      'mention-label': displayName,
+                                      'disable-editing': true
+                                  }
+                              ];
+                          }
                           return [
                               anchorTag,
                               {
-                                  href: node.attrs.href,
+                                  /**
+                                   * Both mention and absolute link markdown share the autolink format in CommonMark flavor.
+                                   * Absolute links with HTTP/HTTPS will be rendered as links. Absolute links that match the
+                                   * mention pattern will be rendered as mention view element. Absolute links without HTTP/HTTPS
+                                   * scheme and no matching mention pattern will be rendered as plain text (anchor with no href).
+                                   * With this, the user can click the links only when the scheme is HTTP/HTTPS
+                                   */
+                                  href: /^https?:\/\//i.test(href) ? href : null,
                                   rel: node.attrs.rel
                               }
                           ];
@@ -58875,7 +58900,7 @@ img.ProseMirror-separator {
       }
   }
   _a$1 = RichTextMarkdownParser;
-  RichTextMarkdownParser.updatedSchema = _a$1.getSchemaWithLinkConfiguration();
+  RichTextMarkdownParser.updatedSchema = _a$1.getCustomSchemaConfiguration();
   RichTextMarkdownParser.markdownParser = _a$1.initializeMarkdownParser();
   RichTextMarkdownParser.domSerializer = DOMSerializer.fromSchema(_a$1.updatedSchema);
 
@@ -59445,7 +59470,9 @@ img.ProseMirror-separator {
   DesignSystem.tagFor(RichTextEditor);
 
   const template$k = html `
-    <div ${ref('viewer')} class="viewer"></div>
+    <template ${children$1({ property: 'childItems', filter: elements() })}>
+        <div ${ref('viewer')} class="viewer"></div>
+    </template>
 `;
 
   const styles$o = css `
@@ -59486,8 +59513,150 @@ img.ProseMirror-separator {
     li > p:empty {
         display: none;
     }
+
+    ${
+/**
+ * When an absolute link is not HTTPS/HTTP, the anchor tag renders without an `href`, appearing as plain text.
+ * However, the `nimble-anchor` displays differently in color when the `href` attribute is absent.
+ * To ensure a consistent appearance, the font color is forced to the default link color regardless of the `href`
+ * attribute's presence.
+ *
+ * See models/markdown-parser.ts where link elements are emitted for more info.
+ */ ''}
+    nimble-anchor::part(control) {
+        color: ${linkFontColor};
+    }
 `;
 
+  /**
+   * Internal mention state
+   */
+  class MentionInternals {
+      constructor(options) {
+          /**
+           * Whether this mention has a valid configuration.
+           */
+          this.validConfiguration = true;
+          this.icon = options.icon;
+          this.character = options.character;
+          this.viewElement = options.viewElement;
+      }
+  }
+  __decorate$1([
+      observable
+  ], MentionInternals.prototype, "mentionConfig", void 0);
+  __decorate$1([
+      observable
+  ], MentionInternals.prototype, "validConfiguration", void 0);
+
+  /**
+   * The base class for Mention configuration
+   */
+  class RichTextMention extends FoundationElement {
+      constructor() {
+          super(...arguments);
+          /**
+           * @internal
+           */
+          this.mentionInternals = new MentionInternals(this.getMentionInternalsOptions());
+          /** @internal */
+          this.validator = this.createValidator();
+          /** @internal */
+          this.mappingNotifiers = [];
+          /** @internal */
+          this.mappings = [];
+      }
+      checkValidity() {
+          return this.mentionInternals.validConfiguration;
+      }
+      get validity() {
+          return this.validator.getValidity();
+      }
+      /**
+       * @internal
+       */
+      handleChange(source, args) {
+          if (source instanceof Mapping$1 && typeof args === 'string') {
+              this.updateMentionConfig();
+          }
+      }
+      getMappingConfigs() {
+          const mappingConfigs = new Map();
+          this.mappings.forEach(mapping => {
+              const href = mapping.key ?? undefined;
+              if (href === undefined || typeof href !== 'string') {
+                  throw Error('mentionHref was invalid for type. Validation should have prevented this.');
+              }
+              const mappingConfig = this.createMappingConfig(mapping);
+              mappingConfigs.set(href, mappingConfig);
+          });
+          return mappingConfigs;
+      }
+      /**
+       * Called when any Mapping related state has changed.
+       */
+      updateMentionConfig() {
+          this.validator.validate(this.mappings, this.pattern);
+          this.mentionInternals.mentionConfig = this.validator.isValid()
+              ? this.createMentionConfig(this.getMappingConfigs())
+              : undefined;
+      }
+      mappingsChanged() {
+          this.updateMentionConfig();
+          this.observeMappings();
+      }
+      patternChanged() {
+          this.mentionInternals.pattern = this.pattern;
+          this.updateMentionConfig();
+      }
+      removeMappingObservers() {
+          this.mappingNotifiers.forEach(notifier => {
+              notifier.unsubscribe(this);
+          });
+          this.mappingNotifiers = [];
+      }
+      observeMappings() {
+          this.removeMappingObservers();
+          for (const mapping of this.mappings) {
+              const notifier = Observable.getNotifier(mapping);
+              notifier.subscribe(this);
+              this.mappingNotifiers.push(notifier);
+          }
+      }
+  }
+  __decorate$1([
+      attr
+  ], RichTextMention.prototype, "pattern", void 0);
+  __decorate$1([
+      observable
+  ], RichTextMention.prototype, "mappings", void 0);
+
+  /**
+   * A configuration object for a Markdown parser, to be used by the viewer and editor components.
+   * This object maintains the necessary internal values for handling mentions within the Markdown parser.
+   */
+  class MarkdownParserMentionConfiguration {
+      constructor(mentionInternals) {
+          this.regexPattern = new RegExp(mentionInternals.pattern ?? '');
+          this.mappingConfigs = mentionInternals.mentionConfig?.mappingConfigs;
+          this.viewElement = mentionInternals.viewElement;
+      }
+      isValidMentionHref(mentionHref) {
+          return this.regexPattern.test(mentionHref);
+      }
+      getDisplayName(mentionHref) {
+          const mentionMapping = this.mappingConfigs?.get(mentionHref);
+          const mentionId = this.extractMentionId(mentionHref);
+          return mentionMapping?.displayName ?? mentionId;
+      }
+      extractMentionId(mentionHref) {
+          const regexpArray = this.regexPattern.exec(mentionHref);
+          // Matches and gets the first group specified in the regex pattern
+          // that renders as an alternative to the display name if missing.
+          return regexpArray?.[1] ?? undefined;
+      }
+  }
+
   /**
    * A nimble styled rich text viewer
    */
@@ -59500,6 +59669,19 @@ img.ProseMirror-separator {
            * Markdown string to render its corresponding rich text content in the component.
            */
           this.markdown = '';
+          /**
+           * @internal
+           */
+          this.mentionElements = [];
+          /**
+           * @internal
+           */
+          this.mentionInternalsConfig = [];
+          /**
+           * @internal
+           */
+          this.childItems = [];
+          this.mentionInternalsNotifiers = [];
       }
       /**
        * @internal
@@ -59512,13 +59694,56 @@ img.ProseMirror-separator {
        * @internal
        */
       markdownChanged() {
-          if (this.$fastController.isConnected) {
-              this.updateView();
+          this.updateView();
+      }
+      /**
+       * @internal
+       */
+      handleChange(source, args) {
+          if (source instanceof MentionInternals && typeof args === 'string') {
+              this.updateMentionInternalsConfig();
           }
       }
+      childItemsChanged() {
+          void this.updateMentionsFromChildItems();
+      }
+      async updateMentionsFromChildItems() {
+          const definedElements = this.childItems.map(async (item) => (item.matches(':not(:defined)')
+              ? customElements.whenDefined(item.localName)
+              : Promise.resolve()));
+          await Promise.all(definedElements);
+          this.mentionElements = this.childItems.filter((x) => x instanceof RichTextMention);
+          this.observeMentions();
+          this.updateMentionInternalsConfig();
+      }
+      observeMentions() {
+          this.removeMentionObservers();
+          for (const mention of this.mentionElements) {
+              const notifierInternals = Observable.getNotifier(mention.mentionInternals);
+              notifierInternals.subscribe(this);
+              this.mentionInternalsNotifiers.push(notifierInternals);
+          }
+      }
+      removeMentionObservers() {
+          this.mentionInternalsNotifiers.forEach(notifier => {
+              notifier.unsubscribe(this);
+          });
+          this.mentionInternalsNotifiers = [];
+      }
+      updateMentionInternalsConfig() {
+          // TODO: Add a rich text validator to check if the `mentionElements` contains duplicate configuration element
+          // For example, having two `nimble-rich-text-mention-users` within the children of rich text viewer or editor is an invalid configuration
+          this.mentionInternalsConfig = this.mentionElements
+              .filter(mention => mention.mentionInternals.validConfiguration)
+              .map(mention => new MarkdownParserMentionConfiguration(mention.mentionInternals));
+          this.updateView();
+      }
       updateView() {
+          if (!this.$fastController.isConnected) {
+              return;
+          }
           if (this.markdown) {
-              const serializedContent = RichTextMarkdownParser.parseMarkdownToDOM(this.markdown);
+              const serializedContent = RichTextMarkdownParser.parseMarkdownToDOM(this.markdown, this.mentionInternalsConfig);
               this.viewer.replaceChildren(serializedContent);
           }
           else {
@@ -59529,6 +59754,9 @@ img.ProseMirror-separator {
   __decorate$1([
       observable
   ], RichTextViewer.prototype, "markdown", void 0);
+  __decorate$1([
+      observable
+  ], RichTextViewer.prototype, "childItems", void 0);
   const nimbleRichTextViewer = RichTextViewer.compose({
       baseName: 'rich-text-viewer',
       template: template$k,