-
Notifications
You must be signed in to change notification settings - Fork 83
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add color and background selection to rich-text-editor (#7392)
- Loading branch information
1 parent
cb71069
commit 81125b3
Showing
21 changed files
with
635 additions
and
3 deletions.
There are no files selected for viewing
91 changes: 91 additions & 0 deletions
91
packages/rich-text-editor/src/vaadin-lit-rich-text-editor-popup.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| /** | ||
| * @license | ||
| * Copyright (c) 2000 - 2024 Vaadin Ltd. | ||
| * | ||
| * This program is available under Vaadin Commercial License and Service Terms. | ||
| * | ||
| * | ||
| * See https://vaadin.com/commercial-license-and-service-terms for the full | ||
| * license. | ||
| */ | ||
| import { css, html, LitElement } from 'lit'; | ||
| import { defineCustomElement } from '@vaadin/component-base/src/define.js'; | ||
| import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js'; | ||
| import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js'; | ||
| import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js'; | ||
| import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js'; | ||
| import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js'; | ||
| import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
| import { RichTextEditorPopupMixin } from './vaadin-rich-text-editor-popup-mixin.js'; | ||
|
|
||
| /** | ||
| * An element used internally by `<vaadin-rich-text-editor>`. Not intended to be used separately. | ||
| * @private | ||
| */ | ||
| class RichTextEditorPopup extends RichTextEditorPopupMixin(PolylitMixin(LitElement)) { | ||
| static get is() { | ||
| return 'vaadin-rich-text-editor-popup'; | ||
| } | ||
|
|
||
| static get styles() { | ||
| return css` | ||
| :host { | ||
| display: none; | ||
| } | ||
| `; | ||
| } | ||
|
|
||
| /** @protected */ | ||
| render() { | ||
| return html` | ||
| <vaadin-rich-text-editor-popup-overlay | ||
| .renderer="${this.renderer}" | ||
| .opened="${this.opened}" | ||
| .positionTarget="${this.target}" | ||
| no-vertical-overlap | ||
| horizontal-align="start" | ||
| vertical-align="top" | ||
| focus-trap | ||
| @opened-changed="${this._onOpenedChanged}" | ||
| @vaadin-overlay-escape-press="${this._onOverlayEscapePress}" | ||
| ></vaadin-rich-text-editor-popup-overlay> | ||
| `; | ||
| } | ||
|
|
||
| /** @private */ | ||
| _onOpenedChanged(event) { | ||
| this.opened = event.detail.value; | ||
| } | ||
| } | ||
|
|
||
| defineCustomElement(RichTextEditorPopup); | ||
|
|
||
| export { RichTextEditorPopup }; | ||
|
|
||
| /** | ||
| * An element used internally by `<vaadin-rich-text-editor>`. Not intended to be used separately. | ||
| * @private | ||
| */ | ||
| class RichTextEditorPopupOverlay extends PositionMixin( | ||
| OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))), | ||
| ) { | ||
| static get is() { | ||
| return 'vaadin-rich-text-editor-popup-overlay'; | ||
| } | ||
|
|
||
| static get styles() { | ||
| return overlayStyles; | ||
| } | ||
|
|
||
| /** @protected */ | ||
| render() { | ||
| return html` | ||
| <div id="backdrop" part="backdrop" hidden></div> | ||
| <div part="overlay" id="overlay"> | ||
| <div part="content" id="content"><slot></slot></div> | ||
| </div> | ||
| `; | ||
| } | ||
| } | ||
|
|
||
| defineCustomElement(RichTextEditorPopupOverlay); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
70 changes: 70 additions & 0 deletions
70
packages/rich-text-editor/src/vaadin-rich-text-editor-popup-mixin.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| /** | ||
| * @license | ||
| * Copyright (c) 2000 - 2024 Vaadin Ltd. | ||
| * | ||
| * This program is available under Vaadin Commercial License and Service Terms. | ||
| * | ||
| * | ||
| * See https://vaadin.com/commercial-license-and-service-terms for the full | ||
| * license. | ||
| */ | ||
|
|
||
| /** | ||
| * @polymerMixin | ||
| */ | ||
| export const RichTextEditorPopupMixin = (superClass) => | ||
| class RichTextEditorPopupMixinClass extends superClass { | ||
| static get properties() { | ||
| return { | ||
| target: { | ||
| type: Object, | ||
| }, | ||
|
|
||
| opened: { | ||
| type: Boolean, | ||
| notify: true, | ||
| }, | ||
|
|
||
| colors: { | ||
| type: Array, | ||
| }, | ||
|
|
||
| renderer: { | ||
| type: Object, | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
| static get observers() { | ||
| return ['__openedOrTargetChanged(opened, target)', '__colorsChanged(colors)']; | ||
| } | ||
|
|
||
| /** @private */ | ||
| __colorsChanged(colors) { | ||
| this.renderer = (root) => { | ||
| if (!root.firstChild) { | ||
| colors.forEach((color) => { | ||
| const btn = document.createElement('button'); | ||
| btn.style.background = color; | ||
| btn.dataset.color = color; | ||
| btn.addEventListener('click', () => { | ||
| this.dispatchEvent(new CustomEvent('color-selected', { detail: { color } })); | ||
| }); | ||
| root.appendChild(btn); | ||
| }); | ||
| } | ||
| }; | ||
| } | ||
|
|
||
| /** @private */ | ||
| __openedOrTargetChanged(opened, target) { | ||
| if (target) { | ||
| target.setAttribute('aria-expanded', opened ? 'true' : 'false'); | ||
| } | ||
| } | ||
|
|
||
| /** @protected */ | ||
| _onOverlayEscapePress() { | ||
| this.target.focus(); | ||
| } | ||
| }; |
Oops, something went wrong.