@krainovsd/markdown-editor 0.3.2 → 0.4.2

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

@@ -2,6 +2,7 @@
 
 const view = require('@codemirror/view');
 const state = require('@codemirror/state');
+const autocomplete = require('@codemirror/autocomplete');
 const commands = require('@codemirror/commands');
 const language = require('@codemirror/language');
 const highlight = require('@lezer/highlight');
@@ -13,6 +14,59 @@ const ReadonlyCompartment = new state.Compartment();
 const VimModeCompartment = new state.Compartment();
 const ThemeCompartment = new state.Compartment();
 
+const CODE_OF_START_MENTION$1 = "@".codePointAt(0); // @
+const CODE_OF_SPACE$3 = " ".codePointAt(0);
+const CODE_OF_LINE_BREAK$1 = "\n".codePointAt(0);
+const tagAutoComplete = (tagOptions) => {
+    const options = tagOptions.map((user) => ({
+        label: `@${user}`,
+        type: "text",
+    }));
+    return (context) => {
+        const line = context.view?.lineBlockAt?.(context.pos);
+        if (!line)
+            return null;
+        const content = context.state.sliceDoc(line.from, context.pos);
+        let pos = content.length - 1;
+        while (pos > -1) {
+            const code = content.codePointAt(pos);
+            if (!code || code === CODE_OF_SPACE$3 || code === CODE_OF_LINE_BREAK$1)
+                return null;
+            if (code == CODE_OF_START_MENTION$1)
+                break;
+            pos--;
+        }
+        if (pos === -1)
+            return null;
+        return {
+            from: line.from + pos,
+            options,
+        };
+    };
+};
+
+const initAutoComplete = ({ autoCompleteTagOptions, autoCompleteConfig = {}, }) => {
+    if (!autoCompleteTagOptions)
+        return [];
+    return [
+        autocomplete.autocompletion({
+            activateOnTyping: true,
+            activateOnTypingDelay: 100,
+            selectOnOpen: true,
+            closeOnBlur: true,
+            maxRenderedOptions: 20,
+            aboveCursor: false,
+            defaultKeymap: true,
+            icons: false,
+            filterStrict: false,
+            interactionDelay: 75,
+            updateSyncTime: 100,
+            ...autoCompleteConfig,
+            override: [tagAutoComplete(autoCompleteTagOptions)],
+        }),
+    ];
+};
+
 function copyToClipboard(content) {
     if (navigator.clipboard && window.isSecureContext) {
         return navigator.clipboard.writeText(content);
@@ -92,6 +146,155 @@ function saveDispatch(dispatch) {
     });
 }
 
+function overlapMark({ marks, shift, state, requireMatched }) {
+    const { from, to, shiftAfterInner, shiftAfterOuter, shiftBeforeInner, shiftBeforeOuter, text } = processShiftContent(state, shift, marks);
+    const startIndex = findMarkIndex(text.substring(0, shiftBeforeInner + shiftBeforeOuter), marks, requireMatched, "right");
+    const endIndex = findMarkIndex(text.substring(text.length - shiftAfterInner - shiftAfterOuter), marks, requireMatched, "left");
+    const start = ~startIndex ? from - shiftBeforeOuter + startIndex : -1;
+    const end = ~endIndex ? to - shiftAfterInner + endIndex : -1;
+    // console.log({
+    //   from,
+    //   to,
+    //   shiftAfterInner,
+    //   shiftAfterOuter,
+    //   shiftBeforeInner,
+    //   shiftBeforeOuter,
+    //   text,
+    //   textStart: text.substring(0, shiftBeforeInner + shiftBeforeOuter),
+    //   textEnd: text.substring(text.length - shiftAfterInner - shiftAfterOuter),
+    //   startIndex,
+    //   endIndex,
+    //   end,
+    //   start,
+    // });
+    return {
+        start,
+        end,
+        marked: Boolean(~start || ~end),
+        originalText: text.substring(shiftBeforeOuter, text.length - shiftAfterOuter),
+    };
+}
+// eslint-disable-next-line max-params
+function findMarkIndex(text, marks, requireMatched, direction = "right") {
+    if (text.length === 0)
+        return -1;
+    const maxRequired = Math.max(...requireMatched);
+    const minRequired = Math.min(...requireMatched);
+    let pos = 0;
+    let matched = 0;
+    let start = -1;
+    for (const mark of marks) {
+        if (!mark)
+            continue;
+        while (pos < text.length) {
+            if (text.codePointAt(pos) === mark)
+                matched++;
+            else {
+                if (
+                // eslint-disable-next-line no-loop-func --  https://eslint.org/docs/latest/rules/no-loop-func#known-limitations
+                requireMatched.some((rm) => rm === matched) &&
+                    ((direction === "right" && pos - matched > start) ||
+                        (direction === "left" && (pos - matched < start || start === -1)))) {
+                    start = direction === "right" ? pos - minRequired : pos - matched;
+                    // console.log({ pos, matched, start, minRequired, maxRequired, direction });
+                }
+                else if (maxRequired < matched) {
+                    const posMin = pos - minRequired;
+                    const posMax = pos - matched;
+                    // console.log({ posMin, posMax, pos, minRequired, maxRequired, direction, matched });
+                    // eslint-disable-next-line max-depth
+                    if (direction === "right" && posMin > start)
+                        start = posMin;
+                    // eslint-disable-next-line max-depth
+                    if (direction === "left" && (posMax < start || start === -1))
+                        start = posMax;
+                }
+                matched = 0;
+            }
+            pos++;
+        }
+        if (
+        // eslint-disable-next-line no-loop-func --  https://eslint.org/docs/latest/rules/no-loop-func#known-limitations
+        requireMatched.some((rm) => rm === matched) &&
+            ((direction === "right" && pos - matched > start) ||
+                (direction === "left" && (pos - matched < start || start === -1)))) {
+            start = direction === "right" ? pos - minRequired : pos - matched;
+            // console.log({ pos, matched, start, minRequired, maxRequired, direction });
+        }
+        else if (maxRequired < matched) {
+            const posMin = pos - minRequired;
+            const posMax = pos - matched;
+            // console.log({ posMin, posMax, pos, minRequired, maxRequired, direction, matched });
+            if (direction === "right" && posMin > start)
+                start = posMin;
+            if (direction === "left" && (posMax < start || start === -1))
+                start = posMax;
+        }
+        pos = 0;
+        matched = 0;
+    }
+    return start;
+}
+function processShiftContent(state, shift, marks) {
+    const { from, to } = state.selection.ranges[0];
+    const linePoint = state.lineBreak.codePointAt(0);
+    let pos = 0;
+    /** processing outer shifts */
+    const initialTextBefore = state.sliceDoc(from - shift, from);
+    let shiftBeforeOuter = 0;
+    pos = initialTextBefore.length - 1;
+    while (pos > -1) {
+        if (initialTextBefore.codePointAt(pos) === linePoint)
+            break;
+        shiftBeforeOuter++;
+        pos--;
+    }
+    const initialTextAfter = state.sliceDoc(to, to + shift);
+    let shiftAfterOuter = 0;
+    pos = 0;
+    while (pos < initialTextAfter.length) {
+        if (initialTextAfter.codePointAt(pos) === linePoint)
+            break;
+        shiftAfterOuter++;
+        pos++;
+    }
+    /** processing inner shifts */
+    const initialText = state.sliceDoc(from, to);
+    let shiftBeforeInner = 0;
+    pos = 0;
+    if (initialText.length > 1)
+        while (pos < initialText.length) {
+            // eslint-disable-next-line no-loop-func --  https://eslint.org/docs/latest/rules/no-loop-func#known-limitations
+            if (marks.some((mark) => mark === initialText.codePointAt(pos)))
+                shiftBeforeInner++;
+            else
+                break;
+            pos++;
+        }
+    const initialTextWithoutBeforeShift = initialText.substring(shiftBeforeInner + 1);
+    let shiftAfterInner = 0;
+    pos = initialTextWithoutBeforeShift.length - 1;
+    if (initialText.length > 1 || shiftBeforeInner > 0)
+        while (pos > -1) {
+            // eslint-disable-next-line no-loop-func --  https://eslint.org/docs/latest/rules/no-loop-func#known-limitations
+            if (marks.some((mark) => mark === initialTextWithoutBeforeShift.codePointAt(pos)))
+                shiftAfterInner++;
+            else
+                break;
+            pos--;
+        }
+    const text = state.sliceDoc(from - shiftBeforeOuter, to + shiftAfterOuter);
+    return {
+        from,
+        to,
+        shiftBeforeOuter,
+        shiftBeforeInner,
+        shiftAfterOuter,
+        shiftAfterInner,
+        text,
+    };
+}
+
 /**
  * t.processingInstruction, t.meta - # () []
  * t.url, t.link - links
@@ -106,7 +309,10 @@ function getHighlightTemplate(config) {
             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.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 },
         {
@@ -125,6 +331,8 @@ function getHighlightTemplate(config) {
 const CLASSES = {
     listCommon: "cm-list-common",
     code: "cm-code",
+    codeBlockLine: "cm-code-block-line",
+    codeBlock: "cm-code-block",
     codeButton: "cm-code-button",
     codeButtonSuccess: "cm-code-button-success",
     codeButtonFail: "cm-code-button-fail",
@@ -163,6 +371,7 @@ function getThemeTemplate(dark, config) {
         [`.${CLASSES.code}`]: {
             background: config.codeBackground,
             color: config.codeColor,
+            fontFamily: `${config.codeFontFamily} !important`,
         },
         [`.${CLASSES.horizontal}`]: {
             borderBottomColor: config.horizontalColor,
@@ -198,6 +407,12 @@ function getThemeTemplate(dark, config) {
         [`.${CLASSES.mention}`]: {
             color: config.mentionColor,
         },
+        [`.${CLASSES.codeBlockLine}`]: {
+            borderColor: config.codeBlockBorderColor,
+        },
+        [`.${CLASSES.codeBlock}`]: {
+            background: config.codeBlockBackground,
+        },
     }, { dark });
 }
 
@@ -224,15 +439,18 @@ const THEME_CONFIG$1 = {
     codeColor: "#DDDDDD",
     color: "#DDDDDD",
     fontFamily: "Montserrat",
+    codeFontFamily: "Consolas",
     horizontalColor: "#DDDDDD",
     linkColor: "#8A5CF5",
     mentionColor: "#8A5CF5",
     vimSelection: "#1A1919FF",
     vimSelectionFocused: "#2E4B4BFF",
+    codeBlockBorderColor: "#7b7e81",
+    codeBlockBackground: "#24292e",
 };
 function getDarkTheme({ dark }) {
-    const highlightConfig = { ...HIGHLIGHT_CONFIG$1, ...(dark?.highlightConfig || {}) };
-    const themeConfig = { ...THEME_CONFIG$1, ...(dark?.themeConfig || {}) };
+    const highlightConfig = { ...HIGHLIGHT_CONFIG$1, ...(dark?.highlightConfig ?? {}) };
+    const themeConfig = { ...THEME_CONFIG$1, ...(dark?.themeConfig ?? {}) };
     return [getThemeTemplate(true, themeConfig), getHighlightTemplate(highlightConfig)];
 }
 
@@ -259,15 +477,18 @@ const THEME_CONFIG = {
     codeColor: "#000000",
     color: "#000000",
     fontFamily: "Montserrat",
+    codeFontFamily: "Consolas",
     horizontalColor: "#000000",
     linkColor: "#8A5CF5",
     mentionColor: "#8A5CF5",
     vimSelection: "#d9d9d9",
     vimSelectionFocused: "#d7d4f0",
+    codeBlockBackground: "#e1e2e7",
+    codeBlockBorderColor: "##CCCCCDFF",
 };
 function getLightTheme({ light }) {
-    const highlightConfig = { ...HIGHLIGHT_CONFIG, ...(light?.highlightConfig || {}) };
-    const themeConfig = { ...THEME_CONFIG, ...(light?.themeConfig || {}) };
+    const highlightConfig = { ...HIGHLIGHT_CONFIG, ...(light?.highlightConfig ?? {}) };
+    const themeConfig = { ...THEME_CONFIG, ...(light?.themeConfig ?? {}) };
     return [getThemeTemplate(false, themeConfig), getHighlightTemplate(highlightConfig)];
 }
 
@@ -279,13 +500,135 @@ const initTheme = (options) => {
     return extensions;
 };
 
+const BOLD_MARK_STAR = "*".codePointAt(0);
+const BOLD_MARK_DASH = "_".codePointAt(0);
+const SHIFT = 2;
+const insertBoldMarker = ({ state, dispatch }) => {
+    const changes = [];
+    const { from, to } = state.selection.ranges[0];
+    if (from === to)
+        return true;
+    const { end, start, marked, originalText } = overlapMark({
+        marks: [BOLD_MARK_DASH, BOLD_MARK_STAR],
+        requireMatched: [SHIFT],
+        shift: SHIFT,
+        state,
+    });
+    if (marked) {
+        if (~start) {
+            changes.push({ from: start, to: start + SHIFT, insert: "" });
+        }
+        if (~end) {
+            changes.push({ from: end, to: end + SHIFT, insert: "" });
+        }
+    }
+    else {
+        const markedText = `**${originalText}**`;
+        changes.push({ from, to, insert: markedText });
+    }
+    saveDispatch(() => {
+        const startSelection = ~start ? start : from;
+        const endSelection = ~end ? end - (~start ? SHIFT : 0) : to - (~start ? SHIFT : 0);
+        dispatch(state.update({
+            changes,
+            selection: !marked
+                ? {
+                    anchor: from + SHIFT,
+                    head: to + SHIFT,
+                }
+                : {
+                    anchor: startSelection,
+                    head: endSelection,
+                },
+        }));
+    });
+    return true;
+};
+const boldKeymap = {
+    key: "Mod-b",
+    run: insertBoldMarker,
+};
+
+const ITALIC_MARK_STAR = "*".codePointAt(0);
+const ITALIC_MARK_DASH = "_".codePointAt(0);
+const SHIFT_COUPLE = 3;
+const SHIFT_ALONE = 1;
+const insertItalicMarker = ({ state, dispatch }) => {
+    const changes = [];
+    const { from, to } = state.selection.ranges[0];
+    if (from === to)
+        return true;
+    const { end, start, marked, originalText } = overlapMark({
+        marks: [ITALIC_MARK_STAR, ITALIC_MARK_DASH],
+        requireMatched: [SHIFT_ALONE, SHIFT_COUPLE],
+        shift: SHIFT_COUPLE,
+        state,
+    });
+    if (marked) {
+        if (~start) {
+            changes.push({ from: start, to: start + SHIFT_ALONE, insert: "" });
+        }
+        if (~end) {
+            changes.push({ from: end, to: end + SHIFT_ALONE, insert: "" });
+        }
+    }
+    else {
+        const markedText = `*${originalText}*`;
+        changes.push({ from, to, insert: markedText });
+    }
+    saveDispatch(() => {
+        const startSelection = ~start ? start : from;
+        const endSelection = ~end ? end - (~start ? SHIFT_ALONE : 0) : to - (~start ? SHIFT_ALONE : 0);
+        dispatch(state.update({
+            changes,
+            selection: !marked
+                ? {
+                    anchor: from + SHIFT_ALONE,
+                    head: to + SHIFT_ALONE,
+                }
+                : {
+                    anchor: startSelection,
+                    head: endSelection,
+                },
+        }));
+    });
+    return true;
+};
+const italicKeymap = {
+    key: "Mod-i",
+    run: insertItalicMarker,
+};
+
+const insertLinkWrapper = ({ state, dispatch }) => {
+    const changes = [];
+    const { from, to } = state.selection.ranges[0];
+    if (from === to)
+        return true;
+    const content = state.sliceDoc(from, to);
+    const wrapper = `[${content}]()`;
+    changes.push({ from, to, insert: wrapper });
+    saveDispatch(() => {
+        dispatch(state.update({
+            changes,
+            selection: {
+                anchor: to + 3,
+            },
+        }));
+    });
+    return true;
+};
+const linkKeymap = {
+    key: "Mod-k",
+    run: insertLinkWrapper,
+};
+
 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];
+    const keyBindings = [commands.indentWithTab, boldKeymap, italicKeymap, linkKeymap];
     /** standard  */
     keyBindings.push(...commands.standardKeymap.map((keyMap) => {
         if (keyMap.key === "Enter" && onEnter) {
@@ -328,15 +671,9 @@ const initKeyMaps = async ({ onEnter, onEscape, multiCursorMode, keyMaps, defaul
                     view.dispatch({
                         effects: ThemeCompartment.reconfigure(theme === "dark"
                             ? getDarkTheme({
-                                dark,
-                                light,
-                                theme,
-                            })
+                                dark})
                             : getLightTheme({
-                                dark,
-                                light,
-                                theme,
-                            })),
+                                light})),
                     });
                 });
                 return true;
@@ -368,9 +705,9 @@ const initKeyMaps = async ({ onEnter, onEscape, multiCursorMode, keyMaps, defaul
 
 function getChangeEvent({ onChange }) {
     return onChange
-        ? view.EditorView.updateListener.of((e) => {
-            if (e.docChanged) {
-                onChange(e);
+        ? view.EditorView.updateListener.of((event) => {
+            if (event.docChanged) {
+                onChange(event);
             }
         })
         : [];
@@ -378,11 +715,11 @@ function getChangeEvent({ onChange }) {
 
 function getFocusEvent({ onBlur, onFocus }) {
     return onFocus || onBlur
-        ? view.EditorView.focusChangeEffect.of((e, focus) => {
+        ? view.EditorView.focusChangeEffect.of((event, focus) => {
             if (focus && onFocus)
-                onFocus(e);
+                onFocus(event);
             else if (!focus && onBlur)
-                onBlur(e);
+                onBlur(event);
             return null;
         })
         : [];
@@ -419,12 +756,12 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "._header_XFwV5{font-weight:700}._header_XFwV5._level_1_-KPph{font-size:2rem}._header_XFwV5._level_2_ecHlB{font-size:1.8rem}._header_XFwV5._level_3_SYcVr{font-size:1.6rem}._header_XFwV5._level_4_V3o5m{font-size:1.4rem}._header_XFwV5._level_5_I7eVk{font-size:1.3rem}._header_XFwV5._level_6_A3lbK{font-size:1.2rem}._bold_I8DT-{font-weight:700}._italic_72qBe{font-style:italic}._blockquote_Xq6O4{border-left:3px solid;margin-left:5px}._blockquote__inner_mjT0h{margin-left:1px;padding-left:5px;position:relative}._blockquote__inner_mjT0h:before{border-left:3px solid;content:\"\";height:140%;left:0;position:absolute;top:-3px}._blockquote__inner-deep_s6tNj{margin-left:5px}._strike-through_U64jP{text-decoration:line-through}._list_MHIjT._common_0GdDi{position:relative;visibility:hidden}._list_MHIjT._common_0GdDi:after{border-radius:100%;content:\"\";height:5px;left:0;position:absolute;top:50%;transform:translateY(-50%);visibility:visible;width:5px}._link_7U9wl{text-decoration:none;text-decoration:underline}._link__label_dHGGf{font-size:12px;position:relative;top:-4px}._image_KmBM8{display:inline-flex}._code__line_m3IiO{padding:5px;position:relative}._code__line_m3IiO,._code__single_hbMte{font-family:monospace}._code__button_WwYE-{background-color:transparent;border:none;border-radius:4px;box-shadow:none;cursor:pointer;min-width:30px;outline:none;padding:4px 10px;position:absolute;right:5px;top:5px;transition:all .3s ease;z-index:1}._code__button_WwYE-._pending_fgHgD:before{animation:_loading-btn--fade-in_8z5an .33s ease,_loading-btn--rotation_QaopN .66s linear 0s infinite;border:2px solid hsla(0,0%,100%,.33);border-radius:50%;border-top-color:#000;content:\"\";display:inline-block;height:10.5px;left:50%;position:absolute;top:50%;width:10.5px}._code__button_WwYE-._success_kUPnO:after{animation:_loading-btn--fade-in_8z5an .6s ease;border-color:currentcolor;border-style:solid;border-width:0 0 1px 1px;content:\"\";display:inline-block;height:7px;left:50%;position:absolute;top:50%;transform:translate(-50%,-75%) rotate(-45deg);width:11px}._code__button_WwYE-._fail_cOpap:after,._code__button_WwYE-._fail_cOpap:before{content:\" \";height:13px;left:50%;position:absolute;top:50%;width:1px}._code__button_WwYE-._fail_cOpap:before{transform:translate(-50%,-50%) rotate(45deg)}._code__button_WwYE-._fail_cOpap:after{transform:translate(-50%,-50%) rotate(-45deg)}@keyframes _loading-btn--fade-in_8z5an{0%{opacity:0}to{opacity:1}}@keyframes _loading-btn--rotation_QaopN{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)}}._code__span_iSCmj{opacity:1;transition:opacity .3s ease}._code__span_iSCmj._hide_uqpax{opacity:0}._horizontal_J1jU-{border-bottom:1px solid;margin:0 5px;position:relative;width:calc(100% - 10px)}._todo_m6MIP{align-items:flex-end;display:inline-flex;height:100%;padding-left:3px;padding-right:3px}._todo_m6MIP>input{margin:0}._todo__checked_kemjy{text-decoration:line-through}._mention_cpzik{font-weight:700}";
-const styles = {"header":"_header_XFwV5","level_1":"_level_1_-KPph","level_2":"_level_2_ecHlB","level_3":"_level_3_SYcVr","level_4":"_level_4_V3o5m","level_5":"_level_5_I7eVk","level_6":"_level_6_A3lbK","bold":"_bold_I8DT-","italic":"_italic_72qBe","blockquote":"_blockquote_Xq6O4","blockquote__inner":"_blockquote__inner_mjT0h","blockquote__inner-deep":"_blockquote__inner-deep_s6tNj","strike-through":"_strike-through_U64jP","list":"_list_MHIjT","common":"_common_0GdDi","link":"_link_7U9wl","link__label":"_link__label_dHGGf","image":"_image_KmBM8","code__line":"_code__line_m3IiO","code__single":"_code__single_hbMte","code__button":"_code__button_WwYE-","pending":"_pending_fgHgD","loading-btn--fade-in":"_loading-btn--fade-in_8z5an","loading-btn--rotation":"_loading-btn--rotation_QaopN","success":"_success_kUPnO","fail":"_fail_cOpap","code__span":"_code__span_iSCmj","hide":"_hide_uqpax","horizontal":"_horizontal_J1jU-","todo":"_todo_m6MIP","todo__checked":"_todo__checked_kemjy","mention":"_mention_cpzik"};
+var css_248z = "._header_XFwV5{font-weight:700}._header_XFwV5._level_1_-KPph{font-size:2em}._header_XFwV5._level_2_ecHlB{font-size:1.8em}._header_XFwV5._level_3_SYcVr{font-size:1.6em}._header_XFwV5._level_4_V3o5m{font-size:1.4em}._header_XFwV5._level_5_I7eVk{font-size:1.3em}._header_XFwV5._level_6_A3lbK{font-size:1.2em}._bold_I8DT-{font-weight:700}._italic_72qBe{font-style:italic}._blockquote_Xq6O4{border-left:3px solid;margin-left:5px}._blockquote__inner_mjT0h{margin-left:1px;padding-left:5px;position:relative}._blockquote__inner_mjT0h:before{border-left:3px solid;content:\"\";height:140%;left:0;position:absolute;top:-3px}._blockquote__inner-deep_s6tNj{margin-left:5px}._strike-through_U64jP{text-decoration:line-through}._list_MHIjT._common_0GdDi{position:relative;visibility:hidden}._list_MHIjT._common_0GdDi:after{border-radius:100%;content:\"\";height:5px;left:0;position:absolute;top:50%;transform:translateY(-50%);visibility:visible;width:5px}._link_7U9wl{text-decoration:none;text-decoration:underline}._link__label_dHGGf{font-size:12px;position:relative;top:-4px}._image_KmBM8{display:inline-flex}._code__line_m3IiO{padding:5px;position:relative}._code__button_WwYE-{background-color:transparent;border:none;border-radius:4px;box-shadow:none;cursor:pointer;min-width:30px;outline:none;padding:4px 10px;position:absolute;right:5px;top:5px;transition:all .3s ease;z-index:1}._code__button_WwYE-._pending_fgHgD:before{animation:_loading-btn--fade-in_8z5an .33s ease,_loading-btn--rotation_QaopN .66s linear 0s infinite;border:2px solid hsla(0,0%,100%,.33);border-radius:50%;border-top-color:#000;content:\"\";display:inline-block;height:10.5px;left:50%;position:absolute;top:50%;width:10.5px}._code__button_WwYE-._success_kUPnO:after{animation:_loading-btn--fade-in_8z5an .6s ease;border-color:currentcolor;border-style:solid;border-width:0 0 1px 1px;content:\"\";display:inline-block;height:7px;left:50%;position:absolute;top:50%;transform:translate(-50%,-75%) rotate(-45deg);width:11px}._code__button_WwYE-._fail_cOpap:after,._code__button_WwYE-._fail_cOpap:before{content:\" \";height:13px;left:50%;position:absolute;top:50%;width:1px}._code__button_WwYE-._fail_cOpap:before{transform:translate(-50%,-50%) rotate(45deg)}._code__button_WwYE-._fail_cOpap:after{transform:translate(-50%,-50%) rotate(-45deg)}@keyframes _loading-btn--fade-in_8z5an{0%{opacity:0}to{opacity:1}}@keyframes _loading-btn--rotation_QaopN{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)}}._code__span_iSCmj{opacity:1;transition:opacity .3s ease}._code__span_iSCmj._hide_uqpax{opacity:0}._code__block_JehA4{padding:1px 5px}._code__block_line_U7lcQ{border-left:1px solid;margin-left:5px}._horizontal_J1jU-{border-bottom:1px solid;margin:0 5px;position:relative;width:calc(100% - 10px)}._todo_m6MIP{align-items:flex-end;display:inline-flex;height:100%;padding-left:3px;padding-right:3px}._todo_m6MIP>input{margin:0}._todo__checked_kemjy{text-decoration:line-through}._mention_cpzik{font-weight:700}";
+const styles = {"header":"_header_XFwV5","level_1":"_level_1_-KPph","level_2":"_level_2_ecHlB","level_3":"_level_3_SYcVr","level_4":"_level_4_V3o5m","level_5":"_level_5_I7eVk","level_6":"_level_6_A3lbK","bold":"_bold_I8DT-","italic":"_italic_72qBe","blockquote":"_blockquote_Xq6O4","blockquote__inner":"_blockquote__inner_mjT0h","blockquote__inner-deep":"_blockquote__inner-deep_s6tNj","strike-through":"_strike-through_U64jP","list":"_list_MHIjT","common":"_common_0GdDi","link":"_link_7U9wl","link__label":"_link__label_dHGGf","image":"_image_KmBM8","code__line":"_code__line_m3IiO","code__button":"_code__button_WwYE-","pending":"_pending_fgHgD","loading-btn--fade-in":"_loading-btn--fade-in_8z5an","loading-btn--rotation":"_loading-btn--rotation_QaopN","success":"_success_kUPnO","fail":"_fail_cOpap","code__span":"_code__span_iSCmj","hide":"_hide_uqpax","code__block":"_code__block_JehA4","code__block_line":"_code__block_line_U7lcQ","horizontal":"_horizontal_J1jU-","todo":"_todo_m6MIP","todo__checked":"_todo__checked_kemjy","mention":"_mention_cpzik"};
 styleInject(css_248z);
 
 const NAME_OF_BLOCKQUOTE_MARK = "QuoteMark";
-const CODE_OF_SPACE$1 = 32;
+const CODE_OF_SPACE$2 = " ".codePointAt(0);
 const CODE_OF_BLOCKQUOTE_MARK = 62; // >
 
 class BlockquoteWidget extends view.WidgetType {
@@ -456,7 +793,7 @@ function getBlockquoteDecorations({ decorations, node, view }) {
         while (pos >= 0) {
             pos--;
             const currentCode = content.charCodeAt(pos);
-            if (currentCode === CODE_OF_SPACE$1)
+            if (currentCode === CODE_OF_SPACE$2)
                 continue;
             if (currentCode === CODE_OF_BLOCKQUOTE_MARK) {
                 if (!isHasMark) {
@@ -492,7 +829,7 @@ function getBlockquoteSelectionDecorations({ decorations, node, view, forceActiv
         while (pos >= 0) {
             pos--;
             const currentCode = content.charCodeAt(pos);
-            if (currentCode === CODE_OF_SPACE$1)
+            if (currentCode === CODE_OF_SPACE$2)
                 continue;
             if (currentCode === CODE_OF_BLOCKQUOTE_MARK) {
                 if (!isHasMark) {
@@ -529,7 +866,7 @@ const blockquoteDecorationPlugin = {
 };
 
 const NAME_OF_BOLD = "StrongEmphasis";
-const LIST_OF_BOLD_MARKS = new Set([95, 42]); // _  *
+const LIST_OF_BOLD_MARKS = new Set(["_".codePointAt(0), "*".codePointAt(0)]);
 
 function getBoldDecorations({ decorations, node, view }) {
     if (node.name !== NAME_OF_BOLD) {
@@ -566,6 +903,8 @@ const boldDecorationPlugin = {
 
 const NAME_OF_FENCED_CODE = "FencedCode";
 const NAME_OF_INLINE_CODE = "InlineCode";
+const NAME_OF_BLOCK_CODE = "CodeBlock";
+const CODE_OF_SPACE$1 = " ".codePointAt(0);
 const CODE_OF_CODE_MARK = 96; // `
 
 class CodeWidget extends view.WidgetType {
@@ -711,7 +1050,7 @@ function getCodeSelectionDecorations({ decorations, node, view, forceActive, })
     }
     else {
         decorations.push(getMarkDecoration({
-            style: clsx(styles.code__single, CLASSES.code),
+            style: clsx(CLASSES.code),
             range: [node.from, node.to],
         }));
     }
@@ -731,8 +1070,39 @@ function getCodeSelectionDecorations({ decorations, node, view, forceActive, })
         decorations.push(getHideDecoration({ range: [endMarkPosition.from, endMarkPosition.to] }));
     }
 }
+function getCodeBlockDecorations({ decorations, node, view }) {
+    if (node.name !== NAME_OF_BLOCK_CODE)
+        return;
+    const lines = view.viewportLineBlocks.filter((line) => {
+        const isOverlap = isRangeOverlap([node.from, node.to], [line.from, line.to]);
+        return isOverlap;
+    });
+    lines.forEach((line) => {
+        const content = view.state.sliceDoc(line.from, line.to);
+        let startContent = 0;
+        let pos = 0;
+        while (pos < content.length) {
+            if (content.codePointAt(pos) === CODE_OF_SPACE$1) {
+                pos++;
+            }
+            else {
+                startContent = pos;
+                break;
+            }
+        }
+        decorations.push(getMarkDecoration({
+            range: [line.from + startContent, line.to],
+            style: clsx(styles.code__block, CLASSES.codeBlock),
+        }));
+        decorations.push(getLineDecoration({
+            range: [line.from],
+            style: clsx(styles.code__block_line, CLASSES.codeBlockLine),
+        }));
+    });
+}
 const codeDecorationPlugin = {
     selectionDecorations: [getCodeSelectionDecorations],
+    decorations: [getCodeBlockDecorations],
 };
 
 const NAME_OF_HEADER = "ATXHeading";
@@ -843,6 +1213,7 @@ const CODE_OF_END_IMAGE_TEXT = 93; // ]
 const CODE_OF_START_IMAGE_URL = 40; // (
 const CODE_OF_END_IMAGE_URL = 41; // )
 
+/* eslint-disable max-params */
 const IMAGE_NODES = {};
 const INTERVAL_DELAY = 10000;
 const EXISTING_WIDGETS = new Set();
@@ -889,7 +1260,7 @@ class ImageWidget extends view.WidgetType {
         this.from = widget.from;
         this.to = widget.to;
         this.registerListeners(image);
-        IMAGE_NODES[this.key] = image;
+        IMAGE_NODES[this.key] = container;
         EXISTING_WIDGETS.add(this.key);
         return true;
     }
@@ -995,8 +1366,30 @@ function isCorrectNode$1(text, link, node) {
         textContent.includes(text));
 }
 function selectLink$1({ link, node, selection, start }) {
-    const startPosition = start ?? (node.textContent?.indexOf?.(link) || 0);
+    const startPosition = start ?? node.textContent?.indexOf?.(link) ?? 0;
     const endPosition = startPosition + link.length;
+    if (startPosition === 0 && endPosition === 0) {
+        const content = node.textContent;
+        if (!content)
+            return;
+        let startPosition = 0;
+        let pos = 0;
+        while (pos < content.length) {
+            if (content.codePointAt(pos) !== CODE_OF_START_IMAGE_URL) {
+                pos++;
+            }
+            else {
+                startPosition = pos + 1;
+                break;
+            }
+        }
+        const range = document.createRange();
+        range.setStart(node, startPosition);
+        range.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(range);
+        return;
+    }
     const range = document.createRange();
     range.setStart(node, startPosition);
     range.setEnd(node, endPosition);
@@ -1134,7 +1527,7 @@ function getItalicSelectionDecorations({ decorations, node, view, forceActive, s
     if (node.name !== NAME_OF_ITALIC) {
         return;
     }
-    if (checkIsSeveralEmphasis({ decorations, node, view, forceActive, settings })) {
+    if (checkIsSeveralEmphasis({ node, view})) {
         return void splitEmphasis({ decorations, node, view, forceActive, settings });
     }
     let step = 1;
@@ -1217,6 +1610,7 @@ function getLinkLabelSelectionDecoration({ decorations, node, view, forceActive,
     }
 }
 
+/* eslint-disable max-params */
 const LINK_NODES = {};
 class LinkWidget extends view.WidgetType {
     text;
@@ -1273,7 +1667,9 @@ class LinkWidget extends view.WidgetType {
         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.addEventListener("click", (event) => event.preventDefault(), {
+            signal: abortController.signal,
+        });
         anchor.clearListeners = () => {
             abortController.abort();
         };
@@ -1323,8 +1719,30 @@ function isCorrectNode(text, link, node) {
         textContent.includes(text));
 }
 function selectLink({ link, node, selection, start }) {
-    const startPosition = start ?? (node.textContent?.indexOf?.(link) || 0);
+    const startPosition = start ?? node.textContent?.indexOf?.(link) ?? 0;
     const endPosition = startPosition + link.length;
+    if (startPosition === 0 && endPosition === 0) {
+        const content = node.textContent;
+        if (!content)
+            return;
+        let startPosition = 0;
+        let pos = 0;
+        while (pos < content.length) {
+            if (content.codePointAt(pos) !== CODE_OF_START_LINK_URL) {
+                pos++;
+            }
+            else {
+                startPosition = pos + 1;
+                break;
+            }
+        }
+        const range = document.createRange();
+        range.setStart(node, startPosition);
+        range.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(range);
+        return;
+    }
     const range = document.createRange();
     range.setStart(node, startPosition);
     range.setEnd(node, endPosition);
@@ -1404,7 +1822,7 @@ function getLinkSelectionDecorations({ decorations, node, view, forceActive, set
             urlCoordinates.to = pos;
     }
     if (urlCoordinates.from === -1 || urlCoordinates.to === -1)
-        return void getLinkLabelSelectionDecoration({ decorations, forceActive, node, view, settings });
+        return void getLinkLabelSelectionDecoration({ decorations, forceActive, node, view});
     const text = content.substring(textCoordinates.from, textCoordinates.to);
     const url = content.substring(urlCoordinates.from, urlCoordinates.to);
     const openedLink = view.state.field(markdownState).openedLink;
@@ -1510,7 +1928,7 @@ function getListSelectionDecorations({ decorations, node, view, forceActive, })
         return;
     }
     const content = view.state.doc.sliceString(node.from, node.to);
-    const lastCodePoint = content.codePointAt(content.length - 1) || 0;
+    const lastCodePoint = content.codePointAt(content.length - 1) ?? 0;
     if (!LIST_OF_LIST_MARKS.has(lastCodePoint) && CODE_OF_ORDERED_LIST_MARK !== lastCodePoint) {
         return;
     }
@@ -1536,8 +1954,9 @@ const listDecorationPlugin = {
     selectionDecorations: [getListSelectionDecorations],
 };
 
-const CODE_OF_START_MENTION = 64; // @
-const CODE_OF_SPACE = 32;
+const CODE_OF_START_MENTION = "@".codePointAt(0); // @
+const CODE_OF_SPACE = " ".codePointAt(0);
+const CODE_OF_LINE_BREAK = "\n".codePointAt(0);
 const NAME_OF_MENTION = "Mention";
 
 function getMentionDecorations({ decorations, node }) {
@@ -1649,7 +2068,7 @@ function getTodoSelectionDecoration({ decorations, node, view, forceActive, }) {
     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);
+    const isChecked = LIST_OF_TODO_MARKS.has(view.state.doc.sliceString(node.from + 1, node.from + 2).codePointAt(0) ?? 0);
     if (forceActive ||
         !view.hasFocus ||
         !isInRange(view.state.selection.ranges, [prevSibling.from, node.from + 3])) {
@@ -1731,10 +2150,10 @@ function createDecorationsGetter(settings) {
                         return;
                     /** Decoration by change content */
                     if (processDecorations)
-                        decorationFunctions.forEach((f) => f({ decorations, node, view: view$1, settings }));
+                        decorationFunctions.forEach((funk) => funk({ decorations, node, view: view$1, settings }));
                     /** Decoration by selection content  */
                     if (processSelectionDecorations)
-                        selectionDecorationFunctions.forEach((f) => f({
+                        selectionDecorationFunctions.forEach((funk) => funk({
                             decorations: selectionDecorations,
                             node,
                             view: view$1,
@@ -1795,7 +2214,7 @@ const markdownDecorationPlugin = (settings) => {
     });
 };
 
-async function InitSettings({ readonly, vimMode, }) {
+async function initSettings({ readonly, vimMode, }) {
     let vimExtension = [];
     if (vimMode) {
         const { vim } = await import('@replit/codemirror-vim');
@@ -1808,10 +2227,10 @@ async function InitSettings({ readonly, vimMode, }) {
     ];
 }
 
-const initExtensions = async ({ onBlur, onChange, onFocus, onEnter, onEscape, readonly = true, vimMode = false, multiCursorText, provider, theme = "light", dark, light, languages, keyMaps, defaultKeyMaps, imageSrcGetter, }) => {
+const initExtensions = async ({ onBlur, onChange, onFocus, onEnter, onEscape, readonly = true, vimMode = false, multiCursorText, provider, theme = "light", dark, light, languages, keyMaps, defaultKeyMaps, imageSrcGetter, autoCompleteTagOptions, autoCompleteConfig, }) => {
     const multiCursorMode = Boolean(multiCursorText && provider);
     const asyncPlugins = await Promise.all([
-        InitSettings({ readonly, vimMode }),
+        initSettings({ readonly, vimMode }),
         initKeyMaps({
             onEnter,
             onEscape,
@@ -1824,10 +2243,11 @@ const initExtensions = async ({ onBlur, onChange, onFocus, onEnter, onEscape, re
             light,
         }),
         new Promise((resolve) => {
-            void Promise.resolve().then(() => require('./index-DU8JMAfc.js')).then(({ initMarkdown }) => {
+            void Promise.resolve().then(() => require('./index-Ne5xJkxS.js')).then(({ initMarkdown }) => {
                 resolve(initMarkdown({ languages, imageSrcGetter }));
             });
         }),
+        initAutoComplete({ autoCompleteConfig, autoCompleteTagOptions }),
     ]);
     const extensions = [
         ...asyncPlugins,
@@ -1848,8 +2268,7 @@ async function initEditorProvider({ roomId, url, userName = "Anonymous", userCol
     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
+    if (!userColor?.startsWith?.("#")) {
         console.warn("user color must be hex!");
         userColor = "#30bced";
     }
@@ -1864,7 +2283,7 @@ async function initEditorProvider({ roomId, url, userName = "Anonymous", userCol
         provider.on("status", (event) => {
             onStartProvider(event?.status);
         });
-    if (provider && multiCursorText)
+    if (provider)
         provider.on("sync", (isSynced) => {
             if (isSynced && !multiCursorText.length && initialText) {
                 multiCursorText.insert(0, initialText);
@@ -1892,7 +2311,7 @@ async function initEditor({ multiCursor, root, initialText, ...rest }) {
     }
     const state = await initEditorState({
         ...rest,
-        text: initialText || "",
+        text: initialText ?? "",
         provider,
         multiCursorText,
     });
@@ -1978,14 +2397,10 @@ class Editor {
                 effects: ThemeCompartment.reconfigure(theme === "dark"
                     ? getDarkTheme({
                         dark: this.arguments.dark,
-                        light: this.arguments.light,
-                        theme,
-                    })
+                        light: this.arguments.light})
                     : getLightTheme({
                         dark: this.arguments.dark,
-                        light: this.arguments.light,
-                        theme,
-                    })),
+                        light: this.arguments.light})),
             });
         });
     };
@@ -2019,10 +2434,11 @@ class Editor {
     };
 }
 
+exports.CODE_OF_LINE_BREAK = CODE_OF_LINE_BREAK;
 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-BgxbH3r2.js.map
+//# sourceMappingURL=index-Df0WnJ4c.js.map