@sanity/code-input 5.0.0 → 5.1.1

package/lib/_chunks/CodeMirrorProxy-A8RWnbXx.js

@@ -1,615 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { useMemo, forwardRef, useState, useEffect, useCallback, useContext } from 'react';
-import CodeMirror from '@uiw/react-codemirror';
-import { useTheme, rgba, rem, useRootTheme } from '@sanity/ui';
-import { createTheme } from '@uiw/codemirror-themes';
-import { tags } from '@lezer/highlight';
-import { CodeInputConfigContext } from './index-4cT0QYPN.js';
-import { StreamLanguage } from '@codemirror/language';
-import { StateEffect, StateField } from '@codemirror/state';
-import { Decoration, EditorView, lineNumbers } from '@codemirror/view';
-function useCodeMirrorTheme() {
-  const theme = useTheme();
-  return useMemo(() => {
-    const {
-      code: codeFont
-    } = theme.sanity.fonts;
-    const {
-      base,
-      card,
-      dark,
-      syntax
-    } = theme.sanity.color;
-    return createTheme({
-      theme: dark ? "dark" : "light",
-      settings: {
-        background: card.enabled.bg,
-        foreground: card.enabled.code.fg,
-        lineHighlight: card.enabled.bg,
-        fontFamily: codeFont.family,
-        caret: base.focusRing,
-        selection: rgba(base.focusRing, 0.2),
-        selectionMatch: rgba(base.focusRing, 0.4),
-        gutterBackground: card.disabled.bg,
-        gutterForeground: card.disabled.code.fg,
-        gutterActiveForeground: card.enabled.fg
-      },
-      styles: [{
-        tag: [tags.heading, tags.heading2, tags.heading3, tags.heading4, tags.heading5, tags.heading6],
-        color: card.enabled.fg
-      }, {
-        tag: tags.angleBracket,
-        color: card.enabled.code.fg
-      }, {
-        tag: tags.atom,
-        color: syntax.keyword
-      }, {
-        tag: tags.attributeName,
-        color: syntax.attrName
-      }, {
-        tag: tags.bool,
-        color: syntax.boolean
-      }, {
-        tag: tags.bracket,
-        color: card.enabled.code.fg
-      }, {
-        tag: tags.className,
-        color: syntax.className
-      }, {
-        tag: tags.comment,
-        color: syntax.comment
-      }, {
-        tag: tags.definition(tags.typeName),
-        color: syntax.function
-      }, {
-        tag: [tags.definition(tags.variableName), tags.function(tags.variableName), tags.className, tags.attributeName],
-        color: syntax.function
-      }, {
-        tag: [tags.function(tags.propertyName), tags.propertyName],
-        color: syntax.function
-      }, {
-        tag: tags.keyword,
-        color: syntax.keyword
-      }, {
-        tag: tags.null,
-        color: syntax.number
-      }, {
-        tag: tags.number,
-        color: syntax.number
-      }, {
-        tag: tags.meta,
-        color: card.enabled.code.fg
-      }, {
-        tag: tags.operator,
-        color: syntax.operator
-      }, {
-        tag: tags.propertyName,
-        color: syntax.property
-      }, {
-        tag: [tags.string, tags.special(tags.brace)],
-        color: syntax.string
-      }, {
-        tag: tags.tagName,
-        color: syntax.className
-      }, {
-        tag: tags.typeName,
-        color: syntax.keyword
-      }]
-    });
-  }, [theme]);
-}
-const defaultCodeModes = [{
-  name: "groq",
-  loader: () => import('@codemirror/lang-javascript').then(_ref => {
-    let {
-      javascriptLanguage
-    } = _ref;
-    return javascriptLanguage;
-  })
-}, {
-  name: "javascript",
-  loader: () => import('@codemirror/lang-javascript').then(_ref2 => {
-    let {
-      javascript
-    } = _ref2;
-    return javascript({
-      jsx: false
-    });
-  })
-}, {
-  name: "jsx",
-  loader: () => import('@codemirror/lang-javascript').then(_ref3 => {
-    let {
-      javascript
-    } = _ref3;
-    return javascript({
-      jsx: true
-    });
-  })
-}, {
-  name: "typescript",
-  loader: () => import('@codemirror/lang-javascript').then(_ref4 => {
-    let {
-      javascript
-    } = _ref4;
-    return javascript({
-      jsx: false,
-      typescript: true
-    });
-  })
-}, {
-  name: "tsx",
-  loader: () => import('@codemirror/lang-javascript').then(_ref5 => {
-    let {
-      javascript
-    } = _ref5;
-    return javascript({
-      jsx: true,
-      typescript: true
-    });
-  })
-}, {
-  name: "php",
-  loader: () => import('@codemirror/lang-php').then(_ref6 => {
-    let {
-      php
-    } = _ref6;
-    return php();
-  })
-}, {
-  name: "sql",
-  loader: () => import('@codemirror/lang-sql').then(_ref7 => {
-    let {
-      sql
-    } = _ref7;
-    return sql();
-  })
-}, {
-  name: "mysql",
-  loader: () => import('@codemirror/lang-sql').then(_ref8 => {
-    let {
-      sql,
-      MySQL
-    } = _ref8;
-    return sql({
-      dialect: MySQL
-    });
-  })
-}, {
-  name: "json",
-  loader: () => import('@codemirror/lang-json').then(_ref9 => {
-    let {
-      json
-    } = _ref9;
-    return json();
-  })
-}, {
-  name: "markdown",
-  loader: () => import('@codemirror/lang-markdown').then(_ref10 => {
-    let {
-      markdown
-    } = _ref10;
-    return markdown();
-  })
-}, {
-  name: "java",
-  loader: () => import('@codemirror/lang-java').then(_ref11 => {
-    let {
-      java
-    } = _ref11;
-    return java();
-  })
-}, {
-  name: "html",
-  loader: () => import('@codemirror/lang-html').then(_ref12 => {
-    let {
-      html
-    } = _ref12;
-    return html();
-  })
-}, {
-  name: "csharp",
-  loader: () => import('@codemirror/legacy-modes/mode/clike').then(_ref13 => {
-    let {
-      csharp
-    } = _ref13;
-    return StreamLanguage.define(csharp);
-  })
-}, {
-  name: "sh",
-  loader: () => import('@codemirror/legacy-modes/mode/shell').then(_ref14 => {
-    let {
-      shell
-    } = _ref14;
-    return StreamLanguage.define(shell);
-  })
-}, {
-  name: "css",
-  loader: () => import('@codemirror/legacy-modes/mode/css').then(_ref15 => {
-    let {
-      css
-    } = _ref15;
-    return StreamLanguage.define(css);
-  })
-}, {
-  name: "scss",
-  loader: () => import('@codemirror/legacy-modes/mode/css').then(_ref16 => {
-    let {
-      css
-    } = _ref16;
-    return StreamLanguage.define(css);
-  })
-}, {
-  name: "sass",
-  loader: () => import('@codemirror/legacy-modes/mode/sass').then(_ref17 => {
-    let {
-      sass
-    } = _ref17;
-    return StreamLanguage.define(sass);
-  })
-}, {
-  name: "ruby",
-  loader: () => import('@codemirror/legacy-modes/mode/ruby').then(_ref18 => {
-    let {
-      ruby
-    } = _ref18;
-    return StreamLanguage.define(ruby);
-  })
-}, {
-  name: "python",
-  loader: () => import('@codemirror/legacy-modes/mode/python').then(_ref19 => {
-    let {
-      python
-    } = _ref19;
-    return StreamLanguage.define(python);
-  })
-}, {
-  name: "xml",
-  loader: () => import('@codemirror/legacy-modes/mode/xml').then(_ref20 => {
-    let {
-      xml
-    } = _ref20;
-    return StreamLanguage.define(xml);
-  })
-}, {
-  name: "yaml",
-  loader: () => import('@codemirror/legacy-modes/mode/yaml').then(_ref21 => {
-    let {
-      yaml
-    } = _ref21;
-    return StreamLanguage.define(yaml);
-  })
-}, {
-  name: "golang",
-  loader: () => import('@codemirror/legacy-modes/mode/go').then(_ref22 => {
-    let {
-      go
-    } = _ref22;
-    return StreamLanguage.define(go);
-  })
-}, {
-  name: "text",
-  loader: () => void 0
-}, {
-  name: "batch",
-  loader: () => void 0
-}];
-const highlightLineClass = "cm-highlight-line";
-const addLineHighlight = StateEffect.define();
-const removeLineHighlight = StateEffect.define();
-const lineHighlightField = StateField.define({
-  create() {
-    return Decoration.none;
-  },
-  update(lines, tr) {
-    lines = lines.map(tr.changes);
-    for (const e of tr.effects) {
-      if (e.is(addLineHighlight)) {
-        lines = lines.update({
-          add: [lineHighlightMark.range(e.value)]
-        });
-      }
-      if (e.is(removeLineHighlight)) {
-        lines = lines.update({
-          filter: from => {
-            return from !== e.value;
-          }
-        });
-      }
-    }
-    return lines;
-  },
-  toJSON(value, state) {
-    const highlightLines = [];
-    const iter = value.iter();
-    while (iter.value) {
-      const lineNumber = state.doc.lineAt(iter.from).number;
-      if (!highlightLines.includes(lineNumber)) {
-        highlightLines.push(lineNumber);
-      }
-      iter.next();
-    }
-    return highlightLines;
-  },
-  fromJSON(value, state) {
-    const lines = state.doc.lines;
-    const highlights = value.filter(line => line <= lines).map(line => lineHighlightMark.range(state.doc.line(line).from));
-    highlights.sort((a, b) => a.from - b.from);
-    try {
-      return Decoration.none.update({
-        add: highlights
-      });
-    } catch (e) {
-      console.error(e);
-      return Decoration.none;
-    }
-  },
-  provide: f => EditorView.decorations.from(f)
-});
-const lineHighlightMark = Decoration.line({
-  class: highlightLineClass
-});
-const highlightState = {
-  highlight: lineHighlightField
-};
-function createCodeMirrorTheme(options) {
-  const {
-    themeCtx
-  } = options;
-  const dark = {
-    color: themeCtx.theme.color.dark[themeCtx.tone]
-  };
-  const light = {
-    color: themeCtx.theme.color.light[themeCtx.tone]
-  };
-  return EditorView.baseTheme({
-    ".cm-lineNumbers": {
-      cursor: "default"
-    },
-    ".cm-line.cm-line": {
-      position: "relative"
-    },
-    // need set background with pseudoelement so it does not render over selection color
-    [".".concat(highlightLineClass, "::before")]: {
-      position: "absolute",
-      top: 0,
-      bottom: 0,
-      left: 0,
-      right: 0,
-      zIndex: -3,
-      content: "''",
-      boxSizing: "border-box"
-    },
-    ["&dark .".concat(highlightLineClass, "::before")]: {
-      background: rgba(dark.color.muted.caution.pressed.bg, 0.5)
-    },
-    ["&light .".concat(highlightLineClass, "::before")]: {
-      background: rgba(light.color.muted.caution.pressed.bg, 0.75)
-    }
-  });
-}
-const highlightLine = config => {
-  const highlightTheme = createCodeMirrorTheme({
-    themeCtx: config.theme
-  });
-  return [lineHighlightField, config.readOnly ? [] : lineNumbers({
-    domEventHandlers: {
-      mousedown: (editorView, lineInfo) => {
-        const line = editorView.state.doc.lineAt(lineInfo.from);
-        let isHighlighted = false;
-        editorView.state.field(lineHighlightField).between(line.from, line.to, (from, to, value) => {
-          if (value) {
-            isHighlighted = true;
-            return false;
-          }
-          return void 0;
-        });
-        if (isHighlighted) {
-          editorView.dispatch({
-            effects: removeLineHighlight.of(line.from)
-          });
-        } else {
-          editorView.dispatch({
-            effects: addLineHighlight.of(line.from)
-          });
-        }
-        if (config == null ? void 0 : config.onHighlightChange) {
-          config.onHighlightChange(editorView.state.toJSON(highlightState).highlight);
-        }
-        return true;
-      }
-    }
-  }), highlightTheme];
-};
-function setHighlightedLines(view, highlightLines) {
-  const doc = view.state.doc;
-  const lines = doc.lines;
-  const allLineNumbers = Array.from({
-    length: lines
-  }, (x, i) => i + 1);
-  view.dispatch({
-    effects: allLineNumbers.map(lineNumber => {
-      const line = doc.line(lineNumber);
-      if (highlightLines == null ? void 0 : highlightLines.includes(lineNumber)) {
-        return addLineHighlight.of(line.from);
-      }
-      return removeLineHighlight.of(line.from);
-    })
-  });
-}
-function useFontSizeExtension(props) {
-  const {
-    fontSize: fontSizeProp
-  } = props;
-  const theme = useTheme();
-  return useMemo(() => {
-    const {
-      code: codeFont
-    } = theme.sanity.fonts;
-    const {
-      fontSize,
-      lineHeight
-    } = codeFont.sizes[fontSizeProp] || codeFont.sizes[2];
-    return EditorView.baseTheme({
-      "&": {
-        fontSize: rem(fontSize)
-      },
-      "& .cm-scroller": {
-        lineHeight: "".concat(lineHeight / fontSize, " !important")
-      }
-    });
-  }, [fontSizeProp, theme]);
-}
-function useThemeExtension() {
-  const themeCtx = useRootTheme();
-  return useMemo(() => {
-    const dark = {
-      color: themeCtx.theme.color.dark[themeCtx.tone]
-    };
-    const light = {
-      color: themeCtx.theme.color.light[themeCtx.tone]
-    };
-    return EditorView.baseTheme({
-      "&.cm-editor": {
-        height: "100%"
-      },
-      "&.cm-editor.cm-focused": {
-        outline: "none"
-      },
-      // Matching brackets
-      "&.cm-editor.cm-focused .cm-matchingBracket": {
-        backgroundColor: "transparent"
-      },
-      "&.cm-editor.cm-focused .cm-nonmatchingBracket": {
-        backgroundColor: "transparent"
-      },
-      "&dark.cm-editor.cm-focused .cm-matchingBracket": {
-        outline: "1px solid ".concat(dark.color.base.border)
-      },
-      "&dark.cm-editor.cm-focused .cm-nonmatchingBracket": {
-        outline: "1px solid ".concat(dark.color.base.border)
-      },
-      "&light.cm-editor.cm-focused .cm-matchingBracket": {
-        outline: "1px solid ".concat(light.color.base.border)
-      },
-      "&light.cm-editor.cm-focused .cm-nonmatchingBracket": {
-        outline: "1px solid ".concat(light.color.base.border)
-      },
-      // Size and padding of gutter
-      "& .cm-lineNumbers .cm-gutterElement": {
-        minWidth: "32px !important",
-        padding: "0 8px !important"
-      },
-      "& .cm-gutter.cm-foldGutter": {
-        width: "0px !important"
-      },
-      // Color of gutter
-      "&dark .cm-gutters": {
-        color: "".concat(rgba(dark.color.card.enabled.code.fg, 0.5), " !important"),
-        borderRight: "1px solid ".concat(rgba(dark.color.base.border, 0.5))
-      },
-      "&light .cm-gutters": {
-        color: "".concat(rgba(light.color.card.enabled.code.fg, 0.5), " !important"),
-        borderRight: "1px solid ".concat(rgba(light.color.base.border, 0.5))
-      }
-    });
-  }, [themeCtx]);
-}
-const CodeMirrorProxy = forwardRef(function CodeMirrorProxy2(props, ref) {
-  const {
-    basicSetup: basicSetupProp,
-    highlightLines,
-    languageMode,
-    onHighlightChange,
-    readOnly,
-    value,
-    ...codeMirrorProps
-  } = props;
-  const themeCtx = useRootTheme();
-  const codeMirrorTheme = useCodeMirrorTheme();
-  const [editorView, setEditorView] = useState(void 0);
-  const themeExtension = useThemeExtension();
-  const fontSizeExtension = useFontSizeExtension({
-    fontSize: 1
-  });
-  const languageExtension = useLanguageExtension(languageMode);
-  const highlightLineExtension = useMemo(() => highlightLine({
-    onHighlightChange,
-    readOnly,
-    theme: themeCtx
-  }), [onHighlightChange, readOnly, themeCtx]);
-  const extensions = useMemo(() => {
-    const baseExtensions = [themeExtension, fontSizeExtension, highlightLineExtension, EditorView.lineWrapping];
-    if (languageExtension) {
-      return [...baseExtensions, languageExtension];
-    }
-    return baseExtensions;
-  }, [fontSizeExtension, highlightLineExtension, languageExtension, themeExtension]);
-  useEffect(() => {
-    if (editorView) {
-      setHighlightedLines(editorView, highlightLines != null ? highlightLines : []);
-    }
-  }, [editorView, highlightLines, value]);
-  const initialState = useMemo(() => {
-    return {
-      json: {
-        doc: value != null ? value : "",
-        selection: {
-          main: 0,
-          ranges: [{
-            anchor: 0,
-            head: 0
-          }]
-        },
-        highlight: highlightLines != null ? highlightLines : []
-      },
-      fields: highlightState
-    };
-  }, []);
-  const handleCreateEditor = useCallback(view => {
-    setEditorView(view);
-  }, []);
-  const basicSetup = useMemo(() => basicSetupProp != null ? basicSetupProp : {
-    highlightActiveLine: false
-  }, [basicSetupProp]);
-  return /* @__PURE__ */jsx(CodeMirror, {
-    ...codeMirrorProps,
-    value,
-    ref,
-    extensions,
-    theme: codeMirrorTheme,
-    onCreateEditor: handleCreateEditor,
-    initialState,
-    basicSetup
-  });
-});
-function useLanguageExtension(mode) {
-  const codeConfig = useContext(CodeInputConfigContext);
-  const [languageExtension, setLanguageExtension] = useState();
-  useEffect(() => {
-    var _a;
-    const customModes = (_a = codeConfig == null ? void 0 : codeConfig.codeModes) != null ? _a : [];
-    const modes = [...customModes, ...defaultCodeModes];
-    const codeMode = modes.find(m => m.name === mode);
-    if (!(codeMode == null ? void 0 : codeMode.loader)) {
-      console.warn("Found no codeMode for language mode ".concat(mode, ", syntax highlighting will be disabled."));
-    }
-    let active = true;
-    Promise.resolve(codeMode == null ? void 0 : codeMode.loader()).then(extension => {
-      if (active) {
-        setLanguageExtension(extension);
-      }
-    }).catch(e => {
-      console.error("Failed to load language mode ".concat(mode), e);
-      if (active) {
-        setLanguageExtension(void 0);
-      }
-    });
-    return () => {
-      active = false;
-    };
-  }, [mode, codeConfig]);
-  return languageExtension;
-}
-export { CodeMirrorProxy as default };
-//# sourceMappingURL=CodeMirrorProxy-A8RWnbXx.js.map