@milkdown/crepe 7.5.0 → 7.5.1

package/lib/cjs/{index-Jztk6JlP.js → index-U7GWrg-w.js}

@@ -1,31 +1,7 @@
 'use strict';
 
-var todoList = require('./todoList-Ze4FLMlx.js');
-var atomico = require('atomico');
-var index$1 = require('./index-tBw4NmwY.js');
-var helper = require('./helper-1aludV1Z.js');
-var history$1 = require('@milkdown/prose/history');
-var commands = require('@milkdown/prose/commands');
-var state = require('@milkdown/prose/state');
-var floatingUi_dom = require('./floating-ui.dom-2cjBpir5.js');
-var clsx = require('./clsx-dASsG01A.js');
-var $view = require('./_view-N32ied53.js');
-
-const defaultConfig$1 = {
-  extensions: [],
-  languages: [],
-  expandIcon: () => "\u2B07",
-  searchIcon: () => "\u{1F50D}",
-  clearSearchIcon: () => "\u232B",
-  searchPlaceholder: "Search language",
-  noResultText: "No result",
-  renderLanguage: (language) => atomico.html`${language}`
-};
-const codeBlockConfig = index$1.$ctx(defaultConfig$1, "codeBlockConfigCtx");
-todoList.withMeta(codeBlockConfig, {
-  displayName: "Config<code-block>",
-  group: "CodeBlock"
-});
+var codeBlock = require('@milkdown/kit/component/code-block');
+var todoList = require('./todoList-YYRQo7wG.js');
 
 /**
 The data structure for documents. @nonabstract
@@ -14755,429 +14731,6 @@ function highlightActiveLineGutter() {
     return activeLineGutterHighlighter;
 }
 
-class CodeMirrorBlock {
-  constructor(node, view, getPos, loader, config) {
-    this.node = node;
-    this.view = view;
-    this.getPos = getPos;
-    this.loader = loader;
-    this.config = config;
-    this.updating = false;
-    this.languageName = "";
-    this.forwardUpdate = (update) => {
-      var _a;
-      if (this.updating || !this.cm.hasFocus)
-        return;
-      let offset = ((_a = this.getPos()) != null ? _a : 0) + 1;
-      const { main } = update.state.selection;
-      const selFrom = offset + main.from;
-      const selTo = offset + main.to;
-      const pmSel = this.view.state.selection;
-      if (update.docChanged || pmSel.from !== selFrom || pmSel.to !== selTo) {
-        const tr = this.view.state.tr;
-        update.changes.iterChanges((fromA, toA, fromB, toB, text) => {
-          if (text.length)
-            tr.replaceWith(offset + fromA, offset + toA, this.view.state.schema.text(text.toString()));
-          else tr.delete(offset + fromA, offset + toA);
-          offset += toB - fromB - (toA - fromA);
-        });
-        tr.setSelection(state.TextSelection.create(tr.doc, selFrom, selTo));
-        this.view.dispatch(tr);
-      }
-    };
-    this.codeMirrorKeymap = () => {
-      const view = this.view;
-      return [
-        { key: "ArrowUp", run: () => this.maybeEscape("line", -1) },
-        { key: "ArrowLeft", run: () => this.maybeEscape("char", -1) },
-        { key: "ArrowDown", run: () => this.maybeEscape("line", 1) },
-        { key: "ArrowRight", run: () => this.maybeEscape("char", 1) },
-        {
-          key: "Mod-Enter",
-          run: () => {
-            if (!commands.exitCode(view.state, view.dispatch))
-              return false;
-            view.focus();
-            return true;
-          }
-        },
-        { key: "Mod-z", run: () => history$1.undo(view.state, view.dispatch) },
-        { key: "Shift-Mod-z", run: () => history$1.redo(view.state, view.dispatch) },
-        { key: "Mod-y", run: () => history$1.redo(view.state, view.dispatch) },
-        {
-          key: "Backspace",
-          run: () => {
-            var _a;
-            const ranges = this.cm.state.selection.ranges;
-            if (ranges.length > 1)
-              return false;
-            const selection = ranges[0];
-            if (selection && (!selection.empty || selection.anchor > 0))
-              return false;
-            if (this.cm.state.doc.lines >= 2)
-              return false;
-            const state$1 = this.view.state;
-            const pos = (_a = this.getPos()) != null ? _a : 0;
-            const tr = state$1.tr.replaceWith(pos, pos + this.node.nodeSize, state$1.schema.nodes.paragraph.createChecked({}, this.node.content));
-            tr.setSelection(state.TextSelection.near(tr.doc.resolve(pos)));
-            this.view.dispatch(tr);
-            this.view.focus();
-            return true;
-          }
-        }
-      ];
-    };
-    this.maybeEscape = (unit, dir) => {
-      var _a;
-      const { state: state$1 } = this.cm;
-      let main = state$1.selection.main;
-      if (!main.empty)
-        return false;
-      if (unit === "line")
-        main = state$1.doc.lineAt(main.head);
-      if (dir < 0 ? main.from > 0 : main.to < state$1.doc.length)
-        return false;
-      const targetPos = ((_a = this.getPos()) != null ? _a : 0) + (dir < 0 ? 0 : this.node.nodeSize);
-      const selection = state.TextSelection.near(this.view.state.doc.resolve(targetPos), dir);
-      const tr = this.view.state.tr.setSelection(selection).scrollIntoView();
-      this.view.dispatch(tr);
-      this.view.focus();
-      return true;
-    };
-    this.setLanguage = (language) => {
-      var _a;
-      this.view.dispatch(
-        this.view.state.tr.setNodeAttribute((_a = this.getPos()) != null ? _a : 0, "language", language)
-      );
-    };
-    this.getAllLanguages = () => {
-      return this.loader.getAll();
-    };
-    this.languageConf = new Compartment();
-    this.readOnlyConf = new Compartment();
-    this.cm = new EditorView({
-      doc: this.node.textContent,
-      root: this.view.root,
-      extensions: [
-        this.readOnlyConf.of(EditorState.readOnly.of(!this.view.editable)),
-        keymap.of(this.codeMirrorKeymap()),
-        this.languageConf.of([]),
-        ...config.extensions,
-        EditorView.updateListener.of(this.forwardUpdate)
-      ]
-    });
-    this.dom = this.createDom();
-    this.updateLanguage();
-  }
-  createDom() {
-    const dom = document.createElement("milkdown-code-block");
-    dom.codemirror = this.cm;
-    dom.getAllLanguages = this.getAllLanguages;
-    dom.setLanguage = this.setLanguage;
-    dom.isEditorReadonly = () => !this.view.editable;
-    const {
-      languages,
-      extensions,
-      ...viewConfig
-    } = this.config;
-    dom.config = viewConfig;
-    return dom;
-  }
-  updateLanguage() {
-    const languageName = this.node.attrs.language;
-    if (languageName === this.languageName)
-      return;
-    this.dom.language = languageName;
-    const language = this.loader.load(languageName != null ? languageName : "");
-    language.then((lang) => {
-      if (lang) {
-        this.cm.dispatch({
-          effects: this.languageConf.reconfigure(lang)
-        });
-        this.languageName = languageName;
-      }
-    });
-  }
-  setSelection(anchor, head) {
-    if (!this.cm.dom.isConnected)
-      return;
-    this.cm.focus();
-    this.updating = true;
-    this.cm.dispatch({ selection: { anchor, head } });
-    this.updating = false;
-  }
-  update(node) {
-    if (node.type !== this.node.type)
-      return false;
-    if (this.updating)
-      return true;
-    this.node = node;
-    this.updateLanguage();
-    if (this.view.editable === this.cm.state.readOnly) {
-      this.cm.dispatch({
-        effects: this.readOnlyConf.reconfigure(EditorState.readOnly.of(!this.view.editable))
-      });
-    }
-    const change = computeChange(this.cm.state.doc.toString(), node.textContent);
-    if (change) {
-      this.updating = true;
-      this.cm.dispatch({
-        changes: { from: change.from, to: change.to, insert: change.text }
-      });
-      this.updating = false;
-    }
-    return true;
-  }
-  selectNode() {
-    this.dom.selected = true;
-    this.cm.focus();
-  }
-  deselectNode() {
-    this.dom.selected = false;
-  }
-  stopEvent() {
-    return true;
-  }
-  destroy() {
-    this.cm.destroy();
-  }
-}
-function computeChange(oldVal, newVal) {
-  if (oldVal === newVal)
-    return null;
-  let start = 0;
-  let oldEnd = oldVal.length;
-  let newEnd = newVal.length;
-  while (start < oldEnd && oldVal.charCodeAt(start) === newVal.charCodeAt(start))
-    ++start;
-  while (oldEnd > start && newEnd > start && oldVal.charCodeAt(oldEnd - 1) === newVal.charCodeAt(newEnd - 1)) {
-    oldEnd--;
-    newEnd--;
-  }
-  return { from: start, to: oldEnd, text: newVal.slice(start, newEnd) };
-}
-
-class LanguageLoader {
-  constructor(languages) {
-    this.languages = languages;
-    this.map = {};
-    languages.forEach((language) => {
-      language.alias.forEach((alias) => {
-        this.map[alias] = language;
-      });
-    });
-  }
-  getAll() {
-    return this.languages.map((language) => {
-      return {
-        name: language.name,
-        alias: language.alias
-      };
-    });
-  }
-  load(languageName) {
-    const languageMap = this.map;
-    const language = languageMap[languageName.toLowerCase()];
-    if (!language)
-      return Promise.resolve(void 0);
-    if (language.support)
-      return Promise.resolve(language.support);
-    return language.load();
-  }
-}
-
-const codeComponent = ({
-  selected = false,
-  codemirror,
-  getAllLanguages,
-  setLanguage,
-  language,
-  config,
-  isEditorReadonly
-}) => {
-  var _a, _b, _c;
-  const host = atomico.useHost();
-  const triggerRef = atomico.useRef();
-  const pickerRef = atomico.useRef();
-  const [filter, setFilter] = atomico.useState("");
-  const [showPicker, setShowPicker] = atomico.useState(false);
-  const root = atomico.useMemo(() => host.current.getRootNode(), [host]);
-  atomico.useEffect(() => {
-    var _a2;
-    const lang = (_a2 = getAllLanguages == null ? void 0 : getAllLanguages()) == null ? void 0 : _a2.find((languageInfo) => languageInfo.alias.some((alias) => alias.toLowerCase() === (language == null ? void 0 : language.toLowerCase())));
-    if (lang && lang.name !== language)
-      setLanguage == null ? void 0 : setLanguage(lang.name);
-  }, [language]);
-  atomico.useEffect(() => {
-    setShowPicker(false);
-  }, [language]);
-  atomico.useEffect(() => {
-    const clickHandler = (e) => {
-      const target = e.target;
-      if (triggerRef.current && triggerRef.current.contains(target))
-        return;
-      const picker = pickerRef.current;
-      if (!picker)
-        return;
-      if (picker.dataset.expanded !== "true")
-        return;
-      if (!picker.contains(target))
-        setShowPicker(false);
-    };
-    root.addEventListener("click", clickHandler);
-    return () => {
-      root.removeEventListener("click", clickHandler);
-    };
-  }, []);
-  atomico.useLayoutEffect(() => {
-    setFilter("");
-    const picker = triggerRef.current;
-    const languageList = pickerRef.current;
-    if (!picker || !languageList)
-      return;
-    floatingUi_dom.computePosition(picker, languageList, {
-      placement: "bottom-start"
-    }).then(({ x, y }) => {
-      Object.assign(languageList.style, {
-        left: `${x}px`,
-        top: `${y}px`
-      });
-    });
-  }, [showPicker]);
-  const languages = atomico.useMemo(() => {
-    var _a2;
-    if (!showPicker)
-      return [];
-    const all = (_a2 = getAllLanguages == null ? void 0 : getAllLanguages()) != null ? _a2 : [];
-    const selected2 = all.find((languageInfo) => languageInfo.name.toLowerCase() === (language == null ? void 0 : language.toLowerCase()));
-    const filtered = all.filter((languageInfo) => {
-      return (languageInfo.name.toLowerCase().includes(filter.toLowerCase()) || languageInfo.alias.some((alias) => alias.toLowerCase().includes(filter.toLowerCase()))) && languageInfo !== selected2;
-    });
-    if (filtered.length === 0)
-      return [];
-    if (!selected2)
-      return filtered;
-    return [selected2, ...filtered];
-  }, [filter, showPicker, language]);
-  const changeFilter = (e) => {
-    const target = e.target;
-    setFilter(target.value);
-  };
-  const onTogglePicker = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (isEditorReadonly == null ? void 0 : isEditorReadonly())
-      return;
-    setShowPicker((show) => {
-      return !show;
-    });
-  };
-  const onClear = (e) => {
-    e.preventDefault();
-    setFilter("");
-  };
-  const onSearchKeydown = (e) => {
-    if (e.key === "Escape")
-      setFilter("");
-  };
-  const onListKeydown = (e) => {
-    if (e.key === "Enter") {
-      const active = document.activeElement;
-      if (active instanceof HTMLElement && active.dataset.language)
-        setLanguage == null ? void 0 : setLanguage(active.dataset.language);
-    }
-  };
-  const renderedLanguageList = atomico.useMemo(() => {
-    if (!(languages == null ? void 0 : languages.length))
-      return atomico.html`<li class="language-list-item no-result">${config == null ? void 0 : config.noResultText}</li>`;
-    return languages.map(
-      (languageInfo) => {
-        var _a2;
-        return atomico.html`<li
-        role="listitem"
-        tabindex="0"
-        class="language-list-item"
-        aria-selected=${languageInfo.name.toLowerCase() === (language == null ? void 0 : language.toLowerCase())}
-        data-language=${languageInfo.name}
-        onclick=${() => setLanguage == null ? void 0 : setLanguage(languageInfo.name)}
-      >
-        ${(_a2 = config == null ? void 0 : config.renderLanguage) == null ? void 0 : _a2.call(config, languageInfo.name, languageInfo.name.toLowerCase() === (language == null ? void 0 : language.toLowerCase()))}
-      </li>`;
-      }
-    );
-  }, [languages]);
-  return atomico.html`<host class=${clsx.clsx(selected && "selected")}>
-    <div class="tools">
-      <button
-        ref=${triggerRef}
-        class="language-button"
-        onpointerdown=${onTogglePicker}
-        data-expanded=${showPicker}
-      >
-        ${language || "Text"}
-        <div class="expand-icon">
-          ${(_a = config == null ? void 0 : config.expandIcon) == null ? void 0 : _a.call(config)}
-        </div>
-      </button>
-      <div ref=${pickerRef} data-expanded=${showPicker} class=${clsx.clsx("language-picker", showPicker && "show")}>
-        <div class="list-wrapper">
-          <div class="search-box">
-            <div class="search-icon">
-              ${(_b = config == null ? void 0 : config.searchIcon) == null ? void 0 : _b.call(config)}
-            </div>
-            <input
-              class="search-input"
-              placeholder=${config == null ? void 0 : config.searchPlaceholder}
-              value=${filter}
-              oninput=${changeFilter}
-              onkeydown=${onSearchKeydown}
-            />
-            <div class=${clsx.clsx("clear-icon", filter.length === 0 && "hidden")} onmousedown=${onClear}>
-              ${(_c = config == null ? void 0 : config.clearSearchIcon) == null ? void 0 : _c.call(config)}
-            </div>
-          </div>
-          <ul class="language-list" role="listbox" onkeydown=${onListKeydown}>
-            ${renderedLanguageList}
-          </ul>
-        </div>
-      </div>
-    </div>
-    <div class="codemirror-host">${atomico.h(codemirror == null ? void 0 : codemirror.dom, {})}</div>
-  </host>`;
-};
-codeComponent.props = {
-  selected: Boolean,
-  codemirror: Object,
-  language: String,
-  getAllLanguages: Function,
-  setLanguage: Function,
-  isEditorReadonly: Function,
-  config: Object
-};
-const CodeElement = atomico.c(codeComponent);
-
-helper.defIfNotExists("milkdown-code-block", CodeElement);
-const codeBlockView = $view.$view(index$1.codeBlockSchema.node, (ctx) => {
-  const config = ctx.get(codeBlockConfig.key);
-  const languageLoader = new LanguageLoader(config.languages);
-  return (node, view, getPos) => new CodeMirrorBlock(
-    node,
-    view,
-    getPos,
-    languageLoader,
-    config
-  );
-});
-todoList.withMeta(codeBlockView, {
-  displayName: "NodeView<code-block>",
-  group: "CodeBlock"
-});
-
-const codeBlockComponent = [
-  codeBlockView,
-  codeBlockConfig
-];
-
 /**
 The default maximum length of a `TreeBuffer` node.
 */
@@ -25619,14 +25172,14 @@ const defineFeature = (editor, config = {}) => {
       theme
     } = config;
     if (!languages) {
-      const { languages: langList } = await Promise.resolve().then(function () { return require('./index-nTfDKYYi.js'); });
+      const { languages: langList } = await Promise.resolve().then(function () { return require('./index-ahL5MvrQ.js'); });
       languages = langList;
     }
     if (!theme) {
-      const { nord } = await Promise.resolve().then(function () { return require('./index-FbNqlZU8.js'); });
+      const { nord } = await Promise.resolve().then(function () { return require('./index-WQl7Du53.js'); });
       theme = nord;
     }
-    ctx.update(codeBlockConfig.key, (defaultConfig) => {
+    ctx.update(codeBlock.codeBlockConfig.key, (defaultConfig) => {
       var _a;
       return {
         extensions: [
@@ -25644,12 +25197,12 @@ const defineFeature = (editor, config = {}) => {
         renderLanguage: config.renderLanguage || defaultConfig.renderLanguage
       };
     });
-  }).use(codeBlockComponent);
+  }).use(codeBlock.codeBlockComponent);
 };
 
 var index = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  defineFeature: defineFeature
+   __proto__: null,
+   defineFeature: defineFeature
 });
 
 exports.CompletionContext = CompletionContext;
@@ -25695,4 +25248,4 @@ exports.sublanguageProp = sublanguageProp;
 exports.syntaxHighlighting = syntaxHighlighting;
 exports.syntaxTree = syntaxTree;
 exports.tags = tags;
-//# sourceMappingURL=index-Jztk6JlP.js.map
+//# sourceMappingURL=index-U7GWrg-w.js.map