@krainovsd/markdown-editor 0.1.3 → 0.2.0

package/lib/cjs/{index-DPZa3gzd.js → index-CiorogHq.js}

@@ -1,15 +1,17 @@
 'use strict';
 
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const langMarkdown = require('@codemirror/lang-markdown');
-const language = require('@codemirror/language');
 const view = require('@codemirror/view');
+const state = require('@codemirror/state');
+const commands = require('@codemirror/commands');
+const language = require('@codemirror/language');
+const highlight = require('@lezer/highlight');
+require('@codemirror/lang-markdown');
 const clsx = require('clsx');
-const index = require('./index-Czx0hvPo.js');
-require('@lezer/highlight');
-require('@codemirror/state');
-require('@codemirror/commands');
+require('y-websocket');
+
+const ReadonlyCompartment = new state.Compartment();
+const VimModeCompartment = new state.Compartment();
+const ThemeCompartment = new state.Compartment();
 
 function copyToClipboard(content) {
     if (navigator.clipboard && window.isSecureContext) {
@@ -44,34 +46,15 @@ function fallbackCopyTextToClipboard(content) {
     });
 }
 
-function tick({ deep = 1, maxDeep = 1, delay = 0, recursiveCondition, delayGetter, type = "macro", }) {
-    return new Promise((resolve) => {
-        if (type === "micro") {
-            if (deep >= maxDeep || !recursiveCondition || recursiveCondition())
-                resolve(1);
-            else
-                void tick({ deep: deep + 1, maxDeep, delay, recursiveCondition, type, delayGetter }).then(() => resolve(1));
-        }
-        if (type === "macro") {
-            const currentDelay = delayGetter ? delayGetter(deep) : delay;
-            setTimeout(() => {
-                if (deep >= maxDeep || !recursiveCondition || recursiveCondition())
-                    resolve(1);
-                else
-                    void tick({ deep: deep + 1, maxDeep, delay, recursiveCondition, type, delayGetter }).then(() => resolve(1));
-            }, currentDelay);
-        }
-    });
-}
-
 function getLineDecoration({ style, range }) {
     return view.Decoration.line({
         class: style,
     }).range(range[0], range[1]);
 }
-function getMarkDecoration({ range, style }) {
+function getMarkDecoration({ range, style, attributes }) {
     return view.Decoration.mark({
         class: style,
+        attributes,
     }).range(range[0], range[1]);
 }
 function getHideDecoration({ range }) {
@@ -92,6 +75,312 @@ function isInRange(ranges, text) {
     return ranges.some((range) => isRangeOverlap([range.from, range.to], text));
 }
 
+function saveDispatch(dispatch) {
+    queueMicrotask(() => {
+        dispatch();
+    });
+}
+
+/**
+ * t.processingInstruction, t.meta - # () []
+ * t.url, t.link - links
+ */
+function getHighlightTemplate(config) {
+    return language.syntaxHighlighting(language.HighlightStyle.define([
+        { tag: highlight.tags.keyword, color: config.keyword },
+        { tag: [highlight.tags.name, highlight.tags.deleted, highlight.tags.character, highlight.tags.macroName], color: config.variable },
+        { tag: [highlight.tags.propertyName], color: config.function },
+        {
+            tag: [highlight.tags.string, highlight.tags.inserted, highlight.tags.special(highlight.tags.string)],
+            color: config.string,
+        },
+        { tag: [highlight.tags.function(highlight.tags.variableName), highlight.tags.labelName], color: config.function },
+        { tag: [highlight.tags.color, highlight.tags.constant(highlight.tags.name), highlight.tags.standard(highlight.tags.name)], color: config.constant },
+        { tag: [highlight.tags.definition(highlight.tags.name), highlight.tags.separator], color: config.variable },
+        { tag: [highlight.tags.className], color: config.class },
+        {
+            tag: [highlight.tags.number, highlight.tags.changed, highlight.tags.annotation, highlight.tags.modifier, highlight.tags.self, highlight.tags.namespace],
+            color: config.number,
+        },
+        { tag: [highlight.tags.typeName], color: config.type, fontStyle: config.type },
+        { tag: [highlight.tags.operator, highlight.tags.operatorKeyword], color: config.keyword },
+        { tag: [highlight.tags.escape, highlight.tags.regexp], color: config.regexp },
+        { tag: [highlight.tags.comment], color: config.comment },
+        { tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: config.variable },
+        { tag: highlight.tags.invalid, color: config.invalid },
+    ]));
+}
+
+const CLASSES = {
+    listCommon: "cm-list-common",
+    code: "cm-code",
+    codeButton: "cm-code-button",
+    codeButtonSuccess: "cm-code-button-success",
+    codeButtonFail: "cm-code-button-fail",
+    codeButtonPending: "cm-code-button-pending",
+    codeButtonSpan: "cm-code-span",
+    horizontal: "cm-horizontal",
+    blockquote: "cm-blockquote",
+    blockquoteInner: "cm-blockquote-inner",
+    link: "cm-link",
+    mention: "cm-mention",
+};
+
+function getThemeTemplate(dark, config) {
+    return view.EditorView.theme({
+        "&": {
+            color: config.color,
+            backgroundColor: config.background,
+        },
+        ".cm-content": {
+            fontFamily: config.fontFamily || "Montserrat",
+        },
+        "&.cm-focused > .cm-scroller > .cm-selectionLayer > .cm-selectionBackground": {
+            background: config.vimSelectionFocused,
+        },
+        "& .cm-selectionBackground": {
+            background: config.vimSelection,
+        },
+        "&.cm-editor.cm-focused": { outline: "none" },
+        "&.cm-editor": {
+            height: "100%",
+            width: "100%",
+        },
+        [`.${CLASSES.listCommon}:after`]: {
+            background: config.color,
+        },
+        [`.${CLASSES.code}`]: {
+            background: config.codeBackground,
+            color: config.codeColor,
+        },
+        [`.${CLASSES.horizontal}`]: {
+            borderBottomColor: config.horizontalColor,
+        },
+        [`.${CLASSES.link}`]: {
+            color: config.linkColor,
+        },
+        [`.${CLASSES.blockquote}`]: {
+            borderLeftColor: config.blockquoteColor,
+        },
+        [`.${CLASSES.blockquoteInner}:before`]: {
+            borderLeftColor: config.blockquoteColor,
+        },
+        [`.${CLASSES.codeButton}`]: {
+            color: config.codeButtonColor,
+        },
+        [`.${CLASSES.codeButton}:hover`]: {
+            background: config.codeButtonBackground,
+        },
+        [`.${CLASSES.codeButtonSuccess}:after`]: {
+            borderColor: config.codeButtonColor,
+        },
+        [`.${CLASSES.codeButtonFail}:after`]: {
+            background: config.codeButtonColor,
+        },
+        [`.${CLASSES.codeButtonFail}:before`]: {
+            background: config.codeButtonColor,
+        },
+        [`.${CLASSES.codeButtonPending}:before`]: {
+            borderColor: config.codeBackground,
+            borderTopColor: config.codeButtonColor,
+        },
+        [`.${CLASSES.mention}`]: {
+            color: config.mentionColor,
+        },
+    }, { dark });
+}
+
+const HIGHLIGHT_CONFIG$1 = {
+    keyword: "#f97583",
+    variable: "#ffab70",
+    function: "#79b8ff",
+    string: "#9ecbff",
+    constant: "#79b8ff",
+    type: "#79b8ff",
+    class: "#b392f0",
+    number: "#79b8ff",
+    comment: "#6a737d",
+    heading: "#79b8ff",
+    invalid: "#f97583",
+    regexp: "#9ecbff",
+};
+const THEME_CONFIG$1 = {
+    background: "#2E3235",
+    blockquoteColor: "#8A5CF5", // #6A8695
+    codeBackground: "#24292e",
+    codeButtonBackground: "#434C54FF",
+    codeButtonColor: "#DDDDDD",
+    codeColor: "#DDDDDD",
+    color: "#DDDDDD",
+    fontFamily: "Montserrat",
+    horizontalColor: "#DDDDDD",
+    linkColor: "#8A5CF5",
+    mentionColor: "#8A5CF5",
+    vimSelection: "#1A1919FF",
+    vimSelectionFocused: "#2E4B4BFF",
+};
+function getDarkTheme({ dark }) {
+    const highlightConfig = { ...HIGHLIGHT_CONFIG$1, ...(dark?.highlightConfig || {}) };
+    const themeConfig = { ...THEME_CONFIG$1, ...(dark?.themeConfig || {}) };
+    return [getThemeTemplate(true, themeConfig), getHighlightTemplate(highlightConfig)];
+}
+
+const HIGHLIGHT_CONFIG = {
+    keyword: "#9854f1",
+    variable: "#3760bf",
+    function: "#2e7de9",
+    string: "#587539",
+    constant: "#9854f1",
+    type: "#07879d",
+    class: "#3760bf",
+    number: "#b15c00",
+    comment: "#9da3c2",
+    heading: "#006a83",
+    invalid: "#ff3e64",
+    regexp: "#2e5857",
+};
+const THEME_CONFIG = {
+    background: "transparent",
+    blockquoteColor: "#8A5CF5", // #6A8695
+    codeBackground: "#e1e2e7",
+    codeButtonBackground: "#CCCCCDFF",
+    codeButtonColor: "#000000",
+    codeColor: "#000000",
+    color: "#000000",
+    fontFamily: "Montserrat",
+    horizontalColor: "#000000",
+    linkColor: "#8A5CF5",
+    mentionColor: "#8A5CF5",
+    vimSelection: "#d9d9d9",
+    vimSelectionFocused: "#d7d4f0",
+};
+function getLightTheme({ light }) {
+    const highlightConfig = { ...HIGHLIGHT_CONFIG, ...(light?.highlightConfig || {}) };
+    const themeConfig = { ...THEME_CONFIG, ...(light?.themeConfig || {}) };
+    return [getThemeTemplate(false, themeConfig), getHighlightTemplate(highlightConfig)];
+}
+
+const initTheme = (options) => {
+    const extensions = [
+        view.EditorView.lineWrapping,
+        ThemeCompartment.of(options.theme === "dark" ? getDarkTheme(options) : getLightTheme(options)),
+    ];
+    return extensions;
+};
+
+let vimMode = false;
+let theme = "light";
+const initKeyMaps = async ({ onEnter, onEscape, multiCursorMode, keyMaps, defaultKeyMaps, theme: initialTheme, vimMode: initialVimMode, dark, light, }) => {
+    vimMode = initialVimMode;
+    theme = initialTheme;
+    /** tab */
+    const keyBindings = [commands.indentWithTab];
+    /** standard  */
+    keyBindings.push(...commands.standardKeymap.map((keyMap) => {
+        if (keyMap.key === "Enter" && onEnter) {
+            return {
+                key: "Enter",
+                shift: keyMap.run,
+                run: (view) => {
+                    const response = onEnter(view);
+                    if (response)
+                        keyMap.run?.(view);
+                    return response;
+                },
+            };
+        }
+        return keyMap;
+    }));
+    /** vim */
+    if (defaultKeyMaps?.vim)
+        keyBindings.push({
+            key: "Mod-Alt-v",
+            run: (view$1) => {
+                vimMode = !vimMode;
+                void import('@replit/codemirror-vim').then(({ vim }) => {
+                    saveDispatch(() => {
+                        view$1.dispatch({
+                            effects: VimModeCompartment.reconfigure(vimMode ? [vim({ status: true }), view.drawSelection()] : []),
+                        });
+                    });
+                });
+                return true;
+            },
+        });
+    /** theme */
+    if (defaultKeyMaps?.theme)
+        keyBindings.push({
+            key: "Mod-Alt-a",
+            run: (view) => {
+                theme = theme === "light" ? "dark" : "light";
+                saveDispatch(() => {
+                    view.dispatch({
+                        effects: ThemeCompartment.reconfigure(theme === "dark"
+                            ? getDarkTheme({
+                                dark,
+                                light,
+                                theme,
+                            })
+                            : getLightTheme({
+                                dark,
+                                light,
+                                theme,
+                            })),
+                    });
+                });
+                return true;
+            },
+        });
+    /** escape */
+    if (onEscape) {
+        keyBindings.push({
+            key: "Escape",
+            run: (view) => {
+                return onEscape(view);
+            },
+        });
+    }
+    /** custom */
+    if (keyMaps) {
+        keyBindings.push(...keyMaps);
+    }
+    /** history */
+    if (multiCursorMode) {
+        const { yUndoManagerKeymap } = await import('y-codemirror.next');
+        keyBindings.push(...yUndoManagerKeymap);
+    }
+    else {
+        keyBindings.push(...commands.historyKeymap);
+    }
+    return view.keymap.of(keyBindings);
+};
+
+function getChangeEvent({ onChange }) {
+    return onChange
+        ? view.EditorView.updateListener.of((e) => {
+            if (e.docChanged) {
+                onChange(e);
+            }
+        })
+        : [];
+}
+
+function getFocusEvent({ onBlur, onFocus }) {
+    return onFocus || onBlur
+        ? view.EditorView.focusChangeEffect.of((e, focus) => {
+            if (focus && onFocus)
+                onFocus(e);
+            else if (!focus && onBlur)
+                onBlur(e);
+            return null;
+        })
+        : [];
+}
+
+function initListeners({ onBlur, onChange, onFocus }) {
+    return [getChangeEvent({ onChange }), getFocusEvent({ onBlur, onFocus })];
+}
+
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
@@ -138,7 +427,7 @@ class BlockquoteWidget extends view.WidgetType {
         span.classList.add(styles.blockquote__inner);
         if (this.deep)
             span.classList.add(styles["blockquote__inner-deep"]);
-        span.classList.add(index.CLASSES.blockquoteInner);
+        span.classList.add(CLASSES.blockquoteInner);
         return span;
     }
 }
@@ -173,12 +462,12 @@ function getBlockquoteDecorations({ decorations, node, view }) {
     }
     if (!isInner) {
         decorations.push(getLineDecoration({
-            style: clsx(styles.blockquote, index.CLASSES.blockquote),
+            style: clsx(styles.blockquote, CLASSES.blockquote),
             range: [line.from],
         }));
     }
 }
-function getBlockquoteSelectionDecorations({ decorations, node, view, isReadonly, }) {
+function getBlockquoteSelectionDecorations({ decorations, node, view, forceActive, }) {
     if (node.name !== NAME_OF_BLOCKQUOTE_MARK) {
         return;
     }
@@ -211,7 +500,7 @@ function getBlockquoteSelectionDecorations({ decorations, node, view, isReadonly
             pos = -1;
         }
     }
-    if (isReadonly ||
+    if (forceActive ||
         !view.hasFocus ||
         !isInRange(view.state.selection.ranges, [line.from, line.to])) {
         if (!isInner)
@@ -244,7 +533,7 @@ function getBoldDecorations({ decorations, node, view }) {
         range: [node.from - step, node.to + step],
     }));
 }
-function getBoldSelectionDecorations({ decorations, node, view, isReadonly, }) {
+function getBoldSelectionDecorations({ decorations, node, view, forceActive, }) {
     if (node.name !== NAME_OF_BOLD) {
         return;
     }
@@ -252,7 +541,7 @@ function getBoldSelectionDecorations({ decorations, node, view, isReadonly, }) {
         language.syntaxTree(view.state).resolve(node.from - 1).type.name !== "Emphasis") {
         return;
     }
-    if (isReadonly ||
+    if (forceActive ||
         !view.hasFocus ||
         !isInRange(view.state.selection.ranges, [node.from, node.to])) {
         decorations.push(getHideDecoration({ range: [node.from, node.from + 2] }));
@@ -286,34 +575,34 @@ class CodeWidget extends view.WidgetType {
             const button = this.button;
             clearTimeout(this.timer);
             button.classList.remove(styles.pending);
-            button.classList.remove(index.CLASSES.codeButtonPending);
+            button.classList.remove(CLASSES.codeButtonPending);
             button.classList.remove(styles.success);
-            button.classList.remove(index.CLASSES.codeButtonSuccess);
+            button.classList.remove(CLASSES.codeButtonSuccess);
             button.classList.remove(styles.fail);
-            button.classList.remove(index.CLASSES.codeButtonFail);
+            button.classList.remove(CLASSES.codeButtonFail);
             button.classList.add(styles.pending);
-            button.classList.add(index.CLASSES.codeButtonPending);
+            button.classList.add(CLASSES.codeButtonPending);
             span.classList.add(styles.hide);
             void copyToClipboard(this.content)
                 .then(() => {
                 button.classList.remove(styles.pending);
-                button.classList.remove(index.CLASSES.codeButtonPending);
+                button.classList.remove(CLASSES.codeButtonPending);
                 button.classList.add(styles.success);
-                button.classList.add(index.CLASSES.codeButtonSuccess);
+                button.classList.add(CLASSES.codeButtonSuccess);
                 this.timer = setTimeout(() => {
                     button.classList.remove(styles.success);
-                    button.classList.remove(index.CLASSES.codeButtonSuccess);
+                    button.classList.remove(CLASSES.codeButtonSuccess);
                     span.classList.remove(styles.hide);
                 }, 500);
             })
                 .catch(() => {
                 button.classList.remove(styles.pending);
-                button.classList.remove(index.CLASSES.codeButtonPending);
+                button.classList.remove(CLASSES.codeButtonPending);
                 button.classList.add(styles.fail);
-                button.classList.add(index.CLASSES.codeButtonFail);
+                button.classList.add(CLASSES.codeButtonFail);
                 this.timer = setTimeout(() => {
                     button.classList.remove(styles.fail);
-                    button.classList.remove(index.CLASSES.codeButtonFail);
+                    button.classList.remove(CLASSES.codeButtonFail);
                     span.classList.remove(styles.hide);
                 }, 500);
             });
@@ -323,11 +612,11 @@ class CodeWidget extends view.WidgetType {
         this.view = view;
         const span = document.createElement("span");
         span.classList.add(styles.code__span);
-        span.classList.add(index.CLASSES.codeButtonSpan);
+        span.classList.add(CLASSES.codeButtonSpan);
         span.textContent = this.language;
         const button = document.createElement("button");
         button.classList.add(styles.code__button);
-        button.classList.add(index.CLASSES.codeButton);
+        button.classList.add(CLASSES.codeButton);
         if (this.content)
             button.addEventListener("click", this.onClick.bind(this));
         button.appendChild(span);
@@ -341,7 +630,7 @@ class CodeWidget extends view.WidgetType {
     }
 }
 
-function getCodeSelectionDecorations({ decorations, node, view, isReadonly, }) {
+function getCodeSelectionDecorations({ decorations, node, view, forceActive, }) {
     if (node.name !== NAME_OF_FENCED_CODE && node.name !== NAME_OF_INLINE_CODE) {
         return;
     }
@@ -404,18 +693,18 @@ function getCodeSelectionDecorations({ decorations, node, view, isReadonly, }) {
     if (lines.length > 1) {
         lines.forEach((line) => {
             decorations.push(getLineDecoration({
-                style: clsx(styles.code__line, index.CLASSES.code),
+                style: clsx(styles.code__line, CLASSES.code),
                 range: [line.from],
             }));
         });
     }
     else {
         decorations.push(getMarkDecoration({
-            style: clsx(styles.code__single, index.CLASSES.code),
+            style: clsx(styles.code__single, CLASSES.code),
             range: [node.from, node.to],
         }));
     }
-    if (isReadonly ||
+    if (forceActive ||
         !view.hasFocus ||
         (lines.length > 1 && !isOverlapLine) ||
         (lines.length === 1 && !isInRange(view.state.selection.ranges, [node.from, node.to]))) {
@@ -461,7 +750,7 @@ function getHeaderDecorations({ decorations, node, view }) {
         range: [view.lineBlockAt(node.from).from],
     }));
 }
-function getHeaderSelectionDecorations({ decorations, node, view, isReadonly, }) {
+function getHeaderSelectionDecorations({ decorations, node, view, forceActive, }) {
     const isHeader = node.name.startsWith(NAME_OF_HEADER);
     const isHeaderUnder = node.name.startsWith(NAME_OF_HEADER_UNDER);
     if (!isHeader && !isHeaderUnder) {
@@ -474,7 +763,7 @@ function getHeaderSelectionDecorations({ decorations, node, view, isReadonly, })
         const line = view.lineBlockAt(mark.from);
         if (line.length < mark.to - mark.from + 1)
             return;
-        if (isReadonly ||
+        if (forceActive ||
             !view.hasFocus ||
             !isInRange(view.state.selection.ranges, [line.from, line.to])) {
             decorations.push(getHideDecoration({ range: [mark.from, mark.to + 1] }));
@@ -483,7 +772,7 @@ function getHeaderSelectionDecorations({ decorations, node, view, isReadonly, })
     else {
         const lineHeader = view.lineBlockAt(node.from);
         const lineMark = view.lineBlockAt(mark.from);
-        if (isReadonly ||
+        if (forceActive ||
             !view.hasFocus ||
             !isInRange(view.state.selection.ranges, [lineHeader.from, lineMark.to])) {
             decorations.push(getHideDecoration({ range: [lineMark.from, lineMark.to] }));
@@ -497,15 +786,15 @@ const headerDecorationPlugin = {
 
 const NAME_OF_HORIZONTAL = "HorizontalRule";
 
-function getHorizontalSelectionDecoration({ decorations, isReadonly, node, view, }) {
+function getHorizontalSelectionDecoration({ decorations, forceActive, node, view, }) {
     if (node.name !== NAME_OF_HORIZONTAL)
         return;
     const line = view.lineBlockAt(node.from);
-    if (isReadonly ||
+    if (forceActive ||
         !view.hasFocus ||
         !isInRange(view.state.selection.ranges, [line.from, line.to])) {
         decorations.push(getLineDecoration({
-            style: clsx(styles.horizontal, index.CLASSES.horizontal),
+            style: clsx(styles.horizontal, CLASSES.horizontal),
             range: [line.from],
         }));
         decorations.push(getHideDecoration({ range: [node.from, node.to] }));
@@ -515,6 +804,31 @@ const horizontalDecorationPlugin = {
     selectionDecorations: [getHorizontalSelectionDecoration],
 };
 
+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,
+        };
+    },
+    update(value, transaction) {
+        const newValue = { ...value };
+        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;
+        }
+        return newValue;
+    },
+});
+
 const NAME_OF_IMAGE = "Image";
 const CODE_OF_START_IMAGE_TEXT = 91; // [
 const CODE_OF_END_IMAGE_TEXT = 93; // ]
@@ -530,31 +844,38 @@ class ImageWidget extends view.WidgetType {
     link;
     from;
     to;
+    imageSrcGetter;
     view;
-    constructor(text, link, from, to) {
+    constructor(text, link, from, to, imageSrcGetter, view) {
         super();
         this.text = text;
         this.link = link;
         this.from = from;
         this.to = to;
+        this.imageSrcGetter = imageSrcGetter;
+        this.view = view;
     }
     get key() {
         return `${this.link}:${this.text}:${this.from}:${this.to}`;
     }
+    get src() {
+        return this.imageSrcGetter ? this.imageSrcGetter(this.link) : this.link;
+    }
     eq(widget) {
         const image = IMAGE_NODES[this.key];
         if (!image)
             return false;
         delete IMAGE_NODES[this.key];
         EXISTING_WIDGETS.delete(this.key);
-        if (image.src !== widget.link)
-            image.src = widget.link;
+        if (image.src !== widget.src)
+            image.src = widget.src;
         if (image.alt !== widget.text)
             image.alt = widget.text;
         this.link = widget.link;
         this.text = widget.text;
         this.from = widget.from;
         this.to = widget.to;
+        this.registerListeners(image);
         IMAGE_NODES[this.key] = image;
         EXISTING_WIDGETS.add(this.key);
         return true;
@@ -562,24 +883,23 @@ class ImageWidget extends view.WidgetType {
     updateDOM() {
         return true;
     }
-    toDOM(view) {
+    toDOM() {
         EXISTING_WIDGETS.add(this.key);
         let image = IMAGE_NODES[this.key];
         if (image) {
-            if (image.src !== this.link) {
-                image.src = this.link;
+            if (image.src !== this.src) {
+                image.src = this.src;
             }
             if (image.alt !== this.text)
                 image.alt = this.text;
             return image;
         }
-        this.view = view;
         image = document.createElement("img");
         image.classList.add(styles.image);
         image.alt = this.text;
-        image.src = this.link;
-        image.addEventListener("mousedown", handleClick);
-        image.addEventListener("click", handleClick);
+        image.src = this.src;
+        image.style.maxWidth = "100%";
+        this.registerListeners(image);
         IMAGE_NODES[this.key] = image;
         if (!interval)
             interval = setInterval(garbageCollectorInterval, INTERVAL_DELAY);
@@ -588,15 +908,25 @@ class ImageWidget extends view.WidgetType {
     destroy() {
         EXISTING_WIDGETS.delete(this.key);
     }
+    registerListeners(image) {
+        image.clearListeners?.();
+        const abortController = new AbortController();
+        image.addEventListener("mousedown", (event) => handleClick$1(this.view, this.text, this.link, this.key, event), { signal: abortController.signal });
+        image.clearListeners = () => {
+            abortController.abort();
+        };
+        image.destroy = () => {
+            image.clearListeners?.();
+            image.remove();
+        };
+    }
 }
 function garbageCollectorInterval() {
     for (const [key, node] of Object.entries(IMAGE_NODES)) {
         if (EXISTING_WIDGETS.has(key) || !node)
             continue;
         delete IMAGE_NODES[key];
-        node.removeEventListener("mousedown", handleClick);
-        node.removeEventListener("click", handleClick);
-        node.remove();
+        node.destroy?.();
     }
     if (Object.keys(IMAGE_NODES).length === 0 && interval) {
         clearInterval(interval);
@@ -604,44 +934,45 @@ function garbageCollectorInterval() {
     }
 }
 /** recursively find the link text node in line */
-function getTextNode(imageNode, line) {
+function getTextNode$1(text, link, key, line) {
+    if (!line)
+        return null;
+    const textNodeContainer = getTextNodeContainer$1(text, link, key, line);
+    if (!textNodeContainer)
+        return null;
+    for (const node of Array.from(textNodeContainer.childNodes)) {
+        if (isCorrectNode$1(text, link, node)) {
+            return node;
+        }
+    }
+    return null;
+}
+function getTextNodeContainer$1(text, link, key, line) {
     if (!line)
         return null;
-    const link = imageNode.src;
-    let textNode = null;
     for (const node of Array.from(line.childNodes)) {
-        if (node.nodeType !== 3) {
-            const innerNode = getTextNode(imageNode, node);
-            if (innerNode) {
-                textNode = innerNode;
-                break;
-            }
-            continue;
+        if (node instanceof HTMLElement && node.getAttribute("data-id") === key) {
+            return node;
         }
-        const textContent = node.textContent;
-        if (textContent && textContent.includes(link)) {
-            textNode = node;
-            break;
+        if (node.nodeType !== 3) {
+            const inner = getTextNodeContainer$1(text, link, key, node);
+            if (inner)
+                return inner;
         }
     }
-    return textNode;
-}
-function getMinLength(imageNode) {
-    const text = imageNode.alt || "";
-    const link = imageNode.src;
-    const startPosition = 4 + text.length;
-    const endPosition = startPosition + link.length + 1;
-    return endPosition;
+    return null;
 }
-function isCorrectNode(imageNode, node) {
+function isCorrectNode$1(text, link, node) {
     if (!node)
         return false;
     const textContent = node?.textContent;
-    const minLength = getMinLength(imageNode);
-    return Boolean(node && textContent && node.nodeType === 3 && textContent.length >= minLength);
+    return Boolean(node &&
+        textContent &&
+        node.nodeType === 3 &&
+        textContent.includes(link) &&
+        textContent.includes(text));
 }
-function selectLink({ imageNode, node, selection, start }) {
-    const link = imageNode.src;
+function selectLink$1({ link, node, selection, start }) {
     const startPosition = start ?? (node.textContent?.indexOf?.(link) || 0);
     const endPosition = startPosition + link.length;
     const range = document.createRange();
@@ -650,7 +981,7 @@ function selectLink({ imageNode, node, selection, start }) {
     selection.removeAllRanges();
     selection.addRange(range);
 }
-function handleClick(event) {
+function handleClick$1(view, text, link, key, event) {
     const selection = window.getSelection();
     if (event.shiftKey || event.ctrlKey || event.altKey || event.metaKey) {
         return;
@@ -667,74 +998,66 @@ function handleClick(event) {
     const editor = Array.from(document.querySelectorAll(".cm-editor")).find((element) => element.contains(target));
     if (!selection || !editor || !parent)
         return;
-    const prevLine = parent.previousSibling;
-    let textNode = getTextNode(target, prevLine);
-    if (!textNode)
-        textNode = getTextNode(target, parent);
+    const textNode = getTextNode$1(text, link, key, line);
     if (textNode) {
-        if (isCorrectNode(target, textNode))
-            selectLink({ selection, imageNode: target, node: textNode });
-        return;
+        return void selectLink$1({ selection, link, node: textNode });
     }
-    const range = document.createRange();
-    range.selectNode(target);
-    range.collapse(true);
-    selection.removeAllRanges();
-    selection.addRange(range);
-    /** wait for the widget to disappear and link will be visible */
-    void tick({
-        delay: 0,
-        maxDeep: 5,
-        delayGetter: (deep) => {
-            return deep > 1 ? 10 : 0;
-        },
-        recursiveCondition: () => {
-            const textNode = getTextNode(target, line);
-            return isCorrectNode(target, textNode);
-        },
-    })
-        .then(() => {
-        const textNode = getTextNode(target, line);
-        if (isCorrectNode(target, textNode))
-            selectLink({ selection, imageNode: target, node: textNode });
+    saveDispatch(() => {
+        if (!view)
+            return;
+        view.dispatch(view.state.update({ effects: openedImageEffect.of(key) }));
+        const textNode = getTextNode$1(text, link, key, line);
+        if (textNode) {
+            selectLink$1({ selection, link, node: textNode });
+        }
+        requestAnimationFrame(() => {
+            saveDispatch(() => {
+                if (view)
+                    view.dispatch(view.state.update({ effects: openedImageEffect.of(undefined) }));
+            });
+        });
     });
     return false;
 }
 
-function getImageSelectionDecorations({ decorations, node, view, isReadonly, }) {
+function getImageDecorations({ decorations, node, view }) {
     if (node.name !== NAME_OF_IMAGE) {
         return;
     }
     const { text, url } = parseInfo(view, node);
-    const line = view.lineBlockAt(node.from);
-    if (line.from === node.from && line.to === node.to) {
-        if (isReadonly ||
-            !view.hasFocus ||
-            !isInRange(view.state.selection.ranges, [line.from, line.to])) {
-            decorations.push(getReplaceDecoration({
-                range: [line.from, line.to],
-                widget: new ImageWidget(text, url, node.from, node.to),
-            }));
-        }
-        else {
-            decorations.push(getWidgetDecorationOptions({
-                range: [node.to + 1],
-                widget: new ImageWidget(text, url, node.from, node.to),
-            }));
-        }
+    const imageSrcGetter = view.state.field(markdownState).imageSrcGetter;
+    decorations.push(getWidgetDecorationOptions({
+        range: [node.to],
+        widget: new ImageWidget(text, url, node.from, node.to, imageSrcGetter, view),
+    }));
+}
+function getImageSelectionDecorations({ decorations, node, view, forceActive, }) {
+    if (node.name !== NAME_OF_IMAGE) {
+        return;
     }
-    else if (isReadonly ||
-        !view.hasFocus ||
-        !isInRange(view.state.selection.ranges, [line.from, line.to])) {
-        decorations.push(getReplaceDecoration({
+    const { text, url } = parseInfo(view, node);
+    const openedImage = view.state.field(markdownState).openedImage;
+    const key = `${url}:${text}:${node.from}:${node.to}`;
+    const isOpened = openedImage && openedImage === key;
+    if (isOpened) {
+        return void decorations.push(getMarkDecoration({
             range: [node.from, node.to],
-            widget: new ImageWidget(text, url, node.from, node.to),
+            attributes: {
+                "data-id": key,
+            },
         }));
     }
+    if (forceActive ||
+        !view.hasFocus ||
+        !isInRange(view.state.selection.ranges, [node.from, node.to])) {
+        decorations.push(getHideDecoration({ range: [node.from, node.to] }));
+    }
     else {
-        decorations.push(getWidgetDecorationOptions({
-            range: [node.to],
-            widget: new ImageWidget(text, url, node.from, node.to),
+        decorations.push(getMarkDecoration({
+            range: [node.from, node.to],
+            attributes: {
+                "data-id": key,
+            },
         }));
     }
 }
@@ -767,6 +1090,7 @@ function parseInfo(view, node) {
 }
 const imageDecorationPlugin = {
     selectionDecorations: [getImageSelectionDecorations],
+    decorations: [getImageDecorations],
 };
 
 const NAME_OF_ITALIC = "Emphasis";
@@ -781,12 +1105,12 @@ function getItalicDecorations({ decorations, node }) {
         range: [node.from, node.to],
     }));
 }
-function getItalicSelectionDecorations({ decorations, node, view, isReadonly, }) {
+function getItalicSelectionDecorations({ decorations, node, view, forceActive, }) {
     if (node.name !== NAME_OF_ITALIC) {
         return;
     }
-    if (checkIsSeveralEmphasis({ decorations, node, view, isReadonly })) {
-        return void splitEmphasis({ decorations, node, view, isReadonly });
+    if (checkIsSeveralEmphasis({ decorations, node, view, forceActive })) {
+        return void splitEmphasis({ decorations, node, view, forceActive });
     }
     let step = 1;
     const startText = view.state.doc.sliceString(node.from, node.from + 3);
@@ -794,7 +1118,7 @@ function getItalicSelectionDecorations({ decorations, node, view, isReadonly, })
         LIST_OF_ITALIC_MARKS.has(startText.charCodeAt(1)) &&
         LIST_OF_ITALIC_MARKS.has(startText.charCodeAt(2)))
         step = 3;
-    if (isReadonly ||
+    if (forceActive ||
         !view.hasFocus ||
         !isInRange(view.state.selection.ranges, [node.from, node.to])) {
         decorations.push(getHideDecoration({ range: [node.from, node.from + step] }));
@@ -815,7 +1139,7 @@ function checkIsSeveralEmphasis({ node, view }) {
         return true;
     return false;
 }
-function splitEmphasis({ decorations, node, view, isReadonly }) {
+function splitEmphasis({ decorations, node, view, forceActive }) {
     const text = view.state.doc.sliceString(node.from, node.to);
     let marks = 0;
     let pos = 0;
@@ -828,13 +1152,13 @@ function splitEmphasis({ decorations, node, view, isReadonly }) {
         decorations,
         view,
         node: { ...node, name: node.name, from: node.from, to: node.from + pos },
-        isReadonly,
+        forceActive,
     });
     getItalicSelectionDecorations({
         decorations,
         view,
         node: { ...node, name: node.name, from: node.from + pos, to: node.to },
-        isReadonly,
+        forceActive,
     });
 }
 const italicDecorationPlugin = {
@@ -850,10 +1174,11 @@ const CODE_OF_END_LINK_URL = 41; // )
 const NAME_OF_AUTO_LINK = "Autolink";
 const CODE_OF_LINK_LABEL_END = 58; // :
 
-function getLinkLabelSelectionDecoration({ decorations, node, view, isReadonly, }) {
+// [label]:
+function getLinkLabelSelectionDecoration({ decorations, node, view, forceActive, }) {
     if (view.state.doc.sliceString(node.to, node.to + 1).charCodeAt(0) !== CODE_OF_LINK_LABEL_END)
         return;
-    if (isReadonly ||
+    if (forceActive ||
         !view.hasFocus ||
         !isInRange(view.state.selection.ranges, [node.from, node.to + 1])) {
         decorations.push(getMarkDecoration({
@@ -865,141 +1190,165 @@ function getLinkLabelSelectionDecoration({ decorations, node, view, isReadonly,
     }
 }
 
+const LINK_NODES = {};
 class LinkWidget extends view.WidgetType {
     text;
     link;
-    type;
+    from;
+    to;
     view;
-    constructor(text, link, type) {
+    constructor(text, link, from, to, view) {
         super();
         this.text = text;
         this.link = link;
-        this.type = type;
+        this.from = from;
+        this.to = to;
+        this.view = view;
     }
-    /** recursively find the link text node in line */
-    getTextNode(line) {
-        if (!line)
-            return null;
-        let textNode = null;
-        for (const node of Array.from(line.childNodes)) {
-            if (node.nodeType !== 3) {
-                const innerNode = this.getTextNode(node);
-                if (innerNode) {
-                    textNode = innerNode;
-                    break;
-                }
-                continue;
-            }
-            const textContent = node.textContent;
-            if (textContent && textContent.includes(this.link)) {
-                textNode = node;
-                break;
-            }
-        }
-        return textNode;
-    }
-    getMinLength() {
-        let startPosition = 0;
-        if (this.type === "link")
-            startPosition = 3 + this.text.length;
-        if (this.type === "auto")
-            startPosition = 1;
-        const endPosition = startPosition + this.link.length;
-        return endPosition;
-    }
-    /** check that the text node is correct node */
-    isCorrectNode(node) {
-        if (!node)
+    get key() {
+        return `${this.link}:${this.text}:${this.from}:${this.to}`;
+    }
+    eq(widget) {
+        const anchor = LINK_NODES[this.key];
+        if (!anchor)
             return false;
-        const textContent = node.textContent;
-        const minLength = this.getMinLength();
-        return Boolean(textContent && node.nodeType === 3 && textContent.length >= minLength);
-    }
-    selectLink(node, selection) {
-        const startPosition = node.textContent?.indexOf?.(this.link) || 0;
-        const endPosition = startPosition + this.link.length;
-        const range = document.createRange();
-        range.setStart(node, startPosition);
-        range.setEnd(node, endPosition);
-        selection.removeAllRanges();
-        selection.addRange(range);
-    }
-    handleClick(event) {
-        if (!this.view)
-            return;
-        /** open the link if has special key or the view is readonly */
-        const contentEditable = this.view.contentDOM.getAttribute("contenteditable");
-        const isReadonly = !contentEditable || contentEditable === "false";
-        if (event.shiftKey || event.ctrlKey || event.altKey || event.metaKey || isReadonly) {
-            if (event.type === "mousedown") {
-                const target = event.target;
-                window.open(target.href, "_blank");
-            }
-            return;
-        }
-        event.stopPropagation();
-        event.preventDefault();
-        const target = event.target;
-        const parent = target.parentNode;
-        let line = parent;
-        /** recursively find line that contains link */
-        while (line && !line.classList.contains("cm-line")) {
-            line = line.parentNode;
-        }
-        const editor = this.view.dom.querySelector(".cm-content");
-        const selection = window.getSelection();
-        if (!selection || !editor || !parent)
-            return;
-        const range = document.createRange();
-        range.selectNode(target);
-        range.collapse(true);
-        selection.removeAllRanges();
-        selection.addRange(range);
-        /** trick for correct select the link by click when the view is not focused */
-        void tick({ delay: 0 }).then(() => {
-            if (selection && selection.anchorNode?.nodeType !== 3) {
-                selection.removeAllRanges();
-                selection.addRange(range);
-            }
-        });
-        /** wait for the widget to disappear and link will be visible */
-        void tick({
-            delay: 0,
-            maxDeep: 5,
-            delayGetter: (deep) => {
-                return deep > 1 ? 10 : 5;
-            },
-            recursiveCondition: () => {
-                const textNode = this.getTextNode(line);
-                return this.isCorrectNode(textNode);
-            },
-        })
-            .then(() => {
-            const textNode = this.getTextNode(line);
-            if (this.isCorrectNode(textNode))
-                this.selectLink(textNode, selection);
-        });
-        return false;
+        delete LINK_NODES[this.key];
+        if (anchor.href !== widget.link)
+            anchor.href = widget.link;
+        if (anchor.textContent !== widget.text)
+            anchor.textContent = widget.text;
+        this.link = widget.link;
+        this.text = widget.text;
+        this.from = widget.from;
+        this.to = widget.to;
+        this.registerListeners(anchor);
+        LINK_NODES[this.key] = anchor;
+        return true;
     }
-    toDOM(view) {
-        this.view = view;
+    toDOM() {
         const anchor = document.createElement("a");
         anchor.classList.add(styles.link);
-        anchor.classList.add(index.CLASSES.link);
+        anchor.classList.add(CLASSES.link);
         anchor.target = "_blank";
         anchor.textContent = this.text;
         anchor.href = this.link;
-        anchor.addEventListener("mousedown", this.handleClick.bind(this));
-        anchor.addEventListener("click", this.handleClick.bind(this));
+        this.registerListeners(anchor);
+        LINK_NODES[this.key] = anchor;
         return anchor;
     }
     destroy(dom) {
-        dom.removeEventListener("mousedown", this.handleClick.bind(this));
-        dom.removeEventListener("click", this.handleClick.bind(this));
+        delete LINK_NODES[this.key];
+        dom.destroy?.();
+    }
+    registerListeners(anchor) {
+        anchor.clearListeners?.();
+        const abortController = new AbortController();
+        anchor.addEventListener("mousedown", (event) => handleClick(this.view, this.text, this.link, this.key, event), { signal: abortController.signal });
+        anchor.addEventListener("click", (e) => e.preventDefault(), { signal: abortController.signal });
+        anchor.clearListeners = () => {
+            abortController.abort();
+        };
+        anchor.destroy = () => {
+            anchor.clearListeners?.();
+            anchor.remove();
+        };
+    }
+}
+/** recursively find the link text node in line */
+function getTextNode(text, link, key, line) {
+    if (!line)
+        return null;
+    const textNodeContainer = getTextNodeContainer(text, link, key, line);
+    if (!textNodeContainer)
+        return null;
+    for (const node of Array.from(textNodeContainer.childNodes)) {
+        if (isCorrectNode(text, link, node)) {
+            return node;
+        }
+    }
+    return null;
+}
+function getTextNodeContainer(text, link, key, line) {
+    if (!line)
+        return null;
+    for (const node of Array.from(line.childNodes)) {
+        if (node instanceof HTMLElement && node.getAttribute("data-id") === key) {
+            return node;
+        }
+        if (node.nodeType !== 3) {
+            const inner = getTextNodeContainer(text, link, key, node);
+            if (inner)
+                return inner;
+        }
+    }
+    return null;
+}
+function isCorrectNode(text, link, node) {
+    if (!node)
+        return false;
+    const textContent = node?.textContent;
+    return Boolean(node &&
+        textContent &&
+        node.nodeType === 3 &&
+        textContent.includes(link) &&
+        textContent.includes(text));
+}
+function selectLink({ link, node, selection, start }) {
+    const startPosition = start ?? (node.textContent?.indexOf?.(link) || 0);
+    const endPosition = startPosition + link.length;
+    const range = document.createRange();
+    range.setStart(node, startPosition);
+    range.setEnd(node, endPosition);
+    selection.removeAllRanges();
+    selection.addRange(range);
+}
+function handleClick(view, text, link, key, event) {
+    /** open the link if has special key or the view is readonly */
+    const contentEditable = view.contentDOM.getAttribute("contenteditable");
+    const forceActive = !contentEditable || contentEditable === "false";
+    if (event.shiftKey || event.ctrlKey || event.altKey || event.metaKey || forceActive) {
+        if (event.type === "mousedown") {
+            const target = event.target;
+            window.open(target.href, "_blank");
+        }
+        return;
     }
+    event.stopPropagation();
+    event.preventDefault();
+    const target = event.target;
+    const parent = target.parentNode;
+    let line = parent;
+    /** recursively find line that contains link */
+    while (line && !line.classList.contains("cm-line")) {
+        line = line.parentNode;
+    }
+    const editor = Array.from(document.querySelectorAll(".cm-editor")).find((element) => element.contains(target));
+    const selection = window.getSelection();
+    if (!selection || !editor || !parent)
+        return;
+    const textNode = getTextNode(text, link, key, line);
+    if (textNode) {
+        return void selectLink({ selection, link, node: textNode });
+    }
+    saveDispatch(() => {
+        if (!view)
+            return;
+        view.dispatch(view.state.update({ effects: openedLinkEffect.of(key) }));
+        const textNode = getTextNode(text, link, key, line);
+        if (textNode) {
+            selectLink({ selection, link, node: textNode });
+        }
+        requestAnimationFrame(() => {
+            saveDispatch(() => {
+                if (view)
+                    view.dispatch(view.state.update({ effects: openedLinkEffect.of(undefined) }));
+            });
+        });
+    });
+    return false;
 }
 
-function getLinkSelectionDecorations({ decorations, node, view, isReadonly, }) {
+function getLinkSelectionDecorations({ decorations, node, view, forceActive, }) {
     if (node.name !== NAME_OF_LINK) {
         return;
     }
@@ -1026,15 +1375,34 @@ function getLinkSelectionDecorations({ decorations, node, view, isReadonly, }) {
             urlCoordinates.to = pos;
     }
     if (urlCoordinates.from === -1 || urlCoordinates.to === -1)
-        return void getLinkLabelSelectionDecoration({ decorations, isReadonly, node, view });
+        return void getLinkLabelSelectionDecoration({ decorations, forceActive, node, view });
     const text = content.substring(textCoordinates.from, textCoordinates.to);
     const url = content.substring(urlCoordinates.from, urlCoordinates.to);
-    if (isReadonly ||
+    const openedLink = view.state.field(markdownState).openedLink;
+    const key = `${url}:${text}:${node.from}:${node.to}`;
+    const isOpened = openedLink && openedLink === key;
+    if (isOpened) {
+        return void decorations.push(getMarkDecoration({
+            range: [node.from, node.to],
+            attributes: {
+                "data-id": key,
+            },
+        }));
+    }
+    if (forceActive ||
         !view.hasFocus ||
         !isInRange(view.state.selection.ranges, [node.from, node.to])) {
         decorations.push(getReplaceDecoration({
             range: [node.from, node.to],
-            widget: new LinkWidget(text, url, "link"),
+            widget: new LinkWidget(text, url, node.from, node.to, view),
+        }));
+    }
+    else {
+        decorations.push(getMarkDecoration({
+            range: [node.from, node.to],
+            attributes: {
+                "data-id": key,
+            },
         }));
     }
 }
@@ -1042,16 +1410,35 @@ const linkDecorationPlugin = {
     selectionDecorations: [getLinkSelectionDecorations],
 };
 
-function getAutoLinkSelectionDecorations({ decorations, node, view, isReadonly, }) {
+function getAutoLinkSelectionDecorations({ decorations, node, view, forceActive, }) {
     if (node.name !== NAME_OF_AUTO_LINK)
         return;
     const url = view.state.doc.sliceString(node.from + 1, node.to - 1);
-    if (isReadonly ||
+    const openedLink = view.state.field(markdownState).openedLink;
+    const key = `${url}:${url}:${node.from}:${node.to}`;
+    const isOpened = openedLink && openedLink === key;
+    if (isOpened) {
+        return void decorations.push(getMarkDecoration({
+            range: [node.from, node.to],
+            attributes: {
+                "data-id": key,
+            },
+        }));
+    }
+    if (forceActive ||
         !view.hasFocus ||
         !isInRange(view.state.selection.ranges, [node.from, node.to])) {
         decorations.push(getReplaceDecoration({
             range: [node.from, node.to],
-            widget: new LinkWidget(url, url, "auto"),
+            widget: new LinkWidget(url, url, node.from, node.to, view),
+        }));
+    }
+    else {
+        decorations.push(getMarkDecoration({
+            range: [node.from, node.to],
+            attributes: {
+                "data-id": key,
+            },
         }));
     }
 }
@@ -1078,7 +1465,7 @@ class ListPointWidget extends view.WidgetType {
         span.textContent = this.mark;
         if (LIST_OF_LIST_MARKS.has(this.lastCodePoint)) {
             span.classList.add(styles.common);
-            span.classList.add(index.CLASSES.listCommon);
+            span.classList.add(CLASSES.listCommon);
         }
         if (CODE_OF_ORDERED_LIST_MARK === this.lastCodePoint) {
             span.classList.add(styles.ordered);
@@ -1087,7 +1474,7 @@ class ListPointWidget extends view.WidgetType {
     }
 }
 
-function getListSelectionDecorations({ decorations, node, view, isReadonly, }) {
+function getListSelectionDecorations({ decorations, node, view, forceActive, }) {
     if (node.name !== NAME_OF_LIST) {
         return;
     }
@@ -1098,14 +1485,14 @@ function getListSelectionDecorations({ decorations, node, view, isReadonly, }) {
     }
     const nextSibling = node.node.nextSibling;
     if (nextSibling && nextSibling.name === NAME_OF_TODO$1) {
-        if (isReadonly ||
+        if (forceActive ||
             !view.hasFocus ||
             !isInRange(view.state.selection.ranges, [node.from, nextSibling.from + 3])) {
             decorations.push(getHideDecoration({ range: [node.from, nextSibling.from] }));
         }
         return;
     }
-    if (isReadonly ||
+    if (forceActive ||
         !view.hasFocus ||
         !isInRange(view.state.selection.ranges, [node.from, node.to])) {
         decorations.push(getReplaceDecoration({
@@ -1127,15 +1514,15 @@ function getMentionDecorations({ decorations, node }) {
         return;
     }
     decorations.push(getMarkDecoration({
-        style: clsx(styles.mention, index.CLASSES.mention),
+        style: clsx(styles.mention, CLASSES.mention),
         range: [node.from, node.to],
     }));
 }
-function getMentionSelectionDecorations({ decorations, node, view, isReadonly, }) {
+function getMentionSelectionDecorations({ decorations, node, view, forceActive, }) {
     if (node.name !== NAME_OF_MENTION) {
         return;
     }
-    if (isReadonly ||
+    if (forceActive ||
         !view.hasFocus ||
         !isInRange(view.state.selection.ranges, [node.from, node.to])) {
         decorations.push(getHideDecoration({ range: [node.from, node.from + 1] }));
@@ -1157,11 +1544,11 @@ function getStrikeThroughDecorations({ decorations, node }) {
         range: [node.from, node.to],
     }));
 }
-function getStrikeThroughSelectionDecorations({ decorations, node, view, isReadonly, }) {
+function getStrikeThroughSelectionDecorations({ decorations, node, view, forceActive, }) {
     if (node.name !== NAME_OF_STRIKE_THROUGH) {
         return;
     }
-    if (isReadonly ||
+    if (forceActive ||
         !view.hasFocus ||
         !isInRange(view.state.selection.ranges, [node.from, node.to])) {
         decorations.push(getHideDecoration({ range: [node.from, node.from + 2] }));
@@ -1195,7 +1582,7 @@ class TodoWidget extends view.WidgetType {
             to: this.position + 1,
             insert: this.checked ? " " : "x",
         };
-        index.saveDispatch(() => {
+        saveDispatch(() => {
             if (!this.view)
                 return;
             this.view.dispatch(this.view.state.update({ changes: change }));
@@ -1225,14 +1612,14 @@ class TodoWidget extends view.WidgetType {
     }
 }
 
-function getTodoSelectionDecoration({ decorations, node, view, isReadonly, }) {
+function getTodoSelectionDecoration({ decorations, node, view, forceActive, }) {
     if (node.name !== NAME_OF_TODO)
         return;
     const prevSibling = node.node.prevSibling;
     if (!prevSibling || prevSibling.name !== NAME_OF_LIST_MARK)
         return;
     const isChecked = LIST_OF_TODO_MARKS.has(view.state.doc.sliceString(node.from + 1, node.from + 2).codePointAt(0) || 0);
-    if (isReadonly ||
+    if (forceActive ||
         !view.hasFocus ||
         !isInRange(view.state.selection.ranges, [prevSibling.from, node.from + 3])) {
         decorations.push(getReplaceDecoration({
@@ -1242,7 +1629,7 @@ function getTodoSelectionDecoration({ decorations, node, view, isReadonly, }) {
     }
     if (isChecked) {
         const line = view.lineBlockAt(node.from);
-        if (isReadonly ||
+        if (forceActive ||
             !view.hasFocus ||
             !isInRange(view.state.selection.ranges, [line.from, line.to]))
             decorations.push(getMarkDecoration({ style: styles.todo__checked, range: [node.from + 4, node.to] }));
@@ -1292,87 +1679,305 @@ const SKIP_MARKS = new Set([
     "HeaderMark",
     "TaskMarker",
 ]);
-let markdownDecorations = [];
-function getDecorations(view$1, isChanged) {
-    const decorations = isChanged ? [] : markdownDecorations;
-    const selectionDecorations = [];
-    const contentEditable = view$1.contentDOM.getAttribute("contenteditable");
-    const isReadonly = !contentEditable || contentEditable === "false";
-    for (const { from: fromVisible, to: toVisible } of view$1.visibleRanges) {
-        language.syntaxTree(view$1.state).iterate({
-            from: fromVisible,
-            to: toVisible,
-            enter: (node) => {
-                if (SKIP_MARKS.has(node.name))
-                    return;
-                /** Decoration by change content */
-                if (isChanged) {
-                    decorationFunctions.forEach((f) => f({ decorations, node, view: view$1 }));
-                }
-                /** Decoration by selection content  */
-                selectionDecorationFunctions.forEach((f) => f({
-                    decorations: selectionDecorations,
-                    node,
-                    view: view$1,
-                    isReadonly,
-                }));
-            },
-        });
-    }
-    if (isChanged) {
-        markdownDecorations = decorations;
+function createDecorationsGetter() {
+    let markdownDecorationsCache = [];
+    let markdownSelectionDecorationsCache = [];
+    function getDecorations(view$1, isChanged, mouseReleased) {
+        const processDecorations = isChanged;
+        const processSelectionDecorations = isChanged || mouseReleased;
+        const decorations = processDecorations ? [] : markdownDecorationsCache;
+        const selectionDecorations = processSelectionDecorations
+            ? []
+            : markdownSelectionDecorationsCache;
+        const contentEditable = view$1.contentDOM.getAttribute("contenteditable");
+        const isReadonly = !contentEditable || contentEditable === "false";
+        for (const { from: fromVisible, to: toVisible } of view$1.visibleRanges) {
+            language.syntaxTree(view$1.state).iterate({
+                from: fromVisible,
+                to: toVisible,
+                enter: (node) => {
+                    if (SKIP_MARKS.has(node.name))
+                        return;
+                    /** Decoration by change content */
+                    if (processDecorations)
+                        decorationFunctions.forEach((f) => f({ decorations, node, view: view$1 }));
+                    /** Decoration by selection content  */
+                    if (processSelectionDecorations)
+                        selectionDecorationFunctions.forEach((f) => f({
+                            decorations: selectionDecorations,
+                            node,
+                            view: view$1,
+                            forceActive: isReadonly,
+                        }));
+                },
+            });
+        }
+        if (processDecorations) {
+            markdownDecorationsCache = decorations;
+        }
+        if (processSelectionDecorations) {
+            markdownSelectionDecorationsCache = selectionDecorations;
+        }
+        return view.Decoration.set([...decorations, ...selectionDecorations], true);
     }
-    return view.Decoration.set([...decorations, ...selectionDecorations], true);
+    return getDecorations;
 }
-const markdownDecorationPlugin = view.ViewPlugin.fromClass(class DecorationMarkdown {
-    decorations;
-    constructor(view) {
-        this.decorations = getDecorations(view, true);
-    }
-    update(update) {
-        const isDocumentChanged = update.docChanged ||
-            update.viewportChanged ||
-            language.syntaxTree(update.startState) != language.syntaxTree(update.state);
-        this.decorations = getDecorations(update.view, isDocumentChanged);
-    }
-}, {
-    decorations: (plugin) => plugin.decorations,
-});
-
-const mentionParser = {
-    defineNodes: [{ name: NAME_OF_MENTION }],
-    parseInline: [
-        {
-            name: NAME_OF_MENTION,
-            parse(cx, next, pos) {
-                if (next != CODE_OF_START_MENTION)
-                    return -1;
-                let end = pos + 1;
-                for (let i = pos + 1; i < cx.end; i++) {
-                    const next = cx.char(i);
-                    if (next === CODE_OF_SPACE)
-                        break;
-                    end++;
-                }
-                return cx.addElement(cx.elt(NAME_OF_MENTION, pos, end));
-            },
-        },
-    ],
+const markdownDecorationPlugin = (stateConfig) => {
+    return view.ViewPlugin.fromClass(class DecorationMarkdown {
+        decorations;
+        mouseReleased = true;
+        dom;
+        view;
+        decorationGetter;
+        constructor(view) {
+            this.decorationGetter = createDecorationsGetter();
+            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 ||
+                update.viewportChanged ||
+                language.syntaxTree(update.startState) != language.syntaxTree(update.state);
+            this.decorations = this.decorationGetter(update.view, isDocumentChanged, this.mouseReleased);
+        }
+        destroy() {
+            document.removeEventListener("mousedown", this.onMouseDown.bind(this));
+            document.removeEventListener("mouseup", this.onMouseUp.bind(this));
+        }
+        onMouseDown() {
+            this.mouseReleased = false;
+        }
+        onMouseUp() {
+            this.mouseReleased = true;
+            if (this.view.state.selection.ranges[0].from !== this.view.state.selection.ranges[0].to) {
+                saveDispatch(() => {
+                    this.view.dispatch(this.view.state.update({}));
+                });
+            }
+        }
+    }, {
+        decorations: (plugin) => plugin.decorations,
+    });
 };
 
-const markdownParserPlugin = [mentionParser];
-
-const initMarkdown = ({ languages }) => {
+async function InitSettings({ readonly, vimMode, }) {
+    let vimExtension = [];
+    if (vimMode) {
+        const { vim } = await import('@replit/codemirror-vim');
+        vimExtension = [vim({ status: true }), view.drawSelection()];
+    }
     return [
-        langMarkdown.markdown({
-            base: langMarkdown.markdownLanguage,
-            codeLanguages: languages,
-            addKeymap: true,
-            extensions: [markdownParserPlugin],
+        ReadonlyCompartment.of(view.EditorView.editable.of(!readonly)),
+        VimModeCompartment.of(vimExtension),
+        commands.history(),
+    ];
+}
+
+const initExtensions = async ({ onBlur, onChange, onFocus, onEnter, onEscape, readonly = true, vimMode = false, multiCursorText, provider, theme = "light", dark, light, languages, keyMaps, defaultKeyMaps, imageSrcGetter, }) => {
+    const multiCursorMode = Boolean(multiCursorText && provider);
+    const asyncPlugins = await Promise.all([
+        InitSettings({ readonly, vimMode }),
+        initKeyMaps({
+            onEnter,
+            onEscape,
+            multiCursorMode,
+            keyMaps,
+            vimMode,
+            theme,
+            dark,
+            defaultKeyMaps,
+            light,
         }),
-        markdownDecorationPlugin,
+        new Promise((resolve) => {
+            void Promise.resolve().then(() => require('./index-CDtGUxs-.js')).then(({ initMarkdown }) => {
+                resolve(initMarkdown({ languages, imageSrcGetter }));
+            });
+        }),
+    ]);
+    const extensions = [
+        ...asyncPlugins,
+        initTheme({ theme, dark, light }),
+        initListeners({ onBlur, onChange, onFocus }),
     ];
+    if (multiCursorText && provider) {
+        const multiCursorModules = await Promise.all([import('yjs'), import('y-codemirror.next')]);
+        const [{ UndoManager }, { yCollab }] = multiCursorModules;
+        const undoManager = new UndoManager(multiCursorText);
+        extensions.push(yCollab(multiCursorText, provider.awareness, { undoManager }));
+    }
+    return extensions;
 };
 
-exports.initMarkdown = initMarkdown;
-//# sourceMappingURL=index-DPZa3gzd.js.map
+async function initEditorProvider({ roomId, url, userName = "Anonymous", userColor, initialText, onStartProvider, }) {
+    const { Doc } = await import('yjs');
+    const { WebsocketProvider } = await import('y-websocket');
+    const multiCursorDocument = new Doc();
+    const multiCursorText = multiCursorDocument.getText(roomId);
+    if (!userColor || !userColor.startsWith("#")) {
+        // eslint-disable-next-line no-console
+        console.warn("user color must be hex!");
+        userColor = "#30bced";
+    }
+    const userColorLight = `${userColor.substring(0, 7)}33`;
+    const provider = new WebsocketProvider(url, roomId, multiCursorDocument);
+    provider.awareness.setLocalStateField("user", {
+        name: userName,
+        color: userColor,
+        colorLight: userColorLight,
+    });
+    if (onStartProvider)
+        provider.on("status", (event) => {
+            onStartProvider(event?.status);
+        });
+    if (provider && multiCursorText)
+        provider.on("sync", (isSynced) => {
+            if (isSynced && !multiCursorText.length && initialText) {
+                multiCursorText.insert(0, initialText);
+            }
+        });
+    return { provider, multiCursorText };
+}
+
+async function initEditorState({ text, ...rest }) {
+    const extensions = await initExtensions(rest);
+    return state.EditorState.create({
+        // eslint-disable-next-line @typescript-eslint/no-base-to-string
+        doc: rest.multiCursorText ? rest.multiCursorText.toString() : text,
+        extensions,
+    });
+}
+
+async function initEditor({ multiCursor, root, initialText, ...rest }) {
+    let provider;
+    let multiCursorText;
+    if (multiCursor) {
+        const editorProvider = await initEditorProvider({ ...multiCursor, initialText });
+        provider = editorProvider.provider;
+        multiCursorText = editorProvider.multiCursorText;
+    }
+    const state = await initEditorState({
+        ...rest,
+        text: initialText || "",
+        provider,
+        multiCursorText,
+    });
+    const view$1 = new view.EditorView({
+        state,
+        parent: root,
+    });
+    return { view: view$1, provider };
+}
+
+class Editor {
+    view;
+    provider;
+    arguments;
+    constructor(options) {
+        void initEditor(options).then((editor) => {
+            this.view = editor.view;
+            this.provider = editor.provider;
+        });
+        this.arguments = options;
+    }
+    focus = () => {
+        if (!this.view)
+            return;
+        this.view.focus();
+    };
+    getContent = () => {
+        if (!this.view)
+            return;
+        return this.view.state.doc.toString();
+    };
+    setContent = (content, position) => {
+        if (!this.view)
+            return;
+        if (position == undefined) {
+            const cursor = this.view.state.selection.main.head;
+            position = cursor;
+        }
+        const transaction = this.view.state.update({
+            changes: {
+                from: position,
+                insert: content,
+            },
+        });
+        saveDispatch(() => {
+            if (!this.view)
+                return;
+            this.view.dispatch(transaction);
+        });
+    };
+    setReadonly = (readonly) => {
+        saveDispatch(() => {
+            if (!this.view)
+                return;
+            this.view.dispatch({
+                effects: ReadonlyCompartment.reconfigure(view.EditorView.editable.of(!readonly)),
+            });
+        });
+    };
+    setTheme = (theme) => {
+        saveDispatch(() => {
+            if (!this.view)
+                return;
+            this.view.dispatch({
+                effects: ThemeCompartment.reconfigure(theme === "dark"
+                    ? getDarkTheme({
+                        dark: this.arguments.dark,
+                        light: this.arguments.light,
+                        theme,
+                    })
+                    : getLightTheme({
+                        dark: this.arguments.dark,
+                        light: this.arguments.light,
+                        theme,
+                    })),
+            });
+        });
+    };
+    setVimMode = async (mode) => {
+        if (!this.view)
+            return;
+        const { vim } = await import('@replit/codemirror-vim');
+        saveDispatch(() => {
+            if (!this.view)
+                return;
+            this.view.dispatch({
+                effects: VimModeCompartment.reconfigure(mode ? [vim({ status: true }), view.drawSelection()] : []),
+            });
+        });
+    };
+    setUserProvider = (name = "Anonymous", color = "#000000") => {
+        if (!this.provider)
+            return;
+        this.provider.awareness.setLocalStateField("user", { name, color });
+    };
+    destroy = () => {
+        saveDispatch(() => {
+            if (!this.view)
+                return;
+            this.view.destroy();
+        });
+        saveDispatch(() => {
+            if (this.provider)
+                this.provider.destroy();
+        });
+    };
+}
+
+exports.CODE_OF_SPACE = CODE_OF_SPACE;
+exports.CODE_OF_START_MENTION = CODE_OF_START_MENTION;
+exports.Editor = Editor;
+exports.NAME_OF_MENTION = NAME_OF_MENTION;
+exports.markdownDecorationPlugin = markdownDecorationPlugin;
+exports.markdownState = markdownState;
+//# sourceMappingURL=index-CiorogHq.js.map