@redvars/peacock 3.6.0 → 3.6.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@redvars/peacock",
   "description": "The foundation for beautiful user interfaces",
   "license": "Apache-2.0",
-  "version": "3.6.0",
+  "version": "3.6.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -41,6 +41,12 @@
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
+    "@tiptap/core": "^2.11.3",
+    "@tiptap/extension-mention": "^2.11.3",
+    "@tiptap/extension-placeholder": "^2.11.3",
+    "@tiptap/extension-underline": "^2.11.3",
+    "@tiptap/pm": "^2.11.3",
+    "@tiptap/starter-kit": "^2.11.3",
     "@floating-ui/dom": "^1.7.5",
     "@types/prettier": "^3.0.0",
     "d3": "^7.9.0",

package/readme.md

@@ -44,9 +44,9 @@ Visit [https://peacock.redvars.com](https://peacock.redvars.com) to view the doc
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
 
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.6.0/dist/assets/styles.css"></link>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.6.1/dist/assets/styles.css"></link>
   <script type='module'
-          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.6.0/dist/peacock-loader.js'></script>
+          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.6.1/dist/peacock-loader.js'></script>
 </head>
 
 <wc-button>Button</wc-button>
@@ -74,7 +74,7 @@ menus, checkboxes, and radio buttons.
 | Date time picker                                                    | datetime-picker | 🔴    |
 | [Field / Form control](https://peacock.redvars.com/components/field) | wc-field       | 🟡    |
 | File picker                                                         | file-picker     | 🔴    |
-| HTML editor                                                         | html-editor     | 🔴    |
+| [HTML editor](https://peacock.redvars.com/components/html-editor)   | wc-html-editor  | 🟡    |
 | [Input](https://peacock.redvars.com/components/input)               | wc-input        | 🟢    |
 | Input URL                                                           | input-url       | 🔴    |
 | Month picker                                                        | month-picker    | 🔴    |

package/src/code-highlighter/code-highlighter.ts

@@ -171,7 +171,7 @@ export class CodeHighlighter extends LitElement {
           <div class="header-title">${this.language}</div>
           <div class="header-actions">
             <wc-icon-button
-              color="dark"
+              color="surface"
               variant="text"
               size="xs"
               aria-label=${locale.copyToClipboard}

package/src/flow-designer/flow-designer-node.ts

@@ -143,7 +143,7 @@ export class FlowDesignerNode extends LitElement {
 
     return html`
       <div class="node-header">
-        <wc-icon name=${icon} class="node-icon"></wc-icon>
+        <wc-icon provider="carbon" name=${icon} class="node-icon"></wc-icon>
         <span class="node-title">${node.label}</span>
       </div>
     `;

package/src/html-editor/html-editor.scss

@@ -13,10 +13,18 @@
   // Let the field expand to fit content vertically
   --field-height: auto;
   --field-padding-block: 0;
+  --code-editor-height: var(--html-editor-min-height, 8rem);
 
   width: 100%;
 }
 
+.mode-switcher {
+  display: flex;
+  justify-content: flex-end;
+  padding: var(--spacing-075, 0.375rem) var(--spacing-100, 0.5rem)
+    var(--spacing-050, 0.25rem);
+}
+
 // ── Toolbar ─────────────────────────────────────────────────────────────────
 
 .html-editor-toolbar {
@@ -76,6 +84,15 @@
     cursor: not-allowed;
   }
 
+  &.active {
+    background: color-mix(
+      in srgb,
+      var(--color-primary, #6750a4) 16%,
+      transparent
+    );
+    color: var(--color-primary, #6750a4);
+  }
+
   wc-icon {
     pointer-events: none;
   }
@@ -104,13 +121,27 @@
   word-break: break-word;
   overflow-wrap: break-word;
 
+  &.hidden {
+    display: none;
+  }
+
+  .tiptap-root {
+    min-height: calc(var(--html-editor-min-height, 8rem) - 2rem);
+  }
+
+  .ProseMirror {
+    outline: none;
+    min-height: calc(var(--html-editor-min-height, 8rem) - 2rem);
+  }
+
   // Placeholder
-  &.is-empty::before {
+  .ProseMirror p.is-editor-empty:first-child::before {
     content: attr(data-placeholder);
     color: var(--color-on-surface-variant, #49454f);
     opacity: 0.6;
     pointer-events: none;
-    position: absolute;
+    float: left;
+    height: 0;
   }
 
   // Sensible defaults for user-generated rich content
@@ -131,6 +162,12 @@
   }
 }
 
+.html-source {
+  &.hidden {
+    display: none;
+  }
+}
+
 // ── Read-only tag ───────────────────────────────────────────────────────────
 
 .read-only-tag {
@@ -144,3 +181,8 @@
   cursor: not-allowed;
   opacity: 0.6;
 }
+
+:host([disabled]) .html-source,
+:host([readonly]) .html-source {
+  opacity: 0.7;
+}

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>
     `;
   }