@redvars/peacock 3.6.0 → 3.6.2

package/src/html-editor/html-editor.ts

@@ -1,6 +1,12 @@
 import { html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { Editor, mergeAttributes } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import Underline from '@tiptap/extension-underline';
+import Placeholder from '@tiptap/extension-placeholder';
+import Mention from '@tiptap/extension-mention';
+import { html as beautifyHtml } from 'js-beautify';
 
 import IndividualComponent from '@/IndividualComponent.js';
 import BaseInput from '../input/BaseInput.js';
@@ -13,24 +19,32 @@ import styles from './html-editor.scss';
  * @tag wc-html-editor
  * @rawTag html-editor
  *
- * @summary A WYSIWYG HTML editor component with a Material 3 styled toolbar.
+ * @summary A Tiptap-powered HTML editor with visual and source editing modes.
  * @overview
- * <p>The HTML Editor provides a rich-text editing experience using the browser's built-in
- * <code>contenteditable</code> API. It wraps the editable area in a Material 3 styled
- * <code>wc-field</code> and exposes a toolbar with common formatting actions.</p>
+ * <p>The HTML Editor provides a rich-text editing experience built on Tiptap.
+ * It wraps the editable area in a Material 3 styled <code>wc-field</code>,
+ * exposes common formatting actions, and includes a segmented switch between
+ * <strong>Visual</strong> and <strong>HTML</strong> source modes.</p>
  *
  * <p>Get and set the HTML content via the <code>value</code> property. The component
- * dispatches a <code>change</code> event whenever the content is modified.</p>
+ * dispatches a <code>change</code> event whenever the content is modified.
+ * Mention suggestions are supported through the <code>mentions</code> property,
+ * with optional externally managed lookup via the <code>search</code> event.</p>
  *
  * @cssprop --html-editor-min-height - Minimum height of the editable area. Defaults to 8rem.
  * @cssprop --html-editor-toolbar-background - Background color of the toolbar.
  * @cssprop --html-editor-toolbar-border-color - Border color between toolbar and editing area.
  *
  * @fires {Event} change - Fired whenever the editable content changes.
+ * @fires {CustomEvent} search - Fired in managed mention mode with { query, callback } detail.
  *
  * @example
  * ```html
- * <wc-html-editor label="Description" value="<p>Hello <strong>world</strong></p>"></wc-html-editor>
+ * <wc-html-editor
+ *   label="Description"
+ *   value="<p>Hello <strong>world</strong></p>"
+ *   .mentions="[{ label: 'Alex', value: 'alex' }]"
+ * ></wc-html-editor>
  * ```
  * @tags input editor
  */
@@ -38,6 +52,10 @@ import styles from './html-editor.scss';
 export class HtmlEditor extends BaseInput {
   static styles = [styles];
 
+  private _editor?: Editor;
+
+  private _changeTimeout?: number;
+
   /** Current HTML value of the editor. */
   @property({ type: String })
   value = '';
@@ -66,64 +84,230 @@ export class HtmlEditor extends BaseInput {
   @property({ type: String, attribute: 'error-text' })
   errorText = '';
 
+  /** Whether toolbar controls should be displayed in visual mode. */
+  @property({ type: Boolean, attribute: 'show-toolbar' })
+  showToolbar = true;
+
+  /** Mention suggestions used by the mention extension. */
+  @property({ type: Array })
+  mentions: Array<{ label: string; value: string }> = [];
+
+  /** Mention filtering mode. */
+  @property({ type: String, attribute: 'mentions-search' })
+  mentionsSearch: 'contains' | 'managed' = 'contains';
+
+  /** Character that triggers mention suggestions. */
+  @property({ type: String, attribute: 'suggestion-character' })
+  suggestionCharacter = '@';
+
+  /** Whether to include the suggestion character in rendered mention text. */
+  @property({ type: Boolean, attribute: 'show-suggestion-character' })
+  showSuggestionCharacter = true;
+
+  /** Debounce in milliseconds for dispatching `change`. */
+  @property({ type: Number })
+  debounce = 250;
+
   @state() private _focused = false;
 
-  @query('.html-editor-content')
+  @state() private _mode: 'visual' | 'html' = 'visual';
+
+  @query('.tiptap-root')
   private _editorEl!: HTMLDivElement;
 
   // ─── Lifecycle ─────────────────────────────────────────────────────────────
 
   protected firstUpdated() {
-    if (this.value && this._editorEl) {
-      this._editorEl.innerHTML = this.value;
+    this._initializeEditor();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._changeTimeout) {
+      window.clearTimeout(this._changeTimeout);
+      this._changeTimeout = undefined;
     }
+    this._destroyEditor();
   }
 
   protected updated(changed: Map<string, unknown>) {
-    if (changed.has('value') && this._editorEl) {
-      if (this._editorEl.innerHTML !== this.value) {
-        this._editorEl.innerHTML = this.value ?? '';
+    if (changed.has('value') && this._editor) {
+      const editorHtml = HtmlEditor._normalizeHtml(this._editor.getHTML());
+      const nextHtml = HtmlEditor._normalizeHtml(this.value);
+      if (editorHtml !== nextHtml) {
+        this._editor.commands.setContent(this.value ?? '', false);
       }
     }
-    if (changed.has('disabled') || changed.has('readonly')) {
-      if (this._editorEl) {
-        this._editorEl.contentEditable =
-          this.disabled || this.readonly ? 'false' : 'true';
+
+    if ((changed.has('disabled') || changed.has('readonly')) && this._editor) {
+      this._editor.setEditable(!(this.disabled || this.readonly));
+    }
+
+    if (changed.has('placeholder') && this._editor) {
+      this._destroyEditor();
+      this._initializeEditor();
+    }
+
+    if (changed.has('mentions') && this._editor) {
+      const oldMentions = changed.get('mentions') as Array<{
+        label: string;
+        value: string;
+      }>;
+      if (oldMentions !== this.mentions) {
+        this._destroyEditor();
+        this._initializeEditor();
       }
     }
   }
 
   // ─── Private helpers ───────────────────────────────────────────────────────
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private _execCmd(command: string, value?: string) {
-    if (this.disabled || this.readonly) return;
-    this._editorEl.focus();
-    // execCommand is deprecated but remains broadly supported for rich-text editing
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (document as any).execCommand(command, false, value ?? null);
+  private static _normalizeHtml(value: string) {
+    return beautifyHtml(value ?? '', {
+      wrap_line_length: 120,
+    });
   }
 
-  private _handleInput() {
-    this.value = this._editorEl.innerHTML;
-    redispatchEvent(
-      this,
-      new Event('change', { bubbles: true, composed: true }),
-    );
+  private _destroyEditor() {
+    if (!this._editor) return;
+    this._editorEl?.removeEventListener('click', this._focusEditorOnContainerClick);
+    this._editor.destroy();
+    this._editor = undefined;
   }
 
-  private _handleFocus() {
-    this._focused = true;
+  private _initializeEditor() {
+    if (!this._editorEl || this._editor) return;
+
+    this._editor = new Editor({
+      element: this._editorEl,
+      extensions: [
+        StarterKit,
+        Underline,
+        Placeholder.configure({
+          placeholder: this.placeholder,
+        }),
+        Mention.configure({
+          HTMLAttributes: {
+            class: 'mention',
+          },
+          renderHTML: ({ options, node }) => {
+            const item = this._getMentionItem(node.attrs.id);
+            return [
+              'a',
+              mergeAttributes({ contenteditable: false }, options.HTMLAttributes),
+              `${this.showSuggestionCharacter ? options.suggestion.char : ''}${
+                item ? item.label : node.attrs.id
+              }`,
+            ];
+          },
+          suggestion: {
+            allowSpaces: true,
+            char: this.suggestionCharacter,
+            items: async ({ query: mentionQuery }) => {
+              if (this.mentionsSearch === 'managed') {
+                return this._requestManagedMentions(mentionQuery);
+              }
+
+              return this.mentions
+                .filter(item =>
+                  item.label.toLowerCase().startsWith(mentionQuery.toLowerCase()),
+                )
+                .map(item => item.value)
+                .slice(0, 5);
+            },
+          },
+        }),
+      ],
+      content: this.value,
+      editable: !(this.disabled || this.readonly),
+      onFocus: () => {
+        this._focused = true;
+      },
+      onBlur: () => {
+        this._focused = false;
+      },
+      onUpdate: () => {
+        if (!this._editor) return;
+
+        const nextHtml = HtmlEditor._normalizeHtml(this._editor.getHTML());
+        if (nextHtml !== this.value) {
+          this.value = nextHtml;
+        }
+
+        this._dispatchDebouncedChange();
+      },
+    });
+
+    this._editorEl.addEventListener('click', this._focusEditorOnContainerClick);
   }
 
-  private _handleBlur() {
-    this._focused = false;
+  private _focusEditorOnContainerClick = (event: Event) => {
+    if (!this._editor) return;
+    if (event.target === this._editorEl) {
+      this._editor.commands.focus('end');
+    }
+  };
+
+  private _dispatchDebouncedChange() {
+    if (this._changeTimeout) {
+      window.clearTimeout(this._changeTimeout);
+    }
+
+    this._changeTimeout = window.setTimeout(() => {
+      redispatchEvent(this, new Event('change', { bubbles: true, composed: true }));
+    }, this.debounce);
+  }
+
+  private _requestManagedMentions(mentionQuery: string): Promise<string[]> {
+    return new Promise(resolve => {
+      this.dispatchEvent(
+        new CustomEvent('search', {
+          detail: {
+            query: mentionQuery,
+            callback: (mentions: Array<{ label: string; value: string }>) => {
+              this.mentions = mentions;
+              resolve(this.mentions.map(item => item.value));
+            },
+          },
+          bubbles: true,
+          composed: true,
+        }),
+      );
+    });
+  }
+
+  private _getMentionItem(value: string) {
+    return this.mentions.find(item => item.value === value);
+  }
+
+  private _execCommand(command: () => void) {
+    if (this.disabled || this.readonly || !this._editor) return;
+    command();
+    this._editor.commands.focus();
+  }
+
+  private _switchMode(event: CustomEvent<{ value: string }>) {
+    event.stopPropagation();
+    const nextMode = event.detail?.value === 'html' ? 'html' : 'visual';
+
+    if (nextMode === this._mode) return;
+
+    if (nextMode === 'html' && this._editor) {
+      this.value = HtmlEditor._normalizeHtml(this._editor.getHTML());
+    }
+
+    this._mode = nextMode;
   }
 
-  private _insertLink() {
-    // eslint-disable-next-line no-alert
-    const url = window.prompt('Enter URL:', 'https://');
-    if (url) this._execCmd('createLink', url);
+  private _handleSourceChange(event: Event) {
+    event.stopPropagation();
+    const target = event.currentTarget as { value?: string };
+    const nextValue = target.value ?? '';
+
+    if (nextValue === this.value) return;
+
+    this.value = nextValue;
+    this._dispatchDebouncedChange();
   }
 
   // ─── Toolbar button ────────────────────────────────────────────────────────
@@ -131,19 +315,22 @@ export class HtmlEditor extends BaseInput {
   private _toolbarButton(
     icon: string,
     title: string,
-    command: string,
-    value?: string,
+    action: () => void,
+    active = false,
   ) {
     return html`
       <button
-        class="toolbar-btn"
+        class=${classMap({
+          'toolbar-btn': true,
+          active,
+        })}
         title=${title}
         aria-label=${title}
         ?disabled=${this.disabled || this.readonly}
         @mousedown=${(e: Event) => e.preventDefault()}
         @click=${(e: Event) => {
           e.preventDefault();
-          this._execCmd(command, value);
+          this._execCommand(action);
         }}
       >
         <wc-icon name=${icon} size="sm"></wc-icon>
@@ -154,33 +341,52 @@ export class HtmlEditor extends BaseInput {
   // ─── Toolbar ───────────────────────────────────────────────────────────────
 
   private _renderToolbar() {
+    if (!this._editor || !this.showToolbar || this._mode !== 'visual') {
+      return nothing;
+    }
+
     return html`
       <div
         class="html-editor-toolbar"
         role="toolbar"
         aria-label="Formatting toolbar"
       >
-        ${this._toolbarButton('format_bold', 'Bold', 'bold')}
-        ${this._toolbarButton('format_italic', 'Italic', 'italic')}
-        ${this._toolbarButton('format_underlined', 'Underline', 'underline')}
         ${this._toolbarButton(
-          'format_strikethrough',
-          'Strikethrough',
-          'strikeThrough',
+          'undo',
+          'Undo',
+          () => this._editor?.commands.undo(),
+        )}
+        ${this._toolbarButton(
+          'redo',
+          'Redo',
+          () => this._editor?.commands.redo(),
         )}
 
         <span class="toolbar-divider"></span>
 
-        ${this._toolbarButton('format_align_left', 'Align left', 'justifyLeft')}
         ${this._toolbarButton(
-          'format_align_center',
-          'Align center',
-          'justifyCenter',
+          'format_bold',
+          'Bold',
+          () => this._editor?.chain().focus().toggleBold().run(),
+          this._editor.isActive('bold'),
         )}
         ${this._toolbarButton(
-          'format_align_right',
-          'Align right',
-          'justifyRight',
+          'format_italic',
+          'Italic',
+          () => this._editor?.chain().focus().toggleItalic().run(),
+          this._editor.isActive('italic'),
+        )}
+        ${this._toolbarButton(
+          'format_underlined',
+          'Underline',
+          () => this._editor?.chain().focus().toggleUnderline().run(),
+          this._editor.isActive('underline'),
+        )}
+        ${this._toolbarButton(
+          'format_strikethrough',
+          'Strikethrough',
+          () => this._editor?.chain().focus().toggleStrike().run(),
+          this._editor.isActive('strike'),
         )}
 
         <span class="toolbar-divider"></span>
@@ -188,44 +394,29 @@ export class HtmlEditor extends BaseInput {
         ${this._toolbarButton(
           'format_list_bulleted',
           'Unordered list',
-          'insertUnorderedList',
+          () => this._editor?.chain().focus().toggleBulletList().run(),
+          this._editor.isActive('bulletList'),
         )}
         ${this._toolbarButton(
           'format_list_numbered',
           'Ordered list',
-          'insertOrderedList',
+          () => this._editor?.chain().focus().toggleOrderedList().run(),
+          this._editor.isActive('orderedList'),
         )}
-
-        <span class="toolbar-divider"></span>
-
-        ${this._toolbarButton(
-          'format_indent_increase',
-          'Indent',
-          'indent',
-        )}
-        ${this._toolbarButton('format_indent_decrease', 'Outdent', 'outdent')}
-
-        <span class="toolbar-divider"></span>
-
-        <button
-          class="toolbar-btn"
-          title="Insert link"
-          aria-label="Insert link"
-          ?disabled=${this.disabled || this.readonly}
-          @mousedown=${(e: Event) => e.preventDefault()}
-          @click=${() => this._insertLink()}
-        >
-          <wc-icon name="link" size="sm"></wc-icon>
-        </button>
-
-        <span class="toolbar-divider"></span>
-
-        ${this._toolbarButton('undo', 'Undo', 'undo')}
-        ${this._toolbarButton('redo', 'Redo', 'redo')}
       </div>
     `;
   }
 
+  private _renderReadonlyTag() {
+    if (this.disabled) {
+      return html`<wc-tag class="read-only-tag" color="red">Disabled</wc-tag>`;
+    }
+    if (this.readonly) {
+      return html`<wc-tag class="read-only-tag" color="red">Read Only</wc-tag>`;
+    }
+    return nothing;
+  }
+
   // ─── Render ────────────────────────────────────────────────────────────────
 
   render() {
@@ -251,25 +442,49 @@ export class HtmlEditor extends BaseInput {
           readonly: this.readonly,
         })}
       >
+        <div class="mode-switcher">
+          <wc-segmented-button-group @change=${this._switchMode}>
+            <wc-segmented-button
+              value="visual"
+              ?selected=${this._mode === 'visual'}
+              ?disabled=${this.disabled}
+            >
+              Visual
+            </wc-segmented-button>
+            <wc-segmented-button
+              value="html"
+              ?selected=${this._mode === 'html'}
+              ?disabled=${this.disabled}
+            >
+              HTML
+            </wc-segmented-button>
+          </wc-segmented-button-group>
+        </div>
+
         ${this._renderToolbar()}
 
         <div
           class=${classMap({
             'html-editor-content': true,
             'is-empty': isEmpty,
+            hidden: this._mode !== 'visual',
           })}
-          contenteditable=${this.disabled || this.readonly ? 'false' : 'true'}
           data-placeholder=${this.placeholder}
-          @input=${this._handleInput}
-          @focus=${this._handleFocus}
-          @blur=${this._handleBlur}
-        ></div>
-
-        ${this.disabled
-          ? html`<wc-tag class="read-only-tag" color="red">Disabled</wc-tag>`
-          : this.readonly
-          ? html`<wc-tag class="read-only-tag" color="red">Read Only</wc-tag>`
-          : nothing}
+        >
+          <div class="tiptap-root"></div>
+        </div>
+
+        <div class=${classMap({ 'html-source': true, hidden: this._mode !== 'html' })}>
+          <wc-code-editor
+            language="html"
+            .value=${this.value}
+            ?readonly=${this.readonly}
+            ?disabled=${this.disabled}
+            @change=${this._handleSourceChange}
+          ></wc-code-editor>
+        </div>
+
+        ${this._renderReadonlyTag()}
       </wc-field>
     `;
   }

package/src/index.ts

@@ -16,6 +16,7 @@ export { Accordion } from './accordion/index.js';
 export { Link } from './link/index.js';
 export { Tag } from './chip/tag/index.js';
 export { Chip } from './chip/chip/index.js';
+export { ChipSet } from './chip/chip-set/index.js';
 export { LinearProgress } from './progress/linear-progress/index.js';
 export { CircularProgress } from './progress/circular-progress/index.js';
 export { Skeleton } from './skeleton/index.js';
@@ -37,11 +38,13 @@ export { Tooltip } from './popover/index.js';
 export { Popover, PopoverContent } from './popover/index.js';
 export { Breadcrumb, BreadcrumbItem } from './breadcrumb/index.js';
 export { Menu, MenuItem, SubMenu } from './menu/index.js';
+export { List, ListItem } from './list/index.js';
 
 export { CodeHighlighter } from './code-highlighter/index.js';
 export { CodeEditor } from './code-editor/index.js';
 export { HtmlEditor } from './html-editor/index.js';
 export { Image } from './image/index.js';
+export { Svg } from './svg/index.js';
 export { Tab, TabGroup, TabPanel, Tabs } from './tabs/index.js';
 export { Slider } from './slider/index.js';
 export { ChartDoughnut } from './chart-doughnut/index.js';
@@ -84,4 +87,3 @@ export type {
   NodeTemplate,
 } from './flow-designer/index.js';
 export { ConditionBuilder, CbPredicate, CbCompoundExpression, CbExpression, CbDivider } from './condition-builder/index.js';
-

package/src/list/index.ts

@@ -0,0 +1,2 @@
+export { List } from './list.js';
+export { ListItem } from './list-item.js';

package/src/list/list-item.scss

@@ -0,0 +1,111 @@
+@use "../../scss/mixin";
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+  padding-inline: var(--spacing-050);
+}
+
+.item-element {
+  position: relative;
+  min-height: 3.5rem;
+  width: 100%;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  outline: 0;
+  background: transparent;
+  text-align: initial;
+  text-decoration: none;
+  cursor: pointer;
+
+  @include mixin.get-typography(body-large);
+
+  .list-item-content {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-200);
+    min-height: 3.5rem;
+    padding-inline: var(--spacing-200);
+    color: var(--_label-text-color);
+    opacity: var(--_label-text-opacity, 1);
+  }
+
+  .leading,
+  .trailing {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.5rem;
+    color: var(--_leading-trailing-color);
+  }
+
+  .trailing {
+    margin-inline-start: auto;
+  }
+
+  .content {
+    display: block;
+    flex: 1;
+    min-inline-size: 0;
+  }
+
+  .background {
+    position: absolute;
+    inset: 0;
+    background-color: var(--_container-color);
+    opacity: var(--_container-opacity, 1);
+    border-radius: var(--shape-corner-medium);
+    pointer-events: none;
+  }
+
+  .focus-ring {
+    --focus-ring-container-shape-start-start: var(--shape-corner-medium);
+    --focus-ring-container-shape-start-end: var(--shape-corner-medium);
+    --focus-ring-container-shape-end-start: var(--shape-corner-medium);
+    --focus-ring-container-shape-end-end: var(--shape-corner-medium);
+    z-index: 2;
+  }
+
+  .ripple {
+    --ripple-state-opacity: var(--_container-state-opacity, 0);
+    --ripple-pressed-color: var(--_container-state-color);
+    border-radius: var(--shape-corner-medium);
+  }
+}
+.item-element {
+  --_container-color: transparent;
+  --_label-text-color: var(--color-on-surface);
+  --_leading-trailing-color: var(--color-on-surface-variant);
+  --_container-state-color: var(--color-on-surface);
+
+  &:hover:not(:where(.disabled, .selected)) {
+    --_container-state-opacity: 0.08;
+  }
+
+  &.pressed:not(:where(.disabled)) {
+    --_container-state-opacity: 0.12;
+  }
+
+  &.selected {
+    --_container-color: var(--color-secondary-container);
+    --_label-text-color: var(--color-on-secondary-container);
+    --_leading-trailing-color: var(--color-on-secondary-container);
+    --_container-state-color: var(--color-on-secondary-container);
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    --_label-text-color: var(--color-on-surface);
+    --_label-text-opacity: 0.38;
+    --_leading-trailing-color: var(--color-on-surface);
+    --_container-opacity: 0.12;
+
+    .ripple {
+      display: none;
+    }
+  }
+}