diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/ar.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/ar.ts index 8211f08edca5..79ebd41641ce 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/ar.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/ar.ts @@ -408,7 +408,6 @@ export default { newPartialViewMacroFromSnippet: 'ماكرو عرض جزئي جديد من مقطع', newPartialViewMacroNoMacro: 'ماكرو عرض جزئي جديد (بدون ماكرو)', newStyleSheetFile: 'ملف ورقة أنماط جديد', - newRteStyleSheetFile: 'ملف ورقة أنماط محرر النصوص الغني الجديد', }, dashboard: { browser: 'تصفح موقعك', diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/bs.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/bs.ts index f34276cc6a56..e98ad51e086b 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/bs.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/bs.ts @@ -406,7 +406,6 @@ export default { newPartialViewMacroFromSnippet: 'Novi djelomični prikaz za makro iz isječka', newPartialViewMacroNoMacro: 'Novi djelomični prikaz za makro (bez makroa)', newStyleSheetFile: 'Novi CSS fajl', - newRteStyleSheetFile: 'Novi Rich Text Editor CSS fajl', }, dashboard: { browser: 'Pregledajte svoju web stranicu', diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/cs-cz.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/cs-cz.ts index 1ddb0b095ad9..63712f2dbca1 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/cs-cz.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/cs-cz.ts @@ -358,7 +358,6 @@ export default { newPartialViewMacroFromSnippet: 'Nové makro částečné šablony ze snippetu', newPartialViewMacroNoMacro: 'Nové makro pro částečnou šablonu (bez makra)', newStyleSheetFile: 'Nový soubor stylů - stylopis', - newRteStyleSheetFile: 'Nový soubor stylů Rich Text editoru', }, dashboard: { browser: 'Prohlédnout svůj web', diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/cy-gb.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/cy-gb.ts index abd36148a6d7..479a00f04426 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/cy-gb.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/cy-gb.ts @@ -427,7 +427,6 @@ export default { newPartialViewMacroFromSnippet: 'Macro rhan-wedd wag newydd o damaid', newPartialViewMacroNoMacro: 'Macro rhan-wedd newydd (heb macro)', newStyleSheetFile: 'Ffeil ddalen arddull newydd', - newRteStyleSheetFile: 'Ffeil ddalen arddull Golygydd Testun Cyfoethog newydd', }, dashboard: { browser: 'Pori eich gwefan', diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts index 54a66d0b6e58..c32de501e65b 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts @@ -428,7 +428,6 @@ export default { newPartialViewMacroFromSnippet: 'Ny partial view makro fra snippet', newPartialViewMacroNoMacro: 'Ny partial view makro (uden makro)', newStyleSheetFile: 'Ny stylesheet-fil', - newRteStyleSheetFile: 'Ny Rich Text Editor stylesheet-fil', }, dashboard: { browser: 'Til dit website', diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/de-de.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/de-de.ts index bf2626e9e299..b33b1c09a667 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/de-de.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/de-de.ts @@ -427,7 +427,6 @@ export default { newPartialViewMacroFromSnippet: 'Neues Partial-View-Makro nach Vorlage', newPartialViewMacroNoMacro: 'Neues Partial-View-Makro (ohne Makro)', newStyleSheetFile: 'Neue Style-Sheet-Datei', - newRteStyleSheetFile: 'Neue Rich-Text-Editor Style-Sheet-Datei', }, dashboard: { browser: 'Website anzeigen', diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts index 71cf1d0fafb3..28dc8328abe3 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts @@ -449,7 +449,6 @@ export default { "Defines a re-usable set of properties that can be included in the definition of\n multiple other Document Types. For example, a set of 'Common Page Settings'.\n ", folder: 'Folder', folderDescription: 'Used to organize items and other folders. Keep items structured and easy to access.', - newFolder: 'Folder', newDataType: 'Data Type', newJavascriptFile: 'New JavaScript file', newEmptyPartialView: 'New empty partial view', @@ -457,8 +456,6 @@ export default { newPartialViewFromSnippet: 'New partial view from snippet', newPartialViewMacroFromSnippet: 'New partial view macro from snippet', newPartialViewMacroNoMacro: 'New partial view macro (without macro)', - newStyleSheetFile: 'New style sheet file', - newRteStyleSheetFile: 'New Rich Text Editor style sheet file', }, dashboard: { browser: 'Browse your website', diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts index e73299038096..5f12431c2b11 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts @@ -447,8 +447,7 @@ export default { newPartialViewFromSnippet: 'New partial view from snippet', newPartialViewMacroFromSnippet: 'New partial view macro from snippet', newPartialViewMacroNoMacro: 'New partial view macro (without macro)', - newStyleSheetFile: 'New style sheet file', - newRteStyleSheetFile: 'New Rich Text Editor style sheet file', + newStyleSheetFile: 'New Stylesheet', }, dashboard: { browser: 'Browse your website', diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/fr-fr.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/fr-fr.ts index 43f327b56c62..f612acf93f5a 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/fr-fr.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/fr-fr.ts @@ -368,7 +368,6 @@ export default { newPartialViewMacroFromSnippet: "Nouvelle macro pour vue partielle à partir d'un snippet", newPartialViewMacroNoMacro: 'Nouvelle macro pour vue partielle (sans macro)', newStyleSheetFile: 'Nouveau fichier de feuille de style', - newRteStyleSheetFile: "Nouveau fichier de feuille de style pour l'éditeur de texte", }, dashboard: { browser: 'Parcourir votre site', diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/hr-hr.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/hr-hr.ts index 2a4226d8fa77..ea4c60b53921 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/hr-hr.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/hr-hr.ts @@ -407,7 +407,6 @@ export default { newPartialViewMacroFromSnippet: 'Novi djelomični prikaz za makro iz isječka', newPartialViewMacroNoMacro: 'Novi djelomični prikaz za makro (bez makroa)', newStyleSheetFile: 'Nova CSS datoteka', - newRteStyleSheetFile: 'Nova Rich Text Editor CSS datoteka', }, dashboard: { browser: 'Pregledajte svoju web stranicu', diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/it-it.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/it-it.ts index 3efc7b1a93c1..c9d9c34d036e 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/it-it.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/it-it.ts @@ -421,7 +421,6 @@ export default { newPartialViewMacroFromSnippet: 'Nuova partial view macro da snippet', newPartialViewMacroNoMacro: 'Nuova partial view macro (senza macro)', newStyleSheetFile: 'Nuovo foglio di stile', - newRteStyleSheetFile: 'Nuovo foglio di stile per Rich Text Editor', }, dashboard: { browser: 'Naviga il tuo sito web', diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/nl-nl.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/nl-nl.ts index 3d5c4e5a0b48..bc0cc2aeeec5 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/nl-nl.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/nl-nl.ts @@ -378,7 +378,6 @@ export default { newPartialViewMacroFromSnippet: 'Nieuwe partial view macro van fragment', newPartialViewMacroNoMacro: 'Nieuwe partial view macro (zonder macro)', newStyleSheetFile: 'Nieuw style sheet bestand', - newRteStyleSheetFile: 'Nieuw Rich Text Editor style sheet bestand', }, dashboard: { browser: 'Open je website', diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/tr-tr.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/tr-tr.ts index 656fccdb2e95..11aadf8807a2 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/tr-tr.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/tr-tr.ts @@ -362,7 +362,6 @@ export default { newPartialViewMacroFromSnippet: "Snippet'ten yeni kısmi görünüm makrosu", newPartialViewMacroNoMacro: 'Yeni kısmi görünüm makrosu (makrosuz)', newStyleSheetFile: 'Yeni stil sayfası dosyası', - newRteStyleSheetFile: 'Yeni Zengin Metin Düzenleyicisi stil sayfası dosyası', }, dashboard: { browser: 'Web sitenize göz atın', 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 8494e13e0f68..e2ce26ce2969 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 @@ -23,19 +23,16 @@ export const data: Array = [ font-size: 1.5rem; } -/**umb_name:Page header*/ h2 { color: red; font-size: 2rem; } -/**umb_name:Section header*/ h3 { color: blue; font-size: 1.75rem; } -/**umb_name:Paragraph header*/ h4 { color: green; font-size: 1.5rem; @@ -54,17 +51,14 @@ body { font-family: cursive; } -/**umb_name:Red*/ span { color: red; } -/**umb_name:Blue*/ span { color: blue; } -/**umb_name:Green*/ span { color: green; }`, diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/entity-actions/create/options-modal/stylesheet-create-options-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/entity-actions/create/options-modal/stylesheet-create-options-modal.element.ts index ac9328a382bd..88f1f8392b58 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/entity-actions/create/options-modal/stylesheet-create-options-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/entity-actions/create/options-modal/stylesheet-create-options-modal.element.ts @@ -53,23 +53,23 @@ export class UmbStylesheetCreateOptionsModalElement extends UmbModalBaseElement< - - } - - - } + - - } + + - + `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/constants.ts index 8d9f67ecde9a..b910f8129a8c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/constants.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/constants.ts @@ -1,2 +1 @@ export * from './stylesheet-input/constants.js'; -export * from './stylesheet-rule-input/constants.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/index.ts index 0a11310eaa31..dcbea32c1dc0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/index.ts @@ -1,7 +1,3 @@ import './stylesheet-input/stylesheet-input.element.js'; -import './stylesheet-rule-input/stylesheet-rule-input.element.js'; -import './stylesheet-rule-ref/stylesheet-rule-ref.element.js'; export * from './stylesheet-input/index.js'; -export * from './stylesheet-rule-input/stylesheet-rule-input.element.js'; -export * from './stylesheet-rule-ref/stylesheet-rule-ref.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/manifests.ts deleted file mode 100644 index 3655f35534c1..000000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/manifests.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { manifests as stylesheetRuleInputManifests } from './stylesheet-rule-input/manifests.js'; - -export const manifests: Array = [...stylesheetRuleInputManifests]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/stylesheet-rule-input/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/stylesheet-rule-input/constants.ts deleted file mode 100644 index 56392ebf773d..000000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/stylesheet-rule-input/constants.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { UMB_STYLESHEET_RULE_SETTINGS_MODAL_ALIAS } from './manifests.js'; -export { UMB_STYLESHEET_RULE_SETTINGS_MODAL } from './stylesheet-rule-settings-modal.token.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/stylesheet-rule-input/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/stylesheet-rule-input/manifests.ts deleted file mode 100644 index b5d9a7363df5..000000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/stylesheet-rule-input/manifests.ts +++ /dev/null @@ -1,10 +0,0 @@ -export const UMB_STYLESHEET_RULE_SETTINGS_MODAL_ALIAS = 'Umb.Modal.StylesheetRuleSettings'; - -export const manifests: Array = [ - { - type: 'modal', - alias: UMB_STYLESHEET_RULE_SETTINGS_MODAL_ALIAS, - name: 'Stylesheet Rule Settings Modal', - element: () => import('./stylesheet-rule-settings-modal.element.js'), - }, -]; 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 deleted file mode 100644 index 1741e9f661df..000000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/stylesheet-rule-input/stylesheet-rule-input.element.ts +++ /dev/null @@ -1,113 +0,0 @@ -import type { UmbStylesheetRule } from '../../types.js'; -import { UMB_STYLESHEET_RULE_SETTINGS_MODAL } from './stylesheet-rule-settings-modal.token.js'; -import { css, html, customElement, repeat, property } from '@umbraco-cms/backoffice/external/lit'; -import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import { UmbSorterController } from '@umbraco-cms/backoffice/sorter'; -import { umbOpenModal } from '@umbraco-cms/backoffice/modal'; -import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui'; - -@customElement('umb-stylesheet-rule-input') -export class UmbStylesheetRuleInputElement extends UUIFormControlMixin(UmbLitElement, '') { - #sorter = new UmbSorterController(this, { - getUniqueOfElement: (element) => element.id, - getUniqueOfModel: (modelEntry) => modelEntry.name, - identifier: 'Umb.SorterIdentifier.InputStylesheetRule', - itemSelector: 'umb-stylesheet-rule-ref', - containerSelector: 'uui-ref-list', - onChange: ({ model }) => { - this.rules = model; - this.dispatchEvent(new UmbChangeEvent()); - }, - }); - - @property({ type: Array, attribute: false }) - rules: UmbStylesheetRule[] = []; - - protected override getFormElement() { - return undefined; - } - - async #openRuleSettings(rule: UmbStylesheetRule | null = null) { - return await umbOpenModal(this, UMB_STYLESHEET_RULE_SETTINGS_MODAL, { - value: { - rule: rule ? { name: rule.name, selector: rule.selector, styles: rule.styles } : null, - }, - }); - } - - #appendRule = () => { - this.#openRuleSettings(null) - .then((value) => { - if (!value.rule) return; - this.rules = [...this.rules, value.rule]; - this.dispatchEvent(new UmbChangeEvent()); - }) - .catch(() => undefined); - }; - - #editRule = (rule: UmbStylesheetRule, index: number) => { - this.#openRuleSettings(rule) - .then((value) => { - if (!value.rule) return; - this.rules[index] = value.rule; - this.dispatchEvent(new UmbChangeEvent()); - this.requestUpdate(); - }) - .catch(() => undefined); - }; - - #removeRule = (rule: UmbStylesheetRule) => { - this.rules = this.rules.filter((r) => r.name !== rule.name); - this.dispatchEvent(new UmbChangeEvent()); - }; - - override firstUpdated() { - this.#sorter.setModel(this.rules); - } - - override render() { - return html` - - ${repeat( - this.rules, - (rule, index) => rule.name + index, - (rule, index) => html` - this.#editRule(rule, index)}> - - this.#removeRule(rule)}> - - - `, - )} - - - `; - } - - static override styles = [ - css` - :host { - display: block; - } - - uui-button { - display: block; - } - `, - ]; -} - -export default UmbStylesheetRuleInputElement; - -declare global { - interface HTMLElementTagNameMap { - 'umb-stylesheet-rule-input': UmbStylesheetRuleInputElement; - } -} 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 deleted file mode 100644 index 343d94599fb8..000000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/stylesheet-rule-input/stylesheet-rule-settings-modal.element.ts +++ /dev/null @@ -1,159 +0,0 @@ -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { css, html, customElement, ifDefined } from '@umbraco-cms/backoffice/external/lit'; -import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; - -@customElement('umb-stylesheet-rule-settings-modal') -export default class UmbStylesheetRuleSettingsModalElement extends UmbModalBaseElement { - #updateName(event: Event) { - const name = (event.target as HTMLInputElement).value; - - this.updateValue({ - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - rule: { - ...this.value.rule, - name, - }, - }); - } - - #updateSelector(event: Event) { - const selector = (event.target as HTMLInputElement).value; - - this.updateValue({ - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - rule: { - ...this.value.rule, - selector, - }, - }); - } - - #updateStyles(event: Event) { - const styles = (event.target as HTMLInputElement).value; - - this.updateValue({ - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - rule: { - ...this.value.rule, - styles, - }, - }); - } - - override render() { - return html` - -
- - -
- - Name - The name displayed in the editor style selector - - - - - Selector - Uses CSS syntax, e.g. "h1" or ".redHeader" - - - - - Styles - The CSS that should be applied in the rich text editor, e.g. "color:red;" - - - - - Preview - How the text will look like in the rich text editor. -
- a b c d e f g h i j k l m n o p q r s t u v w x t z -
- A B C D E F G H I J K L M N O P Q R S T U V W X Y Z -
- 1 2 3 4 5 6 7 8 9 0 € £ $ % & (.,;:'"!?) -
- Amazingly few discotheques provide jukeboxes. -
- -
- - -
-
- Close - Submit -
- - `; - } - - static override styles = [ - UmbTextStyles, - css` - :host { - display: block; - color: var(--uui-color-text); - --umb-header-layout-height: 70px; - } - - #main { - box-sizing: border-box; - height: calc( - 100dvh - var(--umb-header-layout-height) - var(--umb-footer-layout-height) - 2 * var(--uui-size-layout-1) - ); - } - - #main uui-button:not(:last-of-type) { - display: block; - margin-bottom: var(--uui-size-space-5); - } - - uui-input { - width: 100%; - } - - #styles { - font-family: - Monaco, - Menlo, - Consolas, - Courier New, - monospace; - --uui-textarea-min-height: 100px; - resize: none; - width: 300px; - } - `, - ]; -} - -declare global { - interface HTMLElementTagNameMap { - 'umb-stylesheet-rule-settings-modal': UmbStylesheetRuleSettingsModalElement; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/stylesheet-rule-input/stylesheet-rule-settings-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/stylesheet-rule-input/stylesheet-rule-settings-modal.token.ts deleted file mode 100644 index cb3501c6a282..000000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/stylesheet-rule-input/stylesheet-rule-settings-modal.token.ts +++ /dev/null @@ -1,18 +0,0 @@ -import type { UmbStylesheetRule } from '../../types.js'; -import { UMB_STYLESHEET_RULE_SETTINGS_MODAL_ALIAS } from './manifests.js'; -import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; - -export interface UmbStylesheetRuleSettingsModalValue { - rule: UmbStylesheetRule | null; -} - -export const UMB_STYLESHEET_RULE_SETTINGS_MODAL = new UmbModalToken( - UMB_STYLESHEET_RULE_SETTINGS_MODAL_ALIAS, - { - modal: { - type: 'sidebar', - size: 'medium', - }, - value: { rule: null }, - }, -); diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/stylesheet-rule-ref/stylesheet-rule-ref.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/stylesheet-rule-ref/stylesheet-rule-ref.element.ts deleted file mode 100644 index badb9382b6c1..000000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/global-components/stylesheet-rule-ref/stylesheet-rule-ref.element.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { UUIRefNodeElement } from '@umbraco-cms/backoffice/external/uui'; -import { customElement } from '@umbraco-cms/backoffice/external/lit'; - -/** - * @element umb-stylesheet-rule-ref - * @description - Component for displaying a reference to a stylesheet rule - * @augments UUIRefNodeElement - */ -@customElement('umb-stylesheet-rule-ref') -export class UmbStylesheetRuleRefElement extends UUIRefNodeElement { - protected override fallbackIcon = - ''; - - static override styles = [...UUIRefNodeElement.styles]; -} - -declare global { - interface HTMLElementTagNameMap { - 'umb-stylesheet-rule-ref': UmbStylesheetRuleRefElement; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/index.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/index.ts index c874f24adfbc..d528c37bbd78 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/index.ts @@ -4,7 +4,6 @@ export * from './constants.js'; export * from './entity.js'; export * from './global-components/index.js'; export * from './repository/index.js'; -export * from './utils/index.js'; export type * from './types.js'; export { UmbStylesheetTreeRepository } from './tree/index.js'; 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 69d917f09e18..760e299684f7 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 @@ -3,7 +3,6 @@ import { manifests as menuManifests } from './menu/manifests.js'; 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 = [ @@ -12,6 +11,5 @@ export const manifests: Array = [ ...treeManifests, ...workspaceManifests, ...entityActionManifests, - ...componentManifests, ...propertyEditorsManifests, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/types.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/types.ts index 5222bc8faeab..b7a1e9a95fc9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/types.ts @@ -13,9 +13,3 @@ export interface UmbStylesheetItemModel { name: string; isFolder: boolean; } - -export interface UmbStylesheetRule { - name: string; - selector: string; - styles: string; -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/utils/index.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/utils/index.ts deleted file mode 100644 index eafc8c469dc5..000000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/utils/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { UmbStylesheetRuleManager } from './stylesheet-rule-manager.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/utils/stylesheet-rule-manager.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/utils/stylesheet-rule-manager.ts deleted file mode 100644 index 31376e29d370..000000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/utils/stylesheet-rule-manager.ts +++ /dev/null @@ -1,53 +0,0 @@ -import type { UmbStylesheetRule } from '../types.js'; - -export class UmbStylesheetRuleManager { - #umbRuleRegex = /\/\*\*\s*umb_name:\s*(?[^*\r\n]*?)\s*\*\/\s*(?[^,{]*?)\s*{\s*(?.*?)\s*}/gis; - - /** - * Extracts umbraco rules from a stylesheet content - * @param {string} stylesheetContent - * @returns {*} - * @memberof UmbStylesheetRuleManager - */ - extractRules(stylesheetContent: string): Array { - const regex = this.#umbRuleRegex; - if (!stylesheetContent) throw Error('No Stylesheet content'); - return [...stylesheetContent.matchAll(regex)].map((match) => { - const rule: UmbStylesheetRule = { - name: match.groups?.name || '', - selector: match.groups?.selector || '', - styles: match.groups?.styles || '', - }; - return rule; - }); - } - - /** - * Inserts umbraco rules into stylesheet content - * @param {string} stylesheetContent - * @param {UmbStylesheetRule[]} rules - * @returns {*} - * @memberof UmbStylesheetRuleManager - */ - insertRules(stylesheetContent: string, rules: Array): string { - const regex = this.#umbRuleRegex; - if (!stylesheetContent && !rules) return ''; - - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - //@ts-ignore - const cleanedContent = stylesheetContent?.replaceAll(regex, ''); - const newContent = ` - ${cleanedContent.replace(/[\r\n]+$/, '')} - ${rules - ?.map( - (rule) => ` -/**umb_name:${rule.name}*/ -${rule.selector} { - ${rule.styles ?? ''} -} -`, - ) - .join('')}`; - return newContent.trim(); - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/manifests.ts index ee593b786d3a..a564e8187953 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/manifests.ts @@ -31,24 +31,6 @@ export const manifests: Array = [ }, ], }, - { - type: 'workspaceView', - alias: 'Umb.WorkspaceView.Stylesheet.RichTextEditor', - name: 'Stylesheet Workspace Rich Text Editor View', - element: () => import('./views/rich-text-rule/stylesheet-rich-text-rule-workspace-view.element.js'), - weight: 800, - meta: { - label: '#stylesheet_tabRules', - pathname: 'rich-text-editor', - icon: 'icon-font', - }, - conditions: [ - { - alias: UMB_WORKSPACE_CONDITION_ALIAS, - match: UMB_STYLESHEET_WORKSPACE_ALIAS, - }, - ], - }, { type: 'workspaceAction', kind: 'default', diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/code-editor/stylesheet-code-editor-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/code-editor/stylesheet-code-editor-workspace-view.element.ts index b5b4eeecf6bf..794662898c6c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/code-editor/stylesheet-code-editor-workspace-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/code-editor/stylesheet-code-editor-workspace-view.element.ts @@ -62,11 +62,11 @@ export class UmbStylesheetCodeEditorWorkspaceViewElement extends UmbLitElement { } umb-code-editor { - --editor-height: calc(100dvh - 300px); + --editor-height: calc(100dvh - 260px); } uui-box { - min-height: calc(100dvh - 360px); + min-height: calc(100dvh - 260px); margin: var(--uui-size-layout-1); --uui-box-default-padding: 0; /* remove header border bottom as code editor looks better in this box */ diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-rule/stylesheet-rich-text-rule-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-rule/stylesheet-rich-text-rule-workspace-view.element.ts deleted file mode 100644 index 3c821705f85f..000000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-rule/stylesheet-rich-text-rule-workspace-view.element.ts +++ /dev/null @@ -1,89 +0,0 @@ -import type { UmbStylesheetRule } from '../../../types.js'; -import type { UmbStylesheetRuleInputElement } from '../../../global-components/index.js'; -import { UmbStylesheetRuleManager } from '../../../utils/index.js'; -import { UMB_STYLESHEET_WORKSPACE_CONTEXT } from '../../stylesheet-workspace.context-token.js'; -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; -import type { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; - -@customElement('umb-stylesheet-rich-text-rule-workspace-view') -export class UmbStylesheetRichTextRuleWorkspaceViewElement extends UmbLitElement { - @state() - _rules: UmbStylesheetRule[] = []; - - #context?: typeof UMB_STYLESHEET_WORKSPACE_CONTEXT.TYPE; - #stylesheetRuleManager = new UmbStylesheetRuleManager(); - #stylesheetContent = ''; - - constructor() { - super(); - - this.consumeContext(UMB_STYLESHEET_WORKSPACE_CONTEXT, (context) => { - this.#context = context; - this.#observeContent(); - }); - } - - #observeContent() { - if (!this.#context?.content) return; - this.observe( - this.#context.content, - (content) => { - this.#stylesheetContent = content || ''; - this.#extractRules(content); - }, - 'umbStylesheetContentObserver', - ); - } - - #extractRules(content: string | undefined) { - if (content) { - const rules = this.#stylesheetRuleManager.extractRules(content); - this._rules = [...rules]; - } else { - this._rules = []; - } - } - - #onRuleChange(event: UmbChangeEvent) { - event.stopPropagation(); - const target = event.target as UmbStylesheetRuleInputElement; - const rules = target.rules; - const newContent = this.#stylesheetRuleManager.insertRules(this.#stylesheetContent, rules); - this.#context?.setContent(newContent); - } - - override render() { - return html` - -
- -
- - `; - } - - static override styles = [ - UmbTextStyles, - css` - :host { - display: block; - width: 100%; - } - - uui-box { - margin: var(--uui-size-layout-1); - } - `, - ]; -} - -export default UmbStylesheetRichTextRuleWorkspaceViewElement; - -declare global { - interface HTMLElementTagNameMap { - 'umb-stylesheet-rich-text-rule-workspace-view': UmbStylesheetRichTextRuleWorkspaceViewElement; - } -}