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

Tiptap TextStyle tweaks

Browse Source
This commit is contained in:
leekelleher
2025-02-23 19:19:28 +00:00
committed by Jacob Overgaard
parent da26fd1a3c
commit 5037cc321f
3 changed files with 16 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/Umbraco.Web.UI.Client/src/external/tiptap/extensions/tiptap-html-global-attributes.extension.ts vendored
View File

@@ -1,4 +1,5 @@
import { Extension } from '@tiptap/core';
import type { Attributes } from '@tiptap/core';
/**
* Converts camelCase to kebab-case.
@@ -45,7 +46,14 @@ export const HtmlGlobalAttributes = Extension.create<HtmlGlobalAttributesOptions
},
id: {},
style: {},
},
// style: {
// parseHTML: (element) => (element.style?.length ? element.style : null),
// renderHTML: (attributes) => {
// if (!attributes.style?.length) return null;
// return { style: attributes.style.cssText };
// },
// },
} as Attributes,
},
];
},

3
src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/font-family-tiptap-toolbar.element.ts
View File

@@ -37,6 +37,7 @@ export class UmbTiptapToolbarFontFamilyToolbarElement extends UmbTiptapToolbarBu
#getElement(fontFamily: string, label: string) {
const menuItem = document.createElement('uui-menu-item');
menuItem.addEventListener('click', () => {
//this.editor?.chain().focus().setMark('textStyle', { fontFamily }).run();
this.editor
?.chain()
.focus()
@@ -47,7 +48,7 @@ export class UmbTiptapToolbarFontFamilyToolbarElement extends UmbTiptapToolbarBu
const element = document.createElement('span');
element.slot = 'label';
element.textContent = label;
element.style.cssText = `font-family: ${fontFamily};`;
element.style.fontFamily = fontFamily;
menuItem.appendChild(element);

9
src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/font-size-tiptap-toolbar.element.ts
View File

@@ -6,16 +6,17 @@ import '../../components/cascading-menu-popover/cascading-menu-popover.element.j
@customElement('umb-tiptap-font-size-toolbar-element')
export class UmbTiptapToolbarFontSizeToolbarElement extends UmbTiptapToolbarButtonElement {
#fontSizes = [8, 10, 12, 14, 16, 18, 24, 36, 48];
#fontSizes = [8, 10, 12, 14, 16, 18, 24, 36, 48].map((fontSize) => `${fontSize}pt`);
#menu: Array<UmbCascadingMenuItem> = this.#fontSizes.map((fontSize) => ({
unique: `font-size-${fontSize}pt`,
label: `${fontSize}pt`,
unique: `font-size-${fontSize}`,
label: fontSize,
// execute: () => this.editor?.chain().focus().setMark('textStyle', { fontSize }).run(),
execute: () =>
this.editor
?.chain()
.focus()
.setMark('textStyle', { style: `font-size: ${fontSize}pt;` })
.setMark('textStyle', { style: `font-size: ${fontSize};` })
.run(),
}));