@milkdown/crepe 7.4.0 → 7.5.1

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

@@ -1,30 +1,7 @@
 'use strict';
 
-var atomico = require('atomico');
-var clsx = require('./clsx-7JLENl8W.js');
-var meta$1 = require('./meta-q8q9fHyr.js');
-var index$1 = require('./index-kNI3S3lF.js');
-var helper = require('./helper-OEW-2Vxr.js');
-var history$1 = require('@milkdown/prose/history');
-var commands = require('@milkdown/prose/commands');
-var state = require('@milkdown/prose/state');
-var composedOffsetPosition_browser_min = require('./composed-offset-position.browser.min-FwypoGc1.js');
-var $view = require('./_view-TbSIR42F.js');
-
-const defaultConfig$1 = {
-  extensions: [],
-  languages: [],
-  searchPlaceholder: "Search language",
-  expandIcon: () => clsx.chevronDown,
-  searchIcon: () => clsx.search,
-  clearSearchIcon: () => clsx.xCircle,
-  renderLanguage: (language) => atomico.html`${language}`
-};
-const codeBlockConfig = index$1.$ctx(defaultConfig$1, "codeBlockConfigCtx");
-meta$1.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
@@ -14754,427 +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;
-    composedOffsetPosition_browser_min.computePosition(picker, languageList, {
-      placement: "bottom-start",
-      platform: {
-        ...composedOffsetPosition_browser_min.platform,
-        getOffsetParent: (element) => composedOffsetPosition_browser_min.platform.getOffsetParent(element, composedOffsetPosition_browser_min.t)
-      }
-    }).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 (!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);
-    }
-  };
-  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}>
-            ${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>`;
-    }
-  )}
-          </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
-  );
-});
-meta$1.withMeta(codeBlockView, {
-  displayName: "NodeView<code-block>",
-  group: "CodeBlock"
-});
-
-const codeBlockComponent = [
-  codeBlockView,
-  codeBlockConfig
-];
-
 /**
 The default maximum length of a `TreeBuffer` node.
 */
@@ -25609,18 +25165,6 @@ const basicSetup = /*@__PURE__*/(() => [
     ])
 ])();
 
-const clearIcon = atomico.html`
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-    <g clip-path="url(#clip0_1098_15553)">
-      <path d="M18.3007 5.70973C17.9107 5.31973 17.2807 5.31973 16.8907 5.70973L12.0007 10.5897L7.1107 5.69973C6.7207 5.30973 6.0907 5.30973 5.7007 5.69973C5.3107 6.08973 5.3107 6.71973 5.7007 7.10973L10.5907 11.9997L5.7007 16.8897C5.3107 17.2797 5.3107 17.9097 5.7007 18.2997C6.0907 18.6897 6.7207 18.6897 7.1107 18.2997L12.0007 13.4097L16.8907 18.2997C17.2807 18.6897 17.9107 18.6897 18.3007 18.2997C18.6907 17.9097 18.6907 17.2797 18.3007 16.8897L13.4107 11.9997L18.3007 7.10973C18.6807 6.72973 18.6807 6.08973 18.3007 5.70973Z" fill="#817567"/>
-    </g>
-    <defs>
-      <clipPath id="clip0_1098_15553">
-        <rect width="24" height="24" fill="white"/>
-      </clipPath>
-    </defs>
-  </svg>
-`;
 const defineFeature = (editor, config = {}) => {
   editor.config(async (ctx) => {
     let {
@@ -25628,25 +25172,37 @@ const defineFeature = (editor, config = {}) => {
       theme
     } = config;
     if (!languages) {
-      const { languages: langList } = await Promise.resolve().then(function () { return require('./index-GEIgbcVc.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-OIQn1x0L.js'); });
+      const { nord } = await Promise.resolve().then(function () { return require('./index-WQl7Du53.js'); });
       theme = nord;
     }
-    ctx.update(codeBlockConfig.key, (defaultConfig) => ({
-      ...defaultConfig,
-      languages,
-      clearSearchIcon: () => clearIcon,
-      extensions: [basicSetup, keymap.of(defaultKeymap.concat(indentWithTab)), theme]
-    }));
-  }).use(codeBlockComponent);
+    ctx.update(codeBlock.codeBlockConfig.key, (defaultConfig) => {
+      var _a;
+      return {
+        extensions: [
+          keymap.of(defaultKeymap.concat(indentWithTab)),
+          basicSetup,
+          theme,
+          ...(_a = config == null ? void 0 : config.extensions) != null ? _a : []
+        ],
+        languages,
+        expandIcon: config.expandIcon || (() => todoList.chevronDownIcon),
+        searchIcon: config.searchIcon || (() => todoList.searchIcon),
+        clearSearchIcon: config.clearSearchIcon || (() => todoList.clearIcon),
+        searchPlaceholder: config.searchPlaceholder || "Search language",
+        noResultText: config.noResultText || "No result",
+        renderLanguage: config.renderLanguage || defaultConfig.renderLanguage
+      };
+    });
+  }).use(codeBlock.codeBlockComponent);
 };
 
 var index = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  defineFeature: defineFeature
+   __proto__: null,
+   defineFeature: defineFeature
 });
 
 exports.CompletionContext = CompletionContext;
@@ -25692,4 +25248,4 @@ exports.sublanguageProp = sublanguageProp;
 exports.syntaxHighlighting = syntaxHighlighting;
 exports.syntaxTree = syntaxTree;
 exports.tags = tags;
-//# sourceMappingURL=index-llNS_EuP.js.map
+//# sourceMappingURL=index-U7GWrg-w.js.map