@milkdown/crepe 7.4.0 → 7.5.1

package/lib/esm/{index-q-qE7-96.js → index-Xzdc2jbA.js}

@@ -1,28 +1,5 @@
-import { html, c, useHost, useRef, useState, useMemo, useEffect, useLayoutEffect, h } from 'atomico';
-import { c as chevronDown, s as search, x as xCircle, a as clsx } from './clsx-R7WFaNKL.js';
-import { w as withMeta } from './meta-3ZYGAGrY.js';
-import { $ as $ctx, c as codeBlockSchema } from './index-JkHHp3K-.js';
-import { d as defIfNotExists } from './helper-iYEjPbOY.js';
-import { undo as undo$1, redo as redo$1 } from '@milkdown/prose/history';
-import { exitCode } from '@milkdown/prose/commands';
-import { TextSelection } from '@milkdown/prose/state';
-import { c as computePosition, p as platform, t as t$1 } from './composed-offset-position.browser.min-Tnm31e-m.js';
-import { $ as $view } from './_view-JjtfhQ8k.js';
-
-const defaultConfig$1 = {
-  extensions: [],
-  languages: [],
-  searchPlaceholder: "Search language",
-  expandIcon: () => chevronDown,
-  searchIcon: () => search,
-  clearSearchIcon: () => xCircle,
-  renderLanguage: (language) => html`${language}`
-};
-const codeBlockConfig = $ctx(defaultConfig$1, "codeBlockConfigCtx");
-withMeta(codeBlockConfig, {
-  displayName: "Config<code-block>",
-  group: "CodeBlock"
-});
+import { codeBlockConfig, codeBlockComponent } from '@milkdown/kit/component/code-block';
+import { c as chevronDownIcon, s as searchIcon, a as clearIcon } from './todoList-9QsDDcmB.js';
 
 /**
 The data structure for documents. @nonabstract
@@ -14752,427 +14729,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(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 (!exitCode(view.state, view.dispatch))
-              return false;
-            view.focus();
-            return true;
-          }
-        },
-        { key: "Mod-z", run: () => undo$1(view.state, view.dispatch) },
-        { key: "Shift-Mod-z", run: () => redo$1(view.state, view.dispatch) },
-        { key: "Mod-y", run: () => redo$1(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 = this.view.state;
-            const pos = (_a = this.getPos()) != null ? _a : 0;
-            const tr = state.tr.replaceWith(pos, pos + this.node.nodeSize, state.schema.nodes.paragraph.createChecked({}, this.node.content));
-            tr.setSelection(TextSelection.near(tr.doc.resolve(pos)));
-            this.view.dispatch(tr);
-            this.view.focus();
-            return true;
-          }
-        }
-      ];
-    };
-    this.maybeEscape = (unit, dir) => {
-      var _a;
-      const { state } = this.cm;
-      let main = state.selection.main;
-      if (!main.empty)
-        return false;
-      if (unit === "line")
-        main = state.doc.lineAt(main.head);
-      if (dir < 0 ? main.from > 0 : main.to < state.doc.length)
-        return false;
-      const targetPos = ((_a = this.getPos()) != null ? _a : 0) + (dir < 0 ? 0 : this.node.nodeSize);
-      const selection = 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 = useHost();
-  const triggerRef = useRef();
-  const pickerRef = useRef();
-  const [filter, setFilter] = useState("");
-  const [showPicker, setShowPicker] = useState(false);
-  const root = useMemo(() => host.current.getRootNode(), [host]);
-  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]);
-  useEffect(() => {
-    setShowPicker(false);
-  }, [language]);
-  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);
-    };
-  }, []);
-  useLayoutEffect(() => {
-    setFilter("");
-    const picker = triggerRef.current;
-    const languageList = pickerRef.current;
-    if (!picker || !languageList)
-      return;
-    computePosition(picker, languageList, {
-      placement: "bottom-start",
-      platform: {
-        ...platform,
-        getOffsetParent: (element) => platform.getOffsetParent(element, t$1)
-      }
-    }).then(({ x, y }) => {
-      Object.assign(languageList.style, {
-        left: `${x}px`,
-        top: `${y}px`
-      });
-    });
-  }, [showPicker]);
-  const languages = 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 html`<host class=${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("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("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 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">${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 = c(codeComponent);
-
-defIfNotExists("milkdown-code-block", CodeElement);
-const codeBlockView = $view(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
-  );
-});
-withMeta(codeBlockView, {
-  displayName: "NodeView<code-block>",
-  group: "CodeBlock"
-});
-
-const codeBlockComponent = [
-  codeBlockView,
-  codeBlockConfig
-];
-
 /**
 The default maximum length of a `TreeBuffer` node.
 */
@@ -25607,18 +25163,6 @@ const basicSetup = /*@__PURE__*/(() => [
     ])
 ])();
 
-const clearIcon = 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 {
@@ -25626,26 +25170,38 @@ const defineFeature = (editor, config = {}) => {
       theme
     } = config;
     if (!languages) {
-      const { languages: langList } = await import('./index-NmjiRA0M.js');
+      const { languages: langList } = await import('./index-2I_xbjAZ.js');
       languages = langList;
     }
     if (!theme) {
-      const { nord } = await import('./index-PkBZpDL4.js');
+      const { nord } = await import('./index-ftnOhuRS.js');
       theme = nord;
     }
-    ctx.update(codeBlockConfig.key, (defaultConfig) => ({
-      ...defaultConfig,
-      languages,
-      clearSearchIcon: () => clearIcon,
-      extensions: [basicSetup, keymap.of(defaultKeymap.concat(indentWithTab)), theme]
-    }));
+    ctx.update(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 || (() => chevronDownIcon),
+        searchIcon: config.searchIcon || (() => searchIcon),
+        clearSearchIcon: config.clearSearchIcon || (() => clearIcon),
+        searchPlaceholder: config.searchPlaceholder || "Search language",
+        noResultText: config.noResultText || "No result",
+        renderLanguage: config.renderLanguage || defaultConfig.renderLanguage
+      };
+    });
   }).use(codeBlockComponent);
 };
 
 var index = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  defineFeature: defineFeature
+   __proto__: null,
+   defineFeature: defineFeature
 });
 
 export { languageDataProp as A, foldService as B, CompletionContext as C, ParseContext as D, EditorView as E, NodeWeakMap as F, snippetCompletion as G, HighlightStyle as H, IterMode as I, bracketMatchingHandle as J, DefaultBufferLength as K, LanguageDescription as L, sublanguageProp as M, NodeType as N, index as O, Parser as P, StreamLanguage as S, Tag as T, LanguageSupport as a, styleTags as b, continuedIndent as c, LRLanguage as d, ifNotIn as e, foldNodeProp as f, completeFromList as g, syntaxTree as h, indentNodeProp as i, flatIndent as j, delimitedIndent as k, foldInside as l, EditorSelection as m, NodeProp as n, NodeSet as o, parseMixed as p, Tree as q, countColumn as r, syntaxHighlighting as s, tags as t, Prec as u, keymap as v, EditorState as w, Language as x, indentUnit as y, defineLanguageFacet as z };
-//# sourceMappingURL=index-q-qE7-96.js.map
+//# sourceMappingURL=index-Xzdc2jbA.js.map