-
Notifications
You must be signed in to change notification settings - Fork 2.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Copies the "TinyMCE Stylesheets Property Editor UI" to the Templating/Stylesheet package * Deprecates the "TinyMCE Stylesheets Property Editor UI" as it may be used in 3rd party extensions. TinyMCE will be removed in v16, but this deprecation notice in 15.4 will at least notify that the "Umb.PropertyEditorUi.StylesheetPicker" UI can be used. * Updates TinyMCE to use the Stylesheet Picker UI * Prevent Stylesheet folders from being picked + UI tweaks * Updates Stylesheet mock data * Stylesheet Rule Input - removes Edit button uses `@open` event for UI consistency with other pickers. * Updates pangram * Amending to be "header" instead of "heading" * Adds "stylesheets" config to Tiptap data-type * Updates RTE styles for Tiptap Moves "StarterKit" styles to the RTE Essentials extension registration. Scopes TinyMCE in "rte-content.css" (for now).
- Loading branch information
1 parent
a20f11e
commit 3ef9d64
Showing
18 changed files
with
281 additions
and
146 deletions.
There are no files selected for viewing
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 |
|---|---|---|
| @@ -1,49 +1,51 @@ | ||
| .umb-macro-holder { | ||
| border: 3px dotted red; | ||
| padding: 7px; | ||
| margin: 3px; | ||
| display: block; | ||
| position: relative; | ||
| } | ||
| #tinymce { | ||
| .umb-macro-holder { | ||
| border: 3px dotted red; | ||
| padding: 7px; | ||
| margin: 3px; | ||
| display: block; | ||
| position: relative; | ||
| } | ||
|
|
||
| .umb-macro-holder::after { | ||
| content: 'Macros are no longer supported. Please use the block picker instead.'; | ||
| position: absolute; | ||
| top: 50%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%); | ||
| color: white; | ||
| background-color: rgba(0, 0, 0, 0.7); | ||
| padding: 10px; | ||
| border-radius: 5px; | ||
| } | ||
| .umb-macro-holder::after { | ||
| content: 'Macros are no longer supported. Please use the block picker instead.'; | ||
| position: absolute; | ||
| top: 50%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%); | ||
| color: white; | ||
| background-color: rgba(0, 0, 0, 0.7); | ||
| padding: 10px; | ||
| border-radius: 5px; | ||
| } | ||
|
|
||
| .umb-embed-holder { | ||
| position: relative; | ||
| } | ||
| .umb-embed-holder { | ||
| position: relative; | ||
| } | ||
|
|
||
| .umb-embed-holder > * { | ||
| user-select: none; | ||
| pointer-events: none; | ||
| } | ||
| .umb-embed-holder > * { | ||
| user-select: none; | ||
| pointer-events: none; | ||
| } | ||
|
|
||
| .umb-embed-holder[data-mce-selected] { | ||
| outline: 2px solid var(--uui-palette-spanish-pink-light); | ||
| } | ||
| .umb-embed-holder[data-mce-selected] { | ||
| outline: 2px solid var(--uui-palette-spanish-pink-light); | ||
| } | ||
|
|
||
| .umb-embed-holder::before { | ||
| z-index: 1000; | ||
| width: 100%; | ||
| height: 100%; | ||
| position: absolute; | ||
| content: ' '; | ||
| } | ||
| .umb-embed-holder::before { | ||
| z-index: 1000; | ||
| width: 100%; | ||
| height: 100%; | ||
| position: absolute; | ||
| content: ' '; | ||
| } | ||
|
|
||
| .umb-embed-holder[data-mce-selected]::before { | ||
| background: rgba(0, 0, 0, 0.025); | ||
| } | ||
| .umb-embed-holder[data-mce-selected]::before { | ||
| background: rgba(0, 0, 0, 0.025); | ||
| } | ||
|
|
||
| *[data-mce-selected='inline-boundary'] { | ||
| background: rgba(0, 0, 0, 0.025); | ||
| outline: 2px solid var(--uui-palette-spanish-pink-light); | ||
| *[data-mce-selected='inline-boundary'] { | ||
| background: rgba(0, 0, 0, 0.025); | ||
| outline: 2px solid var(--uui-palette-spanish-pink-light); | ||
| } | ||
| } |
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
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
3 changes: 3 additions & 0 deletions
3
src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/property-editors/manifests.ts
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,3 @@ | ||
| import { manifest as stylesheetPickerManifest } from './stylesheet-picker/manifests.js'; | ||
|
|
||
| export const manifests: Array<UmbExtensionManifest> = [stylesheetPickerManifest]; |
13 changes: 13 additions & 0 deletions
13
...lient/src/packages/templating/stylesheets/property-editors/stylesheet-picker/manifests.ts
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,13 @@ | ||
| import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/property-editor'; | ||
|
|
||
| export const manifest: ManifestPropertyEditorUi = { | ||
| type: 'propertyEditorUi', | ||
| alias: 'Umb.PropertyEditorUi.StylesheetPicker', | ||
| name: 'Stylesheet Picker Property Editor UI', | ||
| js: () => import('./property-editor-ui-stylesheet-picker.element.js'), | ||
| meta: { | ||
| label: 'Stylesheet Picker', | ||
| icon: 'icon-document', | ||
| group: 'common', | ||
| }, | ||
| }; |
46 changes: 46 additions & 0 deletions
46
...sheets/property-editors/stylesheet-picker/property-editor-ui-stylesheet-picker.element.ts
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,46 @@ | ||
| import { customElement, html, property } from '@umbraco-cms/backoffice/external/lit'; | ||
| import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; | ||
| import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor'; | ||
| import { UmbServerFilePathUniqueSerializer } from '@umbraco-cms/backoffice/server-file-system'; | ||
| import type { | ||
| UmbPropertyEditorConfigCollection, | ||
| UmbPropertyEditorUiElement, | ||
| } from '@umbraco-cms/backoffice/property-editor'; | ||
| import type { UmbStylesheetInputElement } from '@umbraco-cms/backoffice/stylesheet'; | ||
|
|
||
| @customElement('umb-property-editor-ui-stylesheet-picker') | ||
| export class UmbPropertyEditorUIStylesheetPickerElement extends UmbLitElement implements UmbPropertyEditorUiElement { | ||
| readonly #serverFilePathUniqueSerializer = new UmbServerFilePathUniqueSerializer(); | ||
|
|
||
| @property({ type: Array }) | ||
| public set value(value: Array<string>) { | ||
| if (!value) return; | ||
| this.#value = value.map((unique) => this.#serverFilePathUniqueSerializer.toUnique(unique)); | ||
| } | ||
| public get value(): Array<string> { | ||
| if (!this.#value) return []; | ||
| return this.#value.map((unique) => this.#serverFilePathUniqueSerializer.toServerPath(unique)) as string[]; | ||
| } | ||
| #value: Array<string> = []; | ||
|
|
||
| @property({ type: Object, attribute: false }) | ||
| public config?: UmbPropertyEditorConfigCollection; | ||
|
|
||
| #onChange(event: CustomEvent) { | ||
| const target = event.target as UmbStylesheetInputElement; | ||
| this.#value = target.selection ?? []; | ||
| this.dispatchEvent(new UmbPropertyValueChangeEvent()); | ||
| } | ||
|
|
||
| override render() { | ||
| return html`<umb-stylesheet-input @change=${this.#onChange} .selection=${this.#value}></umb-stylesheet-input>`; | ||
| } | ||
| } | ||
|
|
||
| export default UmbPropertyEditorUIStylesheetPickerElement; | ||
|
|
||
| declare global { | ||
| interface HTMLElementTagNameMap { | ||
| 'umb-property-editor-ui-stylesheet-picker': UmbPropertyEditorUIStylesheetPickerElement; | ||
| } | ||
| } |
21 changes: 21 additions & 0 deletions
21
...sheets/property-editors/stylesheet-picker/property-editor-ui-stylesheet-picker.stories.ts
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,21 @@ | ||
| import { umbDataTypeMockDb } from '../../../../../mocks/data/data-type/data-type.db.js'; | ||
| import { html } from '@umbraco-cms/backoffice/external/lit'; | ||
| import type { Meta } from '@storybook/web-components'; | ||
|
|
||
| import './property-editor-ui-tiny-mce-stylesheets-configuration.element.js'; | ||
| import type { UmbDataTypeDetailModel } from '@umbraco-cms/backoffice/data-type'; | ||
|
|
||
| const dataTypeData = umbDataTypeMockDb.read('dt-richTextEditor') as unknown as UmbDataTypeDetailModel; | ||
|
|
||
| export default { | ||
| title: 'Property Editor UIs/Stylesheet Picker', | ||
| component: 'umb-property-editor-ui-stylesheet-picker', | ||
| id: 'umb-property-editor-ui-sstylesheet-picker', | ||
| } as Meta; | ||
|
|
||
| export const AAAOverview = ({ value }: any) => | ||
| html`<umb-property-editor-ui-stylesheet-picker .value=${value}></umb-property-editor-ui-stylesheet-picker>`; | ||
| AAAOverview.storyName = 'Overview'; | ||
| AAAOverview.args = { | ||
| value: dataTypeData?.values?.find((x) => x.alias === 'stylesheets')?.value ?? [], | ||
| }; |
Oops, something went wrong.