@limetech/lime-elements 38.11.1 → 38.12.0

package/dist/cjs/limel-text-editor.cjs.entry.js

@@ -13,6 +13,7 @@ const TextEditor = class {
     this.change = index.createEvent(this, "change", 7);
     this.imagePasted = index.createEvent(this, "imagePasted", 7);
     this.imageRemoved = index.createEvent(this, "imageRemoved", 7);
+    this.metadataChange = index.createEvent(this, "metadataChange", 7);
     this.triggerStart = index.createEvent(this, "triggerStart", 7);
     this.triggerStop = index.createEvent(this, "triggerStop", 7);
     this.triggerChange = index.createEvent(this, "triggerChange", 7);
@@ -39,8 +40,13 @@ const TextEditor = class {
       event.stopPropagation();
       this.imagePasted.emit(event.detail);
     };
+    this.handleMetadataChange = (event) => {
+      event.stopPropagation();
+      this.metadataChange.emit(event.detail);
+    };
     this.handleImageRemoved = (event) => {
       event.stopPropagation();
+      // eslint-disable-next-line sonarjs/deprecation
       this.imageRemoved.emit(event.detail);
     };
     this.contentType = 'markdown';
@@ -67,7 +73,7 @@ const TextEditor = class {
     if (this.readonly) {
       return (index.h("limel-markdown", { slot: "content", value: this.value, "aria-controls": this.helperTextId, id: this.editorId }));
     }
-    return (index.h("limel-prosemirror-adapter", { slot: "content", "aria-placeholder": this.placeholder, contentType: this.contentType, onChange: this.handleChange, onImagePasted: this.handleImagePasted, onImageRemoved: this.handleImageRemoved, customElements: this.customElements, value: this.value, "aria-controls": this.helperTextId, id: this.editorId, "aria-disabled": this.disabled, "aria-invalid": this.invalid, "aria-required": this.required, language: this.language, triggerCharacters: this.triggers, disabled: this.disabled, ui: this.ui }));
+    return (index.h("limel-prosemirror-adapter", { slot: "content", "aria-placeholder": this.placeholder, contentType: this.contentType, onChange: this.handleChange, onImagePasted: this.handleImagePasted, onImageRemoved: this.handleImageRemoved, onMetadataChange: this.handleMetadataChange, customElements: this.customElements, value: this.value, "aria-controls": this.helperTextId, id: this.editorId, "aria-disabled": this.disabled, "aria-invalid": this.invalid, "aria-required": this.required, language: this.language, triggerCharacters: this.triggers, disabled: this.disabled, ui: this.ui }));
   }
   renderPlaceholder() {
     if (!this.placeholder || this.value) {

package/dist/cjs/limel-text-editor.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"limel-text-editor.entry.cjs.js","mappings":"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","names":["h","createRandomString","Host"],"sources":["./src/components/text-editor/text-editor.scss?tag=limel-text-editor&encapsulation=shadow","./src/components/text-editor/text-editor.tsx"],"sourcesContent":["@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins.scss';\n\n/**\n * @prop --text-editor-max-height: the tallest height the text editor can become when auto-resizing itself. Defaults to `calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)) - 4rem)`.\n * @prop --text-editor-fade-out-background-color: the color of the fade-out effect at the top and bottom of the text editor, when the text-editor is in readonly state. Defaults to rgb(var(--contrast-100)).\n */\n\n* {\n    box-sizing: border-box;\n}\n\n$min-height: 5rem;\n$min-height-condensed: calc($min-height / 2);\n\n:host(limel-text-editor) {\n    --limel-notched-outline-z-index: 2; // since `div.toolbar` has `z-index: 1;`\n    --limel-prosemirror-adapter-toolbar-opacity: 0.6;\n    --limel-text-editor-padding: 0.25rem 1rem 0.75rem 1rem;\n    --limel-prosemirror-adapter-toolbar-grid-template-rows: 1fr;\n    --limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration: 0.3s;\n    --limel-prosemirror-adapter-toolbar-transition-timing-function: cubic-bezier(\n        0.19,\n        0.23,\n        0.26,\n        0.89\n    );\n\n    position: relative;\n    isolation: isolate;\n    display: flex;\n    flex-direction: column;\n\n    width: 100%;\n    min-width: 5rem;\n    min-height: $min-height;\n    height: 100%;\n    max-height: var(\n        --text-editor-max-height,\n        calc(\n            100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)) -\n                4rem\n        )\n    );\n    padding: 1px; // prevents visual defects that can appear due to the backdrop-filter and closeness to borders\n}\n\n:host(limel-text-editor:focus-within),\n:host(limel-text-editor:not([ui='minimal']):hover) {\n    --limel-prosemirror-adapter-toolbar-opacity: 1;\n}\n\n:host(limel-text-editor[ui='minimal']:not(:focus-within)) {\n    --limel-prosemirror-adapter-toolbar-grid-template-rows: 0fr;\n    --limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration: 0.46s;\n    --limel-prosemirror-adapter-action-bar-padding-top-bottom: 0;\n    --limel-prosemirror-adapter-toolbar-opacity: 0;\n}\n\n:host(limel-text-editor[ui='minimal']:not(:focus-within)),\n:host(limel-text-editor[ui='no-toolbar']) {\n    --limel-text-editor-padding: 0.75rem 1rem 0.75rem 1rem;\n    --limel-text-editor-placeholder-top: 0;\n\n    min-height: $min-height-condensed;\n    limel-prosemirror-adapter {\n        min-height: $min-height-condensed;\n    }\n}\n\n:host(limel-text-editor:focus-within),\n:host(limel-text-editor:focus) {\n    .placeholder {\n        opacity: 0;\n    }\n}\n\n:host(limel-text-editor[disabled]:not([disabled='false'])) {\n    limel-prosemirror-adapter {\n        @include shared_input-select-picker.looks-disabled;\n        pointer-events: none;\n    }\n}\n\n:host(limel-text-editor[readonly]:not([readonly='false'])) {\n    --limel-text-editor-padding: 0.75rem 1rem 0.75rem 1rem;\n    --limel-text-editor-placeholder-top: 0;\n\n    limel-markdown {\n        // displayed when `readonly` instead of the adapter\n        display: block;\n        padding: var(--limel-text-editor-padding);\n\n        overflow-y: auto;\n        -webkit-overflow-scrolling: touch;\n        height: 100%;\n\n        &:before,\n        &:after {\n            z-index: 1;\n            pointer-events: none;\n            content: '';\n            display: block;\n            position: absolute;\n            width: 100%;\n        }\n        &:after {\n            height: 1.75rem;\n            top: 0;\n            background: linear-gradient(\n                var(\n                    --text-editor-fade-out-background-color,\n                    rgb(var(--contrast-100))\n                ),\n                transparent\n            );\n        }\n\n        &:before {\n            height: 2rem;\n            bottom: -0.25rem;\n            background: linear-gradient(\n                transparent,\n                var(\n                    --text-editor-fade-out-background-color,\n                    rgb(var(--contrast-100))\n                )\n            );\n        }\n    }\n}\n\n.placeholder {\n    transition-property: top;\n    transition-duration: var(\n        --limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration\n    );\n    transition-timing-function: var(\n        --limel-prosemirror-adapter-toolbar-transition-timing-function\n    );\n    @include mixins.truncate-text;\n    pointer-events: none;\n    position: absolute;\n    top: var(--limel-text-editor-placeholder-top, 2.25rem);\n    left: 0;\n    right: 0;\n\n    padding: var(--limel-text-editor-padding);\n    font-style: italic;\n    font-size: 0.875rem;\n    color: shared_input-select-picker.$input-placeholder-color;\n}\n\nlimel-prosemirror-adapter {\n    flex-grow: 1;\n\n    min-width: 0;\n    min-height: $min-height;\n    height: 100%;\n    overflow: hidden auto;\n    -webkit-overflow-scrolling: touch;\n}\n\n@include mixins.hide-helper-line-when-not-needed(limel-text-editor);\n\n:host(limel-text-editor[allow-resize]) {\n    limel-prosemirror-adapter {\n        resize: vertical;\n    }\n}\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { Languages } from '../date-picker/date.types';\nimport { createRandomString } from '../../util/random-string';\nimport { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\nimport {\n    TriggerCharacter,\n    TriggerEventDetail,\n    ImageInserter,\n    ImageInfo,\n} from './text-editor.types';\nimport { EditorUiType } from './types';\n\n/**\n * A rich text editor that offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n *\n * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n *\n * @exampleComponent limel-example-text-editor-basic\n * @exampleComponent limel-example-text-editor-as-form-component\n * @exampleComponent limel-example-text-editor-with-markdown\n * @exampleComponent limel-example-text-editor-with-html\n * @exampleComponent limel-example-text-editor-with-tables\n * @exampleComponent limel-example-text-editor-with-inline-images-file-storage\n * @exampleComponent limel-example-text-editor-with-inline-images-base64\n * @exampleComponent limel-example-text-editor-allow-resize\n * @exampleComponent limel-example-text-editor-size\n * @exampleComponent limel-example-text-editor-ui\n * @exampleComponent limel-example-text-editor-custom-element\n * @exampleComponent limel-example-text-editor-triggers\n * @exampleComponent limel-example-text-editor-composite\n * @beta\n */\n@Component({\n    tag: 'limel-text-editor',\n    shadow: { delegatesFocus: true },\n    styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<string> {\n    /** The type of content that the editor should handle and emit, defaults to `markdown`\n     *\n     * Assumed to be set only once, so not reactive to changes\n     */\n    @Prop()\n    public contentType: 'markdown' | 'html' = 'markdown';\n\n    /**\n     * Defines the language for translations.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * Set to `true` to disable the field.\n     * Use `disabled` to indicate that the field can normally be interacted\n     * with, but is currently disabled. This tells the user that if certain\n     * requirements are met, the field may become enabled again.\n     */\n    @Prop({ reflect: true })\n    public disabled?: boolean = false;\n\n    /**\n     * Set to `true` to make the component read-only.\n     * Use `readonly` when the field is only there to present the data it holds,\n     * and will not become possible for the current user to edit.\n     * :::note\n     * Consider that it might be better to use `limel-markdown`\n     * instead of `limel-text-editor` when the goal is visualizing data.\n     * :::\n     */\n    @Prop({ reflect: true })\n    public readonly?: boolean = false;\n\n    /**\n     * Optional helper text to display below the input field when it has focus\n     */\n    @Prop({ reflect: true })\n    public helperText?: string;\n\n    /**\n     * The placeholder text shown inside the input field,\n     * when the field is empty.\n     */\n    @Prop({ reflect: true })\n    public placeholder?: string;\n\n    /**\n     * The label of the editor\n     */\n    @Prop({ reflect: true })\n    public label?: string;\n\n    /**\n     * Set to `true` to indicate that the current value of the editor is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid?: boolean = false;\n\n    /**\n     * Description of the text inside the editor as markdown\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * A list of custom elements\n     *\n     * Any `CustomElement` that should be used inside the text editor needs\n     * to be defined here.\n     *\n     * @private\n     * @alpha\n     */\n    @Prop()\n    public customElements: CustomElementDefinition[] = [];\n\n    /**\n     * A set of trigger characters\n     *\n     * Defining a character here will enable trigger events to be sent if the\n     * character is detected in the editor.\n     *\n     * @private\n     * @alpha\n     */\n    @Prop()\n    public triggers: TriggerCharacter[] = [];\n\n    /**\n     * Set to `true` to indicate that the field is required.\n     *\n     * :::important\n     * An empty but required field is not automatically considered invalid.\n     * You must make sure to check the validity of the field on your own,\n     * and properly handle the `invalid` state.\n     * :::\n     */\n    @Prop({ reflect: true })\n    public required?: boolean = false;\n\n    /**\n     * Set to `true` to allow the user to vertically resize the editor.\n     * Set to `false` to disable the resize functionality.\n     */\n    @Prop({ reflect: true })\n    public allowResize: boolean = true;\n\n    /**\n     * Specifies the visual appearance of the editor.\n     *\n     * - `standard`: The default editor appearance with a full toolbar and\n     *    standard layout.\n     * - `minimal`: A compact editor appearance, ideal for limited space\n     *    scenarios such as mobile devices. In this mode, the toolbar is hidden\n     *    until the editor is focused.\n     * - `no-toolbar`: A basic textarea appearance without any text styling toolbar.\n     *    This mode is suitable for scenarios where you want to provide a simple\n     *    text input without any visible formatting options; but still provide\n     *    support for markdown syntax and rich text, using hotkeys or when pasting.\n     */\n    @Prop({ reflect: true })\n    public ui?: EditorUiType = 'standard';\n\n    /**\n     * Dispatched when a change is made to the editor\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    /**\n     * Dispatched when a image is pasted into the editor\n     *\n     * @private\n     * @alpha\n     */\n    @Event()\n    private readonly imagePasted: EventEmitter<ImageInserter>;\n\n    /**\n     * Dispatched when a image is removed from the editor\n     *\n     * @private\n     * @alpha\n     */\n    @Event()\n    private readonly imageRemoved: EventEmitter<ImageInfo>;\n\n    /**\n     * Dispatched if a trigger character is detected.\n     *\n     * @private\n     * @alpha\n     */\n    @Event()\n    public triggerStart: EventEmitter<TriggerEventDetail>;\n\n    /**\n     * Dispatched if a trigger session is ended. That is if the selection\n     * goes outside the trigger input or if something is inserted using the\n     * supplied `TextEditor` insert function.\n     *\n     * @private\n     * @alpha\n     */\n    @Event()\n    public triggerStop: EventEmitter<TriggerEventDetail>;\n\n    /**\n     * Dispatched if a input is changed during an active trigger.\n     *\n     * @private\n     * @alpha\n     */\n    @Event()\n    public triggerChange: EventEmitter<TriggerEventDetail>;\n\n    private readonly helperTextId: string;\n    private readonly editorId: string;\n\n    public constructor() {\n        this.helperTextId = createRandomString();\n        this.editorId = createRandomString();\n    }\n\n    public render() {\n        return (\n            <Host>\n                <limel-notched-outline\n                    labelId={this.editorId}\n                    label={this.label}\n                    required={this.required}\n                    invalid={this.invalid}\n                    disabled={this.disabled}\n                    readonly={this.readonly}\n                    hasValue={!!this.value}\n                    hasFloatingLabel={true}\n                >\n                    {this.renderEditor()}\n                    {this.renderPlaceholder()}\n                </limel-notched-outline>\n                {this.renderHelperLine()}\n            </Host>\n        );\n    }\n\n    private renderEditor() {\n        if (this.readonly) {\n            return (\n                <limel-markdown\n                    slot=\"content\"\n                    value={this.value}\n                    aria-controls={this.helperTextId}\n                    id={this.editorId}\n                />\n            );\n        }\n\n        return (\n            <limel-prosemirror-adapter\n                slot=\"content\"\n                aria-placeholder={this.placeholder}\n                contentType={this.contentType}\n                onChange={this.handleChange}\n                onImagePasted={this.handleImagePasted}\n                onImageRemoved={this.handleImageRemoved}\n                customElements={this.customElements}\n                value={this.value}\n                aria-controls={this.helperTextId}\n                id={this.editorId}\n                aria-disabled={this.disabled}\n                aria-invalid={this.invalid}\n                aria-required={this.required}\n                language={this.language}\n                triggerCharacters={this.triggers}\n                disabled={this.disabled}\n                ui={this.ui}\n            />\n        );\n    }\n\n    private renderPlaceholder() {\n        if (!this.placeholder || this.value) {\n            return;\n        }\n\n        return (\n            <span class=\"placeholder\" aria-hidden=\"true\" slot=\"content\">\n                {this.placeholder}\n            </span>\n        );\n    }\n\n    private renderHelperLine = () => {\n        if (!this.helperText) {\n            return;\n        }\n\n        return (\n            <limel-helper-line\n                helperText={this.helperText}\n                helperTextId={this.helperTextId}\n                invalid={this.isInvalid()}\n            />\n        );\n    };\n\n    private isInvalid = () => {\n        if (this.readonly) {\n            // A readonly field can never be invalid.\n            return false;\n        }\n\n        if (this.invalid) {\n            return true;\n        }\n    };\n\n    private handleChange = (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n\n    private handleImagePasted = (event: CustomEvent<ImageInserter>) => {\n        event.stopPropagation();\n        this.imagePasted.emit(event.detail);\n    };\n\n    private handleImageRemoved = (event: CustomEvent<ImageInfo>) => {\n        event.stopPropagation();\n        this.imageRemoved.emit(event.detail);\n    };\n}\n"],"version":3}
+{"file":"limel-text-editor.entry.cjs.js","mappings":"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","names":["h","createRandomString","Host"],"sources":["./src/components/text-editor/text-editor.scss?tag=limel-text-editor&encapsulation=shadow","./src/components/text-editor/text-editor.tsx"],"sourcesContent":["@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins.scss';\n\n/**\n * @prop --text-editor-max-height: the tallest height the text editor can become when auto-resizing itself. Defaults to `calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)) - 4rem)`.\n * @prop --text-editor-fade-out-background-color: the color of the fade-out effect at the top and bottom of the text editor, when the text-editor is in readonly state. Defaults to rgb(var(--contrast-100)).\n */\n\n* {\n    box-sizing: border-box;\n}\n\n$min-height: 5rem;\n$min-height-condensed: calc($min-height / 2);\n\n:host(limel-text-editor) {\n    --limel-notched-outline-z-index: 2; // since `div.toolbar` has `z-index: 1;`\n    --limel-prosemirror-adapter-toolbar-opacity: 0.6;\n    --limel-text-editor-padding: 0.25rem 1rem 0.75rem 1rem;\n    --limel-prosemirror-adapter-toolbar-grid-template-rows: 1fr;\n    --limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration: 0.3s;\n    --limel-prosemirror-adapter-toolbar-transition-timing-function: cubic-bezier(\n        0.19,\n        0.23,\n        0.26,\n        0.89\n    );\n\n    position: relative;\n    isolation: isolate;\n    display: flex;\n    flex-direction: column;\n\n    width: 100%;\n    min-width: 5rem;\n    min-height: $min-height;\n    height: 100%;\n    max-height: var(\n        --text-editor-max-height,\n        calc(\n            100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)) -\n                4rem\n        )\n    );\n    padding: 1px; // prevents visual defects that can appear due to the backdrop-filter and closeness to borders\n}\n\n:host(limel-text-editor:focus-within),\n:host(limel-text-editor:not([ui='minimal']):hover) {\n    --limel-prosemirror-adapter-toolbar-opacity: 1;\n}\n\n:host(limel-text-editor[ui='minimal']:not(:focus-within)) {\n    --limel-prosemirror-adapter-toolbar-grid-template-rows: 0fr;\n    --limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration: 0.46s;\n    --limel-prosemirror-adapter-action-bar-padding-top-bottom: 0;\n    --limel-prosemirror-adapter-toolbar-opacity: 0;\n}\n\n:host(limel-text-editor[ui='minimal']:not(:focus-within)),\n:host(limel-text-editor[ui='no-toolbar']) {\n    --limel-text-editor-padding: 0.75rem 1rem 0.75rem 1rem;\n    --limel-text-editor-placeholder-top: 0;\n\n    min-height: $min-height-condensed;\n    limel-prosemirror-adapter {\n        min-height: $min-height-condensed;\n    }\n}\n\n:host(limel-text-editor:focus-within),\n:host(limel-text-editor:focus) {\n    .placeholder {\n        opacity: 0;\n    }\n}\n\n:host(limel-text-editor[disabled]:not([disabled='false'])) {\n    limel-prosemirror-adapter {\n        @include shared_input-select-picker.looks-disabled;\n        pointer-events: none;\n    }\n}\n\n:host(limel-text-editor[readonly]:not([readonly='false'])) {\n    --limel-text-editor-padding: 0.75rem 1rem 0.75rem 1rem;\n    --limel-text-editor-placeholder-top: 0;\n\n    limel-markdown {\n        // displayed when `readonly` instead of the adapter\n        display: block;\n        padding: var(--limel-text-editor-padding);\n\n        overflow-y: auto;\n        -webkit-overflow-scrolling: touch;\n        height: 100%;\n\n        &:before,\n        &:after {\n            z-index: 1;\n            pointer-events: none;\n            content: '';\n            display: block;\n            position: absolute;\n            width: 100%;\n        }\n        &:after {\n            height: 1.75rem;\n            top: 0;\n            background: linear-gradient(\n                var(\n                    --text-editor-fade-out-background-color,\n                    rgb(var(--contrast-100))\n                ),\n                transparent\n            );\n        }\n\n        &:before {\n            height: 2rem;\n            bottom: -0.25rem;\n            background: linear-gradient(\n                transparent,\n                var(\n                    --text-editor-fade-out-background-color,\n                    rgb(var(--contrast-100))\n                )\n            );\n        }\n    }\n}\n\n.placeholder {\n    transition-property: top;\n    transition-duration: var(\n        --limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration\n    );\n    transition-timing-function: var(\n        --limel-prosemirror-adapter-toolbar-transition-timing-function\n    );\n    @include mixins.truncate-text;\n    pointer-events: none;\n    position: absolute;\n    top: var(--limel-text-editor-placeholder-top, 2.25rem);\n    left: 0;\n    right: 0;\n\n    padding: var(--limel-text-editor-padding);\n    font-style: italic;\n    font-size: 0.875rem;\n    color: shared_input-select-picker.$input-placeholder-color;\n}\n\nlimel-prosemirror-adapter {\n    flex-grow: 1;\n\n    min-width: 0;\n    min-height: $min-height;\n    height: 100%;\n    overflow: hidden auto;\n    -webkit-overflow-scrolling: touch;\n}\n\n@include mixins.hide-helper-line-when-not-needed(limel-text-editor);\n\n:host(limel-text-editor[allow-resize]) {\n    limel-prosemirror-adapter {\n        resize: vertical;\n    }\n}\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { Languages } from '../date-picker/date.types';\nimport { createRandomString } from '../../util/random-string';\nimport { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\nimport {\n    TriggerCharacter,\n    TriggerEventDetail,\n    ImageInserter,\n    EditorImage,\n    EditorMetadata,\n} from './text-editor.types';\nimport { EditorUiType } from './types';\n\n/**\n * A rich text editor that offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n *\n * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n *\n * @exampleComponent limel-example-text-editor-basic\n * @exampleComponent limel-example-text-editor-as-form-component\n * @exampleComponent limel-example-text-editor-with-markdown\n * @exampleComponent limel-example-text-editor-with-html\n * @exampleComponent limel-example-text-editor-with-tables\n * @exampleComponent limel-example-text-editor-with-inline-images-file-storage\n * @exampleComponent limel-example-text-editor-with-inline-images-base64\n * @exampleComponent limel-example-text-editor-allow-resize\n * @exampleComponent limel-example-text-editor-size\n * @exampleComponent limel-example-text-editor-ui\n * @exampleComponent limel-example-text-editor-custom-element\n * @exampleComponent limel-example-text-editor-triggers\n * @exampleComponent limel-example-text-editor-composite\n * @beta\n */\n@Component({\n    tag: 'limel-text-editor',\n    shadow: { delegatesFocus: true },\n    styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<string> {\n    /** The type of content that the editor should handle and emit, defaults to `markdown`\n     *\n     * Assumed to be set only once, so not reactive to changes\n     */\n    @Prop()\n    public contentType: 'markdown' | 'html' = 'markdown';\n\n    /**\n     * Defines the language for translations.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * Set to `true` to disable the field.\n     * Use `disabled` to indicate that the field can normally be interacted\n     * with, but is currently disabled. This tells the user that if certain\n     * requirements are met, the field may become enabled again.\n     */\n    @Prop({ reflect: true })\n    public disabled?: boolean = false;\n\n    /**\n     * Set to `true` to make the component read-only.\n     * Use `readonly` when the field is only there to present the data it holds,\n     * and will not become possible for the current user to edit.\n     * :::note\n     * Consider that it might be better to use `limel-markdown`\n     * instead of `limel-text-editor` when the goal is visualizing data.\n     * :::\n     */\n    @Prop({ reflect: true })\n    public readonly?: boolean = false;\n\n    /**\n     * Optional helper text to display below the input field when it has focus\n     */\n    @Prop({ reflect: true })\n    public helperText?: string;\n\n    /**\n     * The placeholder text shown inside the input field,\n     * when the field is empty.\n     */\n    @Prop({ reflect: true })\n    public placeholder?: string;\n\n    /**\n     * The label of the editor\n     */\n    @Prop({ reflect: true })\n    public label?: string;\n\n    /**\n     * Set to `true` to indicate that the current value of the editor is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid?: boolean = false;\n\n    /**\n     * Description of the text inside the editor as markdown\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * A list of custom elements\n     *\n     * Any `CustomElement` that should be used inside the text editor needs\n     * to be defined here.\n     *\n     * @private\n     * @alpha\n     */\n    @Prop()\n    public customElements: CustomElementDefinition[] = [];\n\n    /**\n     * A set of trigger characters\n     *\n     * Defining a character here will enable trigger events to be sent if the\n     * character is detected in the editor.\n     *\n     * @private\n     * @alpha\n     */\n    @Prop()\n    public triggers: TriggerCharacter[] = [];\n\n    /**\n     * Set to `true` to indicate that the field is required.\n     *\n     * :::important\n     * An empty but required field is not automatically considered invalid.\n     * You must make sure to check the validity of the field on your own,\n     * and properly handle the `invalid` state.\n     * :::\n     */\n    @Prop({ reflect: true })\n    public required?: boolean = false;\n\n    /**\n     * Set to `true` to allow the user to vertically resize the editor.\n     * Set to `false` to disable the resize functionality.\n     */\n    @Prop({ reflect: true })\n    public allowResize: boolean = true;\n\n    /**\n     * Specifies the visual appearance of the editor.\n     *\n     * - `standard`: The default editor appearance with a full toolbar and\n     *    standard layout.\n     * - `minimal`: A compact editor appearance, ideal for limited space\n     *    scenarios such as mobile devices. In this mode, the toolbar is hidden\n     *    until the editor is focused.\n     * - `no-toolbar`: A basic textarea appearance without any text styling toolbar.\n     *    This mode is suitable for scenarios where you want to provide a simple\n     *    text input without any visible formatting options; but still provide\n     *    support for markdown syntax and rich text, using hotkeys or when pasting.\n     */\n    @Prop({ reflect: true })\n    public ui?: EditorUiType = 'standard';\n\n    /**\n     * Dispatched when a change is made to the editor\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    /**\n     * Dispatched when a image is pasted into the editor\n     *\n     * @private\n     * @alpha\n     */\n    @Event()\n    private readonly imagePasted: EventEmitter<ImageInserter>;\n\n    /**\n     * Dispatched when a image is removed from the editor\n     *\n     * @private\n     * @alpha\n     * @deprecated - This event is deprecated and will be removed in a future version.\n     * Use the `metadataChange` event instead to track image removals.\n     */\n    @Event()\n    private readonly imageRemoved: EventEmitter<EditorImage>;\n\n    /**\n     * Dispatched when the metadata of the editor changes\n     *\n     * @private\n     * @alpha\n     */\n    @Event()\n    private readonly metadataChange: EventEmitter<EditorMetadata>;\n\n    /**\n     * Dispatched if a trigger character is detected.\n     *\n     * @private\n     * @alpha\n     */\n    @Event()\n    public triggerStart: EventEmitter<TriggerEventDetail>;\n\n    /**\n     * Dispatched if a trigger session is ended. That is if the selection\n     * goes outside the trigger input or if something is inserted using the\n     * supplied `TextEditor` insert function.\n     *\n     * @private\n     * @alpha\n     */\n    @Event()\n    public triggerStop: EventEmitter<TriggerEventDetail>;\n\n    /**\n     * Dispatched if a input is changed during an active trigger.\n     *\n     * @private\n     * @alpha\n     */\n    @Event()\n    public triggerChange: EventEmitter<TriggerEventDetail>;\n\n    private readonly helperTextId: string;\n    private readonly editorId: string;\n\n    public constructor() {\n        this.helperTextId = createRandomString();\n        this.editorId = createRandomString();\n    }\n\n    public render() {\n        return (\n            <Host>\n                <limel-notched-outline\n                    labelId={this.editorId}\n                    label={this.label}\n                    required={this.required}\n                    invalid={this.invalid}\n                    disabled={this.disabled}\n                    readonly={this.readonly}\n                    hasValue={!!this.value}\n                    hasFloatingLabel={true}\n                >\n                    {this.renderEditor()}\n                    {this.renderPlaceholder()}\n                </limel-notched-outline>\n                {this.renderHelperLine()}\n            </Host>\n        );\n    }\n\n    private renderEditor() {\n        if (this.readonly) {\n            return (\n                <limel-markdown\n                    slot=\"content\"\n                    value={this.value}\n                    aria-controls={this.helperTextId}\n                    id={this.editorId}\n                />\n            );\n        }\n\n        return (\n            <limel-prosemirror-adapter\n                slot=\"content\"\n                aria-placeholder={this.placeholder}\n                contentType={this.contentType}\n                onChange={this.handleChange}\n                onImagePasted={this.handleImagePasted}\n                onImageRemoved={this.handleImageRemoved}\n                onMetadataChange={this.handleMetadataChange}\n                customElements={this.customElements}\n                value={this.value}\n                aria-controls={this.helperTextId}\n                id={this.editorId}\n                aria-disabled={this.disabled}\n                aria-invalid={this.invalid}\n                aria-required={this.required}\n                language={this.language}\n                triggerCharacters={this.triggers}\n                disabled={this.disabled}\n                ui={this.ui}\n            />\n        );\n    }\n\n    private renderPlaceholder() {\n        if (!this.placeholder || this.value) {\n            return;\n        }\n\n        return (\n            <span class=\"placeholder\" aria-hidden=\"true\" slot=\"content\">\n                {this.placeholder}\n            </span>\n        );\n    }\n\n    private renderHelperLine = () => {\n        if (!this.helperText) {\n            return;\n        }\n\n        return (\n            <limel-helper-line\n                helperText={this.helperText}\n                helperTextId={this.helperTextId}\n                invalid={this.isInvalid()}\n            />\n        );\n    };\n\n    private isInvalid = () => {\n        if (this.readonly) {\n            // A readonly field can never be invalid.\n            return false;\n        }\n\n        if (this.invalid) {\n            return true;\n        }\n    };\n\n    private handleChange = (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n\n    private handleImagePasted = (event: CustomEvent<ImageInserter>) => {\n        event.stopPropagation();\n        this.imagePasted.emit(event.detail);\n    };\n\n    private handleMetadataChange = (event: CustomEvent<EditorMetadata>) => {\n        event.stopPropagation();\n        this.metadataChange.emit(event.detail);\n    };\n\n    private handleImageRemoved = (event: CustomEvent<EditorImage>) => {\n        event.stopPropagation();\n        // eslint-disable-next-line sonarjs/deprecation\n        this.imageRemoved.emit(event.detail);\n    };\n}\n"],"version":3}

package/dist/collection/components/text-editor/prosemirror-adapter/plugins/image/inserter.js

@@ -1,10 +1,8 @@
 import { Plugin, PluginKey } from 'prosemirror-state';
 import { createFileInfo } from '../../../../../util/files';
-import { ImageState, } from '../../../text-editor.types';
 import { Node, Slice, Fragment } from 'prosemirror-model';
-import { imageCache } from './node';
 export const pluginKey = new PluginKey('imageInserterPlugin');
-export const createImageInserterPlugin = (imagePastedCallback, imageRemovedCallback) => {
+export const createImageInserterPlugin = (imagePastedCallback) => {
   return new Plugin({
     key: pluginKey,
     props: {
@@ -17,40 +15,7 @@ export const createImageInserterPlugin = (imagePastedCallback, imageRemovedCallb
         },
       },
     },
-    state: {
-      init: () => {
-        return { insertedImages: {} };
-      },
-      apply: (tr, pluginState) => {
-        const newState = Object.assign({}, pluginState);
-        newState.insertedImages = getImagesFromTransaction(tr);
-        findAndHandleRemovedImages(imageRemovedCallback, pluginState.insertedImages, newState.insertedImages);
-        return newState;
-      },
-    },
-  });
-};
-const getImagesFromTransaction = (tr) => {
-  const images = {};
-  tr.doc.descendants((node) => {
-    if (node.type.name === 'image') {
-      images[node.attrs.fileInfoId] = node;
-    }
   });
-  return images;
-};
-const findAndHandleRemovedImages = (imageRemovedCallback, previousImages, newImages) => {
-  const removedKeys = Object.keys(previousImages).filter((key) => !(key in newImages));
-  for (const removedKey of removedKeys) {
-    const removedImage = previousImages[removedKey];
-    const imageInfo = {
-      fileInfoId: removedImage.attrs.fileInfoId,
-      src: removedImage.attrs.src,
-      state: removedImage.attrs.state,
-    };
-    imageRemovedCallback(imageInfo);
-    imageCache.delete(removedImage.attrs.fileInfoId);
-  }
 };
 export const imageInserterFactory = (view, base64Data, fileInfo) => {
   return {
@@ -63,12 +28,8 @@ export const imageInserterFactory = (view, base64Data, fileInfo) => {
 const createThumbnailInserter = (view, base64Data, fileInfo) => () => {
   const { state, dispatch } = view;
   const { schema } = state;
-  const placeholderNode = schema.nodes.image.create({
-    src: base64Data,
-    alt: fileInfo.filename,
-    fileInfoId: fileInfo.id,
-    state: ImageState.LOADING,
-  });
+  const imageNodeAttrs = createImageNodeAttrs(base64Data, fileInfo, 'loading');
+  const placeholderNode = schema.nodes.image.create(imageNodeAttrs);
   const transaction = state.tr.replaceSelectionWith(placeholderNode);
   dispatch(transaction);
 };
@@ -78,12 +39,8 @@ const createImageInserter = (view, fileInfo) => (src) => {
   const tr = state.tr;
   state.doc.descendants((node, pos) => {
     if (node.attrs.fileInfoId === fileInfo.id) {
-      const imageNode = schema.nodes.image.create({
-        src: src ? src : node.attrs.src,
-        alt: fileInfo.filename,
-        fileInfoId: fileInfo.id,
-        state: ImageState.SUCCESS,
-      });
+      const imageNodeAttrs = createImageNodeAttrs(src ? src : node.attrs.src, fileInfo, 'success');
+      const imageNode = schema.nodes.image.create(imageNodeAttrs);
       tr.replaceWith(pos, pos + node.nodeSize, imageNode);
       return false;
     }
@@ -96,18 +53,22 @@ const createFailedThumbnailInserter = (view, fileInfo) => () => {
   const tr = state.tr;
   state.doc.descendants((node, pos) => {
     if (node.attrs.fileInfoId === fileInfo.id) {
-      const errorPlaceholderNode = schema.nodes.image.create({
-        src: node.attrs.src,
-        alt: fileInfo.filename,
-        fileInfoId: fileInfo.id,
-        state: ImageState.FAILED,
-      });
+      const imageNodeAttrs = createImageNodeAttrs(node.attrs.src, fileInfo, 'failed');
+      const errorPlaceholderNode = schema.nodes.image.create(imageNodeAttrs);
       tr.replaceWith(pos, pos + node.nodeSize, errorPlaceholderNode);
       return false;
     }
   });
   dispatch(tr);
 };
+function createImageNodeAttrs(src, fileInfo, state) {
+  return {
+    src: src,
+    alt: fileInfo.filename,
+    fileInfoId: fileInfo.id,
+    state: state,
+  };
+}
 /**
  * Check if a given ProseMirror node or fragment contains any image nodes.
  * @param node - The ProseMirror node or fragment to check.

package/dist/collection/components/text-editor/prosemirror-adapter/plugins/image/inserter.js.map

@@ -1 +1 @@
-{"version":3,"file":"inserter.js","sourceRoot":"","sources":["../../../../../../src/components/text-editor/prosemirror-adapter/plugins/image/inserter.ts"],"names":[],"mappings":"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","sourcesContent":["import { Plugin, PluginKey, Transaction, StateField } from 'prosemirror-state';\nimport { EditorView } from 'prosemirror-view';\nimport { createFileInfo } from '../../../../../util/files';\nimport { FileInfo } from '../../../../../global/shared-types/file.types';\nimport {\n    ImageInserter,\n    ImageInfo,\n    ImageState,\n} from '../../../text-editor.types';\nimport { Node, Slice, Fragment } from 'prosemirror-model';\nimport { imageCache } from './node';\n\nexport const pluginKey = new PluginKey('imageInserterPlugin');\n\ntype ImagePastedCallback = (data: ImageInserter) => CustomEvent<ImageInserter>;\n\ntype ImageRemovedCallback = (data: ImageInfo) => CustomEvent<ImageInfo>;\n\ntype PluginState = {\n    insertedImages: Record<string, Node>;\n};\n\nexport const createImageInserterPlugin = (\n    imagePastedCallback: ImagePastedCallback,\n    imageRemovedCallback: ImageRemovedCallback,\n) => {\n    return new Plugin({\n        key: pluginKey,\n        props: {\n            handlePaste: (view, event, slice) => {\n                return processPasteEvent(view, event, slice);\n            },\n            handleDOMEvents: {\n                imagePasted: (_, event) => {\n                    imagePastedCallback(event.detail);\n                },\n            },\n        },\n        state: {\n            init: (): PluginState => {\n                return { insertedImages: {} };\n            },\n            apply: (tr, pluginState): PluginState => {\n                const newState = { ...pluginState };\n\n                newState.insertedImages = getImagesFromTransaction(tr);\n                findAndHandleRemovedImages(\n                    imageRemovedCallback,\n                    pluginState.insertedImages,\n                    newState.insertedImages,\n                );\n\n                return newState;\n            },\n        } as StateField<PluginState>,\n    });\n};\n\nconst getImagesFromTransaction = (tr: Transaction): Record<string, Node> => {\n    const images: Record<string, Node> = {};\n    tr.doc.descendants((node) => {\n        if (node.type.name === 'image') {\n            images[node.attrs.fileInfoId] = node;\n        }\n    });\n\n    return images;\n};\n\nconst findAndHandleRemovedImages = (\n    imageRemovedCallback: ImageRemovedCallback,\n    previousImages: Record<string, Node>,\n    newImages: Record<string, Node>,\n) => {\n    const removedKeys = Object.keys(previousImages).filter(\n        (key) => !(key in newImages),\n    );\n\n    for (const removedKey of removedKeys) {\n        const removedImage = previousImages[removedKey];\n        const imageInfo: ImageInfo = {\n            fileInfoId: removedImage.attrs.fileInfoId,\n            src: removedImage.attrs.src,\n            state: removedImage.attrs.state,\n        };\n        imageRemovedCallback(imageInfo);\n\n        imageCache.delete(removedImage.attrs.fileInfoId);\n    }\n};\n\nexport const imageInserterFactory = (\n    view: EditorView,\n    base64Data: string,\n    fileInfo: FileInfo,\n): ImageInserter => {\n    return {\n        fileInfo: fileInfo,\n        insertThumbnail: createThumbnailInserter(view, base64Data, fileInfo),\n        insertImage: createImageInserter(view, fileInfo),\n        insertFailedThumbnail: createFailedThumbnailInserter(view, fileInfo),\n    };\n};\n\nconst createThumbnailInserter =\n    (view: EditorView, base64Data: string, fileInfo: FileInfo) => () => {\n        const { state, dispatch } = view;\n        const { schema } = state;\n\n        const placeholderNode = schema.nodes.image.create({\n            src: base64Data,\n            alt: fileInfo.filename,\n            fileInfoId: fileInfo.id,\n            state: ImageState.LOADING,\n        });\n\n        const transaction = state.tr.replaceSelectionWith(placeholderNode);\n\n        dispatch(transaction);\n    };\n\nconst createImageInserter =\n    (view: EditorView, fileInfo: FileInfo) => (src?: string) => {\n        const { state, dispatch } = view;\n        const { schema } = state;\n\n        const tr = state.tr;\n        state.doc.descendants((node, pos) => {\n            if (node.attrs.fileInfoId === fileInfo.id) {\n                const imageNode = schema.nodes.image.create({\n                    src: src ? src : node.attrs.src,\n                    alt: fileInfo.filename,\n                    fileInfoId: fileInfo.id,\n                    state: ImageState.SUCCESS,\n                });\n\n                tr.replaceWith(pos, pos + node.nodeSize, imageNode);\n\n                return false;\n            }\n        });\n\n        dispatch(tr);\n    };\n\nconst createFailedThumbnailInserter =\n    (view: EditorView, fileInfo: FileInfo) => () => {\n        const { state, dispatch } = view;\n        const { schema } = state;\n\n        const tr = state.tr;\n        state.doc.descendants((node, pos) => {\n            if (node.attrs.fileInfoId === fileInfo.id) {\n                const errorPlaceholderNode = schema.nodes.image.create({\n                    src: node.attrs.src,\n                    alt: fileInfo.filename,\n                    fileInfoId: fileInfo.id,\n                    state: ImageState.FAILED,\n                });\n\n                tr.replaceWith(pos, pos + node.nodeSize, errorPlaceholderNode);\n\n                return false;\n            }\n        });\n\n        dispatch(tr);\n    };\n\n/**\n * Check if a given ProseMirror node or fragment contains any image nodes.\n * @param node - The ProseMirror node or fragment to check.\n * @returns A boolean indicating whether the node contains any image nodes.\n */\nconst isImageNode = (node: Node | Fragment): boolean => {\n    if (node instanceof Node) {\n        if (node.type.name === 'image') {\n            return true;\n        }\n\n        let found = false;\n        node.content.forEach((child) => {\n            if (isImageNode(child)) {\n                found = true;\n            }\n        });\n\n        return found;\n    } else if (node instanceof Fragment) {\n        let found = false;\n        node.forEach((child) => {\n            if (isImageNode(child)) {\n                found = true;\n            }\n        });\n\n        return found;\n    }\n\n    return false;\n};\n\n/**\n * Filter out image nodes from a ProseMirror fragment.\n * @param fragment - The ProseMirror fragment to filter.\n * @returns A new fragment with image nodes removed.\n */\nconst filterImageNodes = (fragment: Fragment): Fragment => {\n    const filteredChildren: Node[] = [];\n\n    fragment.forEach((child) => {\n        if (!isImageNode(child)) {\n            if (child.content.size > 0) {\n                const filteredContent = filterImageNodes(child.content);\n                const newNode = child.copy(filteredContent);\n                filteredChildren.push(newNode);\n            } else {\n                filteredChildren.push(child);\n            }\n        }\n    });\n\n    return Fragment.fromArray(filteredChildren);\n};\n\n/**\n * Process a paste event and trigger an imagePasted event if an image file is pasted.\n * If an HTML image element is pasted, this image is filtered out from the slice content.\n *\n * @param view - The ProseMirror editor view.\n * @param event - The paste event.\n * @returns A boolean; True if an image file was pasted to prevent default paste behavior, otherwise false.\n */\nconst processPasteEvent = (\n    view: EditorView,\n    event: ClipboardEvent,\n    slice: Slice,\n): boolean => {\n    const clipboardData = event.clipboardData;\n    if (!clipboardData) {\n        return false;\n    }\n\n    const files = Array.from(clipboardData.files || []);\n    for (const file of files) {\n        if (file.type.startsWith('image/')) {\n            const reader = new FileReader();\n            reader.onloadend = () => {\n                view.dom.dispatchEvent(\n                    new CustomEvent('imagePasted', {\n                        detail: imageInserterFactory(\n                            view,\n                            reader.result as string,\n                            createFileInfo(file),\n                        ),\n                    }),\n                );\n            };\n\n            reader.readAsDataURL(file);\n        }\n    }\n\n    const filteredSlice = new Slice(\n        filterImageNodes(slice.content),\n        slice.openStart,\n        slice.openEnd,\n    );\n\n    if (filteredSlice.content.childCount < slice.content.childCount) {\n        const { state, dispatch } = view;\n        const tr = state.tr.replaceSelection(filteredSlice);\n        dispatch(tr);\n\n        return true;\n    }\n\n    return files.length > 0;\n};\n"]}
+{"version":3,"file":"inserter.js","sourceRoot":"","sources":["../../../../../../src/components/text-editor/prosemirror-adapter/plugins/image/inserter.ts"],"names":[],"mappings":"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","sourcesContent":["import { Plugin, PluginKey } from 'prosemirror-state';\nimport { EditorView } from 'prosemirror-view';\nimport { createFileInfo } from '../../../../../util/files';\nimport { FileInfo } from '../../../../../global/shared-types/file.types';\nimport { ImageInserter, EditorImageState } from '../../../text-editor.types';\nimport { Node, Slice, Fragment } from 'prosemirror-model';\nimport { ImageNodeAttrs } from './node';\n\nexport const pluginKey = new PluginKey('imageInserterPlugin');\n\ntype ImagePastedCallback = (data: ImageInserter) => CustomEvent<ImageInserter>;\n\nexport const createImageInserterPlugin = (\n    imagePastedCallback: ImagePastedCallback,\n) => {\n    return new Plugin({\n        key: pluginKey,\n        props: {\n            handlePaste: (view, event, slice) => {\n                return processPasteEvent(view, event, slice);\n            },\n            handleDOMEvents: {\n                imagePasted: (_, event) => {\n                    imagePastedCallback(event.detail);\n                },\n            },\n        },\n    });\n};\n\nexport const imageInserterFactory = (\n    view: EditorView,\n    base64Data: string,\n    fileInfo: FileInfo,\n): ImageInserter => {\n    return {\n        fileInfo: fileInfo,\n        insertThumbnail: createThumbnailInserter(view, base64Data, fileInfo),\n        insertImage: createImageInserter(view, fileInfo),\n        insertFailedThumbnail: createFailedThumbnailInserter(view, fileInfo),\n    };\n};\n\nconst createThumbnailInserter =\n    (view: EditorView, base64Data: string, fileInfo: FileInfo) => () => {\n        const { state, dispatch } = view;\n        const { schema } = state;\n\n        const imageNodeAttrs = createImageNodeAttrs(\n            base64Data,\n            fileInfo,\n            'loading',\n        );\n        const placeholderNode = schema.nodes.image.create(imageNodeAttrs);\n\n        const transaction = state.tr.replaceSelectionWith(placeholderNode);\n\n        dispatch(transaction);\n    };\n\nconst createImageInserter =\n    (view: EditorView, fileInfo: FileInfo) => (src?: string) => {\n        const { state, dispatch } = view;\n        const { schema } = state;\n\n        const tr = state.tr;\n        state.doc.descendants((node, pos) => {\n            if (node.attrs.fileInfoId === fileInfo.id) {\n                const imageNodeAttrs = createImageNodeAttrs(\n                    src ? src : node.attrs.src,\n                    fileInfo,\n                    'success',\n                );\n                const imageNode = schema.nodes.image.create(imageNodeAttrs);\n\n                tr.replaceWith(pos, pos + node.nodeSize, imageNode);\n\n                return false;\n            }\n        });\n\n        dispatch(tr);\n    };\n\nconst createFailedThumbnailInserter =\n    (view: EditorView, fileInfo: FileInfo) => () => {\n        const { state, dispatch } = view;\n        const { schema } = state;\n\n        const tr = state.tr;\n        state.doc.descendants((node, pos) => {\n            if (node.attrs.fileInfoId === fileInfo.id) {\n                const imageNodeAttrs = createImageNodeAttrs(\n                    node.attrs.src,\n                    fileInfo,\n                    'failed',\n                );\n                const errorPlaceholderNode =\n                    schema.nodes.image.create(imageNodeAttrs);\n\n                tr.replaceWith(pos, pos + node.nodeSize, errorPlaceholderNode);\n\n                return false;\n            }\n        });\n\n        dispatch(tr);\n    };\n\nfunction createImageNodeAttrs(\n    src: string,\n    fileInfo: FileInfo,\n    state: EditorImageState,\n): ImageNodeAttrs {\n    return {\n        src: src,\n        alt: fileInfo.filename,\n        fileInfoId: fileInfo.id,\n        state: state,\n    };\n}\n\n/**\n * Check if a given ProseMirror node or fragment contains any image nodes.\n * @param node - The ProseMirror node or fragment to check.\n * @returns A boolean indicating whether the node contains any image nodes.\n */\nconst isImageNode = (node: Node | Fragment): boolean => {\n    if (node instanceof Node) {\n        if (node.type.name === 'image') {\n            return true;\n        }\n\n        let found = false;\n        node.content.forEach((child) => {\n            if (isImageNode(child)) {\n                found = true;\n            }\n        });\n\n        return found;\n    } else if (node instanceof Fragment) {\n        let found = false;\n        node.forEach((child) => {\n            if (isImageNode(child)) {\n                found = true;\n            }\n        });\n\n        return found;\n    }\n\n    return false;\n};\n\n/**\n * Filter out image nodes from a ProseMirror fragment.\n * @param fragment - The ProseMirror fragment to filter.\n * @returns A new fragment with image nodes removed.\n */\nconst filterImageNodes = (fragment: Fragment): Fragment => {\n    const filteredChildren: Node[] = [];\n\n    fragment.forEach((child) => {\n        if (!isImageNode(child)) {\n            if (child.content.size > 0) {\n                const filteredContent = filterImageNodes(child.content);\n                const newNode = child.copy(filteredContent);\n                filteredChildren.push(newNode);\n            } else {\n                filteredChildren.push(child);\n            }\n        }\n    });\n\n    return Fragment.fromArray(filteredChildren);\n};\n\n/**\n * Process a paste event and trigger an imagePasted event if an image file is pasted.\n * If an HTML image element is pasted, this image is filtered out from the slice content.\n *\n * @param view - The ProseMirror editor view.\n * @param event - The paste event.\n * @returns A boolean; True if an image file was pasted to prevent default paste behavior, otherwise false.\n */\nconst processPasteEvent = (\n    view: EditorView,\n    event: ClipboardEvent,\n    slice: Slice,\n): boolean => {\n    const clipboardData = event.clipboardData;\n    if (!clipboardData) {\n        return false;\n    }\n\n    const files = Array.from(clipboardData.files || []);\n    for (const file of files) {\n        if (file.type.startsWith('image/')) {\n            const reader = new FileReader();\n            reader.onloadend = () => {\n                view.dom.dispatchEvent(\n                    new CustomEvent('imagePasted', {\n                        detail: imageInserterFactory(\n                            view,\n                            reader.result as string,\n                            createFileInfo(file),\n                        ),\n                    }),\n                );\n            };\n\n            reader.readAsDataURL(file);\n        }\n    }\n\n    const filteredSlice = new Slice(\n        filterImageNodes(slice.content),\n        slice.openStart,\n        slice.openEnd,\n    );\n\n    if (filteredSlice.content.childCount < slice.content.childCount) {\n        const { state, dispatch } = view;\n        const tr = state.tr.replaceSelection(filteredSlice);\n        dispatch(tr);\n\n        return true;\n    }\n\n    return files.length > 0;\n};\n"]}

package/dist/collection/components/text-editor/prosemirror-adapter/plugins/image/node.js

@@ -1,4 +1,3 @@
-import { ImageState } from '../../../text-editor.types';
 import translate from '../../../../../global/translations';
 export const imageCache = new Map();
 export function getImageNode(language) {
@@ -24,39 +23,38 @@ export function hasImageNode(node) {
   return false;
 }
 function createImageNodeMarkdownSerializer(language) {
-  return (state, node) => {
-    if (node.attrs.state === ImageState.FAILED) {
-      const text = translate.get('editor-image-view.failed', language, {
-        filename: node.attrs.alt || 'file',
-      });
-      state.write(`<span>${text}</span>`);
+  return (markdownSerializerState, node) => {
+    const { state, alt, src, width, maxWidth } = node.attrs;
+    if (!isEditorImageState(state)) {
       return;
     }
-    else if (node.attrs.state === ImageState.LOADING) {
-      const text = translate.get('editor-image-view.loading', language, {
-        filename: node.attrs.alt || 'file',
-      });
-      state.write(`<span>${text}</span>`);
+    if (state === 'success') {
+      const imageHTML = getImageHTML(src, alt, width, maxWidth);
+      markdownSerializerState.write(imageHTML);
       return;
     }
-    let imageHTML = `<img src="${node.attrs.src}"`;
-    if (node.attrs.alt) {
-      imageHTML += ` alt="${node.attrs.alt}"`;
-    }
-    const style = [];
-    if (node.attrs.width) {
-      style.push(`width: ${node.attrs.width};`);
-    }
-    if (node.attrs.maxWidth) {
-      style.push(`max-width: ${node.attrs.maxWidth};`);
-    }
-    if (style.length > 0) {
-      imageHTML += ` style="${style.join(' ')}"`;
-    }
-    imageHTML += ' />';
-    state.write(imageHTML);
+    const statusHTML = getStatusHTML(state, alt, language);
+    markdownSerializerState.write(statusHTML);
   };
 }
+function getStatusHTML(state, alt, language) {
+  const key = state === 'failed' ? 'failed' : 'loading';
+  const text = translate.get(`editor-image-view.${key}`, language, {
+    filename: alt || 'file',
+  });
+  return `<span>${text}</span>`;
+}
+function getImageHTML(src, alt, width, maxWidth) {
+  const style = [];
+  if (width) {
+    style.push(`width: ${width};`);
+  }
+  if (maxWidth) {
+    style.push(`max-width: ${maxWidth};`);
+  }
+  const styleAttribute = style.length > 0 ? ` style="${style.join(' ')}"` : '';
+  return `<img src="${src}" alt="${alt}"${styleAttribute} />`;
+}
 function createImageNodeSpec(language) {
   return {
     group: 'inline',
@@ -67,24 +65,16 @@ function createImageNodeSpec(language) {
       fileInfoId: { default: '' },
       width: { default: '' },
       maxWidth: { default: '100%' },
-      state: { default: '' },
+      state: { default: 'success' },
     },
     toDOM: (node) => {
-      if (node.attrs.state === ImageState.FAILED) {
-        return createStatusSpan('failed', node, language);
-      }
-      else if (node.attrs.state === ImageState.LOADING) {
-        return createStatusSpan('loading', node, language);
-      }
-      let img = imageCache.get(node.attrs.fileInfoId);
-      if (img) {
-        updateImageElement(img, node);
+      if (!isEditorImageState(node.attrs.state)) {
+        return;
       }
-      else {
-        img = createImageElement(node);
-        imageCache.set(node.attrs.fileInfoId, img);
+      if (node.attrs.state === 'success') {
+        return getOrCreateImageElement(node.attrs.fileInfoId, node);
       }
-      return img;
+      return createStatusSpanForState(node.attrs.state, node, language);
     },
     parseDOM: [
       {
@@ -95,7 +85,7 @@ function createImageNodeSpec(language) {
             alt: dom.getAttribute('alt') || 'file',
             width: dom.style.width || '',
             maxWidth: '100%',
-            state: ImageState.SUCCESS,
+            state: 'success',
             fileInfoId: crypto.randomUUID(),
           };
         },
@@ -103,6 +93,24 @@ function createImageNodeSpec(language) {
     ],
   };
 }
+function isEditorImageState(state) {
+  return state === 'loading' || state === 'failed' || state === 'success';
+}
+function getOrCreateImageElement(fileInfoId, node) {
+  let img = imageCache.get(fileInfoId);
+  if (img) {
+    updateImageElement(img, node);
+  }
+  else {
+    img = createImageElement(node);
+    imageCache.set(fileInfoId, img);
+  }
+  return img;
+}
+function createStatusSpanForState(state, node, language) {
+  const statusKey = state === 'failed' ? 'failed' : 'loading';
+  return createStatusSpan(statusKey, node, language);
+}
 function createStatusSpan(key, node, language) {
   const text = translate.get(`editor-image-view.${key}`, language, {
     filename: node.attrs.alt || 'file',

package/dist/collection/components/text-editor/prosemirror-adapter/plugins/image/node.js.map

@@ -1 +1 @@
-{"version":3,"file":"node.js","sourceRoot":"","sources":["../../../../../../src/components/text-editor/prosemirror-adapter/plugins/image/node.ts"],"names":[],"mappings":"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","sourcesContent":["import { NodeSpec, Node, Attrs, DOMOutputSpec } from 'prosemirror-model';\nimport { ImageState } from '../../../text-editor.types';\nimport { MarkdownSerializerState } from 'prosemirror-markdown';\nimport { Languages } from '../../../../date-picker/date.types';\nimport translate from '../../../../../global/translations';\n\nexport const imageCache = new Map<string, HTMLImageElement>();\n\ntype MarkdownSerializerFunction = (\n    state: MarkdownSerializerState,\n    node: Node,\n) => void;\n\nexport function getImageNode(language: Languages): Record<string, NodeSpec> {\n    return { image: createImageNodeSpec(language) };\n}\n\nexport function getImageNodeMarkdownSerializer(\n    language: Languages,\n): Record<string, MarkdownSerializerFunction> {\n    return { image: createImageNodeMarkdownSerializer(language) };\n}\n\n/**\n * Recursively checks if a ProseMirror node or\n * any of its child nodes is an image node.\n */\nexport function hasImageNode(node: Node): boolean {\n    if (node.type.name === 'image') {\n        return true;\n    }\n\n    for (let i = 0; i < node.childCount; i++) {\n        const childNode = node.child(i);\n        if (hasImageNode(childNode)) {\n            return true;\n        }\n    }\n\n    return false;\n}\n\nfunction createImageNodeMarkdownSerializer(\n    language: Languages,\n): MarkdownSerializerFunction {\n    return (state: MarkdownSerializerState, node: Node) => {\n        if (node.attrs.state === ImageState.FAILED) {\n            const text = translate.get('editor-image-view.failed', language, {\n                filename: node.attrs.alt || 'file',\n            });\n            state.write(`<span>${text}</span>`);\n\n            return;\n        } else if (node.attrs.state === ImageState.LOADING) {\n            const text = translate.get('editor-image-view.loading', language, {\n                filename: node.attrs.alt || 'file',\n            });\n            state.write(`<span>${text}</span>`);\n\n            return;\n        }\n\n        let imageHTML = `<img src=\"${node.attrs.src}\"`;\n\n        if (node.attrs.alt) {\n            imageHTML += ` alt=\"${node.attrs.alt}\"`;\n        }\n\n        const style = [];\n\n        if (node.attrs.width) {\n            style.push(`width: ${node.attrs.width};`);\n        }\n\n        if (node.attrs.maxWidth) {\n            style.push(`max-width: ${node.attrs.maxWidth};`);\n        }\n\n        if (style.length > 0) {\n            imageHTML += ` style=\"${style.join(' ')}\"`;\n        }\n\n        imageHTML += ' />';\n\n        state.write(imageHTML);\n    };\n}\n\nfunction createImageNodeSpec(language: Languages): NodeSpec {\n    return {\n        group: 'inline',\n        inline: true,\n        attrs: {\n            src: { default: '' },\n            alt: { default: '' },\n            fileInfoId: { default: '' },\n            width: { default: '' },\n            maxWidth: { default: '100%' },\n            state: { default: '' },\n        },\n        toDOM: (node): DOMOutputSpec => {\n            if (node.attrs.state === ImageState.FAILED) {\n                return createStatusSpan('failed', node, language);\n            } else if (node.attrs.state === ImageState.LOADING) {\n                return createStatusSpan('loading', node, language);\n            }\n\n            let img = imageCache.get(node.attrs.fileInfoId);\n            if (img) {\n                updateImageElement(img, node);\n            } else {\n                img = createImageElement(node);\n                imageCache.set(node.attrs.fileInfoId, img);\n            }\n\n            return img;\n        },\n        parseDOM: [\n            {\n                tag: 'img',\n                getAttrs: (dom: HTMLElement): Attrs => {\n                    return {\n                        src: dom.getAttribute('src') || '',\n                        alt: dom.getAttribute('alt') || 'file',\n                        width: dom.style.width || '',\n                        maxWidth: '100%',\n                        state: ImageState.SUCCESS,\n                        fileInfoId: crypto.randomUUID(),\n                    };\n                },\n            },\n        ],\n    };\n}\n\nfunction createStatusSpan(\n    key: string,\n    node: Node,\n    language: Languages,\n): HTMLSpanElement {\n    const text = translate.get(`editor-image-view.${key}`, language, {\n        filename: node.attrs.alt || 'file',\n    });\n    const span = document.createElement('span');\n    span.textContent = text;\n\n    return span;\n}\n\nfunction updateImageElement(\n    img: HTMLImageElement,\n    node: Node,\n): HTMLImageElement {\n    img.alt = node.attrs.alt;\n    img.style.maxWidth = node.attrs.maxWidth;\n    img.style.width = node.attrs.width;\n\n    return img;\n}\n\nfunction createImageElement(node: Node): HTMLImageElement {\n    const img = document.createElement('img');\n    img.src = node.attrs.src;\n    img.alt = node.attrs.alt;\n    img.style.maxWidth = node.attrs.maxWidth;\n    img.style.width = node.attrs.width;\n\n    return img;\n}\n"]}
+{"version":3,"file":"node.js","sourceRoot":"","sources":["../../../../../../src/components/text-editor/prosemirror-adapter/plugins/image/node.ts"],"names":[],"mappings":"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","sourcesContent":["import { NodeSpec, Node, DOMOutputSpec } from 'prosemirror-model';\nimport { EditorImageState } from '../../../text-editor.types';\nimport { MarkdownSerializerState } from 'prosemirror-markdown';\nimport { Languages } from '../../../../date-picker/date.types';\nimport translate from '../../../../../global/translations';\n\nexport const imageCache = new Map<string, HTMLImageElement>();\n\ntype MarkdownSerializerFunction = (\n    state: MarkdownSerializerState,\n    node: Node,\n) => void;\n\nexport function getImageNode(language: Languages): Record<string, NodeSpec> {\n    return { image: createImageNodeSpec(language) };\n}\n\nexport function getImageNodeMarkdownSerializer(\n    language: Languages,\n): Record<string, MarkdownSerializerFunction> {\n    return { image: createImageNodeMarkdownSerializer(language) };\n}\n\n/**\n * Recursively checks if a ProseMirror node or\n * any of its child nodes is an image node.\n */\nexport function hasImageNode(node: Node): boolean {\n    if (node.type.name === 'image') {\n        return true;\n    }\n\n    for (let i = 0; i < node.childCount; i++) {\n        const childNode = node.child(i);\n        if (hasImageNode(childNode)) {\n            return true;\n        }\n    }\n\n    return false;\n}\n\nfunction createImageNodeMarkdownSerializer(\n    language: Languages,\n): MarkdownSerializerFunction {\n    return (markdownSerializerState: MarkdownSerializerState, node: Node) => {\n        const { state, alt, src, width, maxWidth } = node.attrs;\n\n        if (!isEditorImageState(state)) {\n            return;\n        }\n\n        if (state === 'success') {\n            const imageHTML = getImageHTML(src, alt, width, maxWidth);\n            markdownSerializerState.write(imageHTML);\n\n            return;\n        }\n\n        const statusHTML = getStatusHTML(state, alt, language);\n        markdownSerializerState.write(statusHTML);\n    };\n}\n\nfunction getStatusHTML(\n    state: EditorImageState,\n    alt: string,\n    language: Languages,\n): string {\n    const key = state === 'failed' ? 'failed' : 'loading';\n    const text = translate.get(`editor-image-view.${key}`, language, {\n        filename: alt || 'file',\n    });\n\n    return `<span>${text}</span>`;\n}\n\nfunction getImageHTML(\n    src: string,\n    alt: string,\n    width: string,\n    maxWidth: string,\n): string {\n    const style = [];\n\n    if (width) {\n        style.push(`width: ${width};`);\n    }\n\n    if (maxWidth) {\n        style.push(`max-width: ${maxWidth};`);\n    }\n\n    const styleAttribute =\n        style.length > 0 ? ` style=\"${style.join(' ')}\"` : '';\n\n    return `<img src=\"${src}\" alt=\"${alt}\"${styleAttribute} />`;\n}\n\nexport interface ImageNodeAttrs {\n    src: string;\n    alt: string;\n    state: EditorImageState;\n    fileInfoId: string | number;\n    width?: string;\n    maxWidth?: string;\n}\n\nfunction createImageNodeSpec(language: Languages): NodeSpec {\n    return {\n        group: 'inline',\n        inline: true,\n        attrs: {\n            src: { default: '' },\n            alt: { default: '' },\n            fileInfoId: { default: '' },\n            width: { default: '' },\n            maxWidth: { default: '100%' },\n            state: { default: 'success' },\n        },\n        toDOM: (node): DOMOutputSpec => {\n            if (!isEditorImageState(node.attrs.state)) {\n                return;\n            }\n\n            if (node.attrs.state === 'success') {\n                return getOrCreateImageElement(node.attrs.fileInfoId, node);\n            }\n\n            return createStatusSpanForState(node.attrs.state, node, language);\n        },\n        parseDOM: [\n            {\n                tag: 'img',\n                getAttrs: (dom: HTMLElement): ImageNodeAttrs => {\n                    return {\n                        src: dom.getAttribute('src') || '',\n                        alt: dom.getAttribute('alt') || 'file',\n                        width: dom.style.width || '',\n                        maxWidth: '100%',\n                        state: 'success',\n                        fileInfoId: crypto.randomUUID(),\n                    };\n                },\n            },\n        ],\n    };\n}\n\nfunction isEditorImageState(state: unknown): state is EditorImageState {\n    return state === 'loading' || state === 'failed' || state === 'success';\n}\n\nfunction getOrCreateImageElement(\n    fileInfoId: string,\n    node: Node,\n): HTMLImageElement {\n    let img = imageCache.get(fileInfoId);\n\n    if (img) {\n        updateImageElement(img, node);\n    } else {\n        img = createImageElement(node);\n        imageCache.set(fileInfoId, img);\n    }\n\n    return img;\n}\n\nfunction createStatusSpanForState(\n    state: EditorImageState,\n    node: Node,\n    language: Languages,\n): HTMLSpanElement {\n    const statusKey = state === 'failed' ? 'failed' : 'loading';\n\n    return createStatusSpan(statusKey, node, language);\n}\n\nfunction createStatusSpan(\n    key: string,\n    node: Node,\n    language: Languages,\n): HTMLSpanElement {\n    const text = translate.get(`editor-image-view.${key}`, language, {\n        filename: node.attrs.alt || 'file',\n    });\n    const span = document.createElement('span');\n    span.textContent = text;\n\n    return span;\n}\n\nfunction updateImageElement(\n    img: HTMLImageElement,\n    node: Node,\n): HTMLImageElement {\n    img.alt = node.attrs.alt;\n    img.style.maxWidth = node.attrs.maxWidth;\n    img.style.width = node.attrs.width;\n\n    return img;\n}\n\nfunction createImageElement(node: Node): HTMLImageElement {\n    const img = document.createElement('img');\n    img.src = node.attrs.src;\n    img.alt = node.attrs.alt;\n    img.style.maxWidth = node.attrs.maxWidth;\n    img.style.width = node.attrs.width;\n\n    return img;\n}\n"]}

package/dist/collection/components/text-editor/prosemirror-adapter/plugins/image/view.js

@@ -1,5 +1,4 @@
 import { Plugin } from 'prosemirror-state';
-import { ImageState } from '../../../text-editor.types';
 import translate from '../../../../../global/translations';
 const MIN_WIDTH = 10;
 export const createImageViewPlugin = (language) => {
@@ -92,21 +91,20 @@ class ImageView {
       });
     };
     this.transitionBetweenStates = () => {
+      var _a;
       this.cleanUpPreviousState();
       this.dom.className = `image-wrapper state-${this.node.attrs.state}`;
-      if (this.node.attrs.state === ImageState.LOADING) {
-        this.createLoadingState();
-      }
-      else if (this.node.attrs.state === ImageState.SUCCESS) {
-        this.createSuccessState();
-      }
-      else if (this.node.attrs.state === ImageState.FAILED) {
-        this.createFailedState();
-      }
+      const stateHandlers = {
+        loading: this.createLoadingState,
+        success: this.createSuccessState,
+        failed: this.createFailedState,
+      };
+      const state = this.node.attrs.state;
+      (_a = stateHandlers[state]) === null || _a === void 0 ? void 0 : _a.call(stateHandlers);
     };
     this.transitioningBetweenSuccessStates = (newNode) => {
-      return (this.node.attrs.state === ImageState.SUCCESS &&
-        newNode.attrs.state === ImageState.SUCCESS);
+      return (this.node.attrs.state === 'success' &&
+        newNode.attrs.state === 'success');
     };
     this.node = node;
     this.view = view;

package/dist/collection/components/text-editor/prosemirror-adapter/plugins/image/view.js.map

@@ -1 +1 @@
-{"version":3,"file":"view.js","sourceRoot":"","sources":["../../../../../../src/components/text-editor/prosemirror-adapter/plugins/image/view.ts"],"names":[],"mappings":"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","sourcesContent":["import { EditorView, NodeView } from 'prosemirror-view';\nimport { Node } from 'prosemirror-model';\nimport { Plugin } from 'prosemirror-state';\nimport { ImageState } from '../../../text-editor.types';\nimport translate from '../../../../../global/translations';\nimport { Languages } from '../../../../date-picker/date.types';\n\nconst MIN_WIDTH = 10;\n\nexport const createImageViewPlugin = (language: Languages) => {\n    return new Plugin({\n        props: {\n            nodeViews: {\n                image: (node, view, getPos) => {\n                    return new ImageView(node, view, getPos, language);\n                },\n            },\n        },\n    });\n};\n\nclass ImageView implements NodeView {\n    node: Node;\n    view: EditorView;\n    getPos: () => number;\n    dom: HTMLDivElement;\n    img: HTMLImageElement;\n    language: Languages;\n\n    public constructor(\n        node: Node,\n        view: EditorView,\n        getPos: () => number,\n        language: Languages,\n    ) {\n        this.node = node;\n        this.view = view;\n        this.getPos = getPos;\n        this.language = language;\n\n        this.dom = document.createElement('div');\n        this.dom.className = `image-wrapper state-${node.attrs.state}`;\n\n        this.img = document.createElement('img');\n        this.img.src = node.attrs.src;\n        this.img.alt = node.attrs.alt;\n        this.img.style.maxWidth = node.attrs.maxWidth;\n        this.img.style.width = node.attrs.width;\n\n        this.dom.appendChild(this.img);\n\n        this.transitionBetweenStates();\n    }\n\n    private createResizeHandle = (position: 'bottom-right' | 'top-left') => {\n        const handle = document.createElement('div');\n        handle.className = `resize-handle ${position}`;\n        handle.setAttribute('role', 'slider');\n        handle.setAttribute(\n            'aria-label',\n            translate.get('editor-image-view.resize-handle', this.language),\n        );\n        handle.setAttribute('tabindex', '0');\n        handle.setAttribute('aria-valuemin', MIN_WIDTH.toString());\n        handle.setAttribute('aria-valuenow', this.img.offsetWidth.toString());\n        handle.setAttribute('aria-valuetext', `${this.img.offsetWidth} pixels`);\n        handle.setAttribute('aria-grabbed', 'false');\n\n        handle.addEventListener('pointerdown', (e: PointerEvent) => {\n            handle.setAttribute('aria-grabbed', 'true');\n            this.onResizeStart(e, position);\n        });\n\n        return handle;\n    };\n\n    private onResizeStart = (\n        event: PointerEvent,\n        position: 'bottom-right' | 'top-left',\n    ) => {\n        event.preventDefault();\n        const handle = event.target as HTMLElement;\n\n        const startX = event.clientX;\n        const startWidth = this.img.offsetWidth;\n\n        const onPointerMove = (e: PointerEvent) => {\n            const delta = e.clientX - startX;\n            const widthDelta = position === 'top-left' ? -delta : delta;\n            const newWidth = Math.max(MIN_WIDTH, startWidth + widthDelta);\n\n            this.img.style.width = `${newWidth}px`;\n\n            const handles = this.dom.querySelectorAll('.resize-handle');\n            handles.forEach((resizeHandle) => {\n                resizeHandle.setAttribute('aria-valuenow', newWidth.toString());\n                resizeHandle.setAttribute(\n                    'aria-valuetext',\n                    `${newWidth} pixels`,\n                );\n            });\n        };\n\n        const onPointerUp = () => {\n            window.removeEventListener('pointermove', onPointerMove);\n            window.removeEventListener('pointerup', onPointerUp);\n            handle.setAttribute('aria-grabbed', 'false');\n\n            this.view.dispatch(\n                this.view.state.tr.setNodeMarkup(this.getPos(), undefined, {\n                    ...this.node.attrs,\n                    width: this.img.style.width,\n                    height: this.node.attrs.height,\n                }),\n            );\n        };\n\n        window.addEventListener('pointermove', onPointerMove);\n        window.addEventListener('pointerup', onPointerUp);\n    };\n\n    private createLoadingState = () => {\n        this.dom.setAttribute('aria-live', 'polite');\n        this.dom.setAttribute('aria-busy', 'true');\n        this.dom.setAttribute(\n            'aria-label',\n            translate.get('editor-image-view.loading', this.language, {\n                filename: this.node.attrs.alt || 'file',\n            }),\n        );\n\n        const spinnerElement = document.createElement('limel-linear-progress');\n        spinnerElement.setAttribute('indeterminate', 'true');\n        this.dom.appendChild(spinnerElement);\n    };\n\n    private createSuccessState = () => {\n        this.dom.setAttribute('aria-live', 'polite');\n        this.dom.setAttribute('aria-busy', 'false');\n        this.dom.setAttribute(\n            'aria-label',\n            translate.get('editor-image-view.success', this.language, {\n                filename: this.node.attrs.alt || 'file',\n            }),\n        );\n\n        const bottomRightHandle = this.createResizeHandle('bottom-right');\n        const topLeftHandle = this.createResizeHandle('top-left');\n\n        this.dom.appendChild(bottomRightHandle);\n        this.dom.appendChild(topLeftHandle);\n    };\n\n    private createFailedState = () => {\n        this.dom.setAttribute('aria-live', 'assertive');\n        this.dom.setAttribute('aria-busy', 'false');\n        this.dom.setAttribute(\n            'aria-label',\n            translate.get('editor-image-view.failed', this.language, {\n                filename: this.node.attrs.alt || 'file',\n            }),\n        );\n    };\n\n    private cleanUpPreviousState = () => {\n        Array.from(this.dom.childNodes).forEach((child) => {\n            if (!(child instanceof HTMLImageElement)) {\n                child.remove();\n            }\n        });\n    };\n\n    private transitionBetweenStates = () => {\n        this.cleanUpPreviousState();\n        this.dom.className = `image-wrapper state-${this.node.attrs.state}`;\n\n        if (this.node.attrs.state === ImageState.LOADING) {\n            this.createLoadingState();\n        } else if (this.node.attrs.state === ImageState.SUCCESS) {\n            this.createSuccessState();\n        } else if (this.node.attrs.state === ImageState.FAILED) {\n            this.createFailedState();\n        }\n    };\n\n    private transitioningBetweenSuccessStates = (newNode: Node): boolean => {\n        return (\n            this.node.attrs.state === ImageState.SUCCESS &&\n            newNode.attrs.state === ImageState.SUCCESS\n        );\n    };\n\n    // Ensure that the existing NodeView is reused rather than recreated.\n    // Recreating the NodeView will cause flickering between states.\n    public update(node: Node): boolean {\n        if (!this.transitioningBetweenSuccessStates(node)) {\n            this.img.src = node.attrs.src;\n            this.img.alt = node.attrs.alt;\n            this.img.style.maxWidth = node.attrs.maxWidth;\n            this.img.style.width = node.attrs.width;\n        }\n\n        this.node = node;\n        this.transitionBetweenStates();\n\n        return true;\n    }\n}\n"]}
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../../../../../../src/components/text-editor/prosemirror-adapter/plugins/image/view.ts"],"names":[],"mappings":"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","sourcesContent":["import { EditorView, NodeView } from 'prosemirror-view';\nimport { Node } from 'prosemirror-model';\nimport { Plugin } from 'prosemirror-state';\nimport { EditorImageState } from '../../../text-editor.types';\nimport translate from '../../../../../global/translations';\nimport { Languages } from '../../../../date-picker/date.types';\n\nconst MIN_WIDTH = 10;\n\nexport const createImageViewPlugin = (language: Languages) => {\n    return new Plugin({\n        props: {\n            nodeViews: {\n                image: (node, view, getPos) => {\n                    return new ImageView(node, view, getPos, language);\n                },\n            },\n        },\n    });\n};\n\nclass ImageView implements NodeView {\n    node: Node;\n    view: EditorView;\n    getPos: () => number;\n    dom: HTMLDivElement;\n    img: HTMLImageElement;\n    language: Languages;\n\n    public constructor(\n        node: Node,\n        view: EditorView,\n        getPos: () => number,\n        language: Languages,\n    ) {\n        this.node = node;\n        this.view = view;\n        this.getPos = getPos;\n        this.language = language;\n\n        this.dom = document.createElement('div');\n        this.dom.className = `image-wrapper state-${node.attrs.state}`;\n\n        this.img = document.createElement('img');\n        this.img.src = node.attrs.src;\n        this.img.alt = node.attrs.alt;\n        this.img.style.maxWidth = node.attrs.maxWidth;\n        this.img.style.width = node.attrs.width;\n\n        this.dom.appendChild(this.img);\n\n        this.transitionBetweenStates();\n    }\n\n    private createResizeHandle = (position: 'bottom-right' | 'top-left') => {\n        const handle = document.createElement('div');\n        handle.className = `resize-handle ${position}`;\n        handle.setAttribute('role', 'slider');\n        handle.setAttribute(\n            'aria-label',\n            translate.get('editor-image-view.resize-handle', this.language),\n        );\n        handle.setAttribute('tabindex', '0');\n        handle.setAttribute('aria-valuemin', MIN_WIDTH.toString());\n        handle.setAttribute('aria-valuenow', this.img.offsetWidth.toString());\n        handle.setAttribute('aria-valuetext', `${this.img.offsetWidth} pixels`);\n        handle.setAttribute('aria-grabbed', 'false');\n\n        handle.addEventListener('pointerdown', (e: PointerEvent) => {\n            handle.setAttribute('aria-grabbed', 'true');\n            this.onResizeStart(e, position);\n        });\n\n        return handle;\n    };\n\n    private onResizeStart = (\n        event: PointerEvent,\n        position: 'bottom-right' | 'top-left',\n    ) => {\n        event.preventDefault();\n        const handle = event.target as HTMLElement;\n\n        const startX = event.clientX;\n        const startWidth = this.img.offsetWidth;\n\n        const onPointerMove = (e: PointerEvent) => {\n            const delta = e.clientX - startX;\n            const widthDelta = position === 'top-left' ? -delta : delta;\n            const newWidth = Math.max(MIN_WIDTH, startWidth + widthDelta);\n\n            this.img.style.width = `${newWidth}px`;\n\n            const handles = this.dom.querySelectorAll('.resize-handle');\n            handles.forEach((resizeHandle) => {\n                resizeHandle.setAttribute('aria-valuenow', newWidth.toString());\n                resizeHandle.setAttribute(\n                    'aria-valuetext',\n                    `${newWidth} pixels`,\n                );\n            });\n        };\n\n        const onPointerUp = () => {\n            window.removeEventListener('pointermove', onPointerMove);\n            window.removeEventListener('pointerup', onPointerUp);\n            handle.setAttribute('aria-grabbed', 'false');\n\n            this.view.dispatch(\n                this.view.state.tr.setNodeMarkup(this.getPos(), undefined, {\n                    ...this.node.attrs,\n                    width: this.img.style.width,\n                    height: this.node.attrs.height,\n                }),\n            );\n        };\n\n        window.addEventListener('pointermove', onPointerMove);\n        window.addEventListener('pointerup', onPointerUp);\n    };\n\n    private createLoadingState = () => {\n        this.dom.setAttribute('aria-live', 'polite');\n        this.dom.setAttribute('aria-busy', 'true');\n        this.dom.setAttribute(\n            'aria-label',\n            translate.get('editor-image-view.loading', this.language, {\n                filename: this.node.attrs.alt || 'file',\n            }),\n        );\n\n        const spinnerElement = document.createElement('limel-linear-progress');\n        spinnerElement.setAttribute('indeterminate', 'true');\n        this.dom.appendChild(spinnerElement);\n    };\n\n    private createSuccessState = () => {\n        this.dom.setAttribute('aria-live', 'polite');\n        this.dom.setAttribute('aria-busy', 'false');\n        this.dom.setAttribute(\n            'aria-label',\n            translate.get('editor-image-view.success', this.language, {\n                filename: this.node.attrs.alt || 'file',\n            }),\n        );\n\n        const bottomRightHandle = this.createResizeHandle('bottom-right');\n        const topLeftHandle = this.createResizeHandle('top-left');\n\n        this.dom.appendChild(bottomRightHandle);\n        this.dom.appendChild(topLeftHandle);\n    };\n\n    private createFailedState = () => {\n        this.dom.setAttribute('aria-live', 'assertive');\n        this.dom.setAttribute('aria-busy', 'false');\n        this.dom.setAttribute(\n            'aria-label',\n            translate.get('editor-image-view.failed', this.language, {\n                filename: this.node.attrs.alt || 'file',\n            }),\n        );\n    };\n\n    private cleanUpPreviousState = () => {\n        Array.from(this.dom.childNodes).forEach((child) => {\n            if (!(child instanceof HTMLImageElement)) {\n                child.remove();\n            }\n        });\n    };\n\n    private transitionBetweenStates = () => {\n        this.cleanUpPreviousState();\n        this.dom.className = `image-wrapper state-${this.node.attrs.state}`;\n\n        const stateHandlers: Record<EditorImageState, () => void> = {\n            loading: this.createLoadingState,\n            success: this.createSuccessState,\n            failed: this.createFailedState,\n        };\n\n        const state: EditorImageState = this.node.attrs.state;\n        stateHandlers[state]?.();\n    };\n\n    private transitioningBetweenSuccessStates = (newNode: Node): boolean => {\n        return (\n            this.node.attrs.state === 'success' &&\n            newNode.attrs.state === 'success'\n        );\n    };\n\n    // Ensure that the existing NodeView is reused rather than recreated.\n    // Recreating the NodeView will cause flickering between states.\n    public update(node: Node): boolean {\n        if (!this.transitioningBetweenSuccessStates(node)) {\n            this.img.src = node.attrs.src;\n            this.img.alt = node.attrs.alt;\n            this.img.style.maxWidth = node.attrs.maxWidth;\n            this.img.style.width = node.attrs.width;\n        }\n\n        this.node = node;\n        this.transitionBetweenStates();\n\n        return true;\n    }\n}\n"]}