@vonage/vivid 4.27.0 → 4.29.0

package/shared/definition44.cjs

@@ -13,11 +13,13 @@ const option = require('./option.cjs');
 const repeat = require('./repeat.cjs');
 const classNames = require('./class-names.cjs');
 const localized = require('./localized.cjs');
+const definition$7 = require('./definition28.cjs');
+const when = require('./when.cjs');
 
-const styles$1 = "@charset \"UTF-8\";.ProseMirror li{position:relative}.ProseMirror-hideselection *::selection{background:transparent}.ProseMirror-hideselection *::-moz-selection{background:transparent}.ProseMirror-hideselection{caret-color:transparent}.ProseMirror [draggable][contenteditable=false]{user-select:text}.ProseMirror-selectednode{outline:2px solid #8cf}li.ProseMirror-selectednode{outline:none}li.ProseMirror-selectednode:after{content:\"\";position:absolute;inset:-2px -2px -2px -32px;border:2px solid #8cf;pointer-events:none}img.ProseMirror-separator{display:inline!important;border:none!important;margin:0!important}.ProseMirror-textblock-dropdown{min-width:3em}.ProseMirror-menu{margin:0 -4px;line-height:1}.ProseMirror-tooltip .ProseMirror-menu{width:-webkit-fit-content;width:fit-content;white-space:pre}.ProseMirror-menuitem{margin-right:3px;display:inline-block}.ProseMirror-menuseparator{border-right:1px solid #ddd;margin-right:3px}.ProseMirror-menu-dropdown,.ProseMirror-menu-dropdown-menu{font-size:90%;white-space:nowrap}.ProseMirror-menu-dropdown{vertical-align:1px;cursor:pointer;position:relative;padding-right:15px}.ProseMirror-menu-dropdown-wrap{padding:1px 0 1px 4px;display:inline-block;position:relative}.ProseMirror-menu-dropdown:after{content:\"\";border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid currentColor;opacity:.6;position:absolute;right:4px;top:calc(50% - 2px)}.ProseMirror-menu-dropdown-menu,.ProseMirror-menu-submenu{position:absolute;background:#fff;color:#666;border:1px solid #aaa;padding:2px}.ProseMirror-menu-dropdown-menu{z-index:15;min-width:6em}.ProseMirror-menu-dropdown-item{cursor:pointer;padding:2px 8px 2px 4px}.ProseMirror-menu-dropdown-item:hover{background:#f2f2f2}.ProseMirror-menu-submenu-wrap{position:relative;margin-right:-4px}.ProseMirror-menu-submenu-label:after{content:\"\";border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:4px solid currentColor;opacity:.6;position:absolute;right:4px;top:calc(50% - 4px)}.ProseMirror-menu-submenu{display:none;min-width:4em;left:100%;top:-3px}.ProseMirror-menu-active{background:#eee;border-radius:4px}.ProseMirror-menu-disabled{opacity:.3}.ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu,.ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu{display:block}.ProseMirror-menubar{border-top-left-radius:inherit;border-top-right-radius:inherit;position:relative;min-height:1em;color:#666;padding:1px 6px;top:0;left:0;right:0;border-bottom:1px solid silver;background:#fff;z-index:10;-moz-box-sizing:border-box;box-sizing:border-box;overflow:visible}.ProseMirror-icon{display:inline-block;line-height:.8;vertical-align:-2px;padding:2px 8px;cursor:pointer}.ProseMirror-menu-disabled.ProseMirror-icon{cursor:default}.ProseMirror-icon svg{fill:currentColor;height:1em}.ProseMirror-icon span{vertical-align:text-top}.ProseMirror-gapcursor{display:none;pointer-events:none;position:absolute}.ProseMirror-gapcursor:after{content:\"\";display:block;position:absolute;top:-2px;width:20px;border-top:1px solid black;animation:ProseMirror-cursor-blink 1.1s steps(2,start) infinite}@keyframes ProseMirror-cursor-blink{to{visibility:hidden}}.ProseMirror-focused .ProseMirror-gapcursor{display:block}.ProseMirror-example-setup-style hr{padding:2px 10px;border:none;margin:1em 0}.ProseMirror-example-setup-style hr:after{content:\"\";display:block;height:1px;background-color:silver;line-height:2px}.ProseMirror ul,.ProseMirror ol{padding-left:30px}.ProseMirror blockquote{padding-left:1em;border-left:3px solid #eee;margin-left:0;margin-right:0}.ProseMirror-example-setup-style img{cursor:default}.ProseMirror-prompt{background:#fff;padding:5px 10px 5px 15px;border:1px solid silver;position:fixed;border-radius:3px;z-index:11;box-shadow:-.5px 2px 5px #0003}.ProseMirror-prompt h5{margin:0;font-weight:400;font-size:100%;color:#444}.ProseMirror-prompt input[type=text],.ProseMirror-prompt textarea{background:#eee;border:none;outline:none}.ProseMirror-prompt input[type=text]{padding:0 4px}.ProseMirror-prompt-close{position:absolute;left:2px;top:1px;color:#666;border:none;background:transparent;padding:0}.ProseMirror-prompt-close:after{content:\"✕\";font-size:12px}.ProseMirror-invalid{background:#ffc;border:1px solid #cc7;border-radius:4px;padding:5px 10px;position:absolute;min-width:10em}.ProseMirror-prompt-buttons{margin-top:5px;display:none}.placeholder:before{position:absolute;color:var(--vvd-color-neutral-600);content:attr(data-placeholder);font:var(--vvd-typography-base);pointer-events:none}.editor{box-sizing:border-box;background:var(--vvd-color-canvas);background-clip:padding-box;color:var(--vvd-color-canvas-text)}.ProseMirror{position:relative;box-sizing:border-box;padding:10px 16px;block-size:120px;font:var(--vvd-typography-base);font-feature-settings:\"liga\" 0;font-variant-ligatures:none;line-height:1.2;outline:none;overflow-y:auto;white-space:break-spaces;word-wrap:break-word}.ProseMirror pre{white-space:pre-wrap}.ProseMirror p{margin-bottom:1em}.ProseMirror p:first-child,.ProseMirror h1:first-child,.ProseMirror h2:first-child,.ProseMirror h3:first-child,.ProseMirror h4:first-child,.ProseMirror h5:first-child,.ProseMirror h6:first-child{margin-top:10px}h2{font:var(--vvd-typography-heading-4)}h3{font:var(--vvd-typography-base-extended)}p{font:var(--vvd-typography-base)}:host{display:block}#editor{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}#editor{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}#editor ::-webkit-scrollbar{width:4px}#editor ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}#editor ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}#editor{position:relative;display:flex;flex-direction:column;block-size:100%;overflow-y:auto}[contenteditable=true]{overflow:unset;block-size:unset}#attachments-wrapper{order:1}#attachments-wrapper .divider{padding:0 12px}.hidden{display:none}.drag-overlay{position:absolute;z-index:10;display:none;align-items:center;justify-content:center;border:1px dashed var(--vvd-color-cta-400);border-radius:8px;background:var(--vvd-color-cta-100);font:var(--vvd-typography-base);inset:0;opacity:.8;pointer-events:none;transition:opacity .2s}.drag-over .drag-overlay{display:flex}";
+const styles$2 = "@charset \"UTF-8\";.ProseMirror li{position:relative}.ProseMirror-hideselection *::selection{background:transparent}.ProseMirror-hideselection *::-moz-selection{background:transparent}.ProseMirror-hideselection{caret-color:transparent}.ProseMirror [draggable][contenteditable=false]{user-select:text}.ProseMirror-selectednode{outline:2px solid #8cf}li.ProseMirror-selectednode{outline:none}li.ProseMirror-selectednode:after{content:\"\";position:absolute;inset:-2px -2px -2px -32px;border:2px solid #8cf;pointer-events:none}img.ProseMirror-separator{display:inline!important;border:none!important;margin:0!important}.ProseMirror-textblock-dropdown{min-width:3em}.ProseMirror-menu{margin:0 -4px;line-height:1}.ProseMirror-tooltip .ProseMirror-menu{width:-webkit-fit-content;width:fit-content;white-space:pre}.ProseMirror-menuitem{margin-right:3px;display:inline-block}.ProseMirror-menuseparator{border-right:1px solid #ddd;margin-right:3px}.ProseMirror-menu-dropdown,.ProseMirror-menu-dropdown-menu{font-size:90%;white-space:nowrap}.ProseMirror-menu-dropdown{vertical-align:1px;cursor:pointer;position:relative;padding-right:15px}.ProseMirror-menu-dropdown-wrap{padding:1px 0 1px 4px;display:inline-block;position:relative}.ProseMirror-menu-dropdown:after{content:\"\";border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid currentColor;opacity:.6;position:absolute;right:4px;top:calc(50% - 2px)}.ProseMirror-menu-dropdown-menu,.ProseMirror-menu-submenu{position:absolute;background:#fff;color:#666;border:1px solid #aaa;padding:2px}.ProseMirror-menu-dropdown-menu{z-index:15;min-width:6em}.ProseMirror-menu-dropdown-item{cursor:pointer;padding:2px 8px 2px 4px}.ProseMirror-menu-dropdown-item:hover{background:#f2f2f2}.ProseMirror-menu-submenu-wrap{position:relative;margin-right:-4px}.ProseMirror-menu-submenu-label:after{content:\"\";border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:4px solid currentColor;opacity:.6;position:absolute;right:4px;top:calc(50% - 4px)}.ProseMirror-menu-submenu{display:none;min-width:4em;left:100%;top:-3px}.ProseMirror-menu-active{background:#eee;border-radius:4px}.ProseMirror-menu-disabled{opacity:.3}.ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu,.ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu{display:block}.ProseMirror-menubar{border-top-left-radius:inherit;border-top-right-radius:inherit;position:relative;min-height:1em;color:#666;padding:1px 6px;top:0;left:0;right:0;border-bottom:1px solid silver;background:#fff;z-index:10;-moz-box-sizing:border-box;box-sizing:border-box;overflow:visible}.ProseMirror-icon{display:inline-block;line-height:.8;vertical-align:-2px;padding:2px 8px;cursor:pointer}.ProseMirror-menu-disabled.ProseMirror-icon{cursor:default}.ProseMirror-icon svg{fill:currentColor;height:1em}.ProseMirror-icon span{vertical-align:text-top}.ProseMirror-gapcursor{display:none;pointer-events:none;position:absolute}.ProseMirror-gapcursor:after{content:\"\";display:block;position:absolute;top:-2px;width:20px;border-top:1px solid black;animation:ProseMirror-cursor-blink 1.1s steps(2,start) infinite}@keyframes ProseMirror-cursor-blink{to{visibility:hidden}}.ProseMirror-focused .ProseMirror-gapcursor{display:block}.ProseMirror-example-setup-style hr{padding:2px 10px;border:none;margin:1em 0}.ProseMirror-example-setup-style hr:after{content:\"\";display:block;height:1px;background-color:silver;line-height:2px}.ProseMirror ul,.ProseMirror ol{padding-left:30px}.ProseMirror blockquote{padding-left:1em;border-left:3px solid #eee;margin-left:0;margin-right:0}.ProseMirror-example-setup-style img{cursor:default}.ProseMirror-prompt{background:#fff;padding:5px 10px 5px 15px;border:1px solid silver;position:fixed;border-radius:3px;z-index:11;box-shadow:-.5px 2px 5px #0003}.ProseMirror-prompt h5{margin:0;font-weight:400;font-size:100%;color:#444}.ProseMirror-prompt input[type=text],.ProseMirror-prompt textarea{background:#eee;border:none;outline:none}.ProseMirror-prompt input[type=text]{padding:0 4px}.ProseMirror-prompt-close{position:absolute;left:2px;top:1px;color:#666;border:none;background:transparent;padding:0}.ProseMirror-prompt-close:after{content:\"✕\";font-size:12px}.ProseMirror-invalid{background:#ffc;border:1px solid #cc7;border-radius:4px;padding:5px 10px;position:absolute;min-width:10em}.ProseMirror-prompt-buttons{margin-top:5px;display:none}.placeholder:before{position:absolute;color:var(--vvd-color-neutral-600);content:attr(data-placeholder);font:var(--vvd-typography-base);pointer-events:none}.editor{box-sizing:border-box;background:var(--vvd-color-canvas);background-clip:padding-box;color:var(--vvd-color-canvas-text)}.ProseMirror{position:relative;box-sizing:border-box;padding:10px 16px;block-size:120px;font:var(--vvd-typography-base);font-feature-settings:\"liga\" 0;font-variant-ligatures:none;line-height:1.2;outline:none;overflow-y:auto;white-space:break-spaces;word-wrap:break-word}.ProseMirror pre{white-space:pre-wrap}.ProseMirror p{margin-bottom:1em}.ProseMirror p:first-child,.ProseMirror h1:first-child,.ProseMirror h2:first-child,.ProseMirror h3:first-child,.ProseMirror h4:first-child,.ProseMirror h5:first-child,.ProseMirror h6:first-child{margin-top:10px}h2{font:var(--vvd-typography-heading-4)}h3{font:var(--vvd-typography-base-extended)}p{font:var(--vvd-typography-base)}:host{display:block}#editor{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}#editor{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}#editor ::-webkit-scrollbar{width:4px}#editor ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}#editor ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}#editor{position:relative;display:flex;flex-direction:column;block-size:100%;overflow-y:auto}[contenteditable=true]{overflow:unset;block-size:unset}#attachments-wrapper{order:1}#attachments-wrapper .divider{padding:0 12px}.hidden{display:none}.drag-overlay{position:absolute;z-index:10;display:none;align-items:center;justify-content:center;border:1px dashed var(--vvd-color-cta-400);border-radius:8px;background:var(--vvd-color-cta-100);font:var(--vvd-typography-base);inset:0;opacity:.8;pointer-events:none;transition:opacity .2s}.drag-over .drag-overlay{display:flex}";
 
-function notifyMenuBarChange(menuBar, eventName, payload) {
-  menuBar.$emit(eventName, payload, { bubbles: false, composed: false });
+function notifyMenubarChange(menubar, eventName, payload) {
+  menubar.$emit(eventName, payload, { bubbles: false, composed: false });
   return true;
 }
 const TEXT_DECORATION_ITEMS = [
@@ -108,8 +110,8 @@ const textSizeEventHandler = (event) => {
 };
 const MENU_BAR_ITEMS = {
   textBlock: {
-    registerStateProperty: function(menuBar) {
-      menuBar.addEventListener("text-styles-changed", textBlockEventHandler);
+    registerStateProperty: function(menubar) {
+      menubar.addEventListener("text-styles-changed", textBlockEventHandler);
     },
     render: function(context) {
       const selectTag = context.tagFor(definition$4.Select);
@@ -127,7 +129,7 @@ const MENU_BAR_ITEMS = {
 				aria-label="Text Block"
 				placement="bottom-end"
 				value="${(_, { parent }) => parent.textBlockType}"
-				@change="${(_, { parent, event }) => notifyMenuBarChange(
+				@change="${(_, { parent, event }) => notifyMenubarChange(
         parent,
         "text-block-selected",
         event.target.value
@@ -160,8 +162,8 @@ const MENU_BAR_ITEMS = {
     }
   },
   textDecoration: {
-    registerStateProperty: function(menuBar) {
-      menuBar.addEventListener(
+    registerStateProperty: function(menubar) {
+      menubar.addEventListener(
         "text-styles-changed",
         textDecorationEventHandler
       );
@@ -183,7 +185,7 @@ const MENU_BAR_ITEMS = {
                                 appearance="ghost-light"
                                 shape="rounded"
                                 icon="${(x) => x.icon}"
-                                @click="${(x, c) => notifyMenuBarChange(
+                                @click="${(x, c) => notifyMenubarChange(
           c.parentContext.parent,
           "text-decoration-selected",
           x.value
@@ -197,8 +199,8 @@ const MENU_BAR_ITEMS = {
     }
   },
   textSize: {
-    registerStateProperty: function(menuBar) {
-      menuBar.addEventListener("text-styles-changed", textSizeEventHandler);
+    registerStateProperty: function(menubar) {
+      menubar.addEventListener("text-styles-changed", textSizeEventHandler);
     },
     render: function(context) {
       const menuTag = context.tagFor(definition.Menu);
@@ -234,7 +236,7 @@ const MENU_BAR_ITEMS = {
 								internal-part
 								class="menubar-selector-menuitem"
 								connotation="cta"
-								@click="${(x, c) => notifyMenuBarChange(
+								@click="${(x, c) => notifyMenubarChange(
           c.parentContext.parent,
           "text-size-selected",
           x.value
@@ -256,16 +258,16 @@ const MENU_BAR_ITEMS = {
   }
 };
 
-var __defProp$1 = Object.defineProperty;
-var __decorateClass$1 = (decorators, target, key, kind) => {
+var __defProp$2 = Object.defineProperty;
+var __decorateClass$2 = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$1(target, key, result);
+  if (result) __defProp$2(target, key, result);
   return result;
 };
-class MenuBar extends localized.Localized(vividElement.VividElement) {
+class Menubar extends localized.Localized(vividElement.VividElement) {
   get #textEditorElement() {
     return this.parentElement;
   }
@@ -299,13 +301,13 @@ class MenuBar extends localized.Localized(vividElement.VividElement) {
     );
   }
 }
-__decorateClass$1([
+__decorateClass$2([
   vividElement.attr({ attribute: "menu-items" })
-], MenuBar.prototype, "menuItems");
+], Menubar.prototype, "menuItems");
 
-const getClasses$1 = (menuBar) => classNames.classNames("control", [
+const getClasses$2 = (menubar) => classNames.classNames("control", [
   "hide-menubar",
-  getValidMenuItems(menuBar).length === 0
+  getValidMenuItems(menubar).length === 0
 ]);
 const validItems = ["textBlock", "textDecoration", "textSize", "divider"];
 function getPropertyStateRgistrationFunction(item) {
@@ -326,18 +328,18 @@ function renderMenuItems(context) {
     }}`
   )}`;
 }
-const MenuBarTemplate = (context) => {
-  return vividElement.html`<template class="${getClasses$1}">
+const MenubarTemplate = (context) => {
+  return vividElement.html`<template class="${getClasses$2}">
 		${renderMenuItems(context)}
 	</template>`;
 };
 
-const styles = ":host{display:flex;align-items:center;background-color:var(--vvd-color-neutral-50);gap:4px}:host .hide-menubar{display:none}.title{--_text-primary-custom-size: var(--vvd-typography-heading-4)}.subtitle{--_text-primary-custom-size: var(--vvd-typography-base-extended)}.body{--_text-primary-custom-size: var(--vvd-typography-base)}.divider{height:28px}#text-block{width:104px}";
+const styles$1 = ":host{display:flex;align-items:center;background-color:var(--vvd-color-neutral-50);gap:4px}:host .hide-menubar{display:none}.title{--_text-primary-custom-size: var(--vvd-typography-heading-4)}.subtitle{--_text-primary-custom-size: var(--vvd-typography-base-extended)}.body{--_text-primary-custom-size: var(--vvd-typography-base)}.divider{height:28px}#text-block{width:104px}";
 
-const menuBarDefinition = vividElement.defineVividComponent(
+const menubarDefinition = vividElement.defineVividComponent(
   "menubar",
-  MenuBar,
-  MenuBarTemplate,
+  Menubar,
+  MenubarTemplate,
   [
     definition$1.buttonDefinition,
     definition$4.selectDefinition,
@@ -348,7 +350,7 @@ const menuBarDefinition = vividElement.defineVividComponent(
     definition$3.menuItemDefinition
   ],
   {
-    styles,
+    styles: styles$1,
     shadowOptions: {
       delegatesFocus: true
     }
@@ -13883,13 +13885,51 @@ const customMarks = {
     }
   }
 };
-const extendedSchema = new Schema({
-  nodes: schema.spec.nodes,
+const dynamicSchema = (prefix = "vwc") => new Schema({
+  nodes: {
+    ...schema.spec.nodes.toObject(),
+    imageError: {
+      inline: true,
+      group: "inline",
+      atom: true,
+      attrs: {
+        alt: { default: "" },
+        icon: { default: "" },
+        errorMessage: { default: "Failed to attach" },
+        fileName: { default: "" }
+      },
+      toDOM(node) {
+        return [
+          `${prefix}-text-editor-image-placeholder`,
+          {
+            alt: node.attrs.alt,
+            icon: node.attrs.icon,
+            "error-message": node.attrs.errorMessage,
+            "file-name": node.attrs.fileName
+          }
+        ];
+      },
+      parseDOM: [
+        {
+          tag: `${prefix}-text-editor-image-placeholder`,
+          getAttrs(dom) {
+            return {
+              alt: dom.getAttribute("alt"),
+              icon: dom.getAttribute("icon"),
+              errorMessage: dom.getAttribute("error-message"),
+              fileName: dom.getAttribute("file-name")
+            };
+          }
+        }
+      ]
+    }
+  },
   marks: {
     ...schema.spec.marks.toObject(),
     ...customMarks
   }
 });
+dynamicSchema();
 
 const NEGATIVE_SELECTION = {
   start: -1,
@@ -13988,6 +14028,16 @@ function convertSelectionToVividFormat({
     end: to
   };
 }
+function getImageErrorNode(schema, file, errorMessage = "Image loading failed") {
+  const nodeType = schema.nodes.imageError;
+  const imageErrorNode = nodeType.create({
+    alt: `inline image from file ${file.name}`,
+    fileName: file.name,
+    icon: file.type.split("/")[1],
+    errorMessage
+  });
+  return imageErrorNode;
+}
 const isEmptyParagraph = (node) => {
   return node.type.name === "paragraph" && node.nodeSize === 2;
 };
@@ -14037,7 +14087,9 @@ class ProseMirrorFacade {
     }
     this.#dispatchEvent("change");
   };
-  init(element) {
+  #vwcPrefix = "vwc";
+  init(element, vwcPrefix = "vwc") {
+    this.#vwcPrefix = vwcPrefix;
     if (!(element instanceof HTMLElement)) {
       throw new Error(
         "ProseMirror Facade init accepts a valid HTMLElement as its first parameter"
@@ -14050,7 +14102,7 @@ class ProseMirrorFacade {
       keymap(baseKeymap)
     ];
     const state = EditorState.create({
-      schema: extendedSchema,
+      schema: dynamicSchema(this.#vwcPrefix),
       plugins
     });
     this.#view = new EditorView(element, { state });
@@ -14071,7 +14123,7 @@ class ProseMirrorFacade {
   }
   replaceContent(content) {
     this.#verifyViewInitiation();
-    const parser = DOMParser.fromSchema(extendedSchema);
+    const parser = DOMParser.fromSchema(this.#view.state.schema);
     const doc = parser.parse(
       new window.DOMParser().parseFromString(content, "text/html").body
     );
@@ -14256,7 +14308,8 @@ class ProseMirrorFacade {
   async addInlineImage({
     file,
     position,
-    alt
+    alt,
+    error
   }) {
     this.#verifyViewInitiation();
     const reader = new FileReader();
@@ -14268,7 +14321,7 @@ class ProseMirrorFacade {
     const { state, dispatch } = this.#view;
     const { schema } = state;
     const imageAlt = alt ?? `inline image from file ${file.name}`;
-    const imageNode = schema.nodes.image.create({ src, alt: imageAlt });
+    const imageNode = error ? getImageErrorNode(schema, file, error) : schema.nodes.image.create({ src, alt: imageAlt });
     let insertPos = position;
     if (typeof insertPos !== "number") {
       insertPos = state.selection.from;
@@ -14278,13 +14331,13 @@ class ProseMirrorFacade {
   }
 }
 
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
+var __defProp$1 = Object.defineProperty;
+var __decorateClass$1 = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
+  if (result) __defProp$1(target, key, result);
   return result;
 };
 const RichTextEditorTextBlocks = {
@@ -14422,17 +14475,17 @@ class RichTextEditor extends localized.Localized(vividElement.VividElement) {
     }
   }
 }
-__decorateClass([
+__decorateClass$1([
   vividElement.attr({ converter: vividElement.nullableNumberConverter, attribute: "selection-start" })
 ], RichTextEditor.prototype, "selectionStart");
-__decorateClass([
+__decorateClass$1([
   vividElement.attr({ converter: vividElement.nullableNumberConverter, attribute: "selection-end" })
 ], RichTextEditor.prototype, "selectionEnd");
-__decorateClass([
+__decorateClass$1([
   vividElement.attr
 ], RichTextEditor.prototype, "placeholder");
 
-const getClasses = (_) => classNames.classNames("control");
+const getClasses$1 = (_) => classNames.classNames("control");
 const VALID_MENU_ELEMEMENT_SUFFIX = "menubar";
 const menuParent = (target) => target.parentElement;
 function textBlockSelectedHandler(event) {
@@ -14460,29 +14513,29 @@ function handleAttachmentsSlotChange(_, { event }) {
     slotElement.assignedElements().length < 1
   );
 }
-function handleMenuBarSlotChange(_, { event }) {
+function handleMenubarSlotChange(_, { event }) {
   const slot = event.target;
   const assignedElements = slot.assignedElements({ flatten: true });
-  const menuBar = assignedElements.find(
+  const menubar = assignedElements.find(
     (element) => element.tagName.toLowerCase().endsWith(VALID_MENU_ELEMEMENT_SUFFIX)
   );
   assignedElements.forEach((element) => {
-    if (element === menuBar) {
+    if (element === menubar) {
       element.style.removeProperty("display");
     } else {
       element.style.display = "none";
     }
   });
-  if (menuBar) {
-    menuBar.addEventListener(
+  if (menubar) {
+    menubar.addEventListener(
       "text-block-selected",
       textBlockSelectedHandler
     );
-    menuBar.addEventListener(
+    menubar.addEventListener(
       "text-decoration-selected",
       selectionDecorationSelectedHandler
     );
-    menuBar.addEventListener(
+    menubar.addEventListener(
       "text-size-selected",
       textSizeSelectedHandler
     );
@@ -14506,9 +14559,9 @@ function handleDragLeave(_, { event }) {
 }
 const RichTextEditorTemplate = (context) => {
   const dividerTag = context.tagFor(divider.Divider);
-  return vividElement.html`<template class="${getClasses}">
-		<div id="editor" 
-		     class="editor" 
+  return vividElement.html`<template class="${getClasses$1}">
+		<div id="editor"
+		     class="editor"
 			 @drop="${handleFileDrop}"
 			 @dragenter="${handleDragEnter}"
 			 @dragleave="${handleDragLeave}"
@@ -14523,18 +14576,94 @@ const RichTextEditorTemplate = (context) => {
 				</slot>
 			</div>
 		</div>
-		<slot name="menu-bar" 
-			  @slotchange="${handleMenuBarSlotChange}"></slot>
+		<slot name="menu-bar"
+			  @slotchange="${handleMenubarSlotChange}"></slot>
+	</template>`;
+};
+
+const styles = ":host{white-space:normal}.image-placeholder{display:flex;width:250px;height:64px;box-sizing:border-box;align-items:center;padding:16px;border:1px solid var(--vvd-color-neutral-200);border-radius:12px;background-color:var(--vvd-color-canvas);gap:16px}.icon{display:flex;width:40px;height:40px;box-sizing:border-box;flex-shrink:0;align-items:center;justify-content:center;border-radius:8px;background-color:color-mix(in srgb,var(--vvd-color-neutral-950),transparent 90%);color:var(--vvd-color-neutral-600)}.info{display:flex;flex-direction:column;min-inline-size:0}.filename{display:flex;overflow:hidden;width:100%;max-width:220px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-condensed-bold);white-space:nowrap}.name{overflow:hidden;flex:1 1 auto;text-overflow:ellipsis}.suffix{flex:0 0 auto;margin-left:4px}.error{display:flex;align-items:center;color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed);gap:6px}";
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class ImagePlaceholder extends vividElement.VividElement {
+}
+__decorateClass([
+  vividElement.attr({ attribute: "file-name" })
+], ImagePlaceholder.prototype, "fileName");
+__decorateClass([
+  vividElement.attr({ attribute: "size" })
+], ImagePlaceholder.prototype, "size");
+__decorateClass([
+  vividElement.attr({ attribute: "error-message" })
+], ImagePlaceholder.prototype, "errorMessage");
+__decorateClass([
+  vividElement.attr({ attribute: "icon" })
+], ImagePlaceholder.prototype, "icon");
+
+const getClasses = (_) => classNames.classNames("base");
+const getIconName = ({ icon }) => {
+  if (!icon) {
+    return "clear-file-solid";
+  }
+  return `file-${icon}-solid`;
+};
+const getFileSuffix = (x) => {
+  return x.fileName?.split(".").pop() || "";
+};
+const getFileName = (x) => {
+  return x.fileName?.replace(/\.[^/.]+$/, "") || "";
+};
+const ImagePlaceholderTemplate = (context) => {
+  const iconTag = context.tagFor(definition$7.Icon);
+  return vividElement.html`<template class="${getClasses}">
+		<div class="image-placeholder">
+			<div class="icon">
+				<${iconTag} name="${getIconName}" size="-5"></${iconTag}>
+			</div>
+			<div class="info">
+				<div class="filename" title="${(x) => x.fileName}">
+					<div class="name">${getFileName}</div>
+					<div class="suffix">${getFileSuffix}</div>
+				</div>
+				${when.when(
+    (x) => x.errorMessage,
+    vividElement.html`<div class="error">
+					<span class="error-icon"><${iconTag} name="error-solid" size="-6"></${iconTag}></span>
+					<span class="error-text">${(x) => x.errorMessage}</span>
+				</div>`
+  )}
+			</div>
+		</div>
 	</template>`;
 };
 
+const imagePlaceholderDefinition = vividElement.defineVividComponent(
+  "text-editor-image-placeholder",
+  ImagePlaceholder,
+  ImagePlaceholderTemplate,
+  [definition$7.iconDefinition],
+  {
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
+  }
+);
+
 const richTextEditorDefinition = vividElement.defineVividComponent(
   "rich-text-editor",
   RichTextEditor,
   RichTextEditorTemplate,
-  [menuBarDefinition, definition$6.dividerDefinition],
+  [menubarDefinition, definition$6.dividerDefinition, imagePlaceholderDefinition],
   {
-    styles: styles$1,
+    styles: styles$2,
     shadowOptions: {
       delegatesFocus: true
     }