diff --git a/src/Umbraco.Web.UI.Client/src/css/rte-content.css b/src/Umbraco.Web.UI.Client/src/css/rte-content.css index 2e6d1c23dccf..05aa9227a538 100644 --- a/src/Umbraco.Web.UI.Client/src/css/rte-content.css +++ b/src/Umbraco.Web.UI.Client/src/css/rte-content.css @@ -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); + } } diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/data-type/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/data-type/data-type.data.ts index 56a114c6c040..2b858b9d2339 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/data/data-type/data-type.data.ts +++ b/src/Umbraco.Web.UI.Client/src/mocks/data/data-type/data-type.data.ts @@ -1075,6 +1075,7 @@ export const data: Array = [ ], ], }, + { alias: 'stylesheets', value: ['/rte-styles.css'] }, { alias: 'dimensions', value: { height: 500 } }, { alias: 'maxImageSize', value: 500 }, { alias: 'ignoreUserStartNodes', value: false }, @@ -1105,7 +1106,7 @@ export const data: Array = [ '+a[id|style|rel|data-id|data-udi|rev|charset|hreflang|dir|lang|tabindex|accesskey|type|name|href|target|title|class|onfocus|onblur|onclick|ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],-strong/-b[class|style],-em/-i[class|style],-strike[class|style],-s[class|style],-u[class|style],#p[id|style|dir|class|align],-ol[class|reversed|start|style|type],-ul[class|style],-li[class|style],br[class],img[id|dir|lang|longdesc|usemap|style|class|src|onmouseover|onmouseout|border|alt=|title|hspace|vspace|width|height|align|umbracoorgwidth|umbracoorgheight|onresize|onresizestart|onresizeend|rel|data-id],-sub[style|class],-sup[style|class],-blockquote[dir|style|class],-table[border=0|cellspacing|cellpadding|width|height|class|align|summary|style|dir|id|lang|bgcolor|background|bordercolor],-tr[id|lang|dir|class|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor],tbody[id|class],thead[id|class],tfoot[id|class],#td[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor|scope],-th[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|scope],caption[id|lang|dir|class|style],-div[id|dir|class|align|style],-span[class|align|style],-pre[class|align|style],address[class|align|style],-h1[id|dir|class|align|style],-h2[id|dir|class|align|style],-h3[id|dir|class|align|style],-h4[id|dir|class|align|style],-h5[id|dir|class|align|style],-h6[id|style|dir|class|align|style],hr[class|style],small[class|style],dd[id|class|title|style|dir|lang],dl[id|class|title|style|dir|lang],dt[id|class|title|style|dir|lang],object[class|id|width|height|codebase|*],param[name|value|_value|class],embed[type|width|height|src|class|*],map[name|class],area[shape|coords|href|alt|target|class],bdo[class],button[class],iframe[*],figure,figcaption,video[*],audio[*],picture[*],source[*],canvas[*]', }, { alias: 'invalidElements', value: 'font' }, - { alias: 'stylesheets', value: [] }, + { alias: 'stylesheets', value: ['/rte-styles.css'] }, { alias: 'toolbar', value: [ diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/stylesheet/stylesheet.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/stylesheet/stylesheet.data.ts index 1145bb66e9fa..14b53b5bc360 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/data/stylesheet/stylesheet.data.ts +++ b/src/Umbraco.Web.UI.Client/src/mocks/data/stylesheet/stylesheet.data.ts @@ -10,93 +10,89 @@ export type UmbMockStylesheetModel = StylesheetResponseModel & export const data: Array = [ { - name: 'Stylesheet File 1.css', - path: '/Stylesheet File 1.css', + name: 'RTE Styles', + path: '/rte-styles.css', parent: null, isFolder: false, hasChildren: false, content: ` - /** Stylesheet 1 */ +/** RTE Stylesheet */ - h1 { - color: blue; +#editor, #tinymce { + background-color: pink; + font-size: 1.5rem; } -/**umb_name:bjjh*/ -h1 { - color: blue; +/**umb_name:Page header*/ +h2 { + color: red; + font-size: 2rem; } -/**umb_name:comeone*/ -h1 { +/**umb_name:Section header*/ +h3 { color: blue; + font-size: 1.75rem; } -/**umb_name:lol*/ -h1 { - color: blue; +/**umb_name:Paragraph header*/ +h4 { + color: green; + font-size: 1.5rem; }`, }, { - name: 'Stylesheet File 2.css', - path: '/Stylesheet File 2.css', + name: 'RTE Styles 2', + path: '/rte-styles-2.css', parent: null, isFolder: false, hasChildren: false, content: ` - /** Stylesheet 2 */ -h1 { - color: green; +/** RTE Stylesheet 2 */ + +body { + font-family: cursive; } -/**umb_name:HELLO*/ -h1 { - color: green; +/**umb_name:Red*/ +span { + color: red; } -/**umb_name:SOMETHING*/ -h1 { - color: green; +/**umb_name:Blue*/ +span { + color: blue; } -/**umb_name:NIOCE*/ -h1 { +/**umb_name:Green*/ +span { color: green; }`, }, { - name: 'Folder 1', - path: '/Folder 1', + name: 'Folder for website', + path: '/folder-for-website', parent: null, isFolder: true, hasChildren: true, content: '', }, { - name: 'Stylesheet File 3.css', - path: '/Folder 1/Stylesheet File 3.css', + name: 'Website Styles', + path: '/folder-for-website/website-styles.css', parent: { - path: '/Folder 1', + path: '/folder-for-website', }, hasChildren: false, isFolder: false, - content: `h1 { - color: pink; -} - -/**umb_name:ONE*/ -h1 { - color: pink; -} + content: ` +/** Website Stylesheet */ -/**umb_name:TWO*/ -h1 { - color: pink; +body { + background-color: #ffb7d3; + color: #b57790; + font-family: sans-serif; } - -/**umb_name:THREE*/ -h1 { - color: pink; -}`, +`, }, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/stylesheet-input/stylesheet-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/stylesheet-input/stylesheet-input.element.ts index 6e6708ab8ae3..30f0bc5b21e5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/stylesheet-input/stylesheet-input.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/stylesheet-input/stylesheet-input.element.ts @@ -110,7 +110,7 @@ export class UmbStylesheetInputElement extends UUIFormControlMixin(UmbLitElement this.#pickerContext.openPicker()} + @click=${() => this.#pickerContext.openPicker({ pickableFilter: (item) => !item.isFolder })} label="Add stylesheet"> `; } @@ -118,13 +118,14 @@ export class UmbStylesheetInputElement extends UUIFormControlMixin(UmbLitElement #renderItem(item: UmbStylesheetItemModel) { if (!item.unique) return; return html` - + + this.#pickerContext.requestRemoveItem(item.unique!)} label=${this.localize.term('general_remove')}> - + `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/stylesheet-rule-input/stylesheet-rule-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/stylesheet-rule-input/stylesheet-rule-input.element.ts index 04d8b7d3b54a..103e7f7a1be5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/stylesheet-rule-input/stylesheet-rule-input.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/stylesheet-rule-input/stylesheet-rule-input.element.ts @@ -79,11 +79,12 @@ export class UmbStylesheetRuleInputElement extends UUIFormControlMixin(UmbLitEle this.rules, (rule, index) => rule.name + index, (rule, index) => html` - + this.#editRule(rule, index)}> - this.#editRule(rule, index)}> this.#removeRule(rule)}> diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/stylesheet-rule-input/stylesheet-rule-settings-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/stylesheet-rule-input/stylesheet-rule-settings-modal.element.ts index 2875e4e48671..343d94599fb8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/stylesheet-rule-input/stylesheet-rule-settings-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/stylesheet-rule-input/stylesheet-rule-settings-modal.element.ts @@ -97,7 +97,7 @@ export default class UmbStylesheetRuleSettingsModalElement extends UmbModalBaseE
1 2 3 4 5 6 7 8 9 0 € £ $ % & (.,;:'"!?)
- Just keep examining every bid quoted for zinc etchings. + Amazingly few discotheques provide jukeboxes. diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/manifests.ts index f2d89860f0a2..69d917f09e18 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/manifests.ts @@ -4,6 +4,7 @@ import { manifests as treeManifests } from './tree/manifests.js'; import { manifests as workspaceManifests } from './workspace/manifests.js'; import { manifests as entityActionManifests } from './entity-actions/manifests.js'; import { manifests as componentManifests } from './global-components/manifests.js'; +import { manifests as propertyEditorsManifests } from './property-editors/manifests.js'; export const manifests: Array = [ ...repositoryManifests, @@ -12,4 +13,5 @@ export const manifests: Array = [ ...workspaceManifests, ...entityActionManifests, ...componentManifests, + ...propertyEditorsManifests, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/property-editors/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/property-editors/manifests.ts new file mode 100644 index 000000000000..1207b62ca8f6 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/property-editors/manifests.ts @@ -0,0 +1,3 @@ +import { manifest as stylesheetPickerManifest } from './stylesheet-picker/manifests.js'; + +export const manifests: Array = [stylesheetPickerManifest]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/property-editors/stylesheet-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/property-editors/stylesheet-picker/manifests.ts new file mode 100644 index 000000000000..a0990dec6150 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/property-editors/stylesheet-picker/manifests.ts @@ -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', + }, +}; diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/property-editors/stylesheet-picker/property-editor-ui-stylesheet-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/property-editors/stylesheet-picker/property-editor-ui-stylesheet-picker.element.ts new file mode 100644 index 000000000000..af764134c698 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/property-editors/stylesheet-picker/property-editor-ui-stylesheet-picker.element.ts @@ -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) { + if (!value) return; + this.#value = value.map((unique) => this.#serverFilePathUniqueSerializer.toUnique(unique)); + } + public get value(): Array { + if (!this.#value) return []; + return this.#value.map((unique) => this.#serverFilePathUniqueSerializer.toServerPath(unique)) as string[]; + } + #value: Array = []; + + @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``; + } +} + +export default UmbPropertyEditorUIStylesheetPickerElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-property-editor-ui-stylesheet-picker': UmbPropertyEditorUIStylesheetPickerElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/property-editors/stylesheet-picker/property-editor-ui-stylesheet-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/property-editors/stylesheet-picker/property-editor-ui-stylesheet-picker.stories.ts new file mode 100644 index 000000000000..8363c00a0cc4 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/property-editors/stylesheet-picker/property-editor-ui-stylesheet-picker.stories.ts @@ -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``; +AAAOverview.storyName = 'Overview'; +AAAOverview.args = { + value: dataTypeData?.values?.find((x) => x.alias === 'stylesheets')?.value ?? [], +}; diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/property-editors/stylesheet-picker/property-editor-ui-stylesheet-picker.test.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/property-editors/stylesheet-picker/property-editor-ui-stylesheet-picker.test.ts new file mode 100644 index 000000000000..3a53652f45f7 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/property-editors/stylesheet-picker/property-editor-ui-stylesheet-picker.test.ts @@ -0,0 +1,23 @@ +import { UmbPropertyEditorUIStylesheetPickerElement } from './property-editor-ui-stylesheet-picker.element.js'; +import { expect, fixture, html } from '@open-wc/testing'; +import { type UmbTestRunnerWindow, defaultA11yConfig } from '@umbraco-cms/internal/test-utils'; + +describe('UmbPropertyEditorUIStylesheetPickerElement', () => { + let element: UmbPropertyEditorUIStylesheetPickerElement; + + beforeEach(async () => { + element = await fixture(html` + + `); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UmbPropertyEditorUIStylesheetPickerElement); + }); + + if ((window as UmbTestRunnerWindow).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } +}); diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.element.ts index a0efa34c22f4..048383857c37 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.element.ts @@ -1,4 +1,5 @@ import { customElement, html, property } from '@umbraco-cms/backoffice/external/lit'; +import { UmbDeprecation } from '@umbraco-cms/backoffice/utils'; 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'; @@ -38,6 +39,16 @@ export class UmbPropertyEditorUITinyMceStylesheetsConfigurationElement this.dispatchEvent(new UmbPropertyValueChangeEvent()); } + constructor() { + super(); + new UmbDeprecation({ + deprecated: 'umb-property-editor-ui-tiny-mce-stylesheets-configuration', + removeInVersion: '16.0.0', + solution: + "Use `` instead, or the 'Umb.PropertyEditorUi.StylesheetPicker' manifest.", + }).warn(); + } + override render() { return html``; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/tiny-mce/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/tiny-mce/manifests.ts index 902911315afd..b3c14d87c341 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/tiny-mce/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/tiny-mce/manifests.ts @@ -66,7 +66,7 @@ export const manifests: Array = [ alias: 'stylesheets', label: '#treeHeaders_stylesheets', description: 'Pick the stylesheets whose editor styles should be available when editing', - propertyEditorUiAlias: 'Umb.PropertyEditorUI.TinyMCE.StylesheetsConfiguration', + propertyEditorUiAlias: 'Umb.PropertyEditorUi.StylesheetPicker', weight: 20, }, { diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/input-tiptap.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/input-tiptap.element.ts index 03b4824fc787..4541209e2194 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/input-tiptap.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/input-tiptap.element.ts @@ -1,6 +1,6 @@ import type { UmbTiptapExtensionApi } from '../../extensions/types.js'; import type { UmbTiptapToolbarValue } from '../types.js'; -import { css, customElement, html, property, state, unsafeCSS, when } from '@umbraco-cms/backoffice/external/lit'; +import { css, customElement, html, map, property, state, unsafeCSS, when } from '@umbraco-cms/backoffice/external/lit'; import { loadManifestApi } from '@umbraco-cms/backoffice/extension-api'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; import { Editor } from '@umbraco-cms/backoffice/external/tiptap'; @@ -17,6 +17,8 @@ const TIPTAP_CORE_EXTENSION_ALIAS = 'Umb.Tiptap.RichTextEssentials'; @customElement('umb-input-tiptap') export class UmbInputTiptapElement extends UmbFormControlMixin(UmbLitElement) { + #stylesheets = new Set(['/umbraco/backoffice/css/rte-content.css']); + @property({ type: String }) override set value(value: string) { if (value === this.#value) return; @@ -121,6 +123,11 @@ export class UmbInputTiptapElement extends UmbFormControlMixin>('stylesheets'); + if (stylesheets?.length) { + stylesheets.forEach((x) => this.#stylesheets.add(x)); + } + this._toolbar = this.configuration?.getValueByAlias('toolbar') ?? [[[]]]; const tiptapExtensions: Extensions = []; @@ -179,6 +186,7 @@ export class UmbInputTiptapElement extends UmbFormControlMixin html``)} @@ -217,7 +225,6 @@ export class UmbInputTiptapElement extends UmbFormControlMixin .tiptap { height: 100%; width: 100%; outline: none; @@ -246,47 +254,6 @@ export class UmbInputTiptapElement extends UmbFormControlMixin code) { - background-color: var(--uui-color-surface-alt); - padding: var(--uui-size-space-1) var(--uui-size-space-2); - border-radius: calc(var(--uui-border-radius) * 2); - } - - code { - font-family: 'Roboto Mono', monospace; - background: none; - color: inherit; - font-size: 0.8rem; - padding: 0; - } - - h1, - h2, - h3, - h4, - h5, - h6 { - margin-top: 0; - margin-bottom: 0.5em; - } - - max-width: 100%; - - li { - > p { - margin: 0; - padding: 0; - } - } } `, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/rich-text-essentials.tiptap-api.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/rich-text-essentials.tiptap-api.ts index 48f1708a6640..e51609936dbd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/rich-text-essentials.tiptap-api.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/rich-text-essentials.tiptap-api.ts @@ -1,4 +1,5 @@ import { UmbTiptapExtensionApiBase } from '../base.js'; +import { css } from '@umbraco-cms/backoffice/external/lit'; import { Div, HtmlGlobalAttributes, Span, StarterKit, TrailingNode } from '@umbraco-cms/backoffice/external/tiptap'; export class UmbTiptapRichTextEssentialsExtensionApi extends UmbTiptapExtensionApiBase { @@ -36,6 +37,46 @@ export class UmbTiptapRichTextEssentialsExtensionApi extends UmbTiptapExtensionA }), TrailingNode, ]; + + override getStyles = () => css` + pre { + background-color: var(--uui-color-surface-alt); + padding: var(--uui-size-space-2) var(--uui-size-space-4); + border-radius: calc(var(--uui-border-radius) * 2); + overflow-x: auto; + } + + code:not(pre > code) { + background-color: var(--uui-color-surface-alt); + padding: var(--uui-size-space-1) var(--uui-size-space-2); + border-radius: calc(var(--uui-border-radius) * 2); + } + + code { + font-family: 'Roboto Mono', monospace; + background: none; + color: inherit; + font-size: 0.8rem; + padding: 0; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + margin-top: 0; + margin-bottom: 0.5em; + } + + li { + > p { + margin: 0; + padding: 0; + } + } + `; } export default UmbTiptapRichTextEssentialsExtensionApi; diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/style-select/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/style-select/manifests.ts index 298270f1f558..915c7c939e8d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/style-select/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/style-select/manifests.ts @@ -13,9 +13,9 @@ export const manifests: Array = [ { label: 'Headers', items: [ - { label: 'Page heading', data: 'h2', style: 'font-size: x-large;font-weight: bold;' }, - { label: 'Section heading', data: 'h3', style: 'font-size: large;font-weight: bold;' }, - { label: 'Paragraph heading', data: 'h4', style: 'font-weight: bold;' }, + { label: 'Page header', data: 'h2', style: 'font-size: x-large;font-weight: bold;' }, + { label: 'Section header', data: 'h3', style: 'font-size: large;font-weight: bold;' }, + { label: 'Paragraph header', data: 'h4', style: 'font-weight: bold;' }, ], }, { diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/manifests.ts index 9b7c323e532a..737186a38564 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/manifests.ts @@ -31,12 +31,19 @@ _Drag and drop the available actions onto the toolbar._`, propertyEditorUiAlias: 'Umb.PropertyEditorUi.Tiptap.ToolbarConfiguration', weight: 15, }, + { + alias: 'stylesheets', + label: '#treeHeaders_stylesheets', + description: 'Pick the stylesheets whose editor styles should be available when editing!!!', + propertyEditorUiAlias: 'Umb.PropertyEditorUi.StylesheetPicker', + weight: 20, + }, { alias: 'dimensions', label: '#general_dimensions', description: '{#tiptap_config_dimensions_description}', propertyEditorUiAlias: 'Umb.PropertyEditorUI.TinyMCE.DimensionsConfiguration', - weight: 20, + weight: 30, }, { alias: 'maxImageSize',