@krainovsd/markdown-editor 0.3.0 → 0.3.2

package/lib/cjs/{index-D7RdBXAA.js → index-BgxbH3r2.js}

@@ -75,6 +75,17 @@ function isInRange(ranges, text) {
     return ranges.some((range) => isRangeOverlap([range.from, range.to], text));
 }
 
+function randomString(length = 10) {
+    const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    let result = "";
+    let counter = 0;
+    while (counter < length) {
+        result += characters.charAt(Math.floor(Math.random() * characters.length));
+        counter += 1;
+    }
+    return result;
+}
+
 function saveDispatch(dispatch) {
     queueMicrotask(() => {
         dispatch();
@@ -806,13 +817,12 @@ const horizontalDecorationPlugin = {
 
 const openedImageEffect = state.StateEffect.define();
 const openedLinkEffect = state.StateEffect.define();
-const imageSrcGetterEffect = state.StateEffect.define();
 const markdownState = state.StateField.define({
     create() {
         return {
             openedImage: undefined,
-            imageSrcGetter: undefined,
             openedLink: undefined,
+            uniqueId: randomString(10),
         };
     },
     update(value, transaction) {
@@ -820,8 +830,6 @@ const markdownState = state.StateField.define({
         for (const effect of transaction.effects) {
             if (effect.is(openedImageEffect))
                 newValue.openedImage = effect.value;
-            if (effect.is(imageSrcGetterEffect))
-                newValue.imageSrcGetter = effect.value;
             if (effect.is(openedLinkEffect))
                 newValue.openedLink = effect.value;
         }
@@ -835,8 +843,8 @@ const CODE_OF_END_IMAGE_TEXT = 93; // ]
 const CODE_OF_START_IMAGE_URL = 40; // (
 const CODE_OF_END_IMAGE_URL = 41; // )
 
-const INTERVAL_DELAY = 10000;
 const IMAGE_NODES = {};
+const INTERVAL_DELAY = 10000;
 const EXISTING_WIDGETS = new Set();
 let interval = null;
 class ImageWidget extends view.WidgetType {
@@ -844,25 +852,30 @@ class ImageWidget extends view.WidgetType {
     link;
     from;
     to;
+    uniqueId;
+    fullLine;
     imageSrcGetter;
     view;
-    constructor(text, link, from, to, imageSrcGetter, view) {
+    constructor(text, link, from, to, uniqueId, fullLine, imageSrcGetter, view) {
         super();
         this.text = text;
         this.link = link;
         this.from = from;
         this.to = to;
+        this.uniqueId = uniqueId;
+        this.fullLine = fullLine;
         this.imageSrcGetter = imageSrcGetter;
         this.view = view;
     }
     get key() {
-        return `${this.link}:${this.text}:${this.from}:${this.to}`;
+        return `${this.link}:${this.text}:${this.uniqueId}:${this.from}:${this.to}`;
     }
     get src() {
         return this.imageSrcGetter ? this.imageSrcGetter(this.link) : this.link;
     }
     eq(widget) {
-        const image = IMAGE_NODES[this.key];
+        const container = IMAGE_NODES[this.key];
+        const image = container?.image;
         if (!image)
             return false;
         delete IMAGE_NODES[this.key];
@@ -885,25 +898,33 @@ class ImageWidget extends view.WidgetType {
     }
     toDOM() {
         EXISTING_WIDGETS.add(this.key);
-        let image = IMAGE_NODES[this.key];
-        if (image) {
+        let container = IMAGE_NODES[this.key];
+        let image = container?.image;
+        if (image && container) {
             if (image.src !== this.src) {
                 image.src = this.src;
             }
             if (image.alt !== this.text)
                 image.alt = this.text;
-            return image;
+            return container;
         }
         image = document.createElement("img");
         image.classList.add(styles.image);
         image.alt = this.text;
         image.src = this.src;
         image.style.maxWidth = "100%";
-        this.registerListeners(image);
-        IMAGE_NODES[this.key] = image;
+        container = document.createElement("span");
+        container.appendChild(image);
+        container.image = image;
+        if (this.fullLine) {
+            container.style.width = "100%";
+            container.style.display = "inline-block";
+        }
+        this.registerListeners(container);
+        IMAGE_NODES[this.key] = container;
         if (!interval)
             interval = setInterval(garbageCollectorInterval, INTERVAL_DELAY);
-        return image;
+        return container;
     }
     destroy() {
         EXISTING_WIDGETS.delete(this.key);
@@ -921,6 +942,7 @@ class ImageWidget extends view.WidgetType {
         };
     }
 }
+/** for disable cache */
 function garbageCollectorInterval() {
     for (const [key, node] of Object.entries(IMAGE_NODES)) {
         if (EXISTING_WIDGETS.has(key) || !node)
@@ -1020,15 +1042,17 @@ function handleClick$1(view, text, link, key, event) {
     return false;
 }
 
-function getImageDecorations({ decorations, node, view }) {
+function getImageDecorations({ decorations, node, view, settings }) {
     if (node.name !== NAME_OF_IMAGE) {
         return;
     }
     const { text, url } = parseInfo(view, node);
-    const imageSrcGetter = view.state.field(markdownState).imageSrcGetter;
+    const uniqueId = view.state.field(markdownState).uniqueId;
+    const line = view.lineBlockAt(node.from);
+    const fullLine = line.from === node.from && line.to === node.to;
     decorations.push(getWidgetDecorationOptions({
         range: [node.to],
-        widget: new ImageWidget(text, url, node.from, node.to, imageSrcGetter, view),
+        widget: new ImageWidget(text, url, node.from, node.to, uniqueId, fullLine, settings.imageSrcGetter, view),
     }));
 }
 function getImageSelectionDecorations({ decorations, node, view, forceActive, }) {
@@ -1037,7 +1061,8 @@ function getImageSelectionDecorations({ decorations, node, view, forceActive, })
     }
     const { text, url } = parseInfo(view, node);
     const openedImage = view.state.field(markdownState).openedImage;
-    const key = `${url}:${text}:${node.from}:${node.to}`;
+    const uniqueId = view.state.field(markdownState).uniqueId;
+    const key = `${url}:${text}:${uniqueId}:${node.from}:${node.to}`;
     const isOpened = openedImage && openedImage === key;
     if (isOpened) {
         return void decorations.push(getMarkDecoration({
@@ -1105,12 +1130,12 @@ function getItalicDecorations({ decorations, node }) {
         range: [node.from, node.to],
     }));
 }
-function getItalicSelectionDecorations({ decorations, node, view, forceActive, }) {
+function getItalicSelectionDecorations({ decorations, node, view, forceActive, settings, }) {
     if (node.name !== NAME_OF_ITALIC) {
         return;
     }
-    if (checkIsSeveralEmphasis({ decorations, node, view, forceActive })) {
-        return void splitEmphasis({ decorations, node, view, forceActive });
+    if (checkIsSeveralEmphasis({ decorations, node, view, forceActive, settings })) {
+        return void splitEmphasis({ decorations, node, view, forceActive, settings });
     }
     let step = 1;
     const startText = view.state.doc.sliceString(node.from, node.from + 3);
@@ -1139,7 +1164,7 @@ function checkIsSeveralEmphasis({ node, view }) {
         return true;
     return false;
 }
-function splitEmphasis({ decorations, node, view, forceActive }) {
+function splitEmphasis({ decorations, node, view, forceActive, settings, }) {
     const text = view.state.doc.sliceString(node.from, node.to);
     let marks = 0;
     let pos = 0;
@@ -1153,12 +1178,14 @@ function splitEmphasis({ decorations, node, view, forceActive }) {
         view,
         node: { ...node, name: node.name, from: node.from, to: node.from + pos },
         forceActive,
+        settings,
     });
     getItalicSelectionDecorations({
         decorations,
         view,
         node: { ...node, name: node.name, from: node.from + pos, to: node.to },
         forceActive,
+        settings,
     });
 }
 const italicDecorationPlugin = {
@@ -1196,17 +1223,19 @@ class LinkWidget extends view.WidgetType {
     link;
     from;
     to;
+    uniqueId;
     view;
-    constructor(text, link, from, to, view) {
+    constructor(text, link, from, to, uniqueId, view) {
         super();
         this.text = text;
         this.link = link;
         this.from = from;
         this.to = to;
+        this.uniqueId = uniqueId;
         this.view = view;
     }
     get key() {
-        return `${this.link}:${this.text}:${this.from}:${this.to}`;
+        return `${this.link}:${this.text}:${this.uniqueId}:${this.from}:${this.to}`;
     }
     eq(widget) {
         const anchor = LINK_NODES[this.key];
@@ -1348,7 +1377,7 @@ function handleClick(view, text, link, key, event) {
     return false;
 }
 
-function getLinkSelectionDecorations({ decorations, node, view, forceActive, }) {
+function getLinkSelectionDecorations({ decorations, node, view, forceActive, settings, }) {
     if (node.name !== NAME_OF_LINK) {
         return;
     }
@@ -1375,11 +1404,12 @@ function getLinkSelectionDecorations({ decorations, node, view, forceActive, })
             urlCoordinates.to = pos;
     }
     if (urlCoordinates.from === -1 || urlCoordinates.to === -1)
-        return void getLinkLabelSelectionDecoration({ decorations, forceActive, node, view });
+        return void getLinkLabelSelectionDecoration({ decorations, forceActive, node, view, settings });
     const text = content.substring(textCoordinates.from, textCoordinates.to);
     const url = content.substring(urlCoordinates.from, urlCoordinates.to);
     const openedLink = view.state.field(markdownState).openedLink;
-    const key = `${url}:${text}:${node.from}:${node.to}`;
+    const uniqueId = view.state.field(markdownState).uniqueId;
+    const key = `${url}:${text}:${uniqueId}:${node.from}:${node.to}`;
     const isOpened = openedLink && openedLink === key;
     if (isOpened) {
         return void decorations.push(getMarkDecoration({
@@ -1394,7 +1424,7 @@ function getLinkSelectionDecorations({ decorations, node, view, forceActive, })
         !isInRange(view.state.selection.ranges, [node.from, node.to])) {
         decorations.push(getReplaceDecoration({
             range: [node.from, node.to],
-            widget: new LinkWidget(text, url, node.from, node.to, view),
+            widget: new LinkWidget(text, url, node.from, node.to, uniqueId, view),
         }));
     }
     else {
@@ -1415,7 +1445,8 @@ function getAutoLinkSelectionDecorations({ decorations, node, view, forceActive,
         return;
     const url = view.state.doc.sliceString(node.from + 1, node.to - 1);
     const openedLink = view.state.field(markdownState).openedLink;
-    const key = `${url}:${url}:${node.from}:${node.to}`;
+    const uniqueId = view.state.field(markdownState).uniqueId;
+    const key = `${url}:${url}:${uniqueId}:${node.from}:${node.to}`;
     const isOpened = openedLink && openedLink === key;
     if (isOpened) {
         return void decorations.push(getMarkDecoration({
@@ -1430,7 +1461,7 @@ function getAutoLinkSelectionDecorations({ decorations, node, view, forceActive,
         !isInRange(view.state.selection.ranges, [node.from, node.to])) {
         decorations.push(getReplaceDecoration({
             range: [node.from, node.to],
-            widget: new LinkWidget(url, url, node.from, node.to, view),
+            widget: new LinkWidget(url, url, node.from, node.to, uniqueId, view),
         }));
     }
     else {
@@ -1679,7 +1710,7 @@ const SKIP_MARKS = new Set([
     "HeaderMark",
     "TaskMarker",
 ]);
-function createDecorationsGetter() {
+function createDecorationsGetter(settings) {
     let markdownDecorationsCache = [];
     let markdownSelectionDecorationsCache = [];
     function getDecorations(view$1, isChanged, mouseReleased) {
@@ -1700,7 +1731,7 @@ function createDecorationsGetter() {
                         return;
                     /** Decoration by change content */
                     if (processDecorations)
-                        decorationFunctions.forEach((f) => f({ decorations, node, view: view$1 }));
+                        decorationFunctions.forEach((f) => f({ decorations, node, view: view$1, settings }));
                     /** Decoration by selection content  */
                     if (processSelectionDecorations)
                         selectionDecorationFunctions.forEach((f) => f({
@@ -1708,6 +1739,7 @@ function createDecorationsGetter() {
                             node,
                             view: view$1,
                             forceActive: isReadonly,
+                            settings,
                         }));
                 },
             });
@@ -1722,7 +1754,7 @@ function createDecorationsGetter() {
     }
     return getDecorations;
 }
-const markdownDecorationPlugin = (stateConfig) => {
+const markdownDecorationPlugin = (settings) => {
     return view.ViewPlugin.fromClass(class DecorationMarkdown {
         decorations;
         mouseReleased = true;
@@ -1730,17 +1762,12 @@ const markdownDecorationPlugin = (stateConfig) => {
         view;
         decorationGetter;
         constructor(view) {
-            this.decorationGetter = createDecorationsGetter();
+            this.decorationGetter = createDecorationsGetter(settings);
             this.decorations = this.decorationGetter(view, true, this.mouseReleased);
             this.dom = view.dom;
             this.view = view;
             document.addEventListener("mousedown", this.onMouseDown.bind(this));
             document.addEventListener("mouseup", this.onMouseUp.bind(this));
-            saveDispatch(() => {
-                this.view.dispatch(this.view.state.update({
-                    effects: [imageSrcGetterEffect.of(stateConfig.imageSrcGetter)],
-                }));
-            });
         }
         update(update) {
             const isDocumentChanged = update.docChanged ||
@@ -1797,7 +1824,7 @@ const initExtensions = async ({ onBlur, onChange, onFocus, onEnter, onEscape, re
             light,
         }),
         new Promise((resolve) => {
-            void Promise.resolve().then(() => require('./index-nYYQ5dvl.js')).then(({ initMarkdown }) => {
+            void Promise.resolve().then(() => require('./index-DU8JMAfc.js')).then(({ initMarkdown }) => {
                 resolve(initMarkdown({ languages, imageSrcGetter }));
             });
         }),
@@ -1998,4 +2025,4 @@ exports.Editor = Editor;
 exports.NAME_OF_MENTION = NAME_OF_MENTION;
 exports.markdownDecorationPlugin = markdownDecorationPlugin;
 exports.markdownState = markdownState;
-//# sourceMappingURL=index-D7RdBXAA.js.map
+//# sourceMappingURL=index-BgxbH3r2.js.map