diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/body-layout/body-layout.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/body-layout/body-layout.element.ts index 22be2b754a..d9d1ac6ca3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/body-layout/body-layout.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/body-layout/body-layout.element.ts @@ -75,6 +75,10 @@ export class UmbBodyLayoutElement extends LitElement { this.toggleAttribute('scrolling', this._scrollContainer.scrollTop > 0); }; + #setSlotVisibility(target: HTMLElement, hasChildren: boolean) { + target.style.display = hasChildren ? 'flex' : 'none'; + } + render() { return html`
{ this._headerSlotHasChildren = this.#hasNodes(e); + this.#setSlotVisibility(e.target as HTMLElement, this._headerSlotHasChildren); }}> { - this._actionsMenuSlotHasChildren = this.#hasNodes(e); + this._navigationSlotHasChildren = this.#hasNodes(e); + this.#setSlotVisibility(e.target as HTMLElement, this._navigationSlotHasChildren); }}> { this._actionsMenuSlotHasChildren = this.#hasNodes(e); + this.#setSlotVisibility(e.target as HTMLElement, this._actionsMenuSlotHasChildren); }}>
@@ -185,18 +192,16 @@ export class UmbBodyLayoutElement extends LitElement { } #header-slot, - #tabs-slot, #action-menu-slot, #navigation-slot { - display: flex; + display: none; height: 100%; align-items: center; box-sizing: border-box; min-width: 0; } - #navigation-slot, - #tabs-slot { + #navigation-slot { margin-left: auto; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/split-panel/split-panel.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/split-panel/split-panel.element.ts index 58d5fe151c..f7688b0081 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/split-panel/split-panel.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/split-panel/split-panel.element.ts @@ -250,6 +250,7 @@ export class UmbSplitPanelElement extends LitElement { slot { overflow: var(--umb-split-panel-slot-overflow); display: block; + min-height: 0; } #main { width: 100%; diff --git a/src/Umbraco.Web.UI.Client/src/packages/language/repository/detail/language-detail.server.data-source.ts b/src/Umbraco.Web.UI.Client/src/packages/language/repository/detail/language-detail.server.data-source.ts index 664a71aefe..6099653631 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/language/repository/detail/language-detail.server.data-source.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/language/repository/detail/language-detail.server.data-source.ts @@ -69,11 +69,11 @@ export class UmbLanguageServerDataSource implements UmbDetailDataSource = []; + const notAllowedFiles: Array = []; for (const file of files) { const extension = this.#getExtensionFromMime(file.type); if (!extension) { // Folders have no extension on file drop. We assume it is a folder being uploaded. - return; + continue; } const options = optionsArray.find((option) => option.fileExtension === extension)?.mediaTypes; - if (!options) return; // TODO Current dropped file not allowed in this area. Find a good way to show this to the user after we finish uploading the rest of the files. + if (!options || !options.length) { + // TODO Current dropped file not allowed in this area. Find a good way to show this to the user after we finish uploading the rest of the files. + notAllowedFiles.push(file); + continue; + } // Since we are uploading multiple files, we will pick first allowed option. // Consider a way we can handle this differently in the future to let the user choose. Maybe a list of all files with an allowed media type dropdown? @@ -105,6 +110,16 @@ export class UmbDropzoneManager extends UmbControllerBase { uploadableFiles.push({ unique: UmbId.new(), file, mediaTypeUnique: mediaType.unique }); } + notAllowedFiles.forEach((file) => { + try { + throw new Error(`File ${file.name} of type ${file.type} is not allowed here.`); + } catch (e) { + undefined; + } + }); + + if (!uploadableFiles.length) return; + await this.#handleUpload(uploadableFiles, parentUnique); } @@ -118,7 +133,9 @@ export class UmbDropzoneManager extends UmbControllerBase { } const optionsArray = await this.#buildOptionsArrayFrom([extension], parentUnique); - if (!optionsArray.length) throw new Error('File not allowed here.'); // Parent does not allow this file type here. + if (!optionsArray.length || !optionsArray[0].mediaTypes.length) { + throw new Error(`File ${file.name} of type ${file.type} is not allowed here.`); // Parent does not allow this file type here. + } const mediaTypes = optionsArray[0].mediaTypes; if (mediaTypes.length === 1) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/utils/index.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/utils/index.ts index 0b9b33446f..49550cabaa 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/utils/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/utils/index.ts @@ -122,357 +122,3 @@ export async function uploadBlobImages(editor: Editor, newContent?: string) { }); } } - -const types: { [key: string]: string[] } = { - 'application/andrew-inset': ['ez'], - 'application/appinstaller': ['appinstaller'], - 'application/applixware': ['aw'], - 'application/appx': ['appx'], - 'application/appxbundle': ['appxbundle'], - 'application/atom+xml': ['atom'], - 'application/atomcat+xml': ['atomcat'], - 'application/atomdeleted+xml': ['atomdeleted'], - 'application/atomsvc+xml': ['atomsvc'], - 'application/atsc-dwd+xml': ['dwd'], - 'application/atsc-held+xml': ['held'], - 'application/atsc-rsat+xml': ['rsat'], - 'application/automationml-aml+xml': ['aml'], - 'application/automationml-amlx+zip': ['amlx'], - 'application/bdoc': ['bdoc'], - 'application/calendar+xml': ['xcs'], - 'application/ccxml+xml': ['ccxml'], - 'application/cdfx+xml': ['cdfx'], - 'application/cdmi-capability': ['cdmia'], - 'application/cdmi-container': ['cdmic'], - 'application/cdmi-domain': ['cdmid'], - 'application/cdmi-object': ['cdmio'], - 'application/cdmi-queue': ['cdmiq'], - 'application/cpl+xml': ['cpl'], - 'application/cu-seeme': ['cu'], - 'application/cwl': ['cwl'], - 'application/dash+xml': ['mpd'], - 'application/dash-patch+xml': ['mpp'], - 'application/davmount+xml': ['davmount'], - 'application/docbook+xml': ['dbk'], - 'application/dssc+der': ['dssc'], - 'application/dssc+xml': ['xdssc'], - 'application/ecmascript': ['ecma'], - 'application/emma+xml': ['emma'], - 'application/emotionml+xml': ['emotionml'], - 'application/epub+zip': ['epub'], - 'application/exi': ['exi'], - 'application/express': ['exp'], - 'application/fdf': ['fdf'], - 'application/fdt+xml': ['fdt'], - 'application/font-tdpfr': ['pfr'], - 'application/geo+json': ['geojson'], - 'application/gml+xml': ['gml'], - 'application/gpx+xml': ['gpx'], - 'application/gxf': ['gxf'], - 'application/gzip': ['gz'], - 'application/hjson': ['hjson'], - 'application/hyperstudio': ['stk'], - 'application/inkml+xml': ['ink', 'inkml'], - 'application/ipfix': ['ipfix'], - 'application/its+xml': ['its'], - 'application/java-archive': ['jar', 'war', 'ear'], - 'application/java-serialized-object': ['ser'], - 'application/java-vm': ['class'], - 'application/javascript': ['*js'], - 'application/json': ['json', 'map'], - 'application/json5': ['json5'], - 'application/jsonml+json': ['jsonml'], - 'application/ld+json': ['jsonld'], - 'application/lgr+xml': ['lgr'], - 'application/lost+xml': ['lostxml'], - 'application/mac-binhex40': ['hqx'], - 'application/mac-compactpro': ['cpt'], - 'application/mads+xml': ['mads'], - 'application/manifest+json': ['webmanifest'], - 'application/marc': ['mrc'], - 'application/marcxml+xml': ['mrcx'], - 'application/mathematica': ['ma', 'nb', 'mb'], - 'application/mathml+xml': ['mathml'], - 'application/mbox': ['mbox'], - 'application/media-policy-dataset+xml': ['mpf'], - 'application/mediaservercontrol+xml': ['mscml'], - 'application/metalink+xml': ['metalink'], - 'application/metalink4+xml': ['meta4'], - 'application/mets+xml': ['mets'], - 'application/mmt-aei+xml': ['maei'], - 'application/mmt-usd+xml': ['musd'], - 'application/mods+xml': ['mods'], - 'application/mp21': ['m21', 'mp21'], - 'application/mp4': ['mp4', 'mpg4', 'mp4s', 'm4p'], - 'application/msix': ['msix'], - 'application/msixbundle': ['msixbundle'], - 'application/msword': ['doc', 'dot'], - 'application/mxf': ['mxf'], - 'application/n-quads': ['nq'], - 'application/n-triples': ['nt'], - 'application/node': ['cjs'], - 'application/octet-stream': [ - 'bin', - 'dms', - 'lrf', - 'mar', - 'so', - 'dist', - 'distz', - 'pkg', - 'bpk', - 'dump', - 'elc', - 'deploy', - 'exe', - 'dll', - 'deb', - 'dmg', - 'iso', - 'img', - 'msi', - 'msp', - 'msm', - 'buffer', - ], - 'application/oda': ['oda'], - 'application/oebps-package+xml': ['opf'], - 'application/ogg': ['ogx'], - 'application/omdoc+xml': ['omdoc'], - 'application/onenote': ['onetoc', 'onetoc2', 'onetmp', 'onepkg'], - 'application/oxps': ['oxps'], - 'application/p2p-overlay+xml': ['relo'], - 'application/patch-ops-error+xml': ['xer'], - 'application/pdf': ['pdf'], - 'application/pgp-encrypted': ['pgp'], - 'application/pgp-keys': ['asc'], - 'application/pgp-signature': ['sig', '*asc'], - 'application/pics-rules': ['prf'], - 'application/pkcs10': ['p10'], - 'application/pkcs7-mime': ['p7m', 'p7c'], - 'application/pkcs7-signature': ['p7s'], - 'application/pkcs8': ['p8'], - 'application/pkix-attr-cert': ['ac'], - 'application/pkix-cert': ['cer'], - 'application/pkix-crl': ['crl'], - 'application/pkix-pkipath': ['pkipath'], - 'application/pkixcmp': ['pki'], - 'application/pls+xml': ['pls'], - 'application/postscript': ['ai', 'eps', 'ps'], - 'application/provenance+xml': ['provx'], - 'application/pskc+xml': ['pskcxml'], - 'application/raml+yaml': ['raml'], - 'application/rdf+xml': ['rdf', 'owl'], - 'application/reginfo+xml': ['rif'], - 'application/relax-ng-compact-syntax': ['rnc'], - 'application/resource-lists+xml': ['rl'], - 'application/resource-lists-diff+xml': ['rld'], - 'application/rls-services+xml': ['rs'], - 'application/route-apd+xml': ['rapd'], - 'application/route-s-tsid+xml': ['sls'], - 'application/route-usd+xml': ['rusd'], - 'application/rpki-ghostbusters': ['gbr'], - 'application/rpki-manifest': ['mft'], - 'application/rpki-roa': ['roa'], - 'application/rsd+xml': ['rsd'], - 'application/rss+xml': ['rss'], - 'application/rtf': ['rtf'], - 'application/sbml+xml': ['sbml'], - 'application/scvp-cv-request': ['scq'], - 'application/scvp-cv-response': ['scs'], - 'application/scvp-vp-request': ['spq'], - 'application/scvp-vp-response': ['spp'], - 'application/sdp': ['sdp'], - 'application/senml+xml': ['senmlx'], - 'application/sensml+xml': ['sensmlx'], - 'application/set-payment-initiation': ['setpay'], - 'application/set-registration-initiation': ['setreg'], - 'application/shf+xml': ['shf'], - 'application/sieve': ['siv', 'sieve'], - 'application/smil+xml': ['smi', 'smil'], - 'application/sparql-query': ['rq'], - 'application/sparql-results+xml': ['srx'], - 'application/sql': ['sql'], - 'application/srgs': ['gram'], - 'application/srgs+xml': ['grxml'], - 'application/sru+xml': ['sru'], - 'application/ssdl+xml': ['ssdl'], - 'application/ssml+xml': ['ssml'], - 'application/swid+xml': ['swidtag'], - 'application/tei+xml': ['tei', 'teicorpus'], - 'application/thraud+xml': ['tfi'], - 'application/timestamped-data': ['tsd'], - 'application/toml': ['toml'], - 'application/trig': ['trig'], - 'application/ttml+xml': ['ttml'], - 'application/ubjson': ['ubj'], - 'application/urc-ressheet+xml': ['rsheet'], - 'application/urc-targetdesc+xml': ['td'], - 'application/voicexml+xml': ['vxml'], - 'application/wasm': ['wasm'], - 'application/watcherinfo+xml': ['wif'], - 'application/widget': ['wgt'], - 'application/winhlp': ['hlp'], - 'application/wsdl+xml': ['wsdl'], - 'application/wspolicy+xml': ['wspolicy'], - 'application/xaml+xml': ['xaml'], - 'application/xcap-att+xml': ['xav'], - 'application/xcap-caps+xml': ['xca'], - 'application/xcap-diff+xml': ['xdf'], - 'application/xcap-el+xml': ['xel'], - 'application/xcap-ns+xml': ['xns'], - 'application/xenc+xml': ['xenc'], - 'application/xfdf': ['xfdf'], - 'application/xhtml+xml': ['xhtml', 'xht'], - 'application/xliff+xml': ['xlf'], - 'application/xml': ['xml', 'xsl', 'xsd', 'rng'], - 'application/xml-dtd': ['dtd'], - 'application/xop+xml': ['xop'], - 'application/xproc+xml': ['xpl'], - 'application/xslt+xml': ['*xsl', 'xslt'], - 'application/xspf+xml': ['xspf'], - 'application/xv+xml': ['mxml', 'xhvml', 'xvml', 'xvm'], - 'application/yang': ['yang'], - 'application/yin+xml': ['yin'], - 'application/zip': ['zip'], - 'audio/3gpp': ['*3gpp'], - 'audio/aac': ['adts', 'aac'], - 'audio/adpcm': ['adp'], - 'audio/amr': ['amr'], - 'audio/basic': ['au', 'snd'], - 'audio/midi': ['mid', 'midi', 'kar', 'rmi'], - 'audio/mobile-xmf': ['mxmf'], - 'audio/mp3': ['*mp3'], - 'audio/mp4': ['m4a', 'mp4a'], - 'audio/mpeg': ['mpga', 'mp2', 'mp2a', 'mp3', 'm2a', 'm3a'], - 'audio/ogg': ['oga', 'ogg', 'spx', 'opus'], - 'audio/s3m': ['s3m'], - 'audio/silk': ['sil'], - 'audio/wav': ['wav'], - 'audio/wave': ['*wav'], - 'audio/webm': ['weba'], - 'audio/xm': ['xm'], - 'font/collection': ['ttc'], - 'font/otf': ['otf'], - 'font/ttf': ['ttf'], - 'font/woff': ['woff'], - 'font/woff2': ['woff2'], - 'image/aces': ['exr'], - 'image/apng': ['apng'], - 'image/avci': ['avci'], - 'image/avcs': ['avcs'], - 'image/avif': ['avif'], - 'image/bmp': ['bmp', 'dib'], - 'image/cgm': ['cgm'], - 'image/dicom-rle': ['drle'], - 'image/dpx': ['dpx'], - 'image/emf': ['emf'], - 'image/fits': ['fits'], - 'image/g3fax': ['g3'], - 'image/gif': ['gif'], - 'image/heic': ['heic'], - 'image/heic-sequence': ['heics'], - 'image/heif': ['heif'], - 'image/heif-sequence': ['heifs'], - 'image/hej2k': ['hej2'], - 'image/hsj2': ['hsj2'], - 'image/ief': ['ief'], - 'image/jls': ['jls'], - 'image/jp2': ['jp2', 'jpg2'], - 'image/jpeg': ['jpeg', 'jpg', 'jpe'], - 'image/jph': ['jph'], - 'image/jphc': ['jhc'], - 'image/jpm': ['jpm', 'jpgm'], - 'image/jpx': ['jpx', 'jpf'], - 'image/jxr': ['jxr'], - 'image/jxra': ['jxra'], - 'image/jxrs': ['jxrs'], - 'image/jxs': ['jxs'], - 'image/jxsc': ['jxsc'], - 'image/jxsi': ['jxsi'], - 'image/jxss': ['jxss'], - 'image/ktx': ['ktx'], - 'image/ktx2': ['ktx2'], - 'image/png': ['png'], - 'image/sgi': ['sgi'], - 'image/svg+xml': ['svg', 'svgz'], - 'image/t38': ['t38'], - 'image/tiff': ['tif', 'tiff'], - 'image/tiff-fx': ['tfx'], - 'image/webp': ['webp'], - 'image/wmf': ['wmf'], - 'message/disposition-notification': ['disposition-notification'], - 'message/global': ['u8msg'], - 'message/global-delivery-status': ['u8dsn'], - 'message/global-disposition-notification': ['u8mdn'], - 'message/global-headers': ['u8hdr'], - 'message/rfc822': ['eml', 'mime'], - 'model/3mf': ['3mf'], - 'model/gltf+json': ['gltf'], - 'model/gltf-binary': ['glb'], - 'model/iges': ['igs', 'iges'], - 'model/jt': ['jt'], - 'model/mesh': ['msh', 'mesh', 'silo'], - 'model/mtl': ['mtl'], - 'model/obj': ['obj'], - 'model/prc': ['prc'], - 'model/step+xml': ['stpx'], - 'model/step+zip': ['stpz'], - 'model/step-xml+zip': ['stpxz'], - 'model/stl': ['stl'], - 'model/u3d': ['u3d'], - 'model/vrml': ['wrl', 'vrml'], - 'model/x3d+binary': ['*x3db', 'x3dbz'], - 'model/x3d+fastinfoset': ['x3db'], - 'model/x3d+vrml': ['*x3dv', 'x3dvz'], - 'model/x3d+xml': ['x3d', 'x3dz'], - 'model/x3d-vrml': ['x3dv'], - 'text/cache-manifest': ['appcache', 'manifest'], - 'text/calendar': ['ics', 'ifb'], - 'text/coffeescript': ['coffee', 'litcoffee'], - 'text/css': ['css'], - 'text/csv': ['csv'], - 'text/html': ['html', 'htm', 'shtml'], - 'text/jade': ['jade'], - 'text/javascript': ['js', 'mjs'], - 'text/jsx': ['jsx'], - 'text/less': ['less'], - 'text/markdown': ['md', 'markdown'], - 'text/mathml': ['mml'], - 'text/mdx': ['mdx'], - 'text/n3': ['n3'], - 'text/plain': ['txt', 'text', 'conf', 'def', 'list', 'log', 'in', 'ini'], - 'text/richtext': ['rtx'], - 'text/rtf': ['*rtf'], - 'text/sgml': ['sgml', 'sgm'], - 'text/shex': ['shex'], - 'text/slim': ['slim', 'slm'], - 'text/spdx': ['spdx'], - 'text/stylus': ['stylus', 'styl'], - 'text/tab-separated-values': ['tsv'], - 'text/troff': ['t', 'tr', 'roff', 'man', 'me', 'ms'], - 'text/turtle': ['ttl'], - 'text/uri-list': ['uri', 'uris', 'urls'], - 'text/vcard': ['vcard'], - 'text/vtt': ['vtt'], - 'text/wgsl': ['wgsl'], - 'text/xml': ['*xml'], - 'text/yaml': ['yaml', 'yml'], - 'video/3gpp': ['3gp', '3gpp'], - 'video/3gpp2': ['3g2'], - 'video/h261': ['h261'], - 'video/h263': ['h263'], - 'video/h264': ['h264'], - 'video/iso.segment': ['m4s'], - 'video/jpeg': ['jpgv'], - 'video/jpm': ['*jpm', '*jpgm'], - 'video/mj2': ['mj2', 'mjp2'], - 'video/mp2t': ['ts'], - 'video/mp4': ['*mp4', 'mp4v', '*mpg4'], - 'video/mpeg': ['mpeg', 'mpg', 'mpe', 'm1v', 'm2v'], - 'video/ogg': ['ogv'], - 'video/quicktime': ['qt', 'mov'], - 'video/webm': ['webm'], -}; -Object.freeze(types); -export default types; diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.defaults.ts b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.defaults.ts index 76fe1fff55..1407018f59 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.defaults.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.defaults.ts @@ -35,7 +35,7 @@ export const defaultFallbackConfig: RawEditorOptions = { }, { title: 'Blocks', - items: [{ title: 'Normal', block: 'p' }], + items: [{ title: 'Paragraph', block: 'p' }], }, { title: 'Containers', diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.ts index 69c747373e..829fa4ff06 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.ts @@ -12,8 +12,12 @@ import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbStylesheetDetailRepository, UmbStylesheetRuleManager } from '@umbraco-cms/backoffice/stylesheet'; import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui'; -import type { EditorEvent, Editor, RawEditorOptions } from '@umbraco-cms/backoffice/external/tinymce'; -import type { ManifestTinyMcePlugin } from '@umbraco-cms/backoffice/extension-registry'; +import { + type EditorEvent, + type Editor, + type RawEditorOptions, + renderEditor, +} from '@umbraco-cms/backoffice/external/tinymce'; import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; /** @@ -52,8 +56,6 @@ export class UmbInputTinyMceElement extends UUIFormControlMixin(UmbLitElement, ' @state() private _tinyConfig: RawEditorOptions = {}; - // eslint-disable-next-line @typescript-eslint/consistent-type-imports - #renderEditor?: typeof import('@umbraco-cms/backoffice/external/tinymce').renderEditor; #plugins: Array UmbTinyMcePluginBase> = []; #editorRef?: Editor | null = null; #stylesheetRepository = new UmbStylesheetDetailRepository(this); @@ -76,25 +78,19 @@ export class UmbInputTinyMceElement extends UUIFormControlMixin(UmbLitElement, ' return super.value; } - @query('#editor', true) + @query('.editor', true) private _editorElement?: HTMLElement; protected async firstUpdated(): Promise { - // Here we want to start the loading of everything at first, not one at a time, which is why this code is not using await. - const loadEditor = import('@umbraco-cms/backoffice/external/tinymce').then((tinyMce) => { - this.#renderEditor = tinyMce.renderEditor; - }); - await Promise.all([loadEditor, ...(await this.#loadPlugins())]); + await Promise.all([...(await this.#loadPlugins())]); await this.#setTinyConfig(); } disconnectedCallback() { super.disconnectedCallback(); - if (this.#editorRef) { - // TODO: Test if there is any problems with destroying the RTE here, but not initializing on connectedCallback. (firstUpdated is only called first time the element is rendered, not when it is reconnected) - this.#editorRef.destroy(); - } + // TODO: Test if there is any problems with destroying the RTE here, but not initializing on connectedCallback. (firstUpdated is only called first time the element is rendered, not when it is reconnected) + this.#editorRef?.destroy(); } /** @@ -105,7 +101,7 @@ export class UmbInputTinyMceElement extends UUIFormControlMixin(UmbLitElement, ' */ async #loadPlugins() { const observable = umbExtensionsRegistry?.byType('tinyMcePlugin'); - const manifests = (await firstValueFrom(observable)) as ManifestTinyMcePlugin[]; + const manifests = await firstValueFrom(observable); const promises = []; for (const manifest of manifests) { @@ -196,10 +192,10 @@ export class UmbInputTinyMceElement extends UUIFormControlMixin(UmbLitElement, ' // create an object by merging the configuration onto the fallback config const configurationOptions: RawEditorOptions = { ...defaultFallbackConfig, - height: dimensions?.height || undefined, - width: dimensions?.width || undefined, - content_css: stylesheets, - style_formats: styleFormats, + height: dimensions?.height ?? defaultFallbackConfig.height, + width: dimensions?.width ?? defaultFallbackConfig.width, + content_css: stylesheets.length ? stylesheets : defaultFallbackConfig.content_css, + style_formats: styleFormats.length ? styleFormats : defaultFallbackConfig.style_formats, }; // no auto resize when a fixed height is set @@ -255,10 +251,10 @@ export class UmbInputTinyMceElement extends UUIFormControlMixin(UmbLitElement, ' this.#editorRef.destroy(); } - if (!this.#renderEditor) { - throw new Error('TinyMCE renderEditor is not loaded'); - } - const editors = await this.#renderEditor(this._tinyConfig); + const editors = await renderEditor(this._tinyConfig).catch((error) => { + console.error('Failed to render TinyMCE', error); + return []; + }); this.#editorRef = editors.pop(); } @@ -321,7 +317,7 @@ export class UmbInputTinyMceElement extends UUIFormControlMixin(UmbLitElement, ' this.#onChange(editor.getContent()); }); - editor.on('SetContent', (e) => { + editor.on('SetContent', () => { /** * Prevent injecting arbitrary JavaScript execution in on-attributes. * @@ -355,17 +351,14 @@ export class UmbInputTinyMceElement extends UUIFormControlMixin(UmbLitElement, ' * a target div and binds the RTE to that element */ render() { - return html`
`; + return html`
`; } static styles = [ css` - #editor { + .tox-tinymce { position: relative; min-height: 100px; - } - - .tox-tinymce { border-radius: 0; border: var(--uui-input-border-width, 1px) solid var(--uui-input-border-color, var(--uui-color-border, #d8d7d9)); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/views/grid/user-grid-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/views/grid/user-grid-collection-view.element.ts index 6e51254508..9c17e7d784 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/views/grid/user-grid-collection-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/views/grid/user-grid-collection-view.element.ts @@ -81,16 +81,16 @@ export class UmbUserGridCollectionViewElement extends UmbLitElement { const avatarUrls = [ { scale: '1x', - url: user.avatarUrls?.[0], - }, - { - scale: '2x', url: user.avatarUrls?.[1], }, { - scale: '3x', + scale: '2x', url: user.avatarUrls?.[2], }, + { + scale: '3x', + url: user.avatarUrls?.[3], + }, ]; let avatarSrcset = ''; @@ -111,6 +111,7 @@ export class UmbUserGridCollectionViewElement extends UmbLitElement { ${this.#renderUserTag(user)} ${this.#renderUserGroupNames(user)} ${this.#renderUserLoginDate(user)} 0 ? avatarUrls[0].url : undefined)}