@krainovsd/markdown-editor 0.2.0 → 0.3.1

package/lib/cjs/{index-CDtGUxs-.js → index-DXevyHeZ.js}

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const langMarkdown = require('@codemirror/lang-markdown');
 require('@codemirror/state');
-const index = require('./index-CiorogHq.js');
+const index = require('./index-nRNnOuav.js');
 require('@codemirror/view');
 require('@codemirror/commands');
 require('@codemirror/language');
@@ -49,4 +49,4 @@ const initMarkdown = ({ languages, imageSrcGetter }) => {
 };
 
 exports.initMarkdown = initMarkdown;
-//# sourceMappingURL=index-CDtGUxs-.js.map
+//# sourceMappingURL=index-DXevyHeZ.js.map

package/lib/cjs/{index-CDtGUxs-.js.map → index-DXevyHeZ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index-CDtGUxs-.js","sources":["../../src/extensions/markdown/mention/mention-parser.ts","../../src/extensions/markdown/markdown-parser.ts","../../src/extensions/markdown/init-markdown.ts"],"sourcesContent":["import type { MarkdownConfig } from \"@lezer/markdown\";\nimport { CODE_OF_SPACE, CODE_OF_START_MENTION, NAME_OF_MENTION } from \"./mention-constants\";\n\nexport const mentionParser: MarkdownConfig = {\n  defineNodes: [{ name: NAME_OF_MENTION }],\n  parseInline: [\n    {\n      name: NAME_OF_MENTION,\n      parse(cx, next, pos) {\n        if (next != CODE_OF_START_MENTION) return -1;\n        let end: number = pos + 1;\n        for (let i = pos + 1; i < cx.end; i++) {\n          const next = cx.char(i);\n          if (next === CODE_OF_SPACE) break;\n          end++;\n        }\n\n        return cx.addElement(cx.elt(NAME_OF_MENTION, pos, end));\n      },\n    },\n  ],\n};\n","import type { MarkdownExtension } from \"@lezer/markdown\";\nimport { mentionParser } from \"./mention\";\n\nexport const markdownParserPlugin: MarkdownExtension = [mentionParser];\n","import { markdown, markdownLanguage } from \"@codemirror/lang-markdown\";\nimport { type Extension } from \"@codemirror/state\";\nimport { markdownDecorationPlugin } from \"./markdown-decoration\";\nimport { markdownParserPlugin } from \"./markdown-parser\";\nimport { markdownState } from \"./markdown-state\";\nimport type { InitMarkdownOptions } from \"./markdown-types\";\n\nexport const initMarkdown = ({ languages, imageSrcGetter }: InitMarkdownOptions): Extension => {\n  return [\n    markdownState,\n    markdown({\n      base: markdownLanguage,\n      codeLanguages: languages,\n      addKeymap: true,\n      extensions: [markdownParserPlugin],\n    }),\n    markdownDecorationPlugin({ imageSrcGetter }),\n  ];\n};\n"],"names":["NAME_OF_MENTION","CODE_OF_START_MENTION","CODE_OF_SPACE","markdownState","markdown","markdownLanguage","markdownDecorationPlugin"],"mappings":";;;;;;;;;;;;;;AAGO,MAAM,aAAa,GAAmB;AAC3C,IAAA,WAAW,EAAE,CAAC,EAAE,IAAI,EAAEA,qBAAe,EAAE,CAAC;AACxC,IAAA,WAAW,EAAE;AACX,QAAA;AACE,YAAA,IAAI,EAAEA,qBAAe;AACrB,YAAA,KAAK,CAAC,EAAE,EAAE,IAAI,EAAE,GAAG,EAAA;gBACjB,IAAI,IAAI,IAAIC,2BAAqB;oBAAE,OAAO,CAAC,CAAC;AAC5C,gBAAA,IAAI,GAAG,GAAW,GAAG,GAAG,CAAC;AACzB,gBAAA,KAAK,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;oBACrC,MAAM,IAAI,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;oBACvB,IAAI,IAAI,KAAKC,mBAAa;wBAAE;AAC5B,oBAAA,GAAG,EAAE;;AAGP,gBAAA,OAAO,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,GAAG,CAACF,qBAAe,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;aACxD;AACF,SAAA;AACF,KAAA;CACF;;AClBM,MAAM,oBAAoB,GAAsB,CAAC,aAAa,CAAC;;ACIzD,MAAA,YAAY,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,EAAuB,KAAe;IAC5F,OAAO;QACLG,mBAAa;AACb,QAAAC,qBAAQ,CAAC;AACP,YAAA,IAAI,EAAEC,6BAAgB;AACtB,YAAA,aAAa,EAAE,SAAS;AACxB,YAAA,SAAS,EAAE,IAAI;YACf,UAAU,EAAE,CAAC,oBAAoB,CAAC;SACnC,CAAC;AACF,QAAAC,8BAAwB,CAAC,EAAE,cAAc,EAAE,CAAC;KAC7C;AACH;;;;"}
+{"version":3,"file":"index-DXevyHeZ.js","sources":["../../src/extensions/markdown/mention/mention-parser.ts","../../src/extensions/markdown/markdown-parser.ts","../../src/extensions/markdown/init-markdown.ts"],"sourcesContent":["import type { MarkdownConfig } from \"@lezer/markdown\";\nimport { CODE_OF_SPACE, CODE_OF_START_MENTION, NAME_OF_MENTION } from \"./mention-constants\";\n\nexport const mentionParser: MarkdownConfig = {\n  defineNodes: [{ name: NAME_OF_MENTION }],\n  parseInline: [\n    {\n      name: NAME_OF_MENTION,\n      parse(cx, next, pos) {\n        if (next != CODE_OF_START_MENTION) return -1;\n        let end: number = pos + 1;\n        for (let i = pos + 1; i < cx.end; i++) {\n          const next = cx.char(i);\n          if (next === CODE_OF_SPACE) break;\n          end++;\n        }\n\n        return cx.addElement(cx.elt(NAME_OF_MENTION, pos, end));\n      },\n    },\n  ],\n};\n","import type { MarkdownExtension } from \"@lezer/markdown\";\nimport { mentionParser } from \"./mention\";\n\nexport const markdownParserPlugin: MarkdownExtension = [mentionParser];\n","import { markdown, markdownLanguage } from \"@codemirror/lang-markdown\";\nimport { type Extension } from \"@codemirror/state\";\nimport { markdownDecorationPlugin } from \"./markdown-decoration\";\nimport { markdownParserPlugin } from \"./markdown-parser\";\nimport { markdownState } from \"./markdown-state\";\nimport type { InitMarkdownOptions } from \"./markdown-types\";\n\nexport const initMarkdown = ({ languages, imageSrcGetter }: InitMarkdownOptions): Extension => {\n  return [\n    markdownState,\n    markdown({\n      base: markdownLanguage,\n      codeLanguages: languages,\n      addKeymap: true,\n      extensions: [markdownParserPlugin],\n    }),\n    markdownDecorationPlugin({ imageSrcGetter }),\n  ];\n};\n"],"names":["NAME_OF_MENTION","CODE_OF_START_MENTION","CODE_OF_SPACE","markdownState","markdown","markdownLanguage","markdownDecorationPlugin"],"mappings":";;;;;;;;;;;;;;AAGO,MAAM,aAAa,GAAmB;AAC3C,IAAA,WAAW,EAAE,CAAC,EAAE,IAAI,EAAEA,qBAAe,EAAE,CAAC;AACxC,IAAA,WAAW,EAAE;AACX,QAAA;AACE,YAAA,IAAI,EAAEA,qBAAe;AACrB,YAAA,KAAK,CAAC,EAAE,EAAE,IAAI,EAAE,GAAG,EAAA;gBACjB,IAAI,IAAI,IAAIC,2BAAqB;oBAAE,OAAO,CAAC,CAAC;AAC5C,gBAAA,IAAI,GAAG,GAAW,GAAG,GAAG,CAAC;AACzB,gBAAA,KAAK,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;oBACrC,MAAM,IAAI,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;oBACvB,IAAI,IAAI,KAAKC,mBAAa;wBAAE;AAC5B,oBAAA,GAAG,EAAE;;AAGP,gBAAA,OAAO,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,GAAG,CAACF,qBAAe,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;aACxD;AACF,SAAA;AACF,KAAA;CACF;;AClBM,MAAM,oBAAoB,GAAsB,CAAC,aAAa,CAAC;;ACIzD,MAAA,YAAY,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,EAAuB,KAAe;IAC5F,OAAO;QACLG,mBAAa;AACb,QAAAC,qBAAQ,CAAC;AACP,YAAA,IAAI,EAAEC,6BAAgB;AACtB,YAAA,aAAa,EAAE,SAAS;AACxB,YAAA,SAAS,EAAE,IAAI;YACf,UAAU,EAAE,CAAC,oBAAoB,CAAC;SACnC,CAAC;AACF,QAAAC,8BAAwB,CAAC,EAAE,cAAc,EAAE,CAAC;KAC7C;AACH;;;;"}

package/lib/cjs/{index-CiorogHq.js → index-nRNnOuav.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();
@@ -813,6 +824,7 @@ const markdownState = state.StateField.define({
             openedImage: undefined,
             imageSrcGetter: undefined,
             openedLink: undefined,
+            uniqueId: randomString(10),
         };
     },
     update(value, transaction) {
@@ -835,38 +847,39 @@ 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 EXISTING_WIDGETS = new Set();
-let interval = null;
 class ImageWidget extends view.WidgetType {
     text;
     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];
-        EXISTING_WIDGETS.delete(this.key);
         if (image.src !== widget.src)
             image.src = widget.src;
         if (image.alt !== widget.text)
@@ -877,36 +890,41 @@ class ImageWidget extends view.WidgetType {
         this.to = widget.to;
         this.registerListeners(image);
         IMAGE_NODES[this.key] = image;
-        EXISTING_WIDGETS.add(this.key);
         return true;
     }
     updateDOM() {
         return true;
     }
     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;
-        if (!interval)
-            interval = setInterval(garbageCollectorInterval, INTERVAL_DELAY);
-        return 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;
+        return container;
     }
-    destroy() {
-        EXISTING_WIDGETS.delete(this.key);
+    destroy(dom) {
+        delete IMAGE_NODES[this.key];
+        dom.destroy?.();
     }
     registerListeners(image) {
         image.clearListeners?.();
@@ -921,18 +939,6 @@ class ImageWidget extends view.WidgetType {
         };
     }
 }
-function garbageCollectorInterval() {
-    for (const [key, node] of Object.entries(IMAGE_NODES)) {
-        if (EXISTING_WIDGETS.has(key) || !node)
-            continue;
-        delete IMAGE_NODES[key];
-        node.destroy?.();
-    }
-    if (Object.keys(IMAGE_NODES).length === 0 && interval) {
-        clearInterval(interval);
-        interval = null;
-    }
-}
 /** recursively find the link text node in line */
 function getTextNode$1(text, link, key, line) {
     if (!line)
@@ -1026,9 +1032,12 @@ function getImageDecorations({ decorations, node, view }) {
     }
     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, imageSrcGetter, view),
     }));
 }
 function getImageSelectionDecorations({ decorations, node, view, forceActive, }) {
@@ -1037,7 +1046,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({
@@ -1196,17 +1206,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];
@@ -1379,7 +1391,8 @@ function getLinkSelectionDecorations({ decorations, node, view, forceActive, })
     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 +1407,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 +1428,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 +1444,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 {
@@ -1797,7 +1811,7 @@ const initExtensions = async ({ onBlur, onChange, onFocus, onEnter, onEscape, re
             light,
         }),
         new Promise((resolve) => {
-            void Promise.resolve().then(() => require('./index-CDtGUxs-.js')).then(({ initMarkdown }) => {
+            void Promise.resolve().then(() => require('./index-DXevyHeZ.js')).then(({ initMarkdown }) => {
                 resolve(initMarkdown({ languages, imageSrcGetter }));
             });
         }),
@@ -1873,17 +1887,19 @@ async function initEditor({ multiCursor, root, initialText, ...rest }) {
         state,
         parent: root,
     });
-    return { view: view$1, provider };
+    return { view: view$1, provider, multiCursorText };
 }
 
 class Editor {
     view;
     provider;
     arguments;
+    yText;
     constructor(options) {
         void initEditor(options).then((editor) => {
             this.view = editor.view;
             this.provider = editor.provider;
+            this.yText = editor.multiCursorText;
         });
         this.arguments = options;
     }
@@ -1916,6 +1932,22 @@ class Editor {
             this.view.dispatch(transaction);
         });
     };
+    replaceContent = (content) => {
+        // if (!this.yText) return;
+        // this.yText.delete(0, this.yText.length);
+        // this.yText.insert(0, content);
+        // return;
+        if (!this.view)
+            return;
+        const transaction = this.view.state.update({
+            changes: { from: 0, to: this.view.state.doc.length, insert: content },
+        });
+        saveDispatch(() => {
+            if (!this.view)
+                return;
+            this.view.dispatch(transaction);
+        });
+    };
     setReadonly = (readonly) => {
         saveDispatch(() => {
             if (!this.view)
@@ -1980,4 +2012,4 @@ exports.Editor = Editor;
 exports.NAME_OF_MENTION = NAME_OF_MENTION;
 exports.markdownDecorationPlugin = markdownDecorationPlugin;
 exports.markdownState = markdownState;
-//# sourceMappingURL=index-CiorogHq.js.map
+//# sourceMappingURL=index-nRNnOuav.js.map