yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Element class tidy-up

Browse Source
This commit is contained in:
leekelleher
2024-09-19 08:40:58 +01:00
committed by Jacob Overgaard
parent 2489d29f18
commit 02a3cf8e8d
3 changed files with 56 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/input-tiptap.element.ts
View File

@@ -20,7 +20,9 @@ import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/
import './tiptap-fixed-menu.element.js';
import './tiptap-hover-menu.element.js';
@customElement('umb-input-tiptap')
const elementName = 'umb-input-tiptap';
@customElement(elementName)
export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof UmbLitElement, string>(UmbLitElement) {
#requiredExtensions = [Document, Dropcursor, Gapcursor, HardBreak, History, Paragraph, Text];
@@ -102,6 +104,14 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
}
}
.tiptap {
height: 100%;
width: 100%;
outline: none;
white-space: pre-wrap;
min-width: 0;
}
#editor {
border-radius: var(--uui-border-radius);
border: 1px solid var(--uui-color-border);
@@ -116,50 +126,42 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
overflow: clip;
min-height: 400px;
display: grid; /* Don't ask me why this is needed, but it is. */
}
#editor 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;
}
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;
}
#editor 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: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);
}
#editor code {
font-family: 'Roboto Mono', monospace;
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
.tiptap {
height: 100%;
width: 100%;
outline: none;
white-space: pre-wrap;
min-width: 0;
}
#editor p,
#editor h1,
#editor h2,
#editor h3 {
margin-top: 0;
margin-bottom: 0.5em;
code {
font-family: 'Roboto Mono', monospace;
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
h1,
h2,
h3,
p {
margin-top: 0;
margin-bottom: 0.5em;
}
}
`,
];
}
export default UmbInputTiptapElement;
declare global {
interface HTMLElementTagNameMap {
'umb-input-tiptap': UmbInputTiptapElement;
[elementName]: UmbInputTiptapElement;
}
}

39
src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/tiptap-fixed-menu.element.ts
View File

@@ -4,7 +4,9 @@ import { css, customElement, html, property } from '@umbraco-cms/backoffice/exte
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
@customElement('umb-tiptap-fixed-menu')
const elementName = 'umb-tiptap-fixed-menu';
@customElement(elementName)
export class UmbTiptapFixedMenuElement extends UmbLitElement {
@property({ type: Boolean, reflect: true })
readonly = false;
@@ -49,6 +51,8 @@ export class UmbTiptapFixedMenuElement extends UmbLitElement {
:host {
border-radius: var(--uui-border-radius);
border: 1px solid var(--uui-color-border);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
background-color: var(--uui-color-surface);
color: var(--color-text);
display: grid;
@@ -64,42 +68,11 @@ export class UmbTiptapFixedMenuElement extends UmbLitElement {
pointer-events: none;
background-color: var(--uui-color-surface-alt);
}
button {
color: var(--uui-color-interactive);
width: 24px;
height: 24px;
padding: 4px;
border: none;
background: none;
cursor: pointer;
margin: 0;
border-radius: 4px;
box-sizing: border-box;
}
button:hover {
color: var(--uui-color-interactive-emphasis);
background-color: var(--uui-color-surface-alt);
}
button.active {
background-color: var(--uui-color-selected);
color: var(--uui-color-selected-contrast);
}
button.active:hover {
background-color: var(--uui-color-selected-emphasis);
}
button img {
width: 100%;
height: 100%;
}
`;
}
declare global {
interface HTMLElementTagNameMap {
'umb-tiptap-fixed-menu': UmbTiptapFixedMenuElement;
[elementName]: UmbTiptapFixedMenuElement;
}
}

27
src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/property-editors/tiptap/property-editor-ui-tiptap.element.ts
View File

@@ -1,18 +1,13 @@
import type UmbInputTiptapElement from '../../components/input-tiptap/input-tiptap.element.js';
import type { UmbInputTiptapElement } from '../../components/input-tiptap/input-tiptap.element.js';
import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbBlockRteEntriesContext, UmbBlockRteManagerContext } from '@umbraco-cms/backoffice/block-rte';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import {
UmbPropertyValueChangeEvent,
type UmbPropertyEditorConfigCollection,
} from '@umbraco-cms/backoffice/property-editor';
import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
import type { UmbBlockRteLayoutModel } from '@umbraco-cms/backoffice/block-rte';
import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
import '../../components/input-tiptap/input-tiptap.element.js';
import {
UmbBlockRteEntriesContext,
UmbBlockRteManagerContext,
type UmbBlockRteLayoutModel,
} from '@umbraco-cms/backoffice/block-rte';
import type { UmbBlockValueType } from '@umbraco-cms/backoffice/block';
// Look at Tiny for correct types
@@ -23,11 +18,13 @@ export interface UmbRichTextEditorValueType {
const UMB_BLOCK_RTE_BLOCK_LAYOUT_ALIAS = 'Umbraco.RichText';
const elementName = 'umb-property-editor-ui-tiptap';
/**
* @element umb-property-editor-ui-tiptap
*/
@customElement('umb-property-editor-ui-tiptap')
export class UmbPropertyEditorUITiptapElement extends UmbLitElement implements UmbPropertyEditorUiElement {
@customElement(elementName)
export class UmbPropertyEditorUiTiptapElement extends UmbLitElement implements UmbPropertyEditorUiElement {
//
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
this._config = config;
@@ -110,7 +107,7 @@ export class UmbPropertyEditorUITiptapElement extends UmbLitElement implements U
}
#onChange(event: CustomEvent & { target: UmbInputTiptapElement }) {
const value = event.target.value as string;
const value = event.target.value;
this._latestMarkup = value;
// TODO: Validate blocks
@@ -148,10 +145,10 @@ export class UmbPropertyEditorUITiptapElement extends UmbLitElement implements U
}
}
export default UmbPropertyEditorUITiptapElement;
export { UmbPropertyEditorUiTiptapElement as element };
declare global {
interface HTMLElementTagNameMap {
'umb-property-editor-ui-tiptap': UmbPropertyEditorUITiptapElement;
[elementName]: UmbPropertyEditorUiTiptapElement;
}
}