@limetech/lime-elements 38.2.3 → 38.3.0

package/dist/cjs/limel-prosemirror-adapter.cjs.entry.js

@@ -13,9 +13,11 @@ const _getPrototype = require('./_getPrototype-18d2118e.js');
 const isArray = require('./isArray-d188a04f.js');
 const isObjectLike = require('./isObjectLike-3e3f0cba.js');
 const markdownParser = require('./markdown-parser-89b425cf.js');
-const translations = require('./translations-0d53f9bc.js');
+const textEditor_types = require('./text-editor.types-5e5567e2.js');
+const translations = require('./translations-9be59477.js');
 const randomString = require('./random-string-e8ad4419.js');
 const isItem = require('./isItem-3f8ad629.js');
+const files = require('./files-c08d24d4.js');
 const isEqual = require('./isEqual-a4bccf32.js');
 const debounce = require('./debounce-2e5f4b7e.js');
 require('./eq-9a943b00.js');
@@ -24,6 +26,8 @@ require('./_isIndex-b40f4fc5.js');
 require('./isArrayLike-e840b044.js');
 require('./_defineProperty-8f56146d.js');
 require('./_commonjsHelpers-0c557e26.js');
+require('./file-metadata-e309a7a4.js');
+require('./get-icon-props-65f39e40.js');
 require('./toNumber-062ea29c.js');
 require('./isSymbol-d22b2798.js');
 
@@ -25903,6 +25907,132 @@ class MarkdownSerializerState {
     }
 }
 
+const imageCache = new Map();
+function getImageNode(language) {
+  return { image: createImageNodeSpec(language) };
+}
+function getImageNodeMarkdownSerializer(language) {
+  return { image: createImageNodeMarkdownSerializer(language) };
+}
+/**
+ * Recursively checks if a ProseMirror node or
+ * any of its child nodes is an image node.
+ */
+function hasImageNode(node) {
+  if (node.type.name === 'image') {
+    return true;
+  }
+  for (let i = 0; i < node.childCount; i++) {
+    const childNode = node.child(i);
+    if (hasImageNode(childNode)) {
+      return true;
+    }
+  }
+  return false;
+}
+function createImageNodeMarkdownSerializer(language) {
+  return (state, node) => {
+    if (node.attrs.state === textEditor_types.ImageState.FAILED) {
+      const text = translations.translate.get('editor-image-view.failed', language, {
+        filename: node.attrs.alt || 'file',
+      });
+      state.write(`<span>${text}</span>`);
+      return;
+    }
+    else if (node.attrs.state === textEditor_types.ImageState.LOADING) {
+      const text = translations.translate.get('editor-image-view.loading', language, {
+        filename: node.attrs.alt || 'file',
+      });
+      state.write(`<span>${text}</span>`);
+      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);
+  };
+}
+function createImageNodeSpec(language) {
+  return {
+    group: 'inline',
+    inline: true,
+    attrs: {
+      src: { default: '' },
+      alt: { default: '' },
+      fileInfoId: { default: '' },
+      width: { default: '' },
+      maxWidth: { default: '100%' },
+      state: { default: '' },
+    },
+    toDOM: (node) => {
+      if (node.attrs.state === textEditor_types.ImageState.FAILED) {
+        return createStatusSpan('failed', node, language);
+      }
+      else if (node.attrs.state === textEditor_types.ImageState.LOADING) {
+        return createStatusSpan('loading', node, language);
+      }
+      let img = imageCache.get(node.attrs.fileInfoId);
+      if (img) {
+        updateImageElement(img, node);
+      }
+      else {
+        img = createImageElement(node);
+        imageCache.set(node.attrs.fileInfoId, img);
+      }
+      return img;
+    },
+    parseDOM: [
+      {
+        tag: 'img',
+        getAttrs: (dom) => {
+          return {
+            src: dom.getAttribute('src') || '',
+            alt: dom.getAttribute('alt') || 'file',
+            width: dom.style.width || '',
+            maxWidth: '100%',
+            state: textEditor_types.ImageState.SUCCESS,
+            fileInfoId: crypto.randomUUID(),
+          };
+        },
+      },
+    ],
+  };
+}
+function createStatusSpan(key, node, language) {
+  const text = translations.translate.get(`editor-image-view.${key}`, language, {
+    filename: node.attrs.alt || 'file',
+  });
+  const span = document.createElement('span');
+  span.textContent = text;
+  return span;
+}
+function updateImageElement(img, node) {
+  img.alt = node.attrs.alt;
+  img.style.maxWidth = node.attrs.maxWidth;
+  img.style.width = node.attrs.width;
+  return img;
+}
+function createImageElement(node) {
+  const img = document.createElement('img');
+  img.src = node.attrs.src;
+  img.alt = node.attrs.alt;
+  img.style.maxWidth = node.attrs.maxWidth;
+  img.style.width = node.attrs.width;
+  return img;
+}
+
 const createMarkdownSerializerFunction = (config) => {
   return (state, node) => {
     const tagOpen = `<${config.tagName}` +
@@ -25916,12 +26046,12 @@ const createMarkdownSerializerFunction = (config) => {
     state.write(tagClose);
   };
 };
-const buildMarkdownSerializer = (plugins) => {
+const buildMarkdownSerializer = (plugins, language) => {
   const customNodes = {};
   plugins.forEach((plugin) => {
     customNodes[plugin.tagName] = createMarkdownSerializerFunction(plugin);
   });
-  const nodes = Object.assign(Object.assign({}, defaultMarkdownSerializer.nodes), customNodes);
+  const nodes = Object.assign(Object.assign(Object.assign({}, defaultMarkdownSerializer.nodes), getImageNodeMarkdownSerializer(language)), customNodes);
   const marks = Object.assign(Object.assign({}, defaultMarkdownSerializer.marks), { strikethrough: {
       open: '~~',
       close: '~~',
@@ -25934,19 +26064,18 @@ const buildMarkdownSerializer = (plugins) => {
  * @private
  */
 class MarkdownConverter {
-  constructor(plugins) {
+  constructor(plugins, language) {
     this.parseAsHTML = (text) => {
       return markdownParser.markdownToHTML(text, { whitelist: this.customNodes });
     };
     this.serialize = (view) => {
-      if (view.dom.textContent === '') {
+      if (view.dom.textContent.trim() === '' &&
+        !hasImageNode(view.state.doc)) {
         return '';
       }
-      else {
-        return this.markdownSerializer.serialize(view.state.doc);
-      }
+      return this.markdownSerializer.serialize(view.state.doc);
     };
-    this.markdownSerializer = buildMarkdownSerializer(plugins);
+    this.markdownSerializer = buildMarkdownSerializer(plugins, language);
     this.customNodes = plugins;
   }
 }
@@ -25960,12 +26089,13 @@ class HTMLConverter {
       return markdownParser.sanitizeHTML(text, this.customNodes);
     };
     this.serialize = (view) => {
-      if (view.dom.textContent === '') {
+      if (view.dom.textContent.trim() === '' &&
+        !hasImageNode(view.state.doc)) {
         return '';
       }
-      else {
-        return view.dom.innerHTML;
-      }
+      const div = document.createElement('div');
+      div.appendChild(DOMSerializer.fromSchema(view.state.schema).serializeFragment(view.state.doc.content));
+      return div.innerHTML;
     };
     this.customNodes = plugins;
   }
@@ -26170,16 +26300,110 @@ const createLinkPlugin = (updateLinkCallback) => {
   });
 };
 
-const pluginKey = new PluginKey('imageRemoverPlugin');
-const createImageRemoverPlugin = () => {
+const pluginKey = new PluginKey('imageInserterPlugin');
+const createImageInserterPlugin = (imagePastedCallback, imageRemovedCallback) => {
   return new Plugin({
     key: pluginKey,
     props: {
       handlePaste: (view, event, slice) => {
         return processPasteEvent(view, event, slice);
       },
+      handleDOMEvents: {
+        imagePasted: (_, event) => {
+          imagePastedCallback(event.detail);
+        },
+      },
     },
+    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);
+  }
+};
+const imageInserterFactory = (view, base64Data, fileInfo) => {
+  return {
+    fileInfo: fileInfo,
+    insertThumbnail: createThumbnailInserter(view, base64Data, fileInfo),
+    insertImage: createImageInserter(view, fileInfo),
+    insertFailedThumbnail: createFailedThumbnailInserter(view, 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: textEditor_types.ImageState.LOADING,
+  });
+  const transaction = state.tr.replaceSelectionWith(placeholderNode);
+  dispatch(transaction);
+};
+const createImageInserter = (view, fileInfo) => (src) => {
+  const { state, dispatch } = view;
+  const { schema } = state;
+  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: textEditor_types.ImageState.SUCCESS,
+      });
+      tr.replaceWith(pos, pos + node.nodeSize, imageNode);
+      return false;
+    }
+  });
+  dispatch(tr);
+};
+const createFailedThumbnailInserter = (view, fileInfo) => () => {
+  const { state, dispatch } = view;
+  const { schema } = state;
+  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: textEditor_types.ImageState.FAILED,
+      });
+      tr.replaceWith(pos, pos + node.nodeSize, errorPlaceholderNode);
+      return false;
+    }
   });
+  dispatch(tr);
 };
 /**
  * Check if a given ProseMirror node or fragment contains any image nodes.
@@ -26231,11 +26455,31 @@ const filterImageNodes = (fragment) => {
   });
   return Fragment.fromArray(filteredChildren);
 };
+/**
+ * Process a paste event and trigger an imagePasted event if an image file is pasted.
+ * If an HTML image element is pasted, this image is filtered out from the slice content.
+ *
+ * @param view - The ProseMirror editor view.
+ * @param event - The paste event.
+ * @returns A boolean; True if an image file was pasted to prevent default paste behavior, otherwise false.
+ */
 const processPasteEvent = (view, event, slice) => {
   const clipboardData = event.clipboardData;
   if (!clipboardData) {
     return false;
   }
+  const files$1 = Array.from(clipboardData.files || []);
+  for (const file of files$1) {
+    if (file.type.startsWith('image/')) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        view.dom.dispatchEvent(new CustomEvent('imagePasted', {
+          detail: imageInserterFactory(view, reader.result, files.createFileInfo(file)),
+        }));
+      };
+      reader.readAsDataURL(file);
+    }
+  }
   const filteredSlice = new Slice(filterImageNodes(slice.content), slice.openStart, slice.openEnd);
   if (filteredSlice.content.childCount < slice.content.childCount) {
     const { state, dispatch } = view;
@@ -26243,8 +26487,144 @@ const processPasteEvent = (view, event, slice) => {
     dispatch(tr);
     return true;
   }
-  return false;
+  return files$1.length > 0;
+};
+
+const MIN_WIDTH = 10;
+const createImageViewPlugin = (language) => {
+  return new Plugin({
+    props: {
+      nodeViews: {
+        image: (node, view, getPos) => {
+          return new ImageView(node, view, getPos, language);
+        },
+      },
+    },
+  });
 };
+class ImageView {
+  constructor(node, view, getPos, language) {
+    this.createResizeHandle = (position) => {
+      const handle = document.createElement('div');
+      handle.className = `resize-handle ${position}`;
+      handle.setAttribute('role', 'slider');
+      handle.setAttribute('aria-label', translations.translate.get('editor-image-view.resize-handle', this.language));
+      handle.setAttribute('tabindex', '0');
+      handle.setAttribute('aria-valuemin', MIN_WIDTH.toString());
+      handle.setAttribute('aria-valuenow', this.img.offsetWidth.toString());
+      handle.setAttribute('aria-valuetext', `${this.img.offsetWidth} pixels`);
+      handle.setAttribute('aria-grabbed', 'false');
+      handle.addEventListener('pointerdown', (e) => {
+        handle.setAttribute('aria-grabbed', 'true');
+        this.onResizeStart(e, position);
+      });
+      return handle;
+    };
+    this.onResizeStart = (event, position) => {
+      event.preventDefault();
+      const handle = event.target;
+      const startX = event.clientX;
+      const startWidth = this.img.offsetWidth;
+      const onPointerMove = (e) => {
+        const delta = e.clientX - startX;
+        const widthDelta = position === 'top-left' ? -delta : delta;
+        const newWidth = Math.max(MIN_WIDTH, startWidth + widthDelta);
+        this.img.style.width = `${newWidth}px`;
+        const handles = this.dom.querySelectorAll('.resize-handle');
+        handles.forEach((resizeHandle) => {
+          resizeHandle.setAttribute('aria-valuenow', newWidth.toString());
+          resizeHandle.setAttribute('aria-valuetext', `${newWidth} pixels`);
+        });
+      };
+      const onPointerUp = () => {
+        window.removeEventListener('pointermove', onPointerMove);
+        window.removeEventListener('pointerup', onPointerUp);
+        handle.setAttribute('aria-grabbed', 'false');
+        this.view.dispatch(this.view.state.tr.setNodeMarkup(this.getPos(), undefined, Object.assign(Object.assign({}, this.node.attrs), { width: this.img.style.width, height: this.node.attrs.height })));
+      };
+      window.addEventListener('pointermove', onPointerMove);
+      window.addEventListener('pointerup', onPointerUp);
+    };
+    this.createLoadingState = () => {
+      this.dom.setAttribute('aria-live', 'polite');
+      this.dom.setAttribute('aria-busy', 'true');
+      this.dom.setAttribute('aria-label', translations.translate.get('editor-image-view.loading', this.language, {
+        filename: this.node.attrs.alt || 'file',
+      }));
+      const spinnerElement = document.createElement('limel-linear-progress');
+      spinnerElement.setAttribute('indeterminate', 'true');
+      this.dom.appendChild(spinnerElement);
+    };
+    this.createSuccessState = () => {
+      this.dom.setAttribute('aria-live', 'polite');
+      this.dom.setAttribute('aria-busy', 'false');
+      this.dom.setAttribute('aria-label', translations.translate.get('editor-image-view.success', this.language, {
+        filename: this.node.attrs.alt || 'file',
+      }));
+      const bottomRightHandle = this.createResizeHandle('bottom-right');
+      const topLeftHandle = this.createResizeHandle('top-left');
+      this.dom.appendChild(bottomRightHandle);
+      this.dom.appendChild(topLeftHandle);
+    };
+    this.createFailedState = () => {
+      this.dom.setAttribute('aria-live', 'assertive');
+      this.dom.setAttribute('aria-busy', 'false');
+      this.dom.setAttribute('aria-label', translations.translate.get('editor-image-view.failed', this.language, {
+        filename: this.node.attrs.alt || 'file',
+      }));
+    };
+    this.cleanUpPreviousState = () => {
+      Array.from(this.dom.childNodes).forEach((child) => {
+        if (!(child instanceof HTMLImageElement)) {
+          child.remove();
+        }
+      });
+    };
+    this.transitionBetweenStates = () => {
+      this.cleanUpPreviousState();
+      this.dom.className = `image-wrapper state-${this.node.attrs.state}`;
+      if (this.node.attrs.state === textEditor_types.ImageState.LOADING) {
+        this.createLoadingState();
+      }
+      else if (this.node.attrs.state === textEditor_types.ImageState.SUCCESS) {
+        this.createSuccessState();
+      }
+      else if (this.node.attrs.state === textEditor_types.ImageState.FAILED) {
+        this.createFailedState();
+      }
+    };
+    this.transitioningBetweenSuccessStates = (newNode) => {
+      return (this.node.attrs.state === textEditor_types.ImageState.SUCCESS &&
+        newNode.attrs.state === textEditor_types.ImageState.SUCCESS);
+    };
+    this.node = node;
+    this.view = view;
+    this.getPos = getPos;
+    this.language = language;
+    this.dom = document.createElement('div');
+    this.dom.className = `image-wrapper state-${node.attrs.state}`;
+    this.img = document.createElement('img');
+    this.img.src = node.attrs.src;
+    this.img.alt = node.attrs.alt;
+    this.img.style.maxWidth = node.attrs.maxWidth;
+    this.img.style.width = node.attrs.width;
+    this.dom.appendChild(this.img);
+    this.transitionBetweenStates();
+  }
+  // Ensure that the existing NodeView is reused rather than recreated.
+  // Recreating the NodeView will cause flickering between states.
+  update(node) {
+    if (!this.transitioningBetweenSuccessStates(node)) {
+      this.img.src = node.attrs.src;
+      this.img.alt = node.attrs.alt;
+      this.img.style.maxWidth = node.attrs.maxWidth;
+      this.img.style.width = node.attrs.width;
+    }
+    this.node = node;
+    this.transitionBetweenStates();
+    return true;
+  }
+}
 
 const actionBarPluginKey = new PluginKey('actionBarPlugin');
 const getMenuItemStates = (menuTypes, menuCommandFactory, view) => {
@@ -27936,13 +28316,15 @@ const getTableNodes = () => {
   });
 };
 
-const prosemirrorAdapterCss = "@charset \"UTF-8\";:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}:host(limel-prosemirror-adapter){display:flex;flex-direction:column}:host(limel-prosemirror-adapter) .toolbar{order:1}:host(limel-prosemirror-adapter) div#editor{order:2;height:100%;flex-grow:1}:host(limel-prosemirror-adapter) div[contenteditable=true]{height:100%}*{box-sizing:border-box}:host(limel-prosemirror-adapter:hover) .toolbar,:host(limel-prosemirror-adapter:focus-within) .toolbar{will-change:grid-template-rows}:host(limel-prosemirror-adapter:hover) limel-action-bar,:host(limel-prosemirror-adapter:focus-within) limel-action-bar{will-change:opacity, padding}.ProseMirror-menubar-wrapper{display:grid;grid-template-rows:auto 1fr}.ProseMirror-textblock-dropdown{min-width:3em}.ProseMirror-tooltip .ProseMirror-menu{width:-webkit-fit-content;width:fit-content;white-space:pre}.toolbar{--action-bar-border-radius:0.25rem;border-radius:var(--action-bar-border-radius);flex-shrink:0;position:sticky;z-index:1;top:0;width:100%;display:grid;grid-template-rows:var(--limel-prosemirror-adapter-toolbar-grid-template-rows);transition-property:grid-template-rows;transition-duration:var(--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration);transition-timing-function:var(--limel-prosemirror-adapter-toolbar-transition-timing-function);background-color:rgba(var(--contrast-200), 0.5);backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem)}limel-action-bar{min-width:0;transition-property:padding, opacity;transition-duration:var(--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration);transition-timing-function:var(--limel-prosemirror-adapter-toolbar-transition-timing-function);opacity:var(--limel-prosemirror-adapter-toolbar-opacity);padding:var(--limel-prosemirror-adapter-action-bar-padding-top-bottom, 0.125rem) 0.25rem;background-color:transparent;overflow:hidden}.ProseMirror{position:relative;word-wrap:break-word;white-space:pre-wrap;white-space:break-spaces;-webkit-font-variant-ligatures:none;font-variant-ligatures:none;font-feature-settings:\"liga\" 0;padding:var(--limel-text-editor-padding)}.ProseMirror [draggable][contenteditable=false]{user-select:text}.ProseMirror:focus-visible{outline:none}.ProseMirror-hideselection{caret-color:transparent}.ProseMirror-hideselection *::selection{background:transparent}.ProseMirror-hideselection *::-moz-selection{background:transparent}.ProseMirror-selectednode{outline:0.125rem solid rgb(var(--color-sky-light))}li.ProseMirror-selectednode{outline:none}li.ProseMirror-selectednode:after{content:\"\";position:absolute;left:-2rem;right:-0.125rem;top:-0.125rem;bottom:-0.125rem;border:0.125rem solid rgb(var(--color-sky-light));pointer-events:none}img.ProseMirror-separator{display:inline !important;border:none !important;margin:0 !important}limel-portal{width:25rem}blockquote{position:relative;font-weight:100;font-size:0.875rem;max-width:100%;line-height:1.4;margin:0;padding:0.5rem 1.25rem;border-radius:0.05rem 0.75rem;background-color:rgb(var(--contrast-300))}blockquote:before,blockquote:after{position:absolute;font-size:2.75rem;opacity:0.4}blockquote:before{content:\"“\";left:0;top:-0.75rem}blockquote:after{content:\"”\";right:0;bottom:-2rem}:host(limel-markdown.truncate-paragraphs) p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}p,li{font-size:0.875rem;word-break:break-word;hyphens:auto;-webkit-hyphens:auto}a{word-break:break-all}p{margin-top:0;margin-bottom:0.5rem}p:only-child{margin-bottom:0}a{transition:color 0.2s ease;color:var(--markdown-hyperlink-color, rgb(var(--color-blue-dark)));text-decoration:none}a:hover{color:var(--markdown-hyperlink-color--hovered, rgb(var(--color-blue-default)))}hr{margin:1.75rem 0 2rem 0;border-width:0;border-top:1px solid rgb(var(--contrast-500))}dl{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:1fr;margin-bottom:2rem;border:1px solid rgb(var(--contrast-400));border-radius:0.375rem;background-color:rgb(var(--contrast-200))}dl dt,dl dd{padding:0.375rem 0.5rem;font-size:0.875rem;margin:0}dl dt:nth-of-type(even),dl dd:nth-of-type(even){background-color:rgb(var(--contrast-300))}dl dt:first-child{border-top-left-radius:0.375rem}dl dt:last-child{border-bottom-left-radius:0.375rem}dl dd:first-child{border-top-right-radius:0.375rem}dl dd:last-child{border-bottom-right-radius:0.375rem}h1{font-size:1.5rem}h2{font-size:1.25rem}h3{font-size:1.125rem}h4{font-size:1rem}h5{font-size:0.875rem}h6{font-size:0.75rem}h1,h2{margin-top:0.5rem;margin-bottom:0.5rem;letter-spacing:-0.03125rem;font-weight:500}h3,h4{margin-top:0.75rem;margin-bottom:0.25rem;font-weight:600}h5,h6{margin-top:0.5rem;margin-bottom:0.125rem;font-weight:600}h1,h2,h3,h4,h5,h6{word-break:break-word;hyphens:auto;-webkit-hyphens:auto}:not([contenteditable=true]) h1,:not([contenteditable=true]) h2,:not([contenteditable=true]) h3,:not([contenteditable=true]) h4,:not([contenteditable=true]) h5,:not([contenteditable=true]) h6{text-wrap:balance}[contenteditable=true] h1,[contenteditable=true] h2,[contenteditable=true] h3,[contenteditable=true] h4,[contenteditable=true] h5,[contenteditable=true] h6{text-wrap:initial}ul{list-style:none}ul li{position:relative;margin-left:0.75rem}ul li:before{content:\"\";position:absolute;left:-0.5rem;top:0.5rem;width:0.25rem;height:0.25rem;border-radius:50%;background-color:rgb(var(--contrast-700));display:block}ol{margin-top:0.25rem;padding-left:1rem}ul{margin-top:0.25rem;padding-left:0}ul ul,ul ol,ol ol,ol ul{margin-left:0}li{margin-bottom:0.25rem}code{font-family:ui-monospace, \"Cascadia Code\", \"Source Code Pro\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace;font-size:0.8125rem;letter-spacing:-0.0125rem;color:rgb(var(--contrast-1300));-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;display:inline-block;border-radius:0.25rem;padding:0.03125rem 0.25rem;background-color:rgb(var(--contrast-600))}pre>code{display:block;margin:0.5rem 0;padding:0.5rem 0.75rem;overflow:auto;white-space:pre-wrap}:host(limel-markdown:not(.no-table-styles)) table{table-layout:auto;min-width:100%;border-collapse:collapse;border-spacing:0;background:transparent;margin:0.75rem 0}:host(limel-markdown:not(.no-table-styles)) tbody{border:1px solid rgb(var(--contrast-400));border-radius:0.25rem}:host(limel-markdown:not(.no-table-styles)) th,:host(limel-markdown:not(.no-table-styles)) td{text-align:left;vertical-align:top;transition:background-color 0.2s ease;font-size:0.875rem}:host(limel-markdown:not(.no-table-styles)) td{padding:0.5rem 0.375rem 0.75rem 0.375rem}:host(limel-markdown:not(.no-table-styles)) tr th{background-color:rgb(var(--contrast-400));padding:0.25rem 0.375rem;font-weight:normal}:host(limel-markdown:not(.no-table-styles)) tr th:only-child{text-align:center}:host(limel-markdown:not(.no-table-styles)) tbody tr:nth-child(odd) td{background-color:rgb(var(--contrast-200))}:host(limel-markdown:not(.no-table-styles)) tbody tr:hover td{background-color:rgb(var(--contrast-300))}table{display:block;box-sizing:border-box;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}kbd{font-family:ui-monospace, \"Cascadia Code\", \"Source Code Pro\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace;font-weight:600;color:rgb(var(--contrast-1100));background-color:rgb(var(--contrast-200));white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:normal;padding:0.125rem 0.5rem;margin:0 0.25rem;box-shadow:var(--button-shadow-normal), 0 0.03125rem 0.21875rem 0 rgba(var(--contrast-100), 0.5) inset;border-radius:0.125rem;border-style:solid;border-color:rgba(var(--contrast-600), 0.8);border-width:0 1px 0.125rem 1px}img{max-width:100%;border-radius:0.25rem}";
+const prosemirrorAdapterCss = "@charset \"UTF-8\";:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}:host(limel-prosemirror-adapter){display:flex;flex-direction:column}:host(limel-prosemirror-adapter) .toolbar{order:1}:host(limel-prosemirror-adapter) div#editor{order:2;height:100%;flex-grow:1}:host(limel-prosemirror-adapter) div[contenteditable=true]{height:100%}*{box-sizing:border-box}:host(limel-prosemirror-adapter:hover) .toolbar,:host(limel-prosemirror-adapter:focus-within) .toolbar{will-change:grid-template-rows}:host(limel-prosemirror-adapter:hover) limel-action-bar,:host(limel-prosemirror-adapter:focus-within) limel-action-bar{will-change:opacity, padding}.ProseMirror-menubar-wrapper{display:grid;grid-template-rows:auto 1fr}.ProseMirror-textblock-dropdown{min-width:3em}.ProseMirror-tooltip .ProseMirror-menu{width:-webkit-fit-content;width:fit-content;white-space:pre}.toolbar{--action-bar-border-radius:0.25rem;border-radius:var(--action-bar-border-radius);flex-shrink:0;position:sticky;z-index:1;top:0;width:100%;display:grid;grid-template-rows:var(--limel-prosemirror-adapter-toolbar-grid-template-rows);transition-property:grid-template-rows;transition-duration:var(--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration);transition-timing-function:var(--limel-prosemirror-adapter-toolbar-transition-timing-function);background-color:rgba(var(--contrast-200), 0.5);backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem)}limel-action-bar{min-width:0;transition-property:padding, opacity;transition-duration:var(--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration);transition-timing-function:var(--limel-prosemirror-adapter-toolbar-transition-timing-function);opacity:var(--limel-prosemirror-adapter-toolbar-opacity);padding:var(--limel-prosemirror-adapter-action-bar-padding-top-bottom, 0.125rem) 0.25rem;background-color:transparent;overflow:hidden}.ProseMirror{position:relative;word-wrap:break-word;white-space:pre-wrap;white-space:break-spaces;-webkit-font-variant-ligatures:none;font-variant-ligatures:none;font-feature-settings:\"liga\" 0;padding:var(--limel-text-editor-padding)}.ProseMirror [draggable][contenteditable=false]{user-select:text}.ProseMirror:focus-visible{outline:none}.ProseMirror-hideselection{caret-color:transparent}.ProseMirror-hideselection *::selection{background:transparent}.ProseMirror-hideselection *::-moz-selection{background:transparent}.ProseMirror-selectednode{outline:0.125rem solid rgb(var(--color-sky-light))}li.ProseMirror-selectednode{outline:none}li.ProseMirror-selectednode:after{content:\"\";position:absolute;left:-2rem;right:-0.125rem;top:-0.125rem;bottom:-0.125rem;border:0.125rem solid rgb(var(--color-sky-light));pointer-events:none}img.ProseMirror-separator{display:inline !important;border:none !important;margin:0 !important}limel-portal{width:25rem}blockquote{position:relative;font-weight:100;font-size:0.875rem;max-width:100%;line-height:1.4;margin:0;padding:0.5rem 1.25rem;border-radius:0.05rem 0.75rem;background-color:rgb(var(--contrast-300))}blockquote:before,blockquote:after{position:absolute;font-size:2.75rem;opacity:0.4}blockquote:before{content:\"“\";left:0;top:-0.75rem}blockquote:after{content:\"”\";right:0;bottom:-2rem}:host(limel-markdown.truncate-paragraphs) p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}p,li{font-size:0.875rem;word-break:break-word;hyphens:auto;-webkit-hyphens:auto}a{word-break:break-all}p{margin-top:0;margin-bottom:0.5rem}p:only-child{margin-bottom:0}a{transition:color 0.2s ease;color:var(--markdown-hyperlink-color, rgb(var(--color-blue-dark)));text-decoration:none}a:hover{color:var(--markdown-hyperlink-color--hovered, rgb(var(--color-blue-default)))}hr{margin:1.75rem 0 2rem 0;border-width:0;border-top:1px solid rgb(var(--contrast-500))}dl{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:1fr;margin-bottom:2rem;border:1px solid rgb(var(--contrast-400));border-radius:0.375rem;background-color:rgb(var(--contrast-200))}dl dt,dl dd{padding:0.375rem 0.5rem;font-size:0.875rem;margin:0}dl dt:nth-of-type(even),dl dd:nth-of-type(even){background-color:rgb(var(--contrast-300))}dl dt:first-child{border-top-left-radius:0.375rem}dl dt:last-child{border-bottom-left-radius:0.375rem}dl dd:first-child{border-top-right-radius:0.375rem}dl dd:last-child{border-bottom-right-radius:0.375rem}h1{font-size:1.5rem}h2{font-size:1.25rem}h3{font-size:1.125rem}h4{font-size:1rem}h5{font-size:0.875rem}h6{font-size:0.75rem}h1,h2{margin-top:0.5rem;margin-bottom:0.5rem;letter-spacing:-0.03125rem;font-weight:500}h3,h4{margin-top:0.75rem;margin-bottom:0.25rem;font-weight:600}h5,h6{margin-top:0.5rem;margin-bottom:0.125rem;font-weight:600}h1,h2,h3,h4,h5,h6{word-break:break-word;hyphens:auto;-webkit-hyphens:auto}:not([contenteditable=true]) h1,:not([contenteditable=true]) h2,:not([contenteditable=true]) h3,:not([contenteditable=true]) h4,:not([contenteditable=true]) h5,:not([contenteditable=true]) h6{text-wrap:balance}[contenteditable=true] h1,[contenteditable=true] h2,[contenteditable=true] h3,[contenteditable=true] h4,[contenteditable=true] h5,[contenteditable=true] h6{text-wrap:initial}ul{list-style:none}ul li{position:relative;margin-left:0.75rem}ul li:before{content:\"\";position:absolute;left:-0.5rem;top:0.5rem;width:0.25rem;height:0.25rem;border-radius:50%;background-color:rgb(var(--contrast-700));display:block}ol{margin-top:0.25rem;padding-left:1rem}ul{margin-top:0.25rem;padding-left:0}ul ul,ul ol,ol ol,ol ul{margin-left:0}li{margin-bottom:0.25rem}code{font-family:ui-monospace, \"Cascadia Code\", \"Source Code Pro\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace;font-size:0.8125rem;letter-spacing:-0.0125rem;color:rgb(var(--contrast-1300));-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;display:inline-block;border-radius:0.25rem;padding:0.03125rem 0.25rem;background-color:rgb(var(--contrast-600))}pre>code{display:block;margin:0.5rem 0;padding:0.5rem 0.75rem;overflow:auto;white-space:pre-wrap}:host(limel-markdown:not(.no-table-styles)) table{table-layout:auto;min-width:100%;border-collapse:collapse;border-spacing:0;background:transparent;margin:0.75rem 0}:host(limel-markdown:not(.no-table-styles)) tbody{border:1px solid rgb(var(--contrast-400));border-radius:0.25rem}:host(limel-markdown:not(.no-table-styles)) th,:host(limel-markdown:not(.no-table-styles)) td{text-align:left;vertical-align:top;transition:background-color 0.2s ease;font-size:0.875rem}:host(limel-markdown:not(.no-table-styles)) td{padding:0.5rem 0.375rem 0.75rem 0.375rem}:host(limel-markdown:not(.no-table-styles)) tr th{background-color:rgb(var(--contrast-400));padding:0.25rem 0.375rem;font-weight:normal}:host(limel-markdown:not(.no-table-styles)) tr th:only-child{text-align:center}:host(limel-markdown:not(.no-table-styles)) tbody tr:nth-child(odd) td{background-color:rgb(var(--contrast-200))}:host(limel-markdown:not(.no-table-styles)) tbody tr:hover td{background-color:rgb(var(--contrast-300))}table{display:block;box-sizing:border-box;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}kbd{font-family:ui-monospace, \"Cascadia Code\", \"Source Code Pro\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace;font-weight:600;color:rgb(var(--contrast-1100));background-color:rgb(var(--contrast-200));white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:normal;padding:0.125rem 0.5rem;margin:0 0.25rem;box-shadow:var(--button-shadow-normal), 0 0.03125rem 0.21875rem 0 rgba(var(--contrast-100), 0.5) inset;border-radius:0.125rem;border-style:solid;border-color:rgba(var(--contrast-600), 0.8);border-width:0 1px 0.125rem 1px}img{max-width:100%;border-radius:0.25rem}.image-wrapper{display:inline-flex;position:relative}.image-wrapper limel-linear-progress{position:absolute;inset:0.25rem auto auto 0.25rem;width:calc(100% - 0.5rem)}.image-wrapper img{transition:opacity 0.2s ease, scale 0.6s ease}.image-wrapper.state-failed,.image-wrapper.state-loading{background:url(\"data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>\");background-size:0.5rem}.image-wrapper.state-failed img,.image-wrapper.state-loading img{opacity:0.3;scale:0.98}.image-wrapper::before{pointer-events:none;content:\"\";display:block;position:absolute;inset:0;border-radius:0.25rem;transition:border-color 0.4s ease, opacity 0.2s ease, box-shadow 0.6s ease;border:1px dashed transparent;opacity:0.2}.image-wrapper.state-failed img{filter:grayscale(0.8)}.image-wrapper.state-failed:before{opacity:0.8;box-shadow:var(--shadow-error-state)}.image-wrapper:hover::before{opacity:0.8;box-shadow:var(--shadow-depth-8)}.image-wrapper:has(.resize-handle[aria-grabbed=true])::before{border-color:var(--mdc-theme-primary);opacity:0.8;box-shadow:var(--shadow-depth-16), var(--shadow-depth-8)}.resize-handle{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--mdc-theme-on-surface);background-color:rgb(var(--contrast-900));box-shadow:var(--button-shadow-normal);cursor:nwse-resize;position:absolute;display:flex;align-items:center;justify-content:center;width:0.5rem;height:0.5rem;border-radius:50%;opacity:0.6}.resize-handle:hover,.resize-handle:focus,.resize-handle:focus-visible{will-change:color, background-color, box-shadow, transform}.resize-handle:hover{transform:translate3d(0, -0.04rem, 0);color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.resize-handle:active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}.resize-handle:hover,.resize-handle:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.resize-handle:focus{outline:none}.resize-handle:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.resize-handle.top-left{left:-0.25rem;top:-0.25rem;translate:-50%, -50%}.resize-handle.bottom-right{right:-0.25rem;bottom:-0.25rem;translate:50%, 50%}.resize-wrapper:has(.resize-handle[aria-grabbed=true]) .resize-handle,.resize-wrapper:hover .resize-handle,.resize-handle:hover,.resize-handle:focus-visible{opacity:1}.resize-handle[aria-grabbed=true],.resize-handle:hover,.resize-handle:focus-visible{opacity:1;background-color:var(--mdc-theme-primary)}.resize-handle:hover,.resize-handle[aria-grabbed=true]{scale:1.4}.resize-handle:hover:before,.resize-handle[aria-grabbed=true]:before{background-color:rgb(var(--color-white))}.resize-handle:before{content:\"\";display:block;position:absolute;inset:0;margin:auto;border-radius:50%;width:0.25rem;height:0.25rem;background-color:rgb(var(--contrast-100))}";
 
 const DEBOUNCE_TIMEOUT = 300;
 const ProsemirrorAdapter = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.change = index.createEvent(this, "change", 7);
+    this.imagePasted = index.createEvent(this, "imagePasted", 7);
+    this.imageRemoved = index.createEvent(this, "imageRemoved", 7);
     this.changeWaiting = false;
     /**
      *  Used to stop change event emitting as result of getting updated value from consumer
@@ -28088,6 +28470,7 @@ const ProsemirrorAdapter = class {
   }
   disconnectedCallback() {
     var _a, _b, _c;
+    imageCache.clear();
     this.host.removeEventListener('open-editor-link-menu', this.handleOpenLinkMenu);
     (_b = (_a = this.view) === null || _a === void 0 ? void 0 : _a.dom) === null || _b === void 0 ? void 0 : _b.removeEventListener('blur', this.handleBlur);
     (_c = this.view) === null || _c === void 0 ? void 0 : _c.destroy();
@@ -28103,7 +28486,7 @@ const ProsemirrorAdapter = class {
   }
   setupContentConverter() {
     if (this.contentType === 'markdown') {
-      this.contentConverter = new MarkdownConverter(this.customElements);
+      this.contentConverter = new MarkdownConverter(this.customElements, this.language);
     }
     else if (this.contentType === 'html') {
       this.contentConverter = new HTMLConverter(this.customElements);
@@ -28136,6 +28519,7 @@ const ProsemirrorAdapter = class {
     if (this.contentType === 'html') {
       nodes = nodes.append(getTableNodes());
     }
+    nodes = nodes.append(getImageNode(this.language));
     return new Schema({
       nodes: nodes,
       marks: schema$1.spec.marks.append({
@@ -28162,7 +28546,8 @@ const ProsemirrorAdapter = class {
         keymap(this.menuCommandFactory.buildKeymap()),
         createTriggerPlugin(this.triggerCharacters, this.contentConverter),
         createLinkPlugin(this.handleNewLinkSelection),
-        createImageRemoverPlugin(),
+        createImageInserterPlugin(this.imagePasted.emit, this.imageRemoved.emit),
+        createImageViewPlugin(this.language),
         createMenuStateTrackingPlugin(editorMenuTypesArray, this.menuCommandFactory, this.updateActiveActionBarItems),
         createActionBarInteractionPlugin(this.menuCommandFactory),
         ...getTableEditingPlugins(this.contentType === 'html'),