@umbraco-cms/backoffice 16.1.0 → 16.2.0-rc

package/dist-cms/external/tiptap/extensions/tiptap-anchor.extension.js

@@ -0,0 +1,37 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+export const Anchor = Node.create({
+    name: 'anchor',
+    atom: true,
+    draggable: true,
+    inline: true,
+    group: 'inline',
+    marks: '',
+    selectable: true,
+    addAttributes() {
+        return {
+            id: {},
+        };
+    },
+    addNodeView() {
+        return ({ HTMLAttributes }) => {
+            const dom = document.createElement('span');
+            dom.setAttribute('data-umb-anchor', '');
+            dom.setAttribute('title', HTMLAttributes.id);
+            const icon = document.createElement('uui-icon');
+            icon.setAttribute('name', 'icon-anchor');
+            dom.appendChild(icon);
+            return { dom };
+        };
+    },
+    addOptions() {
+        return {
+            HTMLAttributes: { id: '' },
+        };
+    },
+    parseHTML() {
+        return [{ tag: 'a[id]', getAttrs: (element) => (element.innerHTML === '' ? {} : false) }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ['a', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
+    },
+});

package/dist-cms/external/tiptap/extensions/tiptap-div.extension.js

@@ -0,0 +1,16 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+export const Div = Node.create({
+    name: 'div',
+    priority: 50,
+    group: 'block',
+    content: 'inline*',
+    addOptions() {
+        return { HTMLAttributes: {} };
+    },
+    parseHTML() {
+        return [{ tag: this.name }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return [this.name, mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+    },
+});

package/dist-cms/external/tiptap/extensions/tiptap-figcaption.extension.js

@@ -0,0 +1,19 @@
+import { Node } from '@tiptap/core';
+export const Figcaption = Node.create({
+    name: 'figcaption',
+    addOptions() {
+        return {
+            HTMLAttributes: {},
+        };
+    },
+    group: 'block',
+    content: 'inline*',
+    selectable: false,
+    draggable: false,
+    parseHTML() {
+        return [{ tag: this.name }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return [this.name, HTMLAttributes, 0];
+    },
+});

package/dist-cms/external/tiptap/extensions/tiptap-figure.extension.js

@@ -0,0 +1,38 @@
+import { mergeAttributes, Node } from '@tiptap/core';
+export const Figure = Node.create({
+    name: 'figure',
+    group: 'block',
+    content: 'block+',
+    draggable: true,
+    selectable: true,
+    isolating: true,
+    atom: true,
+    addAttributes() {
+        return {
+            figcaption: {
+                default: '',
+            },
+        };
+    },
+    addOptions() {
+        return {
+            HTMLAttributes: {},
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: this.name,
+                getAttrs: (dom) => {
+                    const figcaption = dom.querySelector('figcaption');
+                    return {
+                        figcaption: figcaption?.textContent || '',
+                    };
+                },
+            },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return [this.name, mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+    },
+});

package/dist-cms/external/tiptap/extensions/tiptap-html-global-attributes.extension.js

@@ -0,0 +1,99 @@
+import { Extension } from '@tiptap/core';
+/**
+ * Converts camelCase to kebab-case.
+ * @param {string} str - The string to convert.
+ * @returns {string} The converted string.
+ */
+function camelCaseToKebabCase(str) {
+    return str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());
+}
+export const HtmlGlobalAttributes = Extension.create({
+    name: 'htmlGlobalAttributes',
+    addOptions() {
+        return { types: [] };
+    },
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    class: {},
+                    dataset: {
+                        parseHTML: (element) => element.dataset,
+                        renderHTML: (attributes) => {
+                            const keys = attributes.dataset ? Object.keys(attributes.dataset) : [];
+                            if (!keys.length)
+                                return {};
+                            const dataAtrrs = {};
+                            keys.forEach((key) => {
+                                dataAtrrs['data-' + camelCaseToKebabCase(key)] = attributes.dataset[key];
+                            });
+                            return dataAtrrs;
+                        },
+                    },
+                    id: {},
+                    style: {
+                        parseHTML: (element) => (element.style.length ? element.style.cssText : null),
+                    },
+                },
+            },
+        ];
+    },
+    addCommands() {
+        return {
+            setClassName: (className, type) => ({ commands }) => {
+                if (!className)
+                    return false;
+                const types = type ? [type] : this.options.types;
+                return types
+                    .map((type) => commands.updateAttributes(type, { class: className }))
+                    .every((response) => response);
+            },
+            toggleClassName: (className, type) => ({ commands, editor }) => {
+                if (!className)
+                    return false;
+                const types = type ? [type] : this.options.types;
+                const existing = types.map((type) => editor.getAttributes(type)?.class).filter((x) => x);
+                return existing.length ? commands.unsetClassName(type) : commands.setClassName(className, type);
+            },
+            unsetClassName: (type) => ({ commands }) => {
+                const types = type ? [type] : this.options.types;
+                return types.map((type) => commands.resetAttributes(type, 'class')).every((response) => response);
+            },
+            setId: (id, type) => ({ commands }) => {
+                if (!id)
+                    return false;
+                const types = type ? [type] : this.options.types;
+                return types.map((type) => commands.updateAttributes(type, { id })).every((response) => response);
+            },
+            toggleId: (id, type) => ({ commands, editor }) => {
+                if (!id)
+                    return false;
+                const types = type ? [type] : this.options.types;
+                const existing = types.map((type) => editor.getAttributes(type)?.id).filter((x) => x);
+                return existing.length ? commands.unsetId(type) : commands.setId(id, type);
+            },
+            unsetId: (type) => ({ commands }) => {
+                const types = type ? [type] : this.options.types;
+                return types.map((type) => commands.resetAttributes(type, 'id')).every((response) => response);
+            },
+            setStyles: (style, type) => ({ commands }) => {
+                if (!style)
+                    return false;
+                const types = type ? [type] : this.options.types;
+                return types.map((type) => commands.updateAttributes(type, { style })).every((response) => response);
+            },
+            toggleStyles: (style, type) => ({ commands, editor }) => {
+                if (!style)
+                    return false;
+                const types = type ? [type] : this.options.types;
+                const existing = types.map((type) => editor.getAttributes(type)?.style).filter((x) => x);
+                return existing.length ? commands.unsetStyles(type) : commands.setStyles(style, type);
+            },
+            unsetStyles: (type) => ({ commands }) => {
+                const types = type ? [type] : this.options.types;
+                return types.map((type) => commands.resetAttributes(type, 'style')).every((response) => response);
+            },
+        };
+    },
+});

package/dist-cms/external/tiptap/extensions/tiptap-span.extension.js

@@ -0,0 +1,86 @@
+import { Mark, mergeAttributes } from '@tiptap/core';
+function parseStyles(style) {
+    const items = {};
+    (style ?? '')
+        .split(';')
+        .map((x) => x.trim())
+        .filter((x) => x)
+        .forEach((rule) => {
+        const [key, value] = rule.split(':');
+        if (key && value) {
+            items[key.trim()] = value.trim();
+        }
+    });
+    return items;
+}
+function serializeStyles(items) {
+    return (Object.entries(items)
+        .map(([key, value]) => `${key}: ${value}`)
+        .join(';') + ';');
+}
+export const Span = Mark.create({
+    name: 'span',
+    priority: 50,
+    addOptions() {
+        return { HTMLAttributes: {} };
+    },
+    parseHTML() {
+        return [{ tag: this.name }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return [this.name, mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+    },
+    addCommands() {
+        return {
+            setSpanStyle: (styles) => ({ commands, editor }) => {
+                if (!styles)
+                    return false;
+                const existing = editor.getAttributes(this.name)?.style;
+                if (!existing && !editor.isActive(this.name)) {
+                    return commands.setMark(this.name, { style: styles });
+                }
+                const items = {
+                    ...parseStyles(existing),
+                    ...parseStyles(styles),
+                };
+                const style = serializeStyles(items);
+                if (style === ';')
+                    return false;
+                return commands.updateAttributes(this.name, { style });
+            },
+            toggleSpanStyle: (styles) => ({ commands, editor }) => {
+                if (!styles)
+                    return false;
+                const existing = editor.getAttributes(this.name)?.style;
+                return existing?.includes(styles) === true ? commands.unsetSpanStyle(styles) : commands.setSpanStyle(styles);
+            },
+            unsetSpanStyle: (styles) => ({ commands, editor }) => {
+                if (!styles)
+                    return false;
+                parseStyles(styles);
+                const toBeRemoved = new Set();
+                styles
+                    .split(';')
+                    .map((x) => x.trim())
+                    .filter((x) => x)
+                    .forEach((rule) => {
+                    const [key] = rule.split(':');
+                    if (key)
+                        toBeRemoved.add(key.trim());
+                });
+                if (toBeRemoved.size === 0)
+                    return false;
+                const existing = editor.getAttributes(this.name)?.style;
+                const items = parseStyles(existing);
+                // Remove keys
+                for (const key of toBeRemoved) {
+                    delete items[key];
+                }
+                const style = serializeStyles(items);
+                return style === ';'
+                    ? commands.resetAttributes(this.name, 'style')
+                    : commands.updateAttributes(this.name, { style });
+            },
+        };
+    },
+});

package/dist-cms/external/tiptap/extensions/tiptap-text-direction-extension.js

@@ -0,0 +1,35 @@
+import { Extension } from '@tiptap/core';
+export const TextDirection = Extension.create({
+    name: 'textDirection',
+    addOptions() {
+        return {
+            directions: ['ltr', 'rtl', 'auto'],
+            types: ['heading', 'paragraph'],
+        };
+    },
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    textDirection: {
+                        parseHTML: (element) => element.dir,
+                        renderHTML: (attributes) => this.options.directions.includes(attributes.textDirection) ? { dir: attributes.textDirection } : null,
+                    },
+                },
+            },
+        ];
+    },
+    addCommands() {
+        return {
+            setTextDirection: (direction) => ({ commands }) => {
+                return this.options.directions.includes(direction)
+                    ? this.options.types.every((type) => commands.updateAttributes(type, { textDirection: direction }))
+                    : false;
+            },
+            unsetTextDirection: () => ({ commands }) => {
+                return this.options.types.every((type) => commands.resetAttributes(type, 'textDirection'));
+            },
+        };
+    },
+});

package/dist-cms/external/tiptap/extensions/tiptap-text-indent-extension.js

@@ -0,0 +1,85 @@
+/* This Source Code has been derived from Tiptiz.
+ * https://github.com/tiptiz/editor/blob/main/packages/tiptiz-extension-indent/src/indent.ts
+ * SPDX-License-Identifier: MIT
+ * Copyright © 2024 Owen Kriz.
+ * Modifications are licensed under the MIT License.
+ */
+import { Extension } from '@tiptap/core';
+import { AllSelection, TextSelection } from '@tiptap/pm/state';
+export const TextIndent = Extension.create({
+    name: 'textIndent',
+    addOptions() {
+        return {
+            minLevel: 0,
+            maxLevel: 5,
+            types: ['heading', 'paragraph', 'listItem', 'taskItem'],
+        };
+    },
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    indent: {
+                        default: null,
+                        parseHTML: (element) => {
+                            const minLevel = this.options.minLevel;
+                            const maxLevel = this.options.maxLevel;
+                            const indent = element.style.textIndent;
+                            return indent ? Math.max(minLevel, Math.min(maxLevel, parseInt(indent, 10))) : null;
+                        },
+                        renderHTML: (attributes) => {
+                            if (!attributes.indent)
+                                return {};
+                            return {
+                                style: `text-indent: ${attributes.indent}rem;`,
+                            };
+                        },
+                    },
+                },
+            },
+        ];
+    },
+    addCommands() {
+        const updateNodeIndentMarkup = (tr, pos, delta) => {
+            const node = tr.doc.nodeAt(pos);
+            if (!node)
+                return tr;
+            const minLevel = this.options.minLevel;
+            const maxLevel = this.options.maxLevel;
+            let level = (node.attrs.indent || 0) + delta;
+            level = Math.max(minLevel, Math.min(maxLevel, parseInt(level, 10)));
+            if (level === node.attrs.indent)
+                return tr;
+            return tr.setNodeMarkup(pos, node.type, { ...node.attrs, indent: level }, node.marks);
+        };
+        const updateIndentLevel = (tr, delta) => {
+            if (tr.selection instanceof TextSelection || tr.selection instanceof AllSelection) {
+                const { from, to } = tr.selection;
+                tr.doc.nodesBetween(from, to, (node, pos) => {
+                    if (this.options.types.includes(node.type.name)) {
+                        tr = updateNodeIndentMarkup(tr, pos, delta);
+                        return false;
+                    }
+                    return true;
+                });
+            }
+            return tr;
+        };
+        const commanderFactory = (direction) => () => function chainHandler({ tr, state, dispatch }) {
+            const { selection } = state;
+            tr.setSelection(selection);
+            tr = updateIndentLevel(tr, direction);
+            if (tr.docChanged) {
+                if (dispatch instanceof Function)
+                    dispatch(tr);
+                return true;
+            }
+            return false;
+        };
+        return {
+            textIndent: commanderFactory(1),
+            textOutdent: commanderFactory(-1),
+        };
+    },
+});

package/dist-cms/external/tiptap/extensions/tiptap-trailing-node.extension.js

@@ -0,0 +1,55 @@
+/* This Source Code has been derived from Tiptap.
+ * https://github.com/ueberdosis/tiptap/blob/v2.11.5/demos/src/Experiments/TrailingNode/Vue/trailing-node.ts
+ * SPDX-License-Identifier: MIT
+ * Copyright © 2023 Tiptap GmbH.
+ * Modifications are licensed under the MIT License.
+ */
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+// @ts-ignore
+function nodeEqualsType({ types, node }) {
+    return (Array.isArray(types) && types.includes(node.type)) || node.type === types;
+}
+export const TrailingNode = Extension.create({
+    name: 'trailingNode',
+    addOptions() {
+        return {
+            node: 'paragraph',
+            notAfter: ['paragraph'],
+        };
+    },
+    addProseMirrorPlugins() {
+        const plugin = new PluginKey(this.name);
+        const disabledNodes = Object.entries(this.editor.schema.nodes)
+            .map(([, value]) => value)
+            .filter((node) => this.options.notAfter.includes(node.name));
+        return [
+            new Plugin({
+                key: plugin,
+                appendTransaction: (_, __, state) => {
+                    const { doc, tr, schema } = state;
+                    const shouldInsertNodeAtEnd = plugin.getState(state);
+                    const endPosition = doc.content.size;
+                    const type = schema.nodes[this.options.node];
+                    if (!shouldInsertNodeAtEnd) {
+                        return;
+                    }
+                    return tr.insert(endPosition, type.create());
+                },
+                state: {
+                    init: (_, state) => {
+                        const lastNode = state.tr.doc.lastChild;
+                        return !nodeEqualsType({ node: lastNode, types: disabledNodes });
+                    },
+                    apply: (tr, value) => {
+                        if (!tr.docChanged) {
+                            return value;
+                        }
+                        const lastNode = tr.doc.lastChild;
+                        return !nodeEqualsType({ node: lastNode, types: disabledNodes });
+                    },
+                },
+            }),
+        ];
+    },
+});

package/dist-cms/external/tiptap/extensions/tiptap-umb-bubble-menu.extension.d.ts

@@ -5,11 +5,13 @@ import { EditorState, Plugin } from '@tiptap/pm/state';
 import { EditorView } from '@tiptap/pm/view';
 export interface UmbTiptapBubbleMenuElement extends HTMLElement {
     editor?: Editor;
+    menuAlias?: string;
 }
 export type UmbBubbleMenuPluginProps = {
     unique: string;
     placement?: UUIPopoverContainerElement['placement'];
     elementName?: string | null;
+    menuAlias?: string;
     shouldShow?: ((props: {
         editor: Editor;
         view: EditorView;

package/dist-cms/external/tiptap/extensions/tiptap-umb-bubble-menu.extension.js

@@ -0,0 +1,75 @@
+import { Extension } from '@tiptap/core';
+import { Editor } from '@tiptap/core';
+import { EditorState, Plugin, PluginKey } from '@tiptap/pm/state';
+import { EditorView } from '@tiptap/pm/view';
+export const UmbBubbleMenu = Extension.create({
+    name: 'umbBubbleMenu',
+    addOptions() {
+        return {
+            unique: 'umb-tiptap-menu',
+            placement: 'top',
+            elementName: null,
+            shouldShow: null,
+        };
+    },
+    addProseMirrorPlugins() {
+        if (!this.options.unique || !this.options.elementName) {
+            return [];
+        }
+        return [
+            UmbBubbleMenuPlugin(this.editor, {
+                unique: this.options.unique,
+                placement: this.options.placement,
+                elementName: this.options.elementName,
+                menuAlias: this.options.menuAlias,
+                shouldShow: this.options.shouldShow,
+            }),
+        ];
+    },
+});
+class UmbBubbleMenuPluginView {
+    #editor;
+    #popover;
+    #shouldShow;
+    constructor(editor, view, props) {
+        this.#editor = editor;
+        this.#shouldShow = props.shouldShow ?? null;
+        this.#popover = document.createElement('uui-popover-container');
+        this.#popover.id = props.unique;
+        this.#popover.setAttribute('placement', props.placement ?? 'top');
+        this.#popover.setAttribute('popover', 'manual');
+        if (props.elementName) {
+            const menu = document.createElement(props.elementName);
+            menu.editor = editor;
+            menu.menuAlias = props.menuAlias;
+            this.#popover.appendChild(menu);
+        }
+        view.dom.parentNode?.appendChild(this.#popover);
+        this.update(view, null);
+    }
+    update(view, prevState) {
+        const editor = this.#editor;
+        const { state } = view;
+        const { selection } = state;
+        const { ranges } = selection;
+        const from = Math.min(...ranges.map((range) => range.$from.pos));
+        const to = Math.max(...ranges.map((range) => range.$to.pos));
+        const shouldShow = this.#shouldShow?.({ editor, view, state, from, to });
+        if (!shouldShow) {
+            this.#popover.hidePopover();
+        }
+        else {
+            this.#popover.showPopover();
+        }
+    }
+    destroy() {
+        this.#popover.remove();
+    }
+}
+export const UmbBubbleMenuPlugin = (editor, props) => {
+    return new Plugin({
+        view(editorView) {
+            return new UmbBubbleMenuPluginView(editor, editorView, props);
+        },
+    });
+};

package/dist-cms/external/tiptap/extensions/tiptap-umb-embedded-media.extension.d.ts

@@ -1,5 +1,8 @@
 import { Node } from '@tiptap/core';
-export declare const umbEmbeddedMedia: Node<any, any>;
+export interface UmbEmbeddedMediaOptions {
+    inline: boolean;
+}
+export declare const umbEmbeddedMedia: Node<UmbEmbeddedMediaOptions, any>;
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         umbEmbeddedMedia: {

package/dist-cms/external/tiptap/extensions/tiptap-umb-embedded-media.extension.js

@@ -0,0 +1,45 @@
+import { mergeAttributes, Node } from '@tiptap/core';
+export const umbEmbeddedMedia = Node.create({
+    name: 'umbEmbeddedMedia',
+    group() {
+        return this.options.inline ? 'inline' : 'block';
+    },
+    inline() {
+        return this.options.inline;
+    },
+    atom: true,
+    marks: '',
+    draggable: true,
+    selectable: true,
+    addAttributes() {
+        return {
+            'data-embed-constrain': { default: false },
+            'data-embed-height': { default: 240 },
+            'data-embed-url': { default: null },
+            'data-embed-width': { default: 360 },
+            markup: { default: null, parseHTML: (element) => element.innerHTML },
+        };
+    },
+    parseHTML() {
+        return [{ tag: '.umb-embed-holder', priority: 100 }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        const { markup, ...attrs } = HTMLAttributes;
+        const embed = document.createRange().createContextualFragment(markup);
+        return [this.options.inline ? 'span' : 'div', mergeAttributes({ class: 'umb-embed-holder' }, attrs), embed];
+    },
+    addCommands() {
+        return {
+            setEmbeddedMedia: (options) => ({ commands }) => {
+                const attrs = {
+                    markup: options.markup,
+                    'data-embed-url': options.url,
+                    'data-embed-width': options.width,
+                    'data-embed-height': options.height,
+                    'data-embed-constrain': options.constrain,
+                };
+                return commands.insertContent({ type: this.name, attrs });
+            },
+        };
+    },
+});

package/dist-cms/external/tiptap/extensions/tiptap-umb-image.extension.js

@@ -0,0 +1,25 @@
+import Image from '@tiptap/extension-image';
+export const UmbImage = Image.extend({
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            width: {
+                default: null,
+            },
+            height: {
+                default: null,
+            },
+            loading: {
+                default: null,
+            },
+            srcset: {
+                default: null,
+            },
+            sizes: {
+                default: null,
+            },
+            'data-tmpimg': { default: null },
+            'data-udi': { default: null },
+        };
+    },
+});