@sanity/code-input 3.0.1 → 4.1.0

package/lib/_chunks/CodeMirrorProxy-3836f097.js

@@ -0,0 +1,619 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var CodeMirror = require('@uiw/react-codemirror');
+var ui = require('@sanity/ui');
+var codemirrorThemes = require('@uiw/codemirror-themes');
+var highlight = require('@lezer/highlight');
+var index = require('./index-17e68aff.js');
+var language = require('@codemirror/language');
+var state = require('@codemirror/state');
+var view = require('@codemirror/view');
+function _interopDefaultCompat(e) {
+  return e && typeof e === 'object' && 'default' in e ? e : {
+    default: e
+  };
+}
+var CodeMirror__default = /*#__PURE__*/_interopDefaultCompat(CodeMirror);
+function useCodeMirrorTheme() {
+  const theme = ui.useTheme();
+  return react.useMemo(() => {
+    const {
+      code: codeFont
+    } = theme.sanity.fonts;
+    const {
+      base,
+      card,
+      dark,
+      syntax
+    } = theme.sanity.color;
+    return codemirrorThemes.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: ui.rgba(base.focusRing, 0.2),
+        selectionMatch: ui.rgba(base.focusRing, 0.4),
+        gutterBackground: card.disabled.bg,
+        gutterForeground: card.disabled.code.fg,
+        gutterActiveForeground: card.enabled.fg
+      },
+      styles: [{
+        tag: [highlight.tags.heading, highlight.tags.heading2, highlight.tags.heading3, highlight.tags.heading4, highlight.tags.heading5, highlight.tags.heading6],
+        color: card.enabled.fg
+      }, {
+        tag: highlight.tags.angleBracket,
+        color: card.enabled.code.fg
+      }, {
+        tag: highlight.tags.atom,
+        color: syntax.keyword
+      }, {
+        tag: highlight.tags.attributeName,
+        color: syntax.attrName
+      }, {
+        tag: highlight.tags.bool,
+        color: syntax.boolean
+      }, {
+        tag: highlight.tags.bracket,
+        color: card.enabled.code.fg
+      }, {
+        tag: highlight.tags.className,
+        color: syntax.className
+      }, {
+        tag: highlight.tags.comment,
+        color: syntax.comment
+      }, {
+        tag: highlight.tags.definition(highlight.tags.typeName),
+        color: syntax.function
+      }, {
+        tag: [highlight.tags.definition(highlight.tags.variableName), highlight.tags.function(highlight.tags.variableName), highlight.tags.className, highlight.tags.attributeName],
+        color: syntax.function
+      }, {
+        tag: [highlight.tags.function(highlight.tags.propertyName), highlight.tags.propertyName],
+        color: syntax.function
+      }, {
+        tag: highlight.tags.keyword,
+        color: syntax.keyword
+      }, {
+        tag: highlight.tags.null,
+        color: syntax.number
+      }, {
+        tag: highlight.tags.number,
+        color: syntax.number
+      }, {
+        tag: highlight.tags.meta,
+        color: card.enabled.code.fg
+      }, {
+        tag: highlight.tags.operator,
+        color: syntax.operator
+      }, {
+        tag: highlight.tags.propertyName,
+        color: syntax.property
+      }, {
+        tag: [highlight.tags.string, highlight.tags.special(highlight.tags.brace)],
+        color: syntax.string
+      }, {
+        tag: highlight.tags.tagName,
+        color: syntax.className
+      }, {
+        tag: highlight.tags.typeName,
+        color: syntax.keyword
+      }]
+    });
+  }, [theme]);
+}
+const defaultCodeModes = [{
+  name: "groq",
+  loader: () => import('@codemirror/lang-javascript').then(_ref => {
+    let {
+      javascript
+    } = _ref;
+    return javascript({
+      jsx: false
+    });
+  })
+}, {
+  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 language.StreamLanguage.define(csharp);
+  })
+}, {
+  name: "sh",
+  loader: () => import('@codemirror/legacy-modes/mode/shell').then(_ref14 => {
+    let {
+      shell
+    } = _ref14;
+    return language.StreamLanguage.define(shell);
+  })
+}, {
+  name: "css",
+  loader: () => import('@codemirror/legacy-modes/mode/css').then(_ref15 => {
+    let {
+      css
+    } = _ref15;
+    return language.StreamLanguage.define(css);
+  })
+}, {
+  name: "scss",
+  loader: () => import('@codemirror/legacy-modes/mode/css').then(_ref16 => {
+    let {
+      css
+    } = _ref16;
+    return language.StreamLanguage.define(css);
+  })
+}, {
+  name: "sass",
+  loader: () => import('@codemirror/legacy-modes/mode/sass').then(_ref17 => {
+    let {
+      sass
+    } = _ref17;
+    return language.StreamLanguage.define(sass);
+  })
+}, {
+  name: "ruby",
+  loader: () => import('@codemirror/legacy-modes/mode/ruby').then(_ref18 => {
+    let {
+      ruby
+    } = _ref18;
+    return language.StreamLanguage.define(ruby);
+  })
+}, {
+  name: "python",
+  loader: () => import('@codemirror/legacy-modes/mode/python').then(_ref19 => {
+    let {
+      python
+    } = _ref19;
+    return language.StreamLanguage.define(python);
+  })
+}, {
+  name: "xml",
+  loader: () => import('@codemirror/legacy-modes/mode/xml').then(_ref20 => {
+    let {
+      xml
+    } = _ref20;
+    return language.StreamLanguage.define(xml);
+  })
+}, {
+  name: "yaml",
+  loader: () => import('@codemirror/legacy-modes/mode/yaml').then(_ref21 => {
+    let {
+      yaml
+    } = _ref21;
+    return language.StreamLanguage.define(yaml);
+  })
+}, {
+  name: "golang",
+  loader: () => import('@codemirror/legacy-modes/mode/go').then(_ref22 => {
+    let {
+      go
+    } = _ref22;
+    return language.StreamLanguage.define(go);
+  })
+}, {
+  name: "text",
+  loader: () => void 0
+}, {
+  name: "batch",
+  loader: () => void 0
+}];
+const highlightLineClass = "cm-highlight-line";
+const addLineHighlight = state.StateEffect.define();
+const removeLineHighlight = state.StateEffect.define();
+const lineHighlightField = state.StateField.define({
+  create() {
+    return view.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));
+    return view.Decoration.none.update({
+      add: highlights
+    });
+  },
+  provide: f => view.EditorView.decorations.from(f)
+});
+const lineHighlightMark = view.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 view.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: ui.rgba(dark.color.muted.caution.pressed.bg, 0.5)
+    },
+    ["&light .".concat(highlightLineClass, "::before")]: {
+      background: ui.rgba(light.color.muted.caution.pressed.bg, 0.75)
+    }
+  });
+}
+const highlightLine = config => {
+  const highlightTheme = createCodeMirrorTheme({
+    themeCtx: config.theme
+  });
+  return [lineHighlightField, config.readOnly ? [] : view.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 = ui.useTheme();
+  return react.useMemo(() => {
+    const {
+      code: codeFont
+    } = theme.sanity.fonts;
+    const {
+      fontSize,
+      lineHeight
+    } = codeFont.sizes[fontSizeProp] || codeFont.sizes[2];
+    return view.EditorView.baseTheme({
+      "&": {
+        fontSize: ui.rem(fontSize)
+      },
+      "& .cm-scroller": {
+        lineHeight: "".concat(lineHeight / fontSize, " !important")
+      }
+    });
+  }, [fontSizeProp, theme]);
+}
+function useThemeExtension() {
+  const themeCtx = ui.useRootTheme();
+  return react.useMemo(() => {
+    const dark = {
+      color: themeCtx.theme.color.dark[themeCtx.tone]
+    };
+    const light = {
+      color: themeCtx.theme.color.light[themeCtx.tone]
+    };
+    return view.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(ui.rgba(dark.color.card.enabled.code.fg, 0.5), " !important"),
+        borderRight: "1px solid ".concat(ui.rgba(dark.color.base.border, 0.5))
+      },
+      "&light .cm-gutters": {
+        color: "".concat(ui.rgba(light.color.card.enabled.code.fg, 0.5), " !important"),
+        borderRight: "1px solid ".concat(ui.rgba(light.color.base.border, 0.5))
+      }
+    });
+  }, [themeCtx]);
+}
+const CodeMirrorProxy = react.forwardRef(function CodeMirrorProxy2(props, ref) {
+  const {
+    basicSetup: basicSetupProp,
+    highlightLines,
+    languageMode,
+    onHighlightChange,
+    readOnly,
+    value,
+    ...codeMirrorProps
+  } = props;
+  const themeCtx = ui.useRootTheme();
+  const codeMirrorTheme = useCodeMirrorTheme();
+  const [editorView, setEditorView] = react.useState(void 0);
+  const themeExtension = useThemeExtension();
+  const fontSizeExtension = useFontSizeExtension({
+    fontSize: 1
+  });
+  const languageExtension = useLanguageExtension(languageMode);
+  const highlightLineExtension = react.useMemo(() => highlightLine({
+    onHighlightChange,
+    readOnly,
+    theme: themeCtx
+  }), [onHighlightChange, readOnly, themeCtx]);
+  const extensions = react.useMemo(() => {
+    const baseExtensions = [themeExtension, fontSizeExtension, highlightLineExtension, view.EditorView.lineWrapping];
+    if (languageExtension) {
+      return [...baseExtensions, languageExtension];
+    }
+    return baseExtensions;
+  }, [fontSizeExtension, highlightLineExtension, languageExtension, themeExtension]);
+  react.useEffect(() => {
+    if (editorView) {
+      setHighlightedLines(editorView, highlightLines != null ? highlightLines : []);
+    }
+  }, [editorView, highlightLines, value]);
+  const initialState = react.useMemo(() => {
+    return {
+      json: {
+        doc: value != null ? value : "",
+        selection: {
+          main: 0,
+          ranges: [{
+            anchor: 0,
+            head: 0
+          }]
+        },
+        highlight: highlightLines != null ? highlightLines : []
+      },
+      fields: highlightState
+    };
+  }, []);
+  const handleCreateEditor = react.useCallback(view => {
+    setEditorView(view);
+  }, []);
+  const basicSetup = react.useMemo(() => basicSetupProp != null ? basicSetupProp : {
+    highlightActiveLine: false
+  }, [basicSetupProp]);
+  return /* @__PURE__ */jsxRuntime.jsx(CodeMirror__default.default, {
+    ...codeMirrorProps,
+    value,
+    ref,
+    extensions,
+    theme: codeMirrorTheme,
+    onCreateEditor: handleCreateEditor,
+    initialState,
+    basicSetup
+  });
+});
+function useLanguageExtension(mode) {
+  const codeConfig = react.useContext(index.CodeInputConfigContext);
+  const [languageExtension, setLanguageExtension] = react.useState();
+  react.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;
+}
+exports.default = CodeMirrorProxy;
+//# sourceMappingURL=CodeMirrorProxy-3836f097.js.map